/* =========================================================================
   ECOSUP NICE — Maquette du site · Direction « Façade ouverte »
   Socle : Signature — Créative (palette du Vieux-Nice) + grammaire du pas
   Sommaire
   1. Jetons            6. Composants
   2. Surfaces          7. Gabarits communs (header, menu, footer)
   3. Base              8. Pages
   4. Typographie       9. Mouvement
   5. Le pas           10. Réduction des animations
   ========================================================================= */

/* 1. JETONS ------------------------------------------------------------- */
:root {
  /* palette identitaire */
  --orange: #F15025;      /* identité : le pas, les grandes formes — jamais un fond de texte blanc */
  --action: #CB3814;      /* boutons : 5,10:1 avec le blanc */
  --action-h: #B03117;
  --action-p: #8C2817;
  --vert: #265B49;
  --vert-d: #174A3B;
  --pin: #0C261E;
  --pin-2: #14352B;
  --ocre: #EDAD4B;
  --ocre-l: #F7CA75;
  --ocre-d: #915F21;
  --rose: #FEECE5;
  --rose-2: #F5C4B6;
  --creme: #FBF7ED;
  --sauge: #81B19B;
  /* fonds des vignettes de cartes (maquette, illus.js « tones ») */
  --ton-pro: #E3EFE8;
  --ton-acad: #FBE7C2;
  --o100: #FEE8DE;
  --o300: #FEAD92;
  --o400: #FE7F5A;
  /* neutres chauds */
  --n0: #FFFFFF; --n50: #F7F3F0; --n100: #EFEAE6; --n200: #E2DBD6; --n300: #CBC2BD;
  --n500: #827A77; --n600: #6A6361; --n800: #3B3536; --n900: #2E282A;
  /* sémantique */
  --ok: #1E7546; --ok-bg: #E1F7E7; --warn: #9D6304; --warn-bg: #FFF2D9; --err: #B21F41; --err-bg: #FEEBEB; --info: #2D5B88; --info-bg: #E6F2FE;

  /* typographie : Avenir LT Pro en référence, Nunito Sans en substitut web */
  --f: "Avenir LT Pro", "Avenir Next LT Pro", "Avenir Next", "Avenir", "Nunito Sans", system-ui, sans-serif;

  /* grammaire du pas : M = 48 → r = 12, t = 4 */
  --m: 48px;
  --r-s: 4px;
  --r-l: 12px;
  --corner: var(--r-s) var(--r-l) var(--r-s) var(--r-s); /* coin de sortie en haut à droite */
  --corner-xl: 6px 28px 6px 6px;

  /* espace et rythme */
  --gut: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --sec: clamp(72px, 11vw, 160px);
  --hdr: 72px;

  /* mouvement : une seule courbe de marque, trois durées */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  /* grammaire du mouvement
     durées : t1 micro (couleur, bordure, appui) · t2 composant (survol, menus, onglets, accordéons, listes)
              t3 entrée (révélation au défilement, changement de page) · t4 tracé (le pas qui se dessine)
     courbes : --ease pour tout ce qui arrive ou réagit, --ease-io pour les changements d’état d’un bloc,
               --ease-in pour ce qui sort
     amplitudes : a1 4 px (flèche, appui) · a2 8 px (survol de carte, titre) · a3 24 px (révélation)
     déclencheurs : survol et focus clavier produisent toujours le même état ; défilement = une seule fois,
                    à 8 % d’entrée dans l’écran ; décalage entre éléments : 80 ms */
  --t1: .18s; --t2: .45s; --t3: .9s; --t4: 1.4s;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --a1: 4px; --a2: 8px; --a3: 24px; --stg: 80ms;

  --shadow-1: 0 1px 2px rgba(12, 38, 30, .06), 0 8px 24px -12px rgba(12, 38, 30, .22);
  --shadow-2: 0 2px 4px rgba(12, 38, 30, .06), 0 24px 60px -20px rgba(12, 38, 30, .35);
}

/* 2. SURFACES — chaque contexte redéfinit les rôles -------------------- */
.s-creme, :root { --on-fg: #fff; --bg: var(--creme); --fg: var(--pin); --tx: var(--n800); --tx2: var(--n600); --ln: var(--n200); --bd: var(--n500); --kw: var(--vert); --lk: var(--vert); --mk: var(--orange); --card: #fff; --cardb: var(--n200); --hl: var(--rose); --act: var(--action); --act-h: var(--action-h); --on-act: #fff; }
.s-rose { --on-fg: #fff; --bg: var(--rose); --fg: var(--pin); --tx: var(--n800); --tx2: var(--n600); --ln: var(--rose-2); --bd: var(--n500); --kw: var(--vert); --lk: var(--vert-d); --mk: var(--orange); --card: var(--creme); --cardb: var(--rose-2); --hl: var(--rose-2); --act: var(--action); --act-h: var(--action-h); --on-act: #fff; }
.s-vert { --on-fg: var(--pin); --bg: var(--vert); --fg: #fff; --tx: #DDF1E7; --tx2: #BADACA; --ln: rgba(255,255,255,.18); --bd: #BADACA; --kw: var(--ocre-l); --lk: var(--ocre-l); --mk: var(--ocre-l); --card: var(--vert-d); --cardb: var(--vert-d); --hl: var(--vert-d); --act: #fff; --act-h: var(--creme); --on-act: var(--pin); }
.s-pin { --on-fg: var(--pin); --bg: var(--pin); --fg: #fff; --tx: #DDF1E7; --tx2: #9CC4B1; --ln: rgba(255,255,255,.12); --bd: var(--sauge); --kw: var(--ocre); --lk: var(--ocre); --mk: var(--ocre); --card: var(--pin-2); --cardb: rgba(255,255,255,.08); --hl: var(--pin-2); --act: var(--action); --act-h: var(--action-h); --on-act: #fff; }
.s-brand { --on-fg: var(--action); --bg: var(--action); --fg: #fff; --tx: #fff; --tx2: #FEF5F0; --ln: rgba(255,255,255,.3); --bd: #fff; --kw: #fff; --lk: #fff; --mk: var(--pin); --card: var(--action-h); --cardb: var(--o400); --hl: var(--action-h); --act: #fff; --act-h: var(--creme); --on-act: var(--pin); }
.s-creme, .s-rose, .s-vert, .s-pin, .s-brand { background: var(--bg); color: var(--tx); }