/* ═══════════════════════════════════════════════════════════════
   TOKENS - maquette validée (Figma 98EoANGPtzoJlWb5E3KcSg, nœud 10:806)
   Valeurs relevées au pixel dans get_design_context. Le relevé complet,
   section par section, est dans _preparation/design-sebastien/FINAL-SPEC.md.

   Chaque section a sa feuille dans assets/css/sections/ et ne doit
   utiliser QUE ces tokens pour les couleurs, fontes et effets : c'est
   ce qui garantit la cohérence entre des sections écrites séparément.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ---- Fontes (voir fonts.css) ---- */
  --font-display:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-ui:'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-text:'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-article:'Brygada 1918', Georgia, 'Times New Roman', serif;
  /* Le parent lit --font-body pour ses pages intérieures : on l'aligne
     sur la fonte interface pour que tout le site change de voix
     en même temps. */
  --font-body:var(--font-ui);

  /* ---- Encres ---- */
  --ink-fort:#0e0f11;     /* H1, titres, boutons pleins, filet sous la nav */
  --ink:#121212;          /* titre « À propos », chapô en gras */
  --texte:#3d4247;        /* corps des cartes thérapie, paragraphe du hero */
  --texte-doux:#3a3a3a;   /* corps du bloc À propos, dl */
  --muted:#5b6066;        /* surtitres, tarifs, mention sous les boutons */
  --gris:#7f7f7f;         /* chiffres 1-4 des cartes thérapie */
  --argent:#bebebe;       /* bordures de cartes, filets, auteurs de citation */
  --argent-2:#919292;     /* filets de numérotation, bordure haute des cartes article, nav footer */
  --gris-clair:#9aa0a6;   /* footer : adresse, liens légaux, séparateur langue */
  --gris-bd:#ededed;      /* bandeau sous le hero : fill brut du nœud 10:1022,
                             le code généré par Figma disait #bdbdbd, l'arbre
                             brut dit #ededed sans opacité, on suit l'arbre */
  --filet-doux:rgba(198,203,209,.7);  /* filet scindé du bloc À propos */
  --filet-footer:#23272e;

  /* ---- Fonds ---- */
  --page:#f5f4f1;         /* fond de page, cartes d'articles, texte sur sombre */
  --cream:#f4f4f2;        /* citation de la bande */
  --blanc:#ffffff;
  --sombre:#0e0f10;       /* bande citation + prestations */
  --sombre-2:#0e1011;
  --or:#b9a46a;           /* soulignement du lien actif dans la nav */
  --bleu-teinte:rgba(196,214,226,.7); /* voile sur la photo du cabinet */
  --gris-photo:#e9edf0;

  /* ---- Fond sombre en dégradé radial (Jung, Levine, contact, bandeau) ----
     Figma : radial #2f3234 → #1e2122 (50%) → #0e1011, centre (330, 0),
     rayons ≈ 470px × 80% de la hauteur ; par-dessus un voile noir à 20%
     et un reflet blanc à 7% qui s'éteint à 32% de la hauteur. */
  --grad-sombre:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%),
    radial-gradient(470px 80% at 330px 0, #2f3234 0%, #1e2122 50%, #0e1011 100%);

  /* ---- Bouton plein (nav et hero) : encre + reflet ---- */
  --grad-bouton:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, #0e0f11, #0e0f11);

  /* ---- Textures ----
     Marbre en fond des sections claires ; grain à 4% sur les sombres.
     PIÈGE : un url() dans une custom property se résout par rapport à
     la feuille qui l'UTILISE. Ces deux tokens ne sont donc valables que
     depuis assets/css/*.css (comme ici) ; depuis sections/, écrire le
     chemin en clair : url('../../img/v-marbre.png'). */
  --marbre:url('../img/v-marbre.png');
  --grain:url('../img/v-grain.png');
  --grain-opacite:.04;

  /* ---- Ombres ----
     Style Figma « ombre » : #121212 à 12%, décalage 0/23, flou 36, spread -40.
     Un spread aussi négatif efface presque tout : les rendus Figma montrent
     une ombre douce et large, on la reproduit à l'œil plutôt qu'au chiffre. */
  --ombre:0 23px 36px -20px rgba(18,18,18,.22);
  --ombre-carte:0 22px 18px -14px rgba(10,12,16,.10);   /* cartes d'articles */
  --ombre-photo:0 23px 32px 8px rgba(18,18,18,.12);     /* portrait du hero */
  --ombre-cabinet:0 25px 35px -6px rgba(18,18,18,.19);  /* carte du cabinet */

  /* ---- Échelle typographique (px, relevés Figma) ---- */
  --fs-h1:48px;        /* lh 53, Instrument Sans 600 */
  --fs-h2:56px;        /* « Thérapies », Instrument Sans 600 */
  --fs-h2-contact:44px;/* « Prendre rendez-vous », Instrument Sans 500 */
  --fs-h2-apropos:38px;/* lh 39, Instrument Sans 700 */
  --fs-citation:40px;  /* lh 54, Instrument Sans 500, blanc */
  --fs-bande:30px;     /* lh 39, Instrument Sans 600 */
  --fs-carte-titre:27px;   /* lh 32.4, Instrument Sans 500 */
  --fs-carte-accroche:19px;/* lh 27.6, Instrument Sans 400 */
  --fs-carte-num:44px;     /* Instrument Sans 400, --gris */
  --fs-article-titre:23px; /* lh 28.8, Brygada 1918 600 */
  --fs-lead:16px;      /* lh 28, Schibsted 400, hero */
  --fs-corps:14px;     /* lh 24.5, Schibsted 400, cartes */
  --fs-apropos-lead:17px;  /* lh 28.9, DM Sans 700 */
  --fs-apropos-texte:15px; /* lh 25.5, DM Sans 400 */
  --fs-mention:13px;   /* Schibsted 400 : sous les boutons, adresse */
  --fs-surtitre:11.5px;
  --ls-surtitre:2.53px;    /* Figma en px, pas en em : 2.53 sur 11.5 */
  --fs-etiquette:11px;
  --ls-etiquette:2.42px;   /* tarifs, « Lire la suite → » */
  --fs-bouton:12px;
  --ls-bouton:2.16px;

  /* ---- Grille ----
     Canevas 1440, gouttière 72, contenu utile 1296. --gut n'est PAS
     redéfini : le parent l'abaisse à 40px sous 1180px et 24px sous 480px
     et une redéfinition dans :root gagnerait partout, y compris dans ces
     paliers. Sa valeur desktop est déjà celle du Figma. */
  --contenu:1296px;
  --encart:1200px;         /* bloc À propos */
  /* Hauteur de la barre de navigation (Figma 109.4, arrondi au pixel).
     Servait déjà implicitement à header.css ; devenue un token parce que
     le lien d'évitement en a besoin : la nav rappelée est en position
     fixe et recouvrirait le haut de <main> après le saut, on réserve sa
     hauteur en scroll-margin (voir base.css). */
  --nav-h:110px;
  --carte-therapie:628px;  /* 2 colonnes, gap 39 */
  --gap-therapie:39px;
  --carte-article:405.3px; /* 3 colonnes, gap 40 / 42 */
  --gap-article:40px;
  --gap-article-v:42px;

  /* ---- Angles : aucun arrondi nulle part ---- */
  --radius:0;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Accents du PARENT remappés sur la palette de Sébastien ----
     Retour d'Emmanuel du 09/09 : plus aucun bleu nulle part, seules les
     couleurs de la maquette. Le parent pose --teal (#447583) et --wa
     (#5b97a8) sur 46 règles (boutons, liens, sommaire, jauge du retour
     en haut, WhatsApp flottant) : plutôt que les surcharger une à une,
     on redéfinit les tokens ici, dans :root, donc pour TOUTES les pages
     (pages.css le faisait déjà pour les pages intérieures seulement,
     l'accueil gardait le bleu). Aucun de ces tokens n'est redéfini dans
     une media query du parent : le remap est sans effet de bord. */
  --teal:var(--ink-fort);
  --wa:var(--ink-fort);
  --wa-fonce:#000;
  --gold:var(--or);
  --sable:var(--argent);
}

/* ─── Utilitaires partagés par toutes les sections ───
   Les fonds texturés et le grain sont les mêmes partout : on les définit
   une fois ici, les sections posent la classe. */
.fond-marbre{
  background-color:var(--page);
  background-image:var(--marbre);
  background-size:cover;
  background-position:center top;
}
.fond-sombre{
  position:relative;
  background:var(--grad-sombre);
  color:var(--page);
  isolation:isolate;
}
.fond-sombre::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--grain);
  background-size:cover;
  opacity:var(--grain-opacite);
  pointer-events:none;
  z-index:0;
}
.fond-sombre > *{position:relative;z-index:1}

/* Surtitre numéroté « 02 - À propos » : filet de 28px puis libellé. */
.surtitre{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-surtitre);
  letter-spacing:var(--ls-surtitre);
  text-transform:uppercase;
  color:var(--muted);
}
.surtitre::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--argent-2);
  flex:0 0 auto;
}
.surtitre--clair{color:var(--gris-clair)}
.surtitre--clair::before{background:var(--argent-2)}

/* Bouton plein (nav + hero + footer inversé) et bouton contour. */
.btn-plein,
.btn-contour{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:49px;
  padding:0 34px;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--fs-bouton);
  letter-spacing:var(--ls-bouton);
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.btn-plein{
  background:var(--grad-bouton);
  color:var(--page);
  border:1px solid var(--ink-fort);
}
.btn-plein:hover,
.btn-plein:focus-visible{opacity:.88}
.btn-plein__icone{width:15px;height:15px;flex:0 0 auto;opacity:.85;fill:currentColor}
.btn-contour{
  font-weight:400;
  background:transparent;
  color:var(--ink-fort);
  border:1px solid var(--ink-fort);
}
.btn-contour:hover,
.btn-contour:focus-visible{background:var(--ink-fort);color:var(--page)}
/* Variante inversée (bloc contact sombre) */
.btn-plein--inverse{
  background:var(--page);
  color:#000;
  border-color:var(--page);
  height:47px;
}

/* ─── Cadrage des marbres : les veines à bord perdu ───
   Retour d'Emmanuel du 09/09 : une veine ne doit jamais s'éteindre dans
   le cadre, elle entre et sort par les bords. Or la texture (1440x1301)
   a une grande veine qui part du haut (x≈540) et MEURT au milieu droit,
   vers (1320, 700) ; une petite veine naît aussi à droite vers (1330,
   980). Toute fenêtre qui contient ces points montre une ligne qui
   s'arrête. Chaque section choisit donc sa fenêtre pour les exclure :
   - zone HAUTE (y < 560) : la grande veine traverse de haut en bas ;
   - zone BASSE (y > 750) : les veines du bas-gauche traversent ;
   - ou une fenêtre étroite qui laisse ces points hors champ à droite.
   background-size en % de la HAUTEUR (auto N%) : la portion d'image
   visible ne dépend alors pas de la largeur de l'écran, le cadrage
   tient du mobile au 1440. Voir hero.css, cabinet.css, articles.css.

   ─── Marbre CONTINU sous la bande noire ───
   Dans le Figma, À propos et Thérapies partagent UNE image de marbre
   (nœud « Main content »). Quand chaque section posait la sienne, les
   veines se coupaient à la jonction et le marbre d'À propos commençait
   100px trop haut, sous le noir (la section remonte sur la bande pour
   que sa carte la chevauche).

   Le conteneur .vf-main (front-page.php) porte l'image ; les sections
   gardent leur classe fond-marbre (leurs feuilles n'y touchent pas) mais,
   imbriquées, deviennent transparentes.

   flow-root : sans lui, la marge négative de la première section
   fusionnerait avec celle du conteneur et remonterait l'origine du
   marbre dans la bande noire. Avec, le conteneur commence exactement au
   bas du bloc noir et la section déborde vers le haut à l'intérieur. */
.vf-main{
  display:flow-root;
  /* auto 100% : l'image couvre exactement la hauteur du conteneur
     (≈2370px, soit un zoom ×1.82) ; la fenêtre fait alors 791px d'image
     de large. Position 62% : elle cadre x≈400..1190 de l'image. La
     grande veine entre par le haut, traverse en diagonale la zone entre
     la carte À propos et le titre « Thérapies » (qui restait plate,
     retour d'Emmanuel du 09/09) et SORT par la droite vers x=1190, bien
     avant le point où elle meurt (x≈1320) ; les veines du bas entrent à
     gauche et sortent en bas, derrière les cartes. */
  background-size:auto 100%;
  background-position:62% 0%;
}
.fond-marbre .fond-marbre{
  background-image:none;
  background-color:transparent;
}