/* ============================================================================ Sélecteur de pays — racine du millésime 2026. Toutes les valeurs de ce fichier sont relevées sur la production (exoshare.exosens.com, bloc « .index » de assets/css/styles.css), qui reste la référence : c'est l'écran que le client connaît. La prod compose en rem sur un `html { font-size: 62.5% }` (1rem = 10px) ; les valeurs sont reprises ici en pixels, à l'identique — 3.6rem devient 36px, 1.6rem devient 16px. Cet écran ne charge ni la barre de navigation ni le pied de page : il est servi avant qu'un pays soit choisi. Il n'est pas non plus bridé à --exo-maxw : la prod le compose en pleine largeur avec des gouttières de 60px, et le cadre des pastilles suit la fenêtre (1080px de large sur un écran de 1440). Le brider à 1200px déplacerait le cartouche jaune et le cadre sur tous les écrans larges. ============================================================================ */ /* Le porte lui-même le bloc « .index » de la prod : la prod empile html/body en flex colonne pour donner `flex: 1 0 0` à .index, ce qui revient exactement à un body en min-height:100vh. Un niveau de moins, même rendu. */ .exo-index { position: relative; isolation: isolate; /* sans ça, la mappemonde en z-index négatif passerait sous le fond du body */ display: flex; flex-direction: column; align-items: flex-start; gap: 40px; min-height: 100vh; padding: 60px; background: var(--exo-bleu-nuit); /* La prod compose tout cet écran en interligne « normal » ; l'interligne à 1.5 du socle décalerait de 12px la position du cadre des pastilles, en gonflant les lignes qui portent les deux logos. Chaque bloc de texte ci-dessous pose de toute façon son propre interligne. */ line-height: normal; } /* Équivalent du `background: url(map.svg) no-repeat center / cover` de la prod. Passer par une plutôt que par la feuille permet de construire l'URL avec $app->asset(), donc de suivre le bucket S3 en préprod et en prod. */ .exo-index__carte { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ----- En-tête ------------------------------------------------------------ */ /* Pas de bandeau blanc en prod : le logo blanc est posé à même le fond sombre. */ .exo-index__header { width: 100%; } .exo-index__header img { display: block; width: 200px; /* taille intrinsèque du SVG, la prod ne la contraint pas */ height: auto; } /* ----- Colonne principale ------------------------------------------------- */ .exo-index__main { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 80px; } /* ----- Bloc ExoShare ------------------------------------------------------ */ .exo-index__titre { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 20px; } /* En prod l'image est en ligne, donc son bloc mesure 3px de plus que l'image (88px pour 85px) : c'est le talon de la ligne, dicté par la descendante de la police. On préfère un bloc, dont la hauteur ne dépend d'aucune métrique de police — au prix de ces 3px, invisibles, mais identiques partout. */ .exo-index__marque img { display: block; width: 421px; height: auto; } .exo-index__baseline { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 0; color: var(--exo-blanc); font-size: 36px; font-weight: 700; line-height: 120%; text-transform: uppercase; } /* Chaque ligne de la baseline est un bloc : « PARTICIPEZ » hérite du 36/700, les deux suivantes sont composées de mots en 30/400. */ .exo-index__baseline > span { display: block; } .exo-index__mot { font-size: 30px; font-weight: 400; line-height: normal; } .exo-index__mot--jaune { color: var(--exo-jaune); } /* ----- Choix du pays ------------------------------------------------------ */ /* La zone occupe la hauteur restante mais ne centre pas : le cartouche se cale sous les 80px d'écart, le vide reste en bas de l'écran, comme en prod. */ .exo-index__zone { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; align-self: stretch; } .exo-index__zone-inner { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; padding: 0 60px; } /* Cartouche jaune : largeur au contenu, calé à gauche, et au-dessus du cadre blanc qui vient le chevaucher de 20px. */ .exo-index__consigne { z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; background: var(--exo-jaune); } .exo-index__consigne > div { color: var(--exo-noir); font-size: 20px; font-weight: 400; line-height: normal; } .exo-index__consigne b { font-weight: 700; } /* Les -20px font remonter le cadre sous le cartouche ; les 60px de gouttière s'ajoutent à ceux de .exo-index__zone-inner, d'où le décalage de 120px entre le bord gauche du cartouche et celui du cadre. */ .exo-index__cadre { display: flex; align-items: flex-start; align-self: stretch; justify-content: center; gap: 10px; margin-top: -20px; padding: 0 60px; } /* Le coin haut-droit vif est la signature de la charte : 40px partout sauf là. */ .exo-index__liste { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 40px; border: 2px solid var(--exo-blanc); border-radius: 40px 0 40px 40px; } .exo-index__liste > ul { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px; } .exo-index__liste a { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 16px; color: var(--exo-bleu-nuit); background: rgba(255, 254, 254, 0.7); font-size: 16px; font-weight: 400; line-height: normal; text-decoration: none; } /* Le passage en gras élargirait la pastille : la prod compense en reprenant 4px de gouttière de chaque côté, ce qui garde la rangée stable. */ .exo-index__liste a:hover, .exo-index__liste a:focus-visible { padding: 8px 16px; background: var(--exo-blanc); box-shadow: 0 0 20px 0 var(--exo-blanc); font-weight: 700; cursor: pointer; } /* La prod n'a pas d'état clavier : sur fond blanc le halo seul ne se voit pas. */ .exo-index__liste a:focus-visible { outline: 3px solid var(--exo-jaune); outline-offset: 2px; } /* ----- Sous 1050px -------------------------------------------------------- */ @media screen and (max-width: 1050px) { .exo-index { align-items: center; gap: 40px; padding: 20px; } /* Le logo se recentre sous 1050px. La prod y parvient par text-align, qui ne mord pas sur une image en bloc : d'où les marges automatiques. */ .exo-index__header img { width: 180px; height: auto; margin-inline: auto; } .exo-index__main { align-items: center; gap: 40px; } .exo-index__marque img { width: auto; max-width: 200px; height: auto; } .exo-index__baseline { font-size: 24px; } .exo-index__mot { font-size: 20px; } .exo-index__zone-inner { padding: 0; } .exo-index__consigne > div { font-size: 16px; } .exo-index__cadre { padding: 0 20px; } .exo-index__liste { padding: 30px 20px; } /* Les pastilles passent en colonne pleine largeur, une par ligne. */ .exo-index__liste > ul { flex-direction: column; align-items: center; align-self: stretch; } .exo-index__liste > ul > li { align-self: stretch; } .exo-index__liste a { display: flex; align-items: center; justify-content: center; padding: 5px 10px; } }