/* ==========================================================================
   L'atelier du mouvement, proposition B (révision du 23/09/2026, après retours de Sam)
   1. Socle et landing : règles recopiées à l'identique de la landing validée.
   2. Jetons : couleurs, dégradés vivants, échelle typographique, espacements.
   3. Chapitres : ouverture, séance, fascias, bénéfices, Anne, rendez-vous.
   4. Fil conducteur, transitions, compositions au choix.
   5. Petits écrans, mouvement réduit.
   ========================================================================== */

/* 1. Socle et landing ------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:#492e30;background:#faf4e8;font:var(--t-petit)/1.65 var(--sans)} /* deux familles seulement, chargées par assets/fonts.css : rôles typographiques en 2. (doc/ref/SITE_TYPOGRAPHIE.md) */
h1,h2,h3,p,figure,ul{margin:0}
h1,h2,h3,.brand{font-family:Alegreya,serif;font-weight:400}
h1{font-size:var(--t-affiche);line-height:1.02;letter-spacing:-.035em}
em{font-weight:500}
p+p{margin-top:24px}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:6px}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover}
a:focus-visible,button:focus-visible{outline:3px solid #b14b2f;outline-offset:5px}
.skip{position:fixed;top:-100px;z-index:50;background:#fff;padding:16px}
.skip:focus{top:0}
.eyebrow{font-size:var(--t-petit);margin-bottom:24px}
.brand{font-size:var(--t-chapeau);line-height:1.06}
.brand i{padding-left:18px}
header{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:30px 5%}
nav{display:flex;gap:35px;align-items:center}
nav a{padding:10px 0}
.nav-contact,.text-link{border-bottom:1px solid}
.nav-contact span{margin-left:20px}
.hero{position:relative;height:100svh;min-height:760px;overflow:hidden}
.image-plane{position:absolute;inset:0}
.image-plane:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff4daeb 0%,#fff4dad0 28%,#fff4da00 73%)}
.hero-copy{position:relative;z-index:1;padding:210px 6% 80px;max-width:900px}
.intro{font-size:var(--t-corps);margin-top:28px}
.text-link{display:inline-flex;gap:36px;margin-top:28px;padding:12px 0;min-height:48px}
.hero-bottom{position:absolute;bottom:30px;left:6%;font-size:var(--t-petit)}
.version-b header,.version-b .hero{color:#fff}
.version-b .image-plane:after{background:linear-gradient(90deg,transparent 30%,#331b1770),linear-gradient(#30151150,transparent 30%)}
.version-b .hero-copy{margin-left:51%;padding:220px 5% 80px 0;max-width:710px}

/* 2. Jetons ---------------------------------------------------------------- */
:root{--ouv-pause:1;
  --encre:#45292b; --encre-douce:#684848; --papier:#fbf3e8; --blanc:#fff7ef; --blanc-doux:#ffe6d6; --peche-texte:#ffd6b8;
  --rouge:#9c3526; --corail:#b0442e;
  --peche:#fbe6d4; --rose:#f9ebe3; --abricot:#f5d6bb; --lavande:#d8cce3; --lavande-profonde:#3b2c45;
  --fascia:#6b2e28; --creme-sur-sombre:#fff6ec;
  --sans:'Alegreya Sans',Helvetica,Arial,sans-serif;
  --serif:Alegreya,serif;
  /* dégradés vivants, accordés aux photos : un halo côté image, une base sombre côté texte (texte blanc lisible) */
  --faisceau:linear-gradient(112deg,#fff0 34%,#ffffff17 47%,#fff0 60%);
  --g-tete:linear-gradient(180deg,#b54a3f 0%,#b54a3f00 26%),radial-gradient(40% 50% at 100% 42%,#f5a07cb3 0%,#f5a07cab 9%,#f5a07c97 18%,#f5a07c7a 27%,#f5a07c5a 36%,#f5a07c39 45%,#f5a07c1c 54%,#f5a07c08 63%,#f5a07c00 72%),radial-gradient(60% 70% at 0% 100%,#5c2140ff 0%,#5c2140f4 9%,#5c2140d7 18%,#5c2140ae 27%,#5c214080 36%,#5c214051 45%,#5c214028 54%,#5c21400b 63%,#5c214000 72%),linear-gradient(168deg,#b54a3f 0%,#9d3b45 48%,#712b42 100%);
  --g-1:radial-gradient(46% 58% at 88% 42%,#dd8a66b8 0%,#dd8a66b0 9%,#dd8a669b 18%,#dd8a667e 27%,#dd8a665c 36%,#dd8a663a 45%,#dd8a661d 54%,#dd8a6608 63%,#dd8a6600 72%),radial-gradient(70% 60% at 0% 100%,#2f1618ff 0%,#2f1618f4 9%,#2f1618d7 18%,#2f1618ae 27%,#2f161880 36%,#2f161851 45%,#2f161828 54%,#2f16180b 63%,#2f161800 72%),linear-gradient(160deg,#8d3b35 0%,#6f2f2f 52%,#472023 100%);
  --g-2:radial-gradient(44% 56% at 16% 40%,#d6e29a8c 0%,#d6e29a86 9%,#d6e29a76 18%,#d6e29a60 27%,#d6e29a46 36%,#d6e29a2c 45%,#d6e29a16 54%,#d6e29a06 63%,#d6e29a00 72%),radial-gradient(70% 70% at 100% 100%,#24311bff 0%,#24311bf4 9%,#24311bd7 18%,#24311bae 27%,#24311b80 36%,#24311b51 45%,#24311b28 54%,#24311b0b 63%,#24311b00 72%),linear-gradient(200deg,#647f3c 0%,#4c6532 50%,#354a27 100%);
  --g-sortie:radial-gradient(70% 55% at 50% 100%,#c9847480 0%,#c984747a 9%,#c984746c 18%,#c9847458 27%,#c9847440 36%,#c9847428 45%,#c9847414 54%,#c9847405 63%,#c9847400 72%),radial-gradient(60% 60% at 0% 40%,#3a1a1cff 0%,#3a1a1cf4 9%,#3a1a1cd7 18%,#3a1a1cae 27%,#3a1a1c80 36%,#3a1a1c51 45%,#3a1a1c28 54%,#3a1a1c0b 63%,#3a1a1c00 72%),linear-gradient(180deg,#84433b 0%,#6b312e 55%,#5a2a28 100%);
  --g-3:radial-gradient(44% 56% at 86% 36%,#f6cf82b0 0%,#f6cf82a8 9%,#f6cf8294 18%,#f6cf8278 27%,#f6cf8258 36%,#f6cf8238 45%,#f6cf821b 54%,#f6cf8208 63%,#f6cf8200 72%),radial-gradient(70% 70% at 0% 100%,#2f4130ff 0%,#2f4130f4 9%,#2f4130d7 18%,#2f4130ae 27%,#2f413080 36%,#2f413051 45%,#2f413028 54%,#2f41300b 63%,#2f413000 72%),linear-gradient(165deg,#647757 0%,#4b5e43 50%,#384835 100%);
  --g-peche:radial-gradient(60% 50% at 85% 0%,#f7c0aeff 0%,#f7c0aef4 8.8%,#f7c0aed7 17.5%,#f7c0aeae 26.2%,#f7c0ae80 35%,#f7c0ae51 43.8%,#f7c0ae28 52.5%,#f7c0ae0b 61.2%,#f7c0ae00 70%),radial-gradient(55% 60% at 0% 60%,#fde9d6ff 0%,#fde9d6f4 8.8%,#fde9d6d7 17.5%,#fde9d6ae 26.2%,#fde9d680 35%,#fde9d651 43.8%,#fde9d628 52.5%,#fde9d60b 61.2%,#fde9d600 70%),linear-gradient(180deg,#fbe2cf 0%,#f9e8dd 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* rôles typographiques (doc/ref/SITE_TYPOGRAPHIE.md) : chaque texte du site prend l'une de ces tailles, dans l'une des
     deux familles. Serif (Alegreya) : titres, voix d'Anne en italique 500, chiffres. Sans (Alegreya Sans) : lecture.
     Les paliers de l'édition (--e-2 à --e-9, blocs.css) sont ces mêmes tailles : A+ et A- restent dans l'échelle. */
  --t-affiche:clamp(58px,5.4vw,82px);      /* serif : titre de l'accueil (h1) */
  --t-prix:clamp(64px,7.4vw,112px);        /* serif : durée et prix de la séance */
  --t-chapitre:clamp(40px,4.5vw,64px);     /* serif : titre de chapitre (h2) */
  --t-accroche:clamp(36px,4.4vw,80px);     /* serif : la phrase d'accroche */
  --t-chiffre:clamp(32px,3.3vw,48px);      /* serif : le téléphone */
  --t-voix:clamp(28px,2.5vw,36px);         /* serif italique : promesse, citation, mots des fascias ; bénéfices en romain */
  --t-sous-partie:clamp(26px,2.05vw,30px); /* serif : h3 des trois temps, nom d'un lien ami */
  --t-chapeau:clamp(23px,1.85vw,27px);     /* sans : chapeau, fascias, adresse ; serif : qualité d'un temps, marque */
  --t-corps:23px;                          /* sans : texte courant */
  --t-petit:19px;                          /* sans : navigation, liens discrets, pied de page ; en capitales : rubrique */
  --pad:7vw;
  --fil-x:calc(var(--pad) - 44px);
  --espace-chapitre:clamp(88px,12vh,140px);
  /* recouvrement entre deux chapitres : la section suivante arrive en fondu sur la fin de la précédente */
  --fondu:clamp(120px,18vh,200px);
  /* deuxième tour (06/10 après-midi, « plus direct ») : recouvrements raccourcis.
     --chev : la scène collante des fascias remonte de --chev sur la section qui la précède ; son fondu d'entrée
     (--chev × .85) est fini AVANT le bas de cette section, sinon le bas de la section se voit en ligne franche
     au travers de la scène encore un peu transparente (mesuré : ΔE 2,5 à 3,2 d'une ligne de pixels à la suivante). */
  --chev:22vh;
  --recouvre-court:16vh;
  --ease-lent:cubic-bezier(.77,0,.175,1);
  --ease-sortie:cubic-bezier(.23,1,.32,1);
}

/* 3. Chapitres ------------------------------------------------------------- */
main>section:not(.hero),footer{font-family:var(--sans)}
.chapitre{position:relative;font-size:var(--t-corps);line-height:1.54}
.chapitre p+p{margin-top:16px}
/* pas de mot seul sur la dernière ligne d'un paragraphe */
main p,.lien-nom,.lien-desc{text-wrap:pretty}
.chapitre h2{font-size:var(--t-chapitre);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.insecable{white-space:nowrap}
.chapitre h3{font-size:var(--t-sous-partie);line-height:1.15;letter-spacing:-.01em}
.promesse{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--t-voix);line-height:1.2;color:var(--encre);margin-top:.45em}
.chapeau{font-size:var(--t-chapeau);line-height:1.5}
.rubrique{font-family:var(--sans);font-size:var(--t-petit);letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
hgroup{margin:0}
.signe{width:auto;height:56px;object-fit:contain}
.grain{position:relative;isolation:isolate}
.grain::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.32;mix-blend-mode:overlay;pointer-events:none;z-index:0}

/* Ouverture : la matière du voile se dissout dans le papier, puis se reforme en corail avant la séance */
/* le bas de l'accueil s'assombrit doucement vers la couleur où commence l'accroche : plus de ligne entre les deux
   (les règles verrouillées de l'accueil ne changent pas, on pose un voile par-dessus, sous la ligne du bas) */
.hero::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:clamp(140px,24vh,240px);background:linear-gradient(to bottom,#3a201b00 0%,#3a201b8c 55%,#3a201b 100%);pointer-events:none}
.hero-bottom{z-index:1}
/* Accroche : le voile se dissout dans le papier, la lumière y passe en vitrail, puis le papier se réchauffe en
   corail et en terracotta jusqu'à la trame des fascias. Deux halos sur les côtés (pêche, rose mauve) annoncent la
   palette du site sans toucher la zone du texte. */
.ouverture{--ouv-haut:clamp(240px,22vw,340px);--ouv-bas:min(560px,50%);--ouv-fin:100%;position:relative;display:flex;align-items:center;justify-content:center;min-height:100lvh;padding:var(--ouv-haut) 12% clamp(150px,22vh,240px);text-align:center;
  background:radial-gradient(34% 30% at 4% 46%,#f6bfa3cc 0%,#f6bfa3c3 9%,#f6bfa3ac 18%,#f6bfa38b 27%,#f6bfa366 36%,#f6bfa341 45%,#f6bfa320 54%,#f6bfa309 63%,#f6bfa300 72%),radial-gradient(32% 28% at 97% 60%,#e7b3c7b8 0%,#e7b3c7b0 9%,#e7b3c79b 18%,#e7b3c77e 27%,#e7b3c75c 36%,#e7b3c73a 45%,#e7b3c71d 54%,#e7b3c708 63%,#e7b3c700 72%),
    linear-gradient(to bottom,#3a201b 0,#4f2b25 9%,#7d4a3e 26%,#b98571 54%,#e6c3ad 81%,#f8eade 96%,#fbf3e800 100%) center top/100% var(--ouv-haut) no-repeat,
    linear-gradient(to bottom,#fbf3e800 0,#f8e2d3 calc(var(--ouv-fin) * .07),#f1c2aa calc(var(--ouv-fin) * .2),#e3957b calc(var(--ouv-fin) * .38),#c96a54 calc(var(--ouv-fin) * .56),#9c4635 calc(var(--ouv-fin) * .76),#5e2a25 var(--ouv-fin)) center bottom/100% var(--ouv-bas) no-repeat,
    var(--papier)}
/* Les deux dégradés (sortie de la photo d'accueil en haut, entrée dans les fascias en bas) sont des couches de
   hauteur propre, ancrées en haut et en bas : sur un écran court, ils ne se marchent plus dessus (avant, des arrêts
   comptés depuis les deux bords se croisaient et le dégradé tombait en marche, mesuré ΔE 39 sur 40 px à 390 px).
   Les arrêts sont espacés selon l'écart de couleur (OKLab) : la pente reste égale, sans palier ni marche. Le dégradé du haut
   finit là où le texte commence (--ouv-haut) : le texte est toujours posé sur le papier. */
/* avec le script (classe defile) : la phrase seule, posée au milieu de l'écran (sticky), sur le même fond vivant que la
   séance (matière lente, halo, deux cercles, grain), collé à l'écran dans toute la section, dont l'éclairage suit le
   défilement (site.js, dessinerOuverture) : brun de la photo d'accueil, terracotta sous la phrase, brun du haut des
   fascias. Comme entre la séance et ses voisins, rien ne commence sur une ligne : le haut sort du brun de la photo par un
   voile en fondu (smootherstep, ::before), les fascias montent en fondu sur le bas (--chev). Le fond est collant dans
   une couche absolue de toute la hauteur de la section (sinon il s'arrêterait au contenu, au-dessus de la marge du bas,
   et son bord se verrait). Règle : doc/ref/SITE_FRONTIERES_DE_COULEUR.md. */
.ouverture.defile{display:block;min-height:0;text-align:center;isolation:isolate;background:#3a201b;--ouv-entree:clamp(200px,30vh,300px)}
.ouverture.defile>canvas{display:none}
.ouv-fond{display:none}
.ouverture.defile>.ouv-fond{display:block;position:absolute;z-index:0;inset:0;pointer-events:none}
.ouv-fond-colle{position:sticky;top:0;height:100lvh;overflow:hidden;
  background:radial-gradient(46% 56% at 88% 18%,color-mix(in oklab,var(--oh,#8a4a36) 55%,transparent) 0%,transparent 72%),radial-gradient(70% 60% at 0% 100%,var(--o0,#2a1513) 0%,transparent 72%),linear-gradient(165deg,var(--o2,#48261f) 0%,var(--o1,#3a201b) 50%,var(--o0,#2a1513) 100%)}
.ouv-fond-colle::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.32;mix-blend-mode:overlay}
.ouv-fond-colle canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ouverture.defile::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:var(--ouv-entree);pointer-events:none;background:linear-gradient(to bottom,#3a201bff 0%,#3a201bfd 10%,#3a201bf0 20%,#3a201bd5 30%,#3a201bae 40%,#3a201b80 50%,#3a201b51 60%,#3a201b2a 70%,#3a201b0f 80%,#3a201b02 90%,#3a201b00 100%)}
.ouverture.defile p{position:sticky;z-index:2;top:50%;transform:translateY(-50%);margin:0 auto;max-width:20em;font-size:var(--t-accroche);line-height:1.2;text-wrap:balance;color:#fbefe4;
  text-shadow:0 0 2px #2917194d,0 2px 30px #29171980}
.ouverture.defile em{color:var(--peche-texte)}
.ouverture p{position:relative;z-index:1;font-family:var(--serif);font-size:var(--t-accroche);line-height:1.28;max-width:24em;color:var(--encre)}
/* lumière de vitrail (WebGL) : des flaques de lumière colorée flottent sur le papier, en multiplication */
.ouverture>canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block;pointer-events:none;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to bottom,#00000000 19%,#00000007 21.1%,#0000001b 23.2%,#00000037 25.3%,#0000005a 27.4%,#00000080 29.5%,#000000a5 31.6%,#000000c8 33.7%,#000000e4 35.8%,#000000f8 37.9%,#000000ff 40%,#000000ff 63%,#000000f8 65.4%,#000000e4 67.8%,#000000c8 70.2%,#000000a5 72.6%,#00000080 75%,#0000005a 77.4%,#00000037 79.8%,#0000001b 82.2%,#00000007 84.6%,#00000000 87%);mask-image:linear-gradient(to bottom,#00000000 19%,#00000007 21.1%,#0000001b 23.2%,#00000037 25.3%,#0000005a 27.4%,#00000080 29.5%,#000000a5 31.6%,#000000c8 33.7%,#000000e4 35.8%,#000000f8 37.9%,#000000ff 40%,#000000ff 63%,#000000f8 65.4%,#000000e4 67.8%,#000000c8 70.2%,#000000a5 72.6%,#00000080 75%,#0000005a 77.4%,#00000037 79.8%,#0000001b 82.2%,#00000007 84.6%,#00000000 87%)}
.ouverture em{color:#722819}

/* Séance : dégradés vivants, texte blanc, photos fondues dans la lumière */
.seance{position:relative;color:var(--blanc);padding:0 0 clamp(56px,7vh,96px);background:var(--g-tete)}
/* les couleurs courantes du fond, posées par site.js à chaque position de défilement (dégradé de secours sans WebGL) */
.seance{--f0:#8a3a30;--f1:#a8473d;--f2:#bd5640;--fh:#f5a07c}
.seance>*:not(.seance-fond){position:relative;z-index:1}
.seance-fond{display:none}
.seance h2{color:var(--blanc)}
.seance .promesse{color:var(--blanc)}
.seance .chapeau{color:var(--blanc-doux);max-width:26em;margin-top:18px}
.seance .temps-texte{line-height:1.58}
/* un voile très doux derrière les textes de la séance : le fond vivant s'éclaircit parfois sous eux (mesuré le 06/10 :
   5e centile du contraste à 3,9 sur téléphone). Sans bord ni forme lisible, il ne se voit pas comme une boîte.
   Débord latéral de 4 % seulement : il reste dans la marge de la page (sinon la page devient plus large que l'écran). */
.seance .tete-texte,.seance .temps-texte{position:relative;isolation:isolate}
/* et une ombre de texte discrète, de la même famille que celle des blocs des fascias */
.seance .chapeau,.seance .temps-texte p{text-shadow:0 0 2px #2917194d,0 1px 16px #29171966}
/* sa teinte suit celle de la séance (--f0, le plus sombre de son fond) : un brun fixe restait en tache sur un fond vert */
.seance .tete-texte::before,.seance .temps-texte::before{content:'';position:absolute;z-index:-1;inset:-12% -4%;pointer-events:none;background:color-mix(in oklab,var(--f0) 78%,#000);-webkit-mask-image:radial-gradient(closest-side,#00000076 25%,#00000071 34.4%,#00000064 43.8%,#00000051 53.1%,#0000003b 62.5%,#00000025 71.9%,#00000012 81.2%,#00000005 90.6%,#00000000 100%);mask-image:radial-gradient(closest-side,#00000076 25%,#00000071 34.4%,#00000064 43.8%,#00000051 53.1%,#0000003b 62.5%,#00000025 71.9%,#00000012 81.2%,#00000005 90.6%,#00000000 100%)}
.chapitre-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 5vw;align-items:center;padding:clamp(64px,9vh,104px) var(--pad) clamp(8px,2vh,24px)}
/* les trois temps en trois cercles qui se chevauchent (d'après REF-796e12e12e) */
.trois-temps{display:flex;justify-content:center;align-items:center;gap:0;padding:12px 0}
.trois-temps a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:clamp(150px,13vw,200px);aspect-ratio:1;margin:0 -1.2vw;border:1px solid #fff7efb8;border-radius:50%;text-align:center;font-size:var(--t-petit);line-height:1.2;color:var(--blanc);padding:18px;background:#34101a38;transition:background-color .3s ease}
.trois-temps a:hover{text-decoration:none;background:#34101a14}
.trois-temps a:focus-visible{outline-color:var(--blanc)}
.trois-temps .signe{height:40px;filter:invert(1);opacity:.92}
.temps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);align-items:center;padding:clamp(20px,3.5vh,44px) var(--pad)}
.temps[data-lumiere="1"]{background:var(--g-1)}
.temps[data-lumiere="2"]{background:var(--g-2)}
.temps[data-lumiere="3"]{background:var(--g-3)}
.temps>*{grid-row:1;min-width:0}
.temps-texte{max-width:33rem}
.temps>.temps-texte:first-child{grid-column:1 / span 5}
.temps>.temps-texte:last-child{grid-column:8 / span 5}
.temps>figure[data-taille="l"]:last-child{grid-column:7 / -1;margin-right:calc(-1 * var(--pad))}
.temps>figure[data-taille="l"]:first-child{grid-column:1 / span 6;margin-left:calc(-1 * var(--pad))}
.temps>figure[data-taille="m"]:first-child{grid-column:2 / span 4}
.temps>figure[data-taille="m"]:last-child{grid-column:8 / span 4}
.temps>figure[data-taille="s"]:first-child{grid-column:2 / span 3}
.temps>figure[data-taille="s"]:last-child{grid-column:9 / span 3}
.temps>figure[data-alignement="fin"]:first-child{grid-column-start:3}
.temps>figure[data-alignement="debut"]:last-child{grid-column-start:7}
.photo{overflow:hidden;position:relative}
.photo img,.benefices-fond img,.portrait img,.cabinet-photo img{object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%)}
/* Photos (révision du 06/10, traitement « fondu lumineux ») : sur grand écran, chaque photo est une ellipse dont les
   bords se fondent dans la lumière du fond ; sur téléphone, une bande pleine largeur fondue en haut et en bas (voir
   plus bas). La feuille et la tulipe gardent leurs verts (fonds verts revenus le 06/10 après-midi) ; le grain du site
   passe dessus comme sur le fond. */
.seance .photo,.seance .temps>figure:first-child.photo{-webkit-mask-image:radial-gradient(closest-side,#000000ff 42%,#000000f8 47.8%,#000000e4 53.6%,#000000c8 59.4%,#000000a5 65.2%,#00000080 71%,#0000005a 76.8%,#00000037 82.6%,#0000001b 88.4%,#00000007 94.2%,#00000000 100%);mask-image:radial-gradient(closest-side,#000000ff 42%,#000000f8 47.8%,#000000e4 53.6%,#000000c8 59.4%,#000000a5 65.2%,#00000080 71%,#0000005a 76.8%,#00000037 82.6%,#0000001b 88.4%,#00000007 94.2%,#00000000 100%)}
.seance .photo[data-taille="m"],.seance .photo[data-taille="s"]{border-radius:50%;-webkit-mask-image:radial-gradient(closest-side,#000000ff 60%,#000000f8 64%,#000000e4 68%,#000000c8 72%,#000000a5 76%,#00000080 80%,#0000005a 84%,#00000037 88%,#0000001b 92%,#00000007 96%,#00000000 100%);mask-image:radial-gradient(closest-side,#000000ff 60%,#000000f8 64%,#000000e4 68%,#000000c8 72%,#000000a5 76%,#00000080 80%,#0000005a 84%,#00000037 88%,#0000001b 92%,#00000007 96%,#00000000 100%)}
.seance .photo img{filter:sepia(.16) saturate(.9) hue-rotate(-6deg)}
/* la feuille et la tulipe gardent leurs verts : leurs fonds sont redevenus verts (06/10 après-midi) */
.seance .photo-tulipe img{filter:saturate(.96)}
/* la feuille, rétroéclairée, sort en vert citron sur le vert de sauge : un peu moins saturée (relecture du 06/10) */
.seance .photo-mains img{filter:saturate(.84)}
.seance .photo::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.3;mix-blend-mode:overlay;pointer-events:none}
.photo-toucher{aspect-ratio:1/1}
.photo-mains{aspect-ratio:1/1}
.photo-tulipe{aspect-ratio:5/6}
.seance .temps>figure.photo[data-taille="l"]{max-height:70vh}
.temps-titre .signe{margin-bottom:12px;filter:invert(1);opacity:.9;height:52px}
.seance h3{color:var(--blanc)}
.qualite{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--t-chapeau);line-height:1.3;color:var(--corail);margin-top:.4em}
.seance .qualite{color:#fff0e2}
.temps-titre+p{margin-top:16px;color:var(--blanc)}
/* lumière continue : un fond collé à l'écran dont les couleurs sont une fonction continue du défilement
   (site.js, interpolation OKLab entre les ancres de chaque temps) : aucune bascule, aucun fondu dans le temps.
   Le fond commence au bord haut de la séance, recouvrement compris (sinon une ligne nette apparaît là où le
   recouvrement finit) ; ses marges s'annulent pour ne prendre aucune place. */
.seance.lumiere-continue{background:linear-gradient(170deg,var(--f2),var(--f1) 55%,var(--f0))}
.seance.lumiere-continue .seance-fond{display:block;position:sticky;top:0;height:100lvh;margin-top:calc(-1 * var(--recouvre,0px));margin-bottom:calc(var(--recouvre,0px) - 100lvh);z-index:0;pointer-events:none;
  background:radial-gradient(46% 56% at 86% 40%,color-mix(in oklab,var(--fh) 62%,transparent) 0%,transparent 72%),radial-gradient(70% 60% at 0% 100%,var(--f0) 0%,transparent 72%),linear-gradient(165deg,var(--f2) 0%,var(--f1) 50%,var(--f0) 100%)}
.seance.lumiere-continue .seance-fond i{display:none}
.seance.lumiere-continue .seance-fond::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.32;mix-blend-mode:overlay}
.seance-fond canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.seance.lumiere-continue .temps{background:none}

/* Fascias : scène composée, titre stable, blocs acquis qui restent */
.journey{position:relative;color:var(--creme-sur-sombre)}
.fascia-stage{position:relative;overflow:hidden;background:var(--fascia)}
.scene{position:absolute;inset:0}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene video{filter:saturate(.96)}
/* la fleur (img.flower, encore dans le contenu) n'est plus montrée : l'accroche mène droit à la vidéo et la trame */
.flower{display:none}
.veil{position:absolute;inset:0;background:#fff1dc12}
.shade{position:absolute;inset:0;background:radial-gradient(60% 42% at 18% 12%,#2917198c 0%,#29171986 12.5%,#29171976 25%,#29171960 37.5%,#29171946 50%,#2917192c 62.5%,#29171916 75%,#29171906 87.5%,#29171900 100%),linear-gradient(90deg,#29171966 0%,#29171926 38%,#29171926 62%,#29171973 100%),linear-gradient(180deg,#29171980,#2917194d 34%,#29171966 60%,#291719c2)}
/* le bas des fascias monte vers la couleur du haut de la séance (la vidéo, elle, garde son brun d'origine : demande de
   Raph, 18/10). Mesuré par tests/test_fond_fascias.py. */
.fascia-stage .scene{isolation:isolate}
.fascia-stage .scene::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#a8473d00 0%,#a8473d00 calc(100% - var(--fondu) * 2.2),#a8473d66 calc(100% - var(--fondu) * 1.2),#b0503fe0 100%)}
.fascia-layout{position:relative;padding:clamp(64px,10vh,110px) var(--pad) clamp(72px,11vh,120px)}
.fascia-layout h2{max-width:14em;text-shadow:0 1px 24px #2917194d}
.fascia-bloc{position:relative;max-width:34rem;margin-top:44px;padding-left:64px}
.fascia-bloc p{font-size:var(--t-chapeau);line-height:1.46;text-wrap:pretty;text-shadow:0 0 2px #29171966,0 1px 22px #2917198c}
/* en flux (mobile, sans script, mouvement réduit) : une capsule arrondie relie trois cercles numérotés */
.fascia-bloc .num{position:absolute;left:0;top:-4px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #fff3e6b8;border-radius:50%;font-size:var(--t-petit);letter-spacing:.06em;background:#2917194d}
.fascia-layout::before{content:'';position:absolute;left:calc(var(--pad) + 21px);width:0;border-left:1px solid #fff3e673;top:var(--fil-haut,calc(clamp(64px,10vh,110px) + 150px));bottom:clamp(72px,11vh,120px)}
.journey:not(.is-sticky) .fascia-layout::before{bottom:calc(clamp(72px,11vh,120px) + var(--fondu))}
.trame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.trame path,.trame rect,.trame circle.contour{fill:none;stroke:#fff3e6;stroke-opacity:.66;stroke-width:1;vector-effect:non-scaling-stroke}
.trame circle.point{fill:#fff3e6}
.trame text{fill:#fff6ec;font:var(--t-petit) var(--sans);letter-spacing:.08em;text-anchor:middle;dominant-baseline:central}
/* en flux, le signe tient la tête du fil vertical : centré sur lui, le fil part sous lui (site.js pose --fil-haut) */
.signe-trame{position:relative;left:21px;transform:translateX(-50%);height:44px;filter:invert(1);opacity:.85;margin:28px 0 0}
/* 280svh (420 avant le 06/10 après-midi : « la deuxième section plus courte ») : le premier paragraphe arrive presque
   tout de suite, chaque temps garde environ 0,4 écran de défilement pour lui seul */
.journey.is-sticky{height:280svh}
.is-sticky .fascia-stage{position:sticky;top:0;height:100svh}
.is-sticky .fascia-layout::before{display:none}
.is-sticky .trame{display:block}
.is-sticky .fascia-bloc{opacity:calc(var(--acquired,1) * var(--sortie,1));transform:translateY(calc((1 - var(--acquired,1)) * 14px))}
.is-sticky .fascia-layout h2{opacity:calc(var(--titre,1) * var(--sortie,1))}
/* écran étroit (site.js, classe etroit) : la capsule à gauche, les trois paragraphes à sa droite ; tailles du texte
   calculées par site.js (ajusterEtroit, --fas-p et --fas-t) pour remplir la scène sans déborder */
.is-sticky.etroit .fascia-layout{grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(min-content,1fr));column-gap:18px;row-gap:1svh;padding:max(7svh,52px) var(--pad) 4svh}
.is-sticky.etroit .fascia-layout h2{font-size:var(--fas-t,clamp(30px,8.4vw,36px))}
.is-sticky.etroit .b1,.is-sticky.etroit .b2,.is-sticky.etroit .b3{grid-column:2;justify-self:start}
.is-sticky.etroit .fascia-bloc p{font-size:var(--fas-p,clamp(17px,4.8vw,19px));line-height:1.4}
.is-sticky.etroit .trame text{font-size:14px}
.is-sticky .fascia-layout>svg{opacity:var(--sortie,1)}
/* le signe paraît avec la capsule qu'il couronne */
.is-sticky .signe-trame{opacity:calc(var(--sortie,1) * var(--signe-o,1) * .85)}
.is-sticky .fascia-stage{-webkit-mask-image:linear-gradient(to bottom,#00000000 var(--entree,-100vh),#00000007 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.1),#0000001b calc(var(--entree,-100vh) + var(--chev) * .85 * 0.2),#00000037 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.3),#0000005a calc(var(--entree,-100vh) + var(--chev) * .85 * 0.4),#00000080 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.5),#000000a5 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.6),#000000c8 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.7),#000000e4 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.8),#000000f8 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.9),#000000ff calc(var(--entree,-100vh) + var(--chev) * .85 * 1));mask-image:linear-gradient(to bottom,#00000000 var(--entree,-100vh),#00000007 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.1),#0000001b calc(var(--entree,-100vh) + var(--chev) * .85 * 0.2),#00000037 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.3),#0000005a calc(var(--entree,-100vh) + var(--chev) * .85 * 0.4),#00000080 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.5),#000000a5 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.6),#000000c8 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.7),#000000e4 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.8),#000000f8 calc(var(--entree,-100vh) + var(--chev) * .85 * 0.9),#000000ff calc(var(--entree,-100vh) + var(--chev) * .85 * 1))}
/* composition « colonne » (retenue) : capsule au centre, trois cercles, paragraphes alternés reliés par des filets à point */
.is-sticky .fascia-layout{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,10vw,168px) minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(0,1fr));column-gap:clamp(24px,2.6vw,48px);row-gap:1.5svh;padding:6svh calc(var(--pad) * .7) 6svh}
.is-sticky .fascia-layout h2{grid-row:1;grid-column:1 / -1;justify-self:start}
.is-sticky .fascia-bloc{margin:0;padding:0;max-width:38rem;align-self:center}
.is-sticky .fascia-bloc .num{display:none}
.is-sticky .b1{grid-column:3;grid-row:2}
.is-sticky .b2{grid-column:1;grid-row:3;justify-self:end}
.is-sticky .b3{grid-column:3;grid-row:4}
/* dans la scène, le signe est la tête de la capsule : posé dans son arrondi du haut, au-dessus du cercle 01 ; s'il n'a
   pas la place, site.js le pose juste au-dessus de la capsule, plus petit au besoin, ou à gauche du cercle 01 ; il
   n'est jamais caché, ni posé sur le titre */
.is-sticky .signe-trame{position:absolute;margin:0;left:var(--signe-x,50%);top:var(--signe-y,0);height:var(--signe-h,40px);transform:translate(-50%,-50%)}
/* composition « vague » : trois blocs de même largeur sur une courbe douce */
.is-sticky[data-composition="vague"] .fascia-layout{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(20px,1fr) auto auto minmax(20px,.6fr);row-gap:0}
.is-sticky[data-composition="vague"] .b1{grid-column:1;grid-row:3;justify-self:start}
.is-sticky[data-composition="vague"] .b2{grid-column:2;grid-row:4;justify-self:start}
.is-sticky[data-composition="vague"] .b3{grid-column:3;grid-row:3;justify-self:start}

/* Bénéfices : plein cadre, fondu long, la photo se dissout dans un dégradé pêche */
.benefices{position:relative;isolation:isolate;z-index:2;color:var(--encre);background:var(--g-peche)}
/* jamais plus haute que la section (sinon, section raccourcie, la photo déborde sur Anne et une ligne paraît à leur jointure) */
.benefices-fond{position:absolute;z-index:-1;inset:0 0 auto;height:min(150vh,1450px,100%);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000000ff 32%,#000000f8 38%,#000000e4 44%,#000000c8 50%,#000000a5 56%,#00000080 62%,#0000005a 68%,#00000037 74%,#0000001b 80%,#00000007 86%,#00000000 92%);mask-image:linear-gradient(to bottom,#000000ff 32%,#000000f8 38%,#000000e4 44%,#000000c8 50%,#000000a5 56%,#00000080 62%,#0000005a 68%,#00000037 74%,#0000001b 80%,#00000007 86%,#00000000 92%)}
.benefices-fond img{height:100%}
.benefices-fond::after{content:'';position:absolute;inset:0;background:radial-gradient(75% 80% at 0% 58%,#fbe6d4f5 0%,#fbe6d4cc 48%,#fbe6d400 80%),linear-gradient(90deg,#fbe6d4e6 0%,#fbe6d4bd 40%,#fbe6d400 74%)}
.benefices-ouverture{padding:clamp(96px,16vh,180px) var(--pad) clamp(24px,4vh,48px)}
.benefices h2{color:var(--rouge);max-width:9.6em}
.benefices .rubrique{color:#7c291e}
.benefices-points{margin-top:clamp(28px,4.5vh,48px);max-width:min(48rem,60vw)}
.benefices-points li>span{text-wrap:balance}
.benefices-points ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:clamp(12px,1.8vh,20px)}
.benefices-points li{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:22px;font-family:var(--serif);font-size:var(--t-voix);line-height:1.14;color:var(--encre)}
.benefices-points li em{color:var(--corail)}
.benefices-points .signe{height:46px;width:52px;opacity:.8}
.benefices-corps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);padding:clamp(40px,7vh,80px) var(--pad) clamp(64px,9vh,112px);align-items:start}
.pour-qui{grid-column:6 / span 6;max-width:36rem}
.pour-qui .chapeau{margin-top:12px}

/* Anne */
/* de la pêche des bénéfices vers le mauve du rendez-vous : chaque chapitre commence exactement sur la couleur où finit
   le précédent, et la teinte glisse d'un cran vers le rose mauve */
.anne{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);padding:clamp(40px,8vh,90px) var(--pad) var(--espace-chapitre);background:radial-gradient(50% 32% at 100% 42%,#f6d3c8ff 0%,#f6d3c8f4 8.8%,#f6d3c8d7 17.5%,#f6d3c8ae 26.2%,#f6d3c880 35%,#f6d3c851 43.8%,#f6d3c828 52.5%,#f6d3c80b 61.2%,#f6d3c800 70%),linear-gradient(to bottom,#f9e8dd,#f8e7e1 40%,#f6e3e2 100%);color:var(--encre);align-items:start}
/* Portrait (deuxième tour, 06/10 après-midi : « l'animation de scroll de sa photo perso est un peu bizarre ») :
   plus d'effet collant ni de médaillon fondu. Une composition calme : la photo et la présentation côte à côte, leurs
   hauts alignés sur le titre ; une photo nette aux coins doucement arrondis, posée en multiplication (le mur blanc
   prend le rose du chapitre). Une seule apparition, sobre (site.js pose « vu » à l'entrée dans l'écran). */
.anne{align-items:start}
.portrait{grid-column:1 / span 5;position:relative;aspect-ratio:4/5;max-height:80vh;overflow:hidden;border-radius:22px;mix-blend-mode:multiply}
.portrait img{filter:sepia(.08) saturate(.96)}
.js .portrait{transition:opacity 1.1s var(--ease-sortie),transform 1.1s var(--ease-sortie)}
.js .portrait:not(.vu){opacity:0;transform:translateY(18px)}
.anne-texte{grid-column:7 / -1;max-width:36rem}
.anne h2{color:var(--rouge)}
.anne .promesse{font-size:var(--t-chapeau);color:var(--encre-douce)}
.anne hgroup+p{margin-top:26px}
.citation{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--t-voix);line-height:1.2;color:var(--rouge);margin:40px 0 0;max-width:16em}
.citation em{color:var(--encre)}
.complementaire{margin-top:44px;padding-top:20px;border-top:1px solid #45292b38}
.complementaire p{font-size:var(--t-petit);line-height:1.6;color:var(--encre-douce)}
.lien-anne{margin-top:24px;font-size:var(--t-petit)}

/* Rendez-vous : dernier chapitre, le prix au premier regard, sur un halo chaud */
.rdv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);min-height:100svh;padding:0 var(--pad) 0;color:var(--encre);background:radial-gradient(45% 50% at 12% 58%,#f8c9aeff 0%,#f8c9aef4 8.8%,#f8c9aed7 17.5%,#f8c9aeae 26.2%,#f8c9ae80 35%,#f8c9ae51 43.8%,#f8c9ae28 52.5%,#f8c9ae0b 61.2%,#f8c9ae00 70%),radial-gradient(60% 55% at 100% 100%,#d9cbe6ff 0%,#d9cbe6f4 8.8%,#d9cbe6d7 17.5%,#d9cbe6ae 26.2%,#d9cbe680 35%,#d9cbe651 43.8%,#d9cbe628 52.5%,#d9cbe60b 61.2%,#d9cbe600 70%),linear-gradient(180deg,#f2dfe3 0%,#f4dcd6 30%,#eed6dc 64%,var(--lavande) 100%)}
.rdv-texte{grid-column:1 / span 5;grid-row:1;align-self:center;padding:var(--espace-chapitre) 0}
.rdv h2{color:var(--rouge)}
.tarif{position:relative;display:grid;grid-template-columns:auto;margin-top:clamp(28px,4vh,48px);font-family:var(--serif);line-height:1.1;isolation:isolate}
.tarif::before{content:'';position:absolute;z-index:-1;left:-8%;top:-18%;width:min(78%,24rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f4a88acc 0%,#f6bca466 42%,#f6bca400 70%);filter:blur(6px)}
.tarif-mot{font-family:var(--sans);font-size:var(--t-petit);letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-bottom:14px}
.tarif-duree,.tarif-prix{font-size:var(--t-prix);letter-spacing:-.03em;white-space:nowrap}
.tarif-prix{color:#9f3824}
.tarif-point{display:none}
.rdv-contact{position:relative;margin-top:34px;padding-top:34px}
/* filet arrondi : un arc doux relie le prix au téléphone */
.rdv-contact::before{content:'';position:absolute;top:0;left:0;width:min(100%,22rem);height:26px;border:1px solid #45292b55;border-color:#45292b55 transparent transparent #45292b55;border-radius:26px 0 0 0}
.tel{display:block;font-family:var(--serif);font-size:var(--t-chiffre);line-height:1.1;white-space:nowrap}
.actions{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px}
.actions a{border-bottom:1px solid;padding:10px 0;min-height:48px;display:inline-flex;align-items:center;gap:10px}
.cabinet-adresse{margin-top:44px}
.adresse{font-size:var(--t-chapeau);line-height:1.4;margin-top:10px}
/* la fleur sur fond mauve : bords fondus à gauche, en haut et en bas (elle rejoint la lavande du pied de page) */
.cabinet-photo{grid-column:7 / -1;grid-row:1;margin-right:calc(-1 * var(--pad));position:relative;overflow:hidden;min-height:100svh;-webkit-mask-image:linear-gradient(to right,#00000000 0%,#00000007 3.6%,#0000001b 7.2%,#00000037 10.8%,#0000005a 14.4%,#00000080 18%,#000000a5 21.6%,#000000c8 25.2%,#000000e4 28.8%,#000000f8 32.4%,#000000ff 36%),linear-gradient(to bottom,#00000000 0%,#00000007 1.8%,#0000001b 3.6%,#00000037 5.4%,#0000005a 7.2%,#00000080 9%,#000000a5 10.8%,#000000c8 12.6%,#000000e4 14.4%,#000000f8 16.2%,#000000ff 18%,#000000ff 82%,#000000f8 83.8%,#000000e4 85.6%,#000000c8 87.4%,#000000a5 89.2%,#00000080 91%,#0000005a 92.8%,#00000037 94.6%,#0000001b 96.4%,#00000007 98.2%,#00000000 100%);mask-image:linear-gradient(to right,#00000000 0%,#00000007 3.6%,#0000001b 7.2%,#00000037 10.8%,#0000005a 14.4%,#00000080 18%,#000000a5 21.6%,#000000c8 25.2%,#000000e4 28.8%,#000000f8 32.4%,#000000ff 36%),linear-gradient(to bottom,#00000000 0%,#00000007 1.8%,#0000001b 3.6%,#00000037 5.4%,#0000005a 7.2%,#00000080 9%,#000000a5 10.8%,#000000c8 12.6%,#000000e4 14.4%,#000000f8 16.2%,#000000ff 18%,#000000ff 82%,#000000f8 83.8%,#000000e4 85.6%,#000000c8 87.4%,#000000a5 89.2%,#00000080 91%,#0000005a 92.8%,#00000037 94.6%,#0000001b 96.4%,#00000007 98.2%,#00000000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.cabinet-photo img{filter:saturate(1.05)}
.cabinet-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 42% 18%,#ffd9a84d 0%,#ffd9a84a 6.9%,#ffd9a841 13.8%,#ffd9a835 20.6%,#ffd9a826 27.5%,#ffd9a818 34.4%,#ffd9a80c 41.2%,#ffd9a803 48.1%,#ffd9a800 55%);mix-blend-mode:soft-light;pointer-events:none}

footer{display:flex;gap:25px;justify-content:space-between;align-items:center;padding:35px 5%;background:var(--lavande);color:var(--lavande-profonde)}
footer p,footer button{font-size:var(--t-petit)}
footer button{background:none;border:0;border-bottom:1px solid;color:inherit;padding:10px 0;min-height:44px}
.motion-paused *{animation-play-state:paused!important}

/* 4. Fil conducteur, transitions, compositions ---------------------------- */
.fil{position:absolute;top:0;bottom:0;left:var(--fil-x);width:1px;background:currentColor;opacity:.26;transform-origin:top;pointer-events:none}
.fil::before{content:'';position:absolute;top:calc(var(--espace-chapitre) + .5em);left:-5px;width:11px;height:11px;border-radius:50%;border:1px solid currentColor;background:transparent}
.seance .fil{opacity:.34}
.seance .fil::before{top:calc(clamp(72px,10vh,120px) + .5em)}
.benefices .fil{top:min(150vh,1450px);opacity:.3}
.benefices .fil::before{display:none}
.anne .fil::before{top:clamp(40px,8vh,90px)}
.rdv .fil{bottom:auto;height:var(--fil-fin,62%)}
.rdv .fil::after{content:'';position:absolute;bottom:-5px;left:-5px;width:11px;height:11px;border-radius:50%;background:currentColor}

/* Recouvrements : aucun chapitre ne commence sur une ligne. Le suivant remonte de --recouvre sur la fin du
   précédent et y entre en fondu (masque), en toutes largeurs et même en mouvement réduit (c'est une forme, pas un
   mouvement) : la couleur passe d'un chapitre à l'autre au rythme exact du défilement, dans les deux sens. */
.journey+.seance,.journey+.benefices,.seance+.benefices,.seance+.journey{--recouvre:var(--fondu);position:relative;z-index:2;margin-top:calc(-1 * var(--recouvre));padding-top:var(--recouvre);-webkit-mask-image:linear-gradient(to bottom,#00000000 0,#00000007 calc(var(--recouvre) * 0.1),#0000001b calc(var(--recouvre) * 0.2),#00000037 calc(var(--recouvre) * 0.3),#0000005a calc(var(--recouvre) * 0.4),#00000080 calc(var(--recouvre) * 0.5),#000000a5 calc(var(--recouvre) * 0.6),#000000c8 calc(var(--recouvre) * 0.7),#000000e4 calc(var(--recouvre) * 0.8),#000000f8 calc(var(--recouvre) * 0.9),#000000ff var(--recouvre));mask-image:linear-gradient(to bottom,#00000000 0,#00000007 calc(var(--recouvre) * 0.1),#0000001b calc(var(--recouvre) * 0.2),#00000037 calc(var(--recouvre) * 0.3),#0000005a calc(var(--recouvre) * 0.4),#00000080 calc(var(--recouvre) * 0.5),#000000a5 calc(var(--recouvre) * 0.6),#000000c8 calc(var(--recouvre) * 0.7),#000000e4 calc(var(--recouvre) * 0.8),#000000f8 calc(var(--recouvre) * 0.9),#000000ff var(--recouvre))}
/* fondu séance -> bénéfices plus long que l'espace réservé sous la séance (max(18vh,150px)) : il commence sur le bas de la
   dernière photo, jamais sur un texte, et le vert sombre de fin de séance ne tombe pas en bande sur le crème */
.seance+.benefices{--recouvre:max(34vh,280px)}
.seance+.benefices .benefices-ouverture{padding-top:clamp(24px,3vh,40px)}
.js .journey.is-sticky+.benefices,.js .journey.is-sticky+.seance{--recouvre:var(--recouvre-court)}
/* après la scène collante, le titre de la séance suit de près : son haut est déjà dans le recouvrement */
.js .journey.is-sticky+.seance .chapitre-tete{padding-top:clamp(12px,2vh,24px)}
.journey+.benefices .benefices-fond{height:min(calc(var(--recouvre) + min(150vh,1450px)),100%)}
.journey+.benefices .fil{top:calc(var(--recouvre) + min(150vh,1450px))}
.seance:has(+.journey){padding-bottom:calc(clamp(56px,7vh,96px) + var(--chev))}
.seance:has(+.benefices){padding-bottom:calc(clamp(16px,2vh,32px) + max(18vh,150px))}
/* la scène des fascias en flux (téléphone, mouvement réduit) arrive elle aussi en fondu sur l'accroche ;
   ses marges intérieures gardent le texte hors des zones de recouvrement */
.ouverture+.journey:not(.is-sticky),.seance+.journey:not(.is-sticky){position:relative;z-index:1;margin-top:calc(-1 * var(--fondu))}
.ouverture+.journey:not(.is-sticky) .fascia-stage,.seance+.journey:not(.is-sticky) .fascia-stage{-webkit-mask-image:linear-gradient(to bottom,#00000000 0,#00000007 calc(var(--fondu) * 0.1),#0000001b calc(var(--fondu) * 0.2),#00000037 calc(var(--fondu) * 0.3),#0000005a calc(var(--fondu) * 0.4),#00000080 calc(var(--fondu) * 0.5),#000000a5 calc(var(--fondu) * 0.6),#000000c8 calc(var(--fondu) * 0.7),#000000e4 calc(var(--fondu) * 0.8),#000000f8 calc(var(--fondu) * 0.9),#000000ff var(--fondu));mask-image:linear-gradient(to bottom,#00000000 0,#00000007 calc(var(--fondu) * 0.1),#0000001b calc(var(--fondu) * 0.2),#00000037 calc(var(--fondu) * 0.3),#0000005a calc(var(--fondu) * 0.4),#00000080 calc(var(--fondu) * 0.5),#000000a5 calc(var(--fondu) * 0.6),#000000c8 calc(var(--fondu) * 0.7),#000000e4 calc(var(--fondu) * 0.8),#000000f8 calc(var(--fondu) * 0.9),#000000ff var(--fondu))}
.journey:not(.is-sticky) .fascia-layout{padding-top:calc(clamp(64px,10vh,110px) + var(--fondu));padding-bottom:calc(clamp(72px,11vh,120px) + var(--fondu))}
.ouverture:has(+.journey:not(.is-sticky)){padding-bottom:calc(clamp(110px,16vh,180px) + var(--fondu) * .6)}
@media (prefers-reduced-motion:no-preference){
  .js .seance.chevauchement{padding-bottom:calc(clamp(56px,7vh,96px) + var(--chev))}
  .js .ouverture.chevauchement{padding-bottom:calc(clamp(110px,16vh,180px) + var(--chev))}
  .js .chevauchement+.journey.is-sticky{margin-top:calc(-1 * var(--chev))}
  @supports (animation-timeline:view()){
    .fil{animation:fil-trace linear both;animation-timeline:view();animation-range:entry 5% cover 50%}
    .benefices-fond img{animation:respiration linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes fil-trace{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes respiration{from{transform:scale(1.1) translateY(-1.5%)}to{transform:scale(1.01) translateY(1.5%)}}

.seance[data-composition="colonne"] .temps{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.seance[data-composition="colonne"] .temps>figure[data-taille]{margin:0;width:min(100%,56rem);align-self:flex-start}
.seance[data-composition="colonne"] .temps>figure[data-taille="l"]{width:calc(100% + var(--pad));margin-left:calc(-1 * var(--pad))}
.seance[data-composition="colonne"] .photo-toucher,.seance[data-composition="colonne"] .photo-tulipe{aspect-ratio:16/9}
.benefices[data-composition="image-droite"] .benefices-fond{left:auto;right:0;width:50%;-webkit-mask-image:radial-gradient(90% 80% at 70% 40%,#000000ff 40%,#000000f8 46%,#000000e4 52%,#000000c8 58%,#000000a5 64%,#00000080 70%,#0000005a 76%,#00000037 82%,#0000001b 88%,#00000007 94%,#00000000 100%);mask-image:radial-gradient(90% 80% at 70% 40%,#000000ff 40%,#000000f8 46%,#000000e4 52%,#000000c8 58%,#000000a5 64%,#00000080 70%,#0000005a 76%,#00000037 82%,#0000001b 88%,#00000007 94%,#00000000 100%)}
.benefices[data-composition="image-droite"] .benefices-fond::after{background:none}
.benefices[data-composition="image-droite"] .benefices-ouverture{max-width:min(46rem,50vw)}
.anne[data-composition="portrait-droite"] .portrait{grid-column:8 / -1;grid-row:1}
.anne[data-composition="portrait-droite"] .anne-texte{grid-column:1 / span 6;grid-row:1}
.rdv[data-composition="cabinet-gauche"] .cabinet-photo{grid-column:1 / span 6;margin-right:0;margin-left:calc(-1 * var(--pad));-webkit-mask-image:linear-gradient(to left,#00000000 0%,#00000007 3.6%,#0000001b 7.2%,#00000037 10.8%,#0000005a 14.4%,#00000080 18%,#000000a5 21.6%,#000000c8 25.2%,#000000e4 28.8%,#000000f8 32.4%,#000000ff 36%),linear-gradient(to bottom,#00000000 0%,#00000007 1.8%,#0000001b 3.6%,#00000037 5.4%,#0000005a 7.2%,#00000080 9%,#000000a5 10.8%,#000000c8 12.6%,#000000e4 14.4%,#000000f8 16.2%,#000000ff 18%,#000000ff 82%,#000000f8 83.8%,#000000e4 85.6%,#000000c8 87.4%,#000000a5 89.2%,#00000080 91%,#0000005a 92.8%,#00000037 94.6%,#0000001b 96.4%,#00000007 98.2%,#00000000 100%);mask-image:linear-gradient(to left,#00000000 0%,#00000007 3.6%,#0000001b 7.2%,#00000037 10.8%,#0000005a 14.4%,#00000080 18%,#000000a5 21.6%,#000000c8 25.2%,#000000e4 28.8%,#000000f8 32.4%,#000000ff 36%),linear-gradient(to bottom,#00000000 0%,#00000007 1.8%,#0000001b 3.6%,#00000037 5.4%,#0000005a 7.2%,#00000080 9%,#000000a5 10.8%,#000000c8 12.6%,#000000e4 14.4%,#000000f8 16.2%,#000000ff 18%,#000000ff 82%,#000000f8 83.8%,#000000e4 85.6%,#000000c8 87.4%,#000000a5 89.2%,#00000080 91%,#0000005a 92.8%,#00000037 94.6%,#0000001b 96.4%,#00000007 98.2%,#00000000 100%)}
.rdv[data-composition="cabinet-gauche"] .rdv-texte{grid-column:8 / -1}
.rdv[data-composition="cabinet-gauche"] .fil{display:none}

/* 5. Petits écrans -------------------------------------------------------- */
@media (max-width:1100px){
  .chapitre-tete{grid-template-columns:1fr;align-items:start}
  .trois-temps{justify-content:flex-start;padding-left:1.2vw}
  .benefices-corps{grid-template-columns:1fr}
  .pour-qui{grid-column:1 / -1;max-width:40rem}
}
@media (max-width:900px){
  header{padding:24px 6%;align-items:flex-start}
  nav>a:not(.nav-contact){display:none}
  .nav-contact{max-width:145px;line-height:1.3}
  .nav-contact span{display:none}
  .hero{min-height:760px}
  .hero-copy,.version-b .hero-copy{margin:0;padding:175px 6% 90px;max-width:650px}
  .hero-bottom{max-width:85%}
  .desktop{display:none}
  .version-b .image-plane img{object-position:38% center}
  .version-b .image-plane:after{background:linear-gradient(#30151199,transparent 95%)}
  .image-plane:after{background:linear-gradient(90deg,#fff4daeb,#fff4da55)}
  :root{--pad:6.5vw;--t-accroche:clamp(34px,9.6vw,54px);--t-corps:21px;--t-affiche:clamp(48px,7.6vw,72px);
    /* sur téléphone, le texte occupe toute la largeur : le halo reste en haut, derrière la photo */
    --g-tete:linear-gradient(180deg,#b54a3f 0%,#b54a3f00 26%),radial-gradient(70% 30% at 100% 0%,#f5a07c99 0%,#f5a07c92 9%,#f5a07c81 18%,#f5a07c69 27%,#f5a07c4c 36%,#f5a07c30 45%,#f5a07c18 54%,#f5a07c07 63%,#f5a07c00 72%),linear-gradient(175deg,#a8433f 0%,#8e3545 50%,#6a2840 100%);
    --g-1:radial-gradient(90% 38% at 50% 0%,#dd8a6690 0%,#dd8a668a 9%,#dd8a667a 18%,#dd8a6662 27%,#dd8a6648 36%,#dd8a662e 45%,#dd8a6617 54%,#dd8a6606 63%,#dd8a6600 72%),linear-gradient(180deg,#7d3431 0%,#5f2a2b 42%,#442022 100%);
    --g-2:radial-gradient(90% 38% at 50% 0%,#d6e29a70 0%,#d6e29a6b 9%,#d6e29a5e 18%,#d6e29a4d 27%,#d6e29a38 36%,#d6e29a23 45%,#d6e29a11 54%,#d6e29a05 63%,#d6e29a00 72%),linear-gradient(180deg,#56703a 0%,#435a2f 42%,#324526 100%);
    --g-3:radial-gradient(90% 38% at 50% 0%,#f6cf8280 0%,#f6cf827a 9%,#f6cf826c 18%,#f6cf8258 27%,#f6cf8240 36%,#f6cf8228 45%,#f6cf8214 54%,#f6cf8205 63%,#f6cf8200 72%),linear-gradient(180deg,#5d7153 0%,#475a3f 42%,#3a4b36 100%)}
  .fil{display:none}
  /* sur téléphone, la scène des fascias arrive en fondu sur le bas de l'accroche (--fondu) : le dégradé atteint le
     brun AVANT ce fondu, sinon les deux pentes s'additionnent (mesuré ΔE 10 par 20 px) ; le texte reste au-dessus */
  .ouverture,.ouverture:has(+.journey:not(.is-sticky)){--ouv-haut:260px;--ouv-fin:190px;--ouv-bas:calc(var(--ouv-fin) + var(--fondu));padding:var(--ouv-haut) 7% calc(var(--ouv-bas) + 24px);text-align:left;justify-content:flex-start;min-height:0}
  .ouverture.defile{min-height:0;text-align:center}
  .ouverture.defile br{display:inline}
  .ouverture br{display:none}
  .chapitre-tete{padding-top:64px;padding-bottom:28px}
  .trois-temps{flex-direction:column;align-items:flex-start;padding:4px 0 0}
  .trois-temps a{flex-direction:row;justify-content:flex-start;width:auto;aspect-ratio:auto;margin:0;border:0;border-radius:0;padding:8px 0;gap:16px;text-align:left;background:none}
  .trois-temps .signe{height:34px;width:44px}
  .temps{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:32px var(--pad) 40px}
  .temps>figure[data-taille]{margin:0;width:100%}
  .temps>figure[data-taille="l"]{margin:0 calc(-1 * var(--pad));width:auto}
  .temps>figure[data-taille="m"],.temps>figure[data-taille="s"]{width:74%;align-self:center}
  .temps>.photo{order:-1}
  /* téléphone : la grande photo prend toute la largeur, bords nets contre les bords de l'écran, fondue en haut et en
     bas seulement (06/10 après-midi : l'ellipse fondue sur quatre côtés faisait une tache de lumière artificielle) */
  .seance .temps>figure.photo[data-taille="l"]{-webkit-mask-image:linear-gradient(to bottom,#00000000 0%,#00000007 3.4%,#0000001b 6.8%,#00000037 10.2%,#0000005a 13.6%,#00000080 17%,#000000a5 20.4%,#000000c8 23.8%,#000000e4 27.2%,#000000f8 30.6%,#000000ff 34%),linear-gradient(to top,#00000000 0%,#00000007 3.4%,#0000001b 6.8%,#00000037 10.2%,#0000005a 13.6%,#00000080 17%,#000000a5 20.4%,#000000c8 23.8%,#000000e4 27.2%,#000000f8 30.6%,#000000ff 34%);mask-image:linear-gradient(to bottom,#00000000 0%,#00000007 3.4%,#0000001b 6.8%,#00000037 10.2%,#0000005a 13.6%,#00000080 17%,#000000a5 20.4%,#000000c8 23.8%,#000000e4 27.2%,#000000f8 30.6%,#000000ff 34%),linear-gradient(to top,#00000000 0%,#00000007 3.4%,#0000001b 6.8%,#00000037 10.2%,#0000005a 13.6%,#00000080 17%,#000000a5 20.4%,#000000c8 23.8%,#000000e4 27.2%,#000000f8 30.6%,#000000ff 34%);-webkit-mask-composite:source-in;mask-composite:intersect}
    .photo-tulipe{aspect-ratio:4/5}
  .fascia-layout{padding:64px var(--pad) 72px}
  /* le dégradé de l'accroche garde sa longueur (--ouv-fin, sinon un saut de couleur ΔE 12 par 20 px, fluidite.py) ;
     le titre des fascias commence où le fondu finit : plus haut, sa première ligne serait à demi transparente */
  .journey:not(.is-sticky) .fascia-layout{padding-top:var(--fondu)}
  .fascia-bloc{margin-top:36px}
  .shade{background:#301613a6}
  .benefices-fond{height:92vh}
  .benefices-fond::after{background:linear-gradient(#fbe6d4e6 0%,#fbe6d4b8 45%,#fbe6d41a 75%)}
  .benefices-ouverture{padding-top:clamp(96px,22vh,220px)}
  .benefices-points{max-width:none}
  .benefices-points li{grid-template-columns:40px minmax(0,1fr);gap:16px}
  .benefices-points .signe{height:34px;width:40px}
  .pour-qui{grid-column:1 / -1}
  .benefices[data-composition="image-droite"] .benefices-fond{width:100%}
  .benefices[data-composition="image-droite"] .benefices-ouverture{max-width:none}
  /* téléphone : la photo d'Anne vient tout de suite après « Pour qui » (passage mesuré par passages.py) */
  .benefices-corps{padding-bottom:44px}
  .anne{display:flex;flex-direction:column;gap:30px;padding:36px var(--pad) 72px}
  .portrait,.anne[data-composition] .portrait{width:min(70%,20rem);align-self:flex-start;max-height:none;margin:0;border-radius:18px}
  .rdv{display:flex;flex-direction:column;min-height:0;padding:0}
  .rdv-texte{padding:72px var(--pad) 48px}
  .cabinet-photo,.rdv[data-composition] .cabinet-photo{margin:0;min-height:0;aspect-ratio:4/3;-webkit-mask-image:linear-gradient(to bottom,#00000000 0%,#00000007 2.4%,#0000001b 4.8%,#00000037 7.2%,#0000005a 9.6%,#00000080 12%,#000000a5 14.4%,#000000c8 16.8%,#000000e4 19.2%,#000000f8 21.6%,#000000ff 24%,#000000ff 80%,#000000f8 82%,#000000e4 84%,#000000c8 86%,#000000a5 88%,#00000080 90%,#0000005a 92%,#00000037 94%,#0000001b 96%,#00000007 98%,#00000000 100%);mask-image:linear-gradient(to bottom,#00000000 0%,#00000007 2.4%,#0000001b 4.8%,#00000037 7.2%,#0000005a 9.6%,#00000080 12%,#000000a5 14.4%,#000000c8 16.8%,#000000e4 19.2%,#000000f8 21.6%,#000000ff 24%,#000000ff 80%,#000000f8 82%,#000000e4 84%,#000000c8 86%,#000000a5 88%,#00000080 90%,#0000005a 92%,#00000037 94%,#0000001b 96%,#00000007 98%,#00000000 100%)}
  footer{flex-direction:column;align-items:start;padding:35px 7%}
}
/* Fond animé d'une section (data-fond-anime, calque posé par site.js) : sous le contenu, au-dessus du fond de la section */
:where(section[data-fond-anime]){position:relative}
section[data-fond-anime]{isolation:isolate}
section[data-fond-anime] > .fond-anime{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;pointer-events:none;background:center/cover no-repeat}
.fond-anime video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fond-anime-voile{position:absolute;inset:0;background:#fbf3e8a6}
.fond-anime-sombre .fond-anime-voile{background:#29171973}
/* la lumière de la séance laisse la place au fond animé (elle le recouvrirait) */
section[data-fond-anime] > .seance-fond{display:none!important}
@media (prefers-reduced-motion:reduce){
  .fond-anime video{display:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .scene video{visibility:hidden}
  .scene{background:url(assets/fascias-g8-corail.jpg) center/cover}
}

/* Lot 0 (05/10) : demandes d'Anne */
/* « souple, sensible, adaptable » détaché du reste et centré */
.fascia-mots{font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--t-voix);line-height:1.2;text-align:center;margin:0 0 .7em;color:var(--peche-texte);text-shadow:0 0 2px #29171966,0 1px 22px #2917198c}
.fascia-bloc p.fascia-mots{font-size:var(--t-voix)}
.is-sticky .fascia-layout h2{max-width:22em}
/* les trois cercles de la séance respirent, chacun à son tour */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .trois-temps a{animation:souffle 6s ease-in-out infinite}
  .trois-temps a:nth-child(2){animation-delay:-2s}
  .trois-temps a:nth-child(3){animation-delay:-4s}
}
@keyframes souffle{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}
/* liens amis */
.liens{padding:clamp(56px,10vh,120px) var(--pad);background:linear-gradient(to bottom,#f6e3e2 0%,#f2dfe3 100%);color:var(--encre)}
.liens .fil::before{top:clamp(56px,10vh,120px)}
.liens-texte{max-width:52rem;margin-left:calc(100% / 12 * 1)}
.liens h2{color:var(--rouge)}
.liens .chapeau{margin-top:14px;max-width:34em}
.liens-liste{list-style:none;padding:0;margin:clamp(28px,5vh,48px) 0 0;display:grid;gap:14px}
.liens-liste a{display:grid;gap:4px;padding:18px 22px;border:1px solid #9c352633;border-radius:14px;background:#fff7ef8c;min-height:64px}
.lien-nom{font-family:var(--serif);font-size:var(--t-sous-partie);line-height:1.2;color:var(--encre)}
.lien-desc{font-size:var(--t-corps);color:var(--encre-douce)}
/* à compléter par Anne : visible, sans casser la page */
.a-completer{opacity:.62}
.liens-liste .a-completer a{border-style:dashed}
.tarif-autres{margin-top:16px;font-size:var(--t-corps);border-bottom:1px dashed;display:inline-block}
.acces{margin-top:14px;font-size:var(--t-corps);line-height:1.5;max-width:26em}
/* la salle du cabinet est une information (à quoi ressemble la salle), pas une ambiance : une photo nette aux coins
   doucement arrondis, une ombre chaude très légère, aucun fondu (06/10 après-midi : le fondu sur quatre côtés et la
   multiplication faisaient « artificiel » ; un fondu d'un seul côté, essayé, se lisait comme une photo coupée, et un
   fondu long vers le bas comme un défaut de tirage). */
.cabinet-vignette{margin:22px 0 0;width:min(100%,24rem);aspect-ratio:4/3;overflow:hidden;border-radius:16px;box-shadow:0 18px 40px -26px #45292b80}
.cabinet-vignette img{filter:sepia(.06) saturate(.95)}
.cabinet-vignette img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.fleur-contact img{filter:none}
.fleur-contact::after{display:none}
@media (max-width:900px){
  .liens-texte{margin-left:0}
}

/* Apparitions (contrat avec l'édition sur la page) : site.js pose la classe « vu » sur tout [data-anim] qui entre dans
   l'écran ; l'édition ne fait que poser les attributs. Sans script, tout est visible (préfixe .js). Ce qui bouge en
   continu (respiration, dérive) ne touche qu'à transform et opacity. */
[data-anim]{--anim-duree:.9s}
[data-anim-vitesse="normale"]{--anim-duree:.9s}
[data-anim-vitesse="lente"]{--anim-duree:1.7s}
.js [data-anim="apparition"]:not(.vu){opacity:0;transform:translateY(22px)}
.js [data-anim="apparition"]{transition:opacity var(--anim-duree) var(--ease-sortie),transform var(--anim-duree) var(--ease-sortie)}
.js [data-anim="fondu"]:not(.vu){opacity:0}
.js [data-anim="fondu"]{transition:opacity calc(var(--anim-duree) * 1.2) ease}
.js [data-anim="respiration"].vu{animation:anim-respiration calc(var(--anim-duree) * 7) ease-in-out infinite}
.js [data-anim="derive"].vu{animation:anim-derive calc(var(--anim-duree) * 16) ease-in-out infinite alternate}
@keyframes anim-respiration{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes anim-derive{from{transform:translate3d(-6px,4px,0)}to{transform:translate3d(6px,-4px,0)}}
.anne-edition .portrait{opacity:1!important;transform:none!important;transition:none!important}
.anne-edition [data-anim]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .js .portrait{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-anim]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
/* Accroche suivie des fascias : une BANDE sous la photo d'accueil (Raph, 19/10, maquettes Freeform).
   Bande naturelle (sans script, mouvement réduit, édition) : la phrase centrée, une marge modeste au-dessus et au-dessous,
   plus la place où les fascias montent en fondu (--fondu) ; aucun espace en plus. Fond : du brun où finit la photo
   (#3a201b) au brun du haut des fascias, arrêts serrés en OKLab. (:has doublé : passer devant la règle du téléphone.) */
.ouverture:has(+.journey):has(+.journey){display:block;min-height:0;text-align:center;isolation:isolate;
  padding:clamp(32px,4vw,60px) 8% calc(clamp(32px,4vw,60px) + var(--fondu));
  background:linear-gradient(to bottom,#3a201b 0%,#3e211c 12%,#45241f 28%,#4c2722 45%,#502924 62%,#502a24 80%,#4f2a24 100%)}
.ouverture:has(+.journey):has(+.journey) p{position:relative;z-index:2;margin:0 auto;max-width:20em;font-size:var(--t-accroche);line-height:1.2;text-wrap:balance;color:#fbefe4;
  text-shadow:0 0 2px #2917194d,0 2px 30px #29171980}
.ouverture:has(+.journey):has(+.journey) em{color:var(--peche-texte)}
@media (max-width:900px){
  .ouverture:has(+.journey):has(+.journey){padding-left:6%;padding-right:6%}
}
/* Avec le script (classe defile) : des fondus enchaînés, jamais un bord qui traverse l'écran (Raph, 19/10). La section
   remonte sous la photo d'accueil (--ouv-sous, un écran) ; son fond vivant, collé à l'écran, y paraît en fondu par-dessus
   la photo (--ouv-o) ; la phrase monte du bas avec la page, s'arrête un moment au milieu (sticky) pendant que le fond
   change de couleur, puis remonte et sort ; la scène des fascias, collée elle aussi, paraît alors en fondu par-dessus (site.js, --apparait).
   Hauteurs et temps : site.js (preparerOuverture, OUV). Le fond sous la photo est le brun où elle finit (#3a201b). */
.js main .ouverture.defile:has(+.journey){display:flow-root;height:var(--ouv-h,250lvh);margin-top:calc(-1 * var(--ouv-sous,100lvh));padding:0;isolation:auto;background:#3a201b}
.js main .ouverture.defile:has(+.journey)::before,.js main .ouverture.defile::after{content:none}
.js main .ouverture.defile:has(+.journey)>.ouv-fond{z-index:auto}
.js main .ouverture.defile:has(+.journey) .ouv-fond-colle{z-index:2;opacity:var(--ouv-o,0)}
/* la pause : sticky au milieu de l'écran, entre ses deux marges (site.js) ; flow-root ci-dessus pour que la marge du haut
   ne déborde pas de la section */
.js main .ouverture.defile:has(+.journey) p{position:sticky;z-index:3;top:calc(50% - var(--ouv-ph,0px) / 2);transform:none;margin:var(--ouv-mt,75lvh) auto var(--ouv-mb,0px);max-width:min(20em,88%)}
.hero:has(+.ouverture.defile){z-index:1}
.ouverture.defile+.journey.is-sticky{z-index:4;margin-top:calc(-1 * var(--enchaine,0px));height:calc(280svh + var(--enchaine-f,0px))}
.ouverture.defile+.journey.is-sticky .fascia-stage{opacity:var(--apparait,1)}
/* le chapitre suivant arrive toujours en fondu par-dessus la scène (sinon le bas de la scène se voit en ligne) */
.ouverture.defile+.journey.is-sticky+*{z-index:5}
.ouverture.defile+.journey.is-sticky+*+*{z-index:6}
/* téléphone : la phrase d'un seul tenant, équilibrée (le retour à la ligne y laissait « musique, » et « réaccordé. » seuls) */
@media (max-width:600px){.ouverture.defile br{display:none}}
/* iPad, téléphone : la scène des fascias y est collée aussi ; la séance arrive dessus par un fondu plus long qu'au
   grand écran (sinon une marche au bas de la scène, test_fond_fascias) */
@media (max-width:900px){.js .journey.is-sticky+.seance{--recouvre:30vh}
  .journey.is-sticky .fascia-stage .scene::after{background:linear-gradient(to bottom,#b54a3f00 0%,#b54a3f00 calc(100% - var(--fondu) * 2.2),#b54a3f80 calc(100% - var(--fondu) * 1.2),#b54a3ff2 100%)}}
/* téléphone : les photos de la séance en ronds fondus, plus grands que l'écran, qui glissent un peu sous le texte voisin
   comme un fond discret (Raph, 19/10, valeurs réglées au panneau : taille 114 % de la largeur, fondu sur 70 % du rayon
   en courbe sans cassure, 16 % de la hauteur sous le texte en haut et en bas, fusion « produit » avec le fond).
   Seulement ces photos-là. */
@media (max-width:900px){
  .seance{overflow-x:clip}
  .seance .temps>:not(figure){position:relative;z-index:1}
  .seance .temps>figure.photo.photo[data-taille]{position:relative;z-index:0;width:114vw;max-width:none;max-height:none;
    aspect-ratio:1;align-self:center;border-radius:0;
    margin:calc(114vw * -.16) 0;
    mix-blend-mode:multiply;
    -webkit-mask-image:radial-gradient(closest-side,#000000ff 30%,#000000f8 37%,#000000e4 44%,#000000c8 51%,#000000a5 58%,#00000080 65%,#0000005a 72%,#00000037 79%,#0000001b 86%,#00000007 93%,#00000000 100%);mask-image:radial-gradient(closest-side,#000000ff 30%,#000000f8 37%,#000000e4 44%,#000000c8 51%,#000000a5 58%,#00000080 65%,#0000005a 72%,#00000037 79%,#0000001b 86%,#00000007 93%,#00000000 100%)}
  .seance .temps>figure.photo.photo[data-taille] img{width:100%;height:100%;object-fit:cover;filter:sepia(.16) saturate(.9) hue-rotate(-6deg)}
  .seance .temps>figure.photo.photo[data-taille]::after{display:none}
}