/*
Theme Name: L'énergie des Runes
Theme URI: https://lenergiedesrunes.com
Author: Kevin Legros
Author URI: https://lenergiedesrunes.com
Description: Thème sur mesure de L'énergie des Runes — magnétisme, soins énergétiques et lecture de runes. Transposition du concept « Le Champ ». Sans dépendance : pas de jQuery, pas de framework, pas de bibliothèque d'animation.
Version: 1.9.74
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lenergiedesrunes
Tags: custom-menu, featured-images, translation-ready, e-commerce
*/

/* ============================================================
   0. POLICES — hebergees par le theme (assets/fonts)
   ============================================================
   Memes fichiers et memes descripteurs que ceux que servait Google
   Fonts (graisses, unicode-range, display:swap) : le rendu, une fois
   les polices chargees, est identique. Seuls latin et latin-ext sont
   gardes (runic pour Noto Sans Runic). Licence SIL OFL 1.1, voir
   assets/fonts/LISEZ-MOI.txt.

   Replis a metriques ajustees : pendant le chargement, Georgia et Arial
   sont recales sur la largeur moyenne et les hauteurs de Cormorant et de
   DM Sans (mesurees dans Chromium sur un texte du site). Le texte ne
   change donc presque plus de ligne au moment de l echange : c est ce
   qui faisait sauter le bandeau de l accueil vers 1000-1100 px (CLS
   0,16). Georgia et Arial manquent sur Android : le repli y reste
   celui du systeme, et le prechargement fait l essentiel.
   Les replis sont bornes aux plages latin et latin-ext des polices web :
   un caractere que celles-ci n ont pas (fleches → ↗, etoiles) continue
   de venir de Georgia ou de la police systeme, comme avant, au lieu
   d etre dessine par le repli ajuste. */
@font-face{font-family:"Cormorant Garamond repli";src:local("Georgia");size-adjust:87.56%;ascent-override:105.07%;descent-override:33.12%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond repli";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:77.86%;ascent-override:118.15%;descent-override:37.24%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans repli";src:local("Arial"),local("ArialMT");size-adjust:90.10%;ascent-override:109.88%;descent-override:34.41%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/cormorant-garamond-italique-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("assets/fonts/cormorant-garamond-italique-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/cormorant-garamond-italique-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/cormorant-garamond-italique-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Runic";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/noto-sans-runic-runic.woff2") format("woff2");unicode-range:U+16A0-16F8}
@font-face{font-family:"Noto Sans Runic";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/noto-sans-runic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   1. STYLES DU CONCEPT « LE CHAMP » — repris tels quels
   ============================================================ */
:root{
  --bg:#FAF8F4;--bg2:#F2EEE6;--card:#FFFFFF;
  --nuit:#1B1E2B;--nuit2:#252A3A;
  --or:#B8864E;--or2:#D4A46A;--or3:#EFE3CF;
  /* or d'action : mêmes boutons, contraste conforme du libellé blanc (4,8:1) */
  --or-action:#96683A;--or-action-survol:#855A2F;
  /* or des petits textes (surtitres, libelles, liens) sur les fonds clairs
     et sable : 4,6 a 5,8:1 mesures. C est le cuivre texte deja employe par
     les Guidances et Contact. Les filets et decors gardent --or. */
  --or-texte:#8A5A34;
  --txt:#2E2A26;--txt2:#6B625A;--txt3:#706A63;
  --line:#E6DFD4;
  --serif:"Cormorant Garamond","Cormorant Garamond repli",Georgia,serif;--sans:"DM Sans","DM Sans repli",system-ui,sans-serif;--runic:"Noto Sans Runic","Segoe UI Historic","Apple Symbols",serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --hauteur-entete:5.4375rem;        /* 87 px, identique a toutes les largeurs */
  /* teinte d'univers, surchargée par page ; à défaut, l'or de la marque */
  --acc:#B8864E;--acc-clair:#D4A46A;--acc-bandeau:#EFE3CF;--acc-voile:#F2EEE6;--acc-bord:#E6DFD4;
  --section:clamp(4rem,7vw,7rem);    /* respiration entre deux sections : 64 a 112 px */
  --bloc:2.75rem;                    /* respiration entre le titre et son contenu */
  /* Rythme vertical commun. Ces cinq relations revenaient sous forme de
     valeurs isolees — 1.6rem, 2.4rem, 1.9rem, .75rem — repetees de page
     en page. Un jeton par relation, plus aucune marge locale. */
  --air-cta:1.75rem;                       /* un texte ou une liste vers son bouton : 28 px */
  --air-chapeau:clamp(1.75rem,2.6vw,2.25rem);  /* un chapeau vers son titre : 28 a 36 px */
  --air-titre:clamp(1.5rem,2.2vw,1.9rem);      /* un titre vers son texte : 24 a 30 px */
  --air-para:1.25rem;                          /* entre deux paragraphes : 20 px */
  --gouttiere:clamp(2.5rem,5vw,4.5rem);        /* entre les deux colonnes d une grille */
  /* Trois familles de surface, pas quatorze. Le releve trouvait 14 rayons
     et 14 ombres distincts pour des blocs de meme nature. */
  --r-bloc:.9rem;
  --r-carte:1.4rem;
  --r-phare:2rem;
  --ombre-bloc:0 2px 6px -4px rgba(27,30,43,.16);
  --ombre-carte:0 14px 32px -24px rgba(27,30,43,.24);
  --ombre-phare:0 26px 58px -34px rgba(27,30,43,.3);
  --air-boutons:.875rem;                   /* entre deux boutons d un meme groupe : 14 px */
  --air-intro:clamp(2.5rem,4vw,3.25rem);   /* une introduction vers un composant : 40 a 52 px */
  --air-etape:clamp(2.25rem,3vw,2.6rem);   /* entre deux etapes d une progression : 36 a 42 px */
  --air-sortie:clamp(3rem,5vw,4rem);       /* la fin d un composant vers la suite : 48 a 64 px */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-weight:300;font-size:1.05rem;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.05;letter-spacing:-.01em;color:var(--nuit)}
h1{font-size:clamp(2.6rem,5.4vw,4.9rem)}h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}h3{font-size:1.75rem}
p{margin:0}em{font-style:italic;color:var(--or)}
.wrap{max-width:76rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3.5rem)}
/* Le chapeau, le titre et le texte suivent enfin la meme echelle. */
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{margin-top:var(--air-chapeau)}
h1 + p,h2 + p,h3 + p,h1 + .accroche,h2 + .accroche{margin-top:var(--air-titre)}
.entry p + p{margin-top:var(--air-para)}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte);display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--or)}
section{padding-block:var(--section);position:relative}

/* champ : halo qui suit le curseur */
#champ{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(38rem 38rem at var(--mx,50%) var(--my,30%),rgba(212,164,106,.075),transparent 60%)}
/* bouton */
/* Hauteur minimale commune : 41 px mesures, sous le confort tactile. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:2.9rem;padding:.9rem 1.7rem;border-radius:999px;font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s;position:relative;overflow:hidden;will-change:transform}
.btn--or{background:var(--or-action);color:#fff;box-shadow:0 10px 30px -12px rgba(150,104,58,.65)}
.btn--or::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn--or:hover::after{transform:translateX(120%)}
.btn--or:hover,.btn--or:focus-visible{transform:translateY(-2px);background:var(--or-action-survol);box-shadow:0 14px 30px -12px rgba(150,104,58,.8)}
.btn--ligne{color:var(--nuit);border:1px solid var(--line);background:rgba(255,255,255,.5)}
.btn--ligne:hover,.btn--ligne:focus-visible{border-color:var(--or);color:var(--or);transform:translateY(-2px);box-shadow:var(--ombre-carte)}
/* Sensation de pression : les deux familles reagissent de la meme facon. */
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn--or:active{box-shadow:0 6px 14px -8px rgba(150,104,58,.85)}
.btn--ligne:active{box-shadow:0 4px 10px -8px rgba(27,30,43,.35)}
.btn .fl{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .fl,.btn:focus-visible .fl{transform:translateX(4px)}

/* header */
/* Matiere de l en-tete, de ses panneaux et du tiroir (menu editorial du
   30/09/2026) : l ivoire chaud du papier du pack, son grain fondu dans un
   carre de 64 px (menu-papier.webp ; si petit pour ne jamais devenir
   l element LCP, voir bin/preparer-images-menu.py), un filet cuivre et
   une profondeur a peine posee. Ni flou ni transparence : le verre depoli
   de l accueil defile est retire, et avec lui le bloc conteneur qu il
   imposait au tiroir fixe. --hdr-marge est le retrait de .wrap : les
   panneaux s alignent sur le bord du contenu. */
:root{--hdr-fond:#F7F2EB url(assets/images/menu-papier.webp) 0 0/64px 64px;
  --hdr-filet:rgba(138,90,52,.2);--hdr-filet-doux:rgba(138,90,52,.1);--hdr-rayon:4px;
  --hdr-ombre:0 1px 0 rgba(138,90,52,.15),0 16px 30px -30px rgba(43,32,24,.5);
  --hdr-ombre-panneau:0 26px 48px -30px rgba(43,32,24,.34),0 2px 6px -4px rgba(43,32,24,.1);
  --hdr-marge:clamp(1.25rem,5vw,3.5rem)}
#hdr{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .4s,box-shadow .4s,transform .5s var(--ease)}
#hdr.on,#hdr.menu-open{background:var(--hdr-fond);box-shadow:var(--hdr-ombre)}
#hdr.hide{transform:translateY(-100%)}#hdr.menu-open{transform:none}
/* Accueil : l en-tete reste transparent sur le bandeau ; la bande ivoire
   ne vient qu avec le defilement, ou quand un panneau s ouvre dessous. */
body.home #hdr:has(.panel.open){background:var(--hdr-fond);box-shadow:var(--hdr-ombre)}
/* Pages interieures : l en-tete ne flotte plus sur le contenu. Une bande
   ivoire pleine, dans le flux ; il reste collant et se masque au
   defilement comme ailleurs. Les pages qui compensaient sa hauteur la
   retranchent de leur marge haute (--hauteur-entete). */
body:not(.home) #hdr,
body:not(.home) #hdr.on{position:sticky;top:0;background:var(--hdr-fond);box-shadow:var(--hdr-ombre)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding-block:1rem;gap:1.5rem}
/* Signature de l en-tete : le sceau a gauche, trois lignes a droite.
   La lecture commence par le nom ; l univers vient dessous, en serif plus
   petit mais pas anecdotique ; la fonction ferme, nettement secondaire.
   Le sceau est cale sur la hauteur du bloc entier, pas sur celle du nom,
   et centre verticalement dessus. Aucun fond, aucune boite : le PNG du
   Personnalisateur est deja detoure. */
.logo{--logo:1rem;text-decoration:none;display:flex;align-items:center;gap:calc(var(--logo) * .7);white-space:nowrap;line-height:1}
.logo__sceau{flex:none;display:block;width:calc(var(--logo) * 2.9);height:calc(var(--logo) * 2.9);object-fit:contain}
/* Hierarchie : le nom a 23 px, l univers a 13,5 px — 59 % du nom au lieu
   des 76 % precedents, assez pour que le concept cesse de concurrencer
   l identite sans devenir illisible — et la fonction a 9 px.
   Le nom prend le 400 des titres serif du site, l univers reste en 300 :
   aucun graisse nouvelle n est introduite.
   Les ecarts ne sont plus uniformes : 2,4 px entre le nom et l univers,
   qui forment un meme bloc, puis 6,7 px avant la fonction. La marge de
   la premiere ligne est annulee — le gap unique de la colonne ne sait
   pas faire deux ecarts differents. */
.logo__txt{display:flex;flex-direction:column;gap:0}
.logo__nom{font-family:var(--serif);font-weight:400;font-size:calc(var(--logo) * 1.4375);color:var(--nuit);line-height:1}
.logo__univers{font-family:var(--serif);font-weight:300;font-size:calc(var(--logo) * .84375);color:var(--txt2);line-height:1;margin-top:calc(var(--logo) * .15)}
.logo__role{font-family:var(--sans);font-size:calc(var(--logo) * .58);letter-spacing:.26em;text-transform:uppercase;color:var(--or);font-weight:500;line-height:1;margin-top:calc(var(--logo) * .42)}
#hdr nav{display:none}#hdr nav > ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:1.85rem}
/* Texte sobre, un cran plus present ; au survol et en page courante, le
   cuivre texte et un filet fin. Aucune pastille : Reserver reste le seul
   element plein. .ddb est aussi la classe du bouton Reserver : ses
   couleurs, son rembourrage et sa transition de fond sont les siens. */
#hdr nav a,.ddb{text-decoration:none;color:var(--txt);font-size:.9375rem;font-weight:400;padding:.6rem .1rem;white-space:nowrap;transition:background .3s,color .3s;background:none;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
#hdr nav a:hover,#hdr nav .ddb:hover,#hdr nav .ddb[aria-expanded="true"]{color:var(--or-texte)}
/* Le filet vit dans le rembourrage existant : la hauteur de l en-tete
   ne change pas d un pixel. Il s ouvre depuis le centre. */
#hdr nav a,#hdr nav .ddb{position:relative}
#hdr nav a::after,#hdr nav .ddb::after{content:"";position:absolute;left:.1rem;right:.1rem;bottom:.3rem;
  height:1px;background:var(--or-texte);transform:scaleX(0);transform-origin:center;
  transition:transform .32s var(--ease);pointer-events:none}
#hdr nav a:hover::after,#hdr nav a:focus-visible::after,
#hdr nav .ddb:hover::after,#hdr nav .ddb:focus-visible::after,
#hdr nav .ddb[aria-expanded="true"]::after{transform:scaleX(1)}
/* page courante : meme cuivre et meme filet, sans graisse de plus */
#hdr nav .current-menu-item > a,#hdr nav a[aria-current="page"]{color:var(--or-texte)}
#hdr nav .current-menu-item > a::after,#hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.dr-a[aria-current="page"]{color:var(--or-texte)}
.ddb i{width:.45rem;height:.45rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);opacity:.7}
.ddb[aria-expanded="true"] i{transform:translateY(1px) rotate(225deg)}
/* Les panneaux tombent du bord bas de l en-tete (.nav, en position
   relative) et s alignent sur le bord droit du contenu, sous Reserver.
   Meme matiere que la bande, rayon et ombre discrets ; un fondu et 4 px
   de montee en 200 ms. */
.dd{display:inline-flex;align-items:center}
.panel{position:absolute;top:100%;left:auto;right:var(--hdr-marge);transform-origin:top right;background:var(--hdr-fond);border:1px solid var(--hdr-filet-doux);border-top:0;border-radius:0 0 var(--hdr-rayon) var(--hdr-rayon);box-shadow:var(--hdr-ombre-panneau);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;padding:.4rem;width:20.5rem}
.panel.open{opacity:1;visibility:visible;transform:none}
.pl{display:flex;flex-direction:column}
.ph{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--txt3);padding:.55rem .85rem .45rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.pl>a{display:grid;grid-template-columns:1.45rem 1fr;align-items:baseline;gap:.85rem;padding:.6rem .85rem;border-radius:var(--hdr-rayon);text-decoration:none;background:none;transition:background .3s var(--ease)}
.pl>a::after{display:none}
.pl>a:hover{background:var(--bg)}
.pi{font-family:var(--runic);font-size:1rem;line-height:1.45;color:var(--or);opacity:.5;text-align:center;transition:opacity .3s}
.pl>a:hover .pi{opacity:1}
.pi--b{opacity:.9}
.pt b{display:block;font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--nuit);line-height:1.3;transition:color .3s}
.pl>a:hover .pt b{color:var(--or)}
.pt b em{font-family:var(--sans);font-style:normal;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);vertical-align:middle;margin-left:.4rem;font-weight:500}
.pt>span{display:block;font-size:.755rem;line-height:1.45;color:var(--txt3);margin-top:.05rem}
.pa{display:none}
.pf{display:grid;grid-template-columns:1.45rem 1fr;gap:.85rem;align-items:baseline;padding:.75rem .85rem .6rem;margin:.3rem .35rem 0;border-top:1px solid var(--line);text-decoration:none;transition:background .3s;border-radius:0}
.pf:hover{background:var(--bg)}
.pf-w{font-family:var(--runic);font-size:.95rem;line-height:1.3;color:var(--or);opacity:.55}
.pf small{display:none}
.pf b{display:block;font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--nuit);line-height:1.3}
.pf>span:not(.pf-w):not(.pf-l){display:block;font-size:.755rem;line-height:1.45;color:var(--txt3)}
.pf-l{display:none}
.pb{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.25rem;padding:.7rem .85rem .5rem;border-top:1px solid var(--line);font-size:.73rem;color:var(--txt3);white-space:nowrap}
.pb a{color:var(--or);text-decoration:none;font-weight:500}.pb a:hover{text-decoration:underline}
.dd--r .panel{width:21.5rem}
.nav-r{display:flex;align-items:center;gap:.6rem}
.compte{display:none;width:2.4rem;height:2.4rem;border-radius:50%;place-items:center;color:var(--txt2);text-decoration:none;transition:background .3s,color .3s}.compte:hover{background:rgba(184,134,78,.1);color:var(--nuit)}
.burger{width:2.6rem;height:2.6rem;border:1px solid var(--hdr-filet);border-radius:50%;background:#FBF8F3;display:grid;place-items:center;align-content:center;gap:.35rem;cursor:pointer;padding:0}.burger span{width:1rem;height:1px;background:var(--nuit);display:block;transition:transform .4s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(.2rem) rotate(45deg)}.burger[aria-expanded="true"] span:last-child{transform:translateY(-.2rem) rotate(-45deg)}
/* Tiroir editorial : la matiere de l en-tete, de grands intitules serif,
   des sous-liens sobres et en retrait, un filet entre les groupes
   seulement, Reserver isole au pied. */
.drawer{position:fixed;inset:0;overflow:hidden;background:var(--hdr-fond);padding:5.5rem 0 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-.5rem);transition:all .45s var(--ease);z-index:-1}
.drawer.open{opacity:1;visibility:visible;transform:none}
.dr-in{position:relative;z-index:1;flex:1;overflow:auto;padding:1.4rem 2rem 1rem}
.dr-a,.dr-d summary{display:block;font-family:var(--serif);font-size:1.6rem;line-height:1.25;color:var(--txt);text-decoration:none;padding:.5rem 0;cursor:pointer;list-style:none}
.dr-d summary::-webkit-details-marker{display:none}.dr-d summary{display:flex;align-items:center;gap:.8rem}.dr-d summary::after{content:"";flex:none;width:.42rem;height:.42rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.2rem) rotate(45deg);transition:transform .3s var(--ease);opacity:.75}.dr-d[open] summary::after{transform:translateY(.12rem) rotate(225deg)}
.dr-d a{display:block;padding:.65rem 0 .65rem 1.35rem;color:var(--txt2);text-decoration:none;font-size:1.02rem;line-height:1.5}.dr-d a em{font-style:normal;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-left:.5rem}
.dr-in > .dr-d{padding-bottom:.5rem;margin-bottom:.8rem;border-bottom:.5px solid rgba(138,90,52,.24)}
.dr-a--s{font-family:var(--sans);font-size:.95rem;color:var(--txt2);margin-top:.5rem;border:0}
.dr-f{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem 2rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--hdr-filet-doux)}.dr-f .btn{flex:1;justify-content:center}
/* mention de confidentialité sous un formulaire d'inscription */
.news-confid{grid-column:1/-1;margin-top:.9rem;font-size:.78rem;line-height:1.6;color:var(--txt3);max-width:34rem}
.pan--nuit .news-confid,.news .news-confid{color:var(--txt3)}
.dd-fleche{background:none;border:0;padding:.55rem .5rem .55rem .1rem;margin-left:-.5rem;cursor:pointer;color:var(--txt2);display:inline-flex;align-items:center;border-radius:999px;transition:background .3s,color .3s}
.dd-fleche:hover,.dd-fleche[aria-expanded="true"]{background:rgba(184,134,78,.1);color:var(--nuit)}
.dd-fleche i{width:.45rem;height:.45rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);opacity:.7}
.dd-fleche[aria-expanded="true"] i{transform:translateY(1px) rotate(225deg)}
.nav-r .ddb.btn--or{background:var(--or-action);color:#fff;padding:.75rem 1.2rem;font-size:.84rem;letter-spacing:.03em;border-radius:5px;box-shadow:0 10px 22px -16px rgba(150,104,58,.75)}.nav-r .ddb.btn--or:hover,.nav-r .ddb.btn--or[aria-expanded="true"]{background:var(--or-action-survol);color:#fff}.nav-r .ddb i{opacity:.9}
.dd--r{display:none}
/* Bureau des 1140 px : le logo (193 px), le menu (601 px) et Reserver
   (151 px avec son filet) y laissent 60 px entre le logo et le menu,
   136 px des 1216 px. En dessous, le tiroir plutot qu un menu resserre.
   Un filet vertical isole Reserver, seul element plein de l en-tete. */
@media(min-width:1140px){#hdr nav{display:block}.compte{display:grid}.burger{display:none}.dd--r{display:block}
  .nav-r::before{content:"";width:1px;height:1.9rem;margin:0 1.25rem 0 .55rem;background:rgba(138,90,52,.18);transform:scaleX(.5)}
  /* Presence : le logo et le menu grandissent de 1140 a 1440 px, rien
     a 1140 (le seuil ne bouge pas), +9 % pour le logo et 16 px de texte
     au menu a 1440. La bande garde ses 87 px (--hauteur-entete). Six
     entrees : tailles de depart, faute de place. */
  .nav{padding-block:0;min-height:var(--hauteur-entete)}
  #hdr .logo{--logo:clamp(1rem,calc(1rem + (100vw - 1140px) * .0047),1.0875rem)}
  #hdr nav > ul{gap:clamp(1.85rem,calc(1.85rem + (100vw - 1140px) * .0187),2.2rem)}
  #hdr nav > ul > li > :is(a,.ddb){font-size:clamp(.9375rem,calc(.9375rem + (100vw - 1140px) * .0033),1rem)}
  #hdr:has(nav > ul > li:nth-child(6)) .logo{--logo:1rem}
  #hdr nav > ul:has(> li:nth-child(6)) > li > :is(a,.ddb){font-size:.9375rem}}
.dr-f{padding-bottom:calc(2.6rem + env(safe-area-inset-bottom))}

/* ---- Menu editorial (inc/menu-defaut.php, pack du 30/09/2026) ----
   Deux deroulants : Mes accompagnements (introduction et trois colonnes
   typographiques) et Apprendre (le livre, avec sa vraie couverture, et
   les ateliers). Signes du pack en ligne, couleur par currentColor.
   Fermes, les panneaux ne sont pas rendus : la couverture du livre ne
   part qu a la premiere intention (main.js), jamais avec la page. */
#hdr nav{margin-left:auto}
#hdr nav .ddb{line-height:inherit}
#hdr nav .chevron{width:.8rem;height:.8rem;stroke-width:1.8;transition:transform .3s var(--ease)}
#hdr nav .ddb[aria-expanded="true"] .chevron{transform:rotate(180deg)}
#hdr nav .current-menu-ancestor > .ddb{color:var(--or-texte)}
#hdr nav .current-menu-ancestor > .ddb::after{transform:scaleX(1)}
/* Six entrees, Ressources activee : l ecart entre elles passe a 1,45rem
   et elles ne tiennent qu une fois la grille du site a sa largeur
   pleine (76rem, 1104 px de contenu) ; en dessous, le tiroir. */
#hdr nav > ul:has(> li:nth-child(6)){gap:1.45rem}
@media(min-width:1140px) and (max-width:1215px){
  #hdr:has(nav > ul > li:nth-child(6)) :is(nav,.compte,.dd--r){display:none}
  #hdr:has(nav > ul > li:nth-child(6)) .nav-r::before{display:none}
  #hdr:has(nav > ul > li:nth-child(6)) .burger{display:grid}
}
#hdr .panel--menu{display:none;padding:0;transition-property:opacity,transform,visibility,display;transition-behavior:allow-discrete}
#hdr .panel--menu.open{display:grid}
@starting-style{#hdr .panel--menu.open{opacity:0;transform:translateY(4px)}}
/* Sans JavaScript, ou si main.js n a pas pu s installer (il pose
   .menu-js), le survol et le focus clavier ouvrent encore les panneaux :
   aucune page n en devient inaccessible. */
#hdr:not(.menu-js) nav .dd:is(:hover,:focus-within) > .panel--menu{display:grid;opacity:1;visibility:visible;transform:none}
#hdr .panel--menu ul{margin:0;padding:0;list-style:none}
#hdr nav ul.panel__entrees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Filets entre les colonnes : un demi-pixel, estompe en haut et en bas,
   en retrait du bord du panneau. */
.panel__entrees > li{position:relative;margin-block:2rem;padding:.35rem 1.75rem}
.panel__entrees > li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;transform:scaleX(.5);transform-origin:left;
  background:linear-gradient(transparent,rgba(138,90,52,.2) 16%,rgba(138,90,52,.2) 84%,transparent)}

/* Mes accompagnements : l introduction a gauche, trois colonnes. */
#hdr .panel--offres{width:min(69rem,calc(100% - 2 * var(--hdr-marge)));grid-template-columns:31fr 69fr;overflow:hidden}
.panel__intro{position:relative;margin-block:2rem;padding:.35rem 3.2rem 0 2.2rem}
.panel__titre{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.1vw,1.85rem);line-height:1.12;color:var(--txt)}
.panel__texte{margin-top:1.05rem;max-width:18rem;font-size:.98rem;line-height:1.6;color:var(--txt2)}
.panel__ornement{position:absolute;left:-.4rem;bottom:-3.2rem;width:6.8rem;height:6.8rem;color:var(--or);opacity:.45;stroke-width:1.1;pointer-events:none}

/* Une entree : toute la colonne est le lien ; signe, titre, phrase,
   puis « Decouvrir » cale en bas, souligne d un filet. */
#hdr nav .entree{display:block;height:100%;padding:0;white-space:normal;color:var(--txt2)}
#hdr nav .entree::after{display:none}
.entree__corps{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.entree__signe{flex:none;width:3rem;height:3rem;margin:-.3rem 0 .85rem -.45rem;color:var(--or);stroke-width:2}
.entree__titre{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,calc(1.5rem + (100vw - 1140px) * .008),1.65rem);line-height:1.32;color:var(--txt);transition:color .3s}
.entree__texte{margin-top:.55rem;font-size:.95rem;line-height:1.55;color:var(--txt2)}
.entree__cta{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding:1.2rem 0 .3rem;border-bottom:1px solid var(--hdr-filet);
  font-size:.875rem;font-weight:500;letter-spacing:.02em;color:var(--txt);transition:color .3s,border-color .3s}
.entree__fleche{width:.95rem;height:.95rem;stroke-width:1.6;transition:transform .3s var(--ease)}
#hdr nav .entree:hover .entree__titre,#hdr nav .entree[aria-current="page"] .entree__titre{color:var(--or-texte)}
#hdr nav .entree:hover .entree__cta{color:var(--or-texte);border-color:currentColor}
#hdr nav .entree:hover .entree__fleche{transform:translateX(3px)}
#hdr nav .entree:focus-visible{outline-offset:.55rem}

/* Apprendre : plus compact ; le livre, sa couverture a gauche. */
#hdr .panel--apprendre{width:min(52rem,calc(100% - 2 * var(--hdr-marge)))}
#hdr .panel--apprendre ul.panel__entrees{grid-template-columns:1.55fr 1fr}
.panel--apprendre .panel__entrees > li:first-child{padding-left:2.2rem}
.panel--apprendre .panel__entrees > li:first-child::before{display:none}
#hdr nav .entree--visuel{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:1.9rem;align-items:stretch}
.entree__visuel{display:block;padding-top:.3rem}
.entree__visuel img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 16px 24px -16px rgba(27,30,43,.55);transform:rotate(-2.5deg);transition:transform .45s var(--ease)}
#hdr nav .entree--visuel:hover .entree__visuel img{transform:rotate(-1.2deg) translateY(-2px)}

/* Tiroir : un seul deroulant ouvert a la fois (<details name>), la
   section de la page courante en cuivre, une branche du pack a peine
   posee au pied, et Reserver qui deplie ses trois choix au-dessus de
   lui. */
.dr-d summary.est-courant{color:var(--or-texte)}
.dr-d a[aria-current="page"]{color:var(--or-texte)}
.dr-ornement{position:absolute;right:-1.4rem;bottom:6.4rem;width:10.5rem;height:10.5rem;color:var(--or);opacity:.2;stroke-width:1.1;pointer-events:none;z-index:0}
@media(max-height:560px){.dr-ornement{display:none}}
/* Telephone a l horizontale : les choix defilent, le bouton reste a l ecran
   (13rem : le haut du tiroir, les marges du pied et le bouton). */
.dr-reserver{flex-basis:100%;display:flex;flex-direction:column;margin-bottom:.4rem;
  max-height:calc(100vh - 13rem);max-height:calc(100dvh - 13rem);overflow-y:auto;overscroll-behavior:contain}
.dr-reserver[hidden]{display:none}
.dr-reserver a{display:block;padding:.65rem 0;border-bottom:1px solid var(--hdr-filet-doux);text-decoration:none}
.dr-reserver b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.3;color:var(--txt)}
.dr-reserver span{display:block;font-size:.8rem;line-height:1.5;color:var(--txt2)}
.dr-reserver .dr-reserver__ecrire{padding:.8rem 0 .15rem;border:0;font-size:.85rem;font-weight:500;color:var(--or-texte)}
.dr-resb{border:0;cursor:pointer;border-radius:5px;box-shadow:0 10px 22px -16px rgba(150,104,58,.75)}
.dr-resb i{width:.45rem;height:.45rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(2px) rotate(225deg);transition:transform .35s var(--ease);opacity:.9}
.dr-resb[aria-expanded="true"] i{transform:translateY(-2px) rotate(45deg)}
/* hero */
/* Le bandeau reste ample sans occuper artificiellement un ecran tres haut.
   Mesure : a 1440x2400 le contenu s arretait a 1508 px et laissait 828 px de vide
   (35 % du bandeau). Le plafond de 56rem = 896 px ne change rien jusqu a 960 px
   de hauteur de fenetre, ou calc(100vh - 4rem) vaut deja 896 px.
   Unite vh conservee : svh et dvh modifieraient le rendu mobile, aujourd hui juste. */
.hero{min-height:min(calc(100vh - 4rem),56rem);display:grid;align-items:center;padding-top:clamp(6.5rem,9vw,8.5rem);padding-bottom:2.25rem;overflow:hidden}
#pluie{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:2;display:grid;gap:3rem}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.2fr .8fr;align-items:center}}
.hero--sans-visuel .wrap{grid-template-columns:minmax(0,44rem);justify-content:center;text-align:center}
.hero--sans-visuel .eyebrow,.hero--sans-visuel .boutons{justify-content:center}
.hero--sans-visuel .lead{margin-inline:auto}
.hero-txt{display:flex;flex-direction:column;gap:1.75rem}
/* Le masque a translateY(110%) coupait le titre pendant plus d une seconde
   au chargement. Remplace par un fondu et une montee de 14 px, sans clip. */
.h1w{display:inline-block;vertical-align:bottom;padding:.06em .12em .18em;margin:-.06em -.12em -.18em}
.h1w span{display:inline-block}
:where(.js-animations-ready) .h1w span{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
:where(.js-animations-ready) body.ready .h1w span{opacity:1;transform:none}
.lead{font-family:var(--serif);font-size:clamp(1.25rem,1.85vw,1.55rem);line-height:1.5;color:var(--txt2);max-width:34rem}
:where(.js-animations-ready) .lead{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) .16s,transform .55s var(--ease) .16s}
.boutons{display:flex;flex-wrap:wrap;gap:var(--air-boutons)}
/* La relation « texte ou liste vers son CTA » etait laissee a zero partout
   ailleurs que dans les blocs deja traites. Le bandeau est exclu : sa
   colonne est deja en flex avec son propre ecart. */
.bande p + .boutons,.bande ol + .boutons,
.bande ul:not(.livre-reperes) + .boutons,
.livre-cartouche p + .boutons{margin-top:var(--air-cta)}
:where(.js-animations-ready) .hero .boutons{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) .26s,transform .55s var(--ease) .26s}
:where(.js-animations-ready) body.ready .lead,:where(.js-animations-ready) body.ready .hero .boutons,:where(.js-animations-ready) body.ready .stats{opacity:1;transform:none}
.stats{display:flex;gap:2.5rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--line)}
:where(.js-animations-ready) .stats{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) .36s,transform .55s var(--ease) .36s}
.stat b{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--nuit);display:block;line-height:1}
.stat span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);font-weight:500}

/* la pierre : carte qui se retourne, plus la bande des 24 runes */
.pierre-bloc{display:flex;flex-direction:column;gap:.95rem;max-width:22rem;width:100%;margin-inline:auto}
:where(.js-animations-ready) .pierre-bloc{opacity:0;transition:opacity .65s var(--ease) .3s}
:where(.js-animations-ready) body.ready .pierre-bloc{opacity:1}
.pierre{position:relative;aspect-ratio:4/5;width:100%;perspective:1200px;cursor:pointer}
.pierre-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s var(--ease)}
/* Le retournement portait 850 ms : ramene a 600 ms pour rejoindre la
   fourchette commune. Le rapport 4/5 de .pierre est fixe, donc le
   changement de rune ne provoque aucun saut de hauteur. */
.pierre-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.pierre-in.retourne{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:var(--r-carte);background:linear-gradient(160deg,#FFFFFF,#F1ECE3);
  box-shadow:0 40px 80px -30px rgba(27,30,43,.25),0 0 0 1px rgba(184,134,78,.12) inset;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem;overflow:hidden;
  transition:box-shadow .45s var(--ease)}
.face--ar{transform:rotateY(180deg)}
.pierre:hover .face,.pierre:focus-visible .face{box-shadow:0 46px 92px -30px rgba(27,30,43,.3),0 0 0 1px rgba(184,134,78,.34) inset}
.face::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at var(--px,50%) var(--py,40%),rgba(212,164,106,.28),transparent 70%)}
.face > *{position:relative}
.face .lab{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--txt3);font-weight:500}
.face .glyph{font-family:var(--runic);font-size:clamp(6rem,11vw,8.5rem);line-height:1.25;padding-block:.06em;color:var(--or);text-align:center;text-shadow:0 20px 40px rgba(184,134,78,.25)}
.face .nom{font-family:var(--serif);font-size:1.5rem;color:var(--nuit);line-height:1.2}
.face .nom small{display:block;font-family:var(--sans);font-size:.85rem;line-height:1.5;color:var(--txt2);margin-top:.35rem;font-weight:300}
.face .hint{align-self:flex-end;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:500;opacity:.55;transition:opacity .3s}
.pierre:hover .hint{opacity:1}

/* Cibles tactiles. Douze colonnes donnaient 26 x 24 px : le bloc etant
   plafonne a 22rem quelle que soit la largeur d ecran, elles restaient
   etroites partout, y compris au bureau. Huit colonnes sur trois rangs
   portent chaque rune a environ 42 x 42 px. */
.futhark{display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;margin-top:var(--air-cta)}
.futhark button{position:relative;font-family:var(--runic);font-size:1.05rem;line-height:1.6;
  min-height:2.6rem;padding:.35rem 0;border:1px solid transparent;background:none;color:var(--txt3);
  cursor:pointer;border-radius:.5rem;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
/* Ces boutons sont poses sur une bande nuit, seul usage de --txt3 sur fond
   sombre du site. Le jeton ayant ete assombri pour les fonds clairs, il y
   tombait a 3,10. Valeur dediee : 5,89 sur #1B1E2B. */
.bande--nuit .futhark button{color:rgba(255,255,255,.55)}
.bande--nuit .futhark-nom{color:rgba(255,255,255,.72)}
@media(hover:hover){
  .futhark button:hover{color:var(--or2);background:rgba(184,134,78,.14);transform:translateY(-1px)}
}
.futhark button:focus-visible{outline:2px solid var(--or2);outline-offset:2px;color:var(--or2);background:rgba(184,134,78,.14)}
/* Rune choisie : quatre signaux concordants — fond, bordure, contraste du
   symbole, elevation — plus un repere cuivre sous le bouton. La couleur
   n est jamais le seul porteur, et main.js pose aria-pressed. */
.futhark button.on{color:var(--nuit);background:var(--or2);border-color:var(--or2);transform:translateY(-2px)}
.futhark button.on::after{content:"";position:absolute;left:50%;bottom:-.3rem;width:.3rem;height:.3rem;
  border-radius:50%;background:var(--or2);transform:translateX(-50%)}
.bande--nuit .futhark button.on{color:var(--nuit)}
.futhark button:active{transform:translateY(0);transition-duration:.08s}
.futhark-nom{min-height:1.35rem;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);text-align:center;font-weight:500;transition:color .25s}

/* indicateur de défilement, en bas du bandeau */
/* Indicateur de défilement « La suite » — retiré du hero le 31/08/2026.
   Mesuré : il chevauchait la rangée de boutons de 54 px à 1366×768 et de 52 px
   à 375×812, et n'avait que 3 px de dégagement à 1440×900. Comme il est centré
   et que les boutons le sont aussi, il tombait entre « Découvrir les soins » et
   « Découvrir les guidances ». Règles conservées, inutilisées.
.defiler{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;
  display:grid;justify-items:center;gap:.45rem;text-decoration:none;
  opacity:0;transition:opacity 1s var(--ease) 1.2s}
body.ready .defiler{opacity:1}
.defiler span{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--txt3);font-weight:500;transition:color .3s}
.defiler i{position:relative;display:block;width:1px;height:2.1rem;background:var(--line);overflow:hidden}
.defiler i::after{content:"";position:absolute;left:0;top:0;width:1px;height:1rem;background:var(--or);animation:glisse 2.4s var(--ease) infinite}
.defiler:hover span{color:var(--or)}
@keyframes glisse{0%{transform:translateY(-1rem)}60%,100%{transform:translateY(2.1rem)}}
@media(prefers-reduced-motion:reduce){.defiler i::after{animation:none;height:100%;opacity:.5}}
@media(max-height:720px){.defiler{display:none}}  */

/* Apparitions au defilement — amelioration progressive.
   Sans .js-animations-ready et la marque individuelle .rv-pending, ces blocs
   restent visibles : rien ne depend de la bonne execution de main.js.
   :where() n'ajoute aucune specificite : les cascades existantes
   (.carte, .moment, .tuile...) gardent exactement la priorite d'avant. */
/* Langage de mouvement commun : 520 ms, 14 px, decalages de 60 ms.
   Avant : 1,1 s et 28 px, ce qui laissait de grands vides pales au
   defilement rapide. Les titres montent un peu moins que les blocs. */
/* Attente posée par l'amorce de <head> jusqu'à la prise en charge par
   main.js (1,5 s au plus) : un bloc déjà à l'écran n'est jamais affiché
   puis masqué avant son apparition. */
:where(.edr-anim-attente) .rv:not(.in){opacity:0}
:where(.edr-anim-attente) .filigrane:not(.gravee){clip-path:inset(0 0 100% 0)}
:where(.js-animations-ready) .rv.rv-pending{opacity:0;transform:translateY(14px);transition:opacity .52s var(--ease),transform .52s var(--ease)}
:where(.js-animations-ready) .rv.rv-pending.rv-preparing{transition:none!important}
:where(.js-animations-ready) .rv.rv-pending.in{opacity:1;transform:none}
:where(.js-animations-ready) h1.rv.rv-pending:not(.in),:where(.js-animations-ready) h2.rv.rv-pending:not(.in),:where(.js-animations-ready) h3.rv.rv-pending:not(.in),:where(.js-animations-ready) .eyebrow.rv.rv-pending:not(.in){transform:translateY(10px);transition-duration:.44s}
:where(.js-animations-ready) .rv.rv-pending.d1{transition-delay:.06s}:where(.js-animations-ready) .rv.rv-pending.d2{transition-delay:.12s}:where(.js-animations-ready) .rv.rv-pending.d3{transition-delay:.18s}

/* duo interactif */
/* Les deux portes. Le texte etait replie a 3,3rem et ne s ouvrait qu au survol :
   53 px lisibles pour 129 et 155 px de contenu, et rien du tout au tactile.
   La grille etire les deux cartes a la meme hauteur, celle du plus long texte. */
.duo{display:grid;gap:1rem;margin-top:var(--bloc)}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;align-items:stretch}}
/* overflow:hidden reste, mais pour decouper la grande rune decorative,
   jamais le texte : plus aucune contrainte de hauteur sur le paragraphe. */
.pan{position:relative;border-radius:var(--r-carte);padding:2.5rem;background:var(--card);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:1rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);cursor:pointer}
.pan h3{font-size:2.1rem}
.pan p{color:var(--txt2);max-width:27rem;font-size:.98rem;line-height:1.65}
.pan .bg{position:absolute;right:-1rem;top:-2rem;font-family:var(--runic);font-size:15rem;line-height:1.2;color:var(--or);opacity:.07;transition:transform .8s var(--ease),opacity .5s var(--ease)}

/* ------------------------------------------------------------
   LES RUNES DES DEUX PORTES
   ------------------------------------------------------------
   Meme systeme que les bandeaux, pour les memes raisons. Les deux
   glyphes etaient poses a la meme taille de fonte, ce qui ne dit
   rien de leur presence : l encre de Noto Sans Runic vaut .714 du
   cadratin pour Berkana et .376 pour Kenaz. Releve sur la page
   servie a 1440, cartes de 544 x 305,4 px : 171,4 px de haut pour
   l une, 90,2 pour l autre — 52,6 % —, 35,1 px de degagement en
   haut contre 71,6, et -4,2 px a droite contre 8,5.
   Le trace donne aux deux la meme hauteur d encre, la meme
   epaisseur — 11 pour 100 de haut, comme les sept runes du site —
   et le meme degagement, en conservant a chaque signe ses
   proportions propres : 0,548 de large pour Berkana, 0,5 pour Kenaz.
   La marge droite passe de -4,2 px, ou l overflow de la carte
   rognait les pointes de la Berkana, a zero : aucune rune coupee.
   Le glyphe reste dans le contenu et sert de repli : sans masque,
   la carte affiche ce qu elle affiche aujourd hui.
   ------------------------------------------------------------ */
@supports ((-webkit-mask-image:url("a")) or (mask-image:url("a"))){
  .pan .bg{
    --rune-porte-cible:10.7rem;
    --rune-porte-marge:0px;
    --rune-porte-haut:2.2rem;
    right:var(--rune-porte-marge);top:var(--rune-porte-haut);
    height:var(--rune-porte-cible);
    width:calc(var(--rune-porte-cible) * var(--rune-porte-rapport));
    /* la boite est l encre : plus rien ne depend de la fonte */
    font-size:0;line-height:0;
    /* currentColor reconduit sans le redire l or2 de la carte nuit */
    background-color:currentColor;
    -webkit-mask-image:var(--rune-porte-dessin);mask-image:var(--rune-porte-dessin);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center}
  #pan-soin .bg{--rune-porte-rapport:0.548;
    --rune-porte-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.83 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 5.5,5 L 44,27.5 L 5.5,50'/%3E%3Cpath d='M 5.5,50 L 44,72.5 L 5.5,95'/%3E%3C/svg%3E")}
  #guidances .bg{--rune-porte-rapport:0.5;
    --rune-porte-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.17 0.5 49.5 99' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 44,4 L 6,50 L 44,96'/%3E%3C/svg%3E")}
}
.pan .lien{font-size:.82rem;font-weight:500;letter-spacing:.08em;color:var(--or);transition:transform .35s var(--ease),color .3s}

/* Eveil des portes. Meme systeme pour le survol et le clavier ; le survol est
   enferme dans @media(hover:hover) pour qu un ecran tactile n herite de rien. */
@media(hover:hover){
  .pan:hover{transform:translateY(-3px);box-shadow:var(--ombre-phare);border-color:rgba(184,134,78,.45)}
  .pan:hover .bg{transform:translate(-.7rem,.7rem) rotate(-4deg);opacity:.14}
  .pan:hover .lien{transform:translateX(5px)}
  .pan:not(.pan--nuit):hover{background-color:#FFFDF9}
  .pan--nuit:hover{background-color:var(--nuit2);border-color:rgba(212,164,106,.4)}
  .pan--nuit:hover .bg{opacity:.2}
}
.pan:focus-visible{outline:2px solid var(--or);outline-offset:3px;transform:translateY(-3px);box-shadow:var(--ombre-phare);border-color:rgba(184,134,78,.45)}
.pan:focus-visible .bg{transform:translate(-.7rem,.7rem) rotate(-4deg);opacity:.14}
.pan:focus-visible .lien{transform:translateX(5px)}
.pan:not(.pan--nuit):focus-visible{background-color:#FFFDF9}
.pan--nuit:focus-visible{background-color:var(--nuit2)}
.pan--nuit:focus-visible .bg{opacity:.2}
.pan:active{transform:translateY(-1px)}
.pan--nuit{background:var(--nuit);border-color:transparent}.pan--nuit h3,.pan--nuit .prix{color:#fff}.pan--nuit p{color:rgba(255,255,255,.7)}.pan--nuit .bg{color:var(--or2);opacity:.12}

/* méthode : axe qui se trace au scroll */
.phrase{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.1;max-width:18ch}
.axe{position:relative;margin-top:2rem;display:grid;gap:0}
.axe::before{content:"";position:absolute;left:1.15rem;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12);z-index:0}
.axe::after{content:"";position:absolute;left:1.15rem;top:0;width:1px;height:var(--prog,0%);background:linear-gradient(var(--or2),var(--or));box-shadow:0 0 18px rgba(212,164,106,.8);z-index:1}
.mv{display:grid;grid-template-columns:2.3rem 1fr;gap:2rem;padding-block:2rem;align-items:start}
.mv .pt{position:relative;z-index:2;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-family:var(--serif);font-size:1rem;color:rgba(255,255,255,.5);background:var(--nuit);transition:border-color .6s var(--ease),color .6s var(--ease),background .6s var(--ease)}
.mv.lit .pt{border-color:var(--or2);color:var(--nuit);background:var(--or2);box-shadow:0 0 24px rgba(212,164,106,.6);animation:halo .9s var(--ease) 1}
@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(212,164,106,.6),0 0 24px rgba(212,164,106,.6)}
  65%{box-shadow:0 0 0 15px rgba(212,164,106,0),0 0 34px rgba(212,164,106,.85)}
  100%{box-shadow:0 0 0 0 rgba(212,164,106,0),0 0 24px rgba(212,164,106,.6)}}
.mv h3{color:#fff;font-size:2rem;transition:color .5s}.mv.lit h3{color:var(--or2)}
.mv p{color:rgba(255,255,255,.6);max-width:30rem;opacity:.5;transition:opacity .6s}.mv.lit p{opacity:1}
@media(min-width:900px){.axe{margin-left:20%}}

/* offres */
.offres{display:grid;gap:1.4rem;margin-top:var(--bloc)}
@media(min-width:900px){.offres{grid-template-columns:repeat(3,1fr)}.offres .carte--large{grid-column:1/-1;display:grid;grid-template-columns:3.2rem 1fr auto;gap:2rem;align-items:center;background:var(--or3)}.offres .carte--large .prix{text-align:right}.offres .carte--large a{display:block;text-align:right;margin-top:.6rem}}
.carte{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-carte);padding:2.2rem;display:flex;flex-direction:column;gap:1.1rem;transform-style:preserve-3d;transition:transform .15s linear,box-shadow .6s var(--ease);will-change:transform}
.carte::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(40% 40% at var(--cx,50%) var(--cy,50%),rgba(212,164,106,.18),transparent 70%);opacity:0;transition:opacity .4s}
.carte:hover::before{opacity:1}.carte:hover{box-shadow:var(--ombre-phare)}
.carte .rn{width:3.2rem;height:3.2rem;border-radius:.9rem;background:var(--or3);display:grid;place-items:center;font-family:var(--runic);font-size:1.5rem;line-height:1;color:var(--or);overflow:visible}.carte .rn>*{line-height:1}
.carte p{color:var(--txt2);flex:1;font-size:.95rem;line-height:1.65}
.carte .prix{font-family:var(--serif);font-size:2rem;color:var(--nuit);line-height:1}.carte .prix small{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);display:block;margin-top:.4rem}
.carte a{color:var(--or);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.06em}

/* livre 3D */
.livre{background:var(--bg2)}
.livre-grid{display:grid;gap:4rem;align-items:center}
@media(min-width:900px){.livre-grid{grid-template-columns:.8fr 1.2fr;gap:var(--gouttiere)}}
.scene{perspective:1400px;display:grid;place-items:center;padding:2rem}
.book{width:15rem;aspect-ratio:2/3;position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(6deg);transition:transform .2s linear}
.book .face{position:absolute;inset:0;border-radius:.3rem .8rem .8rem .3rem;background:linear-gradient(150deg,#232738,#1B1E2B);box-shadow:var(--ombre-phare);display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem;color:#fff;backface-visibility:hidden}
.book .face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(calc(var(--sheen,0) * 1%))}
.book .dos{position:absolute;left:-1.3rem;top:0;bottom:0;width:1.3rem;background:linear-gradient(90deg,#0F111A,#2A2F42);transform:rotateY(-90deg);transform-origin:right}
.book .pages{position:absolute;right:-.5rem;top:.4rem;bottom:.4rem;width:.5rem;background:repeating-linear-gradient(0deg,#EDE6DA 0 2px,#D9D0C2 2px 3px);transform:rotateY(90deg);transform-origin:left}
.book .g{font-family:var(--runic);font-size:4.5rem;color:var(--or2);text-align:center;line-height:1}
.book .t{font-family:var(--serif);font-size:1.4rem;line-height:1.1}.book .s{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.livre-txt{display:flex;flex-direction:column;gap:1.6rem}.livre-txt p{color:var(--txt2);max-width:32rem}

/* témoignages */
.temoin{text-align:center;padding-block:calc(var(--section) * .8)}
.quote{display:grid;max-width:48rem;margin:2rem auto 1.25rem}
.quote blockquote{grid-area:1/1;margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.3;color:var(--nuit);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease),visibility .9s}
.quote blockquote.on{opacity:1;transform:none}
.quote blockquote.on{visibility:visible}
.quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-top:1.2rem;font-weight:500}
.dots{display:flex;justify-content:center;gap:.6rem}.dots button{width:2rem;height:2px;border:0;background:var(--line);padding:0;transition:background .4s}.dots button.on{background:var(--or)}

/* et aussi */
.plus{background:var(--bg2)}
.tuiles{display:grid;gap:1.2rem;margin-top:var(--bloc)}@media(min-width:900px){.tuiles{grid-template-columns:repeat(3,1fr)}}
.tuile{display:flex;flex-direction:column;gap:.8rem;padding:2rem;border-radius:var(--r-carte);background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
/* 6 px d elevation : hors du langage installe, qui tient entre 2 et 3 px. */
@media(hover:hover){
  .tuile:hover{transform:translateY(-3px);box-shadow:var(--ombre-carte);border-color:rgba(184,134,78,.35)}
}
.tuile:focus-within{transform:translateY(-3px);box-shadow:var(--ombre-carte);border-color:rgba(184,134,78,.35)}
.tuile .tg{font-family:var(--runic);font-size:1.7rem;line-height:1.4;color:var(--or)}.tuile b{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--nuit)}.tuile p{color:var(--txt2);flex:1}
.tuile .tl{font-size:.8rem;font-weight:500;letter-spacing:.08em;color:var(--or)}.tuile .soon{display:inline-block;align-self:flex-start;padding:.3rem .7rem;border-radius:999px;background:var(--or3);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.tuiles--solo{grid-template-columns:minmax(0,36rem)!important}
.news{margin-top:calc(var(--bloc) * 1.25);display:grid;gap:1.5rem;align-items:center;padding:2.2rem;border-radius:var(--r-carte);background:var(--nuit);color:#fff}
@media(min-width:900px){.news{grid-template-columns:1fr auto}}
.news b{font-family:var(--serif);font-weight:400;font-size:1.6rem;display:block}.news p{color:rgba(255,255,255,.65)}
.news form{display:flex;gap:.6rem;flex-wrap:wrap}.news input{flex:1;min-width:16rem;padding:1rem 1.3rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:.95rem}.news input::placeholder{color:rgba(255,255,255,.4)}.news .btn{border:0;cursor:pointer}
/* final */
.final{background:var(--nuit);color:#fff;text-align:center;overflow:hidden;padding-block:var(--section) calc(var(--section) * .45)}
.final h2{color:#fff;max-width:16ch;margin-inline:auto}
.final p{color:rgba(255,255,255,.65);max-width:30rem;margin:1.5rem auto 2.5rem}
.final .g{position:absolute;font-family:var(--runic);font-size:34rem;line-height:1;color:var(--or2);opacity:.05;right:-6rem;top:-6rem;pointer-events:none}
body > footer{background:#13151F;color:rgba(255,255,255,.72);padding-block:3rem;font-size:.85rem}
body > footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
body > footer a{color:inherit;text-decoration:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}#champ{display:none}
  /* Tout est immediatement en place : le fil est complet, les runes
     entierement gravees, le CTA mobile pose sans glissement. */
  .fil::after{height:100%!important}
  .filigrane{clip-path:none!important}
  .cta-mobile.montre{transform:none}}

/* ============================================================
   2. COUCHE WORDPRESS — même typo, mêmes couleurs, rien de neuf
   ============================================================ */

/* le pied de page colle en bas quand la page est plus courte que l'écran */
body{min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > footer{flex-shrink:0}

/* accessibilité */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:1rem 1.5rem;background:var(--or-action);color:#fff;border-radius:0 0 1rem 0;font-size:.85rem;font-weight:500}
.skip-link:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.admin-bar #hdr,body.admin-bar:not(.home) #hdr{top:32px}
@media(max-width:782px){.admin-bar #hdr,body.admin-bar:not(.home) #hdr{top:46px}}

/* pages intérieures : le header est fixe, on lui laisse la place */
.interieur{padding-top:calc(clamp(7rem,12vw,10rem) - var(--hauteur-entete))}
/* Le vide a droite du titre devient un espace tenu : une seule rune, tres
   grande, coupee par le bord. Le glyphe n est pas choisi ici — main.js
   reprend celui que la page porte deja dans ses bandes, ce qui evite toute
   association inventee. Sans JavaScript, --rune-intro reste vide et rien
   ne s affiche. Meme position et meme echelle sur toutes les pages ; seule
   la couleur suit l univers. */
.page-head{padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--acc-bord);
  position:relative;overflow:hidden}
.page-head::after{content:var(--rune-intro,"");position:absolute;pointer-events:none;
  right:-.06em;top:50%;transform:translateY(-50%);
  font-family:var(--runic);font-size:clamp(14rem,26vw,24rem);line-height:.8;
  color:var(--acc);opacity:.05;z-index:0}
.page-head > *{position:relative;z-index:1}
@media(max-width:899px){.page-head::after{font-size:13rem;right:-.14em;opacity:.04}}
@media(max-width:520px){.page-head::after{display:none}}
.page-head .eyebrow{margin-bottom:var(--air-chapeau)}
.page-head h1{max-width:20ch}
.page-head .accroche{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5;color:var(--txt2);max-width:34rem;margin-top:1.5rem}
.page-head .meta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:500;margin-top:1.5rem}

/* les ancres des sous-menus ne doivent pas passer sous l'en-tête fixe */
[id]{scroll-margin-top:6.5rem}

/* mention de cadre, en fin de page d'offre */
.entry .mention{border-left:2px solid var(--or);padding:.1rem 0 .1rem 1.4rem;font-size:.95rem;line-height:1.7;color:var(--txt2)}
.entry .mention strong{color:var(--nuit);font-weight:500}
.entry .mention > * + *{margin-top:1rem}
.entry .mention p{color:var(--txt2);font-size:inherit}

/* contenu Gutenberg : largeur de lecture 68 caractères */
.entry{padding-block:clamp(3rem,6vw,4.5rem)}
/* 36 rem ≈ 68 caractères à la taille du texte courant. En « ch », la mesure
   se recalculait sur chaque police : les titres échappaient à la contrainte
   et s'alignaient à gauche pendant que les paragraphes se centraient. */
.entry > *{max-width:36rem}
.entry > .alignwide{max-width:64rem}
.entry > .alignfull{max-width:none;margin-inline:calc(50% - 50vw);width:100vw}
.entry > * + *{margin-top:1.6rem}
.entry h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:3.5rem}
.entry h3{font-size:1.6rem;margin-top:2.6rem}
.entry h4{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--nuit);margin-top:2rem}
.entry p{color:var(--txt2)}

/* page introuvable : deux colonnes de pistes sous les boutons */
.entry > .introuvable-pistes{max-width:64rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--acc-bord)}
.entry .introuvable-pistes ul{list-style:none;margin:1.1rem 0 0;padding:0}
.entry .introuvable-pistes li{margin:0;padding:1rem 0;border-bottom:1px solid var(--acc-bord)}
.entry .introuvable-pistes a{font-family:var(--serif);font-size:1.45rem;line-height:1.25;color:var(--txt);border-bottom:0;transition:color .3s}
.entry .introuvable-pistes a:hover,.entry .introuvable-pistes a:focus-visible{color:var(--or-texte)}
.entry .introuvable-pistes span{display:block;margin-top:.25rem;font-size:.92rem;line-height:1.55;color:var(--txt2)}
.entry a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--acc-bord);transition:border-color .3s}
.entry a:hover{border-bottom-color:var(--acc)}
.entry ul,.entry ol{color:var(--txt2);padding-left:1.3rem}
.entry li+li{margin-top:.5rem}
.entry blockquote{border-left:1px solid var(--acc);padding-left:1.6rem;font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.45;color:var(--nuit)}
.entry blockquote p{color:inherit}
.entry img,.entry figure img{max-width:100%;height:auto;border-radius:var(--r-bloc);display:block}
.entry figure{margin:0}
.entry figcaption{font-size:.8rem;color:var(--txt3);margin-top:.8rem;text-align:center}
.entry hr,.wp-block-separator{border:0;border-top:1px solid var(--line);margin-block:3rem}
.entry table{width:100%;border-collapse:collapse;font-size:.95rem}
.entry th,.entry td{border-bottom:1px solid var(--line);padding:.8rem 1rem;text-align:left}
.entry th{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3)}
.entry code{font-size:.9em;background:var(--bg2);padding:.15em .45em;border-radius:.35rem}
.entry pre{background:var(--nuit);color:#fff;padding:1.4rem;border-radius:var(--r-bloc);overflow-x:auto}
.wp-block-table{overflow-x:auto}
.wp-block-button__link{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.7rem;border-radius:999px;font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;text-decoration:none;background:var(--or-action);color:#fff;border:0}
.wp-block-button.is-style-outline .wp-block-button__link{background:rgba(255,255,255,.5);color:var(--nuit);border:1px solid var(--line)}
/* « .entry a » est plus spécifique que les classes de bouton : sans ces règles,
   le libellé hérite du doré et disparaît sur fond doré. Vaut pour les boutons
   Gutenberg comme pour les boutons .btn du concept. */
.entry .btn{border-bottom:0}
.entry .btn--or,.entry .btn--or:hover,.entry .btn--or:focus-visible{color:#fff}
.entry .btn--ligne{color:var(--nuit);background:#FBFAF7;border-color:var(--acc-bord)}
.entry .btn--ligne:hover{border-color:var(--acc)}
.entry .btn--ligne:hover,.entry .btn--ligne:focus-visible{color:var(--or)}
.bande--nuit .btn--ligne{color:#fff;background:transparent;border-color:rgba(255,255,255,.35)}
.bande--nuit .btn--ligne:hover{color:var(--or2);border-color:var(--or2)}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.entry .wp-block-button__link{border-bottom:0;color:#fff}
.entry .wp-block-button.is-style-outline .wp-block-button__link{color:var(--nuit)}
.news .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.news .wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--or2);color:var(--or2)}

/* ============================================================
   COMPOSITION EN BANDES — direction B
   Chaque section de page est une bande pleine largeur, composée
   en diptyque asymétrique. Le poids d'une section se lit à son
   fond, à sa hauteur et à la largeur de sa colonne.
   ============================================================ */

.entry > .bande{margin-top:0}
.entry > .bande + .bande{margin-top:0}
/* Les bandes suivaient une echelle a part — 44 a 68 px la ou les sections
   montaient a 104. Elles rejoignent l echelle commune ; les deux variantes
   qui ont une mise en scene propre gardent leur ecart au reste. */
.bande{padding-block:var(--section);position:relative;overflow:hidden}
.bande__in{max-width:76rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3.5rem);position:relative;z-index:2}
.bande p{max-width:34rem}
.bande p + p{margin-top:1.15rem}
.bande h2{margin-bottom:1.15rem}
.bande .eyebrow{margin-bottom:1rem;color:var(--acc)}
.bande .eyebrow::before{background:var(--acc)}

.bande--sable{background:var(--acc-voile)}
.bande--or{background:var(--acc-bandeau)}
/* Deux bandes claires qui se suivent se touchaient sans marque : un filet
   d un pixel suffit a les distinguer. Rien avant ni apres une bande nuit
   ni une bande or, ou le passage doit rester franc. */
.bande + .bande:not(.bande--nuit):not(.bande--or){border-top:1px solid var(--acc-bord)}
.bande--nuit + .bande,.bande--or + .bande{border-top:0}
.bande--nuit{background:var(--nuit)}
.bande--nuit h2,.bande--nuit h3{color:#fff}
.bande--nuit p{color:rgba(255,255,255,.72)}
.bande--nuit .eyebrow{color:var(--acc-clair)}
.bande--nuit .eyebrow::before{background:var(--acc-clair)}
.bande--nuit .filet{background:rgba(255,255,255,.16)}
.bande--nuit .moment b{color:var(--acc-clair)}

/* la bande principale respire davantage */
.bande--phare{padding-block:calc(var(--section) * 1.12)}

/* diptyque asymétrique */
.dip{display:grid;gap:2.5rem}
@media(min-width:900px){
  /* Une seule gouttiere pour les grilles editoriales : le releve trouvait
     4,5rem, 6rem et 3,5rem selon les blocs. */
  .dip{grid-template-columns:1.35fr .65fr;gap:var(--gouttiere);align-items:start}
  .dip--inv{grid-template-columns:.65fr 1.35fr}
  /* La colonne de titre a longtemps ete collante a 7.5rem. Le collage
     n a de sens que si la colonne de droite depasse nettement la hauteur
     de l ecran : ce n etait le cas d aucune des trois bandes qui
     emploient .dip--titre — soins, guidances et ateliers —, ou il ne
     faisait que decaler le titre vers le bas. Il est retire ici plutot
     que neutralise trois fois. */
  .dip--titre{grid-template-columns:.8fr 1.2fr}
}

/* colonne étroite, pour une section secondaire */
.colonne-etroite{max-width:38rem}

/* ------------------------------------------------------------
   CTA MOBILE
   ------------------------------------------------------------
   L en-tete mobile ne montre que le logo et le burger : aucune action
   de reservation n y est atteignable sans ouvrir le tiroir. Cette barre
   comble ce manque. Elle n apparait qu apres le bandeau, s efface des
   que le contact final est en vue, et respecte la zone sure du telephone.
   Hors du flux : elle ne peut pas se retrouver dans le pied de page.
   ------------------------------------------------------------ */
.cta-mobile{position:fixed;left:0;right:0;bottom:0;z-index:18;display:none;gap:.6rem;
  padding:.7rem clamp(.75rem,4vw,1.1rem) calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(250,248,244,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s var(--ease);
  pointer-events:none}
.cta-mobile.montre{transform:none;pointer-events:auto}
.cta-mobile .btn{flex:1;justify-content:center;padding:.85rem 1rem;font-size:.82rem}
/* La barre suit l en-tete : elle parait des que Reserver quitte la bande
   pour le tiroir (1140 px, ou 1216 px avec six entrees au menu). */
@media(max-width:1139px){.cta-mobile{display:flex}}
@media(max-width:1215px){body:has(#hdr nav > ul > li:nth-child(6)) .cta-mobile{display:flex}}
@media(max-width:1080px){body{padding-bottom:0}}
/* Un ecran court garderait trop peu de place pour lire : on s abstient. */
@media(max-height:460px){.cta-mobile{display:none!important}}

/* rune en filigrane, débordant de la bande */
.filigrane{position:absolute;font-family:var(--runic);line-height:1;pointer-events:none;z-index:1;
  color:var(--acc);opacity:.06;font-size:clamp(18rem,30vw,30rem);right:.02em;top:-.08em}
@media(max-width:899px){.filigrane{font-size:16rem;right:-.1em;top:auto;bottom:-.12em;opacity:.05}}
.bande--nuit .filigrane{color:var(--acc-clair);opacity:.13}
/* Revelation en gravure : la rune se decouvre du haut vers le bas.
   Seul le clip-path est anime — les trois valeurs d opacite existantes
   (.06 clair, .05 mobile, .13 nuit) restent intactes. Aucun effet sur
   la mise en page, composition GPU. */
.filigrane{will-change:transform;transition:transform .1s linear}
:where(.js-animations-ready) .filigrane.filigrane-pending{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease),transform .1s linear}
:where(.js-animations-ready) .filigrane.filigrane-pending.filigrane-preparing{transition:none!important}
:where(.js-animations-ready) .filigrane.filigrane-pending.gravee{clip-path:inset(0 0 0 0)}

/* moments d'un déroulé : un filet doré, un intitulé, du texte */
.moment + .moment{margin-top:var(--air-etape)}
.moment .filet{height:1px;background:var(--acc-bord);margin-bottom:1.1rem;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .08s}
.moment.rv.in .filet{transform:none}
.moment b{display:block;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:.7rem}
.moment .aparte{font-size:.94rem;color:var(--txt3);border-left:1px solid var(--acc-bord);padding-left:1.1rem;margin-top:1rem}
.bande--nuit .moment .aparte{color:rgba(255,255,255,.5);border-left-color:rgba(255,255,255,.18)}

/* ------------------------------------------------------------
   ACCES A LA RESERVATION, HAUT DE PAGE
   ------------------------------------------------------------
   Pose par edr_acces_reservation(), juste sous la liste « En bref ».
   Il ne concurrence pas le H1 : il vient apres les faits pratiques.
   ------------------------------------------------------------ */
/* Le groupe passait sur deux lignes a toutes les largeurs, y compris
   1440 : la colonne de gauche du diptyque ne fait que 412 px. On l assume
   en grille tant que la place manque, plutot que de laisser un bouton
   paraitre echoue sur une seconde ligne. */
/* Deux colonnes dans une colonne de 335 px donnaient 160 px par bouton :
   les intitules passaient sur trois lignes et les pilules montaient a
   101 px. Empiles, ils tiennent sur une ligne et sont identiques. */
.acces-reservation{display:grid;gap:var(--air-boutons);margin-top:var(--air-cta)}
.acces-reservation .btn{justify-content:center;white-space:nowrap}

/* ------------------------------------------------------------
   LES RAILS DE PROGRESSION — un seul composant
   ------------------------------------------------------------
   Quatre progressions, une seule source de verite : meme geometrie,
   memes trois etats, memes variables. Seul le contraste s adapte au
   fond clair ou nuit.

   Les couleurs sont prises sur --or et --or2, jamais sur --acc :
   celle-ci est reteintee par page — bleu ardoise #4E6070 sur les
   guidances, terracotta #8C5744 sur les soins — et faisait virer au
   bleu le rail et le point courant.

   Le point est une boite fixe de 16 px centree sur --rail-point-y et
   mise a l echelle : son centre ne bouge donc jamais, quel que soit
   l etat, et aucune activation ne deplace la mise en page.
   ------------------------------------------------------------ */
/* Le rail prend la teinte d univers de la page — celle que pose
   edr_teinte_page() : or de la marque par defaut, terracotta sur les
   soins, ardoise sur les guidances. Les variantes translucides sont
   derivees de la meme teinte par color-mix ; la ligne precedente sert
   de repli aux navigateurs qui ne la connaissent pas. */
:root{
  --rail-plein:var(--acc);
  --rail-fond:rgba(184,134,78,.28);
  --rail-fond:color-mix(in srgb,var(--acc) 30%,transparent);
  --rail-halo:rgba(184,134,78,.2);
  --rail-halo:color-mix(in srgb,var(--acc) 22%,transparent);
  --rail-creux:var(--bg);
  --rail-point-y:1.85rem;
}
.bande--nuit{
  --rail-plein:var(--acc-clair);
  --rail-fond:rgba(212,164,106,.3);
  --rail-fond:color-mix(in srgb,var(--acc-clair) 32%,transparent);
  --rail-halo:rgba(212,164,106,.28);
  --rail-halo:color-mix(in srgb,var(--acc-clair) 28%,transparent);
  --rail-creux:var(--nuit);
}

body.home .bande--phare .dip--titre > div:has(> .moment),
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment),
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment),
body.edr-a-propos #parcours .faits{position:relative;padding-left:var(--rail-retrait)}
body.home .bande--phare .dip--titre > div:has(> .moment){--rail-retrait:3.4rem;--rail-x:.7rem;
  /* Les quatre mouvements de l Axe Runique n ont plus de filet horizontal :
     leur intitule remonte de 18,6 px (1 px de trait + 1,1rem de marge).
     1.85rem - 18,6px = 11px = .6875rem, ce qui reconduit a l identique
     l ecart de 1,21 px entre le centre du point et celui de l intitule.
     Portee a cette seule section : soins, guidances et a propos gardent 1.85rem. */
  --rail-point-y:.6875rem}
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment),
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment),
body.edr-a-propos #parcours .faits{--rail-retrait:2.6rem;--rail-x:.45rem}
body.edr-a-propos #parcours .faits{border-top:0;--rail-point-y:calc(var(--air-etape) / 2 + .6rem)}
body.edr-a-propos #parcours .faits > div:first-child{--rail-point-y:.6rem}

/* le rail : du centre du premier point au centre du dernier */
body.home .bande--phare .dip--titre > div:has(> .moment)::before,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::before,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment)::before,
body.edr-a-propos #parcours .faits::before,
body.home .bande--phare .dip--titre > div:has(> .moment)::after,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::after,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment)::after,
body.edr-a-propos #parcours .faits::after{content:"";position:absolute;left:var(--rail-x);width:2px;border-radius:2px;
  top:var(--rail-haut,0px);z-index:0}
body.home .bande--phare .dip--titre > div:has(> .moment)::before,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::before,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment)::before,
body.edr-a-propos #parcours .faits::before{height:var(--rail-span,100%);background:var(--rail-fond)}
body.home .bande--phare .dip--titre > div:has(> .moment)::after,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::after,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment)::after,
body.edr-a-propos #parcours .faits::after{height:var(--rail-prog,0px);background:var(--rail-plein);
  transition:height .5s var(--ease)}
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment)::after,
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::after,
html:not(.js-animations-ready) body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment)::after,
html:not(.js-animations-ready) body.edr-a-propos #parcours .faits::after{height:var(--rail-span,100%)}

/* les points, dessines au-dessus du rail */
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment,
body.edr-a-propos #parcours .faits > div{position:relative}
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment::before,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment::before,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment::before,
body.edr-a-propos #parcours .faits > div::before{content:"";position:absolute;z-index:1;
  /* --rail-decal compense une bordure gauche portee par l etape :
     un enfant absolu se positionne apres elle, ce qui decalait les
     points des formules de 2 px vers la droite. */
  left:calc(var(--rail-x) - var(--rail-retrait) + 1px - var(--rail-decal,0px));
  top:var(--rail-point-y);margin-top:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--rail-creux);border:1px solid var(--rail-plein);
  transform:translateX(-50%) scale(.625);
  transition:transform .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
/* franchie : pleine, taille normale, sans halo — et elle le reste */
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment.est-franchie::before,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment.est-franchie::before,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment.est-franchie::before,
body.edr-a-propos #parcours .faits > div.est-franchie::before{background:var(--rail-plein)}
/* courante : pleine, plus grande, halo discret */
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment.est-courante::before,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment.est-courante::before,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment.est-courante::before,
body.edr-a-propos #parcours .faits > div.est-courante::before{background:var(--rail-plein);
  transform:translateX(-50%) scale(1);box-shadow:0 0 0 4px var(--rail-halo)}
/* repli sans amorce : tous les points pleins, aucun halo */
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment) > .moment::before,
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment::before,
html:not(.js-animations-ready) body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment::before,
html:not(.js-animations-ready) body.edr-a-propos #parcours .faits > div::before{background:var(--rail-plein);box-shadow:none}

/* Repli sans JavaScript, sur l'accueil. Le rail du conteneur ne peut pas
   connaitre la position du dernier point : il retombait sur var(--rail-span,
   100%) depuis le haut de la zone, donc il demarrait au-dessus du premier
   point et depassait sous le dernier. Il est neutralise ici, et chaque
   mouvement porte le segment qui le relie au suivant : du centre de son
   point (--rail-point-y) au centre du point suivant, soit sa propre hauteur
   augmentee de l ecart entre deux etapes — la variable meme qui cree cet
   ecart, trois regles plus haut. Geometrie exacte, sans constante.
   En reduction des animations, main.js mesure la geometrie et pose
   --rail-segment a 0px : le rail mesure reprend alors la main, et
   --rail-span n etant plus vide, le conteneur le dessine a nouveau. */
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment)::before,
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment)::after{
  height:var(--rail-span,0px)}
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment) > .moment:not(:last-child)::after{
  content:"";position:absolute;z-index:0;width:2px;border-radius:2px;
  left:calc(var(--rail-x) - var(--rail-retrait) + 1px - var(--rail-decal,0px));
  transform:translateX(-50%);top:var(--rail-point-y);
  height:var(--rail-segment,calc(100% + var(--air-etape)));
  background:var(--rail-plein)}

/* intitules */
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment b,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment b,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment b{transition:color .4s var(--ease)}
body.home .bande--phare .dip--titre > div:has(> .moment) > .moment.est-courante b,
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment.est-courante b,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment.est-courante b{color:var(--rail-plein)}
.bande--nuit body.home .bande--phare .dip--titre > div:has(> .moment) > .moment b{color:rgba(255,255,255,.55)}
.bande--nuit body.home .bande--phare .dip--titre > div:has(> .moment) > .moment p{transition:color .4s var(--ease)}
.bande--nuit body.home .bande--phare .dip--titre > div:has(> .moment) > .moment.est-courante p{color:rgba(255,255,255,.95)}
html:not(.js-animations-ready) body.home .bande--phare .dip--titre > div:has(> .moment) > .moment b,
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment b,
html:not(.js-animations-ready) body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment b{color:var(--rail-plein)}

/* les filets horizontaux ne doivent pas dominer le rail vertical */
.bande--nuit body.home .bande--phare .dip--titre > div:has(> .moment) > .moment .filet{background:rgba(255,255,255,.07)}
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment .filet{background:var(--acc-bord)}

/* respiration propre a la chronologie */
body.edr-a-propos #parcours .faits > div{border-top:1px solid var(--acc-bord);border-bottom:0;
  padding-block:calc(var(--air-etape) / 2)}
body.edr-a-propos #parcours .faits > div:first-child{border-top:0;padding-top:0}
body.edr-a-propos #parcours .faits{margin-bottom:calc(var(--air-sortie) / 2)}

@media(max-width:899px){
  body.home .bande--phare .dip--titre > div:has(> .moment){--rail-retrait:2.1rem;--rail-x:.4rem}
  body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment),
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment),
body.edr-a-propos #parcours .faits{--rail-retrait:1.9rem;--rail-x:.35rem}
  body.edr-a-propos #parcours .faits{margin-top:var(--air-intro)}
  body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment:last-child,
body.edr-les-runes #lecture .duo-runes--rail > div:has(> .moment) > .moment:last-child{margin-bottom:calc(var(--air-sortie) / 2)}
}

/* ------------------------------------------------------------
   L AXE RUNIQUE — l axe
   ------------------------------------------------------------
   Une composition propre a cette section, sans .dip ni .moment ni le
   rail des autres pages. L axe est une ligne horizontale qui traverse
   toute la largeur, tracee au defilement par main.js (axeLigne, qui
   pose --axe-prog de 0 a 1). Les quatre mouvements sont poses sur
   elle : numero, nom en Cormorant, filet or, phrase.

   Direction artistique. Le fond est une matiere, pas un aplat : sur la
   nuit du theme, une nebulosite tres lente (bruit SVG a grande echelle,
   en surimpression), un semis de points clairs a peine perceptibles,
   un grain fin, un vignettage vers le noir bleu du pied de page, deux
   masses minerales sombres dans les angles bas, une lumiere chaude
   posee sur l axe et concentree autour du premier mouvement, une
   derive froide en haut a droite. Le filigrane ᛇ est grave dans la
   matiere, blanc a 4 %, masque en degrade : on le decouvre. Un second
   signe, Tiwaz, la rune du Parcours ailleurs sur le site, ouvre la
   ligne de sortie. L or reste celui du theme, il gagne en lumiere par
   superposition : trait, lueur floue sous le trait, anneaux, halos.
   ------------------------------------------------------------ */
body.home .axe-runique{padding-block:clamp(4.5rem,7.5vw,7rem) clamp(4.5rem,7vw,6.5rem);overflow:hidden;
  background:#11141d;
  --axe-nom:clamp(2.1rem,3.1vw,2.8rem);
  --axe-tete:calc(1.2rem + .7rem + var(--axe-nom));
  --axe-y:calc(var(--axe-tete) + 2.6rem)}
/* couche 1 : lumieres, vignettage, masses sombres */
body.home .axe-runique::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(16% 26% at 12% 65%,rgba(214,168,108,.30),rgba(214,168,108,.08) 50%,transparent 80%),
    radial-gradient(60% 16% at 42% 65%,rgba(184,134,78,.10),rgba(184,134,78,.03) 55%,transparent 85%),
    radial-gradient(30% 44% at 14% 22%,rgba(184,134,78,.07),transparent 70%),
    radial-gradient(44% 60% at 90% 6%,rgba(120,142,176,.14),transparent 66%),
    radial-gradient(34% 50% at 44% 30%,rgba(90,104,140,.12),transparent 70%),
    radial-gradient(52% 30% at -2% 104%,rgba(18,14,12,.95),rgba(12,11,12,.6) 45%,transparent 72%),
    radial-gradient(60% 34% at 102% 104%,rgba(18,14,12,.95),rgba(12,11,12,.6) 45%,transparent 72%),
    radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(7,9,14,.6) 100%),
    linear-gradient(180deg,rgba(7,9,14,.4) 0%,transparent 20%,transparent 60%,rgba(7,9,14,.9) 100%)}
/* couche 2 : nebulosite, semis, grain */
body.home .axe-runique::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='14' amplitude='1.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52  0 0 0 0 .58  0 0 0 0 .78  1.4 0 0 0 -.58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:420px 420px,900px 900px,160px 160px;
  background-blend-mode:normal,normal,normal;
  opacity:.55;mix-blend-mode:soft-light}
/* couche 2 bis : le semis de points, seul, en lumiere normale (le soft-light l eteindrait) */
body.home .axe-runique .axe-lueur{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='14' amplitude='1.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E");background-size:420px 420px;opacity:.2;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 35%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 60% 35%,#000 30%,transparent 100%)}
/* le filigrane : grave dans la matiere, decouvert plus que vu */
body.home .axe-runique .filigrane{font-size:clamp(16rem,30vw,31rem);top:-.2em;right:-.02em;color:#fff;opacity:.085;
  -webkit-mask-image:linear-gradient(200deg,#000 35%,rgba(0,0,0,.4) 70%,transparent 95%);mask-image:linear-gradient(200deg,#000 35%,rgba(0,0,0,.4) 70%,transparent 95%)}

/* en-tete : le titre a gauche, l introduction a droite, alignes par le bas */
body.home .axe-runique .axe-entete{display:grid;grid-template-columns:1.05fr .95fr;column-gap:clamp(3rem,5vw,5rem);align-items:end}
body.home .axe-runique .eyebrow{font-size:.78rem;letter-spacing:.28em}
body.home .axe-runique .axe-titre{font-size:clamp(3.4rem,7.6vw,6.8rem);line-height:.92;letter-spacing:-.025em;color:#fff;margin-top:clamp(1.4rem,2.2vw,2rem);
  text-shadow:0 0 60px rgba(214,168,108,.12)}
body.home .axe-runique .axe-trait{display:block;width:3.5rem;height:1px;margin-top:clamp(1.4rem,2.2vw,2rem);
  background:linear-gradient(90deg,var(--acc-clair),rgba(212,164,106,.2));box-shadow:0 0 10px rgba(212,164,106,.35)}
body.home .axe-runique .axe-intro p{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.6;font-weight:300;color:rgba(255,255,255,.84);max-width:30rem;margin:0}
body.home .axe-runique .axe-intro__lien{display:inline-block;margin-top:1.4rem;font-size:.98rem;font-weight:500;color:var(--or2);text-decoration:none;
  padding-bottom:.4rem;border-bottom:1px solid rgba(212,164,106,.45);transition:color .3s,border-color .3s}
body.home .axe-runique .axe-intro__lien:hover,body.home .axe-runique .axe-intro__lien:focus-visible{color:#fff;border-bottom-color:#fff}
body.home .axe-runique .fl{display:inline-block;transition:transform .35s var(--ease)}
body.home .axe-runique a:hover .fl,body.home .axe-runique a:focus-visible .fl{transform:translateX(5px)}

/* l axe : un trait, sa lueur, ses butees */
body.home .axe-runique .axe-ligne{position:relative;margin-top:clamp(4rem,7vw,6.5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2rem}
body.home .axe-runique .axe-ligne::before,body.home .axe-runique .axe-ligne::after{content:"";position:absolute;left:0;right:0;top:var(--axe-y);height:1px}
body.home .axe-runique .axe-ligne::before{background:linear-gradient(90deg,rgba(212,164,106,.32),rgba(212,164,106,.22) 60%,rgba(212,164,106,.32))}
body.home .axe-runique .axe-ligne::after{background:linear-gradient(90deg,#f0d4a8,var(--acc-clair) 35%,rgba(212,164,106,.9));
  box-shadow:0 0 6px rgba(214,168,108,.55),0 0 22px rgba(214,168,108,.28),0 1px 0 rgba(255,255,255,.08);
  transform:scaleX(var(--axe-prog,0));transform-origin:left;transition:transform .5s var(--ease)}
body.home .axe-runique .axe-ligne__cap{position:absolute;top:calc(var(--axe-y) - .55rem);width:1px;height:1.1rem;background:rgba(212,164,106,.6);box-shadow:0 0 8px rgba(212,164,106,.35)}
body.home .axe-runique .axe-ligne__cap--a{left:0}
body.home .axe-runique .axe-ligne__cap--b{right:0}
/* les mouvements : numero, nom, filet, phrase ; l anneau sur l axe */
body.home .axe-runique .axe-item{position:relative;padding-right:.5rem}
body.home .axe-runique .axe-item::before{content:"";position:absolute;z-index:2;left:0;top:var(--axe-y);width:20px;height:20px;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(212,164,106,.6);background:#11141d;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .5s var(--ease)}
body.home .axe-runique .axe-item::after{content:"";position:absolute;z-index:1;left:0;top:var(--axe-y);width:340px;height:340px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(closest-side,rgba(214,168,108,.22),rgba(214,168,108,.06) 45%,transparent 72%)}
body.home .axe-runique .axe-item__num{display:block;font-family:var(--sans);font-size:.86rem;font-weight:400;letter-spacing:.22em;line-height:1.2rem;color:rgba(255,255,255,.32);margin:0 0 .7rem;transition:color .4s var(--ease)}
body.home .axe-runique .axe-item__nom{font-family:var(--serif);font-weight:400;font-size:var(--axe-nom);line-height:1;letter-spacing:-.015em;color:rgba(255,255,255,.42);margin:0;transition:color .5s var(--ease),text-shadow .5s var(--ease)}
body.home .axe-runique .axe-item__filet{display:block;width:2.2rem;height:1px;margin-top:1.05rem;background:rgba(255,255,255,.14);transition:background-color .5s var(--ease),box-shadow .5s var(--ease),width .5s var(--ease)}
body.home .axe-runique .axe-item__txt{margin:calc(var(--axe-y) - var(--axe-tete) - 1.05rem - 1px + 1.9rem) 0 0;font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.46);max-width:15rem;transition:color .4s var(--ease)}
body.home .axe-runique .axe-item.est-franchie .axe-item__nom{color:rgba(255,255,255,.9)}
body.home .axe-runique .axe-item.est-franchie .axe-item__filet{background:rgba(212,164,106,.7)}
body.home .axe-runique .axe-item.est-franchie .axe-item__txt{color:rgba(255,255,255,.66)}
body.home .axe-runique .axe-item.est-franchie::before{background:var(--acc-clair);border-color:var(--acc-clair);box-shadow:0 0 10px rgba(214,168,108,.45)}
body.home .axe-runique .axe-item.est-courante .axe-item__num{color:var(--acc-clair)}
body.home .axe-runique .axe-item.est-courante .axe-item__nom{color:#fff;text-shadow:0 0 30px rgba(214,168,108,.25)}
body.home .axe-runique .axe-item.est-courante .axe-item__filet{background:var(--acc-clair);width:3rem;box-shadow:0 0 8px rgba(212,164,106,.5)}
body.home .axe-runique .axe-item.est-courante .axe-item__txt{color:rgba(255,255,255,.9)}
body.home .axe-runique .axe-item.est-courante::before{background:#f0d4a8;border-color:#f0d4a8;
  box-shadow:0 0 0 6px rgba(214,168,108,.16),0 0 0 1px rgba(214,168,108,.35),0 0 26px rgba(214,168,108,.75)}
body.home .axe-runique .axe-item.est-courante::after{opacity:1}
/* les mouvements a venir : un anneau vide, fin, qui attend le trait */
body.home .axe-runique .axe-item:not(.est-franchie):not(.est-courante)::before{box-shadow:0 0 0 4px rgba(17,20,29,.6)}

/* tablette : l axe se redresse au centre, les mouvements alternent */
@media(max-width:899.98px){
  body.home .axe-runique .axe-entete{display:block}
  body.home .axe-runique .axe-titre{font-size:clamp(3rem,8vw,4.4rem)}
  body.home .axe-runique .axe-intro{margin-top:clamp(1.6rem,3vw,2.2rem)}
  body.home .axe-runique .axe-intro p{max-width:34rem}
  body.home .axe-runique .axe-ligne{grid-template-columns:1fr 1fr;column-gap:5rem;row-gap:2.4rem;padding-block:1.2rem}
  body.home .axe-runique .axe-ligne::before,body.home .axe-runique .axe-ligne::after{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
  body.home .axe-runique .axe-ligne::after{background:linear-gradient(180deg,#f0d4a8,var(--acc-clair) 35%,rgba(212,164,106,.9));transform:scaleY(var(--axe-prog,0))}
  body.home .axe-runique .axe-ligne__cap{width:1.1rem;height:1px;left:50%;transform:translateX(-50%);top:auto}
  body.home .axe-runique .axe-ligne__cap--a{top:0}
  body.home .axe-runique .axe-ligne__cap--b{bottom:0}
  body.home .axe-runique .axe-item{padding:0}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item){grid-column:1;text-align:right}
  body.home .axe-runique .axe-item:nth-child(even of .axe-item){grid-column:2}
  body.home .axe-runique .axe-item:nth-child(1 of .axe-item){grid-row:1}
  body.home .axe-runique .axe-item:nth-child(2 of .axe-item){grid-row:2}
  body.home .axe-runique .axe-item:nth-child(3 of .axe-item){grid-row:3}
  body.home .axe-runique .axe-item:nth-child(4 of .axe-item){grid-row:4}
  body.home .axe-runique .axe-item::before,body.home .axe-runique .axe-item::after{top:calc(1.2rem + .7rem + var(--axe-nom) / 2);left:auto;right:-2.5rem;transform:translate(50%,-50%)}
  body.home .axe-runique .axe-item:nth-child(even of .axe-item)::before,body.home .axe-runique .axe-item:nth-child(even of .axe-item)::after{right:auto;left:-2.5rem;transform:translate(-50%,-50%)}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item) .axe-item__filet{margin-left:auto}
  body.home .axe-runique .axe-item__txt{margin-top:.9rem;max-width:none}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item) .axe-item__txt{margin-left:auto}
  body.home .axe-runique .filigrane{font-size:16rem;right:-.1em;top:auto;bottom:-.12em;opacity:.04;
    -webkit-mask-image:linear-gradient(20deg,#000 30%,transparent 90%);mask-image:linear-gradient(20deg,#000 30%,transparent 90%)}
  /* la lumiere suit l axe redresse : halo chaud sur le premier anneau, bande douce le long de la colonne */
  body.home .axe-runique::before{
    background:
      radial-gradient(22% 14% at 50% 46%,rgba(214,168,108,.28),rgba(214,168,108,.08) 50%,transparent 80%),
      radial-gradient(12% 40% at 50% 62%,rgba(184,134,78,.10),rgba(184,134,78,.03) 55%,transparent 85%),
      radial-gradient(40% 26% at 10% 12%,rgba(184,134,78,.08),transparent 70%),
      radial-gradient(50% 30% at 92% 4%,rgba(120,142,176,.14),transparent 66%),
      radial-gradient(52% 22% at -2% 103%,rgba(18,14,12,.95),rgba(12,11,12,.6) 45%,transparent 72%),
      radial-gradient(60% 24% at 102% 103%,rgba(18,14,12,.95),rgba(12,11,12,.6) 45%,transparent 72%),
      radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(7,9,14,.6) 100%),
      linear-gradient(180deg,rgba(7,9,14,.4) 0%,transparent 16%,transparent 70%,rgba(7,9,14,.9) 100%)}
  body.home .axe-runique .axe-lueur{opacity:.16;-webkit-mask-image:radial-gradient(70% 45% at 50% 22%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 45% at 50% 22%,#000 30%,transparent 100%)}
  body.home .axe-runique .axe-item::after{width:260px;height:260px}
}
/* telephone : l axe longe la gauche, les mouvements s empilent */
@media(max-width:699.98px){
  body.home .axe-runique{--axe-nom:1.9rem}
  body.home .axe-runique .axe-titre{font-size:clamp(2.7rem,11.5vw,3.3rem)}
  body.home .axe-runique .axe-ligne{grid-template-columns:1fr;row-gap:1.9rem;padding-left:2.2rem;padding-block:1rem}
  body.home .axe-runique .axe-ligne::before,body.home .axe-runique .axe-ligne::after,body.home .axe-runique .axe-ligne__cap{left:.45rem}
  body.home .axe-runique .axe-ligne__cap{transform:translateX(-50%)}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item),body.home .axe-runique .axe-item:nth-child(even of .axe-item){grid-column:1;text-align:left}
  body.home .axe-runique .axe-item::before,body.home .axe-runique .axe-item::after,
  body.home .axe-runique .axe-item:nth-child(even of .axe-item)::before,body.home .axe-runique .axe-item:nth-child(even of .axe-item)::after{left:calc(.45rem - 2.2rem);right:auto;transform:translate(-50%,-50%)}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item) .axe-item__filet{margin-left:0}
  body.home .axe-runique .axe-item__txt{font-size:.98rem;margin-top:.6rem}
  body.home .axe-runique .axe-item:nth-child(odd of .axe-item) .axe-item__txt{margin-left:0}
  /* au telephone la matiere s allege : halo sur le bord gauche, semis plus rare, lueur plus courte */
  body.home .axe-runique::before{
    background:
      radial-gradient(36% 12% at 6% 42%,rgba(214,168,108,.26),rgba(214,168,108,.07) 50%,transparent 80%),
      radial-gradient(18% 34% at 6% 58%,rgba(184,134,78,.10),transparent 80%),
      radial-gradient(60% 24% at 90% 4%,rgba(120,142,176,.14),transparent 66%),
      radial-gradient(70% 18% at 50% 103%,rgba(18,14,12,.9),rgba(12,11,12,.5) 50%,transparent 80%),
      radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(7,9,14,.55) 100%),
      linear-gradient(180deg,rgba(7,9,14,.4) 0%,transparent 16%,transparent 72%,rgba(7,9,14,.9) 100%)}
  body.home .axe-runique::after{opacity:.45}
  body.home .axe-runique .axe-lueur{opacity:.12;-webkit-mask-image:radial-gradient(90% 40% at 50% 18%,#000 30%,transparent 100%);mask-image:radial-gradient(90% 40% at 50% 18%,#000 30%,transparent 100%)}
  body.home .axe-runique .axe-item::after{width:200px;height:200px}
  body.home .axe-runique .filigrane{opacity:.035}
  body.home .axe-runique .axe-titre{text-shadow:none}
}

/* mention de cadre : sobre, sans doré, clairement subordonnée */
.bande--discret{padding-block:calc(var(--section) * .58)}
/* « Le cadre » ne se distinguait d un paragraphe ordinaire que par un filet
   horizontal. Il devient une note reperable : fond a peine teinte, filet
   cuivre vertical, marges internes regulieres. Pas une carte arrondie. */
.cadre-legal{display:grid;gap:1.2rem;border-top:0;
  border-left:2px solid var(--acc);
  background:rgba(184,134,78,.05);
  background:color-mix(in srgb,var(--acc) 6%,transparent);
  border-radius:0 var(--r-bloc) var(--r-bloc) 0;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem)}
@media(min-width:800px){.cadre-legal{grid-template-columns:.36fr .64fr;gap:var(--gouttiere);align-items:start}}
.cadre-legal .titre{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--nuit);margin:0}
.cadre-legal p{font-size:.9rem;line-height:1.75;color:var(--txt2);max-width:38rem}
.cadre-legal p + p{margin-top:.85rem}

/* faits pratiques : trois lignes, rien que de la typographie */
.faits{border-top:1px solid var(--acc-bord)}
.faits > div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding-block:.85rem;border-bottom:1px solid var(--acc-bord)}
.faits dt,.faits .cle{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.faits dd,.faits .val{margin:0;font-family:var(--serif);font-size:1.15rem;color:var(--nuit);line-height:1.2;text-align:right}
.bande--nuit .faits > div{border-color:rgba(255,255,255,.14)}
.bande--nuit .faits{border-top-color:rgba(255,255,255,.14)}
.bande--nuit .faits .val{color:#fff}

/* ligne de lieux, pour ancrer une section géographiquement */
.lieux{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:1rem}

/* phrase forte, pour ponctuer une section */
.edr-fort{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.35;color:var(--nuit);border-left:2px solid var(--acc);padding-left:1.6rem;max-width:30rem}
.bande--nuit .edr-fort{color:#fff;border-left-color:var(--acc-clair)}

/* tarif */
.tarif{display:grid;gap:1.6rem;align-items:center}
@media(min-width:800px){.tarif{grid-template-columns:1fr auto;gap:3rem}}
.tarif .prix{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--nuit);line-height:1.1;margin-bottom:.5rem}
.bande--nuit .tarif .prix{color:#fff}
.bande--nuit .tarif p{color:rgba(255,255,255,.72)}
.tarif p{color:var(--txt2);max-width:30rem}
.tarif .boutons{display:flex;flex-wrap:wrap;gap:.8rem}

/* zone d'image réservée, en attendant la séance photo */
.zone-photo{aspect-ratio:16/9;background:var(--acc-voile);border:1px solid var(--acc-bord);border-radius:var(--r-carte);
  display:grid;place-items:center;align-content:center;gap:.35rem;text-align:center;padding:1.5rem;color:var(--txt3)}
.zone-photo--portrait{aspect-ratio:4/5;background:var(--card)}
.zone-photo b{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--nuit)}
.zone-photo em{font-style:normal;font-size:.8rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.zone-photo small{font-size:.78rem;line-height:1.5;max-width:24rem}

/* blog */
.liste{display:grid;gap:1.4rem;padding-block:clamp(3rem,6vw,4.5rem)}
@media(min-width:800px){.liste{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.liste{grid-template-columns:repeat(3,1fr)}}
.art{display:flex;flex-direction:column;gap:1rem;padding:2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-carte);text-decoration:none;color:inherit;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.art:hover{transform:translateY(-6px);box-shadow:var(--ombre-phare)}
.art .vig{aspect-ratio:16/10;border-radius:var(--r-bloc);overflow:hidden;background:var(--bg2)}
.art .vig img{width:100%;height:100%;object-fit:cover;display:block}
.art .cat{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);font-weight:500}
.art b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--nuit)}
.art p{color:var(--txt2);font-size:.95rem;flex:1}
.art .tl{font-size:.8rem;font-weight:500;letter-spacing:.08em;color:var(--acc)}
.pagination{display:flex;gap:.5rem;justify-content:center;padding-bottom:clamp(3rem,6vw,5rem);flex-wrap:wrap}
.pagination .page-numbers{padding:.6rem 1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--txt2);font-size:.85rem;background:var(--card)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--or-action);color:#fff;border-color:var(--or-action)}
.single-vig{margin-bottom:2.5rem}
.single-vig img{width:100%;height:auto;border-radius:var(--r-carte);display:block}
.nav-art{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:2.5rem;border-top:1px solid var(--line)}
.nav-art a{color:var(--acc);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.06em}
.vide{padding-block:clamp(3rem,6vw,5rem);color:var(--txt2)}
.vide p{max-width:46ch}

/* recherche */
.form-rech{display:flex;gap:.6rem;flex-wrap:wrap;max-width:32rem;margin-top:2rem}
.form-rech input[type=search]{flex:1;min-width:14rem;padding:1rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:var(--card);font-family:inherit;font-size:.95rem;color:var(--txt)}
.form-rech button{border:0;cursor:pointer}

/* commentaires */
.comm{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.comm ol{list-style:none;margin:0;padding:0}
.comm .comment-body{padding-block:1.5rem;border-bottom:1px solid var(--line)}
.comm .comment-author{font-family:var(--serif);font-size:1.15rem;color:var(--nuit)}
.comm input[type=text],.comm input[type=email],.comm input[type=url],.comm textarea{width:100%;padding:.9rem 1.2rem;border-radius:var(--r-bloc);border:1px solid var(--line);background:var(--card);font-family:inherit;font-size:.95rem;color:var(--txt)}
.comm .submit{display:inline-flex;align-items:center;padding:1rem 1.7rem;border-radius:999px;background:var(--or-action);color:#fff;border:0;font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;cursor:pointer}

/* newsletter : retours du formulaire */
.news form{position:relative}
.news .msg{flex-basis:100%;font-size:.85rem;color:var(--or2);margin:0}
.news .msg.err{color:#E9A08A}
.news button[disabled]{opacity:.55;cursor:wait}
/* newsletter du pied de page : le formulaire .news, sans la carte,
   sur le fond du pied, séparé de la ligne légale par un filet */
body > footer .pied-lettre{display:block;margin-bottom:2.5rem}
.news--pied{margin:0;padding:0 0 2.5rem;border-radius:0;background:none;border-bottom:1px solid rgba(255,255,255,.1)}
.news--pied b{font-size:clamp(1.35rem,2.4vw,1.6rem);line-height:1.25;text-wrap:balance;color:#fff}
.news--pied p{margin:.55rem 0 0;max-width:32rem;font-size:.95rem}
.news--pied .news-confid{margin-top:0;font-size:.78rem;color:rgba(255,255,255,.55)}
.news--pied .news-confid a{text-decoration:underline;text-underline-offset:.2em}
.news--pied .news-confid a:hover,.news--pied .news-confid a:focus-visible{color:var(--or2)}
.news-piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(min-width:900px){.news--pied form{width:min(30rem,42vw)}}
.accueil-cta-attente{opacity:.55;pointer-events:none;cursor:default}
.maintien .news{margin-top:0}
@media(max-width:640px){.accueil-reperes .faits>div{grid-template-columns:1fr;gap:.35rem}.accueil-reperes .faits dd{text-align:left}}

/* Accueil : passe éditoriale, sans modifier le rôle des sections */
.reassurance-editoriale{display:grid;gap:2.5rem;align-items:stretch}
.preuve-pratique{padding:clamp(1.8rem,4vw,3rem);background:var(--nuit);color:#fff;border-radius:0 2.2rem 2.2rem 0;position:relative;overflow:hidden}
.preuve-pratique::after{content:"ᛃ";position:absolute;right:-.08em;bottom:-.35em;font-family:var(--runic);font-size:13rem;line-height:1;color:var(--or2);opacity:.08}
.preuve-pratique .eyebrow{color:var(--or2)}.preuve-pratique .eyebrow::before{background:var(--or2)}
.preuve-pratique>strong{display:block;font-family:var(--serif);font-size:clamp(6rem,13vw,10rem);font-weight:300;line-height:.78;color:#fff;margin-top:2.2rem;font-variant-numeric:tabular-nums}
.preuve-pratique>span{display:block;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--or2);margin-top:1rem}
.preuves-complementaires{display:grid;gap:1rem}
.preuve-avis,.preuve-auteur{padding:1.8rem 0;border-top:1px solid var(--acc-bord);border-bottom:1px solid var(--acc-bord)}
.preuve-avis strong,.preuve-auteur strong{display:block;font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:400;line-height:1.1;color:var(--nuit)}
.preuve-avis p,.preuve-auteur p{color:var(--txt2);margin-top:.65rem;max-width:30rem}
.preuve-auteur{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center}
.preuve-rune{font-family:var(--runic);font-size:3.2rem;line-height:1;color:var(--or)}
.reassurance-lieu{margin-top:1.4rem;color:var(--txt2);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.parcours-composition{display:grid;gap:2.5rem;align-items:center}
.parcours-intro h2{margin:1rem 0 1.4rem}.parcours-intro>p{color:var(--txt2)}
.parcours-forfait{background:rgba(255,255,255,.62);border:1px solid rgba(184,134,78,.24);border-radius:var(--r-phare);padding:clamp(1.6rem,3vw,2.5rem);box-shadow:var(--ombre-phare)}
.parcours-nombre{display:flex;align-items:center;gap:1.3rem;padding-bottom:1.4rem;border-bottom:1px solid var(--acc-bord)}
.parcours-nombre strong{font-family:var(--serif);font-size:5rem;font-weight:300;line-height:.75;color:var(--nuit)}
.parcours-nombre span{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--acc)}
.parcours-forfait>p{margin-top:1.3rem;color:var(--txt2)}
.parcours-prix{display:flex;align-items:baseline;gap:.8rem;margin:1.6rem 0}
.parcours-prix strong{font-family:var(--serif);font-size:3.1rem;font-weight:400;line-height:1;color:var(--nuit)}
.parcours-prix span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.parcours-forfait ul{margin:0;padding:1.2rem 0 0;list-style:none;border-top:1px solid var(--acc-bord)}
.parcours-forfait li{position:relative;padding-left:1rem;color:var(--txt2);font-size:.86rem;line-height:1.55}
.parcours-forfait li+li{margin-top:.65rem}.parcours-forfait li::before{content:"";position:absolute;left:0;top:.72em;width:.28rem;height:.28rem;border-radius:50%;background:var(--or)}
.temoin{padding-block:clamp(3.75rem,6vw,5.5rem);text-align:left}
.temoin-intro{display:grid;gap:1rem;margin-bottom:2.2rem}.temoin-intro h2{max-width:16ch}.temoin-intro>p:last-child{color:var(--txt2)}
.temoin-lien{display:inline-block;margin-top:.5rem;color:var(--or);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.02em;border-bottom:1px solid rgba(184,134,78,.35);padding-bottom:.1rem}
.temoin-lien:hover{border-bottom-color:var(--or)}
.temoignages-grille{display:grid;gap:1rem}
.temoignage-carte{padding:clamp(1.5rem,2.8vw,2.2rem);border:1px solid var(--line);border-radius:var(--r-carte);background:var(--card);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:18rem;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
/* Ils restent statiques et lisibles : ni carrousel, ni deplacement. */
@media(hover:hover){.temoignage-carte:hover{border-color:rgba(184,134,78,.4);box-shadow:var(--ombre-carte)}}
.temoignage-carte:focus-within{border-color:rgba(184,134,78,.4);box-shadow:var(--ombre-carte)}
.temoignage-carte:nth-child(2){background:var(--nuit);border-color:var(--nuit)}
.temoignage-carte blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,1.75vw,1.55rem);font-style:italic;line-height:1.4;color:var(--nuit)}
.temoignage-carte:nth-child(2) blockquote{color:#fff}
.temoignage-carte:nth-child(2) cite{color:var(--or)}
.temoignage-carte footer{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--line);padding-top:1rem}
.temoignage-carte:nth-child(2) footer{border-color:rgba(255,255,255,.14)}
.temoignage-carte cite{font-style:normal;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte)}
.temoignage-carte footer span{font-size:.78rem;color:var(--txt3)}
.livre{overflow:hidden}.livre-editorial{display:grid;gap:0;align-items:center;position:relative}
.livre-visuel{position:relative;z-index:2;padding:2rem 1rem 2rem 0}
.livre-visuel::before{content:"";position:absolute;inset:8% 8% 2% 0;border-radius:0 45% 45% 0;background:var(--or3);z-index:-1}
.livre-preuve{display:block;font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 1rem 1rem}
.livre-couverture{margin:0;max-width:26rem;filter:drop-shadow(2rem 2.5rem 2.4rem rgba(27,30,43,.28));transform:rotate(-3deg);
  transition:transform .55s var(--ease),filter .55s var(--ease)}
@media(hover:hover){
  .livre-visuel:hover .livre-couverture{transform:rotate(-1.6deg) translateY(-5px) scale(1.012);
    filter:drop-shadow(2.2rem 3rem 2.8rem rgba(27,30,43,.34))}
}
.livre-couverture picture{display:block}
.livre-couverture img{display:block;width:100%;height:auto;border-radius:.25rem}
/* Conteneur flex : son row-gap portait 12 px sur l accueil et 25,6 px sur
   la page du livre. Un seul jeton, et la marge posee sur les badges — qui
   s ajoutait au gap et donnait 54 px — devient inutile. */
.livre-cartouche{gap:var(--air-cta);position:relative;z-index:3;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-phare);padding:clamp(1.8rem,4vw,3.5rem);box-shadow:var(--ombre-phare)}
.livre-statut{font-family:var(--serif);font-size:1.35rem!important;color:var(--nuit)!important}
.livre-reperes{list-style:none;margin:0!important;padding:1.2rem 0 0!important;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.55rem}
.livre-reperes li{margin:0!important;padding:.5rem .9rem;border-radius:999px;background:var(--bg2);
  border:1px solid var(--acc-bord);font-size:.75rem;letter-spacing:.06em;color:var(--txt)}
.creations-apercu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:var(--bloc)}
.creation{min-height:18rem;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);border-radius:var(--r-carte);background:var(--card);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}
.creation--jeux{background:var(--nuit);border-color:var(--nuit)}
.creation-entete{display:flex;justify-content:space-between;align-items:flex-start}
.creation-numero{font-size:.65rem;letter-spacing:.22em;color:var(--txt3)}
.creation-rune{font-family:var(--runic);font-size:5rem;line-height:1;color:var(--or);opacity:.23}
.creation h3{font-size:2rem}.creation p{color:var(--txt2);margin-top:.7rem}.creation--jeux h3{color:#fff}.creation--jeux p{color:rgba(255,255,255,.62)}
.final{padding-block:clamp(3.75rem,6vw,5.5rem)}
.maintien{padding-block:clamp(3rem,5vw,4.5rem)}
@media(min-width:800px){.reassurance-editoriale{grid-template-columns:.8fr 1.2fr}.parcours-composition{grid-template-columns:.82fr 1.18fr}.temoignages-grille{grid-template-columns:repeat(3,1fr)}.livre-editorial{grid-template-columns:.9fr 1.1fr}.livre-cartouche{margin-left:-3.5rem}}
@media(max-width:700px){.creations-apercu{grid-template-columns:1fr}.preuve-pratique{border-radius:var(--r-carte)}.parcours-prix{flex-direction:column;gap:.3rem}.temoignage-carte{min-height:0}.livre-visuel{padding-right:0}.livre-couverture{max-width:19rem;margin-inline:auto}.livre-cartouche{margin-top:-1rem}.livre-cartouche .boutons{display:grid}.livre-cartouche .btn{justify-content:center}.creation{min-height:14rem}}

/* variante de la légende de prix, pour les compositions de blocs */
.carte .prix-note{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);margin-top:-.7rem}

/* le duo de l'accueil est cliquable en entier */
.pan{text-decoration:none;color:inherit}
.pan--nuit,.pan--nuit:hover{color:#fff}

/* pied de page : menu */
body > footer .wrap{align-items:flex-start}
body > footer .f-menu{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:0;padding:0}
body > footer .f-menu a:hover{color:var(--or2)}
.f-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.f-soc{display:flex;align-items:center;gap:1.15rem}
/* .f-soc est un <nav> : on neutralise le « nav a » de l'en-tête, sinon les icônes héritent d'une pastille */
.f-soc a{color:var(--txt3);display:inline-flex;padding:0;border-radius:0;background:none;transition:color .3s}
.f-soc a:hover,.f-soc a:focus-visible{color:var(--or);background:none}
.f-soc svg{width:18px;height:18px;display:block}
@media(max-width:640px){body > footer .wrap{align-items:stretch}.f-right{align-items:flex-start}}

/* WooCommerce : hérite des boutons et de la typo */
.woocommerce .interieur{padding-top:calc(clamp(7rem,12vw,10rem) - var(--hauteur-entete))}
.woocommerce ul.products{list-style:none;display:grid;gap:1.4rem;padding:0;margin:0}
@media(min-width:700px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
.woocommerce ul.products li.product{background:var(--card);border:1px solid var(--line);border-radius:var(--r-carte);padding:1.6rem;text-align:left;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--ombre-phare)}
.woocommerce ul.products li.product img{border-radius:var(--r-bloc);margin-bottom:1rem}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--nuit);line-height:1.2;padding:0}
.woocommerce .price,.woocommerce div.product p.price,.woocommerce ul.products li.product .price{font-family:var(--serif);font-size:1.6rem;color:var(--nuit)}
.woocommerce .price del{color:var(--txt3);font-size:.8em}
.woocommerce .price ins{text-decoration:none;color:var(--or)}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.7rem;border-radius:999px;background:var(--or-action);color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;border:0;line-height:1;text-decoration:none;transition:background .3s,transform .5s var(--ease)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--or-action-survol);color:#fff;transform:translateY(-2px)}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:400}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{border-top-color:var(--or);background:var(--card);border-radius:var(--r-bloc);font-size:.95rem}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--or)}
.woocommerce-breadcrumb{font-size:.8rem;color:var(--txt3)}
.woocommerce-breadcrumb a{color:var(--or);text-decoration:none}
.woocommerce table.shop_table{border-radius:var(--r-bloc);border-color:var(--line)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:.9rem 1.2rem;border-radius:var(--r-bloc);border:1px solid var(--line);background:var(--card);font-family:inherit;color:var(--txt)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-block;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--txt2);font-size:.85rem;background:var(--card)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--or-action);color:#fff;border-color:var(--or-action)}

/* impression */
@media print{#hdr,.drawer,#champ,#pluie,body > footer{display:none!important}body{background:#fff}}

/* ============================================================
   FORMULAIRE DE CONTACT — Fluent Forms, formulaire 3
   Écrit à partir du balisage réellement produit, observé le
   28 août 2026, états d'erreur et de réussite compris.
   Tous les sélecteurs sont préfixés .fluent_form_3, classe que
   Fluent Forms pose sur ce seul formulaire : aucune de ces règles
   ne peut atteindre la newsletter, la recherche, les commentaires
   ou WooCommerce.
   ============================================================ */
/* Le formulaire touchait son texte d introduction : 0 px mesure. */
.fluentform_wrapper_3{margin-top:var(--air-intro)}
.fluent_form_3 .ff-el-group{margin-bottom:1.1rem}

/* libellés : les petites capitales espacées du thème */
.fluent_form_3 .ff-el-input--label label{font-family:var(--sans);font-size:.72rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);margin-bottom:.45rem}
.fluent_form_3 .ff-el-is-required.asterisk-right label:after{color:var(--acc)}

/* champs : reprise exacte des valeurs du thème */
.fluent_form_3 .ff-el-form-control{width:100%;padding:.9rem 1.15rem;border:1px solid var(--acc-bord);
  border-radius:var(--r-bloc);background:var(--card);font-family:inherit;font-size:.95rem;line-height:1.6;
  color:var(--txt);box-shadow:none;transition:border-color .25s,box-shadow .25s}
.fluent_form_3 textarea.ff-el-form-control{min-height:9rem;line-height:1.7;resize:vertical}
.fluent_form_3 .ff-el-form-control::placeholder{color:var(--txt3)}
.fluent_form_3 .ff-el-form-control:focus,
.fluent_form_3 .ff-el-form-control:focus-visible{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-voile)}

/* liste déroulante : le chevron du thème */
.fluent_form_3 select.ff-el-form-control{appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt3) 50%),linear-gradient(135deg,var(--txt3) 50%,transparent 50%);
  background-position:calc(100% - 1.3rem) 1.35rem,calc(100% - 1rem) 1.35rem;
  background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat}

/* bouton : la pilule dorée du thème */
.fluent_form_3 .ff_submit_btn_wrapper{margin-top:var(--air-cta)}
.fluent_form_3 .ff-btn-submit.ff_btn_style{display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.7rem;border:0;border-radius:999px;background:var(--or-action);color:#fff;
  font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.06em;line-height:1;
  cursor:pointer;transition:background .3s,transform .5s var(--ease)}
.fluent_form_3 .ff-btn-submit.ff_btn_style:hover{background:var(--or-action-survol);transform:translateY(-2px)}

/* erreur — classes constatées : .ff-el-is-error sur le groupe, .error.text-danger sur le message */
/* Erreur. Le greffon pose .ff-el-is-error sur le groupe, aria-invalid sur
   le champ, et insere un .error.text-danger. Trois signaux concordants,
   dont deux non colores : la bordure epaissit et le message est prefixe
   d un triangle. Rien n est simule que Fluent Forms ne produise pas. */
.fluent_form_3 .ff-el-is-error .ff-el-form-control{border-color:#B2503C;border-width:2px;
  padding:calc(.9rem - 1px) calc(1.15rem - 1px)}
.fluent_form_3 .ff-el-form-control[aria-invalid="true"]{border-color:#B2503C}
.fluent_form_3 .ff-el-is-error .ff-el-input--label label{color:#8F3E2E}
.fluent_form_3 .error.text-danger{font-family:var(--sans);font-size:.82rem;line-height:1.5;
  color:#B2503C;margin-top:.4rem;display:flex;gap:.45rem;align-items:flex-start;margin-top:.4rem}
.fluent_form_3 .error.text-danger::before{content:"\26A0";flex:none;font-size:.9em;line-height:1.5}
/* La place du message est reservee : son apparition ne deplace rien. */
.fluent_form_3 .ff-el-group{min-height:0}
.fluent_form_3 .ff-el-input--content{position:relative}

/* Envoi en cours et bouton indisponible : deux etats que le greffon pose
   reellement, respectivement via l attribut disabled et sa classe
   d attente. Aucune logique de soumission n est ajoutee. */
.fluent_form_3 .ff-btn-submit.ff_btn_style:disabled,
.fluent_form_3 .ff-btn-submit.ff_btn_style[disabled]{opacity:.55;cursor:not-allowed;transform:none;
  box-shadow:none;background:var(--or-action)}
.fluent_form_3 .ff-btn-submit.ff_btn_style:focus-visible{outline:2px solid var(--or2);outline-offset:3px}
.fluent_form_3 .ff-btn-submit.ff_btn_style:active{transform:translateY(0);transition-duration:.08s}
.fluentform_wrapper_3 .ff_submitting .ff-btn-submit,
.fluentform_wrapper_3.ff_loading .ff-btn-submit{opacity:.6;cursor:progress}

/* réussite — le message est un FRÈRE du formulaire, pas un descendant :
   il vit dans .fluentform_wrapper_3, classe elle aussi propre au formulaire 3. */
.fluentform_wrapper_3 .ff-message-success{padding:1.1rem 1.35rem;border:1px solid var(--acc-bord);
  border-radius:var(--r-bloc);background:var(--acc-voile);color:var(--txt);font-family:var(--sans);
  font-size:.95rem;line-height:1.6;display:flex;gap:.7rem;align-items:flex-start;border-left-width:3px;border-left-color:var(--acc)}
/* Reussite : nettement perceptible, et signalee autrement que par la
   couleur — filet cuivre epais a gauche et marque de validation. */
.fluentform_wrapper_3 .ff-message-success::before{content:"\2713";flex:none;color:var(--acc);font-weight:700}
.fluentform_wrapper_3 .ff-message-success{scroll-margin-top:7rem}

/* ============================================================
   PAGE SOINS ENERGETIQUES — direction visuelle 2026
   ------------------------------------------------------------
   Composition dediee, bornee a la page Soins. Les textes et les
   composants partages restent ceux du theme ; seules la mise en scene,
   la matiere et la hierarchie de cette page changent.
   ============================================================ */

body.edr-soins-energetiques .soins-page.interieur{padding-top:0;background:var(--bg)}
body.edr-soins-energetiques .soins-page .entry{max-width:none;padding:0}
body.edr-soins-energetiques .soins-page .entry > .bande{margin:0}
body.edr-soins-energetiques .soins-page .bande__in{max-width:76rem}
body.edr-soins-energetiques .soins-page .soins-refonte{isolation:isolate}

/* Hero : contenu conserve a gauche, image LCP reelle a droite. */
body.edr-soins-energetiques .soins-hero{
  min-height:36.25rem;padding:0;display:grid;grid-template-columns:minmax(0,51%) minmax(0,49%);
  align-items:stretch;overflow:hidden;background:#faf8f4}
body.edr-soins-energetiques .soins-hero__texte{
  align-self:center;max-width:45rem;width:100%;
  padding:3.75rem 4rem 3.25rem calc(max(0px,(100vw - 76rem) / 2) + clamp(1.25rem,5vw,3.5rem))}
body.edr-soins-energetiques .soins-hero h1{font-size:clamp(4rem,4.5vw,4.2rem);max-width:none;white-space:nowrap}
body.edr-soins-energetiques .soins-hero h1::after{
  content:"";display:block;width:3rem;height:1px;margin-top:1.45rem;background:var(--or)}
body.edr-soins-energetiques .soins-hero .accroche{
  max-width:33rem;margin-top:1.45rem;font-family:var(--serif);font-size:1.34rem;
  line-height:1.5;color:#514a43}
body.edr-soins-energetiques .soins-hero__image{position:relative;min-width:0;margin:0;overflow:hidden}
body.edr-soins-energetiques .soins-hero__image picture,
body.edr-soins-energetiques .soins-hero__image img{display:block;width:100%;height:100%}
body.edr-soins-energetiques .soins-hero__image img{
  object-fit:cover;object-position:60% 52%;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
body.edr-soins-energetiques .soins-hero__image::before{
  content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:3.5rem;pointer-events:none;
  background:linear-gradient(90deg,#faf8f4 0,rgba(250,248,244,.68) 24%,transparent 100%)}
/* L arrivee de la photographie : un zoom interne qui se resorbe, en CSS
   seul, comme sur A propos. Aucune opacite et aucune attente de main.js :
   c est l image LCP, elle doit etre peinte des son chargement. Le fondu
   precedent (.rv sur la figure, image a .35) repoussait le LCP a ~1,5 s. */
:where(.js-animations-ready) body.edr-soins-energetiques .soins-hero__image img{animation:hero-pose 1.2s var(--ease) both}
@keyframes hero-pose{from{transform:scale(1.015)}to{transform:none}}

/* Pourquoi : ombre botanique naturelle, matiere minerale, encart En bref. */
body.edr-soins-energetiques .soins-page.interieur .entry > #pourquoi.soins-refonte{
  min-height:35rem;padding-block:5.75rem;background:#fbf9f5}
body.edr-soins-energetiques #pourquoi::before{
  content:"";position:absolute;z-index:-1;left:-5.5rem;top:calc(-3.5rem + var(--soins-ombre-y,0px));
  width:31rem;height:37rem;pointer-events:none;opacity:.27;
  background:url("assets/images/soins-ombres-botaniques-720.webp") left top / contain no-repeat;
  transition:transform .1s linear}
body.edr-soins-energetiques #pourquoi::after{
  content:"";position:absolute;z-index:-1;right:0;top:0;bottom:0;width:13.75rem;pointer-events:none;opacity:.86;
  background-image:image-set(url("assets/images/soins-pierre-claire-520.avif") type("image/avif"),url("assets/images/soins-pierre-claire-520.webp") type("image/webp"));
  background-size:cover;background-position:72% center}
body.edr-soins-energetiques #pourquoi .dip{grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr);gap:7.5rem;align-items:center}
body.edr-soins-energetiques #pourquoi .dip > :first-child{max-width:37rem;padding-left:2.5rem}
body.edr-soins-energetiques #pourquoi .dip > :last-child{
  position:relative;transform:translateX(2.25rem);padding:2rem 2rem 1.85rem;
  background:rgba(253,251,247,.87);border:1px solid rgba(140,87,68,.12);box-shadow:none;
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
body.edr-soins-energetiques #pourquoi .faits{margin-top:.2rem}
body.edr-soins-energetiques #pourquoi .faits > div{padding-block:.8rem;border-color:rgba(140,87,68,.18)}
body.edr-soins-energetiques #pourquoi .faits .cle{font-size:.63rem;letter-spacing:.2em}
body.edr-soins-energetiques #pourquoi .acces-reservation{margin-top:1.25rem;gap:.7rem}
body.edr-soins-energetiques #pourquoi .acces-reservation .btn{min-height:2.75rem;padding:.72rem 1rem;font-size:.78rem}

/* Pratique : la photographie devient le fond sombre et la timeline respire. */
body.edr-soins-energetiques .soins-page.interieur .entry > #deroule.soins-refonte{
  min-height:51.5rem;padding-block:6.35rem;background-color:#2b1d16;
  background-image:
    linear-gradient(90deg,rgba(28,18,13,.34) 0,rgba(30,19,14,.58) 38%,rgba(27,18,14,.84) 70%,rgba(22,16,13,.95) 100%),
    image-set(url("assets/images/soins-pratique-nuit-1672.avif") type("image/avif"),url("assets/images/soins-pratique-nuit-1672.webp") type("image/webp"));
  background-size:cover;background-position:center center}
body.edr-soins-energetiques #deroule .dip--titre{
  grid-template-columns:minmax(18rem,.68fr) minmax(0,1.32fr);gap:7rem;align-items:start}
body.edr-soins-energetiques #deroule .dip--titre > :first-child{
  padding-left:2.5rem;text-shadow:0 1px 24px rgba(18,10,7,.38)}
body.edr-soins-energetiques #deroule h2{color:#fff}
body.edr-soins-energetiques #deroule p{font-size:1.02rem;line-height:1.75;color:rgba(255,250,244,.9)}
body.edr-soins-energetiques #deroule .eyebrow,
body.edr-soins-energetiques #deroule .moment b{color:#d8ae79}
/* --rail-point-y centre le jalon sur la boite de ligne de l intitule :
   .72rem d interlignage 1.7, soit .612rem. La valeur heritee de l accueil
   (.6875rem) posait le jalon 1,22 px trop bas. */
body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment){
  --rail-point-y:.612rem;--rail-retrait:3rem;--rail-x:.45rem}
body.edr-soins-energetiques #deroule .titre-deroule{margin-bottom:2.35rem}
body.edr-soins-energetiques #deroule .moment + .moment{margin-top:3rem}
body.edr-soins-energetiques #deroule .moment .filet{display:none}
body.edr-soins-energetiques #deroule .moment p{max-width:42rem}
body.edr-soins-energetiques #deroule .moment b{margin-bottom:.65rem}
:where(.js-animations-ready) body.edr-soins-energetiques #deroule .titre-deroule.rv-pending{transition-delay:.08s}
:where(.js-animations-ready) body.edr-soins-energetiques #deroule .moment.rv-pending:nth-of-type(1){transition-delay:.16s}
:where(.js-animations-ready) body.edr-soins-energetiques #deroule .moment.rv-pending:nth-of-type(2){transition-delay:.25s}
:where(.js-animations-ready) body.edr-soins-energetiques #deroule .moment.rv-pending:nth-of-type(3){transition-delay:.34s}

/* Bouton secondaire, comme sur les guidances : .entry .btn{border-bottom:0}
   retire le quatrieme cote de .btn--ligne. Il est rendu ici, dans le
   filet beige du theme, et prend au survol la meme teinte que les trois
   autres — il restait beige quand eux viraient a l argile. La conclusion
   (.soins-conclusion, soins-maquette.css) suit exactement la meme regle. */
body.edr-soins-energetiques :is(.soins-refonte,.soins-conclusion) .btn--ligne{border-bottom:1px solid var(--acc-bord)}
body.edr-soins-energetiques :is(.soins-refonte,.soins-conclusion) .btn--ligne:hover,
body.edr-soins-energetiques :is(.soins-refonte,.soins-conclusion) .btn--ligne:focus-visible{border-bottom-color:var(--acc)}
body.edr-soins-energetiques :is(.soins-refonte,.soins-conclusion) .btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Responsive Soins : le bureau 1440 reste la reference verrouillee. */
@media(max-width:1100px){
  body.edr-soins-energetiques .soins-hero{
    min-height:35.5rem;grid-template-columns:minmax(0,52%) minmax(0,48%)}
  body.edr-soins-energetiques .soins-hero__texte{
    padding:3.5rem 2.5rem 3rem clamp(1.25rem,5vw,3.5rem)}
  body.edr-soins-energetiques .soins-hero h1{font-size:3.35rem}
  body.edr-soins-energetiques .soins-hero .accroche{font-size:1.22rem}

  body.edr-soins-energetiques .soins-page.interieur .entry > #pourquoi.soins-refonte{min-height:0;padding-block:4.75rem}
  body.edr-soins-energetiques #pourquoi::after{width:10.5rem}
  body.edr-soins-energetiques #pourquoi .dip{
    grid-template-columns:minmax(0,1.1fr) minmax(18.5rem,.9fr);gap:3rem}
  body.edr-soins-energetiques #pourquoi .dip > :first-child{padding-left:0}
  body.edr-soins-energetiques #pourquoi .dip > :last-child{transform:translateX(1rem);padding:1.65rem}

  body.edr-soins-energetiques .soins-page.interieur .entry > #deroule.soins-refonte{min-height:0;padding-block:5.2rem}
  body.edr-soins-energetiques #deroule .dip--titre{
    grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);gap:3.5rem}
  body.edr-soins-energetiques #deroule .dip--titre > :first-child{padding-left:0}
}

@media(max-width:899.98px){
  body.edr-soins-energetiques .soins-hero{
    min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}
  body.edr-soins-energetiques .soins-hero__texte{padding:3rem clamp(1.25rem,5vw,3.5rem) 2.75rem}
  body.edr-soins-energetiques .soins-hero h1{font-size:3.6rem}
  body.edr-soins-energetiques .soins-hero .accroche{max-width:39rem}
  body.edr-soins-energetiques .soins-hero__image{height:clamp(18rem,40vw,19rem)}
  body.edr-soins-energetiques .soins-hero__image img{object-position:58% 58%}
  body.edr-soins-energetiques .soins-hero__image::before{
    inset:0 0 auto;width:100%;height:2.5rem;background:linear-gradient(180deg,#faf8f4 0,rgba(250,248,244,.58) 30%,transparent 100%)}

  body.edr-soins-energetiques .soins-page.interieur .entry > #pourquoi.soins-refonte{padding-block:4.5rem}
  body.edr-soins-energetiques #pourquoi::before{left:-8rem;top:-2rem;width:25rem;height:31rem;opacity:.16}
  body.edr-soins-energetiques #pourquoi::after{width:6rem;opacity:.55}
  body.edr-soins-energetiques #pourquoi .dip{grid-template-columns:1fr;gap:3rem}
  /* En une colonne, le texte occupe toute la largeur utile et passait
     sur la bande de pierre — 55 a 68 px de chevauchement entre 521 et
     740 px. Il s arrete maintenant avant elle : 5.5rem couvrent les
     6rem de la bande moins le rembourrage de la bande__in, au plus
     etroit de ce palier. L encart, lui, garde son recouvrement, comme
     au bureau. */
  body.edr-soins-energetiques #pourquoi .dip > :first-child{max-width:min(39rem,calc(100% - 5.5rem))}
  body.edr-soins-energetiques #pourquoi .dip > :last-child{
    width:100%;transform:none;background:rgba(253,251,247,.9)}

  body.edr-soins-energetiques .soins-page.interieur .entry > #deroule.soins-refonte{
    padding-block:5rem;background-image:
      linear-gradient(90deg,rgba(30,19,14,.82) 0,rgba(26,17,13,.94) 46%,rgba(22,16,13,.98) 100%),
      image-set(url("assets/images/soins-pratique-nuit-1120.avif") type("image/avif"),url("assets/images/soins-pratique-nuit-1120.webp") type("image/webp"));
    background-size:100% 100%,auto 46rem;background-position:center,left bottom;background-repeat:no-repeat}
  body.edr-soins-energetiques #deroule .dip--titre{grid-template-columns:1fr;gap:4rem}
  body.edr-soins-energetiques #deroule .dip--titre > :first-child{max-width:38rem;text-shadow:none}
  body.edr-soins-energetiques #deroule .titre-deroule{margin-bottom:2.5rem}
}

@media(max-width:520px){
  body.edr-soins-energetiques .soins-hero__texte{padding:2.5rem 1.25rem 2rem}
  body.edr-soins-energetiques .soins-hero h1{font-size:2.75rem;white-space:normal}
  body.edr-soins-energetiques .soins-hero .accroche{font-size:1.12rem;line-height:1.55}
  body.edr-soins-energetiques .soins-hero__image{height:13.25rem}
  body.edr-soins-energetiques .soins-hero__image img{object-position:62% 60%}

  body.edr-soins-energetiques .soins-page.interieur .entry > #pourquoi.soins-refonte{padding-block:4rem}
  body.edr-soins-energetiques #pourquoi::before{display:none;background-image:none}
  /* Au telephone, reculer le texte le ramenerait a 262 px de mesure : la
     pierre se retire comme l ombre botanique, et la colonne reprend
     toute la largeur. */
  body.edr-soins-energetiques #pourquoi::after{display:none;background-image:none}
  body.edr-soins-energetiques #pourquoi .dip > :first-child{max-width:39rem}
  body.edr-soins-energetiques #pourquoi .dip{gap:2.5rem}
  body.edr-soins-energetiques #pourquoi .dip > :last-child{padding:1.35rem;background:rgba(253,251,247,.94)}
  body.edr-soins-energetiques #pourquoi .faits > div{gap:.75rem}
  body.edr-soins-energetiques #pourquoi .faits .val{font-size:1.05rem}
  body.edr-soins-energetiques #pourquoi .acces-reservation .btn{min-height:3rem;white-space:normal;text-align:center}

  body.edr-soins-energetiques .soins-page.interieur .entry > #deroule.soins-refonte{
    padding-block:4.25rem;background-image:
      linear-gradient(90deg,rgba(28,18,14,.88) 0,rgba(24,17,13,.96) 44%,rgba(22,16,13,.99) 100%),
      image-set(url("assets/images/soins-pratique-nuit-720.avif") type("image/avif"),url("assets/images/soins-pratique-nuit-720.webp") type("image/webp"));
    background-size:100% 100%,auto 32rem;background-position:center,22% bottom}
  body.edr-soins-energetiques #deroule .dip--titre{gap:3.5rem}
  body.edr-soins-energetiques #deroule p{font-size:1rem;line-height:1.72}
  body.edr-soins-energetiques #deroule .moment + .moment{margin-top:2.6rem}
}

/* Le rail garde son repli sans JavaScript et sans halo. */
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::before,
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment)::after{height:var(--rail-span,0px)}
html:not(.js-animations-ready) body.edr-soins-energetiques #deroule .dip--titre > div:has(> .moment) > .moment:not(:last-child)::after{
  content:"";position:absolute;z-index:0;width:1px;
  left:calc(var(--rail-x) - var(--rail-retrait) + 1px);top:var(--rail-point-y);
  height:var(--rail-segment,calc(100% + var(--air-etape)));background:var(--rail-plein)}

@media(prefers-reduced-motion:reduce){
  body.edr-soins-energetiques #pourquoi{--soins-ombre-y:0px!important}
}

/* ============================================================
   PAGE GUIDANCES — en-tete et bandeau
   ------------------------------------------------------------
   Les quatre sections qui suivent le bandeau sont dans
   guidances-maquette.css (maquette du 26/09/2026), chargee sur
   cette seule page.
   ============================================================ */

/* ---- Mise en scène photographique 2026 ---- */
body.edr-guidances .guidances-page{padding-top:0;background:#faf8f4}
body.edr-guidances .guidances-page .entry{max-width:none;padding:0}
body.edr-guidances .guidances-page .entry > .bande{margin:0}
body.edr-guidances .guidances-page .bande__in{max-width:76rem}

/* L'état défilé est volontairement stable sur toute la page : le header
   reste un élément d'interface, quelle que soit la bande qu'il traverse. */

/* Hero : texte éditorial et journal réellement chargé comme LCP. */
body.edr-guidances .guidances-hero{
  min-height:37.5rem;padding:0;display:grid;
  grid-template-columns:minmax(0,50%) minmax(0,50%);align-items:stretch;
  overflow:hidden;background:#faf8f4}
body.edr-guidances .guidances-hero__texte{
  align-self:center;max-width:44rem;width:100%;
  padding:7rem 4.5rem 4rem max(3.5rem,calc((100vw - 76rem) / 2))}
body.edr-guidances .guidances-hero h1{
  max-width:none;font-size:clamp(4.2rem,5.3vw,5.1rem);white-space:nowrap}
body.edr-guidances .guidances-hero h1::after{
  content:"";display:block;width:3rem;height:1px;margin-top:1.45rem;background:var(--or)}
body.edr-guidances .guidances-hero .accroche{
  max-width:31rem;margin-top:1.45rem;font-family:var(--serif);font-size:1.34rem;
  line-height:1.5;color:#4f4841}
body.edr-guidances .guidances-hero__image{position:relative;min-width:0;margin:0;overflow:hidden}
body.edr-guidances .guidances-hero__image picture,
body.edr-guidances .guidances-hero__image img{display:block;width:100%;height:100%}
body.edr-guidances .guidances-hero__image img{
  object-fit:cover;object-position:58% 51%;
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
body.edr-guidances .guidances-hero__image::before{
  content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:4rem;pointer-events:none;
  background:linear-gradient(90deg,#faf8f4 0,rgba(250,248,244,.66) 28%,transparent 100%)}
/* Meme arrivee que sur Soins : zoom seul, sans opacite (image LCP). */
:where(.js-animations-ready) body.edr-guidances .guidances-hero__image img{animation:hero-pose 1.2s var(--ease) both}

@media(max-width:1100px){
  body.edr-guidances .guidances-hero{min-height:35rem;grid-template-columns:52% 48%}
  body.edr-guidances .guidances-hero__texte{
    padding:6.25rem 2.5rem 3.25rem max(2.5rem,calc((100vw - 58rem) / 2))}
  body.edr-guidances .guidances-hero h1{font-size:3.8rem}
  body.edr-guidances .guidances-hero .accroche{font-size:1.2rem}
}

@media(max-width:899.98px){
  body.edr-guidances .guidances-hero{
    min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto}
  body.edr-guidances .guidances-hero__texte{padding:6.4rem 3rem 3rem}
  body.edr-guidances .guidances-hero h1{font-size:3.8rem}
  body.edr-guidances .guidances-hero .accroche{max-width:39rem}
  body.edr-guidances .guidances-hero__image{height:19rem}
  body.edr-guidances .guidances-hero__image img{object-position:54% 54%}
  body.edr-guidances .guidances-hero__image::before{
    inset:0 0 auto;width:100%;height:2.5rem;
    background:linear-gradient(180deg,#faf8f4 0,rgba(250,248,244,.58) 30%,transparent 100%)}
}

@media(max-width:520px){
  body.edr-guidances .guidances-hero__texte{padding:5.75rem 1.25rem 2.25rem}
  body.edr-guidances .guidances-hero h1{font-size:3rem;white-space:normal}
  body.edr-guidances .guidances-hero .accroche{font-size:1.12rem;line-height:1.55}
  body.edr-guidances .guidances-hero__image{height:14rem}
  body.edr-guidances .guidances-hero__image img{object-position:57% 54%}
}

@media(prefers-reduced-motion:reduce){
  body.edr-guidances .guidances-hero__image img{transition:none;transform:none!important;opacity:1!important}
}

/* ============================================================
   PAGE LES RUNES — refonte editoriale
   ------------------------------------------------------------
   Comme sur les soins et les guidances, aucune de ces regles ne
   s active sans le marqueur .runes-refonte, pose sur les cinq
   sections du nouveau contenu : body.edr-les-runes existe aussi
   avec l ancien balisage, et le CSS deploye avant le collage
   decalerait la page en ligne.

   La page reprend la grammaire des deux autres — bandes pleine
   largeur, alternance clair / sable / nuit, surtitres cuivres,
   titres serif, rail statique — sans introduire de composant
   nouveau la ou l un des existants convient.
   ============================================================ */

/* ---- Le bandeau et son Fehu ----
   Le titre, l accroche et la rune forment un seul ensemble : l accroche
   passe dans _edr_accroche, donc dans .page-head, et la rune reste le
   pseudo-element que le theme y pose deja. Il n y a plus de section
   d introduction, plus de .filigrane sur la page, et donc plus de rune
   en double : runeIntro() lit le data-rune-intro de la premiere bande et
   n a aucun filigrane a reprendre.
   Le glyphe est celui de Noto Sans Runic, la premiere famille de --runic.
   Les familles de repli (Segoe UI Historic, Apple Symbols) donnent une
   version anguleuse a traits fins ; c est la police du theme qui porte la
   hampe epaisse et les deux branches arrondies.
   Metriques relevees sur cette police, par cadratin : avance .681, encre
   de .097 a .666 en largeur, .714 de haut au-dessus de la ligne de base,
   qui tombe a .788 du haut de la boite (interligne .8). D ou les deux
   corrections : .015em separe le bord droit de l encre du bord droit de
   la boite, et le centre de l encre tombe .031em sous celui de la boite.
   Le glyphe n est plus recadre : sa taille est bornee pour tenir en
   entier dans le bandeau, dont la hauteur va de 174,1 px a 768 a 281,6 px
   a 1440 — c est 768 qui contraint, pas la plus grande largeur. */
/* Le bandeau, le haut de .entry et la rune sont desormais poses par la
   section BANDEAUX DES PAGES INTERIEURES. */
body.edr-les-runes .entry .bande.runes-refonte:first-of-type{
  padding-top:clamp(1.5rem,2.6vw,2.25rem)}

/* ---- Le diptyque, employe par trois sections ----
   Meme grille que .duo-lecture des guidances : deux zones, jamais
   de carte. Le rapport change avec le contenu, pas la mecanique. */
body.edr-les-runes .runes-refonte .duo-runes{display:grid;gap:var(--bloc);align-items:start}
@media(min-width:900px){
  body.edr-les-runes .runes-refonte .duo-runes{
    grid-template-columns:52fr 48fr;column-gap:var(--gouttiere);row-gap:0}
  body.edr-les-runes .runes-refonte .duo-runes--rail{grid-template-columns:42fr 58fr}
  body.edr-les-runes .runes-refonte .duo-runes--tirage{grid-template-columns:44fr 56fr;
    align-items:center}
}
body.edr-les-runes .runes-refonte .duo-runes > div > :first-child{margin-top:0}
body.edr-les-runes .runes-refonte .duo-runes p{max-width:32rem}

/* ---- Bande 1 : les reperes historiques ----
   Trois etages, du plus editorial au plus factuel : le titre et les deux
   paragraphes en diptyque, la phrase qui separe le fait de l interpretation
   isolee en serif avec son filet cuivre, puis la frise des trois dates sur
   toute la largeur. Aucune carte, aucun cadre, aucune rune : les seules
   separations sont trois filets d un pixel. Sous le seuil, la frise
   s empile et les filets passent a l horizontale — l ordre du DOM suffit,
   aucune propriete order. */
/* Les deux proprietes que la v1 posait sur .duo-runes — colonnes et
   alignement — sont reposees par la v2, qui suit dans la feuille et gagne
   a specificite egale. Aucun contenu ne porte runes-refonte sans
   runes-refonte-v2, ni en ligne ni dans le depot : le bloc est mort. */
/* La phrase pivot : elle ne repete pas un paragraphe, elle marque le
   passage de l ecriture a la divination. */
body.edr-les-runes #origines.runes-refonte .cle-histoire{
  margin:var(--section) 0 0;max-width:44rem;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.35;color:var(--nuit);
  border-left:2px solid var(--acc);padding-left:clamp(1.2rem,2.4vw,2rem);
  text-wrap:pretty}
/* La chronologie des trois periodes, composee comme celle d un livre
   d histoire : la date dans une colonne etroite a gauche, le texte a
   droite, une rangee par periode, separees par un filet d un pixel. Pas
   de trait horizontal a suivre, pas de reperes, pas de carte, pas de
   chiffre en arriere-plan — la structure tient a la colonne des dates.
   align-items:baseline pose la date sur la premiere ligne de son texte :
   c est ce qui fait tenir l alignement quelle que soit la longueur des
   paragraphes.
   margin:0 sur les rangees est indispensable et non decoratif : .entry
   li+li pose .5rem de marge haute a toutes les puces sauf la premiere.
   Dans une liste ordinaire cela ne se voit pas ; ici cela decalait les
   deuxieme et troisieme periodes de 8 px sous la premiere. */
body.edr-les-runes #origines.runes-refonte .frise{list-style:none;
  margin:var(--section) 0 0;padding:0;display:grid;gap:0}
body.edr-les-runes #origines.runes-refonte .frise li{margin:0;display:grid;gap:.45rem;
  padding-block:1.7rem;border-top:1px solid var(--acc-bord)}
/* La v1 composait chaque periode en deux colonnes, date puis texte. La v2
   defait cette grille — display:block sur li, grid-template-columns:none,
   column-gap et align-items remis a normal — et compose les trois periodes
   en colonnes de la frise. Le row-gap:0 qui restait est sans effet sur un
   element block. Bloc mort, retire. */
body.edr-les-runes #origines.runes-refonte .frise b{font-family:var(--serif);
  font-weight:400;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.3;color:var(--acc)}
body.edr-les-runes #origines.runes-refonte .frise p{margin:0;color:var(--txt2);
  font-size:.98rem;line-height:1.75;max-width:44rem}

/* ---- Bande 2 : les trois mouvements ----
   Cette section n a plus de rail a elle : elle est branchee sur le
   composant partage du site, comme l accueil, les soins et a propos. Sa
   branche de selecteur est ajoutee aux dix-neuf regles de ce composant,
   plus haut dans cette feuille, et rails() l inscrit dans ses groupes.
   Elle recoit donc la progression au defilement, l etape courante
   agrandie avec son halo, les etapes franchies pleines, et les deux
   replis — sans JavaScript et en reduction des animations.
   --rail-point-y est le seul reglage propre a la page : mesure ici, le
   centre de l intitule tombe a 12,99 px du haut de son mouvement, comme
   sur les guidances, ou aucune ligne ne le precede. 12,99 + 1,21 = 14,2 px
   = .8875rem. Chiffre releve, non transpose. */
body.edr-les-runes #lecture.runes-refonte .duo-runes--rail > div:has(> .moment){
  --rail-point-y:.8875rem}
body.edr-les-runes #lecture.runes-refonte .moment p{margin:0;color:var(--txt2);max-width:32rem}

/* ---- Bande 3 : le tirage ----
   Le hasard redevient l experience principale : la pierre arrive face
   cachee, « Tirer une rune » est l action premiere, et les vingt-quatre
   signes ne se deplient que si on les demande. Aucun etat n est pose au
   chargement — main.js part sans rune active, la grille ne montre donc
   aucune selection tant que rien n a ete tire.
   Le fond nocturne reprend la recette des guidances : un halo chaud du
   cote de la pierre, une variation froide de l autre. */
body.edr-les-runes #tirage.runes-refonte::before{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 78% at 70% 50%,rgba(184,134,78,.34),rgba(184,134,78,.13) 46%,transparent 76%),
    radial-gradient(60% 120% at 96% 44%,rgba(184,134,78,.14),transparent 64%),
    linear-gradient(258deg,transparent 46%,rgba(212,164,106,.07) 74%,rgba(212,164,106,.12) 100%);
  background:
    radial-gradient(38% 78% at 70% 50%,color-mix(in srgb,var(--or) 34%,transparent),color-mix(in srgb,var(--or) 13%,transparent) 46%,transparent 76%),
    radial-gradient(60% 120% at 96% 44%,color-mix(in srgb,var(--or) 14%,transparent),transparent 64%),
    linear-gradient(258deg,transparent 46%,color-mix(in srgb,var(--acc-clair) 7%,transparent) 74%,color-mix(in srgb,var(--acc-clair) 12%,transparent) 100%)}
@media(max-width:899.98px){
  body.edr-les-runes #tirage.runes-refonte::before{
    background:
      radial-gradient(150% 34% at 50% 72%,rgba(184,134,78,.24),rgba(184,134,78,.08) 48%,transparent 76%),
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 36%,rgba(212,164,106,.10) 100%);
    background:
      radial-gradient(150% 34% at 50% 72%,color-mix(in srgb,var(--or) 24%,transparent),color-mix(in srgb,var(--or) 8%,transparent) 48%,transparent 76%),
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 36%,color-mix(in srgb,var(--acc-clair) 10%,transparent) 100%)}
}
/* La pierre reste le composant du theme. Elle est seulement bornee : au
   dela, son rapport 4/5 en faisait un bloc plus haut que la colonne de
   texte en face. */
body.edr-les-runes #tirage.runes-refonte .pierre-bloc{max-width:20rem;margin-inline:auto}
/* Le dos de la pierre : la meme matiere que la face, sans glyphe. Un
   simple aplat guilloche par le degrade du composant, pour qu on voie
   qu il y a quelque chose a retourner. */
/* Avant le premier tirage, la face avant ne montre que son dos ; apres,
   elle se comporte comme la face arriere. Le basculement tient a une
   seule classe, posee par main.js au premier tirage. */
body.edr-les-runes #tirage.runes-refonte .pierre:not(.tiree) .face--av .glyph,
body.edr-les-runes #tirage.runes-refonte .pierre:not(.tiree) .face--av .nom{display:none}
body.edr-les-runes #tirage.runes-refonte .pierre.tiree .face--av .dos{display:none}
body.edr-les-runes #tirage.runes-refonte .face--av .dos{flex:1;margin-block:.8rem;
  border-radius:calc(var(--r-carte) - .6rem);
  background:
    repeating-linear-gradient(135deg,rgba(184,134,78,.10) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,rgba(184,134,78,.10),rgba(184,134,78,.02));
  border:1px solid rgba(184,134,78,.18)}
/* L action secondaire : elle ouvre la grille, elle ne rivalise pas avec
   le tirage. */
body.edr-les-runes #tirage.runes-refonte .boutons{margin-top:var(--air-cta)}
body.edr-les-runes #tirage.runes-refonte .choisir{margin-top:.8rem}
body.edr-les-runes #tirage.runes-refonte .choisir .btn{background:transparent;
  color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.26)}
body.edr-les-runes #tirage.runes-refonte .choisir .btn:hover,
body.edr-les-runes #tirage.runes-refonte .choisir .btn:focus-visible{
  color:#fff;border-color:var(--acc-clair);background:rgba(255,255,255,.06)}
/* La grille depliee : elle vient sous la pierre, sans carte ni cadre. */
body.edr-les-runes #tirage.runes-refonte .futhark-zone{margin-top:var(--air-cta)}
body.edr-les-runes #tirage.runes-refonte .futhark{margin-top:0}
body.edr-les-runes #tirage.runes-refonte .futhark button{font-size:1.2rem;min-height:2.9rem}
body.edr-les-runes #tirage.runes-refonte .futhark-nom{margin-top:var(--air-etape);
  font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;text-align:center}

/* ---- Bande 4 : approfondir ----
   Trois zones au-dessus du seuil — le titre, la couverture, le
   texte — puis les deux prolongements sur toute la largeur. En
   dessous, la grille se defait et l ordre du DOM suffit : aucun
   order, aucune reconstruction. */
body.edr-les-runes #approfondir.runes-refonte .approfondir{display:grid;gap:var(--bloc)}
@media(min-width:900px){
  body.edr-les-runes #approfondir.runes-refonte .approfondir{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);
    grid-template-areas:"titre visuel texte" "suites suites suites";
    column-gap:var(--gouttiere);row-gap:var(--bloc);align-items:center}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__titre{grid-area:titre}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__visuel{grid-area:visuel}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__txt{grid-area:texte}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__suites{grid-area:suites}
}
body.edr-les-runes #approfondir.runes-refonte .approfondir__titre h2{margin-top:var(--air-chapeau)}
body.edr-les-runes #approfondir.runes-refonte .approfondir__titre h2::after{content:"";
  display:block;width:3.5rem;height:1px;background:var(--acc-bord);margin-top:var(--air-etape)}
/* La hauteur de la bande venait de trois postes, mesures a 1440 : la
   couverture (363,2 px de boite avec sa rotation), l ecart de --section
   entre la rangee haute et les prolongements (100,8 px) et le rembourrage
   de chaque prolongement (41,6 px). Aucune hauteur n est imposee : ce sont
   ces trois valeurs qui sont ramenees, et la bande suit. */
body.edr-les-runes #approfondir.runes-refonte .livre-couverture{max-width:10rem;
  margin-inline:auto}
body.edr-les-runes #approfondir.runes-refonte .approfondir__txt p:not(.eyebrow){margin-top:.9rem;
  color:var(--txt2);max-width:30rem}
body.edr-les-runes #approfondir.runes-refonte .approfondir__txt .boutons{margin-top:var(--air-cta)}
/* Les deux prolongements : deux lignes editoriales, pas des cartes.
   Un filet les separe, aucun fond, aucun rayon, aucune ombre. */
body.edr-les-runes #approfondir.runes-refonte .approfondir__suites{display:grid;
  gap:1.6rem}
body.edr-les-runes #approfondir.runes-refonte .suite{display:grid;gap:.55rem;
  border-top:1px solid var(--acc-bord);padding-top:1.4rem}
@media(min-width:900px){
  body.edr-les-runes #approfondir.runes-refonte .suite{
    grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gouttiere);align-items:baseline}
  body.edr-les-runes #approfondir.runes-refonte .suite .eyebrow{grid-column:1/-1}
  body.edr-les-runes #approfondir.runes-refonte .suite .lien{justify-self:end;text-align:right}
}
body.edr-les-runes #approfondir.runes-refonte .suite p:not(.eyebrow){margin:0;
  color:var(--txt2);max-width:34rem}
body.edr-les-runes #approfondir.runes-refonte .suite .lien a{color:var(--or-action);
  text-decoration:none;font-size:.9rem;white-space:nowrap}
body.edr-les-runes #approfondir.runes-refonte .suite .lien a:hover,
body.edr-les-runes #approfondir.runes-refonte .suite .lien a:focus-visible{text-decoration:underline}
/* Empilee, la bande cumulait 1 284 px a 390 : 128 de rembourrage, 166,3 de
   titre, 262,6 de couverture, 216,6 de texte, 377,5 de prolongements et
   trois ecarts de 44. Quatre postes sont repris — l ecart entre blocs, la
   couverture, le filet sous le titre qui n a plus de role une fois la
   composition empilee, et le rembourrage des prolongements. Aucune hauteur
   n est imposee. */
@media(max-width:899.98px){
  body.edr-les-runes #approfondir.runes-refonte .approfondir{gap:1.5rem}
  body.edr-les-runes #approfondir.runes-refonte .livre-couverture{max-width:8.5rem}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__titre h2::after{display:none}
  body.edr-les-runes #approfondir.runes-refonte .approfondir__suites{gap:1.25rem}
  body.edr-les-runes #approfondir.runes-refonte .suite{padding-top:1.15rem}
}

/* Les bordures des CTA. Deux defauts se cumulaient sur cette page.
   .btn n a jamais reinitialise la bordure : sur un <a>, le navigateur n en
   pose aucune, mais sur un <button> il applique la sienne — d ou les
   2 px releves sur « Tirer une rune ». Et .entry .btn{border-bottom:0}
   retirait le quatrieme cote de .btn--ligne, d ou le 1 / 1 / 0 / 1 de
   « Voir le livre ». Les deux familles sont donc redeclarees ici, sur les
   quatre cotes, avec la meme geometrie au repos, au survol et au focus :
   seule la couleur change. */
body.edr-les-runes .runes-refonte .btn,
body.edr-les-runes .runes-refonte .btn:hover,
body.edr-les-runes .runes-refonte .btn:focus-visible{border:0}
body.edr-les-runes .runes-refonte .btn--ligne,
body.edr-les-runes .runes-refonte .btn--ligne:hover,
body.edr-les-runes .runes-refonte .btn--ligne:focus-visible{border:1px solid var(--line)}
body.edr-les-runes .runes-refonte .btn--ligne:hover,
body.edr-les-runes .runes-refonte .btn--ligne:focus-visible{border-color:var(--acc)}

/* Le focus des boutons. Le theme ne pose pas de contour global : les soins
   et les guidances en declarent un sous leur marqueur, celui-ci fait de
   meme. Sur la bande nuit, la teinte claire de l accent passe devant le
   fond sombre. */
body.edr-les-runes .runes-refonte .btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
body.edr-les-runes #tirage.runes-refonte .btn:focus-visible{outline-color:var(--acc-clair)}

/* ============================================================
   PAGE LES RUNES — composition v2
   ------------------------------------------------------------
   Le bloc precedent reste celui de la 1.9.17, mot pour mot : il
   sert le contenu actuellement publie, qui ne porte que
   .runes-refonte. Tout ce qui suit demande en plus
   .runes-refonte-v2, pose uniquement par le nouveau contenu.
   Le theme peut donc etre deploye sans rien changer en ligne ;
   la nouvelle composition s active au collage.

   Chaque regle est soit une valeur nouvelle, soit la remise a
   zero explicite d une regle de la v1 que la v2 n emploie plus.
   Une fois le collage confirme, la v1 et ces remises a zero
   partiront ensemble dans une passe de nettoyage.
   ============================================================ */

/* Le Fehu n est plus un glyphe compose : il est dessine, comme les six
   autres runes, par la section BANDEAUX DES PAGES INTERIEURES. */
/* Le bandeau prend la hauteur des soins. Mesure a 1440 : la-bas
   l accroche court sur trois lignes et le bandeau fait 281,6 px, ce qui
   porte une Berkana de 267,3 px d encre. Ici l accroche tient sur deux
   lignes et le bandeau ne faisait que 209,6 : a taille egale le Fehu en
   sortait. Le rembourrage bas comble l ecart d une ligne, et la rune peut
   grandir en restant entiere.
   Fehu et Berkana ont la meme hauteur d encre par cadratin, .714, mais
   Fehu est deux fois plus large — .569 contre .258. A 324 px il fait donc
   231 de haut pour 184 de large, contre 267 sur 97 aux soins : moins haut
   de 13 %, presque deux fois plus large, et entier. */
/* Le rembourrage bas ajoute en 1.9.19 pour loger un Fehu trop grand est
   retire : la rune est desormais dimensionnee sur le bandeau, et le
   bandeau suit le gabarit commun. */

/* ---- Bande 1 : la frise en trois colonnes ----
   La v1 composait les trois periodes en chronologie de livre, une
   rangee par periode. La v2 les met en trois colonnes egales. Les
   proprietes de rangee de la v1 sont donc remises a zero, et le
   filet passe en pseudo-element pose au milieu de la gouttiere :
   en padding-left il decalait le contenu des deuxieme et troisieme
   colonnes, et les trois intervalles cessaient d etre egaux. */
@media(min-width:900px){
  body.edr-les-runes #origines.runes-refonte-v2 .duo-runes{
    grid-template-columns:42fr 58fr;align-items:start}
}
body.edr-les-runes #origines.runes-refonte-v2 .cle-histoire{
  margin:var(--bloc) 0 0;font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.4}
body.edr-les-runes #origines.runes-refonte-v2 .frise{
  margin:var(--section) 0 0;gap:var(--bloc)}
body.edr-les-runes #origines.runes-refonte-v2 .frise li{position:relative;
  display:block;padding-block:0;border-top:0}
body.edr-les-runes #origines.runes-refonte-v2 .frise li:last-of-type{border-bottom:0}
body.edr-les-runes #origines.runes-refonte-v2 .frise li::before{content:"";display:block;
  width:2rem;height:1px;background:var(--acc);margin-bottom:1.1rem}
body.edr-les-runes #origines.runes-refonte-v2 .frise b{display:block;
  font-size:clamp(1.25rem,1.9vw,1.6rem);margin-bottom:.9rem}
body.edr-les-runes #origines.runes-refonte-v2 .frise p{line-height:1.75;max-width:26rem}
@media(min-width:900px){
  body.edr-les-runes #origines.runes-refonte-v2 .frise{grid-template-columns:repeat(3,1fr);
    column-gap:var(--gouttiere);row-gap:0}
  body.edr-les-runes #origines.runes-refonte-v2 .frise li{
    grid-template-columns:none;column-gap:normal;align-items:normal}
  body.edr-les-runes #origines.runes-refonte-v2 .frise li + li::after{content:"";
    position:absolute;top:0;bottom:0;left:calc(var(--gouttiere) / -2);
    width:1px;background:var(--acc-bord)}
}
@media(max-width:899.98px){
  body.edr-les-runes #origines.runes-refonte-v2 .frise{gap:var(--air-etape)}
  body.edr-les-runes #origines.runes-refonte-v2 .frise li + li{
    border-top:1px solid var(--acc-bord);padding-top:var(--air-etape)}
}

/* ---- Bande 2 : une chaleur derriere la colonne de droite ----
   Un seul degrade radial tres pale, sous le contenu. Ni rune, ni
   carte, ni image, et la bande reste claire. */
@media(min-width:900px){
  body.edr-les-runes #lecture.runes-refonte-v2::before{content:"";position:absolute;inset:0;
    pointer-events:none;z-index:0;
    background:radial-gradient(46% 68% at 71% 50%,rgba(184,134,78,.07),transparent 72%);
    background:radial-gradient(46% 68% at 71% 50%,color-mix(in srgb,var(--or) 7%,transparent),transparent 72%)}
}

/* ---- Bande 3 : l intitule fixe de la grille ----
   La v1 posait une legende sous la grille, qui recopiait le nom et
   l evocation de la rune survolee — un second endroit ou lire le
   resultat. La v2 nomme le choix au-dessus de la grille et s en
   tient la. */
body.edr-les-runes #tirage.runes-refonte-v2 .futhark-titre{margin:0 0 var(--air-etape);
  font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  text-align:center;color:rgba(255,255,255,.72)}

/* ---- Bande 4 : couverture agrandie, prolongements en deux colonnes ---- */
body.edr-les-runes #approfondir.runes-refonte-v2 .livre-couverture{max-width:16rem}
body.edr-les-runes #approfondir.runes-refonte-v2 .approfondir__suites{
  gap:var(--air-etape);border-top:1px solid var(--acc-bord);padding-top:var(--bloc)}
body.edr-les-runes #approfondir.runes-refonte-v2 .suite{gap:.7rem;align-content:start;
  border-top:0;padding-top:0}
@media(min-width:900px){
  body.edr-les-runes #approfondir.runes-refonte-v2 .approfondir__suites{
    grid-template-columns:1fr 1fr;column-gap:var(--gouttiere);row-gap:0}
  body.edr-les-runes #approfondir.runes-refonte-v2 .suite{
    grid-template-columns:none;column-gap:normal;align-items:normal}
  body.edr-les-runes #approfondir.runes-refonte-v2 .suite .eyebrow{grid-column:auto}
  body.edr-les-runes #approfondir.runes-refonte-v2 .suite .lien{
    justify-self:auto;text-align:left}
  body.edr-les-runes #approfondir.runes-refonte-v2 .suite + .suite{
    border-left:1px solid var(--acc-bord);padding-left:var(--gouttiere)}
}
@media(max-width:899.98px){
  body.edr-les-runes #approfondir.runes-refonte-v2 .livre-couverture{max-width:13rem}
  body.edr-les-runes #approfondir.runes-refonte-v2 .approfondir__suites{padding-top:var(--bloc)}
  body.edr-les-runes #approfondir.runes-refonte-v2 .suite + .suite{
    border-top:1px solid var(--acc-bord);padding-top:var(--air-etape)}
}

/* ============================================================
   PAGE LES RUNES — composition 2026
   ------------------------------------------------------------
   La page prend le rang des trois autres refontes : Soins tient
   l organique et la photographie, Guidances la nuit et la
   matiere, le Parcours l editorial structure. Les runes tiennent
   l histoire et la transmission — des objets reels, des dates,
   des gravures, et deux photographies fortes.

   Ces regles demandent le marqueur .runes-2026, pose uniquement
   par le nouveau contenu. Les deux blocs precedents restent en
   place mot pour mot : ils servent la page en ligne tant que le
   collage n est pas fait, et leurs reglages du composant de
   tirage — la pierre, son dos, la grille du futhark — sont
   repris ici plutot que recrits.

   Aucun rail : la progression verticale animee appartient aux
   autres pages. Ici la lecture avance par les objets, les dates
   et les changements de matiere. Les bandes ne sont pas des
   aplats poses bout a bout : chacune porte sa matiere, et
   plusieurs elements franchissent leur bord.
   ============================================================ */

body.edr-les-runes .runes-page{padding-top:0;background:var(--bg)}
body.edr-les-runes .runes-page .entry{max-width:none;padding:0}
body.edr-les-runes .runes-page .entry > .bande{margin:0}
body.edr-les-runes .runes-page .bande__in{max-width:76rem}
body.edr-les-runes .runes-page .entry .bande.runes-2026:first-of-type{padding-top:0}

/* ---- Le bandeau : la nature morte runique ----
   Le texte a gauche sur l ivoire, la photographie a droite. Il n y a
   pas de bord entre les deux : la photographie se leve du fond sur pres
   de la moitie de sa largeur, si bien qu on ne sait pas dire ou l ivoire
   s arrete. Le paysage grave revient en bas a gauche, a peine visible,
   pour que la zone editoriale ne soit pas un aplat. */
body.edr-les-runes .runes-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,36%) minmax(0,64%);
  align-items:stretch;min-height:45rem;overflow:hidden;
  background:linear-gradient(180deg,#faf8f4 0,#f9f6f0 76%,#f7f2e9 100%)}
/* le paysage grave, en bas a gauche, tres efface */
body.edr-les-runes .runes-hero::before{
  content:"";position:absolute;z-index:0;left:-8%;bottom:0;width:min(26rem,32%);
  aspect-ratio:1400 / 788;pointer-events:none;opacity:.26;
  background-image:url("assets/images/runes-gravure-900.webp");
  background-image:image-set(url("assets/images/runes-gravure-900.avif") type("image/avif"),url("assets/images/runes-gravure-900.webp") type("image/webp"));
  background-size:contain;background-position:left bottom;background-repeat:no-repeat;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 62%,transparent 100%),linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 62%,transparent 100%),linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%);
  mask-composite:intersect}
/* Le bloc editorial : surtitre, titre ample, filet or, accroche. Rien
   d autre — ni bouton, ni citation. */
body.edr-les-runes .runes-hero__texte{
  position:relative;z-index:2;align-self:center;max-width:42rem;width:100%;
  padding:6rem 2rem 6.5rem max(3.5rem,calc((100vw - 76rem) / 2))}
body.edr-les-runes .runes-hero .eyebrow{margin-bottom:1.25rem}
body.edr-les-runes .runes-hero h1{
  max-width:none;font-size:clamp(4.4rem,6.4vw,6.4rem);line-height:.92;letter-spacing:-.018em}
body.edr-les-runes .runes-hero h1::after{
  content:"";display:block;width:3.5rem;height:1px;margin-top:1.35rem;background:var(--or)}
body.edr-les-runes .runes-hero .accroche{
  max-width:26rem;margin-top:1.35rem;font-family:var(--serif);font-size:1.5rem;
  line-height:1.44;color:#4b443d}

/* La scene : la photographie occupe toute la zone droite et deborde sur
   la gauche par son fondu. Le masque court sur 52 % de sa largeur — bien
   plus qu un fondu ordinaire — pour qu aucune limite ne se lise. Le bas
   ne se dissout pas : 3 % avant le sable de la bande suivante. */
body.edr-les-runes .runes-hero__scene{position:relative;margin:0;min-width:0;isolation:isolate}
body.edr-les-runes .runes-hero__scene picture{display:block;height:100%}
body.edr-les-runes .runes-hero__scene picture img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  filter:saturate(1.04) contrast(1.03);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 12%,rgba(0,0,0,.65) 24%,rgba(0,0,0,.93) 33%,#000 42%),linear-gradient(180deg,#000 0,#000 97%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 12%,rgba(0,0,0,.65) 24%,rgba(0,0,0,.93) 33%,#000 42%),linear-gradient(180deg,#000 0,#000 97%,transparent 100%);
  mask-composite:intersect;
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
:where(.js-animations-ready) body.edr-les-runes .runes-hero__scene.rv-pending:not(.in) picture img{opacity:.35;transform:scale(1.015)}

/* ---- Bande 1 : quelques reperes ----
   Le sable de la marque, trois temps : la grille editoriale, le
   bandeau de la phrase cle ouvert sur le fjord grave, puis la ligne
   documentaire des trois objets. */
body.edr-les-runes .runes-page .entry > #origines.runes-2026{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(60% 40% at 82% 8%,rgba(255,253,248,.7),transparent 68%),
    linear-gradient(180deg,#f7f2e9 0,#f5efe4 58%,#f7f2e9 100%);
  padding-block:clamp(4.5rem,7vw,6.5rem) clamp(4.5rem,7vw,6.5rem)}
/* l aquarelle de roche reprend en bas a gauche, comme au bandeau */
body.edr-les-runes #origines.runes-2026::before{
  content:"";position:absolute;z-index:0;left:-4%;bottom:0;width:min(32rem,34%);
  aspect-ratio:900 / 675;pointer-events:none;opacity:.42;
  background-image:url("assets/images/runes-aquarelle-900.webp");
  background-image:image-set(url("assets/images/runes-aquarelle-900.avif") type("image/avif"),url("assets/images/runes-aquarelle-900.webp") type("image/webp"));
  background-size:contain;background-position:left bottom;background-repeat:no-repeat;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 94%)}
body.edr-les-runes #origines.runes-2026 .bande__in{position:relative;z-index:1}
body.edr-les-runes #origines.runes-2026 .rn-histoire{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(3rem,5.5vw,5.5rem);align-items:start}
body.edr-les-runes #origines.runes-2026 .rn-histoire__tete{padding-left:2.5rem}
body.edr-les-runes #origines.runes-2026 .rn-histoire h2{
  margin-top:1.1rem;font-size:clamp(2.4rem,3.6vw,3.35rem);line-height:1.04;max-width:12ch}
body.edr-les-runes #origines.runes-2026 .rn-histoire__txt{
  padding-left:clamp(2rem,3.2vw,3.2rem);border-left:1px solid rgba(184,134,78,.34)}
body.edr-les-runes #origines.runes-2026 .rn-histoire__txt p{
  max-width:34rem;font-size:1.02rem;line-height:1.78;color:#4b4a47}
body.edr-les-runes #origines.runes-2026 .rn-histoire__txt p + p{margin-top:1.5rem}

/* Le bandeau de la phrase cle : une vraie zone, pas une phrase posee
   dans le vide. Elle court sur toute la largeur utile, le fjord grave
   se leve a sa droite et se perd dans le sable, un filet or ouvre a
   gauche et deux filets fins la bordent. */
body.edr-les-runes #origines.runes-2026 .rn-cle{
  position:relative;isolation:isolate;overflow:hidden;
  margin:clamp(3.5rem,5.5vw,5rem) 0 0;padding:clamp(2.6rem,4vw,3.4rem) 45% clamp(2.6rem,4vw,3.4rem) 0;
  border-block:1px solid rgba(184,134,78,.26);
  background:linear-gradient(94deg,rgba(255,253,249,.72),rgba(255,253,249,.28) 46%,transparent 78%);
  max-width:none;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.3vw,2.05rem);
  line-height:1.4;color:var(--nuit);text-wrap:balance}
body.edr-les-runes #origines.runes-2026 .rn-cle::before{
  content:"";position:absolute;z-index:1;left:0;top:clamp(2.6rem,4vw,3.4rem);bottom:clamp(2.6rem,4vw,3.4rem);
  width:2px;background:var(--or)}
body.edr-les-runes #origines.runes-2026 .rn-cle::after{
  content:"";position:absolute;z-index:0;right:-6%;top:-18%;width:74%;aspect-ratio:1600 / 533;
  pointer-events:none;
  background-image:url("assets/images/runes-fjord-1600.webp");
  background-image:image-set(url("assets/images/runes-fjord-1600.avif") type("image/avif"),url("assets/images/runes-fjord-1600.webp") type("image/webp"));
  background-size:contain;background-position:right center;background-repeat:no-repeat;
  mix-blend-mode:multiply;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
body.edr-les-runes #origines.runes-2026 .rn-cle{padding-left:2.6rem}

/* Les trois objets : un filet historique commun court au-dessus des
   trois colonnes ; un anneau se pose dessus au centre de chacune, un
   losange a chaque jonction, d ou descend un filet vertical. L objet
   repose sur un socle de vitrine — un panneau ivoire aux angles coupes,
   cerne d un filet d 1 px — puis viennent la date et son texte. Rien
   n est cliquable : c est une vitrine, pas une offre. */
body.edr-les-runes #origines.runes-2026 .rn-jalons{
  position:relative;list-style:none;margin:clamp(4rem,6vw,5.25rem) 0 0;padding:2.6rem 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem)}
/* le filet historique, d un bord a l autre de la largeur utile */
body.edr-les-runes #origines.runes-2026 .rn-jalons::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(184,134,78,.42)}
body.edr-les-runes #origines.runes-2026 .rn-jalons li{position:relative}
/* l anneau du jalon, centre sur sa colonne */
body.edr-les-runes #origines.runes-2026 .rn-jalons li::before{
  content:"";position:absolute;left:50%;top:-2.6rem;width:13px;height:13px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#f7f2e9;border:1px solid var(--or);
  box-shadow:inset 0 0 0 2.5px #f7f2e9,inset 0 0 0 4.5px rgba(184,134,78,.85)}
/* le losange des jonctions, et le filet vertical qui en descend */
body.edr-les-runes #origines.runes-2026 .rn-jalons li + li{
  border-left:1px solid rgba(184,134,78,.2);
  margin-left:calc(-1 * clamp(1rem,2vw,2rem));padding-left:clamp(1rem,2vw,2rem)}
body.edr-les-runes #origines.runes-2026 .rn-jalons li + li::after{
  content:"";position:absolute;left:0;top:-2.6rem;width:9px;height:9px;margin:-5.5px 0 0 -5.5px;
  background:#f7f2e9;border:1px solid var(--or);transform:rotate(45deg)}
/* le socle : panneau ivoire aux angles coupes */
body.edr-les-runes #origines.runes-2026 .rn-jalons__objet{
  position:relative;margin:0 0 1.7rem;height:12rem;display:flex;align-items:center;
  justify-content:center;padding:1rem 1.4rem;
  background:linear-gradient(176deg,rgba(255,253,249,.92),rgba(247,242,233,.5));
  box-shadow:inset 0 0 0 1px rgba(184,134,78,.22);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
body.edr-les-runes #origines.runes-2026 .rn-jalons__objet img{
  display:block;width:auto;max-width:100%;max-height:100%;
  filter:drop-shadow(0 12px 16px rgba(72,58,40,.26))}
body.edr-les-runes #origines.runes-2026 .rn-jalons li:nth-child(1) .rn-jalons__objet img{max-height:9.2rem}
body.edr-les-runes #origines.runes-2026 .rn-jalons li:nth-child(2) .rn-jalons__objet img{max-height:10.2rem}
body.edr-les-runes #origines.runes-2026 .rn-jalons li:nth-child(3) .rn-jalons__objet img{max-height:9.6rem}
body.edr-les-runes #origines.runes-2026 .rn-jalons b{
  display:block;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.1vw,1.85rem);line-height:1.1;color:var(--nuit)}
body.edr-les-runes #origines.runes-2026 .rn-jalons p{
  margin-top:1rem;max-width:22rem;font-size:.95rem;line-height:1.72;color:#4b4a47}

/* ---- Bande 2 : ma maniere de les lire ----
   Une scene editoriale en deux mouvements. Le texte et la photographie
   forment un seul bloc a gauche ; les trois temps occupent toute la
   hauteur a droite, sans carte fermee. Les grands numeros, les filets et
   le rythme vertical rendent le processus evident au premier regard. */
body.edr-les-runes .runes-page .entry > #lecture.runes-2026{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(5rem,7vw,7rem);
  background:
    radial-gradient(56% 74% at 12% 42%,rgba(255,255,255,.72),transparent 72%),
    linear-gradient(112deg,#faf8f4 0,#f8f4ec 58%,#f2ebdf 100%)}
body.edr-les-runes #lecture.runes-2026::after{
  content:"";position:absolute;z-index:0;right:-5rem;bottom:-5rem;width:min(48rem,54%);
  aspect-ratio:1400 / 788;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("assets/images/runes-gravure-1400.webp");
  background-image:image-set(url("assets/images/runes-gravure-1400.avif") type("image/avif"),url("assets/images/runes-gravure-1400.webp") type("image/webp"));
  background-size:contain;background-position:right bottom;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%),linear-gradient(180deg,transparent 0,#000 30%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 35%),linear-gradient(180deg,transparent 0,#000 30%);
  mask-composite:intersect}
body.edr-les-runes #lecture.runes-2026 .bande__in{position:relative;z-index:1}
body.edr-les-runes #lecture.runes-2026 .rn-pratique{display:grid;gap:4rem;align-items:center}
body.edr-les-runes #lecture.runes-2026 .rn-pratique__intro{min-width:0}
body.edr-les-runes #lecture.runes-2026 h2{
  max-width:9ch;margin-top:1rem;font-size:clamp(3rem,4.7vw,4.35rem);line-height:.96}
body.edr-les-runes #lecture.runes-2026 .rn-pratique__amorce{
  max-width:31rem;margin-top:1.6rem;font-family:var(--serif);font-size:1.32rem;
  line-height:1.55;color:#4b443d;text-wrap:pretty}
body.edr-les-runes #lecture.runes-2026 .rn-pratique__image{
  position:relative;width:min(100%,32rem);margin:3rem 0 0 -3.5rem}
body.edr-les-runes #lecture.runes-2026 .rn-pratique__image picture,
body.edr-les-runes #lecture.runes-2026 .rn-pratique__image img{display:block;width:100%}
body.edr-les-runes #lecture.runes-2026 .rn-pratique__image img{
  height:auto;filter:saturate(.92) contrast(1.03);
  box-shadow:0 24px 48px -34px rgba(60,44,28,.58);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%),linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%),linear-gradient(180deg,#000 0,#000 92%,transparent 100%);
  mask-composite:intersect}

body.edr-les-runes #lecture.runes-2026 .rn-pratique__parcours{min-width:0}
body.edr-les-runes #lecture.runes-2026 .rn-etapes{list-style:none;margin:0;padding:0}
body.edr-les-runes #lecture.runes-2026 .rn-etape{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.75rem;align-items:start;
  margin:0;padding:2.15rem 1.25rem 2.35rem 0;border-top:1px solid rgba(150,104,58,.34)}
body.edr-les-runes #lecture.runes-2026 .rn-etape:last-child{
  border-bottom:1px solid rgba(150,104,58,.34)}
body.edr-les-runes #lecture.runes-2026 .rn-etape__numero{
  display:block;font-family:var(--serif);font-size:4.2rem;font-weight:300;line-height:.82;
  letter-spacing:-.045em;color:rgba(150,104,58,.68)}
body.edr-les-runes #lecture.runes-2026 .rn-etape__contenu{position:relative;padding-left:1.7rem}
body.edr-les-runes #lecture.runes-2026 .rn-etape__contenu::before{
  content:"";position:absolute;left:0;top:.38rem;bottom:.2rem;width:1px;background:rgba(184,134,78,.38)}
body.edr-les-runes #lecture.runes-2026 .rn-etape h3{
  max-width:19ch;font-size:clamp(1.75rem,2.4vw,2.2rem);line-height:1.05;text-wrap:balance}
body.edr-les-runes #lecture.runes-2026 .rn-etape p{
  max-width:31rem;margin-top:1rem;font-size:1.02rem;line-height:1.7;color:#514b45;text-wrap:pretty}

@media(min-width:900px){
  body.edr-les-runes #lecture.runes-2026 .rn-pratique{
    grid-template-columns:minmax(22rem,.84fr) minmax(34rem,1.16fr);column-gap:clamp(4rem,7vw,7rem)}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__intro{padding-left:2rem}
  body.edr-les-runes #lecture.runes-2026 .rn-etape:nth-child(2){margin-left:2rem}
  body.edr-les-runes #lecture.runes-2026 .rn-etape:nth-child(3){margin-left:4rem}
}

@media(max-width:899.98px){
  body.edr-les-runes .runes-page .entry > #lecture.runes-2026{padding-block:4.5rem}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique{gap:3.6rem}
  body.edr-les-runes #lecture.runes-2026 h2{max-width:11ch;font-size:clamp(3rem,8vw,4rem)}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__amorce{font-size:1.24rem}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__image{margin:2.5rem 0 0;max-width:32rem}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__parcours{max-width:42rem}
}

@media(max-width:520px){
  body.edr-les-runes .runes-page .entry > #lecture.runes-2026{padding-block:3.8rem 4.25rem}
  body.edr-les-runes #lecture.runes-2026::after{right:-9rem;bottom:-2rem;width:36rem;opacity:.1}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique{gap:3.25rem}
  body.edr-les-runes #lecture.runes-2026 h2{max-width:9ch;font-size:3.25rem;line-height:.94}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__amorce{
    margin-top:1.4rem;font-size:1.16rem;line-height:1.55}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__image{
    width:calc(100% + 2.5rem);max-width:none;margin:2.25rem -1.25rem 0}
  body.edr-les-runes #lecture.runes-2026 .rn-pratique__image img{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 94%,transparent 100%)}
  body.edr-les-runes #lecture.runes-2026 .rn-etape{
    grid-template-columns:3.45rem minmax(0,1fr);gap:1rem;padding:1.7rem 0 1.9rem}
  body.edr-les-runes #lecture.runes-2026 .rn-etape__numero{font-size:2.85rem;line-height:.88}
  body.edr-les-runes #lecture.runes-2026 .rn-etape__contenu{padding-left:1.1rem}
  body.edr-les-runes #lecture.runes-2026 .rn-etape h3{font-size:1.76rem;line-height:1.06}
  body.edr-les-runes #lecture.runes-2026 .rn-etape p{margin-top:.8rem;font-size:.98rem;line-height:1.65}
}

/* ---- Bande 3 : tirez une rune ----
   La scene nocturne est le fond reel de la section. Son vide sombre
   accueille le texte tandis que les livres, la bougie et les matieres
   entourent la carte interactive au premier plan. */
body.edr-les-runes .runes-page .entry > #tirage.runes-2026{
  position:relative;isolation:isolate;overflow:hidden;min-height:30rem;
  padding-block:3rem;background-color:#0d1520;
  background-image:url("assets/images/runes-tirage-ambiance-2172.webp");
  background-repeat:no-repeat;background-size:cover;background-position:center}
body.edr-les-runes #tirage.runes-2026::before,
body.edr-les-runes #tirage.runes-2026::after{content:none}
body.edr-les-runes #tirage.runes-2026 .bande__in{position:relative;z-index:1;max-width:76rem}
body.edr-les-runes #tirage.runes-2026 .rn-tirage{
  display:grid;grid-template-columns:minmax(28rem,.9fr) minmax(29rem,1.1fr);
  column-gap:clamp(3rem,5vw,5rem);align-items:center;min-height:24rem}
body.edr-les-runes #tirage.runes-2026 .rn-tirage__txt{
  position:relative;z-index:3;max-width:31rem;padding-left:2rem}
body.edr-les-runes #tirage.runes-2026 h2{
  max-width:none;margin-top:1.05rem;font-size:clamp(3.35rem,4.2vw,3.9rem);
  line-height:.96;color:#fff}
body.edr-les-runes #tirage.runes-2026 .rn-tirage__txt > p:not(.eyebrow):not(.boutons):not(.choisir):not(.lien):not(.screen-reader-text){
  max-width:28rem;margin-top:1.45rem;font-size:1.04rem;line-height:1.72;color:rgba(255,250,244,.88)}
body.edr-les-runes #tirage.runes-2026 .eyebrow{color:#d6a86d}
body.edr-les-runes #tirage.runes-2026 .boutons,
body.edr-les-runes #tirage.runes-2026 .choisir{display:inline-flex;vertical-align:top;margin-top:1.65rem}
body.edr-les-runes #tirage.runes-2026 .boutons{margin-right:.75rem}
body.edr-les-runes #tirage.runes-2026 .choisir .btn{padding-inline:1.2rem;font-size:.82rem}
body.edr-les-runes #tirage.runes-2026 .lien{margin-top:1.45rem}
body.edr-les-runes #tirage.runes-2026 .lien a{color:#d6a86d}

body.edr-les-runes #tirage.runes-2026 .rn-tirage__jeu{
  position:relative;display:grid;place-items:center;min-height:23rem;padding-right:3rem}
body.edr-les-runes #tirage.runes-2026 .pierre-bloc{
  position:relative;z-index:2;width:15rem;max-width:none;margin:0}
body.edr-les-runes #tirage.runes-2026 .pierre{
  aspect-ratio:2 / 3;width:100%;perspective:1500px;filter:drop-shadow(0 2.2rem 2rem rgba(0,0,0,.5))}
body.edr-les-runes #tirage.runes-2026 .pierre-tilt{transition:transform .42s var(--ease)}
body.edr-les-runes #tirage.runes-2026 .pierre-in{transition:transform .72s cubic-bezier(.22,.75,.26,1)}
body.edr-les-runes #tirage.runes-2026 .face{
  padding:0;border:0;border-radius:1.1rem;background-color:transparent;
  background-image:url("assets/images/runes-tirage-carte-front.webp");
  background-size:100% 100%;background-repeat:no-repeat;box-shadow:none;overflow:hidden}
body.edr-les-runes #tirage.runes-2026 .face::before{content:none}
body.edr-les-runes #tirage.runes-2026 .face--av .dos{
  position:absolute;inset:0;margin:0;border:0;border-radius:1.1rem;
  background:url("assets/images/runes-tirage-carte-back.webp") center / 100% 100% no-repeat}
body.edr-les-runes #tirage.runes-2026 .face .lab,
body.edr-les-runes #tirage.runes-2026 .face .hint{display:none}
body.edr-les-runes #tirage.runes-2026 .face .glyph{
  position:absolute;left:50%;top:43%;width:70%;padding:0;transform:translate(-50%,-50%);
  font-size:8.5rem;line-height:1;color:#403329;text-shadow:0 .6rem 1rem rgba(78,53,31,.2)}
body.edr-les-runes #tirage.runes-2026 .face .nom{
  position:absolute;left:12%;right:12%;bottom:10.5%;font-size:1.55rem;line-height:1.08;
  text-align:center;color:#352d27}
body.edr-les-runes #tirage.runes-2026 .face .nom small{
  margin-top:.45rem;font-size:.72rem;line-height:1.38;color:#5a4b3e}
body.edr-les-runes #tirage.runes-2026 .pierre:hover .face,
body.edr-les-runes #tirage.runes-2026 .pierre:focus-visible .face{box-shadow:none}
body.edr-les-runes #tirage.runes-2026 .pierre:focus-visible{outline:2px solid #d6a86d;outline-offset:.55rem}

/* Le choix des vingt-quatre runes s ouvre comme un plateau dans la scene,
   sans remplacer la logique ni les boutons construits par main.js. */
body.edr-les-runes #tirage.runes-2026 .futhark-zone{
  position:absolute;z-index:5;left:50%;top:50%;width:34rem;margin:0;padding:2rem 2.15rem;
  transform:translate(-50%,-50%);background:rgba(10,16,25,.94);
  border:1px solid rgba(214,168,109,.38);box-shadow:0 2rem 4.5rem rgba(0,0,0,.5)}
body.edr-les-runes #tirage.runes-2026 .futhark-zone[hidden]{display:none}
body.edr-les-runes #tirage.runes-2026 .futhark-titre{
  margin:0 0 1.25rem;font-size:.7rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;text-align:center;color:rgba(255,255,255,.72)}
body.edr-les-runes #tirage.runes-2026 .futhark{
  grid-template-columns:repeat(8,1fr);gap:.45rem;margin:0}
body.edr-les-runes #tirage.runes-2026 .futhark button{
  min-height:3.2rem;padding:.35rem 0;border:1px solid rgba(214,168,109,.14);
  border-radius:.15rem;background:rgba(255,255,255,.025);font-size:1.38rem;color:rgba(255,255,255,.76)}
body.edr-les-runes #tirage.runes-2026 .futhark button:hover,
body.edr-les-runes #tirage.runes-2026 .futhark button:focus-visible{
  color:#f0c98f;border-color:rgba(214,168,109,.7);background:rgba(214,168,109,.1)}
body.edr-les-runes #tirage.runes-2026 .futhark button.on{
  color:#111925;border-color:#d6a86d;background:#d6a86d}
body.edr-les-runes #tirage.runes-2026 .pierre-bloc:has(.futhark-zone:not([hidden])) .pierre{
  opacity:.16;transform:scale(.96);transition:opacity .3s var(--ease),transform .3s var(--ease)}

/* ---- Bande 4 : approfondir avec le livre ----
   La couverture reelle monte sur la bande nuit : elle franchit le
   bord, le livre entre dans la page avant sa section. Derriere elle,
   la gravure du fjord tient le fond a droite ; le texte garde la
   gauche, sur l ivoire. */
body.edr-les-runes .runes-page .entry > #approfondir.runes-2026{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,#faf8f4 0,#faf8f4 62%,#f7f2e9 100%);
  padding-block:clamp(4.5rem,7vw,6.5rem)}
body.edr-les-runes #approfondir.runes-2026::after{
  content:"";position:absolute;z-index:0;right:0;top:14%;pointer-events:none;
  width:min(40rem,44%);aspect-ratio:1600 / 533;
  background-image:url("assets/images/runes-fjord-1600.webp");
  background-image:image-set(url("assets/images/runes-fjord-1600.avif") type("image/avif"),url("assets/images/runes-fjord-1600.webp") type("image/webp"));
  background-size:contain;background-position:right center;background-repeat:no-repeat;
  mix-blend-mode:multiply;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(180deg,transparent 0,#000 20%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(180deg,transparent 0,#000 20%,#000 74%,transparent 100%);
  mask-composite:intersect}
body.edr-les-runes #approfondir.runes-2026 .bande__in{position:relative;z-index:1}
/* Trois temps : le texte, le livre en pivot au centre, la gravure au
   bord droit. La couverture n est pas rangee dans une colonne : elle
   avance vers le texte et monte sur la bande nuit. */
body.edr-les-runes #approfondir.runes-2026 .rn-livre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr) minmax(0,.42fr);
  column-gap:clamp(2rem,3.4vw,3.4rem);align-items:center}
body.edr-les-runes #approfondir.runes-2026 .rn-livre__txt{padding-left:2.5rem;max-width:30rem}
body.edr-les-runes #approfondir.runes-2026 h2{
  margin-top:1.1rem;font-size:clamp(2.4rem,3.6vw,3.35rem);line-height:1.04}
body.edr-les-runes #approfondir.runes-2026 .rn-livre__nom{
  margin-top:1.7rem;font-size:.7rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--or-action)}
body.edr-les-runes #approfondir.runes-2026 .rn-livre__txt p:not(.eyebrow):not(.rn-livre__nom):not(.boutons){
  margin-top:.9rem;font-size:1.02rem;line-height:1.78;color:#4b4a47}
body.edr-les-runes #approfondir.runes-2026 .boutons{margin-top:1.9rem}
body.edr-les-runes #approfondir.runes-2026 .rn-livre__couverture{
  position:relative;z-index:2;margin:0;grid-column:2;justify-self:start;max-width:24rem;
  margin-top:clamp(-9.5rem,-7.5vw,-5.5rem);transform:rotate(-2.5deg)}
body.edr-les-runes #approfondir.runes-2026 .rn-livre__couverture img{
  display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 34px 60px -30px rgba(38,30,22,.62),0 3px 10px rgba(48,40,30,.16)}

/* ---- Bande 5 : ateliers et formations ----
   La sortie de page : deux zones sur le sable, un filet central, un
   signe propre a chacune — trois traits de longueurs decroissantes,
   rien de plus — et l aquarelle de roche qui revient au bord droit,
   presque effacee. L intensite retombe avant le pied de page. */
body.edr-les-runes .runes-page .entry > #transmettre.runes-2026{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#f7f2e9 0,#f4eee2 100%);
  padding-block:clamp(4rem,6vw,5.5rem) clamp(4.5rem,6.5vw,6rem)}
body.edr-les-runes #transmettre.runes-2026::before{
  content:"";position:absolute;z-index:0;right:-8%;bottom:-24%;width:min(30rem,34%);
  aspect-ratio:900 / 675;pointer-events:none;opacity:.34;
  background-image:url("assets/images/runes-aquarelle-900.webp");
  background-image:image-set(url("assets/images/runes-aquarelle-900.avif") type("image/avif"),url("assets/images/runes-aquarelle-900.webp") type("image/webp"));
  background-size:contain;background-position:right bottom;background-repeat:no-repeat;
  mix-blend-mode:multiply;transform:scaleX(-1)}
/* Le filigrane : Othala, la rune de l heritage et de ce qui se
   transmet, dessinee par la police runique du theme, tres pale, moitie
   sortie du cadre. Elle ferme la page sans rien ajouter au texte. */
body.edr-les-runes #transmettre.runes-2026::after{
  content:"ᛟ";position:absolute;z-index:0;right:-3rem;top:50%;transform:translateY(-50%);
  font-family:var(--runic);font-size:clamp(14rem,22vw,21rem);line-height:.8;
  color:rgba(150,104,58,.055);pointer-events:none;user-select:none}
body.edr-les-runes #transmettre.runes-2026 .bande__in{position:relative;z-index:1}
body.edr-les-runes #transmettre.runes-2026 .rn-suites{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(3rem,6vw,6rem)}
body.edr-les-runes #transmettre.runes-2026 .rn-suite{position:relative;padding-left:2.5rem;padding-top:2.9rem}
/* Un signe dessine par zone : deux traits croises pour l atelier — ce
   qu on vient faire a plusieurs —, une tige pour les formations, ce qui
   pousse a son rythme. Trace en SVG, sans fichier. */
body.edr-les-runes #transmettre.runes-2026 .rn-suite::before{
  content:"";position:absolute;left:2.5rem;top:0;width:2.3rem;height:2.3rem;
  background-repeat:no-repeat;background-position:left center;background-size:contain}
body.edr-les-runes #transmettre.runes-2026 .rn-suite:nth-of-type(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23B8864E' stroke-width='1.1'%3E%3Ccircle cx='16' cy='8.5' r='3.1'/%3E%3Ccircle cx='8.6' cy='21' r='3.1'/%3E%3Ccircle cx='23.4' cy='21' r='3.1'/%3E%3Cpath d='M13.6 10.9 11 18.6M18.4 10.9 21 18.6M11.7 21h8.6' stroke-opacity='.5'/%3E%3C/svg%3E")}
body.edr-les-runes #transmettre.runes-2026 .rn-suite:nth-of-type(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23B8864E' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M16 28V7'/%3E%3Cpath d='M16 20c-4.4 0-7-2.6-7-7 4.4 0 7 2.6 7 7Z'/%3E%3Cpath d='M16 14c0-4.2 2.5-6.6 6.6-6.6C22.6 11.6 20.1 14 16 14Z'/%3E%3C/svg%3E")}
body.edr-les-runes #transmettre.runes-2026 .rn-suite + .rn-suite{
  padding-left:clamp(3rem,6vw,6rem);border-left:1px solid rgba(184,134,78,.3)}
body.edr-les-runes #transmettre.runes-2026 .rn-suite + .rn-suite::before{left:clamp(3rem,6vw,6rem)}
body.edr-les-runes #transmettre.runes-2026 .rn-suite p:not(.eyebrow):not(.lien){
  margin-top:1.1rem;max-width:28rem;font-size:.97rem;line-height:1.75;color:#4b4a47}
body.edr-les-runes #transmettre.runes-2026 .rn-suite .lien{margin-top:1.5rem}
body.edr-les-runes #transmettre.runes-2026 .rn-suite .lien a{
  font-size:.86rem;font-weight:500;letter-spacing:.02em;color:var(--or-action);
  text-decoration:none;border-bottom:1px solid rgba(150,104,58,.42);padding-bottom:.2rem}
body.edr-les-runes #transmettre.runes-2026 .rn-suite .lien a:hover,
body.edr-les-runes #transmettre.runes-2026 .rn-suite .lien a:focus-visible{
  color:var(--nuit);border-bottom-color:var(--nuit)}

/* ============================================================
   BANDEAUX DES PAGES INTERIEURES — un seul gabarit
   ============================================================
   Six pages partagent desormais le meme bandeau : Soins, Guidances,
   Les runes, Le livre, A propos et Contact. Avant cette passe elles se
   repartissaient en deux familles. Mesure sur la page servie, a 1440 :

     page        .interieur  page-head  filet  ecart section  hauteur
     Soins          160         32        0          0         281,6
     Guidances      160         32        0          0         245,6
     Les runes      160        103,7      0          0         185,3
     Le livre       112         40        1 px      20 px      336,3
     A propos       112         40        1 px      20 px      254,6
     Contact        112         40        1 px      20 px      218,6

   Les trois dernieres portaient un bloc <style> dans leur contenu
   WordPress qui resserrait .interieur, .page-head et .entry — et, sur
   A propos, .entry .bande et .entry .bande--phare. Le gabarit ci-dessous
   les reprend par specificite, en attendant que les contenus nettoyes
   soient recolles.

   Le H1 et l accroche etaient deja identiques partout, fonte chargee :
   Cormorant Garamond 77,76 px, max-width 20ch = 741,83 px, accroche
   544 px. Un seul ecart : « Le Petit Guide des Runes » demande 744,6 px
   sur une ligne, soit 2,8 px de plus que la limite. Il passait donc a
   deux lignes et son bandeau montait a 336 px. La largeur de titre est
   portee a 22ch — 816 px — ce qui remet le titre sur une ligne. Aucun
   conflit avec la rune : son bord gauche est a 1059 px du bord du
   bandeau, soit 243 px plus loin.

   La hauteur n est pas imposee a l identique — elle produirait de 118 a
   214 px de vide. Un min-height commun releve seulement les bandeaux
   les plus courts, cale sur la page de reference : H1 sur une ligne et
   accroche sur trois. Les hauteurs restent alors dans une plage de
   l ordre de 35 px, l ecart ne venant que du nombre de lignes de
   l accroche.

   Le min-height ne s applique qu aux bandeaux qui portent une accroche.
   Les runes, dont _edr_accroche est vide, garde donc sa hauteur propre
   au lieu de recevoir 130 px de vide ; le champ saisi, elle rejoint le
   gabarit sans autre intervention.
   ============================================================ */
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .interieur{padding-top:calc(clamp(7rem,12vw,10rem) - var(--hauteur-entete))}
body.edr-guidances .interieur.guidances-page{padding-top:0}
body.edr-les-runes .interieur.runes-page{padding-top:0}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head{border-bottom:0;padding-top:0;padding-bottom:clamp(1.25rem,2.4vw,2rem)}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head h1{max-width:22ch}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head .accroche{max-width:34rem;margin-top:1.5rem}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head:has(.accroche){min-height:clamp(172px,17.1vw,246px)}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .entry{padding-top:0}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos) .entry > .bande:first-of-type{padding-top:clamp(1.5rem,2.6vw,2.25rem)}

/* ---- Jonction avec la premiere bande ----
   Le bandeau et la premiere section se touchent — 0 px — et la
   frontiere se lit par le seul changement de fond, comme sur Les runes.
   La premiere bande prend donc le voile de la page. Sur Soins
   l alternance est decalee d un cran pour ne pas faire se suivre deux
   bandes de meme teinte. */
body.edr-soins-energetiques .entry .bande.soins-refonte#pourquoi,
body.edr-soins-energetiques .entry .bande.soins-refonte#modalites,
body:is(.edr-le-petit-guide-des-runes,.edr-a-propos) .entry > .bande:first-of-type{
  background:var(--acc-voile)}
body.edr-soins-energetiques .entry .bande.soins-refonte#deroule{background:transparent}


/* ============================================================
   LES SEPT RUNES
   ============================================================
   Chaque page nomme sa rune ici, explicitement. Aucune n est plus
   deduite du premier .filigrane du contenu — c est ce qui donnait au
   Livre la Berkana d un filigrane et a Contact la Mannaz d A propos.
   Contact n en fait plus partie depuis la maquette du 27/09/2026 : son
   bandeau porte une Gebo a l aquarelle, peinte par contact-maquette.css.

   Les tracés sont des SVG poses en mask-image : la forme vient du
   dessin, la couleur reste var(--acc), donc chaque page garde sa
   teinte. Meme grammaire pour les sept : traits droits, epaisseur
   unique de 11 pour 100 de haut, extremites coupees perpendiculairement
   au trait, angles a onglet. Chaque viewBox est recadree exactement sur
   l encre, relevee au pixel par balayage du rendu.

   La boite du pseudo-element est donc l encre elle-meme : right pose
   directement le bord droit du dessin, et top:50% le centre. La hauteur
   d encre est commune aux sept — c est elle qui fait la « meme taille
   optique », et non l aire peinte, qui depend du signe.

   Aires peintes relevees a hauteur egale, rapportees a la Berkana :
   Kenaz 47 %, Fehu 78 %, Ansuz 78 %, Gebo 83 %, Berkana 100 %,
   Mannaz 123 %, Dagaz 145 %. D ou trois paliers d opacite : les deux
   signes les plus denses sont retenus a .05, le plus creux monte a
   .075, les quatre autres tiennent la base a .06.
   ============================================================ */
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head,
body.edr-accueil .hero{
  --rune-intro-marge:clamp(30px,3.3vw,48px);
  --rune-intro-cible:clamp(151px,15vw,216px)}
/* Les runes tant que _edr_accroche est vide : le bandeau n a qu un H1 a
   porter, 113,6 px a 1440 contre 246 aux autres, et la rune se met a sa
   mesure — 91 px d encre au lieu de 216. C est l etat degrade, volontaire :
   le champ saisi, la page rejoint le gabarit commun sans autre reglage. */
body.edr-les-runes .page-head:not(:has(.accroche)){--rune-intro-cible:clamp(49px,6.3vw,91px)}
body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head::after,
body.edr-accueil .hero::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:50%;transform:translateY(-50%);margin-top:0;
  height:var(--rune-intro-cible);
  width:calc(var(--rune-intro-cible) * var(--rune-intro-rapport));
  right:var(--rune-intro-marge);
  opacity:var(--rune-intro-opacite)}
@supports ((-webkit-mask-image:url("a")) or (mask-image:url("a"))){
  body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head::after,
  body.edr-accueil .hero::after{
    background-color:var(--acc);
    -webkit-mask-image:var(--rune-intro-dessin);mask-image:var(--rune-intro-dessin);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center}
}
body.edr-soins-energetiques .page-head{--rune-intro-rapport:0.548;--rune-intro-opacite:.06;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.83 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 5.5,5 L 44,27.5 L 5.5,50'/%3E%3Cpath d='M 5.5,50 L 44,72.5 L 5.5,95'/%3E%3C/svg%3E")}
body.edr-guidances .page-head{--rune-intro-rapport:0.5;--rune-intro-opacite:.075;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.17 0.5 49.5 99' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 44,4 L 6,50 L 44,96'/%3E%3C/svg%3E")}
body.edr-les-runes .page-head{--rune-intro-rapport:0.507;--rune-intro-opacite:.06;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.67 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 5.5,42 L 47,6'/%3E%3Cpath d='M 5.5,72 L 47,36'/%3E%3C/svg%3E")}
body.edr-le-petit-guide-des-runes .page-head{--rune-intro-rapport:0.507;--rune-intro-opacite:.06;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.67 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 5.5,6 L 47,42'/%3E%3Cpath d='M 5.5,36 L 47,72'/%3E%3C/svg%3E")}
body.edr-a-propos .page-head{--rune-intro-rapport:0.68;--rune-intro-opacite:.05;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 62.5,0 L 62.5,100'/%3E%3Cpath d='M 5.5,5 L 62.5,52'/%3E%3Cpath d='M 62.5,5 L 5.5,52'/%3E%3C/svg%3E")}

/* ---- Accueil ----
   Le hero garde sa hauteur et sa composition. Seuls la taille optique
   de Dagaz et son niveau de discretion rejoignent les six autres. Le
   hero n etait pas positionne : il le devient, pour ancrer le dessin. */
body.edr-accueil .hero{position:relative;--rune-intro-rapport:0.715;--rune-intro-opacite:.05;
  --rune-intro-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71.5 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 66,0 L 66,100'/%3E%3Cpath d='M 5.5,5 L 66,95'/%3E%3Cpath d='M 66,5 L 5.5,95'/%3E%3C/svg%3E")}
@media(max-width:520px){body:is(.edr-soins-energetiques,.edr-guidances,.edr-les-runes,.edr-le-petit-guide-des-runes,.edr-a-propos,.edr-parcours-runique) .page-head::after,body.edr-accueil .hero::after{display:none}}

/* ---- Accueil : la photographie du bandeau ----
   Les Alpilles au couchant, une pierre gravee posee a droite. La photo
   vient derriere le bandeau existant, rien d autre ne bouge : memes
   textes, memes boutons, meme pluie de runes au-dessus.

   Le texte quitte le centre pour la gauche : au centre, il couvrirait la
   pierre — le seul point que la photo a de plus que les autres fonds.
   La colonne de texte s arrete a 40rem, la pierre commence apres 68 % de
   la largeur : les deux ne se recouvrent jamais a partir de 960 px.

   Lisibilite sans panneau : le voile est la couleur de fond du site,
   posee en degrade horizontal. Il est presque plein a gauche, la ou la
   photo n a de toute facon que du feuillage flou, et il n existe plus la
   ou la pierre et les Alpilles sont nets. Deux autres degrades, verticaux :
   un souffle clair sous l en-tete transparent, et le fondu vers le fond de
   page en bas, qui remplace la coupure nette entre la photo et la section
   suivante. Le sommet, pierre et ciel, reste sans voile.

   Dagaz, la rune du filigrane, s efface : la photo porte deja la sienne.
   La pluie de runes garde sa place mais s eteint vers la droite, pour ne
   pas multiplier les signes autour de la pierre.

   La photo n existe qu en 1672 px de large : au-dela, c est le navigateur
   qui agrandit — assume, la matiere est douce. En dessous de 640 px, un
   second cadrage, la moitie droite, deux fois moins lourd. */
.hero--photo{isolation:isolate;--hero-focal:68% 55%;--hero-voile:250,248,244}
body.edr-accueil .hero--photo::after{display:none}
.hero-fond{position:absolute;inset:0;z-index:-2;margin:0;display:block}
.hero-fond img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focal)}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--hero-voile),.5) 0,rgba(var(--hero-voile),0) 7rem),
    linear-gradient(180deg,rgba(var(--hero-voile),0) 76%,rgb(var(--hero-voile)) 100%),
    linear-gradient(90deg,rgba(var(--hero-voile),.94) 0,rgba(var(--hero-voile),.9) 38%,rgba(var(--hero-voile),.72) 50%,rgba(var(--hero-voile),.3) 62%,rgba(var(--hero-voile),0) 70%)}
/* Les marges automatiques de .wrap le retrecissent sur son contenu quand
   il est enfant de grille : centre, c etait voulu ; a gauche, il lui faut
   sa pleine largeur pour que la colonne parte du bord du gabarit. */
.hero--photo .wrap{width:100%;grid-template-columns:minmax(0,40rem);justify-content:start;text-align:left}
@media(min-width:960px){
  .hero--photo .wrap{grid-template-columns:minmax(0,40rem) 1fr}
  .hero--photo #pluie{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 82%);mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 82%)}
}
.hero--photo .eyebrow,.hero--photo .boutons{justify-content:flex-start}
.hero--photo .lead{margin-inline:0}
/* Tablette : une seule colonne, le texte occupe presque toute la largeur.
   Le voile devient vertical — plein derriere le texte, il se retire vers
   le bas pour laisser la pierre et la roche. Le texte monte en haut du
   bandeau et la boite de l image deborde de 14 % vers le bas : la pierre
   descend sous les boutons au lieu de rester derriere le chapeau. Cadrage
   a 84 % : la pierre entre dans le champ entiere, la moitie gauche de la
   vallee reste hors cadre. */
@media(max-width:959.98px){
  .hero--photo{--hero-focal:84% 50%;align-items:start}
  .hero-fond{bottom:-14%}
  .hero--photo::before{background:
    linear-gradient(180deg,rgba(var(--hero-voile),.92) 0,rgba(var(--hero-voile),.88) 52%,rgba(var(--hero-voile),.35) 70%,rgba(var(--hero-voile),.1) 88%,rgb(var(--hero-voile)) 100%),
    linear-gradient(90deg,rgba(var(--hero-voile),.4) 0,rgba(var(--hero-voile),0) 60%)}
}
/* Telephone : le cadrage mobile est la moitie droite de la photo. Sa
   boite deborde le bandeau vers le bas de 32 % : la pierre descend sous
   les boutons, dans le vide que le bandeau laissait deja, au lieu de
   rester derriere le texte. Le bandeau ne grandit pas pour autant. */
@media(max-width:639.98px){
  .hero--photo{--hero-focal:66% 50%}
  .hero-fond{bottom:-32%}
  .hero--photo::before{background:
    linear-gradient(180deg,rgba(var(--hero-voile),.95) 0,rgba(var(--hero-voile),.9) 60%,rgba(var(--hero-voile),.55) 74%,rgba(var(--hero-voile),.2) 90%,rgb(var(--hero-voile)) 100%)}
}

/* --- Accueil : la bande du lieu, sous l en-tete -----------------
   Quatre informations sur une ligne d ivoire posee sur le haut de la
   photo, juste sous l en-tete transparent (--hauteur-entete), dans la
   largeur du contenu. Le lieu d abord, en serif, avec son repere au
   trait ; puis les modalites, plus legeres, groupees a droite et
   separees par un petit losange cuivre au trait, le signe de l Axe.
   Un filet bas et une ombre a peine posee la detachent de la photo.
   Le bandeau descend d autant : sa marge haute et sa hauteur minimale
   ajoutent --bande-lieu, la hauteur de la bande, si bien que le texte
   du bandeau garde exactement sa place sous elle. Une ligne a partir
   de 1240 px ; en dessous, le lieu centre, puis les trois modalites ;
   au telephone, trois lignes, les deux modes de seance ensemble. */
body.home{--bande-lieu:3rem}
body.home .bande-lieu{position:absolute;top:var(--hauteur-entete);left:0;right:0;z-index:3;height:var(--bande-lieu);
  display:flex;align-items:center;background:rgba(250,248,244,.9);
  border-bottom:1px solid rgba(138,90,52,.1);box-shadow:0 10px 18px -18px rgba(43,32,24,.35)}
body.home .bande-lieu__in{display:flex;flex-wrap:wrap;align-items:center;width:100%;margin-block:0;list-style:none;
  font-family:var(--sans);font-size:.75rem;font-weight:300;line-height:1.4;letter-spacing:.03em;color:var(--txt2)}
body.home .bande-lieu__in li{display:flex;align-items:center;margin:0;white-space:nowrap}
body.home .bande-lieu__in .bande-lieu__lieu{margin-right:auto;font-family:var(--serif);font-size:1.02rem;font-weight:500;letter-spacing:.005em;color:var(--txt)}
body.home .bande-lieu__picto{flex:none;width:.66rem;height:auto;margin-right:.65rem;color:var(--or)}
body.home .bande-lieu__in li:not(.bande-lieu__lieu) + li::before{content:"";flex:none;width:4px;height:4px;margin:0 clamp(.9rem,1.4vw,1.25rem);
  border:1px solid var(--or);transform:rotate(45deg);opacity:.75}
body.home .hero--photo{padding-top:calc(clamp(6.5rem,9vw,8.5rem) + var(--bande-lieu));min-height:calc(min(100vh - 4rem,56rem) + var(--bande-lieu))}
@media(max-width:1239.98px){
  body.home{--bande-lieu:3.9rem}
  body.home .bande-lieu__in{justify-content:center;row-gap:.15rem}
  body.home .bande-lieu__in .bande-lieu__lieu{flex-basis:100%;justify-content:center;margin-right:0}
}
@media(max-width:639.98px){
  body.home{--bande-lieu:5.1rem}
  body.home .bande-lieu__in{padding-inline:.75rem;row-gap:.08rem;font-size:.72rem;letter-spacing:.02em}
  body.home .bande-lieu__in .bande-lieu__lieu{margin-bottom:.12rem;font-size:.94rem;letter-spacing:0}
  body.home .bande-lieu__picto{width:.6rem;margin-right:.5rem}
  body.home .bande-lieu__in li:not(.bande-lieu__lieu) + li::before{width:3px;height:3px;margin-inline:.7rem}
  body.home .bande-lieu__deplacement{flex-basis:100%;justify-content:center}
  body.home .bande-lieu__deplacement::before{display:none}
}
@media(max-width:379.98px){
  body.home .bande-lieu__in{font-size:.7rem;letter-spacing:.01em}
  body.home .bande-lieu__in .bande-lieu__lieu{font-size:.87rem}
  body.home .bande-lieu__in li:not(.bande-lieu__lieu) + li::before{margin-inline:.55rem}
}
/* Moins de 360 px : les deux modes de seance ne tiennent plus cote a
   cote, et le lieu peut passer sur deux lignes. */
@media(max-width:359.98px){
  body.home{--bande-lieu:6.1rem}
  body.home .bande-lieu__in .bande-lieu__lieu{white-space:normal;text-align:center}
  body.home .bande-lieu__soins{flex-basis:100%;justify-content:center}
  body.home .bande-lieu__soins::before{display:none}
}

/* Le lien vers les guidances, sous l experience de tirage. La bande est
   --nuit : var(--or-action), l or sombre des liens d action, y serait
   illisible. On reprend var(--or2), deja employe par .bande--nuit
   .btn--ligne au survol, et la meme discretion que les prolongements
   d #approfondir : pas de soulignement au repos, un au survol. */
body.edr-les-runes #tirage .lien{margin-top:1.4rem}
body.edr-les-runes #tirage .lien a{color:var(--or2);text-decoration:none;font-size:.9rem}
body.edr-les-runes #tirage .lien a:hover,
body.edr-les-runes #tirage .lien a:focus-visible{text-decoration:underline}

/* ============================================================
   PAGE A PROPOS — refonte editoriale
   ------------------------------------------------------------
   Comme sur les soins et les guidances, ces regles ne s activent
   qu en presence du marqueur .a-propos-refonte, pose sur les trois
   sections du nouveau contenu : body.edr-a-propos existe aussi avec
   l ancien balisage, et le CSS deploye avant le collage decalerait
   la page en ligne.

   Le recit devient le sujet principal, les formations le confirment,
   le livre et les ateliers concluent. Trois compositions en deux
   zones, du meme rapport ou presque, et une bande de conclusion
   volontairement plus courte que les deux autres.

   Rien n est invente ici : la grille est celle de .dip, la gouttiere
   celle de --gouttiere, les surtitres, filets, boutons, apparitions
   et le rail de progression sont les composants du site.
   ============================================================ */

/* Le seuil d empilement est celui du theme : .dip ne passe en deux
   colonnes qu a partir de 900 px, et ces trois grilles suivent. */
@media(min-width:900px){
  /* 42 / 58, le rapport deja retenu pour le duo de la page Les runes.
     Sur 1104 px de contenu a 1440, gouttiere de 72 px comprise :
     433,4 px a gauche, 598,6 a droite. */
  body.edr-a-propos .a-propos-refonte .dip--recit{grid-template-columns:42fr 58fr}
  /* La conclusion s efface un peu : 38 / 62. */
  body.edr-a-propos .a-propos-refonte .dip--transmettre{grid-template-columns:38fr 62fr;position:relative}
  /* Le filet vertical de la maquette, pose au milieu de la gouttiere.
     Sa position est calculee, pas reglee : les pistes valent 38 % et
     62 % de la largeur moins la gouttiere, le milieu de celle-ci tombe
     donc a (100% - gouttiere) x 0,38 + gouttiere / 2. */
  body.edr-a-propos .a-propos-refonte .dip--transmettre::before{
    content:"";position:absolute;top:0;bottom:0;width:1px;
    left:calc((100% - var(--gouttiere)) * 0.38 + var(--gouttiere) / 2);
    background:rgba(212,164,106,.22)}
  /* Les formations reprennent le meme rapport que le recit, pour que
     les deux compositions se repondent d une bande a l autre.
     La grille n est pas .dip--titre : son premier enfant est colle a
     7,5rem, et .bande portant overflow:hidden, ce conteneur devient le
     bloc de defilement du colle — le titre etait pousse de 120 px vers
     le bas, la ou la maquette l aligne sur le debut de la frise. */
  body.edr-a-propos #parcours.a-propos-refonte .dip--formations{grid-template-columns:42fr 58fr}
}

/* ---- Bande 1 : le recit ----
   La colonne de gauche porte le surtitre, le titre et l exergue ; la
   droite, les quatre paragraphes. L exergue est un exergue, pas une
   citation monumentale : serif italique a 1,2rem, filet cuivre de
   2 px — celui de .entry .mention —, et il s arrete la. */
body.edr-a-propos .a-propos-refonte .exergue{
  margin-top:var(--air-titre);
  border-left:2px solid var(--or);
  padding:.15rem 0 .15rem 1.4rem;
  font-family:var(--serif);font-style:italic;
  font-size:1.2rem;line-height:1.55;color:var(--nuit)}
/* La longueur de ligne est la mesure de lecture, pas la largeur de la
   colonne. L unite ch vaut ici 11,45 px — le chiffre zero de DM Sans est
   large —, alors que le caractere moyen de ces paragraphes en mesure
   7,77 : 42ch font donc 481 px, soit 62 caracteres reels, au milieu de
   la fourchette 58-65 visee. */
body.edr-a-propos .a-propos-refonte .recit__suite{max-width:43ch}
/* Rythme de lecture : l interligne du corps de texte du site, et un
   espace entre paragraphes porte de 20 a 24 px — la respiration se joue
   entre les blocs, pas dans l interligne. */
body.edr-a-propos .a-propos-refonte .recit__suite p + p{margin-top:1.5rem}
/* Le premier paragraphe de la colonne droite s aligne sur le haut du
   surtitre : sans cela, la marge de .entry p le decalerait seul. */
body.edr-a-propos .a-propos-refonte .recit__suite > :first-child{margin-top:0}

/* ---- Bande 2 : les formations ----
   Le rail est celui du composant partage, deja branche sur
   #parcours .faits plus haut dans cette feuille : rien n est duplique
   ici, seuls l espacement et la mise en colonne des reperes changent.
   L annee passe au-dessus de son intitule, alignee a gauche comme le
   reste de la page ; la frise respire d un cran de plus, et
   --rail-point-y suit automatiquement puisqu il est calcule sur
   --air-etape. */
body.edr-a-propos #parcours.a-propos-refonte .faits > div{
  grid-template-columns:1fr;gap:.4rem}
body.edr-a-propos #parcours.a-propos-refonte .faits .val{text-align:left;line-height:1.35}
/* La marge de sortie du composant datait de l ancienne mise en page, ou
   la bande s arretait juste apres la frise. La bande porte desormais son
   propre rembourrage : 32 px de plus n avaient plus d objet. */
body.edr-a-propos #parcours.a-propos-refonte .faits{margin-bottom:0}
/* Le point se cale sur la ligne de l annee, qui passe au-dessus de la
   valeur : demi-hauteur de sa boite de ligne — 0,68rem de corps a
   l interligne 1,7 du site, soit 0,68rem x 0,85 — apres le rembourrage
   haut de la rangee. Releve avant correction : le point tombait 2,7 px
   trop haut. */
body.edr-a-propos #parcours.a-propos-refonte .faits{
  --rail-point-y:calc(var(--air-etape) / 2 + .68rem * .85)}
body.edr-a-propos #parcours.a-propos-refonte .faits > div:first-child{
  --rail-point-y:calc(.68rem * .85)}
/* Repli sans JavaScript, comme sur l accueil et les formules des
   guidances. Le trait du conteneur ne peut pas connaitre la position du
   dernier point : il retombait sur toute la hauteur de la frise, soit
   446,9 px au lieu des 325,8 qui separent le premier point du dernier —
   il partait 9 px au-dessus du premier et depassait de 112 px sous le
   dernier. Il est neutralise ici, et chaque rangee sauf la derniere
   porte le segment qui la relie a la suivante.
   La geometrie est exacte, sans constante : pour une rangee courante, du
   centre de son point au centre du suivant il y a exactement sa propre
   hauteur, puisque les deux points sont a la meme distance du haut de
   leur rangee. La premiere rangee n a pas de rembourrage haut : son
   point est plus haut d une demi-etape, et son segment d autant plus long.
   En reduction des animations, rails() mesure la geometrie et pose
   --rail-segment a 0px : le rail mesure reprend alors la main. */
html:not(.js-animations-ready) body.edr-a-propos #parcours.a-propos-refonte .faits::before,
html:not(.js-animations-ready) body.edr-a-propos #parcours.a-propos-refonte .faits::after{
  height:var(--rail-span,0px)}
html:not(.js-animations-ready) body.edr-a-propos #parcours.a-propos-refonte .faits > div:not(:last-child)::after{
  content:"";position:absolute;z-index:0;width:2px;border-radius:2px;
  left:calc(var(--rail-x) - var(--rail-retrait) + 1px);transform:translateX(-50%);
  top:var(--rail-point-y);height:var(--rail-segment,100%);
  background:var(--rail-plein)}
html:not(.js-animations-ready) body.edr-a-propos #parcours.a-propos-refonte .faits > div:first-child:not(:last-child)::after{
  height:var(--rail-segment,calc(100% + var(--air-etape) / 2))}

/* Les formations sont des informations : aucun etat au survol, aucun
   deplacement, aucun curseur de lien. La regle est explicite pour que
   rien ne puisse le devenir par heritage. */
body.edr-a-propos #parcours.a-propos-refonte .faits > div{
  cursor:auto;transition:none;transform:none;box-shadow:none;user-select:auto}

/* ---- Bande 3 : transmettre ----
   Bande de conclusion. Elle perd .bande--phare dans le contenu, et son
   rembourrage descend d un cran sous celui des deux autres bandes :
   83,5 px contre 100,8 a 1440. C est ce qui la tient sous la hauteur
   des formations, sans hauteur imposee ni contenu retire. */
body.edr-a-propos .a-propos-refonte#transmettre{
  padding-block:clamp(3rem,5vw,4.75rem)}
/* Deux ensembles compacts, un seul filet cuivre entre eux. */
body.edr-a-propos .a-propos-refonte .volet + .volet{
  margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(212,164,106,.35)}
/* Une seule colonne de visuel pour les deux volets : la couverture
   l occupe, les ateliers s y alignent par un retrait de la meme mesure.
   Les deux textes tombent ainsi sur la meme verticale et lisent a la
   meme longueur de ligne — sans quoi celui des ateliers, sans image,
   s etirait sur toute la colonne.
   La couverture est dimensionnee par sa largeur ; sa hauteur suit son
   rapport 900 x 1231, soit 125 a 144 px entre 900 et 1440. */
body.edr-a-propos .a-propos-refonte .transmettre__volets{
  --volet-visuel:clamp(92px,7.3vw,105px);
  --volet-gouttiere:clamp(1.25rem,2.4vw,1.9rem)}
body.edr-a-propos .a-propos-refonte .volet--livre{
  display:grid;grid-template-columns:var(--volet-visuel) 1fr;
  column-gap:var(--volet-gouttiere);align-items:start}
body.edr-a-propos .a-propos-refonte .volet--livre .livre-couverture{margin:0}
body.edr-a-propos .a-propos-refonte .volet--livre .livre-couverture img{
  width:100%;height:auto;border-radius:.4rem;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.55)}
@media(min-width:900px){
  body.edr-a-propos .a-propos-refonte .volet--ateliers{
    padding-left:calc(var(--volet-visuel) + var(--volet-gouttiere))}
}
/* Sur telephone, la couverture passe au-dessus de son texte : a 390 px
   la colonne qui lui restait a cote ne faisait plus que 32 caracteres.
   Le seuil est celui que le theme utilise deja pour les formulaires, et
   il est pose par mesure : a 620 px le texte garde 67 caracteres a cote
   de l image, en dessous il tombe sous 50. */
@media(max-width:619.98px){
  /* Conclusion empilee : resserrer uniquement les espaces, sans toucher
     au corps du texte ni aux compositions tablette et bureau. */
  body.edr-a-propos .a-propos-refonte#transmettre{padding-block:1.25rem}
  body.edr-a-propos .a-propos-refonte#transmettre .dip--transmettre{row-gap:1rem}
  body.edr-a-propos .a-propos-refonte#transmettre .volet + .volet{
    margin-top:.75rem;padding-top:.75rem}
  body.edr-a-propos .a-propos-refonte#transmettre .volet .boutons{margin-top:.5rem}
  body.edr-a-propos .a-propos-refonte .volet--livre{grid-template-columns:1fr}
  /* La couverture garde sa mesure : sans largeur, elle prenait les
     100 % de la colonne, soit 304 px de large et 416 de haut a 390. */
  body.edr-a-propos .a-propos-refonte .volet--livre .livre-couverture{
    width:120px;margin-bottom:.5rem}
}
/* Les textes de la conclusion sont plus courts que le recit : on les
   arrete a la meme mesure de lecture pour ne pas etirer une ligne sur
   toute la colonne. */
body.edr-a-propos .a-propos-refonte .volet p:not(.eyebrow):not(.boutons){
  max-width:44ch;margin-top:.85rem;line-height:1.7}
body.edr-a-propos .a-propos-refonte .volet .boutons{margin-top:1.25rem}
/* Sur fond nuit, le bouton a filet reprend le contraste de la bande. */
body.edr-a-propos .a-propos-refonte .volet .btn--ligne{
  color:var(--acc-clair);border-color:rgba(212,164,106,.45);background:transparent}
body.edr-a-propos .a-propos-refonte .volet .btn--ligne:hover,
body.edr-a-propos .a-propos-refonte .volet .btn--ligne:focus-visible{
  color:#fff;border-color:var(--or2)}
body.edr-a-propos .a-propos-refonte .volet a:not(.btn){
  color:var(--or2);border-bottom-color:rgba(212,164,106,.4)}
body.edr-a-propos .a-propos-refonte .volet a:not(.btn):hover{border-bottom-color:var(--or2)}

/* L Ansuz de la conclusion.
   ------------------------------------------------------------
   Le .filigrane du theme est un glyphe de 18 a 30rem pose en
   debordement volontaire : sur cette bande il sortait par le haut de
   34,6 px et n avait plus rien d une signature discrete. Il reprend
   ici le systeme des sept runes — trace SVG pose en masque, epaisseur
   de 11 pour 100 de haut, boite recadree sur l encre — a la taille
   d une rune de bandeau, et se range dans la colonne de gauche,
   entierement contenu dans la section.
   Le glyphe reste dans le contenu et sert de repli. La gravure au
   clip-path et la derive lente de filigranes() sont conservees : la
   derive vaut au plus 1,2rem, soit 19,2 px, et le degagement bas est
   toujours superieur. */
body.edr-a-propos .a-propos-refonte#transmettre .filigrane{
  --rune-bande-marge:clamp(1.25rem,5vw,3.5rem);
  /* 238 px de haut recouvraient la derniere ligne de l introduction de
     17,5 px a 1440 : la rune descend a 205, ce qui degage 24 px sous le
     texte et laisse 72 px jusqu au bas de la bande. */
  --rune-bande-cible:clamp(150px,14.2vw,205px)}
@supports ((-webkit-mask-image:url("a")) or (mask-image:url("a"))){
  body.edr-a-propos .a-propos-refonte#transmettre .filigrane{
    /* aligne sur le bord gauche du contenu, quelle que soit la largeur */
    left:max(var(--rune-bande-marge),calc(50% - 38rem + var(--rune-bande-marge)));
    right:auto;top:auto;bottom:clamp(48px,5vw,72px);
    height:var(--rune-bande-cible);
    width:calc(var(--rune-bande-cible) * 0.507);
    font-size:0;line-height:0;
    background-color:currentColor;
    -webkit-mask-image:var(--rune-bande-dessin);mask-image:var(--rune-bande-dessin);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
    --rune-bande-dessin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.67 100' fill='none' stroke='black' stroke-width='11' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='6'%3E%3Cpath d='M 5.5,0 L 5.5,100'/%3E%3Cpath d='M 5.5,6 L 47,42'/%3E%3Cpath d='M 5.5,36 L 47,72'/%3E%3C/svg%3E")}
}


.hero--photo .lead{color:#514a43;font-weight:400}
.hero--photo .btn--ligne{background:rgba(250,248,244,.88)}
.eyebrow{font-size:.75rem;letter-spacing:.24em}
.livre-preuve{font-size:.75rem;letter-spacing:.16em}
.temoignage-carte cite{font-size:.78rem;letter-spacing:.12em}
.livre-editorial .livre-couverture{width:100%;max-width:20rem;margin-inline:auto}
/* La couverture est un contenu essentiel : son affichage ne depend pas
   de l observateur des apparitions. La rotation et le survol restent actifs. */
.livre-editorial .livre-visuel.rv{opacity:1;transform:none}
.livre-editorial .livre-visuel{padding:1.5rem 1.5rem 1.5rem 0}
.livre-editorial .livre-cartouche{backdrop-filter:none;box-shadow:var(--ombre-carte)}
@media(min-width:700px) and (max-width:899px){
  body.home #soins .duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home #soins .pan{padding:1.8rem;justify-content:flex-start}
  body.home #soins .pan .lien{margin-top:auto}
  .reassurance-editoriale{grid-template-columns:.85fr 1.15fr;gap:1.75rem}
  .preuve-pratique{padding:1.8rem}
  .preuve-pratique > strong{font-size:7rem}
  .temoignages-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .temoignage-carte:last-child{grid-column:1 / -1;min-height:0}
  .livre-editorial{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:1.25rem}
  .livre-editorial .livre-cartouche{margin:0;padding:1.6rem}
  .livre-editorial .livre-visuel{padding:1rem 0}
  .livre-editorial .livre-couverture{max-width:15rem}
  .livre-editorial .livre-cartouche h2{font-size:2.6rem}
  .acces-reservation{justify-items:start}
}
@media(max-width:699px){
  .livre-editorial .livre-couverture{max-width:13rem}
  .livre-editorial .livre-visuel{padding:1rem 0 2rem}
  .livre-editorial .livre-cartouche{margin-top:0;padding:1.6rem}
  .livre-editorial .livre-preuve{text-align:center;margin-left:0}
  .bande--nuit .filigrane{opacity:.065}
}


/* ============================================================
   ACCUEIL — LES REPERES ET LES TROIS PORTES (1.9.39)
   ------------------------------------------------------------
   Apres le bandeau, deux sections remplacent « Deux portes » et
   l ancien bloc de reperes : une bande de credibilite compacte
   (avis, anciennete, livre), puis trois acces cote a cote, chacun
   avec sa matiere, et une sortie basse en vague vers l Axe Runique.
   Textures : les memes grains SVG que l Axe et la page A propos,
   ranges ici dans deux variables pour ne pas les recopier.
   ============================================================ */
body:is(.home,.edr-parcours-runique){
  --edr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --edr-nuee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52  0 0 0 0 .58  0 0 0 0 .78  1.4 0 0 0 -.58'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --edr-papier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .24  .9 0 0 0 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* --- Section 2 : les reperes ----------------------------------
   Une bande de credibilite, 260 px environ a 1440 : trois preuves
   reliees par deux axes verticaux (le meme signe qu a la sortie des
   portes), sur un sable a peine plus soutenu que le fond. Le haut
   est legerement incline et fondu dans le bas du bandeau ; Jera en
   filigrane a gauche, un brin dessine et la couverture du livre en
   petit a droite. Le compteur des avis se lance a l entree dans
   l ecran (compteurs, main.js) ; sans script, le nombre est deja la. */
body.home .preuves{position:relative;z-index:1;margin-top:-1.25rem;padding-block:2.6rem 1.75rem;background:var(--bg2);overflow:hidden;
  clip-path:polygon(0 1.35rem,100% 0,100% 100%,0 100%)}
body.home .preuves::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--edr-papier);background-size:700px 700px;opacity:.09;mix-blend-mode:multiply}
body.home .preuves::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0,rgba(250,248,244,0) 4.5rem),
    radial-gradient(45% 80% at 0% 50%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(40% 70% at 100% 100%,rgba(184,134,78,.1),transparent 70%)}
body.home .preuves__filigrane{left:-.02em;right:auto;top:-.12em;font-size:clamp(14rem,19vw,18rem);color:var(--or);opacity:.07;
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 95%);mask-image:linear-gradient(90deg,#000 20%,transparent 95%)}
body.home .preuves__botanique{position:absolute;right:.5%;top:-.4rem;width:7.5rem;height:auto;color:var(--or);opacity:.42;transform:rotate(22deg);z-index:1;pointer-events:none}
body.home .preuves__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1fr) auto minmax(0,1.3fr);column-gap:clamp(2rem,3.6vw,3.25rem);align-items:center}
body.home .preuve{position:relative}
body.home .preuve--avis{padding-left:clamp(1rem,3vw,3rem)}
body.home .preuve__chiffre{font-family:var(--serif);font-weight:300;font-size:clamp(4.2rem,6vw,5.8rem);line-height:.86;letter-spacing:-.02em;color:var(--or-action);font-variant-numeric:lining-nums}
body.home .preuve__chiffre--annee{font-size:clamp(3.4rem,4.6vw,4.4rem);line-height:.88;margin-top:.35rem}
body.home .preuve__nombre,body.home .preuve__annee{font-weight:300;display:inline-block;min-width:2ch}
/* 2015 : apparition typographique, l annee se resserre en entrant */
body.home .preuve__annee{letter-spacing:.08em;transition:letter-spacing 1.2s var(--ease) .1s}
body.home .preuve--depuis.rv.in .preuve__annee{letter-spacing:-.02em}
body.home .preuve__etoiles{margin-top:.6rem;font-size:.66rem;letter-spacing:.2em;color:var(--or);opacity:.72;line-height:1}
body.home .preuve__sur{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or-texte)}
body.home .preuve__libelle{margin-top:.8rem;font-size:.74rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--nuit)}
body.home .preuve__libelle--serif{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.12;letter-spacing:-.01em;text-transform:none;margin-top:.65rem;max-width:15rem}
body.home .preuve__titre{font-family:var(--serif);font-weight:400;font-size:1.45rem;white-space:nowrap;line-height:1.15;letter-spacing:-.01em;color:var(--nuit);margin-top:.7rem}
body.home .preuve__note{margin-top:.5rem;font-family:var(--serif);font-size:1.06rem;line-height:1.4;color:var(--txt2);max-width:16.5rem}
body.home .preuve--auteur{padding-right:6.5rem}
body.home .preuve__livre{position:absolute;right:0;top:50%;width:4.9rem;aspect-ratio:900/1231;transform:translateY(-50%) rotate(-8deg);border-radius:2px;
  background:image-set(url('assets/images/petit-guide-runes-480.avif') type('image/avif'),url('assets/images/petit-guide-runes-480.webp') type('image/webp')) center/cover no-repeat;
  box-shadow:-8px 12px 22px -10px rgba(27,30,43,.45)}
body.home .preuve__livre::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,.18),transparent 45%)}
/* les deux axes : une ligne fine et le losange, comme a la sortie des portes */
body.home .preuve__sep{position:relative;display:grid;place-items:center;width:1.4rem;height:8.6rem;color:var(--or)}
body.home .preuve__sep::before,body.home .preuve__sep::after{content:"";position:absolute;left:50%;width:1px;height:calc(50% - 1rem);background:var(--acc-bord)}
body.home .preuve__sep::before{top:0}
body.home .preuve__sep::after{bottom:0}
body.home .preuve__sep-signe{font-family:var(--runic);font-size:1.5rem;line-height:1}

/* --- Section 3 : les trois portes -----------------------------
   Un chapeau en capitales, trois panneaux pleine largeur qui se
   touchent, chacun avec sa lumiere, sa matiere et sa rune, puis
   la sortie : une vague ivoire qui mord sur les panneaux et sur
   le haut de l Axe, un petit axe vertical au centre. */
body.home .portes{position:relative;z-index:2;padding-block:clamp(1.9rem,2.8vw,2.5rem) 0;background:var(--bg);overflow:visible}
body.home .portes__tete{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:clamp(1.5rem,2.4vw,2.1rem)}
body.home .portes__titre{font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--nuit);line-height:1.4;display:flex;align-items:center;gap:1rem}
body.home .portes__titre::before{content:"";flex:none;width:2.2rem;height:1px;background:var(--or)}
body.home .portes__contre{font-size:.7rem;font-weight:500;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;color:var(--txt2);display:flex;align-items:center;gap:1rem;white-space:nowrap}
body.home .portes__contre::after{content:"";flex:none;width:2.2rem;height:1px;background:var(--acc-bord)}
body.home .portes__grille{display:grid;grid-template-columns:1.05fr 1fr 1fr}
body.home .porte{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(34rem,44vw,39rem);display:flex;flex-direction:column;
  padding:clamp(2rem,3vw,2.8rem) clamp(1.8rem,3vw,2.8rem) 6.75rem}
body.home .porte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--edr-grain);background-size:160px 160px;opacity:.09;mix-blend-mode:soft-light}
body.home .porte__lumiere{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.8;transition:opacity .7s var(--ease)}
body.home .porte__matiere{position:absolute;z-index:-3;pointer-events:none;transition:transform 1.1s var(--ease)}
body.home .porte__rune{position:absolute;right:.35rem;top:.05em;z-index:-2;font-family:var(--runic);font-size:clamp(7.5rem,10vw,10.5rem);line-height:1;color:var(--or2);opacity:.14;pointer-events:none;transition:opacity .6s var(--ease),transform .9s var(--ease)}
/* le corps et le mot restent dans le flux : les couches decoratives sont toutes en z negatif, sous eux */
body.home .porte__num{display:block;font-size:.7rem;font-weight:500;letter-spacing:.3em;color:rgba(255,255,255,.5)}
body.home .porte__titre{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.4vw,2.45rem);line-height:1.08;letter-spacing:-.01em;margin-top:1.35rem;color:#fff}
body.home .porte--guidances .porte__titre{font-size:clamp(2rem,2.55vw,2.6rem)}
body.home .porte--guidances .porte__rune{font-size:clamp(8.5rem,11.5vw,12rem);right:.2rem}
body.home .porte__sous{font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or2);margin-top:.9rem}
body.home .porte__filet{display:block;width:3.4rem;height:1px;margin-top:1rem;background:rgba(212,164,106,.6);transform:scaleX(.35);transform-origin:left;transition:transform .55s var(--ease),background-color .4s}
body.home .porte__txt{margin-top:1.25rem;font-size:.97rem;line-height:1.62;color:rgba(255,255,255,.76);max-width:23rem}
body.home .porte__cta{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.7rem;font-size:.88rem;font-weight:500;color:#fff;text-decoration:none;position:static}
body.home .porte__cta::after{content:"";position:absolute;inset:0;z-index:1}
body.home .porte__rond{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.45);font-size:1rem;line-height:1;
  transition:transform .45s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
body.home .porte__mot{margin-top:auto;padding-top:2rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.35;color:rgba(255,255,255,.8);max-width:16rem}
/* survol : un filet qui s allonge, la rune qui s eclaire, la matiere qui monte d un rien, la fleche qui avance */
body.home .porte:hover .porte__lumiere,body.home .porte:focus-within .porte__lumiere{opacity:1}
body.home .porte:hover .porte__filet,body.home .porte:focus-within .porte__filet{transform:scaleX(1);background-color:var(--or2)}
body.home .porte:hover .porte__rune,body.home .porte:focus-within .porte__rune{opacity:.22;transform:translateY(-.2rem)}
body.home .porte:hover .porte__matiere,body.home .porte:focus-within .porte__matiere{transform:translateY(-.35rem)}
body.home .porte:hover .porte__rond,body.home .porte:focus-within .porte__rond{transform:translateX(4px);background-color:var(--or2);border-color:var(--or2);color:var(--nuit)}
body.home .porte:focus-within{outline:2px solid var(--or2);outline-offset:-3px}
body.home .porte__cta:focus-visible{outline:none}

/* Equilibre des trois colonnes, au bureau seulement : meme corps de titre
   pour les trois (la guidance avait un cran de plus, ce qui decalait les
   sous-titres), et un texte d au moins quatre lignes, pour que les trois
   liens partent a la meme hauteur. */
@media(min-width:1024px){
  body.home .porte--guidances .porte__titre{font-size:clamp(1.9rem,2.4vw,2.45rem)}
  body.home .porte__txt{min-height:calc(4 * 1.62em)}
}

/* porte 1, guidances : nuit froide, la crete des Alpilles au bas, une lueur chaude a gauche */
body.home .porte--guidances{background:#151a26}
body.home .porte--guidances::before,body.home .porte--runes::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:var(--edr-nuee);background-size:900px 900px;opacity:.5;mix-blend-mode:soft-light}
body.home .porte--guidances .porte__matiere{left:0;right:0;bottom:0;height:58%;
  background:image-set(url('assets/images/porte-crete.avif') type('image/avif'),url('assets/images/porte-crete.webp') type('image/webp')) center 40%/cover no-repeat;
  filter:saturate(.75) brightness(.78);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 62%,#000 100%)}
body.home .porte--guidances .porte__matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#151a26 0%,rgba(21,26,38,.55) 45%,rgba(21,26,38,.35) 100%);mix-blend-mode:multiply}
body.home .porte--guidances .porte__lumiere{background:
  radial-gradient(55% 45% at 18% 100%,rgba(184,134,78,.3),transparent 70%),
  radial-gradient(75% 60% at 90% 0%,rgba(84,104,150,.4),transparent 70%),
  linear-gradient(180deg,rgba(21,26,38,0) 55%,rgba(13,16,24,.35) 100%)}

/* porte 2, soins : sable lumineux, la roche a lichen en lumiere rasante au bas, Berkana bien presente */
body.home .porte--soins{background:#EEE6D8}
body.home .porte--soins::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:var(--edr-papier);background-size:700px 700px;opacity:.13;mix-blend-mode:multiply}
body.home .porte--soins .porte__matiere{left:0;right:0;bottom:0;height:56%;
  background:image-set(url('assets/images/porte-roche.avif') type('image/avif'),url('assets/images/porte-roche.webp') type('image/webp')) center 55%/cover no-repeat;
  filter:saturate(.68) brightness(1.16);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 58%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 58%,#000 100%)}
body.home .porte--soins .porte__matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,230,216,.97) 0%,rgba(238,230,216,.66) 45%,rgba(238,230,216,.42) 100%)}
body.home .porte--soins .porte__lumiere{background:
  radial-gradient(60% 55% at 12% 0%,rgba(255,255,255,.75),transparent 70%),
  radial-gradient(50% 45% at 100% 62%,rgba(184,134,78,.16),transparent 70%)}
body.home .porte--soins .porte__rune{color:var(--or);opacity:.14;font-size:clamp(8.5rem,11.5vw,12rem);right:.1rem;top:-.02em}
body.home .porte--soins:hover .porte__rune,body.home .porte--soins:focus-within .porte__rune{opacity:.2}
body.home .porte--soins .porte__num{color:var(--txt3)}
body.home .porte--soins .porte__titre{color:var(--nuit)}
body.home .porte--soins .porte__sous{color:var(--or-texte)}
body.home .porte--soins .porte__filet{background:rgba(150,104,58,.55)}
body.home .porte--soins:hover .porte__filet,body.home .porte--soins:focus-within .porte__filet{background-color:var(--or-action)}
body.home .porte--soins .porte__txt{color:#514A43}
body.home .porte--soins .porte__cta{color:var(--nuit)}
body.home .porte--soins .porte__rond{border-color:rgba(46,42,38,.4)}
body.home .porte--soins:hover .porte__rond,body.home .porte--soins:focus-within .porte__rond{background-color:var(--or-action);border-color:var(--or-action);color:#fff}
body.home .porte--soins .porte__mot{color:var(--or-texte);text-shadow:0 0 10px rgba(238,230,216,.95),0 0 22px rgba(238,230,216,.85)}

/* porte 3, transmission : nuit chaude, une branche d olivier en haut, le livre pose au coin, le debut du futhark */
body.home .porte--runes{background:#1d1917}
body.home .porte--runes .porte__matiere{right:-1.5rem;top:-1.5rem;width:12rem;height:15rem;opacity:.38;filter:brightness(1.15);
  background:image-set(url('assets/images/porte-olivier.avif') type('image/avif'),url('assets/images/porte-olivier.webp') type('image/webp')) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(70% 70% at 85% 20%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 85% 20%,#000 30%,transparent 100%)}
body.home .porte--runes .porte__rune{top:9.5rem;right:.6rem;font-size:clamp(7.5rem,10vw,10rem)}
body.home .porte--runes .porte__livre{position:absolute;z-index:-2;right:-3rem;bottom:-4.4rem;width:10.5rem;aspect-ratio:900/1231;border-radius:3px;
  background:image-set(url('assets/images/petit-guide-runes-480.avif') type('image/avif'),url('assets/images/petit-guide-runes-480.webp') type('image/webp')) center/cover no-repeat;
  transform:rotate(-12deg);opacity:.72;box-shadow:-20px 26px 44px -16px rgba(0,0,0,.75);transition:transform 1.1s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.25) 100%)}
body.home .porte--runes:hover .porte__livre,body.home .porte--runes:focus-within .porte__livre{transform:rotate(-11deg) translateY(-.35rem)}
body.home .porte--runes .porte__futhark{position:absolute;z-index:-1;left:clamp(1.8rem,3vw,2.8rem);bottom:11.2rem;font-family:var(--runic);font-size:1.05rem;line-height:1;letter-spacing:.55em;color:var(--or2);opacity:.3;white-space:nowrap;pointer-events:none}
body.home .porte--runes .porte__lumiere{background:
  radial-gradient(55% 50% at 100% 100%,rgba(184,134,78,.42),transparent 70%),
  radial-gradient(45% 40% at 0% 40%,rgba(96,72,52,.3),transparent 70%),
  linear-gradient(180deg,rgba(29,25,23,0) 50%,rgba(16,13,12,.45) 100%)}

/* la sortie : vague ivoire sur les panneaux, deux capitales et un axe qui se trace */
body.home .portes__sortie{position:relative;z-index:3;margin-top:-1.5rem;background:var(--bg);padding:1.2rem 0 1.7rem}
body.home .portes__vague{position:absolute;left:0;right:0;bottom:100%;width:100%;height:4.5rem;display:block;fill:var(--bg);pointer-events:none}
body.home .portes__sortie::after{content:"";position:absolute;left:0;right:0;top:100%;height:3.2rem;background:var(--bg);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 40 C 1180 90, 900 30, 640 62 C 420 88, 200 44, 0 70 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 40 C 1180 90, 900 30, 640 62 C 420 88, 200 44, 0 70 Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;pointer-events:none}
body.home .portes__sortie-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(1.5rem,3vw,3rem)}
body.home .portes__sortie-txt{font-size:.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--txt3);line-height:1.9;max-width:24rem}
body.home .portes__sortie-txt--a{justify-self:end;text-align:right}
body.home .portes__sortie-txt--b{justify-self:start}
body.home .portes__axe{position:relative;display:grid;place-items:center;width:2.6rem;height:4.8rem;color:var(--or)}
body.home .portes__axe::before,body.home .portes__axe::after{content:"";position:absolute;left:50%;width:1px;height:calc(50% - 1rem);transition:transform .9s var(--ease) .15s}
body.home .portes__axe::before{top:0;background:linear-gradient(180deg,rgba(184,134,78,.05),var(--or));transform-origin:top}
body.home .portes__axe::after{bottom:0;background:linear-gradient(0deg,rgba(184,134,78,.05),var(--or));transform-origin:bottom}
:where(.js-animations-ready) body.home .portes__axe.rv-pending:not(.in)::before,:where(.js-animations-ready) body.home .portes__axe.rv-pending:not(.in)::after{transform:scaleY(0)}
body.home .portes__axe-signe{font-family:var(--runic);font-size:1.9rem;line-height:1;color:var(--or)}

/* --- Portables (moins de 1280) : la couverture laisse la place au titre,
   le livre de la troisieme porte se replie un peu plus dans son coin. */
@media(max-width:1279px){
  body.home .preuve__titre{white-space:normal;font-size:1.35rem}
  body.home .preuve--auteur{padding-right:6rem}
  body.home .porte--runes .porte__livre{width:9.5rem;right:-3.4rem;bottom:-5rem}
}

/* --- Ecrans moyens (moins de 1024) : la bande garde ses trois reperes,
   plus serres et sans la couverture ; les portes passent a une porte
   dominante en pleine largeur, matiere a droite, puis deux acces plus
   compacts cote a cote. ---------------------------------------------- */
@media(max-width:1023px){
  body.home .preuves{padding-block:2.5rem 1.7rem}
  body.home .preuves__in{grid-template-columns:minmax(0,.95fr) auto minmax(0,1.05fr) auto minmax(0,1.15fr);column-gap:clamp(1.25rem,2.6vw,2rem)}
  body.home .preuve--avis{padding-left:0}
  body.home .preuve--auteur{padding-right:0}
  body.home .preuve__livre,body.home .preuves__botanique{display:none}
  body.home .preuve__chiffre{font-size:clamp(3.6rem,7vw,4.6rem)}
  body.home .preuve__chiffre--annee{font-size:clamp(2.9rem,5.6vw,3.6rem)}
  body.home .preuve__titre{font-size:1.3rem;white-space:normal}
  body.home .preuve__libelle--serif{font-size:1.3rem}
  body.home .preuve__note{font-size:1.02rem;max-width:14rem}
  body.home .preuve__sep{height:7.5rem}
  body.home .preuves__filigrane{font-size:12rem;opacity:.06}

  body.home .portes__tete{flex-wrap:wrap;gap:.6rem 2rem}
  body.home .portes__contre{white-space:normal}
  body.home .portes__grille{grid-template-columns:1fr 1fr}
  body.home .porte{min-height:0;padding:clamp(1.8rem,3.4vw,2.4rem) clamp(1.5rem,3vw,2.2rem) 2rem}
  body.home .porte:nth-last-child(-n+2){padding-bottom:5.75rem}
  body.home .porte__txt{font-size:.94rem;max-width:22rem}
  body.home .porte__mot{padding-top:1.6rem;font-size:1.08rem}
  /* la porte dominante : pleine largeur, la crete occupe la moitie droite */
  body.home .porte--guidances{grid-column:1 / -1;min-height:22rem;padding-right:46%}
  body.home .porte--guidances .porte__titre{font-size:clamp(2.1rem,4vw,2.6rem)}
  body.home .porte--guidances .porte__matiere{left:auto;right:0;top:0;bottom:0;height:auto;width:58%;background-position:center 45%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%)}
  body.home .porte--guidances .porte__matiere::after{background:linear-gradient(90deg,#151a26 0%,rgba(21,26,38,.55) 40%,rgba(21,26,38,.3) 100%)}
  body.home .porte--guidances .porte__lumiere{background:
    radial-gradient(45% 60% at 100% 100%,rgba(184,134,78,.26),transparent 70%),
    radial-gradient(60% 60% at 0% 0%,rgba(84,104,150,.3),transparent 70%)}
  body.home .porte--guidances .porte__rune{right:auto;left:44%;top:-.05em;font-size:9rem;opacity:.1}
  body.home .porte--guidances .porte__mot{max-width:20rem}
  /* les deux acces compacts */
  body.home .porte--soins .porte__titre,body.home .porte--runes .porte__titre{font-size:clamp(1.7rem,3.2vw,2.1rem)}
  body.home .porte--soins .porte__rune{font-size:9rem}
  body.home .porte--runes .porte__rune{font-size:7.5rem;top:7.5rem}
  body.home .porte--runes .porte__matiere{width:9rem;height:12rem;opacity:.32}
  body.home .porte--runes .porte__livre{width:8.5rem;right:-2.6rem;bottom:-3.6rem}
  body.home .porte--runes .porte__futhark{display:none}
  body.home .porte--soins .porte__matiere{height:50%}
  body.home .portes__sortie-txt{font-size:.64rem;letter-spacing:.22em}
}

/* --- Telephone (moins de 640) : trois reperes empiles en lignes
   compactes ; trois bandes editoriales sans paragraphe, la phrase
   italique fait le texte ; sortie sur une colonne. ------------------ */
@media(max-width:639px){
  body.home .preuves{margin-top:-1rem;padding-block:2.05rem 1.2rem;clip-path:polygon(0 .9rem,100% 0,100% 100%,0 100%)}
  body.home .preuves__in{grid-template-columns:1fr;row-gap:0}
  body.home .preuve__sep{display:none}
  body.home .preuve{display:grid;grid-template-columns:6.2rem minmax(0,1fr);column-gap:1.1rem;align-items:center;padding-block:.72rem}
  body.home .preuve + .preuve{border-top:1px solid var(--acc-bord)}
  body.home .preuve__chiffre{grid-column:1;grid-row:1 / span 3;font-size:3.1rem;line-height:.9;align-self:center}
  body.home .preuve__chiffre--annee{font-size:2.5rem;margin-top:0}
  body.home .preuve__etoiles{grid-column:2;grid-row:1;margin-top:0;font-size:.6rem;letter-spacing:.18em}
  body.home .preuve__libelle{grid-column:2;margin-top:.3rem;font-size:.68rem;letter-spacing:.26em}
  body.home .preuve__libelle--serif{font-size:1.2rem;margin-top:.15rem;letter-spacing:-.01em;max-width:none}
  body.home .preuve__sur{grid-column:1;grid-row:1;font-size:.6rem;letter-spacing:.24em;align-self:center}
  body.home .preuve--depuis .preuve__sur{display:none}
  body.home .preuve__titre{grid-column:2;font-size:1.2rem;margin-top:0;white-space:normal}
  body.home .preuve__note{grid-column:2;margin-top:.2rem;font-size:.97rem;line-height:1.36;max-width:none}
  body.home .preuve--auteur .preuve__sur{grid-column:1;grid-row:1 / span 2;font-size:.62rem;line-height:1.6;max-width:5.5rem}
  body.home .preuve--auteur .preuve__titre{grid-row:1}
  body.home .preuve--auteur .preuve__note{grid-row:2}
  body.home .preuves__filigrane{font-size:11rem;opacity:.05;left:auto;right:-.1em;top:auto;bottom:-.15em;
    -webkit-mask-image:linear-gradient(180deg,transparent 5%,#000 60%);mask-image:linear-gradient(180deg,transparent 5%,#000 60%)}

  body.home .portes{padding-top:1.75rem}
  body.home .portes__tete{margin-bottom:1.2rem}
  body.home .portes__titre{font-size:.7rem;letter-spacing:.24em;gap:.8rem}
  body.home .portes__titre::before{width:1.5rem}
  body.home .portes__contre{display:none}
  body.home .portes__grille{grid-template-columns:1fr}
  body.home .porte,body.home .porte--guidances{grid-column:auto;min-height:0;padding:1.6rem 1.25rem 1.7rem 1.25rem}
  body.home .porte:nth-last-child(-n+2){padding-bottom:1.7rem}
  body.home .porte:last-child{padding-bottom:4.75rem}
  body.home .porte__txt{display:none}
  body.home .porte__num{font-size:.64rem}
  body.home .porte__titre,body.home .porte--guidances .porte__titre,body.home .porte--soins .porte__titre,body.home .porte--runes .porte__titre{font-size:1.75rem;margin-top:.9rem;max-width:72%}
  body.home .porte__sous{font-size:.62rem;letter-spacing:.24em;margin-top:.7rem}
  body.home .porte__filet{margin-top:.8rem;width:2.6rem}
  body.home .porte__mot{margin-top:1rem;padding-top:0;font-size:1.05rem;max-width:72%}
  body.home .porte__cta{margin-top:1.2rem;font-size:.84rem}
  body.home .porte__rond{width:2.2rem;height:2.2rem}
  /* la matiere sur la droite, fondue vers le texte */
  body.home .porte--guidances .porte__matiere,body.home .porte--soins .porte__matiere{left:auto;right:0;top:0;bottom:0;height:auto;width:62%;background-position:center 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 55%,#000 100%)}
  body.home .porte--guidances .porte__matiere{padding-right:0;background-position:center 40%}
  body.home .porte--guidances{padding-right:1.25rem}
  body.home .porte--guidances .porte__matiere::after{background:linear-gradient(90deg,#151a26 0%,rgba(21,26,38,.6) 45%,rgba(21,26,38,.35) 100%)}
  body.home .porte--soins .porte__matiere::after{background:linear-gradient(90deg,rgba(238,230,216,.96) 0%,rgba(238,230,216,.55) 50%,rgba(238,230,216,.3) 100%)}
  body.home .porte--guidances .porte__rune{left:auto;right:.3rem;top:-.05em;font-size:6.5rem;opacity:.12}
  body.home .porte--soins .porte__rune{font-size:7rem;right:.2rem}
  body.home .porte--runes .porte__rune{font-size:6rem;top:auto;bottom:4.5rem;right:.4rem}
  body.home .porte--runes .porte__matiere{width:7.5rem;height:9.5rem;opacity:.3}
  body.home .porte--runes .porte__livre{width:6.2rem;right:-1.6rem;bottom:-2rem;transform:rotate(-12deg);opacity:.6}
  body.home .porte--runes:hover .porte__livre{transform:rotate(-12deg)}
  body.home .portes__sortie{margin-top:-1rem;padding:.9rem 0 1.4rem}
  body.home .portes__vague{height:3rem}
  body.home .portes__sortie::after{height:2.2rem}
  body.home .portes__sortie-in{grid-template-columns:1fr;row-gap:.35rem;justify-items:center;text-align:center}
  body.home .portes__sortie-txt,body.home .portes__sortie-txt--a,body.home .portes__sortie-txt--b{justify-self:center;text-align:center;font-size:.62rem;letter-spacing:.2em;max-width:none}
  body.home .portes__axe{height:3.6rem}
  body.home .portes__axe::before,body.home .portes__axe::after{height:calc(50% - .85rem)}
  body.home .portes__axe-signe{font-size:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  body.home .porte__matiere,body.home .porte__livre,body.home .porte__rune,body.home .porte__filet,body.home .preuve__annee{transition:none}
  body.home .porte:hover .porte__matiere,body.home .porte:hover .porte__rune{transform:none}
  body.home .porte--runes:hover .porte__livre{transform:rotate(-11deg)}
}

/* ============================================================
   ACCUEIL — LE PARCOURS RUNIQUE (.home-parcours)
   ------------------------------------------------------------
   Reproduction de la maquette de reference, calee a 1440 : les
   proportions internes viennent de la maquette (mesuree a 1774 px
   et ramenee a l echelle .81), pas de la grille des autres sections.
   Colonnes 49 / 11 / 40 du conteneur : la masse editoriale a gauche,
   un vide, puis les trois reperes qui commencent a x = 830 comme
   dans la reference. Fond : une masse sable diffuse qui traverse
   en diagonale, un arc immense dont on ne voit qu une part, Raido
   en filigrane, le brin sur la masse, la montagne dans l angle.
   Tout en HTML, CSS et SVG inline ; aucune image.
   ============================================================ */
.home-parcours{background:var(--bg2);overflow:hidden;padding-block:4rem 4rem}
.home-parcours::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--edr-papier);background-size:700px 700px;opacity:.05;mix-blend-mode:multiply}
.home-parcours::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 80% at 0% 25%,rgba(255,255,255,.55),transparent 65%)}
/* la masse sable : diffuse, sans bord, du bas-centre vers la droite */
.home-parcours .home-parcours__masse{position:absolute;z-index:0;pointer-events:none;inset:0;
  background:linear-gradient(197deg,rgba(214,190,152,0) 36%,rgba(214,190,152,.26) 55%,rgba(205,178,138,.48) 88%),radial-gradient(60% 70% at 88% 100%,rgba(205,178,138,.45),transparent 70%)}
/* l arc : un cercle de 52 rem dont seul l arc haut-droit reste visible */
.home-parcours .home-parcours__arc{position:absolute;z-index:1;pointer-events:none;left:47%;top:-24%;width:52rem;height:52rem;border-radius:50%;border:1px solid rgba(150,104,58,.26);
  -webkit-mask-image:linear-gradient(165deg,#000 30%,rgba(0,0,0,.6) 55%,transparent 75%);mask-image:linear-gradient(165deg,#000 30%,rgba(0,0,0,.6) 55%,transparent 75%)}
/* Raido, en filigrane dans l angle haut droit */
.home-parcours .home-parcours__rune{right:3.5%;top:.02em;font-size:clamp(10rem,14vw,13.5rem);color:var(--or);opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.home-parcours .home-parcours__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,51fr) minmax(0,9fr) minmax(0,40fr);column-gap:0;align-items:start}
/* gauche — mesures de la reference */
.home-parcours .home-parcours__content{grid-column:1}
.home-parcours .home-parcours__eyebrow{margin-bottom:1.25rem;color:var(--or-texte)}
.home-parcours .home-parcours__title{margin:0;font-size:clamp(3rem,5.15vw,4.625rem);line-height:1;letter-spacing:0;white-space:nowrap}
.home-parcours .home-parcours__trait{display:block;width:5.75rem;height:1px;margin:.9rem 0 1.4rem;background:linear-gradient(90deg,var(--or),rgba(184,134,78,.25))}
.home-parcours .home-parcours__lead{font-family:var(--serif);font-size:clamp(1.45rem,1.9vw,1.7rem);line-height:1.2;color:var(--nuit);max-width:none}
.home-parcours .home-parcours__description{margin-top:.65rem;font-size:1.1rem;line-height:1.55;color:var(--txt2);max-width:33rem}
.home-parcours .home-parcours__cta{margin-top:2rem}
.home-parcours .home-parcours__cta .btn{min-height:3.75rem;padding:1.1rem 2.9rem;font-size:.94rem;letter-spacing:.08em;gap:1.5rem}
.home-parcours .home-parcours__signature{margin:1.35rem 0 0;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--or);max-width:none}
/* droite — les reperes commencent a la hauteur de l accroche */
.home-parcours .home-parcours__visual{grid-column:3;padding-top:9.1rem;margin-right:calc(-1 * clamp(1.25rem,5vw,3.5rem))}
.home-parcours .home-parcours__meta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center}
.home-parcours .home-parcours__meta-item{padding:0 .25rem}
.home-parcours .home-parcours__meta-item + .home-parcours__meta-item{border-left:1px solid rgba(150,104,58,.32)}
.home-parcours .home-parcours__icone{position:relative;display:block;width:4.3rem;height:4.3rem;margin:0 auto 1.25rem}
.home-parcours .home-parcours__meta-big{display:block;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;letter-spacing:-.01em;color:var(--nuit);font-variant-numeric:lining-nums;white-space:nowrap}
.home-parcours .home-parcours__meta-label{display:block;margin-top:.85rem;font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.4;color:var(--or-texte);white-space:nowrap}
.home-parcours .home-parcours__meta-label::after{content:"";display:block;width:2.5rem;height:1px;margin:1.1rem auto 0;background:rgba(150,104,58,.7)}
.home-parcours .home-parcours__quote{position:relative;display:block;margin:2.75rem 0 0;width:100%;text-align:center;white-space:nowrap;padding:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.8rem;line-height:1.3;color:var(--or-action)}
.home-parcours .home-parcours__quote::before,.home-parcours .home-parcours__quote::after{position:relative;display:inline-block;font-family:var(--serif);font-style:normal;font-size:1.5em;line-height:0;color:var(--or);opacity:.55;vertical-align:-.1em}
.home-parcours .home-parcours__quote::before{content:"\201C";margin-right:.45em;top:-.15em}
.home-parcours .home-parcours__quote::after{content:"\201D";margin-left:.45em;top:.2em}
/* tablette (moins de 1024) : une colonne, le bloc des reperes sous le bouton en pleine largeur,
   la masse et la montagne restent, l arc et le brin se font plus discrets */
@media(max-width:1023px){
  .home-parcours{padding-block:3.25rem 3rem}
  .home-parcours .home-parcours__inner{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .home-parcours .home-parcours__content,.home-parcours .home-parcours__visual{grid-column:1}
  .home-parcours .home-parcours__visual{padding-top:0;margin-right:0}
  .home-parcours .home-parcours__title{font-size:clamp(2.5rem,6vw,3.6rem)}
  .home-parcours .home-parcours__meta{max-width:36rem}
  .home-parcours .home-parcours__quote{text-align:left;font-size:1.6rem}
  .home-parcours .home-parcours__masse{background:linear-gradient(200deg,rgba(214,190,152,0) 46%,rgba(214,190,152,.24) 64%,rgba(205,178,138,.42) 92%)}
  .home-parcours .home-parcours__arc{left:auto;right:-16rem;top:-18rem;width:40rem;height:40rem}
  .home-parcours .home-parcours__rune{font-size:10rem;right:2%;top:auto;bottom:38%;opacity:.055}
}
/* telephone (moins de 640) : surtitre, titre, accroche, texte, bouton, trois reperes compacts, citation ;
   deux decors seulement, la masse et Raido */
@media(max-width:639px){
  .home-parcours{padding-block:2.75rem 2.5rem}
  .home-parcours .home-parcours__inner{row-gap:2rem}
  .home-parcours .home-parcours__title{font-size:2.35rem;white-space:normal}
  .home-parcours .home-parcours__trait{margin:.8rem 0 1.1rem}
  .home-parcours .home-parcours__lead{font-size:1.3rem}
  .home-parcours .home-parcours__description{font-size:.97rem;line-height:1.6}
  .home-parcours .home-parcours__cta{margin-top:1.5rem}
  .home-parcours .home-parcours__cta .btn{min-height:3.25rem;padding:.95rem 2rem;gap:1rem}
  .home-parcours .home-parcours__signature{margin-top:1rem;font-size:.58rem;letter-spacing:.16em}
  .home-parcours .home-parcours__meta{max-width:none}
  .home-parcours .home-parcours__meta-item{padding:0 .2rem}
  .home-parcours .home-parcours__icone{width:3.4rem;height:3.4rem;margin-bottom:.9rem}
  .home-parcours .home-parcours__meta-big{font-size:1.5rem}
  .home-parcours .home-parcours__meta-label{margin-top:.6rem;font-size:.56rem;letter-spacing:.16em;white-space:normal}
  .home-parcours .home-parcours__meta-label::after{margin-top:.8rem;width:1.8rem}
  .home-parcours .home-parcours__quote{margin-top:1.75rem;font-size:1.3rem;white-space:normal;text-align:left}
  .home-parcours .home-parcours__arc{display:none}
  .home-parcours .home-parcours__rune{font-size:8rem;right:-.05em;top:auto;bottom:-.1em;opacity:.05;
    -webkit-mask-image:linear-gradient(180deg,transparent 5%,#000 60%);mask-image:linear-gradient(180deg,transparent 5%,#000 60%)}
}

/* ============================================================
   ACCUEIL — L AXE ET LE PARCOURS, HABILLAGE (1.9.55)
   ------------------------------------------------------------
   Pack accueil-assets-runiques (voir son README), puis pack final
   accueil-axe-parcours-final pour le fond 4K de l Axe, la brume de
   transition et la vague : rune de l Axe, losange de liaison,
   texture, vagues, rune, branche et pictogrammes du Parcours. La
   composition des deux sections ne change pas ; seuls leurs decors
   et leur limite commune changent. Aucune couleur nouvelle : les
   teintes sont celles des fichiers du pack.
   ============================================================ */

/* L Axe : le panorama 4K du pack final (3840 x 1348), en cover. Un voile
   bleu nuit leger garde la lecture sans eteindre le paysage ; la lumiere
   chaude du premier anneau reste. Le bas de la bande porte la brume puis
   la vague : --axe-jonction est la hauteur de la vague (360 pour 3840). */
/* La geometrie de la couture, partagee par l Axe et le Parcours.
   --fil-page : la position du fil dans la page, calculee comme la colonne
   du contenu (largeur maxi 76rem, marges --bande-pad) a --fil-r de sa
   largeur. --jonc-s : la vague est agrandie pour que sa crete — a 63,36 %
   de la largeur du dessin et 25,63 % de sa hauteur — tombe exactement sous
   le fil sans decouvrir les bords ; --axe-vague est sa hauteur. --guide-r :
   le rayon de la courbe-guide qui prolonge le fil dans le Parcours. */
body.home{--bande-pad:clamp(1.25rem,5vw,3.5rem);--fil-r:.485;
  --fil-page:calc((100% - min(100%,76rem)) / 2 + var(--bande-pad) + var(--fil-r) * (min(100%,76rem) - 2 * var(--bande-pad)));
  --jonc-s:1.42;--axe-vague:calc(100vw * 360 / 3840 * var(--jonc-s));
  --guide-rx:clamp(15rem,26vw,24rem);--guide-ry:clamp(9rem,14vw,13rem);
  /* le Parcours remonte sous l ivoire de la vague, jamais au-dessus de son
     creux ; --guide-axe est la part de la courbe qui reste dans l Axe, du
     noeud au haut du Parcours */
  --parcours-remonte:calc(var(--axe-vague) * .3);
  --guide-axe:calc(var(--axe-vague) * .7437 - var(--parcours-remonte))}
body.home .axe-runique{--axe-jonction:calc(100vw * 360 / 3840);
  /* la couture : le fil part de la ligne a --fil-x, se trace une fois le
     trait de l Axe arrive au bout (main.js, couture) ; la phrase suit la
     ligne a --trans-m et s inscrit sur le fil, qui s interrompt a
     --fil-gap d elle ; la crete de la vague est a --trans-pb sous la phrase */
  --fil-x:48.5%;--trans-m:clamp(4.5rem,7.4vw,6.75rem);--fil-gap:.85rem;
  --trans-pb:clamp(2.6rem,4vw,3.6rem);
  background:#0b1018 url('assets/images/accueil-axe-runique-bg-4k.webp') center/cover no-repeat;
  padding-bottom:calc(var(--axe-vague) * .7437 + var(--trans-pb))}
/* La hauteur de la section commande le « cover » a toutes les largeurs :
   seule une tranche centrale du panorama est visible (912 px au plus sous
   900 px, 1 944 sous 1 280, 2 305 a 1 920). Des recadrages centres, de
   pleine hauteur et plus larges que cette tranche, rendent la meme image
   a la meme echelle pour 101 a 230 Ko au lieu de 617
   (bin/preparer-images-variantes.py). Le 4K reste servi au-dela de 1 920. */
@media(max-width:899.98px){body.home .axe-runique{background-image:url('assets/images/accueil-axe-runique-bg-1100.webp')}}
@media(min-width:900px) and (max-width:1279.98px){body.home .axe-runique{background-image:url('assets/images/accueil-axe-runique-bg-2200.webp')}}
@media(min-width:1280px) and (max-width:1919.98px){body.home .axe-runique{background-image:url('assets/images/accueil-axe-runique-bg-2600.webp')}}
body.home .axe-runique::before{background:
  radial-gradient(16% 26% at 12% 58%,rgba(214,168,108,.16),rgba(214,168,108,.04) 50%,transparent 80%),
  linear-gradient(180deg,rgba(9,13,22,.66) 0%,rgba(9,13,22,.54) 36%,rgba(9,13,22,.5) 58%,rgba(9,13,22,.44) 72%,rgba(9,13,22,.24) 86%,rgba(9,13,22,.1) 100%)}
/* le grain du theme reste, plus bas : il ne doit pas salir la photographie */
body.home .axe-runique::after{opacity:.16}
body.home .axe-runique .axe-lueur{display:none}
/* la rune de l Axe, en fond, a 6 % : le glyphe reste dans le contenu en repli */
body.home .axe-runique .filigrane{--axe-rune:clamp(9rem,15vw,14rem);font-size:0;line-height:0;color:transparent;
  width:var(--axe-rune);height:calc(var(--axe-rune) * 2);top:-2.5rem;right:clamp(1rem,5vw,5rem);bottom:auto;
  background:url('assets/images/accueil-axe-runique-rune.svg') center/contain no-repeat;opacity:.06;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
/* le rail : il part de la ligne de l Axe, entre la deuxieme et la troisieme
   etape (a 48,5 %, la ou la maquette le pose), descend dans l intervalle
   des deux textes jusqu au-dessus de la phrase ; il reprend dessous et va
   jusqu au point haut de la vague (.axe-transition::after). Meme lumiere
   que le trait de l Axe. Un point de soudure marque son depart sur la
   ligne. main.js le trace au defilement, une fois le trait de l Axe
   arrive au bout : --c-fil au-dessus de la phrase, --c-fil2 dessous, de
   0 a 1 ; sans script, ou sans animation, il est entier. */
body.home .axe-runique .axe-fil{--fil-k:var(--c-fil,1);
  position:absolute;z-index:1;left:var(--fil-x);top:calc(var(--axe-y) - 4px);width:14px;pointer-events:none;
  bottom:calc(-1 * (var(--trans-m) - var(--fil-gap)));transform:translateX(-50%);
  background:radial-gradient(circle at 50% 4px,rgba(244,218,176,calc(var(--fil-k) * .95)) 0 2.3px,rgba(214,168,108,calc(var(--fil-k) * .32)) 3.2px,rgba(214,168,108,0) 6px) no-repeat}
body.home .axe-runique .axe-fil::before{content:"";position:absolute;left:50%;top:4px;bottom:0;width:2px;transform-origin:top;
  background:linear-gradient(180deg,rgba(220,176,118,.74),rgba(246,222,182,1));
  box-shadow:0 0 4px rgba(214,168,108,.5),0 0 10px rgba(214,168,108,.18);
  transform:translateX(-50%) scaleY(var(--fil-k))}
/* le trait de l Axe suit la meme sequence : main.js en lisse lui-meme la
   course, une transition CSS la mettrait en retard sur la descente */
body.home .axe-runique .axe-ligne::after{transition:none}
/* la phrase de transition, inscrite sur le fil. Deux niveaux : une
   amorce plus petite et plus aeree, en cuivre clair, puis l idee, plus
   grande, en ivoire. Une ombre serree tient le contraste sur le paysage ;
   derriere le texte seulement, un halo doux et localise. Le retrait a
   droite la recentre sur le rail. */
body.home .axe-runique .axe-transition{position:relative;margin:var(--trans-m) 0 0;padding-right:calc((50% - var(--fil-x)) * 2);max-width:none;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-shadow:0 1px 2px rgba(9,13,22,.65),0 0 14px rgba(9,13,22,.55)}
body.home .axe-runique .axe-transition span{display:block}
body.home .axe-runique .axe-transition span:first-child{font-size:clamp(1.04rem,1.2vw,1.12rem);line-height:1.5;letter-spacing:.03em;color:#F0D19F}
body.home .axe-runique .axe-transition span:last-child{margin-top:.3rem;font-size:clamp(1.4rem,1.95vw,1.72rem);line-height:1.3;color:#FBF7EF}
/* le halo se ravive quand la lumiere du fil passe derriere la phrase (--c-trans) */
body.home .axe-runique .axe-transition::before{content:"";position:absolute;z-index:-1;left:var(--fil-x);top:52%;width:min(36rem,86%);height:190%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:calc(.6 + .4 * var(--c-trans,1));
  background:radial-gradient(closest-side,rgba(240,214,170,.14),rgba(240,214,170,.05) 58%,rgba(240,214,170,0))}
/* la descente reprend sous la phrase et va jusqu au point haut de la vague,
   ou l attend le losange (.axe-jonction::before) */
body.home .axe-runique .axe-transition::after{content:"";position:absolute;left:var(--fil-x);top:calc(100% + var(--fil-gap));
  bottom:calc(-1 * var(--trans-pb) + 9.5px);width:2px;transform:translateX(-50%) scaleY(var(--c-fil2,1));transform-origin:top;pointer-events:none;
  background:linear-gradient(180deg,rgba(236,206,160,.88),rgba(246,222,182,1));
  box-shadow:0 0 4px rgba(214,168,108,.5),0 0 10px rgba(214,168,108,.18)}
/* la brume du pack : transparente en haut, ivoire en bas, au pied de l Axe
   et sous la vague : la nuit s eclaircit jusqu a l ivoire sans voiler la
   phrase. Sa hauteur suit la largeur (720 pour 3840), avec un minimum pour
   les petits ecrans, ou elle est recadree au centre plutot qu etiree. */
body.home .axe-runique .axe-brume{position:absolute;z-index:1;left:0;right:0;bottom:0;pointer-events:none;
  height:max(9rem,calc(100vw * 720 / 3840));
  background:url('assets/images/accueil-axe-parcours-transition-texture.png') center bottom/auto 100% no-repeat;opacity:.62}
/* le halo : une lumiere chaude resserree autour du rail et de la phrase,
   qui monte de la vague, avec un foyer plus dense au pied du texte ; leur
   moitie basse reste cachee sous l ivoire. Il s avive quand le fil
   atteint le noeud (--c-noeud). */
body.home .axe-runique .axe-brume::after{content:"";position:absolute;left:31%;right:34%;bottom:0;height:max(9rem,calc(var(--axe-vague) * 3));
  opacity:calc(.72 + .28 * var(--c-noeud,1));
  background:
    radial-gradient(22% 18% at 50% 75.2%,rgba(248,228,192,.6),rgba(248,228,192,0) 72%),
    radial-gradient(50% 50% at 50% 70%,rgba(240,214,170,.62),rgba(240,214,170,.22) 42%,rgba(240,214,170,0) 70%)}
/* la jonction : la vague claire du pack et son filet cuivre, agrandie et
   decalee pour que son point haut tombe sous le fil — la vague nait du
   point de passage. Son bas est l ivoire meme du Parcours. */
body.home .axe-runique .axe-jonction{position:absolute;z-index:1;bottom:-1px;right:auto;pointer-events:none;
  left:calc(var(--fil-page) - var(--jonc-s) * 63.36%);width:calc(var(--jonc-s) * 100%);aspect-ratio:3840/360;
  background:url('assets/images/accueil-axe-parcours-jonction.svg?v=1.9.55') center bottom/100% 100% no-repeat}
/* le noeud : le losange, pose exactement au point haut de la vague. Il
   attend le fil, en simple contour ; il s allume quand le fil l atteint
   (--c-noeud, de 0 a 1, pose par main.js ; allume sans script) */
body.home .axe-runique .axe-jonction::before{content:"";position:absolute;z-index:2;left:63.36%;top:25.63%;width:12px;height:12px;
  --k:var(--c-noeud,1);
  border:1.5px solid rgba(200,145,79,calc(.72 + .28 * var(--k)));background:rgba(248,231,201,calc(.3 + .7 * var(--k)));
  box-shadow:0 0 0 3px rgba(212,164,106,calc(.2 * var(--k))),0 0 12px rgba(240,200,140,calc(.8 * var(--k))),0 0 28px rgba(214,168,108,calc(.4 * var(--k)));
  transform:translate(-50%,-50%) rotate(45deg) scale(calc(.88 + .12 * var(--k)))}
/* la courbe-guide : sous le noeud, le fil continue dans l ivoire en trace
   cuivre fine — il part a la verticale, comme la descente — puis s ouvre
   vers la droite et vient se poser au-dessus des reperes du Parcours, ou il
   s efface. C est le quart inferieur gauche d une ellipse dont le point le
   plus a gauche est le noeud. L Axe en dessine le debut, jusqu au haut du
   Parcours ; le Parcours reprend la suite sur la meme ellipse
   (.home-parcours__arc) : jamais deux traits superposes. */
body.home .axe-runique .axe-jonction::after,
body.home .home-parcours .home-parcours__arc{content:"";position:absolute;z-index:1;display:block;pointer-events:none;box-sizing:border-box;
  width:calc(var(--guide-rx) * 2);height:calc(var(--guide-ry) * 2);right:auto;bottom:auto;border-radius:50%;
  border:1px solid rgba(176,128,74,.5);transform:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 50%),linear-gradient(90deg,#000 28%,transparent 42%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 50%,#000 50%),linear-gradient(90deg,#000 28%,transparent 42%);
  mask-composite:intersect}
/* - 1px : le Parcours commence 1px au-dessus de noeud + --guide-axe ; sans
   lui, les deux moities de la courbe se recouvrent a la limite (un point
   plus sombre). Les deux moities sont en border-box : la meme ellipse. */
body.home .axe-runique .axe-jonction::after{left:63.36%;top:calc(25.63% - var(--guide-ry));
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 50%,#000 calc(50% + var(--guide-axe) - 1px),transparent calc(50% + var(--guide-axe) - 1px)),linear-gradient(90deg,#000 28%,transparent 42%);
  mask-image:linear-gradient(180deg,transparent 50%,#000 50%,#000 calc(50% + var(--guide-axe) - 1px),transparent calc(50% + var(--guide-axe) - 1px)),linear-gradient(90deg,#000 28%,transparent 42%)}
/* + 1px : la vague est posee 1px sous le bas de l Axe (pas de liseré) */
body.home .home-parcours .home-parcours__arc{left:var(--fil-page);top:calc(-1 * var(--guide-axe) - var(--guide-ry) + 1px)}
/* la lumiere de la courbe : quand le losange s allume, main.js fait glisser
   une lumiere le long de la courbe, du noeud vers les reperes, puis elle
   s eteint ; la courbe redevient la trace fine d avant. C est un second
   trace, plus chaud, sur la meme ellipse, dont un masque conique ne laisse
   voir qu un segment : la tete (--c-ga) precedee d un front doux (--c-gf),
   une traine qui s efface (--c-gm, --c-gq) — des angles poses par main.js.
   Dans l Axe, .axe-guide double .axe-jonction::after (meme boite) ; dans
   le Parcours, c est le ::before de l arc, qui en herite les masques.
   Sans script : rien. */
body.home .axe-runique .axe-guide,
body.home .home-parcours .home-parcours__arc::before{content:"";position:absolute;display:block;pointer-events:none;border-radius:50%;
  border:1.5px solid rgba(208,150,80,.95);box-shadow:0 0 6px rgba(230,182,112,.55),inset 0 0 6px rgba(230,182,112,.55);opacity:var(--c-gt,0)}
body.home .axe-runique .axe-guide{z-index:1;left:63.36%;top:calc(25.63% - var(--guide-ry));
  width:calc(var(--guide-rx) * 2);height:calc(var(--guide-ry) * 2);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 50%,#000 calc(50% + var(--guide-axe) - 1px),transparent calc(50% + var(--guide-axe) - 1px)),linear-gradient(90deg,#000 28%,transparent 42%),
    conic-gradient(transparent 0deg,transparent var(--c-gf,270deg),#000 var(--c-ga,270deg),rgba(0,0,0,.3) var(--c-gm,270deg),transparent var(--c-gq,270deg));
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 50%,#000 50%,#000 calc(50% + var(--guide-axe) - 1px),transparent calc(50% + var(--guide-axe) - 1px)),linear-gradient(90deg,#000 28%,transparent 42%),
    conic-gradient(transparent 0deg,transparent var(--c-gf,270deg),#000 var(--c-ga,270deg),rgba(0,0,0,.3) var(--c-gm,270deg),transparent var(--c-gq,270deg));
  mask-composite:intersect}
body.home .home-parcours .home-parcours__arc::before{inset:-1px;
  -webkit-mask-image:conic-gradient(transparent 0deg,transparent var(--c-gf,270deg),#000 var(--c-ga,270deg),rgba(0,0,0,.3) var(--c-gm,270deg),transparent var(--c-gq,270deg));
  mask-image:conic-gradient(transparent 0deg,transparent var(--c-gf,270deg),#000 var(--c-ga,270deg),rgba(0,0,0,.3) var(--c-gm,270deg),transparent var(--c-gq,270deg))}
/* le halo qui accompagne la tete : pose dans la page par main.js (il
   passe d une section a l autre), allonge dans le sens de la courbe */
body.home .couture-lueur{position:absolute;z-index:1;left:0;top:0;width:6rem;height:2.4rem;margin:-1.2rem 0 0 -3rem;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(236,188,116,.5),rgba(236,188,116,.16) 55%,rgba(236,188,116,0))}
@media(max-width:899.98px){
  body.home .axe-runique::before{background:
    radial-gradient(22% 14% at 50% 44%,rgba(214,168,108,.16),rgba(214,168,108,.04) 50%,transparent 80%),
    linear-gradient(180deg,rgba(9,13,22,.68) 0%,rgba(9,13,22,.56) 40%,rgba(9,13,22,.44) 72%,rgba(9,13,22,.14) 100%)}
  /* l axe est vertical et centre : le fil le prolonge sous sa butee */
  body.home{--fil-r:.5}
  body.home .axe-runique{--fil-x:50%;--trans-m:4.25rem;--trans-pb:2.4rem}
  /* sous le noeud, la trace descend droit et s efface dans l ivoire : une
     courbe traverserait ici le texte du Parcours */
  body.home .axe-runique .axe-jonction::after,
  body.home .home-parcours .home-parcours__arc{width:1px;border:0;border-radius:0;transform:translateX(-50%);-webkit-mask-image:none;mask-image:none}
  body.home .axe-runique .axe-jonction::after{top:25.63%;height:calc(var(--guide-axe) - 1px);background:linear-gradient(180deg,rgba(176,128,74,.6),rgba(176,128,74,.45))}
  /* elle s arrete au-dessus du surtitre, qui passe ici sous le fil */
  body.home .home-parcours .home-parcours__arc{top:0;height:calc(var(--parcours-pt) - .4rem);background:linear-gradient(180deg,rgba(176,128,74,.45),rgba(176,128,74,0))}
  /* la lumiere descend la trace : un segment clair, sa tete a --c-gh1 dans
     l Axe, a --c-gh2 dans le Parcours (poses par main.js) */
  body.home .axe-runique .axe-guide,
  body.home .home-parcours .home-parcours__arc::before{width:2px;border:0;border-radius:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
  body.home .axe-runique .axe-guide{top:25.63%;height:calc(var(--guide-axe) - 1px);transform:translateX(-50%);
    background:linear-gradient(180deg,rgba(208,150,80,0) calc(var(--c-gh1,-9rem) - 2.75rem),rgba(208,150,80,.95) var(--c-gh1,-9rem),rgba(208,150,80,0) calc(var(--c-gh1,-9rem) + 4px))}
  body.home .home-parcours .home-parcours__arc::before{inset:0 auto 0 -.5px;
    background:linear-gradient(180deg,rgba(208,150,80,0) calc(var(--c-gh2,-9rem) - 2.75rem),rgba(208,150,80,.95) var(--c-gh2,-9rem),rgba(208,150,80,0) calc(var(--c-gh2,-9rem) + 4px))}
  /* le rail prolonge la butee, sans point de depart (la butee en tient
     lieu) ; il se trace quand le trait de l axe vertical est arrive en bas */
  body.home .axe-runique .axe-fil{top:100%;background:none}
  body.home .axe-runique .axe-fil::before{top:0}
  body.home .axe-runique .axe-brume::after{left:26%;right:26%}
}
@media(max-width:699.98px){
  /* l axe longe la gauche : le fil le prolonge sans s interrompre, longe la
     phrase, rangee a la place d une cinquieme etape, et descend jusqu au
     point haut de la vague ; la vague est agrandie davantage pour que sa
     crete vienne jusqu a lui. Sous le noeud, la trace rejoint le trait du
     surtitre du Parcours. */
  body.home{--fil-page:calc((100% - min(100%,76rem)) / 2 + var(--bande-pad) + .45rem);--jonc-s:2.6}
  body.home .axe-runique{--fil-x:.45rem;--trans-m:2.5rem;--fil-gap:0rem;--trans-pb:2.25rem}
  body.home .axe-runique .axe-transition{padding:0 0 0 2.2rem;text-align:left}
  body.home .axe-runique .axe-transition::after{top:0}
  body.home .home-parcours .home-parcours__arc{height:calc(var(--parcours-pt) + .6rem);background:rgba(176,128,74,.45)}
  body.home .axe-runique .axe-transition::before{left:calc(50% + 1.1rem);width:calc(100% - 2.2rem)}

  body.home .axe-runique .axe-brume::after{left:-20%;right:44%}
  body.home .axe-runique::before{background:
    radial-gradient(36% 12% at 6% 40%,rgba(214,168,108,.16),rgba(214,168,108,.04) 50%,transparent 80%),
    linear-gradient(180deg,rgba(9,13,22,.7) 0%,rgba(9,13,22,.58) 40%,rgba(9,13,22,.46) 72%,rgba(9,13,22,.16) 100%)}
  body.home .axe-runique .filigrane{--axe-rune:7.5rem;right:.5rem;opacity:.045}
}

/* Le Parcours : l ivoire du pack, sa texture tres legere a la place du
   grain papier ; la lumiere haute se decale pour ne pas marquer la
   limite avec la vague. */
body.home .home-parcours{background:linear-gradient(180deg,#F7F1E6 0,#F7F1E6 var(--parcours-remonte),rgba(247,241,230,0) calc(var(--parcours-remonte) + 5rem)),#F7F1E6 url('assets/images/accueil-parcours-runique-texture.svg') center/cover no-repeat}
body.home .home-parcours::before{display:none}
/* le filet que le theme pose entre deux bandes claires tombait ici malgre
   l exception prevue apres une bande nuit (sa specificite l emporte) : la
   vague fait la limite, le filet part */
body.home .bande.axe-runique + .bande.home-parcours{border-top:0}
/* il remonte vers la vague : moins de vide entre l ivoire et le surtitre */
body.home .home-parcours{--parcours-pt:clamp(1rem,1.6vw,1.5rem);padding-top:var(--parcours-pt);margin-top:calc(-1 * var(--parcours-remonte))}
body.home .home-parcours::after{background:radial-gradient(50% 60% at 8% 58%,rgba(255,255,255,.45),transparent 70%)}
body.home .home-parcours .home-parcours__masse{opacity:.55}
/* les vagues, en bas a droite, fondues vers la gauche */
body.home .home-parcours .home-parcours__vagues{position:absolute;z-index:0;pointer-events:none;right:0;bottom:0;width:72%;aspect-ratio:1920/820;
  background:url('assets/images/accueil-parcours-runique-vagues.svg') center bottom/100% auto no-repeat;transform:translateY(16%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
/* la rune du Parcours, en haut a droite, a 6 % */
body.home .home-parcours .home-parcours__rune{--parcours-rune:clamp(6rem,9vw,8.5rem);font-size:0;line-height:0;color:transparent;
  width:var(--parcours-rune);height:calc(var(--parcours-rune) * 2);top:clamp(1.5rem,3vw,2.5rem);right:clamp(2rem,6vw,6rem);bottom:auto;left:auto;
  background:url('assets/images/accueil-parcours-runique-rune.svg') center/contain no-repeat;opacity:.06;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
/* la branche : une seule, legere, au pied des colonnes */
body.home .home-parcours .home-parcours__branche{position:absolute;z-index:1;pointer-events:none;left:45.5%;bottom:-.75rem;width:6.5rem;aspect-ratio:520/960;
  background:url('assets/images/accueil-parcours-runique-branche.svg') center/contain no-repeat;opacity:.3}
/* les pictogrammes du pack : le cercle du fichier prend la place de l ancien, meme diametre */
body.home .home-parcours .home-parcours__icone img{position:absolute;left:50%;top:50%;width:calc(100% * 256 / 188);max-width:none;height:auto;transform:translate(-50%,-50%)}
/* les reperes s eclairent un instant quand la lumiere de la courbe arrive
   (main.js pose .est-eclaire sur l un puis l autre) et tant qu on les
   survole : le pictogramme se hausse, un halo tres doux se pose derriere
   lui, le chiffre prend un peu de lumiere, le filet cuivre s allonge.
   --eclat va de 0 a 1 ; au repos, rien ne change. */
body.home .home-parcours .home-parcours__meta-item{--eclat:0;position:relative}
body.home .home-parcours .home-parcours__meta-item.est-eclaire{--eclat:1}
@media(hover:hover){
  body.home .home-parcours .home-parcours__meta-item:hover{--eclat:1}
}
body.home .home-parcours .home-parcours__meta-item::before{content:"";position:absolute;z-index:-1;left:50%;top:2.15rem;width:11rem;height:11rem;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);opacity:var(--eclat);transition:opacity .4s var(--ease);
  background:radial-gradient(closest-side,rgba(238,202,142,.3),rgba(238,202,142,.1) 50%,rgba(238,202,142,0))}
body.home .home-parcours .home-parcours__icone{transform:translateY(calc(var(--eclat) * -3px));
  filter:drop-shadow(0 calc(var(--eclat) * 5px) calc(var(--eclat) * 8px) rgba(176,122,54,calc(var(--eclat) * .16)));
  transition:transform .35s var(--ease),filter .35s var(--ease)}
body.home .home-parcours .home-parcours__meta-big{text-shadow:0 0 22px rgba(214,168,108,calc(var(--eclat) * .42));transition:text-shadow .35s var(--ease)}
body.home .home-parcours .home-parcours__meta-label::after{width:calc(2.5rem + var(--eclat) * .9rem);
  background-color:rgba(150,104,58,calc(.7 + var(--eclat) * .3));box-shadow:0 0 6px rgba(214,168,108,calc(var(--eclat) * .5));
  transition:width .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
@media(max-width:639px){
  body.home .home-parcours .home-parcours__meta-item::before{top:1.7rem;width:8.5rem;height:8.5rem}
  body.home .home-parcours .home-parcours__meta-label::after{width:calc(1.8rem + var(--eclat) * .6rem)}
}
@media(prefers-reduced-motion:reduce){
  body.home .home-parcours .home-parcours__icone{transform:none;transition:filter .35s var(--ease)}
}
@media(max-width:1023px){
  body.home .home-parcours .home-parcours__vagues{width:100%;-webkit-mask-image:none;mask-image:none}
  body.home .home-parcours .home-parcours__rune{--parcours-rune:5.5rem;top:1.5rem;right:2rem;opacity:.05}
  body.home .home-parcours .home-parcours__branche{left:auto;right:7%;bottom:auto;top:40%;width:5rem;opacity:.22}
}
@media(max-width:639px){
  body.home .home-parcours .home-parcours__rune{--parcours-rune:4.5rem;top:auto;bottom:1.5rem;right:1rem;opacity:.045}
  body.home .home-parcours .home-parcours__branche{display:none}
}

/* ============================================================
   ACCUEIL — LES TEMOIGNAGES, FINITION (1.9.55)
   ------------------------------------------------------------
   La structure ne change pas : l en-tete, les trois cartes, la
   carte centrale bleu nuit. Sous le titre, une ligne de preuve
   courte, « 21 avis Google · 5,0/5 », et cinq etoiles cuivre ; le
   lien vers la fiche Google passe sous les cartes, centre. Les
   noms sont abreges dans front-page.php (prenom et initiale).
   En-tete resserre, cartes un peu plus compactes, noms plus
   lisibles : les mesures de la maquette validee.
   ============================================================ */
body.home .temoin-intro{gap:0;margin-bottom:1.75rem}
body.home .temoin-intro h2{margin-top:1.95rem}
body.home .temoin-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;margin:.9rem 0 0;max-width:none;
  font-size:1.17rem;font-weight:400;line-height:1.5;letter-spacing:.05em;font-variation-settings:'opsz' 10;color:#5A5149}
body.home .temoin-etoiles{display:block;flex:none;width:auto;height:1.12rem;fill:#AD7331}
/* les cartes : meme hauteur (la grille les etire), le nom toujours en bas ;
   interieur un peu plus serre, noms plus grands */
body.home .temoignage-carte{padding:clamp(1.5rem,2.6vw,2rem) clamp(1.5rem,2.8vw,2.2rem) clamp(1.25rem,2vw,1.5rem);gap:1.35rem}
body.home .temoignage-carte footer{line-height:1.4}
body.home .temoignage-carte cite{font-size:.95rem;letter-spacing:.13em}
@media(min-width:800px){
  body.home .temoignage-carte blockquote{line-height:1.36}
}
/* le lien vers la fiche : sous les cartes, centre, discret mais net */
body.home .temoin-avis{margin:1.7rem 0 0;max-width:none;text-align:center;line-height:1.4}
body.home .temoin-avis .temoin-lien{margin:0;padding-bottom:.28rem;font-family:var(--serif);font-size:1.38rem;font-weight:500;letter-spacing:.005em;
  color:var(--or-action);border-bottom:1px solid rgba(150,104,58,.8);transition:color .3s var(--ease),border-color .3s var(--ease)}
body.home .temoin-avis .temoin-lien:hover,
body.home .temoin-avis .temoin-lien:focus-visible{color:var(--or-action-survol);border-bottom-color:currentColor}
body.home .temoin-avis .fl{display:inline-block;margin-left:.3em;font-family:var(--sans);font-size:.9em;font-weight:300;
  transition:transform .35s var(--ease)}
body.home .temoin-avis .temoin-lien:hover .fl,
body.home .temoin-avis .temoin-lien:focus-visible .fl{transform:translate(2px,-2px)}
@media(max-width:699px){
  body.home .temoin-note{font-size:1.05rem;column-gap:.85rem}
  body.home .temoignage-carte cite{font-size:.86rem}
  body.home .temoin-avis .temoin-lien{font-size:1.26rem}
}
@media(prefers-reduced-motion:reduce){
  body.home .temoin-avis .temoin-lien:hover .fl,
  body.home .temoin-avis .temoin-lien:focus-visible .fl{transform:none}
}

/* ============================================================
   ACCUEIL — LE PETIT GUIDE DES RUNES, EN PAGE D AUTEUR (1.9.55)
   ------------------------------------------------------------
   Une presentation editoriale plutot qu une fiche produit. A
   gauche, le livre comme objet — la couverture reelle, ses
   tranches et son ombre, comme sur la page du livre — pose sur la
   forme sable preparee pour lui (asset-livre-support-beige). A
   droite, le texte directement sur l ivoire, sans carte. Decors
   discrets repris des assets du site : une branche sechee
   (guidances-branche), une pierre claire dans l angle
   (soins-pierre-claire) ; en bas a droite, des vagues tres claires
   traversees d un filet cuivre, dessinees en SVG. Le fond reste
   l ivoire des temoignages : la section s enchaine sans rupture.
   ============================================================ */
body.home #runes-livre{position:relative;background:transparent;padding-block:clamp(2.25rem,3.9vw,3.5rem) clamp(2.5rem,4.2vw,3.75rem)}
body.home #runes-livre .livre-editorial{position:relative;z-index:1;grid-template-columns:minmax(0,1fr);align-items:center}
/* les decors, sous le contenu */
body.home #runes-livre .livre-pierre,
body.home #runes-livre .livre-vagues{position:absolute;z-index:0;pointer-events:none}
body.home #runes-livre .livre-pierre{left:calc((100% - min(100%,76rem)) / 2 - 7rem);bottom:0;width:clamp(17rem,31vw,28rem);height:clamp(8rem,15vw,13.5rem);opacity:.7;
  background:url('assets/images/soins-pierre-claire-520.webp') 20% 30%/cover no-repeat;
  background-image:image-set(url('assets/images/soins-pierre-claire-520.avif') type('image/avif'),url('assets/images/soins-pierre-claire-520.webp') type('image/webp'));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M24 310C6 246 20 178 78 128C130 82 186 52 250 50C330 48 384 92 440 146C496 200 548 252 610 310Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M24 310C6 246 20 178 78 128C130 82 186 52 250 50C330 48 384 92 440 146C496 200 548 252 610 310Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
body.home #runes-livre .livre-vagues{right:0;bottom:0;width:min(62rem,66%);height:clamp(8rem,19vw,17rem);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 320' preserveAspectRatio='none'%3E%3Cpath d='M0 320C190 300 310 252 470 230C650 205 770 118 1000 58V320Z' fill='%23EEE2D0' fill-opacity='.5'/%3E%3Cpath d='M140 320C320 292 470 282 630 252C790 222 890 172 1000 152V320Z' fill='%23F4ECE0' fill-opacity='.75'/%3E%3Cpath d='M0 317C220 300 380 272 560 246C742 220 862 128 1000 70' fill='none' stroke='%23C99B63' stroke-opacity='.55' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right bottom/100% 100% no-repeat}

/* le livre : la forme sable derriere, la couverture en objet */
body.home #runes-livre .livre-visuel{position:relative;z-index:1;display:flex;justify-content:center;padding:clamp(1.1rem,2.8vw,2.25rem) 0}
body.home #runes-livre .livre-visuel::before{display:none}
body.home #runes-livre .livre-support{position:absolute;z-index:0;left:calc(50% - .8rem);top:calc(50% - 4.5rem);width:min(37rem,122%);aspect-ratio:1211/974;transform:translate(-50%,-50%);pointer-events:none;
  background:url('assets/images/asset-livre-support-beige.png') center/contain no-repeat;
  background-image:image-set(url('assets/images/asset-livre-support-beige-1200.webp') type('image/webp'),url('assets/images/asset-livre-support-beige.png') type('image/png'))}
/* la branche sechee, entre la forme et le livre, deborde a gauche de la colonne */
body.home #runes-livre .livre-branche{position:absolute;z-index:0;pointer-events:none;left:-37%;top:17%;width:clamp(9rem,15vw,13.5rem);aspect-ratio:600/800;
  background:url('assets/images/guidances-branche-600.webp') center/contain no-repeat;opacity:.9;transform:scaleX(-1) rotate(-6deg);transform-origin:50% 100%}
body.home #runes-livre .livre-couverture{--livre-angle:-4.5deg;position:relative;z-index:1;width:min(22.5rem,74%);max-width:none;margin:0;border-radius:1px 3px 3px 1px;filter:none;
  transform:rotate(var(--livre-angle));transition:transform .45s var(--ease)}
body.home #runes-livre .livre-couverture img{position:relative;z-index:2;border-radius:1px 3px 3px 1px}
/* les tranches et les ombres de la page du livre (.lv-objet) */
body.home #runes-livre .livre-couverture::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  box-shadow:1px 1px 0 #FAF6F0,2px 2px 0 #E6DED3,3px 3px 0 #F7F2EB,4px 4px 0 #DFD6CA,5px 5px 0 #F4EEE6,6px 6px 0 #D7CDC0,7px 7px 0 #A89B92,
    9px 10px 5px -2px rgba(40,30,34,.2),16px 26px 30px -12px rgba(40,30,34,.24),30px 58px 90px -40px rgba(40,30,34,.42);
  transition:box-shadow .45s var(--ease)}
body.home #runes-livre .livre-couverture::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:
  linear-gradient(90deg,rgba(0,0,0,.14) 0,rgba(0,0,0,0) 1.4%),
  linear-gradient(90deg,transparent 5%,rgba(255,255,255,.3) 5.25%,rgba(0,0,0,.1) 5.6%,transparent 6.1%),
  linear-gradient(128deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%,rgba(0,0,0,.06))}
/* au survol : il se redresse a peine et s eleve, l ombre s allonge */
@media(hover:hover){
  body.home #runes-livre .livre-visuel:hover .livre-couverture{transform:rotate(var(--livre-angle));filter:none}
  body.home #runes-livre .livre-visuel .livre-couverture:hover{transform:rotate(calc(var(--livre-angle) + 1.5deg)) translateY(-5px)}
  body.home #runes-livre .livre-visuel .livre-couverture:hover::before{box-shadow:1px 1px 0 #FAF6F0,2px 2px 0 #E6DED3,3px 3px 0 #F7F2EB,4px 4px 0 #DFD6CA,5px 5px 0 #F4EEE6,6px 6px 0 #D7CDC0,7px 7px 0 #A89B92,
    10px 13px 7px -2px rgba(40,30,34,.18),18px 32px 36px -12px rgba(40,30,34,.26),34px 66px 96px -40px rgba(40,30,34,.46)}
}

/* le texte, pose sur l ivoire */
body.home #runes-livre .livre-txt{position:relative;z-index:2;display:block;gap:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;margin:0}
body.home #runes-livre .livre-txt h2{margin-top:clamp(1.5rem,2.4vw,2.15rem);max-width:6.2em;font-size:clamp(2.6rem,5.35vw,4.8rem);line-height:.98;letter-spacing:-.012em}
body.home #runes-livre .livre-statut{margin:clamp(.8rem,1.1vw,.95rem) 0 0;max-width:none;font-size:1.42rem!important;line-height:1.35}
body.home #runes-livre .livre-intro{margin:clamp(.9rem,1.3vw,1.15rem) 0 0;padding-top:clamp(1rem,1.4vw,1.2rem);max-width:34.2rem;border-top:1px solid rgba(150,104,58,.2);
  font-size:1.2rem;line-height:1.66;color:var(--txt2)}
/* trois reperes : de petites metadonnees, pas des badges */
body.home #runes-livre .livre-reperes{margin:clamp(1.2rem,1.7vw,1.5rem) 0 0!important;padding:0!important;border:0;gap:.5rem .6rem}
body.home #runes-livre .livre-reperes li{padding:.34rem .95rem;background:transparent;border:1px solid rgba(150,104,58,.15);
  font-size:.78rem;letter-spacing:.04em;line-height:1.5;color:var(--txt3)}
body.home #runes-livre .boutons{margin-top:clamp(1.35rem,1.9vw,1.7rem);gap:1.25rem}
body.home #runes-livre .boutons .btn{min-height:3.75rem;padding:1.05rem 1.9rem;font-size:.92rem;letter-spacing:.05em;gap:.9rem}
@media(min-width:800px){
  body.home #runes-livre .livre-editorial{grid-template-columns:minmax(0,.97fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,3.5rem)}
}
/* telephone et tablette etroite : le livre d abord, le texte ensuite */
@media(max-width:799px){
  body.home #runes-livre .livre-visuel{padding:1.25rem 0 1.75rem}
  body.home #runes-livre .livre-couverture{--livre-angle:-3deg;width:min(14.25rem,60vw)}
  body.home #runes-livre .livre-txt h2{margin-top:1.25rem}
  body.home #runes-livre .livre-support{width:min(27rem,112vw);top:calc(50% - 2.5rem)}
  body.home #runes-livre .livre-branche,
  body.home #runes-livre .livre-pierre{display:none}
  body.home #runes-livre .livre-vagues{width:100%;height:7rem}
  body.home #runes-livre .livre-statut{font-size:1.25rem!important}
  body.home #runes-livre .livre-intro{font-size:1.06rem}
}
@media(min-width:600px) and (max-width:799px){
  body.home #runes-livre .livre-couverture{width:16.25rem}
  body.home #runes-livre .livre-txt{max-width:36rem;margin-inline:auto}
}
@media(max-width:599px){
  body.home #runes-livre .boutons{display:grid;gap:.75rem}
  body.home #runes-livre .boutons .btn{width:100%;min-height:3.4rem}
}
@media(max-width:799px){
  body.home #runes-livre .livre-support{background-image:url('assets/images/asset-livre-support-beige-700.webp')}
}
@media(prefers-reduced-motion:reduce){
  body.home #runes-livre .livre-couverture,
  body.home #runes-livre .livre-couverture::before{transition:none}
  body.home #runes-livre .livre-visuel .livre-couverture:hover{transform:rotate(var(--livre-angle))}
}

/* ============================================================
   ACCUEIL — LE BOUTON DU CTA FINAL (1.9.55)
   ------------------------------------------------------------
   Sur la nuit, le survol commun du bouton or l assombrit et le
   fait reculer. Ici il s eclaire un peu et prend un halo chaud ;
   la section ne change pas.
   ============================================================ */
@media(hover:hover){
  body.home #contact-maintien .btn--or:hover{background:#A87644;transform:translateY(-3px);
    box-shadow:0 0 0 1px rgba(212,164,106,.45),0 16px 36px -14px rgba(212,164,106,.6)}
}
body.home #contact-maintien .btn--or:focus-visible{background:#A87644;transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(212,164,106,.45),0 16px 36px -14px rgba(212,164,106,.6)}
body.home #contact-maintien .btn--or:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  body.home #contact-maintien .btn--or:hover,
  body.home #contact-maintien .btn--or:focus-visible{transform:none}
}

/* ============================================================
   PAGE LE PARCOURS RUNIQUE (body.edr-parcours-runique, gabarit page-parcours-runique.php)
   ------------------------------------------------------------
   Une page editoriale, pas une page d offre. Cinq sections : un
   bandeau asymetrique (texte a gauche, photographie du carnet a
   droite jusqu au bord), la difference guidance / Parcours en deux
   colonnes, le deroulement en quatre colonnes illustrees, une seule
   grande section nuit (la roche fondue dans le fond, les trois
   dimensions), puis modalites, tarif et questions dans une meme
   section. Grille : .bande__in (76 rem, soit 1 104 px utiles a 1440
   apres 3,5 rem de marge de chaque cote) coupe en 12 colonnes de
   70 px et 11 gouttieres de 24 px. Aucun jeton nouveau. Les chapeaux
   de cette page passent a l or d action, lisible sur ivoire (4,6:1).
   Photographies : six images propres a la page, en AVIF et WebP,
   toutes decoratives (alt vide) — le texte porte tout.
   ============================================================ */
body.edr-parcours-runique .interieur.parcours{padding-top:0}
body.edr-parcours-runique .parcours-page{--pr-col:clamp(1.25rem,5vw,3.5rem);--pr-bord:max(0px,(100vw - 76rem) / 2);--pr-haut:calc(clamp(7rem,12vw,10rem) - var(--hauteur-entete))}
body.edr-parcours-runique .parcours-page .eyebrow{color:var(--or-texte)}
body.edr-parcours-runique .parcours-page .eyebrow::before{background:var(--or-action)}
body.edr-parcours-runique .pr-kicker{margin:0;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.7;color:var(--or-action)}
body.edr-parcours-runique .pr-hero__in,
body.edr-parcours-runique .pr-choix__in,
body.edr-parcours-runique .pr-nuit__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:start}
body.edr-parcours-runique .parcours-page img{display:block}

/* --- Le bandeau ---------------------------------------------
   Sable et papier. Raido dans la marge, le texte sur six colonnes
   (58 % du conteneur), la photographie du carnet sur les cinq
   dernieres et jusqu au bord de l ecran, du haut de la page au bas du
   bandeau, a bord franc. Un voile sable sur les 10 rem du haut garde
   le menu lisible avant le premier defilement. */
body.edr-parcours-runique .pr-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg2);padding-block:var(--pr-haut) clamp(3.5rem,6vw,5.5rem)}
body.edr-parcours-runique .pr-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--edr-papier);background-size:700px 700px;opacity:.05;mix-blend-mode:multiply}
body.edr-parcours-runique .pr-hero__txt{grid-column:1 / 8;grid-row:1;padding:.75rem 3rem 0 0}
body.edr-parcours-runique .pr-hero__titre{margin-top:clamp(1.9rem,2.8vw,2.4rem);font-size:clamp(3rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.02em}
body.edr-parcours-runique .pr-hero__accroche{margin-top:clamp(1.75rem,2.4vw,2.1rem);font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.5rem);line-height:1.42;color:var(--nuit);max-width:32rem}
body.edr-parcours-runique .pr-hero__texte{margin-top:1.1rem;font-size:1rem;line-height:1.65;color:var(--txt2);max-width:31rem}
body.edr-parcours-runique .pr-hero .boutons{margin-top:2rem}
body.edr-parcours-runique .pr-hero__reperes{list-style:none;margin:2.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.5rem;font-size:.84rem;letter-spacing:.03em;color:var(--txt2)}
body.edr-parcours-runique .pr-hero__reperes li{position:relative;padding-right:1.4rem;margin-right:1.4rem}
body.edr-parcours-runique .pr-hero__reperes li:not(:last-child)::after{content:"";position:absolute;right:0;top:.05em;bottom:.05em;width:1px;background:var(--or);opacity:.45}
body.edr-parcours-runique .pr-hero__reperes li:last-child{padding-right:0;margin-right:0}
body.edr-parcours-runique .pr-hero__photo{grid-column:8 / 13;grid-row:1;align-self:stretch;position:relative;z-index:1;
  margin:calc(-1 * var(--pr-haut)) calc(-1 * var(--pr-col) - var(--pr-bord)) calc(-1 * clamp(3.5rem,6vw,5.5rem)) 0}
body.edr-parcours-runique .pr-hero__photo picture{position:absolute;inset:0;overflow:hidden}
body.edr-parcours-runique .pr-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
body.edr-parcours-runique .pr-hero__photo::before{content:"";position:absolute;inset:0 auto 0 0;width:4rem;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(242,238,230,.45),rgba(242,238,230,0))}
body.edr-parcours-runique .pr-hero__photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(242,238,230,.96) 0,rgba(242,238,230,.9) 4.5rem,rgba(242,238,230,.4) 7rem,rgba(242,238,230,0) 10rem)}

/* --- Guidance ou Parcours -----------------------------------
   Le chapeau a gauche, deux enonces en serif separes par un filet
   vertical, beaucoup d air. Rien d autre : la difference tient dans
   les deux mots en italique. */
body.edr-parcours-runique .pr-choix{background:var(--bg);padding-block:clamp(4rem,6.6vw,6rem);border-bottom:1px solid var(--acc-bord)}
body.edr-parcours-runique .pr-choix .pr-kicker{grid-column:1 / 4;padding-top:.5rem}
body.edr-parcours-runique .pr-choix__un{grid-column:4 / 8;padding-right:2rem}
body.edr-parcours-runique .pr-choix__deux{grid-column:8 / 13;position:relative;padding-left:3rem}
body.edr-parcours-runique .pr-choix__deux::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;background:var(--acc-bord)}
body.edr-parcours-runique .pr-choix h3{font-size:clamp(1.85rem,2.65vw,2.4rem);line-height:1.18;letter-spacing:-.012em}
body.edr-parcours-runique .pr-choix h3 em{color:var(--or-action);transition:color 1s var(--ease) .35s}
body.edr-parcours-runique .pr-choix p{margin-top:1.1rem;font-size:.98rem;line-height:1.65;color:var(--txt2);max-width:26rem}

/* --- Le Parcours en pratique : la section nuit --------------
   Le coeur de la page, en un seul fond. Partie haute en deux
   colonnes separees par un filet vertical : a gauche le chapeau, le
   grand titre et un paragraphe, sur la roche qui entre par le bord et
   se fond dans la nuit ; a droite le deroule, en sommaire — l etude
   en capitales espacees, un filet, puis les trois rendez-vous
   numerotes en or, un filet vertical entre le numero et l intitule,
   un filet discret entre les etapes. Partie basse, sous une longue
   ligne : quatre zones cote a cote entre des filets — l amorce, puis
   les trois dimensions portees par une rune deja associee a son sujet
   dans le site (Ansuz, Berkana, Jera), les runes un peu plus larges.
   Ni carte, ni cadre : des filets, des tailles, du vide. */
body.edr-parcours-runique .pr-nuit{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);padding-block:clamp(4rem,6.5vw,5.75rem) clamp(4rem,6.5vw,5.5rem)}
body.edr-parcours-runique .pr-nuit__matiere{position:absolute;left:0;top:0;bottom:0;width:min(58rem,58%);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 100%),linear-gradient(180deg,#000 0,#000 50%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 0,#000 26%,transparent 100%),linear-gradient(180deg,#000 0,#000 50%,transparent 100%);mask-composite:intersect}
body.edr-parcours-runique .pr-nuit__matiere picture,body.edr-parcours-runique .pr-nuit__matiere img{display:block;width:100%;height:100%}
body.edr-parcours-runique .pr-nuit__matiere img{object-fit:cover;object-position:0 40%;filter:brightness(.72) saturate(.85)}
body.edr-parcours-runique .pr-nuit__matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,30,43,0) 0,rgba(27,30,43,.52) 18%,rgba(27,30,43,.74) 45%,rgba(27,30,43,.9) 100%)}
body.edr-parcours-runique .pr-nuit::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--edr-grain);background-size:160px 160px;opacity:.12;mix-blend-mode:soft-light}
body.edr-parcours-runique .pr-nuit .eyebrow{color:var(--acc-clair)}
body.edr-parcours-runique .pr-nuit .eyebrow::before{background:var(--acc-clair)}
body.edr-parcours-runique .pr-nuit__tete{grid-column:1 / 8;grid-row:1;padding:.25rem 3rem 0 0}
body.edr-parcours-runique .pr-nuit__tete h2{font-size:clamp(2.1rem,3.3vw,3rem);line-height:1.12;letter-spacing:-.012em;color:#fff}
body.edr-parcours-runique .pr-nuit__tete p{margin-top:var(--air-titre);font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.8);max-width:29rem}
body.edr-parcours-runique .pr-temps{grid-column:8 / 13;grid-row:1;margin:0;padding-left:clamp(2rem,3.5vw,3.25rem);border-left:1px solid rgba(255,255,255,.07)}
body.edr-parcours-runique .pr-temps > div{position:relative;padding:1.5rem 0 1.65rem}
body.edr-parcours-runique .pr-temps__filet{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.1)}
body.edr-parcours-runique .pr-temps > div:first-child{padding-top:.15rem}
body.edr-parcours-runique .pr-temps > div:first-child .pr-temps__filet{display:none}
body.edr-parcours-runique .pr-temps > div:last-child{padding-bottom:.25rem}
body.edr-parcours-runique .pr-temps__etude{padding-bottom:1.9rem}
body.edr-parcours-runique .pr-temps__etude + .pr-temps__rdv .pr-temps__filet{background:rgba(255,255,255,.2)}
body.edr-parcours-runique .pr-temps__avant{display:block;font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.5;color:var(--acc-clair);margin-bottom:.9rem}
body.edr-parcours-runique .pr-temps__nom--etude{display:block;padding-left:0;font-family:var(--serif);font-size:1.6rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;line-height:1.15;color:#fff}
body.edr-parcours-runique .pr-temps__etude dd{margin-top:.7rem}
body.edr-parcours-runique .pr-temps__rdv{position:relative;display:grid;grid-template-columns:3.4rem 1fr;column-gap:0}
body.edr-parcours-runique .pr-temps__rdv dt{display:contents}
body.edr-parcours-runique .pr-temps__rdv::before{content:"";grid-column:2;grid-row:1 / 3;width:1px;background:rgba(255,255,255,.18);align-self:stretch;margin:.2rem 0 .1rem}
body.edr-parcours-runique .pr-temps__num{grid-column:1;grid-row:1 / 3;font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--acc-clair);font-variant-numeric:lining-nums;padding-top:.2rem}
body.edr-parcours-runique .pr-temps__nom{grid-column:2;grid-row:1;padding-left:1.5rem;font-family:var(--serif);font-size:1.55rem;line-height:1.1;color:#fff}
body.edr-parcours-runique .pr-temps__etude .pr-temps__nom{padding-left:0}
body.edr-parcours-runique .pr-temps dd{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.7)}
body.edr-parcours-runique .pr-temps__rdv dd{grid-column:2;grid-row:2;padding-left:1.5rem;margin-top:.55rem}
body.edr-parcours-runique .pr-accomp{grid-column:1 / -1;grid-row:2;margin-top:clamp(2.75rem,4vw,3.5rem);padding-top:clamp(2.25rem,3.2vw,2.75rem);border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1.6fr 3.5fr 3.15fr 3.15fr;align-items:start}
body.edr-parcours-runique .pr-accomp__amorce{margin:.3rem 0 0;padding-right:1rem;font-family:var(--sans);font-style:normal;font-weight:500;font-size:.72rem;line-height:1.7;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-clair)}
body.edr-parcours-runique .pr-accomp__amorce::before{content:"";display:block;width:1.6rem;height:1px;background:var(--acc-clair);margin-bottom:.8rem}
body.edr-parcours-runique .pr-accomp__item{display:grid;grid-template-columns:2.4rem 1fr;column-gap:.7rem;align-items:start;padding:0 1.75rem;border-left:1px solid rgba(255,255,255,.12);min-height:100%}
body.edr-parcours-runique .pr-accomp__item:last-child{padding-right:0}
body.edr-parcours-runique .pr-accomp .pr-dim__rune{display:block;font-family:var(--runic);font-size:2.4rem;line-height:1;color:var(--acc-clair);margin-top:-.05rem}
body.edr-parcours-runique .pr-accomp h4{margin:0;font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.1;letter-spacing:-.01em;color:#fff}
body.edr-parcours-runique .pr-accomp p{margin-top:.7rem;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.72);max-width:24rem}
body.edr-parcours-runique .pr-accomp__runes p{color:rgba(255,255,255,.78)}

/* --- Modalites et tarif ---------------------------------------
   Retour au concret apres la nuit, sur l ivoire, en deux colonnes
   separees par un filet vertical : a gauche le chapeau, le titre, une
   phrase et, sous un court filet or, la micro-ligne des reperes en
   capitales espacees ; a droite le tarif en tres grand, « le Parcours
   complet », l echeancier et les deux actions sur une ligne — un seul
   groupe. Compact : ni carte, ni bandeau, ni pictogramme. Un brin
   dessine (celui des reperes de l accueil) affleure au bord droit,
   presque invisible. */
body.edr-parcours-runique .pr-pratique{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding-block:clamp(3.75rem,5.5vw,5rem) clamp(3.75rem,5.5vw,5rem)}
body.edr-parcours-runique .pr-pratique .bande__in{position:relative;z-index:1}
/* le feuillage : une lumiere vegetale en haut a droite, hors cadre, derriere le tarif */
body.edr-parcours-runique .pr-pratique::after{content:"";position:absolute;right:-7rem;top:-3rem;width:27rem;height:42rem;z-index:0;pointer-events:none;background-image:url(/wp-content/themes/lenergiedesrunes/assets/images/parcours-feuillage-clair-720.webp);background-image:image-set(url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-feuillage-clair-720.avif") type("image/avif"),url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-feuillage-clair-720.webp") type("image/webp"));background-position:top right;background-size:contain;background-repeat:no-repeat;mix-blend-mode:multiply;opacity:.72;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,#000 55%,transparent 100%);mask-composite:intersect}
body.edr-parcours-runique .pr-offre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem;align-items:stretch}
body.edr-parcours-runique .pr-offre__txt{grid-column:1 / 7;padding-right:3rem;border-right:1px solid var(--line)}
body.edr-parcours-runique .pr-offre h2{font-size:clamp(2.6rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.015em}
body.edr-parcours-runique .pr-offre__desc{margin-top:1.3rem;font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.38;color:var(--txt);max-width:30rem}
body.edr-parcours-runique .pr-offre__tarif{grid-column:7 / 13;padding:.35rem 0 0 clamp(2rem,4vw,4.5rem)}
body.edr-parcours-runique .pr-prix{display:flex;flex-direction:column;align-items:flex-start}
body.edr-parcours-runique .pr-prix__montant{font-family:var(--serif);font-weight:300;font-size:clamp(4.5rem,8vw,7.25rem);line-height:.88;letter-spacing:-.02em;color:var(--nuit);font-variant-numeric:lining-nums}
body.edr-parcours-runique .pr-prix__libelle{margin-top:1.05rem;font-size:.84rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or-action)}
body.edr-parcours-runique .pr-prix__echeance{margin-top:.6rem;font-size:1.1rem;color:var(--txt2)}
body.edr-parcours-runique .pr-offre__actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.9rem}
body.edr-parcours-runique .pr-offre__actions .btn{padding:1rem 2.2rem;font-size:.9rem}

/* --- Questions frequentes ---------------------------------------
   Une derniere sequence a part, sur le sable or, avant le pied de
   page : chapeau, titre (nettement plus petit que « Modalites et
   tarif »), introduction, puis quatre questions en deux colonnes
   alignees separees par un filet, un signe + fin a droite qui devient
   − a l ouverture. details/summary natifs, clavier sans script. Une
   roche presque monochrome affleure en bas a gauche, hors cadre. */
body.edr-parcours-runique .pr-questions{position:relative;isolation:isolate;overflow:hidden;background-color:var(--acc-bandeau);background-image:url(/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1600.webp);background-image:image-set(url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1600.avif") type("image/avif"),url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1600.webp") type("image/webp"));background-position:center;background-size:cover;background-repeat:no-repeat;padding-block:clamp(3.75rem,5.5vw,5rem) clamp(3.5rem,5.5vw,5rem)}
/* la roche en lavis : part du bord gauche, sort du cadre, remonte sous la premiere colonne sans toucher le texte */
body.edr-parcours-runique .pr-questions::before{content:"";position:absolute;left:-8rem;bottom:-6rem;width:38rem;height:27rem;z-index:0;pointer-events:none;background-image:url(/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-roche-720.webp);background-image:image-set(url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-roche-720.avif") type("image/avif"),url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-roche-720.webp") type("image/webp"));background-position:left bottom;background-size:contain;background-repeat:no-repeat;mix-blend-mode:multiply;opacity:.7;
  -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 92%),linear-gradient(0deg,#000 35%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 35%,transparent 92%),linear-gradient(0deg,#000 35%,transparent 100%);mask-composite:intersect}
body.edr-parcours-runique .pr-questions .bande__in{position:relative;z-index:1}
body.edr-parcours-runique .pr-faq__tete{display:flex;align-items:center;gap:.8rem;margin:0;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.5;color:var(--or-texte)}
body.edr-parcours-runique .pr-faq__tete::before{content:"";flex:none;width:1.6rem;height:1px;background:var(--or-action)}
body.edr-parcours-runique .pr-faq__titre{margin-top:1.1rem;font-size:clamp(2rem,3.2vw,3rem);line-height:1.05}
body.edr-parcours-runique .pr-faq__intro{margin-top:1rem;font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--txt2);max-width:64rem}
body.edr-parcours-runique .pr-faq__colonnes{display:grid;grid-template-columns:11fr 13fr;margin-top:2rem}
body.edr-parcours-runique .pr-faq__col{padding-right:2rem}
body.edr-parcours-runique .pr-faq__col + .pr-faq__col{padding:0 0 0 2rem;border-left:1px solid rgba(184,134,78,.28)}
body.edr-parcours-runique .pr-faq__q{border-bottom:1px solid rgba(184,134,78,.32);transition:border-color .4s var(--ease)}
body.edr-parcours-runique .pr-faq__q:first-child{border-top:1px solid rgba(184,134,78,.32)}
body.edr-parcours-runique .pr-faq__q[open]{border-bottom-color:rgba(150,104,58,.6)}
body.edr-parcours-runique .pr-faq__q summary{position:relative;list-style:none;cursor:pointer;padding:1.3rem 2.75rem 1.3rem 0;font-family:var(--serif);font-size:1.25rem;line-height:1.3;color:var(--nuit);transition:color .3s var(--ease)}
body.edr-parcours-runique .pr-faq__q summary::-webkit-details-marker{display:none}
body.edr-parcours-runique .pr-faq__q summary::before,body.edr-parcours-runique .pr-faq__q summary::after{content:"";position:absolute;right:.35rem;top:50%;background:var(--or-action);opacity:.75;transition:transform .35s var(--ease),opacity .3s var(--ease)}
body.edr-parcours-runique .pr-faq__q summary::before{width:.95rem;height:1px;margin-top:-.5px}
body.edr-parcours-runique .pr-faq__q summary::after{width:1px;height:.95rem;right:calc(.35rem + .475rem - .5px);margin-top:-.475rem}
body.edr-parcours-runique .pr-faq__q[open] summary::after{transform:scaleY(0)}
body.edr-parcours-runique .pr-faq__q summary:hover,body.edr-parcours-runique .pr-faq__q summary:focus-visible{color:var(--or-action)}
body.edr-parcours-runique .pr-faq__q summary:hover::before,body.edr-parcours-runique .pr-faq__q summary:hover::after{opacity:1}
body.edr-parcours-runique .pr-faq__q summary:focus-visible{outline:2px solid var(--or);outline-offset:2px}
body.edr-parcours-runique .pr-faq__q p{margin:0 0 1.35rem;padding-right:2.75rem;font-size:.95rem;line-height:1.62;color:var(--txt2)}
body.edr-parcours-runique .pr-faq__q[open] p{animation:pr-reponse .4s var(--ease) both}
@keyframes pr-reponse{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- Mouvement : la page se decouvre en avancant ----------------
   Le systeme .rv du theme, ralenti ici (750 ms) et etire sur cinq
   temps ; le bandeau entre en cinq pas, le deroule de la nuit et les
   modalites en succession. Deux derives au defilement, en CSS seul
   (animation-timeline), desktop seulement, quelques pourcents : la
   photographie du bandeau et la roche de la nuit. Le filet central de
   Guidance ou Parcours se deploie, les filets du deroule s etendent,
   les runes montent en opacite. Tout s efface sous
   prefers-reduced-motion (regle globale du theme). */
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending{transition-duration:.75s}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending.d1{transition-delay:.12s}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending.d2{transition-delay:.24s}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending.d3{transition-delay:.36s}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending.d4{transition-delay:.5s}
:where(.js-animations-ready) body.edr-parcours-runique .pr-hero .rv.rv-pending{transition-duration:.9s}
:where(.js-animations-ready) body.edr-parcours-runique .pr-hero__titre.rv.rv-pending{transform:translateY(18px)}
:where(.js-animations-ready) body.edr-parcours-runique .pr-hero__titre.rv.rv-pending.in{transform:none}
:where(.js-animations-ready) body.edr-parcours-runique .pr-choix .rv-pending h3 em{color:var(--txt2)}
:where(.js-animations-ready) body.edr-parcours-runique .pr-choix .rv-pending.in h3 em{color:var(--or-action)}
:where(.js-animations-ready) body.edr-parcours-runique .pr-choix__deux.rv-pending::before{transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) .3s}
:where(.js-animations-ready) body.edr-parcours-runique .pr-choix__deux.rv-pending.in::before{transform:none}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending .pr-temps__filet{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
:where(.js-animations-ready) body.edr-parcours-runique .rv.rv-pending.in .pr-temps__filet{transform:none}
:where(.js-animations-ready) body.edr-parcours-runique .pr-accomp .rv.rv-pending .pr-dim__rune{opacity:.35;transition:opacity 1.1s var(--ease) .4s}
:where(.js-animations-ready) body.edr-parcours-runique .pr-accomp .rv.rv-pending.in .pr-dim__rune{opacity:1}
:where(.js-animations-ready) body.edr-parcours-runique .pr-prix__montant.rv.rv-pending{display:block;transform:translateY(24px);transition-duration:1s}
:where(.js-animations-ready) body.edr-parcours-runique .pr-prix__montant.rv.rv-pending.in{transform:none}
@supports (animation-timeline:scroll()){
  @media(min-width:1024px) and (prefers-reduced-motion:no-preference){
    body.edr-parcours-runique .pr-hero__photo img{transform:scale(1.06);animation:pr-derive-photo linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    body.edr-parcours-runique .pr-nuit__matiere{animation:pr-derive-roche linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    body.edr-parcours-runique .pr-pratique::after{animation:pr-derive-feuillage linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    body.edr-parcours-runique .pr-questions::before{animation:pr-derive-lavis linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes pr-derive-photo{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.06) translateY(-3%)}}
@keyframes pr-derive-roche{from{opacity:.75;transform:translateY(2.5%)}to{opacity:1;transform:translateY(-2.5%)}}
@keyframes pr-derive-feuillage{from{transform:translateY(1.5%)}to{transform:translateY(-1.5%)}}
@keyframes pr-derive-lavis{from{transform:translateY(1%)}to{transform:translateY(-1%)}}

/* --- Sous 1100 px : la question longue ne tient plus sur une ligne, la FAQ passe sur une colonne --- */
@media(max-width:1100px){
  body.edr-parcours-runique .pr-faq__colonnes{grid-template-columns:minmax(0,1fr)}
  body.edr-parcours-runique .pr-faq__col,body.edr-parcours-runique .pr-faq__col + .pr-faq__col{padding:0;border-left:0}
  body.edr-parcours-runique .pr-faq__col + .pr-faq__col .pr-faq__q:first-child{border-top:0}
}

/* --- Tablette : la meme page, deux colonnes au lieu de quatre ---- */
@media(max-width:1023px){
  body.edr-parcours-runique .pr-hero__txt{grid-column:1 / 9;padding:0 1.5rem 0 0}
  body.edr-parcours-runique .pr-hero__photo{grid-column:9 / 13}
  body.edr-parcours-runique .pr-hero__photo img{object-position:42% 50%}
  body.edr-parcours-runique .pr-choix .pr-kicker{grid-column:1 / -1;padding-top:0;margin-bottom:2rem}
  body.edr-parcours-runique .pr-choix__un{grid-column:1 / 7;padding-right:1.5rem}
  body.edr-parcours-runique .pr-choix__deux{grid-column:7 / 13;padding-left:2rem}
  body.edr-parcours-runique .pr-nuit{padding-top:13rem}
  body.edr-parcours-runique .pr-nuit__matiere{width:100%;bottom:auto;height:15rem;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 100%)}
  body.edr-parcours-runique .pr-nuit__matiere img{object-position:50% 60%}
  body.edr-parcours-runique .pr-nuit__matiere::after{background:linear-gradient(180deg,rgba(27,30,43,.15) 0,rgba(27,30,43,.6) 100%)}
  body.edr-parcours-runique .pr-nuit__tete{padding-right:2rem}
  body.edr-parcours-runique .pr-nuit__tete h2{font-size:clamp(1.9rem,3.2vw,2.5rem)}
  body.edr-parcours-runique .pr-temps{padding-left:2rem}
  body.edr-parcours-runique .pr-temps__nom--etude{font-size:1.4rem;letter-spacing:.14em}
  body.edr-parcours-runique .pr-accomp{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}
  body.edr-parcours-runique .pr-accomp__amorce{grid-column:1 / -1;margin:0;padding:0}
  body.edr-parcours-runique .pr-accomp__amorce br{display:none}
  body.edr-parcours-runique .pr-accomp__item{padding:0 1.25rem}
  body.edr-parcours-runique .pr-accomp__item.pr-accomp__runes{padding-left:0;border-left:0}
  body.edr-parcours-runique .pr-offre__txt{padding-right:2rem}
  body.edr-parcours-runique .pr-offre__tarif{padding-left:2rem}
  body.edr-parcours-runique .pr-pratique::after{right:-10rem;width:23rem;height:36rem;opacity:.6}
  body.edr-parcours-runique .pr-questions::before{width:30rem;height:22rem;opacity:.6}
}

/* --- Sous 900 px : la partie haute s empile, le filet vertical devient horizontal --- */
@media(max-width:899px){
  body.edr-parcours-runique .pr-nuit__tete{grid-column:1 / -1;grid-row:auto;max-width:36rem;padding-right:0}
  body.edr-parcours-runique .pr-temps{grid-column:1 / -1;grid-row:auto;max-width:40rem;margin-top:2.5rem;padding-left:0;border-left:0}
  body.edr-parcours-runique .pr-temps > div:first-child{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem}
  body.edr-parcours-runique .pr-accomp{grid-row:auto}
  body.edr-parcours-runique .pr-offre__txt{grid-column:1 / -1;padding-right:0;border-right:0;max-width:36rem}
  body.edr-parcours-runique .pr-offre__tarif{grid-column:1 / -1;padding:2.5rem 0 0}
  body.edr-parcours-runique .pr-pratique::after{display:none}
  body.edr-parcours-runique .pr-questions::before{width:24rem;height:18rem;left:-7rem;bottom:-5rem;opacity:.5}
  body.edr-parcours-runique .pr-accomp{grid-template-columns:minmax(0,1fr);row-gap:0}
  body.edr-parcours-runique .pr-accomp__amorce{margin:0 0 .5rem}
  body.edr-parcours-runique .pr-accomp__item,body.edr-parcours-runique .pr-accomp__item.pr-accomp__runes{padding:1.6rem 0 1.75rem;border-left:0;border-top:1px solid rgba(255,255,255,.12);grid-template-columns:2.5rem 1fr;column-gap:1rem;min-height:0}
  body.edr-parcours-runique .pr-accomp__item:last-child{padding-bottom:0}
  body.edr-parcours-runique .pr-accomp p{max-width:none}
}

/* --- Telephone : une colonne, chaque photo conservee ------------- */
@media(max-width:639px){
  body.edr-parcours-runique .pr-hero{padding-top:calc(8rem - var(--hauteur-entete));padding-bottom:0}
  body.edr-parcours-runique .pr-hero__in{display:block}
  body.edr-parcours-runique .pr-hero__txt{padding:0}
  body.edr-parcours-runique .pr-hero .eyebrow{font-size:.68rem;letter-spacing:.2em}
  body.edr-parcours-runique .pr-hero__accroche{font-size:1.3rem}
  body.edr-parcours-runique .pr-hero__reperes{row-gap:.35rem}
  body.edr-parcours-runique .pr-hero__photo{position:relative;aspect-ratio:4 / 3;margin:2.5rem calc(-1 * var(--pr-col)) 0}
  body.edr-parcours-runique .pr-hero__photo img{object-position:50% 60%}
  body.edr-parcours-runique .pr-hero__photo::after,body.edr-parcours-runique .pr-hero__photo::before{display:none}
  body.edr-parcours-runique .pr-choix__un,body.edr-parcours-runique .pr-choix__deux{grid-column:1 / -1;padding:0}
  body.edr-parcours-runique .pr-choix__deux{border-left:0;border-top:1px solid var(--acc-bord);padding-top:1.75rem;margin-top:1.75rem}
  body.edr-parcours-runique .pr-choix .pr-kicker{margin-bottom:1.75rem}
  body.edr-parcours-runique .pr-nuit{padding-top:11rem}
  body.edr-parcours-runique .pr-nuit__matiere{height:11rem}
  body.edr-parcours-runique .pr-nuit__tete h2{font-size:1.85rem}
  body.edr-parcours-runique .pr-temps{margin-top:2.25rem}
  body.edr-parcours-runique .pr-temps__nom--etude{font-size:1.3rem;letter-spacing:.16em}
  body.edr-parcours-runique .pr-temps__avant{font-size:.7rem}
  body.edr-parcours-runique .pr-temps__rdv{grid-template-columns:2.9rem 1fr}
  body.edr-parcours-runique .pr-temps__nom,body.edr-parcours-runique .pr-temps__rdv dd{padding-left:1.15rem}
  body.edr-parcours-runique .pr-accomp{margin-top:2.75rem;padding-top:2.25rem}
  body.edr-parcours-runique .pr-accomp .pr-dim__rune{font-size:2.2rem}
  body.edr-parcours-runique .pr-offre__actions .btn{width:100%}
  body.edr-parcours-runique .pr-prix__montant{font-size:4.5rem}
  body.edr-parcours-runique .pr-questions{padding-block:3.5rem 4rem}
  body.edr-parcours-runique .pr-faq__colonnes{margin-top:1.75rem}
  body.edr-parcours-runique .pr-questions::before{width:16rem;height:12rem;left:-5rem;bottom:-4rem;opacity:.4}
  body.edr-parcours-runique .pr-questions{background-image:url(/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1000.webp);background-image:image-set(url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1000.avif") type("image/avif"),url("/wp-content/themes/lenergiedesrunes/assets/images/parcours-faq-matiere-1000.webp") type("image/webp"))}
  body.edr-parcours-runique .pr-faq__q summary{font-size:1.2rem;padding:1rem 2rem 1rem 0}
}