/* ==========================================================================
   Boris Guignard — couche « premium dynamique » — 2026-10-26
   S'ajoute APRÈS style.css (charte inchangée : noir / or / crème, EB Garamond + Inter, spirale φ).
   Apparence et mouvement seulement : aucun texte ajouté ou modifié. Les états masqués sont posés par premium-bg.js
   (jamais ici) : sans script, ou en « mouvement réduit », tout est visible. Version sobre : premium-bg-sobre.css.
   ========================================================================== */

:root {
  --or-texte: #7A5C14;      /* or lisible sur fond clair (contraste 5,7 sur crème) */
  --gris-texte: #6B6B7B;    /* gris lisible sur fond clair (contraste 4,8 sur crème) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .45s;
  --ombre-2: 0 6px 12px rgba(14, 14, 18, .06), 0 24px 60px rgba(14, 14, 18, .14);
}

/* ---- Accessibilité : contraste en sections claires (couleur seulement) ---- */
.section--creme, .section--gris, .section:not([class*="section--"]) { --gris-mid: var(--gris-texte); }
.section--creme a:not(.btn), .section--gris a:not(.btn), .section:not([class*="section--"]) a:not(.btn) { color: var(--or-texte); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--or-clair); outline-offset: 3px;
}
.section--creme :focus-visible, .section--gris :focus-visible, .section:not([class*="section--"]) :focus-visible { outline-color: var(--or-texte); }

/* ---- Défilement fluide (Lenis) : le défilement natif « smooth » est neutralisé quand Lenis est actif ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Navigation : fond qui se solidifie, se range en descendant, filet or sous les liens ---- */
.nav { transition: transform .6s var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.nav.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.nav.is-hidden { transform: translateY(-101%); }
.nav:focus-within { transform: none; }
.nav__phi { will-change: transform; }
.nav__links a {
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: color .2s, background-size var(--dur-1) var(--ease);
}
.nav__links a:hover, .nav__links a.active { background-size: 100% 1px; }
.nav__cta { background-image: none !important; }

/* ---- Barre de progression de lecture ---- */
.bg-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---- Héros : lignes masquées, champ d'or, spirale ---- */
.bgl { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.bgl__i { display: block; will-change: transform; }
/* Composition du héros : texte à gauche, spirale vedette dans sa propre colonne à droite, jamais sur le texte.
   Le script mesure le texte : si la colonne de droite devient trop étroite (tablette, téléphone), il ajoute .bg-hero-empile
   et la spirale passe AU-DESSUS du texte (voir plus bas). Sans script : colonne de droite, largeur fixe. */
.hero__spiral-wrap { will-change: transform; width: var(--zone, 42%); right: 0; left: auto; }
.hero__spiral-wrap > .wp-block-group__inner-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }   /* WordPress ajoute ce conteneur entre le bloc et la spirale */
.hero__spiral-wrap svg { width: var(--sp, min(100%, 60vh)); height: auto; aspect-ratio: 1 / 1; flex: none; overflow: visible; filter: drop-shadow(0 0 10px rgba(196, 151, 58, .55)) drop-shadow(0 0 34px rgba(196, 151, 58, .25)); }
.hero.bg-hero-empile { padding-top: calc(104px + 36vh); align-items: flex-start; }
.hero.bg-hero-empile .hero__spiral-wrap { left: 0; right: 0; width: 100%; top: 104px; bottom: auto; height: 36vh; }
.hero.bg-hero-empile .hero__spiral-wrap svg { width: var(--sp, min(100%, 30vh)); }
/* Tablette et téléphone : même disposition empilée posée dès le CSS (le script ne fait que la confirmer), pour éviter tout saut de mise en page au chargement */
@media (max-width: 1023px) {
  .hero { padding-top: calc(104px + 36vh); align-items: flex-start; }
  .hero .hero__spiral-wrap { left: 0; right: 0; width: 100%; top: 104px; bottom: auto; height: 36vh; }
  .hero .hero__spiral-wrap svg { width: var(--sp, min(100%, 30vh)); }
}
.bg-comete { filter: drop-shadow(0 0 6px #F2D58C); }
.bg-spiral-vedette { filter: drop-shadow(0 0 12px rgba(196, 151, 58, .6)); }
.bg-deco { filter: drop-shadow(0 0 8px rgba(196, 151, 58, .25)); }
.bg-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero > .container { z-index: 2; }
.hero__spiral-wrap { z-index: 1; }
.hero__line { z-index: 3; transform-origin: left; }
.bg-pause {
  position: absolute; z-index: 4; right: var(--s5, 24px); bottom: var(--s5, 24px);
  width: 44px; height: 44px; display: grid; place-items: center;   /* cible tactile 44 px */
  background: rgba(14, 14, 18, .5); border: 1px solid rgba(196, 151, 58, .35); border-radius: 50%;
  color: var(--or-clair); cursor: pointer; transition: border-color .3s, background-color .3s;
}
.bg-pause:hover { border-color: var(--or); background: rgba(196, 151, 58, .12); }
.bg-pause rect { fill: currentColor; }
.bg-pause[aria-pressed="true"] .p1 { transform: translate(2px, 0) skewY(-25deg); transform-origin: 6px 12px; }
.bg-pause[aria-pressed="true"] .p2 { opacity: 0; }

/* ---- Mots qui montent (titres) ou qui s'allument (citation) ---- */
.bgw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.bgw__i, .bgm { display: inline-block; will-change: transform, opacity; }

/* ---- Boutons : remplissage glissant, aimant (translate), flèche ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), translate .4s var(--ease);
}
.btn--or:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(196, 151, 58, .3); }

/* ---- Cartes : halo doré qui suit le curseur ---- */
.card, .format-cell, .highlight-box { position: relative; }
.card { transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.card:hover { box-shadow: var(--ombre-2); }
.card::after, .format-cell::after, .highlight-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 151, 58, .16), transparent 62%);
}
.card:hover::after, .format-cell:hover::after, .highlight-box:hover::after { opacity: 1; }

/* ---- Spirales φ de fond (une par section, tracées par le script) ---- */
.section, .page-header { position: relative; overflow-x: clip; }
.section > .container, .page-header > .container { position: relative; z-index: 1; }
.bg-deco { position: absolute; z-index: 0; top: 50%; width: 620px; height: 620px; margin-top: -310px; pointer-events: none; will-change: transform; }
.bg-deco--d { right: -220px; }
.bg-deco--g { left: -220px; }
@media (max-width: 700px) { .bg-deco { width: 420px; height: 420px; margin-top: -210px; } .bg-deco--d { right: -200px; } .bg-deco--g { left: -200px; } }
.card, .format-cell, .highlight-box { transform-style: preserve-3d; }

/* ---- Contraste : textes clairs sur fond sombre (couleurs seulement, aucun texte touché ; ratios > 4,5 sur #0E0E12) ---- */
.tag--clair { color: rgba(217, 184, 112, .95); }
.quote--clair cite { color: rgba(217, 184, 112, .92); }
.footer__brand, .footer a, .footer ul a { color: rgba(247, 244, 238, .82); }
.footer__desc, .footer__disclaimer, .footer__bottom, .footer__bottom span { color: rgba(247, 244, 238, .72); }
.footer h4 { color: rgba(217, 184, 112, .95); }
.footer a:hover, .footer ul a:hover { color: var(--or-clair); }

/* ---- Chiffres : léger éclat doré ---- */
.stat__num { text-shadow: 0 0 28px rgba(196, 151, 58, .25); }

/* ---- Anneau de curseur (souris seulement ; le curseur normal reste visible) ---- */
.bg-cursor {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 9999;
  border: 1px solid rgba(196, 151, 58, .75); border-radius: 50%; pointer-events: none; opacity: 0;
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s;
}
.bg-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--or); }
.bg-cursor.is-on { opacity: 1; }
.bg-cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(196, 151, 58, .1); }
@media (hover: none), (pointer: coarse) { .bg-cursor { display: none; } }

/* ---- Formulaire : focus et erreurs lisibles ---- */
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--or); box-shadow: 0 0 0 3px rgba(196, 151, 58, .22); outline: none;
}
#form-notice:not([hidden]) { padding: var(--s4); border-left: 3px solid var(--or); background: rgba(196, 151, 58, .1); margin-bottom: var(--s4); }

/* ---- Mouvement réduit : tout est immédiatement visible, rien ne bouge ---- */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__links a, .btn, .card, .bg-cursor { transition: none; }
  .nav.is-hidden { transform: none; }
  .bg-field, .bg-progress, .bg-cursor, .bg-pause { display: none; }
}