/* ==========================================================================
   R-SYSTEM — Design tokens
   Source unique de vérité : couleurs, typographie, espacement, mouvement.
   Aucune valeur de marque ne doit être écrite en dur ailleurs que dans ce fichier.

   Typographie hébergée par le site, dans assets/fonts :
   Bricolage Grotesque (variable, 200 à 800, axe optique conservé)
   JetBrains Mono (variable, 400 et 700)
   Fichiers repris tels quels de Google Fonts, licence SIL Open Font License 1.1.
   Servies depuis notre domaine, la feuille tierce ne bloque plus le rendu et
   le rebond vers fonts.gstatic.com disparaît du chemin critique.
   Les sous-ensembles latin-ext ne se téléchargent que si un caractère les appelle,
   c'est l'unicode-range qui décide. Seuls les latin sont préchargés dans le head.
   ========================================================================== */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../assets/fonts/bricolage-grotesque-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:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../assets/fonts/bricolage-grotesque-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:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/jetbrains-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:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../assets/fonts/jetbrains-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;
}

:root{

  /* ----------------------------------------------------------------------
     1. Primitives — palette de marque
     Ne jamais appeler ces variables directement dans un composant.
     Passer par les tokens sémantiques de la section 5.
     ---------------------------------------------------------------------- */

  --navy-950:#0f1533;
  --navy-900:#1D2858;
  --navy-800:#223065;
  --navy-700:#2b3a7a;

  --cyan-500:#00AEEF;
  --cyan-800:#036c9e;   /* variante accessible du cyan sur fond clair : 5,33:1 sur papier,
                           là où le cyan 500 tombe à 2,34:1 et échoue au seuil AA */
  --teal-500:#3FB8A5;
  --teal-800:#1b6f63;   /* variante accessible du teal sur fond clair */

  --white:#ffffff;
  --paper-50:#f4f6fb;

  --red-500:#e2564d;    /* erreur de saisie, usage strictement fonctionnel */
  --red-300:#f08a83;    /* variante accessible du rouge en texte sur navy : 5,8:1 sur navy-900,
                           là où le red-500 tombe à 3,8:1 et échoue au seuil AA */
  --red-700:#b23730;    /* variante accessible du rouge en texte sur papier */

  --grey-200:#c6cfe6;   /* texte secondaire sur fond sombre */
  --grey-400:#8e9ac2;   /* texte tertiaire sur fond sombre */
  --grey-600:#626d92;   /* texte tertiaire sur fond clair — AA à 11px */
  --grey-700:#4d5878;   /* texte secondaire sur fond clair */

  /* Filets et voiles, exprimés en alpha pour rester composables */
  --alpha-light-16:rgba(198,207,230,.16);
  --alpha-light-28:rgba(198,207,230,.28);
  --alpha-light-07:rgba(198,207,230,.07);
  --alpha-light-05:rgba(198,207,230,.05);
  --alpha-navy-72:rgba(15,21,51,.72);
  --alpha-dark-25:rgba(29,40,88,.25);
  --alpha-dark-18:rgba(29,40,88,.18);
  --alpha-dark-14:rgba(29,40,88,.14);
  --alpha-dark-06:rgba(29,40,88,.06);
  --alpha-dark-04:rgba(29,40,88,.04);
  /* Voile d'accent au survol d'un bouton fantôme, dans les deux thèmes */
  --alpha-cyan-14:rgba(0,174,239,.14);
  --alpha-cyan-800-10:rgba(3,108,158,.10);

  /* ----------------------------------------------------------------------
     2. Typographie
     Échelle 88 / 56 / 22 / 17 / 12 — sauts volontairement supérieurs à 3x
     entre le display et le corps de texte.
     ---------------------------------------------------------------------- */

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-thin:200;
  --weight-bold:800;
  --weight-mono:400;
  --weight-mono-bold:700;

  --size-display:clamp(52px,8.5vw,88px);
  --size-h2:clamp(36px,5vw,56px);
  --size-h3:22px;
  --size-h4:19px;
  --size-lead:clamp(19px,2.2vw,24px);
  --size-body:17px;
  --size-sm:16px;
  --size-xs:15px;
  --size-mono:13px;
  --size-mono-sm:12px;
  --size-mono-xs:11px;
  --size-stat:34px;

  --leading-display:.98;
  --leading-tight:1.15;
  --leading-snug:1.45;
  --leading-body:1.6;
  --leading-loose:1.7;

  --tracking-display:-.03em;
  --tracking-tight:-.015em;
  --tracking-normal:0;
  --tracking-mono:.08em;
  --tracking-caps:.16em;
  --tracking-eyebrow:.22em;

  --measure-lead:56ch;
  --measure-prose:70ch;
  --measure-caption:24ch;

  /* ----------------------------------------------------------------------
     3. Espacement — échelle de 4
     ---------------------------------------------------------------------- */

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-18:72px;
  --space-24:96px;

  --space-section:clamp(64px,9vh,104px);
  --space-block:clamp(44px,6vh,68px);
  --gutter:64px;

  /* ----------------------------------------------------------------------
     4. Formes, mouvement, mise en page
     ---------------------------------------------------------------------- */

  --radius-sharp:2px;
  --border-hair:1px;
  --border-accent:2px;

  --duration-fast:.15s;
  --duration-mid:.3s;
  --duration-cycle:12s;       /* tour complet d'une boucle de quatre étapes */
  --duration-reveal:.6s;      /* apparition d'un bloc au défilement */
  --ease-standard:cubic-bezier(.2,.6,.3,1);
  --reveal-shift:18px;        /* translation d'entrée des blocs révélés */

  --lift:-2px;                /* déplacement au survol des éléments cliquables */
  --focus-width:2px;
  --focus-offset:3px;

  --layout-wide:min(1200px,100% - 48px);
  --layout-narrow:min(820px,100%);   /* colonne resserrée pour un schéma ou un visuel isolé */
  --layout-medium:min(720px,100%);   /* visuel resserré pour laisser respirer ce qui l'entoure */
  --layout-header:68px;
  --bande-contact-h:96px;            /* hauteur commune des vignettes de la bande contact */
  --bande-contact-h-phone:120px;     /* la même bande sous 600 px, une vignette par ligne */
  --duo-produit-h:260px;             /* hauteur commune de deux vues du même objet, à l'échelle */
  --duo-usage-h:240px;               /* hauteur d'un objet détouré en situation d'usage */
  --duo-usage-h-grand:clamp(280px,42vh,360px); /* le visuel mis en avant dans le duo */
  --choix-logo-w:132px;              /* largeur commune des logos de fabricant dans une carte de choix */
  --choix-logo-slot-h:40px;          /* hauteur de leur emplacement, pour aligner le texte des cartes */

  /* Hauteurs de visuels calées sur la hauteur d'écran : un objet ne doit pas
     dévorer le pli, ni sur téléphone, ni sur tablette, ni sur ordinateur. */
  --triptyque-centre-h:clamp(240px,38vh,420px);   /* visuel central d'un triptyque */
  --visual-fit-h:clamp(220px,34vh,380px);         /* objet piloté par sa hauteur dans une colonne */
  --video-frame-w-lap:clamp(200px,26vh,270px);    /* largeur du cadre 9:16 sous 1000 px */
  --branchement-centre-w:300px;                   /* colonne centrale de la passerelle, entre les deux côtés */
  --layout-compare:min(880px,100%);               /* largeur maximale d'un comparateur avant / après */
  --photo-carree-w:min(440px,100%);               /* photo cadrée au format 1:1 dans une colonne */
  --hero-appli-h:clamp(200px,30vh,320px);         /* application en main, coin bas droit du hero */
  --hero-appli-h-compact:clamp(120px,24vw,190px); /* la même quand le hero passe dans le flux, bande plus basse */
  --hero-media-h:min(60vw,36vh,320px);            /* photo du hero passée dans le flux, plafonnée */
  --hero-media-h-tel:46vw;                        /* la même sur téléphone, assez basse pour perdre le plafond nu du haut */
  --hero-texte-w:min(560px,52%);                  /* largeur de la colonne texte du hero en desktop */
  --hero-bg-w:114%;                               /* fond du hero élargi, ancré à gauche : le plénum recule à droite */
  --scene-course:220vh;                           /* course de défilement de la scène collante de l'application */
  --scene-top:calc(50vh - 250px);                 /* point d'accroche de l'étage collant, centré dans le champ */
  --scene-texte-shift:22px;                       /* translation d'entrée et de sortie des propos de la scène */
  --jalon-w:44px;                                 /* largeur d'un jalon de progression (scène, formulaire) */
  --jalon-h:2px;                                  /* épaisseur d'un jalon de progression */
  --case-taille:18px;                             /* case à cocher du formulaire */
  --configurateur-h-attente:640px;                /* hauteur du cadre du configurateur avant sa première mesure */
  --modale-w:min(720px,calc(100vw - var(--space-12)));       /* boîte du formulaire de contact */
  --modale-w-large:min(1100px,calc(100vw - var(--space-8))); /* boîte du configurateur */
  --modale-h:calc(100dvh - var(--space-16));                 /* hauteur utile, barres du navigateur comprises */
  --z-header:50;

  /* Documentaires : les variables CSS ne fonctionnent pas dans une media query.
     Toute modification ici doit être reportée manuellement dans styles.css. */
  --breakpoint-lap:1000px;
  --breakpoint-phone:600px;

  /* ----------------------------------------------------------------------
     5. Tokens sémantiques — thème sombre (défaut)
     C'est la seule couche que les composants doivent consommer.
     ---------------------------------------------------------------------- */

  --bg:var(--navy-900);
  --fg:var(--white);
  --fg-soft:var(--grey-200);
  --fg-mute:var(--grey-400);

  --accent:var(--cyan-500);
  --accent-surface:var(--cyan-500);   /* l'accent quand il sert de fond et non de texte */
  --accent-fg:var(--navy-950);
  --accent-alt:var(--teal-500);

  --rule:var(--alpha-light-16);
  --rule-strong:var(--alpha-light-28);

  --ph-hatch:var(--alpha-light-07);
  --ph-fill:var(--alpha-light-05);
  --ph-border:var(--alpha-light-16);

  --card-border:var(--alpha-light-16);
  /* Un filet à 16 % se perdait sur le navy : le bouton fantôme ne se lisait
     plus comme un bouton, surtout posé sur le fond d'une fenêtre. */
  --btn-ghost-border:var(--alpha-light-28);
  --accent-voile:var(--alpha-cyan-14);

  --focus-ring:var(--cyan-500);
  --danger:var(--red-500);        /* bordures et états, seuil non textuel */
  --danger-fg:var(--red-300);     /* messages d'erreur en texte, AA sur navy */
  --scrim:var(--alpha-navy-72);   /* fond des modales, identique sur les trois thèmes */
}

/* --------------------------------------------------------------------------
   Thème sombre renforcé — sections en navy-950
   -------------------------------------------------------------------------- */

.theme-deep{
  --bg:var(--navy-950);
}

/* --------------------------------------------------------------------------
   Thème clair — sections sur papier
   Contrastes vérifiés : fg 16.9, fg-soft 6.5, fg-mute 4.7, accent 5.6
   -------------------------------------------------------------------------- */

.theme-pale{
  --bg:var(--paper-50);
  --fg:var(--navy-950);
  --fg-soft:var(--grey-700);
  --fg-mute:var(--grey-600);

  /* Le bleu ciel remplace le teal. En texte il passe par la variante assombrie,
     seule à tenir le seuil AA sur papier ; en fond il garde le cyan de marque,
     avec un texte navy dessus. */
  --accent:var(--cyan-800);
  --accent-surface:var(--cyan-500);
  --accent-fg:var(--navy-950);
  --accent-alt:var(--teal-800);

  --rule:var(--alpha-dark-14);
  --rule-strong:var(--alpha-dark-18);

  --ph-hatch:var(--alpha-dark-06);
  --ph-fill:var(--alpha-dark-04);
  --ph-border:var(--alpha-dark-18);

  --card-border:var(--alpha-dark-14);
  --btn-ghost-border:var(--alpha-dark-25);
  --accent-voile:var(--alpha-cyan-800-10);

  --focus-ring:var(--cyan-800);
  --danger-fg:var(--red-700);
}