/* ═══════════════════════════════════════════════════════════════════════════
   MAALOUMADATAGOUV — FEUILLE DE STYLE
   ───────────────────────────────────────────────────────────────────────────
   Système « Broadsheet » : la page est une feuille de papier journal.
   Pas de cadres, pas de séparateurs entre les sections — la hiérarchie vient
   de l'échelle typographique et du blanc. Les seuls filets qui s'impriment
   sont ceux de la barre de repères, en encre pleine.

   POUR CHANGER LES COULEURS : tout se règle dans le bloc « PALETTE »
   ci-dessous. Ne modifiez rien d'autre dans ce fichier.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. POLICES ══════════════════════════════════════════════════════════
   Source Serif 4 en version variable, hébergée sur VOTRE serveur.
   Aucune requête vers Google : conforme RGPD, et le site s'affiche même si
   Google Fonts est bloqué. Le navigateur ne télécharge « latin-ext » que si
   un caractère de cette plage apparaît réellement dans la page.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-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;
}


/* ═══ 2. PALETTE ET MESURES ═══════════════════════════════════════════════
   ★★★ C'EST ICI QUE VOUS CHANGEZ LES COULEURS DU SITE ★★★
   ═════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Les cinq couleurs du site ─────────────────────────────────────── */

  --color-bg:       #D3B39A;  /* le sable — fond de toutes les pages         */
  --color-surface:  #EFE0D0;  /* fond des champs de formulaire (plus clair)  */
  --color-text:     #201E1D;  /* l'encre — tous les textes        8,45:1 ✓   */

  --color-accent:   #5C3A21;  /* BRUN TABAC — liens, boutons      5,13:1 ✓   */
  --color-accent-2: #7A2A16;  /* BRIQUE — étoiles, chiffre clé    4,93:1 ✓   */

  /* Troisième encre, utilisée UNIQUEMENT par les titres en plaques
     désalignées (l'effet d'impression typographique). Ne sert jamais au
     texte courant.                                                        */
  --color-ocre:     #C68A2E;

  /* ─── États des éléments cliquables ─────────────────────────────────── */
  /* Sur fond clair, un survol doit FONCER. Le brun de base étant déjà
     sombre, ces deux valeurs descendent d'un cran puis de deux.           */

  --color-accent-hover:  #422917;
  --color-accent-active: #2B1B0F;

  /* ─── Dégradés du brun, du plus clair au plus foncé ─────────────────── */
  /* Servent aux fonds teintés (100-300), aux textes posés dessus (700-900).
     Réglés sur une progression régulière de clarté : un même degré de deux
     dégradés différents pèse le même poids visuel.                        */

  --color-accent-100: #F8F1E9;
  --color-accent-200: #EEDFCE;
  --color-accent-300: #DDC5A8;
  --color-accent-400: #C3A379;
  --color-accent-500: #A07C4E;
  --color-accent-600: #7C5A33;
  --color-accent-700: #5C3A21;
  --color-accent-800: #422917;
  --color-accent-900: #2B1B0F;

  /* ─── Dégradés de la terre cuite ────────────────────────────────────── */

  --color-accent-2-100: #F7E7E0;
  --color-accent-2-200: #EFCDBF;
  --color-accent-2-300: #E0A48D;
  --color-accent-2-400: #C87454;
  --color-accent-2-500: #A8492C;
  --color-accent-2-600: #8E3620;
  --color-accent-2-700: #7A2A16;
  --color-accent-2-800: #5A1E10;
  --color-accent-2-900: #3C150B;

  /* ─── Encres atténuées ──────────────────────────────────────────────── */
  /* Les textes plus discrets du site. Le nombre EST le pourcentage d'encre.
     Ces valeurs sont réglées pour le fond sable : celui-ci étant bien plus
     foncé qu'un papier blanc, il écrase les contrastes, et les gris clairs
     qui passaient sur du blanc deviennent illisibles ici. Chaque niveau
     porte son rapport de contraste mesuré sur #D3B39A.

     ⚠ Si vous éclaircissez --color-bg, vous pouvez redescendre ces
     pourcentages ; si vous le foncez encore, il faut les monter.          */

  --ink-92: color-mix(in srgb, var(--color-text) 92%, transparent); /* 7,6:1 */
  --ink-85: color-mix(in srgb, var(--color-text) 85%, transparent); /* 6,2:1 */
  --ink-82: color-mix(in srgb, var(--color-text) 82%, transparent); /* 5,7:1 */
  --ink-76: color-mix(in srgb, var(--color-text) 76%, transparent); /* 4,9:1 */
  --ink-58: color-mix(in srgb, var(--color-text) 58%, transparent); /* 3,2:1 — filets et bordures, jamais de texte */
  --ink-44: color-mix(in srgb, var(--color-text) 44%, transparent); /* 2,4:1 — décor seulement */
  --ink-22: color-mix(in srgb, var(--color-text) 22%, transparent); /* rails de jauge */

  /* ─── Typographie ───────────────────────────────────────────────────── */

  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-weight-heading: 600;

  /* ─── Espacements (échelle aérée, densité 1,25×) ────────────────────── */

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* ─── Largeur de la colonne de texte et marges latérales ────────────── */

  --page-max:  1200px;
  --page-pad:  clamp(20px, 5vw, 72px);
  --nav-height: 62px;
}


/* ═══ 3. BASE ═════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* Décale les ancres pour qu'un titre ne se cache pas sous la barre collante */
  scroll-padding-top: calc(var(--nav-height) + 20px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-accent-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* Lien d'évitement — premier élément focusable, invisible jusqu'au focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--color-bg);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ═══ 4. LES PLAQUES D'IMPRESSION ═════════════════════════════════════════
   L'effet signature : un titre imprimé comme trois plaques d'encre
   légèrement décalées, comme une presse mal calée.

   Construction : une couche « papier » qui porte le vrai texte (c'est elle
   que lisent Google et les lecteurs d'écran), surmontée de trois copies
   décalées en fusion « multiply ». Là où les trois encres se superposent,
   le produit donne un brun espresso très profond ; sur les bords, les
   franges colorées apparaissent.
   ═════════════════════════════════════════════════════════════════════════ */

/* — Version titre — */
.plaque { position: relative; }

.plaque .papier {
  color: var(--color-bg);
  /* Deux copies décalées construisent l'union des lettres, pour que les
     plaques aient toujours un fond blanc sous elles */
  text-shadow:
     0.027em  0.0185em 0 var(--color-bg),
    -0.0245em -0.0175em 0 var(--color-bg);
}

.plaque .encre {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  text-box: trim-both cap alphabetic;
}

.plaque .encre-1 { color: var(--color-accent); }
.plaque .encre-2 {
  color: var(--color-accent-2);
  translate:
    calc( 0.018em  + 0.009em * var(--press-nx, 0))
    calc( 0.0125em + 0.006em * var(--press-ny, 0));
}
.plaque .encre-3 {
  color: var(--color-ocre);
  translate:
    calc(-0.0155em + 0.009em * var(--press-nx, 0))
    calc(-0.0115em + 0.006em * var(--press-ny, 0));
}

/* — Version chiffre (décalages deux fois plus larges, les chiffres sont
     plus gras que les déliés d'un titre) — */
.plaque-chiffre {
  --fond: var(--color-bg);
  position: relative;
  width: fit-content;
  line-height: 0.9;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-feature-settings: 'pnum' 1;
  background: var(--fond);
  padding: 0.12em;
  margin: -0.12em;
}
.plaque-chiffre .papier {
  color: var(--color-bg);
  text-shadow:
     0.036em  0.025em 0 var(--color-bg),
    -0.031em -0.023em 0 var(--color-bg);
}
.plaque-chiffre .encre {
  position: absolute;
  inset: 0.12em;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  text-box: trim-both cap alphabetic;
}
.plaque-chiffre .encre-1 { color: var(--color-accent); }
.plaque-chiffre .encre-2 {
  color: var(--color-accent-2);
  translate:
    calc( 0.036em + 0.018em  * var(--press-nx, 0))
    calc( 0.025em + 0.0125em * var(--press-ny, 0));
}
.plaque-chiffre .encre-3 {
  color: var(--color-ocre);
  translate:
    calc(-0.031em + 0.018em  * var(--press-nx, 0))
    calc(-0.023em + 0.0125em * var(--press-ny, 0));
}


/* ═══ 5. MISE EN PAGE ═════════════════════════════════════════════════════ */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

section { scroll-margin-top: calc(var(--nav-height) + 12px); }

/* Rythme vertical entre les sections. Le système ne sépare pas les sections
   par des traits ou des cadres : c'est ce blanc qui fait la séparation. */
.section       { padding: 56px 0 70px; }
.section-large { padding: 56px 0 84px; }

/* Bloc de bouton en fin de page de texte */
.bloc-action { margin-top: 42px; }

/* Le sur-titre en petites capitales espacées qui ouvre chaque section */
.kicker {
  display: block;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-82);
  margin: 0 0 14px;
}

/* Les filets de la barre de repères — le seul endroit où le système
   s'autorise des traits : gros filet + filet fin, comme une une de journal */
.filet-double {
  height: 5px;
  border: 0;
  margin: 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}
.filet {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-text);
  margin: 0;
}


/* ═══ 6. BARRE DE NAVIGATION ══════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-height);
  padding: var(--space-3) var(--page-pad);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ═══ 6 bis. LOGO ═════════════════════════════════════════════════════════
   Le logo se compose de deux parties :

   1. LA MARQUE — trois carrés d'encre légèrement décalés, en fusion
      « multiply ». C'est la métaphore du site tout entier : des plaques
      d'impression qui ne sont pas tout à fait calées. Là où les trois se
      superposent naît un brun très profond ; sur les bords, les franges.

   2. LE NOM — « Maalouma » à l'encre, « DataGouv » en brun tabac. Une seule
      césure de couleur, pas de deuxième police : le système se tient par la
      graisse et la couleur, jamais par l'accumulation de styles.

   Pour changer le nom, modifiez-le dans index.html ET dans les autres pages
   (il apparaît dans la barre du haut et dans le pied de page de chacune).
   ═════════════════════════════════════════════════════════════════════════ */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}
.logo:hover { color: var(--color-text); }

.logo-marque {
  flex: none;
  display: block;
  width: 27px;
  height: 27px;
}
/* Chaque carré multiplie sur celui du dessous et sur le fond de la page.
   Les trois carrés sont posés au MÊME endroit dans le SVG ; c'est le
   décalage ci-dessous qui les désaligne, pour qu'un survol puisse les
   ramener en registre. Les unités sont celles du viewBox, pas des pixels. */
.logo-marque rect {
  mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.logo-marque .plaque-1 { fill: var(--color-accent);   transform: translate(0px, 0px); }
.logo-marque .plaque-2 { fill: var(--color-accent-2); transform: translate(3.4px, -2.4px); }
.logo-marque .plaque-3 { fill: var(--color-ocre);     transform: translate(-2.8px, 3.2px); }

.logo-mot {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.logo-mot .mot-2 {
  color: var(--color-accent);
  margin-left: 0.22em;
}

/* Au survol, les plaques se recalent — le pressier qui ajuste sa presse */
.logo:hover .logo-marque rect,
.logo:focus-visible .logo-marque rect { transform: translate(0px, 0px); }

@media (prefers-reduced-motion: reduce) {
  .logo-marque rect { transition: none; }
}

/* — Version pied de page, plus grande, en nom de journal — */
.logo-pied { gap: 12px; margin-right: 0; }
.logo-pied .logo-marque { width: 32px; height: 32px; }
.logo-pied .logo-mot { font-size: 22px; }

@media (max-width: 420px) {
  .logo { gap: 8px; }
  .logo-marque { width: 23px; height: 23px; }
  .logo-mot { font-size: 16px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current='page'] { color: var(--color-accent); }
.nav-links a.btn-primary { color: var(--color-bg); }

/* Bouton hamburger — masqué sur grand écran */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }

.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { top: 0; transform: rotate(-45deg); }

/* — Repli téléphone / petite tablette — */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--page-pad) var(--space-8);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-text);
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;

    /* Fermé par défaut — replié vers le haut.
       visibility bascule d'un coup (0s) mais APRÈS le fondu (délai .22s) :
       le menu reste hors de portée du clavier une fois refermé, sans
       clignotement quand on redimensionne la fenêtre. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .nav-links.est-ouvert {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav-links a {
    padding: 14px 0;
    font-size: 18px;
    font-family: var(--font-heading);
    border-bottom: 1px solid var(--ink-22);
  }
  .nav-links a.btn-primary {
    margin-top: var(--space-4);
    border-bottom: 0;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}


/* ═══ 7. BOUTONS ET CHAMPS ════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) 18px;
  border-radius: var(--radius-md);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover  { background: var(--color-accent-hover);  color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-active); color: var(--color-bg); }

.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover  { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.btn-secondary { border-color: var(--ink-58); }
.btn-secondary:hover  { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--ink-58);
  border-radius: var(--radius-md);
  transition: border-color .18s ease;
}
.input::placeholder { color: var(--ink-76); opacity: 1; }
.input:hover { border-color: var(--ink-76); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.6; }

.field { display: block; margin-bottom: var(--space-3); }
.field > label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ink-82);
}
.field-erreur .input { border-color: var(--color-accent-2); }
.msg-erreur {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--color-accent-2-700);
}


/* ═══ 8. RÉVÉLATION AU DÉFILEMENT ═════════════════════════════════════════
   Les éléments marqués data-reveal montent en fondu à leur entrée à l'écran.
   La classe est posée par le JavaScript ; sans JavaScript, rien n'est masqué.
   ═════════════════════════════════════════════════════════════════════════ */

.js-actif [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease;
}
.js-actif [data-reveal].est-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-actif [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ═══ 9. EN-TÊTE DE PAGE (HERO) ═══════════════════════════════════════════ */

.hero { padding: 112px 0 84px; }

.hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: clamp(38px, 6vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0 -0.035em;
  text-box: trim-both cap alphabetic;
}
.hero h1 .ligne { display: block; }

.hero-chapo {
  font-size: 17px;
  line-height: 28px;
  max-width: 58ch;
  margin: 28px 0 0;
  text-box: trim-both cap alphabetic;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 28px;
}

@media (max-width: 640px) {
  .hero { padding: 64px 0 56px; }
}


/* ═══ 10. BARRE DE REPÈRES ET CHIFFRES ════════════════════════════════════ */

.reperes {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0;
  padding: 14px 0;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-82);
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px 70px;
  padding: 14px 0 28px;
}
.chiffre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15.5px;
  line-height: 28px;
}
/* Les pointillés qui relient le libellé à sa valeur, comme dans un sommaire */
.chiffre-conduite {
  flex: 1;
  min-width: 28px;
  align-self: flex-end;
  margin-bottom: 0.34em;
  border-bottom: 1px dotted var(--ink-58);
}
.chiffre-valeur {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 17px;
  font-variant-numeric: proportional-nums;
  font-feature-settings: 'tnum' 0;
}
.chiffre-valeur.est-souligne { color: var(--color-accent-2); }


/* ═══ 11. EXPERTISES ══════════════════════════════════════════════════════ */

.titre-section {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26ch;
  text-box: trim-both cap alphabetic;
}

.grille-expertises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 56px clamp(28px, 5vw, 88px);
  margin-top: 56px;
}

.expertise { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
  .expertise:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .expertise { transition: none; }
  .expertise:hover { transform: none; }
}

.expertise-icone { margin-bottom: 14px; }

.expertise h3 {
  font-size: 25px;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 0;
  text-box: trim-both cap alphabetic;
}
.expertise-texte {
  font-size: 15.5px;
  line-height: 28px;
  margin: 21px 0 0;
  max-width: 46ch;
  color: var(--ink-85);
  text-align: justify;
  hyphens: auto;
}
.expertise-livrable {
  font-size: 13px;
  line-height: 24px;
  margin: 14px 0 0;
  color: var(--ink-76);
}

/* Sur téléphone, le texte justifié creuse des rivières de blanc */
@media (max-width: 560px) {
  .expertise-texte { text-align: left; }
}


/* ═══ 12. MÉTHODE ═════════════════════════════════════════════════════════ */

#method .titre-section {
  margin-bottom: 56px;
  max-width: 24ch;
}

.grille-methode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 42px clamp(24px, 4vw, 64px);
}
.etape-numero { font-size: 62px; display: block; }
.etape h3 {
  font-size: 20px;
  line-height: 28px;
  margin: 21px 0 0;
}
.etape p {
  font-size: 15px;
  line-height: 26px;
  margin: 7px 0 0;
  color: var(--ink-85);
}


/* ═══ 13. TÉMOIGNAGES ═════════════════════════════════════════════════════ */

.temoignages-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.temoignages-entete .kicker { margin-bottom: 0; }
.temoignages-entete + .filet { margin-top: 14px; }

.temoignages-compteur {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-82);
}

/* Sans JavaScript, la fenêtre devient une bande qui défile au doigt ou à la
   molette, avec calage sur chaque témoignage. Avec JavaScript, le script
   pilote la piste et le débordement est masqué. */
.temoignages-fenetre {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 42px 0 28px;
}
.js-actif .temoignages-fenetre {
  overflow: hidden;
  scroll-snap-type: none;

  /* Les six derniers pixels sont rognés en plus du débordement.
     Les italiques de Source Serif ont une approche gauche négative : l'encre
     de la première lettre du témoignage suivant déborde de deux à trois
     pixels à GAUCHE de sa propre boîte, donc à l'intérieur de la fenêtre,
     où aucun débordement ne peut l'attraper. Elle apparaissait comme deux
     points parasites au bord droit. La citation est large de 34 signes au
     plus : cette bande est toujours vide. */
  clip-path: inset(0 6px 0 0);
}
.temoignage { scroll-snap-align: start; }

.temoignages-piste {
  display: flex;
  align-items: stretch;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .temoignages-piste { transition: none; }
}

.temoignage {
  flex: 0 0 100%;
  padding-right: clamp(24px, 6vw, 96px);
  margin: 0;
}
.temoignage blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 34ch;
  margin: 0;
}
.temoignage figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 42px 0 0;
  font-size: 15px;
  line-height: 24px;
}
.temoignage-initiales {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
}
.temoignage-nom  { display: block; }
.temoignage-role {
  display: block;
  color: var(--ink-76);
  font-size: 14px;
}
.temoignage-note {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.etoiles { color: var(--color-accent-2); }
.note-chiffre { color: var(--ink-76); }

/* Les puces de navigation du carrousel */
.temoignages-puces {
  display: flex;
  gap: 10px;
}
.puce {
  width: 34px; height: 6px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 1px;
  background: var(--ink-58);
  transition: background .3s ease;
}
.puce:hover { background: var(--ink-76); }
.puce[aria-current='true'] { background: var(--color-accent); }
/* Cible tactile confortable sans grossir le trait visible */
.puce::before {
  content: '';
  display: block;
  height: 24px;
  margin-top: -9px;
}


/* ═══ 14. DÉMONSTRATION IA ════════════════════════════════════════════════ */

.grille-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 42px clamp(24px, 5vw, 88px);
  align-items: start;
}
.demo-intro {
  font-size: 15.5px;
  line-height: 28px;
  margin: 21px 0 0;
  max-width: 46ch;
  color: var(--ink-85);
  text-align: justify;
  hyphens: auto;
}
@media (max-width: 560px) {
  .demo-intro { text-align: left; }
}

.demo-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  align-items: flex-start;
}
.demo-question {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-58);
  background: transparent;
  color: var(--color-text);
  transition: border-color .2s ease, background .2s ease;
}
.demo-question:hover { border-color: var(--color-accent); }
.demo-question[aria-pressed='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}

#ai .titre-section { font-size: clamp(26px, 3vw, 36px); }

.demo-panneau { min-height: 340px; }
.demo-panneau .filet { margin: 14px 0 28px; }

.demo-etapes {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Les étapes pas encore atteintes restent du VRAI texte : sur le fond
     sable, un gris trop clair passerait sous le seuil de lisibilité. */
  color: var(--ink-76);
}
.demo-etapes span { transition: color .35s ease; }
.demo-etapes span.est-active { color: var(--color-accent-2); }

.demo-titre {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  margin: 0;
}

.demo-signaux {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.signal-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  line-height: 22px;
}
.signal-poids {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-variant-numeric: proportional-nums;
}
.signal-rail {
  height: 6px;
  margin-top: 7px;
  background: var(--ink-22);
}
.signal-jauge {
  height: 6px;
  width: 0;
  background: var(--color-accent);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .signal-jauge { transition: none; }
}

.demo-verdict {
  font-size: 15.5px;
  line-height: 28px;
  margin: 28px 0 0;
  max-width: 52ch;
  color: var(--ink-85);
}

/* Les panneaux de résultat : un seul visible à la fois */
.demo-resultat[hidden] { display: none; }

/* La chaîne se déroule en trois temps : titre, puis signaux, puis
   recommandation. Les éléments gardent leur place dès le départ — seule
   leur opacité change — pour que la page ne saute pas.
   Tout cela est conditionné à .js-actif : sans JavaScript, le premier
   panneau s'affiche entier et reste lisible. */
.js-actif .demo-titre,
.js-actif .demo-signaux,
.js-actif .demo-verdict {
  opacity: 0;
  transition: opacity .5s ease;
}
.js-actif .demo-resultat[data-etape='1'] .demo-titre,
.js-actif .demo-resultat[data-etape='2'] .demo-titre,
.js-actif .demo-resultat[data-etape='3'] .demo-titre,
.js-actif .demo-resultat[data-etape='2'] .demo-signaux,
.js-actif .demo-resultat[data-etape='3'] .demo-signaux,
.js-actif .demo-resultat[data-etape='3'] .demo-verdict {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .js-actif .demo-titre,
  .js-actif .demo-signaux,
  .js-actif .demo-verdict { transition: none; }
}


/* ═══ 15. CONTACT ═════════════════════════════════════════════════════════ */

#contact .filet-double { margin-bottom: 42px; }

.contact-titre {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26ch;
  text-box: trim-both cap alphabetic;
}
.contact-chapo {
  font-size: 17px;
  line-height: 28px;
  margin: 28px 0 0;
  max-width: 58ch;
}
.contact-form {
  max-width: 560px;
  margin-top: 28px;
}
.contact-form .btn { min-height: 44px; padding-inline: 24px; }
.contact-mention {
  font-size: 13px;
  line-height: 24px;
  margin: 14px 0 0;
  color: var(--ink-76);
}

/* Le champ leurre anti-robot — invisible pour un humain, rempli par les
   robots qui remplissent tout ce qu'ils trouvent */
.leurre {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Bandeau de retour après soumission */
.bandeau {
  padding: 14px 18px;
  margin: 0 0 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-100);
  font-size: 15px;
  line-height: 24px;
  max-width: 560px;
}
.bandeau-erreur {
  border-left-color: var(--color-accent-2);
  background: var(--color-accent-2-100);
}


/* ═══ 16. PIED DE PAGE ════════════════════════════════════════════════════ */

.pied {
  padding: 56px 0 70px;
  font-size: 14px;
  line-height: 26px;
}
.pied .filet { margin-bottom: 42px; }

.pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px clamp(24px, 4vw, 64px);
}
.pied-marque {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  display: block;
}
.pied-intitule {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-82);
}
.pied p { margin: 14px 0 0; color: var(--ink-82); }
.pied-liens {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.pied-liens a { width: fit-content; }
.pied-legal {
  margin: 42px 0 0;
  font-size: 13px;
  line-height: 24px;
  color: var(--ink-76);
}
.pied-legal a { color: var(--ink-76); }
.pied-legal a:hover { color: var(--color-accent); }


/* ═══ 17. PAGES DE TEXTE (mentions légales, confidentialité, merci) ═══════ */

.page-texte { padding: 70px 0 84px; max-width: 74ch; }
.page-texte h1 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.page-texte h2 {
  font-size: 22px;
  margin: 48px 0 12px;
}
.page-texte h3 {
  font-size: 17px;
  margin: 28px 0 8px;
}
.page-texte p,
.page-texte li {
  font-size: 16px;
  line-height: 29px;
  margin: 0 0 14px;
  color: var(--ink-92);
}
.page-texte ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 14px;
}
.page-texte li {
  padding-left: 20px;
  position: relative;
}
.page-texte li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}
.page-texte .maj {
  font-size: 13px;
  color: var(--ink-76);
  margin-bottom: 42px;
}

/* Marqueur des informations que le propriétaire doit renseigner */
.a-completer {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
  white-space: nowrap;
}


/* ═══ 18. IMPRESSION ══════════════════════════════════════════════════════ */

@media print {
  .nav, .nav-toggle, .temoignages-puces, .demo-questions,
  .hero-actions, .contact-form, .skip-link { display: none !important; }

  body { background: #fff; font-size: 11pt; }

  /* À l'impression, les plaques désalignées deviennent illisibles :
     on repasse le titre en encre pleine */
  .plaque .encre, .plaque-chiffre .encre { display: none; }
  .plaque .papier, .plaque-chiffre .papier {
    color: var(--color-text);
    text-shadow: none;
  }

  .temoignages-piste { transform: none !important; display: block; }
  .temoignage { padding: 0 0 24px; break-inside: avoid; }
  .demo-resultat[hidden] { display: block !important; }
  .signal-jauge { width: auto !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
  section { break-inside: avoid-page; }
}