/* gondosearch.com — feuille de style unique.
   Valeurs : docs/design/inscription/README.md (passation du brief n° 6) et docs/design/assets/gondo-variables.css
   (guide de marque). Polices hébergées sur le site, jamais chez Google. Aucun style en ligne : la politique de
   sécurité du contenu les interdit. */

@font-face { font-family: "Karla"; src: url("/polices/karla-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/polices/karla-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/polices/karla-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/polices/newsreader-opsz.woff2") format("woff2-variations"), url("/polices/newsreader-opsz.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --gondo-surface: #FBF7F2;
  --gondo-blanc: #FFFFFF;
  --gondo-encre: #1C1917;
  --gondo-texte: #524840;
  --gondo-bordure: #D8CBB6;
  --gondo-bordure-champ: #8E7A5E;
  --gondo-noyer: #46301F;
  --gondo-kraft: #EFE2CE;
  --gondo-ambre: #E8A21C;
  --gondo-info: #2C5C86;
  --gondo-succes: #16704A;
  --gondo-attention: #8A5A12;
  --gondo-attention-fond: #F6E4B8;
  --gondo-erreur: #9C231A;
  --gondo-focus: 0 0 0 2px #FBF7F2, 0 0 0 4px #46301F;
  --gondo-ombre-2: 0 6px 18px rgba(28, 25, 23, .10);
  --gondo-rayon-m: 3px;
  --gondo-police-titre: "Newsreader", Georgia, serif;
  --gondo-police-texte: "Karla", "Helvetica Neue", sans-serif;
  --marge: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gondo-surface); color: var(--gondo-encre); font-family: var(--gondo-police-texte); font-size: 16px; line-height: 1.6; font-optical-sizing: auto; }
h1, h2, h3, p { margin: 0; }
a { color: var(--gondo-encre); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--gondo-noyer); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex="-1"]:focus-visible { outline: none; box-shadow: var(--gondo-focus); }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { box-shadow: none; outline: 2px solid var(--gondo-noyer); outline-offset: 2px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.libelle { font-weight: 600; font-size: 13px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--gondo-texte); }
.petit { font-size: 14px; line-height: 1.55; color: var(--gondo-texte); }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--marge); border-bottom: 1px solid var(--gondo-bordure); }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-tuile { display: block; width: 40px; height: 40px; flex: none; }
.logo-mot { font-family: var(--gondo-police-titre); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--gondo-noyer); }
.langues { display: flex; border: 1px solid var(--gondo-bordure-champ); border-radius: var(--gondo-rayon-m); overflow: hidden; }
.langues a { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--gondo-encre); }
.langues a:hover { text-decoration: underline; color: var(--gondo-encre); }
.langues a[aria-current="page"] { background: var(--gondo-encre); color: var(--gondo-blanc); }
.langues a:focus-visible { box-shadow: inset 0 0 0 2px var(--gondo-noyer), inset 0 0 0 4px var(--gondo-surface); }

/* Page d'inscription */
.accueil { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(48px, 5vw, 72px); padding: clamp(40px, 5.5vw, 80px) var(--marge) clamp(56px, 6.5vw, 96px); }
.colonne-texte { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 4.5vw, 64px); }
.colonne-formulaire { flex: 1 1 380px; max-width: 460px; min-width: 0; position: sticky; top: 32px; }

.slogan { display: flex; flex-direction: column; gap: 20px; }
.slogan h1 { font-family: var(--gondo-police-titre); font-weight: 400; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.015em; color: var(--gondo-encre); text-wrap: balance; }
.slogan .phrase { max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--gondo-texte); text-wrap: pretty; }

.preuve { display: flex; flex-direction: column; gap: 14px; }
.preuve-aplat { background: var(--gondo-noyer); border-radius: var(--gondo-rayon-m); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 32px; }
.preuve-aplat h2 { max-width: 640px; font-family: var(--gondo-police-titre); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--gondo-surface); text-wrap: pretty; }
.preuve-chiffres { display: flex; flex-wrap: wrap; gap: 28px 32px; }
.preuve-bloc { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.preuve-bloc p { font-size: 16px; line-height: 1.5; color: var(--gondo-surface); text-wrap: pretty; }
.preuve-bloc .chiffre { font-family: var(--gondo-police-titre); font-weight: 400; font-size: 48px; line-height: 1; color: var(--gondo-kraft); }
.preuve-bloc .chiffre-second { font-size: 32px; margin-top: 8px; }
.chiffre-prefixe { font-size: 24px; }
.preuve-pied { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; font-size: 14px; line-height: 1.55; color: var(--gondo-texte); }
.lien-fort { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 600; font-size: 16px; }

.benefices { display: flex; flex-direction: column; gap: 24px; }
.benefices h2.libelle { line-height: 1; }
.benefices-liste { display: flex; flex-wrap: wrap; gap: 32px; }
.benefice { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tuile { width: 64px; height: 64px; background: var(--gondo-kraft); border-radius: var(--gondo-rayon-m); display: flex; align-items: center; justify-content: center; }
.tuile img { display: block; width: 48px; height: 48px; }
.benefice h3 { font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--gondo-encre); }
.benefice p { font-size: 16px; line-height: 1.6; color: var(--gondo-texte); text-wrap: pretty; }

/* Formulaire */
.carte { background: var(--gondo-blanc); border: 1px solid var(--gondo-bordure); border-radius: var(--gondo-rayon-m); padding: 28px 24px; }
.formulaire { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.formulaire h2, .envoye h2 { font-family: var(--gondo-police-titre); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--gondo-encre); text-wrap: balance; }

.alerte { display: flex; gap: 10px; align-items: flex-start; background: var(--gondo-erreur); color: var(--gondo-blanc); border-radius: var(--gondo-rayon-m); padding: 14px 16px; font-size: 16px; line-height: 1.5; }
.alerte a { color: var(--gondo-blanc); }
.alerte a:hover { color: var(--gondo-blanc); }
.alerte-corps { display: flex; flex-direction: column; gap: 4px; }
.alerte-titre { font-weight: 700; }
.alerte ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

.pastille { flex: none; border-radius: 50%; font-weight: 700; text-align: center; }
.pastille-alerte { width: 18px; height: 18px; background: var(--gondo-blanc); color: var(--gondo-erreur); font-size: 12px; line-height: 18px; margin-top: 3px; }
.pastille-erreur { width: 16px; height: 16px; background: var(--gondo-erreur); color: var(--gondo-blanc); font-size: 11px; line-height: 16px; margin-top: 2px; }
.pastille-info { width: 18px; height: 18px; background: var(--gondo-info); color: var(--gondo-blanc); font-size: 12px; line-height: 18px; }
.pastille-succes { width: 18px; height: 18px; background: var(--gondo-succes); color: var(--gondo-blanc); font-size: 11px; line-height: 18px; }
.pastille-attention { width: 16px; height: 16px; background: var(--gondo-attention); color: var(--gondo-attention-fond); font-size: 11px; line-height: 16px; }

.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-weight: 600; font-size: 16px; line-height: 1.4; }
.mention { font-weight: 400; font-size: 14px; color: var(--gondo-texte); }
.champ input { font-family: var(--gondo-police-texte); font-size: 16px; color: var(--gondo-encre); background: var(--gondo-blanc); border: 1px solid var(--gondo-bordure-champ); border-radius: var(--gondo-rayon-m); padding: 11px 13px; min-height: 46px; width: 100%; }
.champ input.en-erreur { border: 1.5px solid var(--gondo-erreur); }
.message-erreur { display: flex; align-items: flex-start; gap: 7px; }
.message-erreur > span:last-child { font-size: 14px; line-height: 1.45; color: var(--gondo-erreur); }
.message-erreur.decale { margin-left: 32px; }

.groupe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.groupe legend { padding: 0; margin: 0 0 10px; font-weight: 600; font-size: 16px; line-height: 1.4; }
.choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--gondo-bordure-champ); border-radius: var(--gondo-rayon-m); background: var(--gondo-blanc); font-size: 16px; line-height: 1.3; cursor: pointer; }
.option:has(input:checked) { border-color: var(--gondo-encre); box-shadow: inset 0 0 0 1px var(--gondo-encre); background: var(--gondo-surface); }
.option input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--gondo-encre); }

.consentement { display: flex; flex-direction: column; gap: 8px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--gondo-encre); }
.aide { margin-left: 32px; font-size: 14px; line-height: 1.45; color: var(--gondo-texte); }

.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bouton { width: 100%; min-height: 48px; font-family: var(--gondo-police-texte); font-weight: 700; font-size: 15px; line-height: 1; background: var(--gondo-ambre); color: var(--gondo-encre); border: 0; border-radius: var(--gondo-rayon-m); padding: 14px 20px; cursor: pointer; }
.bouton:hover { box-shadow: var(--gondo-ombre-2); }
.bouton:focus-visible { box-shadow: var(--gondo-focus); }

.recevrez { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--gondo-bordure); padding-top: 20px; }
.recevrez .libelle { line-height: 1; }
.recevrez ul { margin: 0; padding: 0 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--gondo-texte); display: flex; flex-direction: column; gap: 4px; }

/* Après envoi */
.envoye { display: flex; flex-direction: column; gap: 18px; }
.envoye > p { font-size: 16px; line-height: 1.6; color: var(--gondo-texte); }
.envoye > p.petit { font-size: 14px; line-height: 1.55; }
.envoye strong, .lien-bloc strong { font-weight: 700; color: var(--gondo-encre); }
.statut { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.statut-info { color: var(--gondo-info); }
.statut-succes { color: var(--gondo-succes); }
.envoye .statut-succes { font-weight: 400; }
.actions-texte { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.bouton-texte { background: none; border: 0; padding: 10px 0; min-height: 44px; font-family: var(--gondo-police-texte); font-weight: 600; font-size: 16px; color: var(--gondo-encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Arrivée par un lien d'e-mail, page introuvable */
.lien { display: flex; justify-content: center; padding: clamp(56px, 8vw, 120px) var(--marge); }
.lien-bloc { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lien-bloc h1 { font-family: var(--gondo-police-titre); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; color: var(--gondo-encre); text-wrap: balance; }
.lien-bloc .phrase { font-size: 18px; line-height: 1.6; color: var(--gondo-texte); text-wrap: pretty; }
.lien-bloc .lien-fort { min-height: 44px; }
.lien-bloc form { margin: 0; }
.lien-bloc .bouton { width: auto; }
.badge-attention { display: flex; align-items: center; gap: 8px; background: var(--gondo-attention-fond); border-radius: var(--gondo-rayon-m); padding: 6px 10px; font-weight: 600; font-size: 14px; color: var(--gondo-attention); }

/* Pages de texte : « Comment on a mesuré », pages légales */
.document { display: flex; justify-content: center; padding: clamp(40px, 5.5vw, 80px) var(--marge) clamp(56px, 6.5vw, 96px); }
.texte { width: 100%; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--gondo-texte); overflow-wrap: anywhere; }
.texte h1 { font-family: var(--gondo-police-titre); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; color: var(--gondo-encre); margin: 0 0 24px; text-wrap: balance; }
.texte h2 { font-family: var(--gondo-police-titre); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--gondo-encre); margin: 48px 0 16px; text-wrap: balance; }
.texte h3 { font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--gondo-encre); margin: 32px 0 12px; }
.texte p, .texte ul, .texte ol { margin: 0 0 16px; }
.texte li + li { margin-top: 4px; }
.texte strong { color: var(--gondo-encre); }
.texte table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; line-height: 1.45; }
.texte th, .texte td { border-bottom: 1px solid var(--gondo-bordure); padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.texte th { color: var(--gondo-encre); font-weight: 700; }
.texte hr { border: 0; border-top: 1px solid var(--gondo-bordure); margin: 32px 0; }
.texte code { font-size: .9em; }

/* Pied de page */
.pied { border-top: 1px solid var(--gondo-bordure); padding: 24px var(--marge); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; font-size: 14px; line-height: 1.55; color: var(--gondo-texte); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pied a { display: inline-block; padding: 4px 0; }