/* ============================================================
   AUREA, signature by IMPULSO — design tokens verrouilles
   Source : Charte graphique AUREA 2026 (PDF client, recu 2026-08-26)
   Verrouille : couleurs officielles + polices officielles + logo.
   A importer tel quel dans la page web du projet Cavalaire.
   ============================================================ */

:root{
  /* ---- Couleurs de marque OFFICIELLES (charte 2026) ----
     La charte ne definit que 3 teintes identitaires. Le bronze
     est la couleur principale ; sable et beige sont secondaires.
     Elles se declinent en baissant l'encrage (versions plus claires). */
  --bronze:  #987647;   /* RVB 152/118/71  — principale : titraille, filets, boutons, fonds colores */
  --sable:   #E6DAC4;   /* RVB 230/219/198 — secondaire claire : aplats doux, sections alternees */
  --beige:   #BDA182;   /* RVB 190/161/130 — secondaire : cartes, accents chauds, survols */

  /* ---- Neutres FONCTIONNELS (hors couleurs de marque) ----
     Necessaires pour le web : les 3 teintes de marque sont trop
     claires pour du texte courant. Base = fond blanc (charte :
     "le logo s'utilise principalement sur fond blanc"), encre =
     brun tres fonce (le "noir" rechauffe, admis par la charte qui
     autorise le logo en noir). Aucune couleur inventee hors de
     cette logique. */
  --blanc:      #FDFBF7;  /* base, Ivoire chaud (~70% des surfaces) — charte 2026 / prompt build */
  --blanc-pur:  #FFFFFF;
  --sable-clair:#F2EBDD;  /* sable eclairci : sections alternees, respirations */
  --encre:      #4A3B2C;  /* brun tres fonce : texte principal sur clair */
  --cacao:      #2A2018;  /* cacao profond : nuit du recit, fin du champ morph, texte sur tres clair */
  --encre-soft: #6B5C49;  /* brun moyen : texte secondaire, legendes */
  --line:       #E4D8C6;  /* filets fins (sable desature) */

  /* ---- Roles semantiques (utiliser CEUX-CI dans les pages) ---- */
  --bg:          var(--blanc);       /* fond primaire */
  --bg-alt:      var(--sable-clair); /* fond de section alternee */
  --surface:     var(--sable);       /* aplats, cartes claires */
  --surface-2:   var(--beige);       /* cartes/accents plus soutenus */
  --ink:         var(--encre);       /* texte principal sur clair */
  --ink-soft:    var(--encre-soft);  /* texte secondaire sur clair */
  --accent:      var(--bronze);      /* couleur de marque : titraille, filets, trait, boutons */
  --accent-warm: var(--beige);       /* accent chaud : chiffres, survols, courbes */
  --sombre:      var(--bronze);      /* sections inversees + footer : fond bronze, texte clair */
  --on-sombre:   var(--blanc-pur);   /* texte sur fond bronze */
  --on-sombre-soft: var(--sable);    /* texte secondaire sur fond bronze */

  /* Regle de contraste : jamais de texte courant en --sable, --beige
     ni en --bronze sur clair (contraste trop faible). Ces teintes sont
     reservees aux grands titres, chiffres, filets et aplats. Le corps
     reste en --ink sur --bg. */

  /* ---- Typographies OFFICIELLES (charte 2026) ----
     Titres / wordmark / aspect premium : Bentham (serif a empattement).
     Corps / signature / interface : Poppins (sans-serif, graisses Thin -> Black).
     Les deux sont des Google Fonts (droits commerciaux, integrables sans licence). */
  --font-title: "Bentham", "Cormorant Garamond", Georgia, serif;
  --font-body:  "Poppins", "Helvetica Neue", Arial, sans-serif;
  --title-tracking:  0.20em;  /* capitales espacees pour les titres serif */
  --eyebrow-tracking:0.34em;  /* sur-titres Poppins tres espaces */

  /* ---- Trait AUREA (infographies + icones) ---- */
  --trait-w:     1.4px;             /* epaisseur monoline */
  --trait-color: var(--bronze);
  --trait-cap:   round;

  /* ---- Rythme ---- */
  --maxw: 1180px;
  --section-pad: clamp(72px, 12vh, 160px);
}

/* Logo web (nouveau logo 2026, baseline SIGNATURE BY IMPULSO) :
   assets/aurea-logo-web-bronze.png  -> sur fond clair (hero, header)
   assets/aurea-logo-web-coquille.png -> sur fond bronze/sombre (footer) */

/* ===================================================================
   Extension build site-final (19/08) : motif vaguelettes + animations
   Motif = courants organiques poses en fond avec fondu vague.
   Voir specs/03-motif-vaguelettes.md. PAS de texture en repeat.
   =================================================================== */
:root{
  /* Motif MER AUREA (vagues en perspective, valide 27/08, provisoire jusqu au SVG du logo) */
  --mer-clair: url("../assets/patterns/aurea-mer-clair.png");   /* sur fond clair */
  --mer-sombre: url("../assets/patterns/aurea-mer-sombre.png"); /* sur fond bronze */
  /* Courants (deprecies, remplaces par la mer) */
  --courant-a: url("../assets/patterns/aurea-mer-clair.png");
  --courant-b: url("../assets/patterns/aurea-mer-clair.png");
  --courant-c: url("../assets/patterns/aurea-mer-clair.png");
  --courant-a-coq: url("../assets/patterns/aurea-mer-sombre.png");
  --courant-b-coq: url("../assets/patterns/aurea-mer-sombre.png");
  --courant-c-coq: url("../assets/patterns/aurea-mer-sombre.png");
  --motif-opacity: 0.9;  /* motif MER (opacite deja integree dans l asset) */          /* opacite crete du courant (0.10 a 0.18) */
  --motif-ebb-dur: 16s;           /* duree du cycle apparition/disparition (vague) */

  /* Hero scrubbee (voir specs/01-hero-animation-scroll.md) */
  --hero-scroll-len: 320vh;
  --hero-frames: 72;

  /* ---- Champ chromatique morphe au scroll (levier 1, spec 11) ----
     Une couche de fond persistante dont la teinte s'interpole pendant
     tout le defilement : l'horloge du recit, du large a l'intime.
     Tons chauds de la charte uniquement, jamais d'azur.
     Aube -> matin -> plein jour -> heure doree -> nuit. */
  --field-0: #FDFBF7;  /* Ivoire  (aube) */
  --field-1: #E6DAC4;  /* Sable   (matin) */
  --field-2: #BDA182;  /* Beige   (plein jour) */
  --field-3: #987647;  /* Bronze  (heure doree) */
  --field-4: #2A2018;  /* Cacao   (nuit) */
  --field-now: var(--field-0);  /* teinte courante (ecrite par le fallback JS) */

  /* Mouvement, lent et maitrise */
  --ease-cine: cubic-bezier(.22,.61,.36,1);
  --dur-reveal: 900ms;
  --dur-transition-villa: 750ms;
}

/* Un courant = une couche de fond posee dans une section en position:relative.
   Poser 1 a 3 par zone, tailles/positions/rotations variees, avec 2 ou 3 variantes. */
.courant{
  position:absolute; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  mix-blend-mode:multiply;               /* se fond dans le clair */
  opacity:0;                             /* revele par .is-in (scroll) ou par l'anim ebb */
}
.courant.a{background-image:var(--courant-a)}
.courant.b{background-image:var(--courant-b)}
.courant.c{background-image:var(--courant-c)}
/* Sur section sombre : ajouter .on-dark (variante coquille + blend screen) */
.on-dark .courant{mix-blend-mode:screen}
.on-dark .courant.a{background-image:var(--courant-a-coq)}
.on-dark .courant.b{background-image:var(--courant-b-coq)}
.on-dark .courant.c{background-image:var(--courant-c-coq)}

/* Fondu vague au scroll : JS ajoute .is-in quand la zone est visible */
.courant{transition:opacity 1400ms var(--ease-cine)}
.courant.is-in{opacity:var(--motif-opacity)}

/* Respiration lente (optionnel, hero/footer) : le courant affleure puis se retire */
@keyframes ebb{0%,100%{opacity:0} 50%{opacity:var(--motif-opacity)}}
.courant.breathe{animation:ebb var(--motif-ebb-dur) var(--ease-cine) infinite}

/* Le contenu de la section passe au-dessus */
.section-content{position:relative; z-index:1}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-reveal:1ms; --dur-transition-villa:1ms; }
  .courant{transition:none; animation:none; opacity:calc(var(--motif-opacity) * 0.7)}
  /* La descente hero ne se joue pas : afficher directement la derniere frame. */
}