/* =====================================================================
   IOcafé — THÈME / DESIGN TOKENS (source de vérité visuelle)
   Distribué dans chaque surface par scripts/build.sh (comme /data).
   On ne modifie les couleurs / typos / tokens QU'ICI.
   Nommage : 100 % français (la signature IOcafé jusque dans le code).
   ===================================================================== */

/* ---------------------------------------------------------------------
   POLICES — AUTO-HÉBERGÉES (woff2 dans shared/fonts/, copiées dans le
   dossier /fonts/ de chaque surface par build.sh). Aucune requête vers
   Google/Adobe → plus rapide, plus éco, conforme RGPD/CNIL.
   Toutes libres (SIL OFL). Familles :
   • Inter — corps de texte / UI
   • Playfair Display — titres & display (+ italique)
   • Allura — accent manuscrit (« double typo », 1 seul poids)
   • Instrument Serif — titres des apps posées (nora, tab)
   Pour ajouter/mettre à jour une police : déposer le .woff2 dans
   shared/fonts/ et déclarer son @font-face ci-dessous (source unique).
   --------------------------------------------------------------------- */
/* Inter et Playfair Display sont des polices VARIABLES : un seul fichier par style couvre tous
   les poids. On garde UNE déclaration par graisse (le moteur règle l'axe de graisse sur la valeur
   déclarée, et les sous-ensembles cyrilliques par graisse ci-dessous restent cohérents), mais
   toutes pointent vers le MÊME fichier : le navigateur ne le télécharge qu'une fois.
   (Une seule déclaration « 100 900 » faisait tomber l'Inter semi-gras sur une police de secours
   à côté des sous-ensembles cyrilliques statiques — constaté sur tab le 2026-10-08.) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/playfair-italic-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/playfair-italic-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/playfair-italic-400.woff2") format("woff2")}
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/allura-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/instrument-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/instrument-italic-400.woff2") format("woff2")}

/* Sous-ensembles CYRILLIQUES — expo "Rêves du pays natal" (noms des artistes en
   ukrainien). unicode-range = seule la présence de caractère cyrillique dans la
   page déclenche le téléchargement ; une page 100% française n'en télécharge rien. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0400-045F,U+0462-0463,U+0490-0491,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/inter-600-cyrillic.woff2") format("woff2");
  unicode-range:U+0400-045F,U+0462-0463,U+0490-0491,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/playfair-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0400-045F,U+0462-0463,U+0490-0491,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/playfair-600-cyrillic.woff2") format("woff2");
  unicode-range:U+0400-045F,U+0462-0463,U+0490-0491,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url("/fonts/playfair-italic-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0400-045F,U+0462-0463,U+0490-0491,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  /* === COULEURS — charte officielle (une couleur = une seule ligne, ici) === */
  --rouge:#731c14;            /* Rouge Basque Profond — principale / marque */
  --rouge-profond:#5c150f;    /* nuance foncée (survols, dégradés) */
  --bleu:#054873;             /* Bleu nuit Atlantique */
  --vert:#395849;             /* Vert Caféier */
  --sable:#a76933;            /* Sable Torréfié */
  --dore:#f3a009;             /* Doré de l'aube — accent */
  --dore-pale:#f3d8a6;        /* Doré pâle (kickers sur photo) */
  --creme:#f7f3e3;            /* Crème Latte — couleur de marque / « papier » */
  --creme-ecran:#efe7d4;      /* Crème d'écran — fond de page www/tab (ton plus soutenu, choix assumé) */

  --sable-profond:#83552b;    /* sable foncé pour les petits textes (5,2:1 sur crème d'écran ; le sable pur échoue l'AA) */

  /* === COULEURS SECONDAIRES (charte, rôle « réserve ») === */
  --terracotta:#cd7f6a;
  --sauge:#7fa291;

  /* === NEUTRES DE LECTURE (« encre » = texte, « filet » = traits) === */
  --encre:#3a322c;            /* texte courant */
  --encre-2:#6a6055;          /* texte secondaire */
  --encre-3:#8a7f74;          /* texte estompé */
  --encre-4:#a39684;          /* texte ténu */
  --filet:#e7ddcb;            /* filet léger (bordures) */
  --filet-2:#e0d4bb;          /* filet moyen */
  --filet-3:#d9cbb0;          /* filet appuyé / pointillés */
  --carte:#fffdf8;            /* fond des cartes */

  /* === TRAITS (filets sur fond crème, refonte www 2026) === */
  --trait:rgba(58,50,44,.22);       /* filet visible d'un pixel */
  --trait-doux:rgba(58,50,44,.11);  /* filet discret */

  /* === RÔLES SÉMANTIQUES (à privilégier dans les pages) === */
  --marque:var(--rouge);
  --marque-profond:var(--rouge-profond);
  --accent:var(--dore);
  --fond:var(--creme);        /* fond par défaut (whois) ; www/tab peignent en --creme-ecran */

  /* === TYPOGRAPHIE === */
  --police-display:"Playfair Display",Georgia,serif;   /* héros / très gros titres */
  --police-titre:"Playfair Display",Georgia,serif;     /* titres de sections */
  --police-corps:"Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --police-script:"Allura","Pinyon Script",cursive;    /* accent manuscrit (double typo) */

  /* === FORMES / MOUVEMENT / OMBRES === */
  --rayon:14px;
  --rayon-lg:22px;
  --largeur-max:1120px;
  --transition:cubic-bezier(.22,.61,.36,1);
  --anneau:0 0 0 3px rgba(115,28,20,.13);            /* halo de focus (accessibilité) */
  --ombre-carte:0 24px 60px -34px rgba(58,50,44,.5);
  --ombre-bouton:0 10px 22px -12px rgba(115,28,20,.7);

  /* === MISE EN PAGE www (refonte 2026, « La maison ») === */
  --gouttiere:clamp(1.25rem,5vw,3.5rem);        /* marge latérale */
  --espace-chapitre:clamp(5.5rem,12vw,10.5rem); /* respiration entre chapitres */
  --largeur-page:86rem;                          /* compositions photo */
  --hauteur-entete:4.25rem;                      /* barre de navigation */
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fond);color:var(--encre);font-family:var(--police-corps);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--police-titre);font-weight:500;line-height:1.05;color:var(--marque-profond)}
em,.italic{font-style:italic}
a{color:var(--marque)}