/* AI.xcellence — tokens
   Une seule source pour la palette, la typographie, l’espace et le mouvement.
   Valeurs de référence : docs/DECISIONS.md. Rôles : docs/ART_DIRECTION.md. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  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: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Fira Sans";
  src: url("../fonts/fira-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Fira Sans";
  src: url("../fonts/fira-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Fira Sans";
  src: url("../fonts/fira-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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: "Fira Sans";
  src: url("../fonts/fira-500-latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Fira Sans";
  src: url("../fonts/fira-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  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: "Fira Sans";
  src: url("../fonts/fira-600-latin-ext.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Fira Sans";
  src: url("../fonts/fira-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  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: "Fira Sans";
  src: url("../fonts/fira-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
/* Poppins : titres, comme la campagne « 100 parents » (6 octobre 2026) */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  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: "Poppins";
  src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Poppins";
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  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: "Poppins";
  src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Poppins";
  src: url("../fonts/poppins-400i-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  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: "Poppins";
  src: url("../fonts/poppins-400i-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
/* Repli métrique : Arial ajustée sur Fira Sans pour éviter le saut de mise en page
   pendant le chargement (largeur mesurée sur le texte de la page). */
@font-face {
  font-family: "Fira Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 102.15%; ascent-override: 91.53%; descent-override: 25.94%; line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* — Palette de référence : variante naturelle (6 octobre 2026) —
     Famille bleu doux et abricot conservée, tirée vers les tons du PDF du fondateur :
     bleu canard, sauge, lin, ocre. Valeurs initiales : docs/COLOR_STUDY.md. */
  --ref-bleu-doux: #C9DDF0;     /* bleu ciel, plus vivant ; était #D9E4E6 */
  --ref-encre: #1B3446;         /* bleu nuit, 6 octobre 2026 ; était #1F3A42 */
  --ref-nuit: #1B3446;          /* encre et scène du constat */
  --ref-cobalt: #34609A;        /* ancienne dominante (avant la campagne) */
  /* — Palette de la campagne « 100 parents », mesurée sur le visuel du 6 octobre 2026 — */
  --ref-creme-campagne: #FBF7F1; /* fond lumineux */
  --ref-lavis: #D3E7E9;          /* lavis bleu ciel de l’aquarelle */
  --ref-bleu-vif: #0A6FCB;       /* bleu de la campagne (#0B82EA) assombri : texte blanc 5,1:1 */
  --ref-bleu-vif-clair: #0B82EA; /* bleu exact de la campagne : décor uniquement, jamais sous du texte */
  --key-blue: var(--ref-bleu-vif); /* mot-clé du titre */
  --ref-soleil: #F5C451;         /* jaune du soleil et du sac */
  --ref-soleil-clair: #FDE7B4;   /* soleil en aplat */
  --ref-feuille: #477956;        /* vert des feuilles, détail illustratif */
  --ref-ardoise: #2B4C5E;       /* seconde profondeur, même famille */
  --ref-nuit-profond: #13283A;  /* pied de page */
  --ref-bleu-grise: #4A5F66;    /* était #486071 */
  --ref-bleu-profond: #2B4C5E;  /* ardoise ; était le bleu canard #2A4D55 */
  --ref-abricot: #F0CBA6;       /* était #F7D1AF */
  --ref-creme: #F7F1E6;         /* lin, était #FFF6EB */
  --ref-miel: #E0B866;          /* ocre miel, était #EDC774 */
  --ref-brume: #D5DDCF;         /* sauge brume, était #D5E4EA */
  --ref-sauge: #B9C4AE;         /* nouveau : pièce sauge, texte encre uniquement */
  --ref-papier: #FBF6ED;        /* était #FFF8F0 */
  --ref-contact: #EFD5B8;       /* argile claire, était #F5DBBD */

  /* Grain de papier : bruit SVG très léger, sans fichier externe */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --hero-glow: var(--ref-creme-campagne);

  /* — Rôles — */
  /* Règle 60 / 30 / 10 (direction C « Révéler », 6 octobre 2026)
     Style de la campagne : 60 % crème et papier ; 30 % bleus (lavis, ciel, nuit) ; 10 % accent bleu vif et soleil. */
  --surface-hero: var(--ref-creme-campagne);
  --surface-ritual: var(--ref-lavis);
  --surface-perspective: var(--ref-nuit);
  --surface-building: var(--ref-papier);
  --surface-project: var(--ref-creme-campagne);
  --surface-contact: var(--ref-lavis);
  --surface-paper: var(--ref-papier);
  --surface-card: var(--ref-creme);
  --surface-footer: var(--ref-nuit-profond);
  --surface-field: #FFFDF8;

  --ink: var(--ref-encre);
  --ink-secondary: var(--ref-bleu-grise);
  --on-dark: var(--ref-creme);
  --on-dark-secondary: #C9D6DA;

  --action: var(--ref-bleu-vif);
  --action-hover: #085AA6;
  --on-action: #FFFFFF;
  --action-on-dark: var(--ref-miel);
  --action-on-dark-hover: #ECCF8E;
  --on-action-on-dark: var(--ref-encre);

  --accent-honey: var(--ref-soleil);
  --accent-mist: var(--ref-bleu-doux);
  --accent-light: var(--ref-soleil-clair);
  --accent-apricot: var(--ref-abricot);
  --line: rgba(31, 58, 66, .22);
  --line-strong: var(--ref-bleu-grise);
  --focus: var(--ref-encre);
  --focus-on-dark: var(--ref-miel);
  --danger: #9A2E22;

  /* Pièces et étiquettes : couleurs fixes, encre fixe, dans les deux apparences */
  --piece-1: var(--ref-papier);
  --piece-2: var(--ref-bleu-doux);
  --piece-3: var(--ref-papier);
  --piece-4: var(--ref-bleu-doux);
  --piece-front: var(--ref-soleil-clair); /* la capacité choisie porte l’accent soleil */
  --piece-paper: var(--ref-papier);
  --piece-ink: var(--ref-encre);
  --piece-ink-secondary: var(--ref-bleu-grise);

  /* Illustration de l’emplacement photo */
  --sketch-paper: var(--ref-papier);
  --sketch-line: var(--ref-encre);
  --sketch-soft: var(--ref-bleu-grise);

  --shadow-paper: 0 1px 2px rgba(60, 50, 35, .10), 0 12px 26px -14px rgba(45, 55, 50, .38);

  /* — Typographie — */
  --font-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* comme la campagne ; Bricolage reste installée */
  --font-text: "Fira Sans", "Fira Sans Fallback", Helvetica, Arial, sans-serif; /* l à queue : AI et l’IA sans ambiguïté */
  --fs-hero: clamp(2.875rem, 1.9rem + 4.4vw, 6rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.625rem);
  --fs-question: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  --fs-lead: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --fs-body: 1.125rem; /* 18 px, recommandation de l’étude typographique */
  --fs-control: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .9375rem;
  --lh-hero: 1.06;
  /* Interlettrage des titres : légèrement ouvert, largeur normale (6 octobre 2026 ; avant : −0,025 em et 92 %) */
  --tracking-hero: .01em;
  --tracking-title: .012em;
  --tracking-question: .01em;
  --tracking-brand: .015em;
  --lh-title: 1.08;
  --lh-body: 1.58;

  /* — Espace — grille de 8 px (4 px pour les réglages fins), hiérarchie par proximité :
     serré dans un groupe, généreux entre deux groupes. */
  --space-2xs: .25rem;  /*  4 */
  --space-xs: .5rem;    /*  8 */
  --space-s: 1rem;      /* 16 */
  --space-m: 1.5rem;    /* 24 */
  --space-l: 2rem;      /* 32 */
  --space-xl: 3rem;     /* 48 */
  --space-2xl: 4rem;    /* 64 */
  --hero-gap-group: clamp(2rem, 1.6rem + 1vw, 2.5rem);    /* entre groupes : 32 → 40 */
  --hero-gap-label: clamp(1rem, .85rem + .4vw, 1.25rem);   /* surtitre collé à son titre : 16 → 20 */
  --hero-gap-action: clamp(2rem, 1.5rem + 1.6vw, 3rem);    /* avant l’action : 32 → 48 */
  /* — Espace — */
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --maxw: 78rem;
  --measure: 36rem;
  --radius-paper: 6px 3px 7px 4px; /* coins légèrement irréguliers, comme du papier coupé */
  --radius-control: 999px;
  --target: 48px;

  /* — Mouvement — */
  --dur-arrow: 180ms;
  --dur-appear: 240ms;
  --dur-turn: 450ms;
  --dur-intro: 400ms;
  --dist-appear: 8px;
  --dist-arrow: 3px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-turn: cubic-bezier(.45, .05, .25, 1);
}

/* — Apparence sombre (valeurs du brief §3) — */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-hero: #142A3A;
    --surface-ritual: #142A3A;
    --surface-perspective: #1B3446;
    --surface-building: #1E3A4C;
    --surface-project: #1E3A4C;
    --surface-contact: #142A3A;
    --surface-paper: #1B3446;
    --surface-card: var(--ref-creme);
    --surface-footer: #0F2130;
    --surface-field: #142A3A;

    --ink: #F3ECDF;
    --ink-secondary: #C9D6D6;
    --on-dark: #F3ECDF;
    --on-dark-secondary: #C9D6D6;

    --action: var(--ref-miel);
    --action-hover: #ECCF8E;
    --on-action: var(--ref-encre);

    --line: rgba(243, 236, 223, .26);
    --line-strong: #C9D6D6;
    --focus: var(--ref-miel);
    --danger: #F2B8A8;
    --accent-mist: #2B4C5E;

    --sketch-paper: #F3ECDF;
    --hero-glow: #142A3A;
    --key-blue: #6CB4F5; /* mot-clé lisible sur fond sombre */
    --shadow-paper: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 28px -12px rgba(0, 0, 0, .55);
  }
}

/* — Mouvement réduit : préférence système ou contrôle de l’en-tête — */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) { --dur-arrow: 0ms; --dur-appear: 0ms; --dur-turn: 0ms; --dur-intro: 0ms; --dist-appear: 0px; --dist-arrow: 0px; }
}
:root[data-motion="reduced"] { --dur-arrow: 0ms; --dur-appear: 0ms; --dur-turn: 0ms; --dur-intro: 0ms; --dist-appear: 0px; --dist-arrow: 0px; }

/* — Sections profondes (bleu nuit) : rôles redéfinis localement, texte lin — */
.tone-deep {
  --ink: var(--ref-creme); --ink-secondary: #E3ECF4;
  --line: rgba(247, 241, 230, .3); --line-strong: #E3ECF4;
  --focus: var(--ref-miel);
  --action: var(--ref-abricot); --action-hover: #EBBE92; --on-action: var(--ref-encre);
  color: var(--ink);
}