/* ========================================================
   BRAND.CSS - Pionniers des Échecs (BRAND-2 + BRAND-3a)
   Tokens de marque + chargement de polices (self-hosted).
   Chargé dans views/partials/header.ejs → disponible sur
   toutes les pages publiques.
   ======================================================== */

/* --- Fraunces Variable (display / titres) --- */
/* latin-ext */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  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;
}
/* latin */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

/* --- Hanken Grotesk Variable (corps / UI) --- */
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/hanken-grotesk/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

/* --- Tokens de marque (source unique) --- */
:root {
  /* Couleurs */
  --ink:          #0F2A43; /* navy encre - fond footer, textes foncés */
  --accent:       #1C7A53; /* vert accent principal */
  --accent-deep:  #0F5638; /* vert profond - hover, states actifs */
  --paper:        #F3F1EA; /* crème - fond header, pages publiques */
  --white:        #FFFFFF;
  --muted:        #8A949E; /* texte secondaire */
  --danger:       #DC2626; /* erreurs / alertes sémantiques */

  /* Polices */
  --font-display: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  --font-body:    'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
}

/* ===================================================
   BRAND-3a - Composants éditoriaux (inscription bloc)
   =================================================== */

/* --- Champ souligné (bordure-bas seule, pas de boîte) --- */
.champ-souligne {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  padding: .5rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.champ-souligne::placeholder { color: var(--muted); font-size: .9rem; }
.champ-souligne:focus { border-bottom-color: var(--accent); }
.champ-souligne.champ-erreur { border-bottom-color: var(--danger); }
select.champ-souligne { cursor: pointer; appearance: none; -webkit-appearance: none; }

/* --- Label de champ souligné --- */
.champ-label {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .35rem;
}

/* --- Colonne éditoriale (filets, pas de cartes) --- */
.colonne-edito-label {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.colonne-edito-section {
  border-top: 1px solid rgba(15,42,67,.12);
}
.colonne-edito-section:first-child { border-top: none; }

/* --- Damier rule (séparateur marque) --- */
.damier-rule {
  height: 12px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(15,42,67,.06) 0px,
    rgba(15,42,67,.06) 12px,
    var(--paper) 12px,
    var(--paper) 24px
  );
  position: relative;
}
.damier-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  background: var(--accent);
  transform: translateX(-50%);
}

/* --- Déroulé numéroté (grands chiffres Fraunces) --- */
.deroule-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
}
.deroule-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

/* --- Bloc citation Fraunces italic à filet vert --- */
.bloc-citation {
  border-left: 4px solid var(--accent);
  padding-left: 1.5rem;
}
.bloc-citation blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}
.bloc-citation cite {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-style: normal;
}

/* ===================================================
   BRAND-3a-bis - ombres douces, blanc chaud, tokens
   =================================================== */
:root {
  --white-warm:  #FFFDF8;                                             /* fond cartes surélevées */
  --rule-warm:   #EFE7D7;                                             /* filets chauds */
  --shadow-card: 0 16px 36px rgba(34,28,18,.13), 0 3px 8px rgba(34,28,18,.06); /* carte principale */
  --shadow-soft: 0 10px 26px rgba(34,28,18,.09);                     /* cartes secondaires */
  --shadow-btn:  0 8px 18px rgba(28,122,83,.26);                     /* bouton CTA vert */
}

/* ========================================================
   ACCUEIL v5 - nouvelle langue visuelle (branche design/accueil-v5)
   Polices auto-hébergées + tokens.
   ⚠️ Noms de tokens NON colisants : on n'écrase PAS --ink (navy
   #0F2A43) ni --paper (#F3F1EA) dont dépendent les autres pages.
   Le vert #1C7A53 est commun aux deux systèmes (= --accent).
   Correspondances BRAND-2 → v5 :
     --paper  #F3F1EA  →  --paper-warm  #F2ECE0
     --ink    #0F2A43  →  --ink-warm    #241F17  (encre chaude v5)
     --accent #1C7A53  =   --green       #1C7A53  (identique)
     --white-warm #FFFDF8 (réutilisé tel quel pour les cartes v5)
   ======================================================== */

/* --- Young Serif (titres v5, poids 400 unique) --- */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/young-serif/young-serif-latin-ext-400-normal.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: 'Young Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/young-serif/young-serif-latin-400-normal.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;
}

/* --- Instrument Sans Variable (texte / UI v5, 400–700) --- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/instrument-sans/instrument-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/instrument-sans/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

/* --- Caveat Variable (annotations manuscrites rares, 400–700) --- */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/caveat/caveat-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/caveat/caveat-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

/* --- Tokens v5 (couleurs, rayons, ombres franches) --- */
:root {
  --paper-warm:    #F2ECE0; /* fond de page crème chaude */
  --ink-warm:      #241F17; /* encre chaude : texte + bordures */
  --ink-warm-soft: #5C5346;
  --green:         #1C7A53; /* = --accent (accent concentré : boutons, prix) */
  --green-dark:    #12523A;
  --green-tint:    #E2ECE4;
  --jaune:         #DFA83C; /* doré chaud (ruban, accents) */
  --jaune-soft:    #F6E7C4;
  --rouge:         #C25438; /* terracotta, micro-doses */
  --rouge-soft:    #F3E0D4;
  --neutre:        #EAE2D0;
  --line-warm:     #DFD5C1;
  --grid-warm:     rgba(36,31,23,.05); /* quadrillage papier de cahier */
  --r-warm:        16px;
  --r-warm-sm:     12px;
  --hard:          4px 4px 0 var(--ink-warm);
  --hard-sm:       3px 3px 0 var(--ink-warm);

  /* Familles v5 (self-host) */
  --font-serif-v5: 'Young Serif', Georgia, serif;
  --font-sans-v5:  'Instrument Sans', system-ui, sans-serif;
  --font-hand-v5:  'Caveat', cursive;
}