/* =========================================================================
   WEBSTRATEGE.FR - TOKENS
   Repris tels quels de la DA V2 webstratege.co (BookStack p371, :root de /v2/
   et v2-chrome.css). Archivo variable auto-hebergee (memes 6 fichiers).
   ========================================================================= */
@font-face { font-family:'Archivo'; font-style:italic; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-01.woff2) format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Archivo'; font-style:italic; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-02.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:'Archivo'; font-style:italic; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-03.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-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-04.woff2) format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-05.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:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(../fonts/archivo/archivo-06.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; }

/* Police de repli calibrée sur Archivo (métriques ajustées) : le texte garde la même largeur
   et la même hauteur de ligne avant l'arrivée du woff2, donc plus de décalage de mise en page (CLS). */
@font-face { font-family:'Archivo Fallback'; src:local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'); size-adjust:99%; ascent-override:88%; descent-override:20%; line-gap-override:0%; }

/* =========================================================================
   Passage lisibilité (11/09/2026) : UN SEUL DESIGN, sans bascule de thème.
   Base claire (crème plus lumineuse que le parchemin p371, cartes quasi
   blanches à cadre net + ombre dure or) qui alterne avec des blocs sombres
   (classe .cinema : hero, bandeau chiffres, encarts CTA, entête de fiche,
   header, menu, footer), comme la home de webstratege.co en mode clair.
   ========================================================================= */
/* .clair : un composant clair pose dans une zone sombre (carte du formulaire d'inscription) reprend les tokens de base. */
:root,.cinema .clair{
  /* Or (palette light p371 : ors assombris) */
  --gold:#96702a; --gold2:#b3873a; --gold3:#755620; --gold-shadow:#755620;
  --on-gold:#fbf7ee;
  /* Fonds */
  --bg:#f3ecdd;
  --surface-1:#fffdf9;
  --surface-2:#e9e0cb;
  --surface-warm:#e2d7bd;
  --surface-deep:#d5c8a7;
  /* Surfaces "cinema" : restent sombres dans les 2 themes */
  --cinema-1:#141210;
  --cinema-2:#0f0d0a;
  --cinema-warm:#1f1810;
  --cinema-text:#f2f1ed;
  --cinema-muted:rgba(242,241,237,.78);
  --cinema-border:rgba(255,255,255,.14);
  /* Texte */
  --txt:#191512;
  --muted:rgba(25,21,18,.8);
  --fade:rgba(25,21,18,.7);
  /* Filets / bordures */
  --line:#cdbf9c;
  --card-b:rgba(25,21,18,.2);
  /* Overlays */
  --overlay-1:rgba(20,15,10,.05);
  --overlay-2:rgba(20,15,10,.08);
  --overlay-3:rgba(20,15,10,.12);
  --overlay-4:rgba(20,15,10,.18);
  /* Ombres (brun chaud, jamais gris) */
  --sh-soft:rgba(60,45,30,.12);
  --sh-med:rgba(60,45,30,.16);
  --sh-heavy:rgba(60,45,30,.22);
  --sh-btn:rgba(60,45,30,.2);
  --sh-btn-warm:rgba(150,112,42,.35);
  /* Ombre dure des cartes (polygone or dessine par le cadre SVG) */
  --card-sh:rgba(150,112,42,.45);
  --card-bg:var(--surface-1);
  /* Voiles */
  --veil-strong:rgba(243,236,221,.9);
  --veil-med:rgba(243,236,221,.6);
  /* Or translucide */
  --gold-10:rgba(150,112,42,.12);
  --gold-14:rgba(150,112,42,.18);
  --gold-30:rgba(150,112,42,.5);
  /* Champs de formulaire */
  --field-bg:#fffdf9;
  --field-b:#a89a72;
  /* Boutons or : rendu webstratege.co repris a l'identique dans TOUTES les zones
     (mesure le 11/09 : fond #ebbb81, texte #07070b, ombre dure #8a6531 + diffuse rgba(0,0,0,.5)) */
  --btn-gold:#ebbb81; --btn-gold2:#f2c088; --btn-gold-txt:#07070b; --btn-gold-sh:#8a6531; --btn-gold-glow:rgba(0,0,0,.5);
  /* Pastille d'icone en zone claire : plaque sombre, icone or vif (jamais d'icone grise sur or) */
  --plate:#191512; --plate-b:#191512; --plate-ic:#ebbb81;
  /* Etiquette inversee haut contraste (kicker, badge Fondatrice, chip active, page courante) */
  --inv-bg:#191512; --inv-txt:#f2f1ed; --inv-acc:#ebbb81;
  /* Zone basse creme des cartes agence */
  --card-lo:#f3ecdd;
  /* Fond pale de la note d'un avis */
  --note-bg:#f3ecdd;
  /* Alerte (champ refuse) : terracotta brique sobre, jamais de rouge vif */
  --alert:#a84f36;
  /* Divers */
  --slant:-17deg;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Archivo','Archivo Fallback',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  color-scheme:light;
}

/* Zones "cinema" : header cockpit, menu plein ecran, footer, et toute section
   ou carte portant la classe .cinema : tokens sombres p371 (or sur noir),
   texte #f2f1ed jamais sous 80 % d'opacite. */
#hd, .menu-ov, #foot, .cinema{
  --gold:#ebbb81; --gold2:#f2c088; --gold3:#c99a5b; --gold-shadow:#8a6531; --on-gold:#07070b;
  --bg:#07070b; --surface-1:#1a1712; --surface-2:#14120e; --surface-warm:#211c14; --surface-deep:#0d0c0a;
  --txt:#f2f1ed; --muted:rgba(242,241,237,.8); --fade:rgba(242,241,237,.7);
  --line:#3a3730; --card-b:rgba(255,255,255,.16);
  --overlay-1:rgba(255,255,255,.05); --overlay-2:rgba(255,255,255,.08); --overlay-3:rgba(255,255,255,.12); --overlay-4:rgba(255,255,255,.18);
  --sh-soft:rgba(0,0,0,.4); --sh-med:rgba(0,0,0,.5); --sh-heavy:rgba(0,0,0,.55); --sh-btn:rgba(0,0,0,.45); --sh-btn-warm:rgba(235,187,129,.42);
  --card-sh:rgba(235,187,129,.3); --card-bg:var(--cinema-1);
  --veil-strong:rgba(7,7,11,.92); --veil-med:rgba(10,8,6,.75);
  --gold-10:rgba(235,187,129,.1); --gold-14:rgba(235,187,129,.16); --gold-30:rgba(235,187,129,.45);
  --field-bg:#100e0b; --field-b:#4a4538;
  --plate:#211c14; --plate-b:rgba(235,187,129,.38); --plate-ic:#ebbb81;
  --inv-bg:#ebbb81; --inv-txt:#07070b; --inv-acc:#07070b;
  --card-lo:#100e0b; --note-bg:#211c14;
  --alert:#e08a6c;
  color:var(--txt);
}
.cinema .clair{color:var(--txt)}