/* Codeploy — feuille de style.
   Toute valeur de charte est un jeton. Aucune couleur en dur hors :root.
   Voir DESIGN-SYSTEM.md avant de modifier. */

:root {
  --bleu-leman: #12284C;
  --ambre: #F0A202;
  --ardoise: #4A5568;
  --beton: #E1E5EB;
  --papier: #F6F7F9;
  --blanc: #FFFFFF;
  --texte-inverse: #DDE1E7;
  --surtitre-inverse: #9CB7D6;

  --module: 8px;
  --rayon: 6px;
  --rayon-petit: 4px;

  --corps: 17px;
  --interligne: 1.55;
  --titre-page: clamp(32px, 5vw, 56px);
  --titre-section: clamp(28px, 4vw, 44px);
  --titre-carte: 18px;
  --repere: 13px;

  --largeur-max: 1200px;
  --gouttiere: 16px;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;      /* police variable : axe wght 100-900 */
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Voir le commentaire sur `body` juste en dessous : les deux sont
     nécessaires, la propagation de `overflow` du body vers le viewport
     n'étant pas fiable à elle seule pour rogner un dépassement. */
  overflow-x: hidden;
}

body {
  margin: 0;
  /* Filet de sécurité : garde-fou pour qu'un futur élément décoratif large
     ne puisse pas, à lui seul, faire défiler toute la page horizontalement.
     L'accolade du hero (voir .hero__accolade) est une piste flex normale,
     sans positionnement absolu ni calcul relatif à la fenêtre, donc sans
     risque de débordement de ce genre. */
  overflow-x: hidden;
  background: var(--papier);
  color: var(--bleu-leman);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--corps);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--titre-page); }
h2 { font-size: var(--titre-section); }
h3 { font-size: var(--titre-carte); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* ── Rythme vertical ─────────────────────────────────────── */
/* Les marges de `h1`-`h3` et de `p` sont remises à zéro juste au-dessus.
   Sans les règles qui suivent, seuls les quatre composants qui portent leur
   propre `gap` respirent : partout ailleurs les titres de 44px tombent sur
   la ligne précédente et les paragraphes se touchent. Toutes les valeurs
   dérivent du module de 8px, par pas de 4px (DESIGN-SYSTEM.md § 4). */

main > section { padding-block: calc(var(--module) * 5); }        /* 40px entre sections */

main * + * { margin-top: calc(var(--module) * 2); }               /* 16px : le flux par défaut */
main :is(h1, h2, h3) + * { margin-top: calc(var(--module) * 2); } /* 16px sous un titre */
main * + h2 { margin-top: calc(var(--module) * 6); }              /* 48px avant un titre de section */
main * + h3 { margin-top: calc(var(--module) * 3); }              /* 24px avant un intertitre */
main :is(ul, ol) { padding-left: calc(var(--module) * 3); }
main li + li { margin-top: var(--module); }                       /* 8px entre deux lignes */
main label { margin-top: calc(var(--module) * 3); }               /* 24px au-dessus du champ */
main label + :is(input, textarea) { margin-top: 0; }              /* le label porte déjà l'écart */
main .etape + .etape { margin-top: calc(var(--module) * 4); }     /* 32px entre deux temps */

/* Les composants qui gèrent déjà leur espacement par `gap` gardent le leur :
   y ajouter le flux les doublerait. */
main :is(.hero, .hero__actions, .bande-methode, .bande-methode__item,
         .grille-irritants, .carte-irritant, .carte-irritant__reponse,
         .colonnes, .citation, .etape) > * { margin-top: 0; }

/* ── Liens de contenu ────────────────────────────────────── */
/* `a { color: inherit }` rend invisibles les liens du corps de texte : les
   deux sorties de l'accueil vers le reste du site (spec § 4) s'affichaient
   comme du texte ordinaire. Soulignement discret plutôt qu'une couleur
   d'accent — l'ambre est réservé aux accolades décoratives (règle 1), et il
   échoue de toute façon au contraste (1,98 sur papier). Ni la navigation ni
   les boutons ne sont touchés. */

:is(main, .pied) a:not(.bouton) {
  text-decoration: underline;
  text-decoration-color: var(--ardoise);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:is(main, .pied) a:not(.bouton):hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* État survolé : ardoise sur papier vaut 7,02 et sur carte 7,53, au-dessus
   du seuil AA de 4,5. L'ambre y valait 1,98 et 2,13. */
a:hover { color: var(--ardoise); }

/* Anneau de focus : bleu Léman sur papier vaut 13,67, très au-dessus du
   seuil de 3,0 exigé pour un élément non textuel (WCAG 1.4.11). L'ambre y
   valait 1,98 : un anneau ambre était invisible pour qui en a besoin. Sur
   fond bleu, l'anneau passe au blanc (14,65). */
:focus-visible {
  outline: 2px solid var(--bleu-leman);
  outline-offset: 3px;
}

/* ── Primitives de formulaire ────────────────────────────── */
/* Ajout au-delà du brief initial : une page de contact ultérieure emploie
   label/input/textarea sans classes. Sobre, conforme à la charte : bordure
   béton, rayon standard, fond blanc, texte bleu Léman, police héritée
   (Archivo, via body), espacements multiples du module de 8px. Le focus
   reprend l'anneau défini par :focus-visible ci-dessus. */

label {
  display: block;
  margin-bottom: var(--module);
  font-weight: 600;
}

input, textarea {
  display: block;
  width: 100%;
  margin-bottom: calc(var(--module) * 3);
  padding: calc(var(--module) * 1.5) calc(var(--module) * 2);
  border: 1px solid var(--beton);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--bleu-leman);
  font-family: inherit;
  font-size: var(--corps);
  line-height: var(--interligne);
}

textarea {
  resize: vertical;
  min-height: calc(var(--module) * 16);
}

/* Champ leurre du formulaire de contact : hors écran plutôt qu'en style
   en ligne, pour rester compatible avec la politique de sécurité de
   contenu du conteneur nginx (style-src 'self', sans 'unsafe-inline'). */
.champ-leurre {
  position: absolute;
  left: -9999px;
}

/* Geist Mono : repères techniques uniquement, jamais un titre. */
.repere, .surtitre {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--repere);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
}

.contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ── Boutons ─────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--module) * 1.5);
  padding: calc(var(--module) * 1.5) calc(var(--module) * 3);
  border-radius: var(--rayon-petit);
  font: inherit;             /* un <button> ne hérite pas de la police du corps */
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Maquette source : bleu Léman plein, texte blanc. L'ambre n'habille que
   les accolades décoratives (un seul élément ambre par page, voir
   tools/test_site.py::test_le_budget_ambre_est_respecte), jamais un bouton. */
.bouton--principal {
  background: var(--bleu-leman);
  color: var(--blanc);
}
.bouton--principal:hover { background: transparent; color: var(--bleu-leman); border-color: var(--bleu-leman); }

.bouton--secondaire {
  background: transparent;
  color: var(--bleu-leman);
  border-color: var(--bleu-leman);
}
.bouton--secondaire:hover { background: var(--bleu-leman); color: var(--blanc); }

/* ── En-tête ─────────────────────────────────────────────── */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--module) * 4);
  padding-block: calc(var(--module) * 3);
  border-bottom: 1px solid var(--beton);
}

.entete__logo { display: flex; align-items: center; gap: var(--module); }

/* Logotype de marque : le mot « Codeploy », les accolades hautes/basses qui
   l'embrassent. Hauteur réelle 38px (le viewBox a grandi de 146 à 174
   unités quand les accolades ont été écartées du mot ; 38px garde au mot
   lui-même la taille qu'il avait à 32px), largement au-dessus des 24px sous
   lesquels la charte impose le monogramme (DESIGN-SYSTEM.md § 5 règle 4) —
   le mot complet reste donc de mise ici, en-tête comme pied de page.
   `width: auto` préserve le ratio du viewBox : un carré l'aurait
   écrasé, ce dessin est large et bas. */
.entete__logo__marque { height: 38px; width: auto; display: block; }

.nav { display: flex; gap: calc(var(--module) * 3); align-items: center; }

/* Lien de la page courante : graisse plus appuyée, pas de couleur d'accent —
   un filet ou une couleur ambre ajouterait un élément ambre au budget d'écran
   (voir DESIGN-SYSTEM.md § 1) sans rien apporter de plus que le gras. */
.nav__lien--actif { font-weight: 700; }

/* ── Hero ────────────────────────────────────────────────── */

/* `.hero` porte aussi la classe `.contenu` : c'est cette dernière qui centre
   la boîte de 1200px dans la fenêtre et lui donne sa gouttière de 16px
   (donc un départ de contenu à 57px du bord, comme le reste du site — voir
   DESIGN-SYSTEM.md). `.hero` ne doit donc plus reprendre son propre
   `max-width` sur cette même boîte : ça la recentrait dans les 1200px
   disponibles et décalait la colonne de texte vers la droite. La largeur de
   lecture (820px) est portée par `.hero__contenu`, pas par `.hero` — la
   boîte de section reste calée sur la même gouttière que le reste de la
   page, seule la colonne de texte est plafonnée.
   Rangée flex plutôt que bloc simple : la hauteur de l'accolade doit suivre
   celle du bloc de texte pour « le tenir » au lieu de flotter à côté de
   lui — un `align-items: stretch` de flexbox donne ça directement, sans
   dépendre de la hauteur totale de la section (padding-block compris). */
.hero {
  padding-block: calc(var(--module) * 12) calc(var(--module) * 10);
  display: flex;
  align-items: stretch;
  gap: calc(var(--module) * 4);
}

.hero__contenu {
  display: grid;
  gap: calc(var(--module) * 3);
  max-width: 820px;
}

/* L'accolade décorative « tient » le bloc de texte : elle est posée juste à
   côté de la colonne de lecture, pas ancrée sur le bord de la fenêtre, et
   s'étire (par `align-items: stretch` sur `.hero`) exactement sur la
   hauteur réelle du texte — jamais sur le padding-block du hero, qui
   l'aurait fait déborder au-dessus et en dessous et donner l'impression
   d'un trait égaré plutôt que d'un repère qui accompagne le contenu.
   Largeur fixe et modeste (48px) : un trait qui accompagne, pas un aplat
   qui domine l'écran. `flex-shrink: 0` l'empêche de se faire écraser
   quand `.hero__contenu` réclame toute la place restante.
   Le symbole `accolade-verticale` est dessiné ouvrant (« { », pointe à
   gauche, bras vers la droite) parce qu'il se pose d'ordinaire À GAUCHE
   d'une citation. Posé ici à DROITE du texte sans retournement, ses bras
   s'ouvraient sur le vide et n'encadraient rien. Miroir horizontal : il
   devient « } » et referme le bloc de texte. */
.hero__accolade {
  flex: 0 0 calc(var(--module) * 6);
  color: var(--ambre);
  transform: scaleX(-1);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: calc(var(--module) * 2); }

/* ── Bande de la méthode ─────────────────────────────────── */

.bande-methode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: calc(var(--module) * 3);
  padding-block: calc(var(--module) * 8);
  border-top: 1px solid var(--beton);
}

.bande-methode__item { display: flex; flex-direction: column; gap: calc(var(--module) * 1.5); }
.bande-methode__item svg { width: 48px; height: 48px; color: var(--bleu-leman); }

/* ── Carte d'irritant ────────────────────────────────────── */

.grille-irritants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: calc(var(--module) * 3);
}

.carte-irritant {
  background: var(--blanc);
  border: 1px solid var(--beton);
  border-radius: var(--rayon);
  padding: calc(var(--module) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--module) * 1.5);
}

.carte-irritant__numero {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--repere);
  color: var(--ardoise);
}

.carte-irritant__reponse {
  border-top: 1px solid var(--beton);
  padding-top: calc(var(--module) * 1.5);
  margin-top: auto;
}

.carte-irritant__etiquette {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
  display: block;
  margin-bottom: calc(var(--module) * .5);
}

/* ── Étape numérotée ─────────────────────────────────────── */

.etape { display: flex; gap: calc(var(--module) * 2.5); align-items: flex-start; }

.etape__numero {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bleu-leman);
  color: var(--blanc);
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
}

/* ── Bloc bleu pleine largeur ────────────────────────────── */

.bloc-bleu {
  background: var(--bleu-leman);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: calc(var(--module) * 6);
}

/* Rappel de marque en tête du bloc de contact : variante claire, faite
   pour un fond bleu Léman (voir DESIGN-SYSTEM.md § 4 — la couleur foncée
   y serait illisible). Même hauteur de 38px que le logotype d'en-tête. */
.bloc-bleu__marque { height: 38px; width: auto; display: block; margin-bottom: calc(var(--module) * 2); }

.bloc-bleu p { color: var(--texte-inverse); }
/* Le soulignement des liens de contenu passe en clair : l'ardoise du
   soulignement par défaut disparaîtrait sur ce fond. */
.bloc-bleu a:not(.bouton) { text-decoration-color: var(--surtitre-inverse); }
.bloc-bleu .surtitre { color: var(--surtitre-inverse); }
/* Sur fond bleu, l'ardoise du survol tomberait à 1,95 : le survol et
   l'anneau de focus passent au blanc (14,65). */
.bloc-bleu a:hover { color: var(--blanc); }
.bloc-bleu :focus-visible { outline-color: var(--blanc); }

/* Un bouton secondaire à bordure bleue serait invisible sur ce fond :
   bordure et texte passent au clair. */
.bloc-bleu .bouton--secondaire { color: var(--blanc); border-color: var(--texte-inverse); }
.bloc-bleu .bouton--secondaire:hover { background: var(--blanc); color: var(--bleu-leman); border-color: var(--blanc); }

/* ── Citation en accolades ───────────────────────────────── */

.citation { display: flex; gap: calc(var(--module) * 3); align-items: stretch; }
.citation__accolade { flex: 0 0 22px; color: var(--ambre); }
.citation__accolade svg { width: 22px; height: 100%; }

/* ── Colonne à filet supérieur ───────────────────────────── */

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: calc(var(--module) * 4);
}

.colonne-filet { border-top: 2px solid var(--bleu-leman); padding-top: calc(var(--module) * 2); }

/* ── Pied de page ────────────────────────────────────────── */

.pied {
  border-top: 1px solid var(--beton);
  padding-block: calc(var(--module) * 6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--module) * 3);
  align-items: flex-end;
}

/* Même logotype qu'en en-tête (couleur : le pied reste sur fond papier,
   jamais bleu) — c'était un simple mot en texte courant, sans le dessin
   des accolades ; incohérent avec l'en-tête qu'il accompagne. */
.pied__marque { display: inline-flex; margin-bottom: var(--module); }

.pied__adresse {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--repere);
  line-height: 1.7;
  color: var(--ardoise);
}

.pied__devise { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

/* ── Adaptation aux petits écrans ────────────────────────── */

@media (max-width: 720px) {
  .entete { flex-wrap: wrap; }
  .nav { display: none; }
  .nav--ouverte { display: flex; flex-direction: column; width: 100%; align-items: flex-start; }
  .bascule-menu { display: block; }
  .bloc-bleu { padding: calc(var(--module) * 3); }
}

/* Sous 900px, la colonne de lecture (820px) et l'accolade n'ont plus la
   place de coexister sans se serrer l'une contre l'autre : l'accolade se
   retire plutôt que d'écraser le texte. */
@media (max-width: 899px) {
  .hero__accolade { display: none; }
}

@media (min-width: 721px) { .bascule-menu { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}