/* ── Inné · système Le souffle ─────────────────────────────
Base partagée par les pages du site (direction "Le souffle").
Palette : nuit, brume, mauve, aube, ivoire. Titres Optima. */
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
[id]{ scroll-margin-top:1.2rem; }
:root{ --nuit:#0A0912; --brume:#171528; --mauve:#7C6BA6; --aube:#E4C4A8; --ivoire:#FFFFFF;
--grain:url("data:image/svg+xml;utf8,");
--ease:cubic-bezier(.19,.6,.22,1); }
body{ background:var(--nuit); color:var(--ivoire); position:relative; overflow-x:hidden;
font-family:"Avenir Next",Avenir,system-ui,sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; }
::selection{ background:rgba(228,196,168,.85); color:#1A1526; }
#sky{ position:fixed; inset:0 0 auto; width:100%; height:100vh; display:block; z-index:0; }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
background:radial-gradient(120% 70% at 50% 0%, rgba(10,9,18,0) 30%, rgba(10,9,18,.86) 82%); }
#prog{ position:fixed; inset:0 0 auto 0; height:2px; z-index:40; transform-origin:left; transform:scaleX(0);
background:linear-gradient(90deg, rgba(228,196,168,.0), rgba(228,196,168,.85) 30%, var(--mauve)); }
/* ── rail de navigation ────────────────────── */
.rail{ position:fixed; left:clamp(.9rem,1.8vw,1.8rem); top:50%; transform:translateY(-50%);
z-index:30; display:none; }
@media(min-width:1100px){ .rail{ display:block; } #prog{ display:none; } }
.rail ul{ position:relative; list-style:none; margin:0; padding:0 0 0 1.1rem;
display:grid; gap:1.35rem; }
.rail ul::before{ content:""; position:absolute; left:3px; top:.4rem; bottom:.4rem; width:1px;
background:rgba(244,240,233,.14); }
.rail > .fill{ position:absolute; left:3px; top:.4rem; width:1px; height:0;
background:linear-gradient(180deg, var(--aube), var(--mauve));
box-shadow:0 0 12px rgba(228,196,168,.45); transition:height .25s ease-out; }
.rail a{ position:relative; display:flex; align-items:center; gap:.85rem; text-decoration:none;
color:#FFFFFF; }
.rail ul a::before{ content:""; position:absolute; left:-1.1rem; top:50%; width:7px; height:7px;
margin-top:-3.5px; border-radius:50%; background:var(--nuit);
border:1px solid rgba(244,240,233,.35);
transition:border-color .4s, background .4s, box-shadow .4s, transform .4s var(--ease); }
.rail em{ font-style:normal; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
white-space:nowrap; opacity:0; transform:translateX(-8px);
padding:.38rem .75rem .34rem; border-radius:999px;
background:rgba(10,9,18,.72); border:1px solid rgba(244,240,233,.14);
backdrop-filter:blur(8px); pointer-events:none;
transition:opacity .35s ease, transform .45s var(--ease), color .3s, border-color .3s; }
.rail:hover em{ opacity:.8; transform:none; }
.rail a:hover{ color:#FFFFFF; }
.rail a:hover em, .rail a:focus-visible em{ opacity:1; transform:none; border-color:rgba(228,196,168,.4); }
.rail ul a:hover::before, .rail ul a:focus-visible::before{ border-color:rgba(228,196,168,.8); }
.rail a.on{ color:var(--aube); }
.rail ul a.on::before{ background:var(--aube); border-color:var(--aube);
box-shadow:0 0 12px 2px rgba(228,196,168,.45); transform:scale(1.25); }
.rail-soc{ margin:1.5rem 0 0 -11px; display:grid; gap:.55rem; justify-items:center; width:30px; }
.rail-soc::before{ content:""; width:1px; height:24px; margin-bottom:.4rem;
background:linear-gradient(180deg, rgba(244,240,233,.16), transparent); }
.rail-soc a{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
color:#FFFFFF; border:1px solid transparent; opacity:0;
animation:rise .9s ease forwards;
transition:color .35s, transform .5s var(--ease), border-color .35s, box-shadow .5s, background .35s; }
.rail-soc a:nth-of-type(1){ animation-delay:1.15s } .rail-soc a:nth-of-type(2){ animation-delay:1.3s }
.rail-soc a:nth-of-type(3){ animation-delay:1.45s }
.rail-soc a:hover{ color:var(--aube); transform:translateY(-2px) scale(1.08);
border-color:rgba(228,196,168,.45); background:rgba(23,21,40,.65);
box-shadow:0 8px 20px -10px rgba(228,196,168,.55); }
.rail-soc svg{ width:15px; height:15px; display:block; }
.m-wrap{ position:relative; z-index:2; max-width:1240px; margin:0 auto;
padding-left:clamp(1.2rem,5vw,4rem); padding-right:clamp(1.2rem,5vw,4rem); }
h1,h2,h3,.logo{ font-family:Optima,"Optima nova",Candara,"Gill Sans",sans-serif;
font-weight:400; letter-spacing:.01em; text-wrap:balance; }
nav.top{ padding:1.8rem 0; }
nav.top .in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.logo{ font-size:1.2rem; letter-spacing:.42em; text-shadow:0 1px 14px rgba(10,9,18,.8);
opacity:0; animation:rise 1s ease .1s forwards; text-decoration:none; color:var(--ivoire); }
.m-links{ display:flex; gap:clamp(.8rem,2vw,1.7rem); flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.m-links li{ opacity:0; animation:rise .8s ease forwards; }
.m-links li:nth-child(1){ animation-delay:.25s } .m-links li:nth-child(2){ animation-delay:.33s }
.m-links li:nth-child(3){ animation-delay:.41s } .m-links li:nth-child(4){ animation-delay:.49s }
.m-links li:nth-child(5){ animation-delay:.57s } .m-links li:nth-child(6){ animation-delay:.65s }
.m-links a{ color:#FFFFFF; text-decoration:none; font-size:.76rem;
letter-spacing:.16em; text-transform:uppercase; transition:color .3s;
text-shadow:0 1px 12px rgba(10,9,18,.8); padding-bottom:.2rem; border-bottom:1px solid transparent; }
.m-links a:hover{ color:var(--aube); border-color:rgba(228,196,168,.5); }
.m-links a.on{ color:var(--aube); border-color:rgba(228,196,168,.5); }
@keyframes rise{ from{ opacity:0; transform:translateY(.5em); } to{ opacity:1; transform:none; } }
/* ── hero ──────────────────────────────────── */
.hero{ position:relative; min-height:calc(100vh - 7rem); display:grid; align-content:center;
gap:clamp(2.2rem,5vw,3rem); padding:2rem 0 4.5rem; }
@media(min-width:940px){
.hero{ grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(3rem,6vw,5.5rem); }
}
.hero::before{ content:""; position:absolute; inset:-8% -20%; z-index:-1; pointer-events:none;
background:radial-gradient(58% 52% at 42% 44%, rgba(10,9,18,.62), transparent 72%); }
.hero-copy{ display:grid; gap:1.35rem; justify-items:center; text-align:center; }
@media(min-width:940px){ .hero-copy{ justify-items:start; text-align:left; } }
/* Le surtitre du hero annonce la page et sert de repère : à .62 d'ivoire il
se lisait comme une mention, puis il est passé au blanc du corps de texte
(retour Sarah 23/08). Le corps de texte étant désormais en blanc pur, le
surtitre reprend l'or de .lab — comme tous les autres surtitres du site —
pour se distinguer de .mention, qui partage sa taille et ses capitales. */
.hero .lab{ color:var(--aube); font-weight:500; opacity:0;
animation:rise 1.1s ease .2s forwards; }
/* Le surtitre et la phrase de position du hero portaient deux corps différents,
ce qui faisait quatre tailles de police dans un même bloc (retour Sarah
23/08). Ils partagent maintenant un seul niveau — capitales, même corps,
même interlettrage — et seule la couleur les distingue : le hero descend à
trois tailles (titre, chapô, ce niveau-ci). */
.hero .lab, .hero .mention{ font-size:.84rem; letter-spacing:.2em; line-height:1.75; }
.hero h1{ font-size:clamp(2.5rem,5.2vw,4.4rem); line-height:1.12; margin:0; max-width:13ch; color:#FFFFFF;
text-shadow:0 2px 30px rgba(10,9,18,.7); }
.hero h1 span{ opacity:0; filter:blur(10px); transform:translateY(.4em); display:inline-block;
animation:word 1.15s var(--ease) forwards; }
/* Titre en phrase longue : on descend d'un cran et on élargit la mesure,
sinon la phrase occupe tout l'écran au format d'origine. */
.hero h1.long{ font-size:clamp(1.7rem,3.1vw,2.65rem); line-height:1.18; max-width:24ch; }
/* Chapô long : mesure élargie et interligne resserré, faute de quoi les CTA
passent sous la ligne de flottaison. */
.hero p.large{ max-width:58ch; font-size:.95rem; line-height:1.7; }
/* Ligne de service du hero (départ, ce qui est inclus). Elle portait une
précision, elle porte aussi la phrase de position — « Inné n'est pas un
protocole figé » — qui se lisait en taille de mention. Remontée d'un cran et
ramenée sur le blanc cassé, mesure élargie pour ne plus couper « figé. »
toute seule en fin de ligne (retour Sarah 23/08). */
/* La mention sous le chapô porte une information de parcours — comment on
entre dans un protocole — et non un simple ornement : elle était composée
au corps du surtitre, où elle passait inaperçue. Elle prend son propre
corps, nettement au-dessus (retour Sarah 23/08, arbitrage 29/08). */
.hero .mention{ max-width:none; color:#FFFFFF;
font-size:1.02rem; letter-spacing:.14em; line-height:1.85; }
@keyframes word{ to{ opacity:1; filter:blur(0); transform:none; } }
.hero p{ margin:0; max-width:42ch; text-wrap:balance; color:#FFFFFF; line-height:1.85;
font-size:1.06rem; font-weight:400; text-shadow:0 1px 16px rgba(10,9,18,.75);
opacity:0; animation:rise 1.2s ease 1.5s forwards; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; justify-content:center;
margin-top:.5rem; opacity:0; animation:rise 1s ease 1.9s forwards; }
@media(min-width:940px){ .hero-cta{ justify-content:flex-start; } }
.hero-ph{ position:relative; width:min(460px,100%); aspect-ratio:4/5; margin:0 auto;
border-radius:999px 999px 3px 3px; overflow:hidden;
box-shadow:0 60px 130px -70px rgba(124,107,166,.8);
clip-path:inset(100% 0 0 0); animation:curtain 1.6s var(--ease) 1.05s forwards;
outline:1px solid rgba(228,196,168,0); outline-offset:-9px; transition:outline-color .7s ease; }
.hero-ph:hover{ outline-color:rgba(228,196,168,.5); }
@keyframes curtain{ to{ clip-path:inset(0 0 0 0); } }
.hero-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%;
filter:saturate(.78) brightness(.88); transform-origin:50% 30%;
animation:kenburns 26s ease-in-out 1.2s infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.1); } }
.hero-ph::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(23,21,40,.12), rgba(10,9,18,.38)); }
.hero-ph::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.32;
mix-blend-mode:overlay; background-image:var(--grain); }
@media(max-width:939.9px){ .hero-ph{ width:min(400px,86vw); } }
.cue{ position:absolute; left:50%; bottom:.4rem; width:1px; height:52px; overflow:hidden;
background:rgba(244,240,233,.16); opacity:0; animation:rise 1s ease 2.4s forwards; }
.cue i{ position:absolute; left:0; top:-30%; width:100%; height:30%;
background:linear-gradient(180deg, transparent, var(--aube)); animation:cue 2.6s var(--ease) 2.8s infinite; }
@keyframes cue{ 0%{ top:-30%; } 60%,100%{ top:110%; } }
/* ── marquee ───────────────────────────────── */
.mq{ position:relative; overflow:hidden; padding:1.5rem 0; margin:clamp(1rem,3vw,2.5rem) 0;
border-top:1px solid rgba(244,240,233,.07); border-bottom:1px solid rgba(244,240,233,.07);
/* Fondu plus long aux deux bords : les mots se forment et s'effacent au lieu
d'entrer d'un coup dans le cadre (retour Sarah 23/08). */
mask-image:linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.mq .track{ display:flex; width:max-content; animation:mqx 90s linear infinite; }
.mq:hover .track{ animation-play-state:paused; }
.mq span{ white-space:nowrap; padding-right:0; font-family:Optima,Candara,sans-serif;
font-style:italic; font-size:clamp(.95rem,1.8vw,1.2rem); color:#FFFFFF;
letter-spacing:.09em; }
.mq b{ color:rgba(228,196,168,.4); font-style:normal; font-weight:400;
/* la chasse était toute entière à droite : le point collait au mot qui le
précède au lieu de se tenir au milieu (retour Sarah 23/08) */
padding:0 1.3rem; }
@keyframes mqx{ to{ transform:translateX(-50%); } }
/* ── structure commune ─────────────────────── */
section{ position:relative; padding:clamp(4rem,9vw,7rem) 0; }
section + section::before{
content:""; position:absolute; top:0; left:50%; width:min(560px,72%); height:1px;
transform:translateX(-50%) scaleX(0);
background:linear-gradient(90deg, transparent, rgba(244,240,233,.2), transparent);
transition:transform 1.5s var(--ease) .15s; }
section + section.in::before{ transform:translateX(-50%) scaleX(1); }
.gnum{ position:absolute; top:clamp(.8rem,3vw,1.8rem); left:-.04em; z-index:0; pointer-events:none;
user-select:none; font-family:Optima,Candara,sans-serif; line-height:1;
font-size:clamp(5.5rem,13vw,10.5rem); color:rgba(244,240,233,.05); letter-spacing:.02em;
will-change:transform; }
.lab{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--aube); font-weight:500; }
/* Surtitre de section qui porte un titre à lui seul (« 04 · Témoignages ») */
.lab.grand{ font-size:clamp(.86rem,1.5vw,1.02rem); letter-spacing:.2em; }
/* Retour à la ligne imposé au-delà du seuil de bascule seulement : en deçà,
la mesure est déjà étroite et un saut forcé casserait la ligne deux fois. */
br.dsk{ display:none; }
@media(min-width:940px){ br.dsk{ display:inline; } }
.sechead{ text-align:center; display:grid; gap:.9rem; justify-items:center; margin-bottom:3rem; }
.sechead h2{ font-size:clamp(1.9rem,4vw,3rem); margin:0; max-width:22ch; color:#FFFFFF; }
.sechead p{ margin:0; max-width:52ch; color:#FFFFFF; line-height:1.85; font-size:.98rem; }
.sechead::after{ content:""; width:52px; height:1px; margin-top:.5rem;
background:linear-gradient(90deg, transparent, rgba(228,196,168,.8), transparent);
transform:scaleX(0); transition:transform 1.3s var(--ease) .4s; }
.in .sechead::after{ transform:scaleX(1); }
.seccta{ text-align:center; margin-top:2.6rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
/* photos : rideau + zoom lent */
.ph{ position:relative; overflow:hidden; border-radius:3px; background:#151222;
clip-path:inset(0 0 100% 0); transition:clip-path 1.35s var(--ease), outline-color .7s ease;
outline:1px solid rgba(228,196,168,0); outline-offset:-9px; }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:saturate(.75) brightness(.82); transform:scale(1.14);
transition:transform 1.6s var(--ease), filter .9s ease; }
.in .ph, .ph.in{ clip-path:inset(0 0 0 0); }
.in .ph img, .ph.in img{ transform:scale(1); }
.ph:hover img{ transform:scale(1.06); filter:saturate(.9) brightness(.92); }
.ph:hover{ outline-color:rgba(228,196,168,.5); }
.ph::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(23,21,40,.16), rgba(10,9,18,.42)); }
.ph::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
mix-blend-mode:overlay; background-image:var(--grain); }
.ph.arch{ border-radius:999px 999px 3px 3px; }
.alim-ph{ width:min(880px,100%); margin:0 auto; aspect-ratio:21/10;
box-shadow:0 40px 90px -60px rgba(124,107,166,.55); }
/* cartes à photo (grille de 4 ou moins) */
.four{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.9rem 1.2rem; }
@media(min-width:720px){ .four{ grid-template-columns:repeat(4,1fr); gap:2.4rem 2.4rem; } }
.four > div{ padding:1.5rem 0 0; display:grid; gap:.65rem; grid-template-rows:auto auto 1fr auto;
border-top:1px solid rgba(244,240,233,.25);
transition:border-top-color .5s, transform .6s var(--ease);
opacity:0; transform:translateY(26px); }
.in .four > div{ opacity:1; transform:none; transition:border-top-color .5s, transform .95s var(--ease), opacity .95s ease; }
.in .four > div:nth-child(2){ transition-delay:.12s } .in .four > div:nth-child(2) .ph{ transition-delay:.12s }
.in .four > div:nth-child(3){ transition-delay:.24s } .in .four > div:nth-child(3) .ph{ transition-delay:.24s }
.in .four > div:nth-child(4){ transition-delay:.36s } .in .four > div:nth-child(4) .ph{ transition-delay:.36s }
.four > div:hover{ border-top-color:rgba(228,196,168,.75); transform:translateY(-6px) !important; }
.four .ph{ aspect-ratio:4/5; margin-bottom:.4rem; }
.four h3{ margin:0; font-size:1.16rem; color:#FFFFFF; }
.four p{ margin:0; font-size:.88rem; color:#FFFFFF; line-height:1.7; }
.four .go{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--aube);
margin-top:.9rem; opacity:.85; display:inline-flex; align-items:center; gap:.45em; text-decoration:none; }
.four .go i{ font-style:normal; transition:transform .45s var(--ease); }
.four > div:hover .go i{ transform:translateX(.5em); }
/* ── deux colonnes photo/texte ─────────────── */
.split{ display:grid; gap:clamp(2.4rem,5vw,3rem); align-items:center; }
@media(min-width:920px){
.split{ grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,6vw,5.5rem); }
.split.flip > .media{ order:2; }
}
.split .media{ position:relative; width:min(400px,100%); margin:0 auto; }
.split .media .ph{ aspect-ratio:4/5; box-shadow:0 50px 110px -65px rgba(124,107,166,.75); }
.split .media figcaption{ margin-top:.9rem; text-align:center; font-size:.62rem; letter-spacing:.22em;
text-transform:uppercase; color:#FFFFFF; }
.split .body{ display:grid; gap:1.1rem; }
.split .body > h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); color:#FFFFFF; margin:.2rem 0 .1rem; }
.split .body > p{ max-width:52ch; color:#FFFFFF; line-height:1.85; font-size:.97rem; }
.mention{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
color:#FFFFFF; }
/* la carte — lignes d'offres */
.carte{ list-style:none; margin:.8rem 0 0; padding:0; }
.carte li{ border-top:1px solid rgba(244,240,233,.14); opacity:0; transform:translateY(16px);
transition:opacity .9s ease, transform .9s var(--ease); }
.carte li:last-child{ border-bottom:1px solid rgba(244,240,233,.14); }
.in .carte li{ opacity:1; transform:none; }
.in .carte li:nth-child(2){ transition-delay:.14s } .in .carte li:nth-child(3){ transition-delay:.28s }
.in .carte li:nth-child(4){ transition-delay:.42s }
.carte a{ display:flex; align-items:baseline; gap:1rem; padding:1.2rem .3rem; text-decoration:none;
color:inherit; }
.carte .nom{ font-family:Optima,Candara,sans-serif; font-size:1.08rem; color:#FFFFFF;
transition:color .35s; white-space:nowrap; }
.carte .fil{ flex:1; min-width:2rem; border-bottom:1px dotted rgba(244,240,233,.28);
transform:translateY(-.32em); transition:border-color .35s; }
.carte .prix{ font-size:.86rem; letter-spacing:.08em; color:#FFFFFF;
font-variant-numeric:tabular-nums; white-space:nowrap; }
.carte .prix b{ font-weight:500; color:var(--aube); }
/* « Découvrir » n'apparaissait qu'au survol : rien ne disait que ces lignes
étaient des pages (retour Sarah 23/08). Il est visible en permanence, le
survol ne fait plus que l'avancer. Sur tactile, il n'y avait aucun survol
possible — la mention n'existait donc simplement pas. */
.carte .go{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--aube);
opacity:.7; transition:opacity .4s, transform .5s var(--ease); white-space:nowrap; }
.carte a:hover .nom, .carte a:focus-visible .nom{ color:var(--aube); }
.carte a:hover .fil{ border-color:rgba(228,196,168,.55); }
.carte a:hover .go, .carte a:focus-visible .go{ opacity:1; transform:translateX(4px); }
.carte .sous{ display:block; margin:-.75rem 0 1.05rem; padding:0 .3rem; font-size:.84rem;
color:#FFFFFF; line-height:1.65; max-width:50ch; }
/* ── constellation de cartes ───────────────── */
.progr{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.2rem; }
@media(min-width:760px){ .progr{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.progr > a{ position:relative; display:grid; gap:.55rem; align-content:start; padding:1.5rem 1.4rem 1.4rem;
min-height:9.5rem; text-decoration:none; color:inherit; border-radius:3px;
background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1);
backdrop-filter:blur(4px); overflow:hidden;
opacity:0; transform:translateY(22px);
transition:opacity .9s ease, transform .9s var(--ease), border-color .5s, background .5s, box-shadow .6s; }
.in .progr > a{ opacity:1; transform:none; }
.in .progr > a:nth-child(3n+2){ transition-delay:.1s } .in .progr > a:nth-child(3n){ transition-delay:.2s }
.progr > a::after{ content:""; position:absolute; inset:auto -30% -55% -30%; height:70%; border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%, rgba(124,107,166,.34), transparent 70%);
opacity:0; transition:opacity .7s ease; pointer-events:none; }
.progr > a:hover{ border-color:rgba(228,196,168,.5); background:rgba(30,26,50,.6);
transform:translateY(-5px); box-shadow:0 24px 50px -30px rgba(124,107,166,.55); }
.progr > a:hover::after{ opacity:1; }
.progr em{ font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.75; }
.progr h3{ font-size:1.08rem; color:#FFFFFF; margin:0; }
.progr p{ font-size:.83rem; color:#FFFFFF; line-height:1.65; margin:0; }
.progr .prix{ margin-top:auto; padding-top:.6rem; font-size:.72rem; letter-spacing:.12em;
color:rgba(228,196,168,.85); font-variant-numeric:tabular-nums; }
.progr .prix s{ color:#FFFFFF; margin-right:.5em; }
/* ── triptyque à photos ────────────────────── */
.trio{ display:grid; gap:1.9rem 1.4rem; }
@media(min-width:720px){ .trio{ grid-template-columns:repeat(3,1fr); gap:2.2rem; } }
.trio > div{ padding:1.5rem 0 0; display:grid; gap:.65rem; grid-template-rows:auto auto auto 1fr auto;
border-top:1px solid rgba(244,240,233,.25);
opacity:0; transform:translateY(26px);
transition:border-top-color .5s, transform .95s var(--ease), opacity .95s ease; }
.in .trio > div{ opacity:1; transform:none; }
.in .trio > div:nth-child(2){ transition-delay:.12s } .in .trio > div:nth-child(2) .ph{ transition-delay:.12s }
.in .trio > div:nth-child(3){ transition-delay:.24s } .in .trio > div:nth-child(3) .ph{ transition-delay:.24s }
.trio > div:hover{ border-top-color:rgba(228,196,168,.75); transform:translateY(-6px); }
.trio .ph{ aspect-ratio:4/5; margin-bottom:.4rem; }
.trio em{ font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.75; }
.trio h3{ margin:0; font-size:1.16rem; color:#FFFFFF; }
.trio p{ margin:0; font-size:.88rem; color:#FFFFFF; line-height:1.7; }
.trio .go{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--aube);
margin-top:.9rem; opacity:.85; display:inline-flex; align-items:center; gap:.45em; text-decoration:none; }
.trio .go i{ font-style:normal; transition:transform .45s var(--ease); }
.trio > div:hover .go i{ transform:translateX(.5em); }
/* ── image pleine largeur avec voile de texte ── */
.gong{ position:relative; width:min(980px,100%); margin:0 auto; }
.gong .ph{ aspect-ratio:21/10; box-shadow:0 40px 90px -60px rgba(124,107,166,.55); }
.gong .ph::before{ background:linear-gradient(180deg, rgba(23,21,40,.3), rgba(10,9,18,.6)); }
.gong .over{ position:absolute; inset:0; z-index:2; display:grid; place-content:center; text-align:center;
gap:.9rem; padding:1.5rem; }
.gong .over h3{ font-size:clamp(1.7rem,4vw,2.8rem); color:#FFFFFF;
text-shadow:0 2px 26px rgba(10,9,18,.85); margin:0; }
.gong .over .lab{ text-shadow:0 1px 12px rgba(10,9,18,.9); }
.gong .over p{ margin:0; color:#FFFFFF; text-shadow:0 1px 14px rgba(10,9,18,.85);
font-size:.95rem; }
.gong .over .prix{ font-size:.85rem; letter-spacing:.16em; color:var(--aube);
text-shadow:0 1px 12px rgba(10,9,18,.9); font-variant-numeric:tabular-nums; }
.gong .over .btn{ margin:0 auto; margin-top:.4rem; background:rgba(10,9,18,.35); backdrop-filter:blur(4px); }
.gong .over .btn:hover{ background:var(--aube); }
/* ── petites cartes d'information ──────────── */
.ou{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
width:min(880px,100%); margin:2.8rem auto 0; text-align:center; }
/* Le liseré doré ne s'allumait qu'au survol : au repos les cartes se fondaient
dans le fond et rien ne signalait qu'il y avait quelque chose à lire. Il est
désormais posé en fixe, le survol ne fait que l'intensifier (retour Sarah). */
.ou > div{ display:grid; gap:.45rem; justify-items:center; padding:1.4rem 1rem;
border:1px solid rgba(228,196,168,.34); border-radius:3px; background:rgba(23,21,40,.35);
opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s var(--ease), border-color .5s; }
.in .ou > div{ opacity:1; transform:none; }
.ou p a{ color:var(--aube); text-decoration:none;
border-bottom:1px solid rgba(228,196,168,.35); transition:border-color .3s; }
.ou p a:hover, .ou p a:focus-visible{ border-color:var(--aube); }
.in .ou > div:nth-child(2){ transition-delay:.13s } .in .ou > div:nth-child(3){ transition-delay:.26s }
.ou > div:hover{ border-color:rgba(228,196,168,.72); }
/* À quatre éléments, l'auto-fit laisse un orphelin sur la seconde ligne :
on impose 2 × 2 puis 4 colonnes. */
@media(min-width:560px){ .ou.quatre{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1000px){ .ou.quatre{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* À cinq éléments, la seconde ligne n'en porte que deux : laissés à
l'auto-fit ils se rangeaient à gauche, sous les deux premiers, et la
grille penchait. On double le nombre de colonnes et chaque carte en
occupe deux : les orphelins peuvent alors démarrer sur une demi-colonne
et se centrer sous la ligne du dessus (retour Sarah 23/08). */
@media(min-width:560px){
.ou.cinq{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ou.cinq > *{ grid-column:span 2; }
.ou.cinq > :nth-child(5){ grid-column:2 / span 2; }
}
@media(min-width:1000px){
.ou.cinq{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.ou.cinq > :nth-child(4){ grid-column:2 / span 2; }
.ou.cinq > :nth-child(5){ grid-column:4 / span 2; }
}
.ou em{ font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.8; }
.ou strong{ font-family:Optima,Candara,sans-serif; font-weight:400; font-size:1.1rem; color:#FFFFFF; }
.ou p{ margin:0; font-size:.84rem; color:#FFFFFF; line-height:1.7; }
/* ── fondateurs : duo de portraits ─────────── */
.fnd{ display:grid; gap:2.5rem; align-items:center; }
@media(min-width:820px){ .fnd{ grid-template-columns:.9fr 1.1fr; gap:4rem; } }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
/* hors de la grille .fnd, le duo prendrait toute la largeur de page : on le borne
pour que les portraits gardent l'échelle qu'ils ont sur la page d'accueil */
.duo.seul{ width:min(560px,100%); margin:0 auto; }
.duo > figure{ aspect-ratio:3/4; border-radius:999px 999px 3px 3px; position:relative; overflow:hidden;
background:linear-gradient(170deg,#4C4470,#241F3C 60%,#0E0C1A);
box-shadow:0 30px 60px -44px rgba(124,107,166,.7);
outline:1px solid rgba(228,196,168,0); outline-offset:-9px;
clip-path:inset(100% 0 0 0); transition:clip-path 1.4s var(--ease), outline-color .7s ease; }
.duo > figure:hover{ outline-color:rgba(228,196,168,.5); }
.duo > figure:last-child{ background:linear-gradient(170deg,#5C4E5E,#2A2233 60%,#100D18); margin-top:2rem;
transition-delay:.18s; }
.in .duo > figure, .duo.in > figure{ clip-path:inset(0 0 0 0); }
.duo .pwrap{ position:absolute; inset:0; will-change:transform; }
.duo img{ position:absolute; inset:-9% 0; width:100%; height:118%; object-fit:cover;
filter:saturate(.78) brightness(.84); transition:filter .8s ease; }
/* cadrage : on ancre chaque portrait sur le visage */
.duo > figure:first-child img{ object-position:50% 20%; }
.duo > figure:last-child img{ object-position:52% 38%; }
.duo > figure:hover img{ filter:saturate(.92) brightness(.95); }
.duo > figure::after{ content:""; position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay;
background-image:var(--grain); }
.duo figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem .9rem .9rem;
text-align:center; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
color:#FFFFFF; background:linear-gradient(0deg, rgba(10,9,18,.72), transparent); }
blockquote{ margin:0; font-family:Optima,Candara,sans-serif;
font-size:clamp(1.28rem,2.6vw,1.95rem); line-height:1.55; color:#FFFFFF; }
cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:.7rem;
letter-spacing:.2em; text-transform:uppercase; color:var(--aube); }
/* ── pellicule ─────────────────────────────── */
.strip-sec{ padding:clamp(2.5rem,6vw,4rem) 0 0; }
.strip-sec .lab{ display:block; text-align:center; margin-bottom:1.6rem; }
.strip{ overflow:hidden; margin:0 calc(50% - 50vw);
mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.s-track{ display:flex; gap:clamp(.9rem,2vw,1.4rem); width:max-content; padding:1.4rem 0;
animation:stripx 65s linear infinite; }
.strip:hover .s-track{ animation-play-state:paused; }
@keyframes stripx{ to{ transform:translateX(-50%); } }
.strip .ph, .strip .ph img{ clip-path:none; transform:none; }
.strip .ph{ flex:none; width:clamp(190px,26vw,280px); aspect-ratio:4/3; }
.strip .ph:nth-child(even){ margin-top:1.3rem; }
/* ── la méthode : orbite ───────────────────── */
.circ{ display:grid; gap:2.8rem; align-items:center; }
@media(min-width:900px){ .circ{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem); } }
.orbit{ position:relative; width:min(430px,100%); aspect-ratio:1; display:grid; place-items:center; margin:0 auto; }
.orbit .ring{ position:absolute; border-radius:50%; border:1px solid rgba(244,240,233,.12);
transform:scale(.7); opacity:0; transition:transform 1.4s var(--ease), opacity 1.2s ease; }
.in .orbit .ring{ transform:scale(1); opacity:1; }
.orbit .r1{ inset:8%; border-color:rgba(228,196,168,.22); border-style:dashed; animation:d2spin 46s linear infinite; }
.orbit .r2{ inset:22%; transition-delay:.15s; } .orbit .r3{ inset:36%; transition-delay:.3s; }
@keyframes d2spin{ to{ transform:rotate(360deg); } }
.in .orbit .r1{ animation:d2spin 46s linear infinite; }
.core{ width:34%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center;
border:1px solid rgba(228,196,168,.45);
background:radial-gradient(circle,rgba(124,107,166,.45),rgba(10,9,18,0) 72%);
animation:d2core 11s ease-in-out infinite; }
@keyframes d2core{ 0%,100%{ transform:scale(.92); } 50%{ transform:scale(1.06); } }
.core b{ font-family:Optima,Candara,sans-serif; font-weight:400;
font-size:clamp(.74rem,2.1vw,.9rem); color:#FFFFFF; letter-spacing:.08em; }
.node{ position:absolute; width:28%; aspect-ratio:1; min-width:84px; border-radius:50%; cursor:pointer;
background:rgba(23,21,40,.55); border:1px solid rgba(244,240,233,.22); color:inherit;
font-family:inherit; display:grid; place-content:center; text-align:center; gap:.2rem; padding:0;
backdrop-filter:blur(4px);
transition:border-color .55s,background .55s,box-shadow .55s,transform .55s var(--ease); }
.node em{ font-style:normal; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--aube); opacity:.7; transition:opacity .4s; }
.node span{ font-family:Optima,Candara,sans-serif; font-size:clamp(.84rem,2.3vw,1.02rem);
color:#FFFFFF; transition:color .5s; }
.node:hover,.node.on{ border-color:rgba(228,196,168,.75); background:rgba(40,34,64,.72);
box-shadow:0 0 40px -8px rgba(228,196,168,.4); transform:scale(1.06); }
.node.on span{ color:#FFFFFF; } .node.on em{ opacity:1; }
.n1{ top:-4%; left:36%; } .n2{ bottom:8%; right:-3%; } .n3{ bottom:8%; left:-3%; }
.orbit .arcs{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
opacity:0; transition:opacity 1.2s ease .5s; }
.in .orbit .arcs{ opacity:1; }
.orbit .arcs path{ fill:none; stroke:rgba(244,240,233,.13); stroke-width:.4;
stroke-linecap:round; stroke-dasharray:1.4 3.1; transition:stroke .6s ease; }
.orbit .arcs path.on{ stroke:rgba(228,196,168,.6); animation:flow 3.2s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-9; } }
.circ-panel{ display:grid; text-align:center; }
@media(min-width:900px){ .circ-panel{ text-align:left; } }
.circ-panel article{ grid-area:1/1; display:grid; gap:.9rem; align-content:center; justify-items:center;
opacity:0; transform:translateY(14px); pointer-events:none;
transition:opacity .75s ease, transform .75s var(--ease); }
@media(min-width:900px){ .circ-panel article{ justify-items:start; } }
.circ-panel article.on{ opacity:1; transform:none; pointer-events:auto; }
.circ-panel h3{ margin:0; font-size:clamp(1.7rem,3.2vw,2.4rem); color:#FFFFFF; }
.circ-panel p{ margin:0; max-width:48ch; color:#FFFFFF; line-height:1.85; font-size:.97rem; }
/* ── détox : le voyage ─────────────────────── */
.dd{ width:min(880px,100%); margin:0 auto clamp(2.6rem,6vw,3.6rem); }
.dd-axis{ position:relative; height:1px; margin:0 .4rem 2.4rem; background:rgba(244,240,233,.12); }
.dd-fill{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
background:linear-gradient(90deg, var(--mauve), var(--aube));
transition:transform 2s var(--ease) .3s; }
.in .dd-fill{ transform:scaleX(1); }
.dd-spark{ position:absolute; top:50%; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
background:var(--aube); box-shadow:0 0 14px 2px rgba(228,196,168,.7); opacity:0; }
.in .dd-spark{ animation:spark 8.5s ease-in-out 2.4s infinite; }
@keyframes spark{ 0%{ left:0%; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ left:100%; opacity:0; } }
.dd-cap{ position:absolute; top:-.65rem; font-size:.66rem; letter-spacing:.2em; color:#FFFFFF;
font-variant-numeric:tabular-nums; }
.dd-cap.j1{ left:0; transform:translate(-10%,-100%); }
.dd-cap.j14{ right:0; transform:translate(10%,-100%); }
.dd-dot{ position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
background:var(--nuit); border:1px solid rgba(228,196,168,.75);
transform:scale(0); transition:transform .7s var(--ease); }
.in .dd-dot{ transform:scale(1); }
.dd-dot.d1{ left:16.6%; transition-delay:.7s; } .dd-dot.d2{ left:50%; transition-delay:1.1s; }
.dd-dot.d3{ left:83.3%; transition-delay:1.5s; }
.dd-phases{ display:grid; gap:1.6rem; list-style:none; margin:0; padding:0; text-align:center; }
@media(min-width:680px){ .dd-phases{ grid-template-columns:repeat(3,1fr); } }
.dd-phases li{ display:grid; gap:.45rem; justify-items:center;
opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s var(--ease); }
.in .dd-phases li{ opacity:1; transform:none; }
.in .dd-phases li:nth-child(1){ transition-delay:.75s } .in .dd-phases li:nth-child(2){ transition-delay:1.15s }
.in .dd-phases li:nth-child(3){ transition-delay:1.55s }
.dd-phases em{ font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.8; }
.dd-phases strong{ font-family:Optima,Candara,sans-serif; font-weight:400; font-size:1.22rem; color:#FFFFFF; }
/* sous-titre de phase : la promesse, entre le nom et l'explication */
.dd-phases b{ font-weight:400; font-size:.8rem; letter-spacing:.04em;
color:rgba(228,196,168,.9); max-width:30ch; text-wrap:balance; }
/* Subgrid : les quatre lignes sont partagées par les trois phases, sinon un
sous-titre qui passe sur deux lignes décale tout le texte sous lui. */
@supports (grid-template-rows:subgrid){
@media(min-width:680px){
.dd-phases{ grid-template-rows:auto auto auto auto; row-gap:.45rem; }
.dd-phases li{ grid-row:span 4; grid-template-rows:subgrid; row-gap:.45rem; }
}
}
.dd-phases p{ margin:0; font-size:.85rem; color:#FFFFFF; line-height:1.7; max-width:30ch; }
/* ── boutons ───────────────────────────────── */
.btn{ position:relative; display:inline-block; text-decoration:none; padding:.95rem 2.1rem; font-size:.72rem;
letter-spacing:.2em; text-transform:uppercase; border:1px solid rgba(244,240,233,.5);
color:var(--ivoire); border-radius:999px; font-weight:400; overflow:hidden;
transition:background .35s,color .35s,border-color .35s,transform .3s,box-shadow .45s; }
.btn:hover{ background:var(--aube); border-color:var(--aube); color:#1A1526; transform:translateY(-1px);
box-shadow:0 14px 34px -18px rgba(228,196,168,.55); }
.btn.solid{ background:var(--aube); border-color:var(--aube); color:#1A1526; }
.btn.solid::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
transform:skewX(-18deg); transition:left .7s var(--ease); }
.btn.solid:hover{ background:#F0D6BE; border-color:#F0D6BE; }
.btn.solid:hover::after{ left:130%; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--aube); outline-offset:3px; }
/* ── conversion ────────────────────────────── */
.conv{ position:relative; text-align:center; display:grid; justify-items:center; gap:1.6rem;
padding:clamp(5rem,10vw,9rem) 1.5rem; }
/* Le chiffre de section occupe une bande d'environ 170 px sous le bord haut du
bloc. Le contenu démarrait à l'intérieur de cette bande : le chiffre passait
derrière une photo (« 02 » de L'Approche) ou derrière le titre (« 02 » de
Sarah & Alexis) et devenait invisible. Le bloc est donc décalé vers le bas
(choix Rémi, 29/08) — la réserve du haut vaut désormais la hauteur du
chiffre, qui dispose de sa propre bande et reste lisible partout. */
.reserve-chiffre, section, .conv{
padding-top: calc(clamp(.8rem,3vw,1.8rem) + clamp(5.5rem,13vw,10.5rem) + 1rem); }
.conv::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:min(720px,96%);
transform:translateX(-50%); pointer-events:none;
border:1px solid rgba(228,196,168,.2); border-radius:999px 999px 3px 3px;
opacity:0; transition:opacity 1.4s ease .35s; }
.conv.in::after{ opacity:1; }
.conv::before{ content:""; position:absolute; inset:10% 20%; z-index:-1; pointer-events:none; border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%, rgba(124,107,166,.28), transparent 70%);
animation:convglow 9s ease-in-out infinite; }
@keyframes convglow{ 0%,100%{ opacity:.55; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.05); } }
/* ── la flamme de la porte ──────────────────────────────────────
Le filet de clôture dessine une porte. Une flamme la parcourt en
boucle : elle monte la voûte, descend le montant droit, passe le
seuil et remonte à gauche, sans couture. Le calque SVG est posé par
porte.js, qui recalcule le tracé à chaque changement de largeur ;
ici ne vivent que la matière et le mouvement.
Rien ne traîne derrière : un seul point brûlant, posé sur le filet
et déplacé par offset-path le long du tracé que porte.js recalcule.
Onze secondes le tour — assez lent pour n'être attrapé qu'en
périphérie. */
.porte-flamme{ position:absolute; pointer-events:none;
opacity:0; transition:opacity 1.6s ease .8s; }
.conv > .porte-flamme{ left:50%; top:0; bottom:0; width:min(720px,96%);
transform:translateX(-50%); border-radius:999px 999px 3px 3px; }
.alchimie,
.grand-temoin{ position:relative; }
.alchimie > .porte-flamme,
.grand-temoin > .porte-flamme{ inset:0; border-radius:999px 999px 3px 3px; }
.conv.in > .porte-flamme,
section.in .alchimie > .porte-flamme,
section.in .grand-temoin > .porte-flamme{ opacity:1; }
.porte-flamme svg{ display:block; width:100%; height:100%; overflow:visible; }
.pf-halo{ fill:rgba(228,196,168,.22); }
.pf-coeur{ fill:#FFF3E2; transform-box:fill-box; transform-origin:center;
filter:drop-shadow(0 0 5px rgba(228,196,168,.9)) drop-shadow(0 0 12px rgba(228,196,168,.4)); }
.conv.in .pf-tete,
section.in .alchimie .pf-tete,
section.in .grand-temoin .pf-tete{ animation:pf-tete 11s linear infinite; }
/* Le vacillement est volontairement désaccordé de la course : sa période
ne divise pas les onze secondes, la flamme ne bat donc jamais deux fois
au même endroit du tour. */
.conv.in .pf-coeur,
section.in .alchimie .pf-coeur,
section.in .grand-temoin .pf-coeur{ animation:pf-vacille 1.3s ease-in-out infinite alternate; }
@keyframes pf-tete{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@keyframes pf-vacille{ from{ opacity:.72; transform:scale(.82); }
to{ opacity:1; transform:scale(1.14); } }
@media(prefers-reduced-motion:reduce){ .porte-flamme{ display:none; } }
.conv h2{ font-size:clamp(2rem,5vw,3.6rem); margin:0; max-width:16ch; color:#FFFFFF; }
.conv .price{ font-size:.95rem; letter-spacing:.16em; color:#FFFFFF; font-variant-numeric:tabular-nums; }
.conv > p{ max-width:46ch; color:#FFFFFF; line-height:1.85; margin:0; }
.conv .ctas{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin:0; }
/* ── pied de page ──────────────────────────── */
footer{ border-top:1px solid rgba(244,240,233,.12); padding:clamp(3.5rem,8vw,6rem) 0 2.2rem; }
/* Filigrane de pied de page : le mot « INNÉ » composé en Optima n'était pas la
marque, seulement son nom (retour Sarah 23/08). C'est désormais le logotype
officiel, gardé en transparence pour rester un fond et non une signature. */
.fmark{ display:block; margin:0 auto clamp(2.5rem,6vw,4.5rem);
width:min(56%,540px); height:auto; opacity:.075;
user-select:none; pointer-events:none; }
.fgrid{ display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.fgrid em{ display:block; font-style:normal; font-size:.64rem; letter-spacing:.24em;
text-transform:uppercase; color:var(--aube); font-weight:500; margin-bottom:.9rem; }
.fgrid p{ margin:0 0 .5rem; font-size:.88rem; line-height:1.9; color:#FFFFFF; }
.fgrid a{ color:#FFFFFF; text-decoration:none; transition:color .3s; }
.fgrid a:hover{ color:var(--aube); }
.fsoc{ display:flex; gap:.6rem; margin-top:1rem; }
.fsoc a{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
border:1px solid rgba(244,240,233,.18); color:#FFFFFF;
transition:color .35s, border-color .35s, transform .5s var(--ease), box-shadow .5s, background .35s; }
.fsoc a:hover{ color:var(--aube); border-color:rgba(228,196,168,.5); transform:translateY(-2px);
background:rgba(23,21,40,.65); box-shadow:0 8px 20px -10px rgba(228,196,168,.55); }
.fsoc svg{ width:15px; height:15px; display:block; }
.fbase{ margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:1.5rem;
border-top:1px solid rgba(244,240,233,.1);
display:flex; justify-content:space-between; gap:.9rem; flex-wrap:wrap;
font-size:.74rem; color:#FFFFFF; }
.back{ position:fixed; left:1rem; bottom:1rem; z-index:10; text-decoration:none; color:#FFFFFF;
background:rgba(10,9,18,.6); border:1px solid rgba(244,240,233,.22); border-radius:999px;
padding:.5rem .95rem; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
backdrop-filter:blur(6px);
transition:color .25s,border-color .25s,transform .5s var(--ease),opacity .4s ease; }
.back:hover{ color:var(--ivoire); border-color:var(--aube); }
.back.hide{ transform:translateY(160%); opacity:0; pointer-events:none; }
/* révélations au scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.05s var(--ease),transform 1.05s var(--ease); }
.rv.in{ opacity:1; transform:none; }
/* l'attribut hidden doit gagner contre .btn{display:inline-block} et consorts */
[hidden]{ display:none !important; }
@media (prefers-reduced-motion:reduce){
*{ animation-duration:.001ms !important; animation-delay:0ms !important;
animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; }
.hero h1 span,.hero .lab,.hero p,.hero-cta,.hero-ph,.logo,.m-links li,.cue{ opacity:1; transform:none; filter:none; }
.hero-ph,.ph,.duo > figure{ clip-path:none; }
.ph img{ transform:none; }
.rv,.four > div,.carte li,.progr > a,.trio > div,.ou > div,.dd-phases li{ opacity:1; transform:none; }
.dd-fill{ transform:scaleX(1); } .dd-dot{ transform:scale(1); }
.orbit .ring{ transform:none; opacity:1; }
.mq .track,.s-track{ animation:none; transform:none; }
}
/* ══════════════════════════════════════════════════════════
Ajouts 2026-08-11 — e-shop, journal, livre, playlists
══════════════════════════════════════════════════════════ */
/* menu : la navigation compte désormais jusqu'à 9 entrées */
.m-links li:nth-child(7){ animation-delay:.73s } .m-links li:nth-child(8){ animation-delay:.81s }
.m-links li:nth-child(9){ animation-delay:.89s }
@media(min-width:940px){ .m-links{ flex:1; justify-content:flex-end; gap:clamp(.7rem,1.4vw,1.25rem); } }
@media(min-width:940px) and (max-width:1380px){ .m-links a{ font-size:.68rem; letter-spacing:.11em; } }
/* bandeau « page de travail » — à retirer avant publication */
.draft{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
margin:0 0 1.4rem; padding:.7rem 1rem; border-radius:3px;
background:rgba(124,107,166,.16); border:1px dashed rgba(228,196,168,.45);
font-size:.72rem; letter-spacing:.08em; color:#FFFFFF; line-height:1.6; }
.draft b{ font-weight:500; color:var(--aube); letter-spacing:.18em; text-transform:uppercase; font-size:.62rem; }
/* marqueur de contenu à fournir */
.todo{ font-style:normal; padding:.06em .5em .1em; border-radius:2px; white-space:nowrap;
background:rgba(228,196,168,.13); border:1px dashed rgba(228,196,168,.5);
color:var(--aube); font-size:.86em; letter-spacing:.06em; }
/* ── filtres (e-shop, journal) ──────────────── */
.filtres{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:-1.4rem 0 2.8rem; }
.filtres button{ font:inherit; cursor:pointer; font-size:.62rem; letter-spacing:.2em;
text-transform:uppercase; color:#FFFFFF; padding:.5rem 1rem .45rem;
border-radius:999px; background:transparent; border:1px solid rgba(244,240,233,.16);
transition:color .3s, border-color .3s, background .3s; }
.filtres button:hover{ color:var(--ivoire); border-color:rgba(228,196,168,.45); }
.filtres button[aria-pressed="true"]{ color:var(--nuit); background:var(--aube); border-color:var(--aube); }
[data-filter-group] > *[hidden]{ display:none !important; }
/* ── étagère produits ──────────────────────── */
.shelf{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem 1.2rem; }
@media(min-width:880px){ .shelf{ grid-template-columns:repeat(3,1fr); gap:2.8rem 2rem; } }
.shelf article{ display:grid; grid-template-rows:auto auto auto 1fr auto auto; gap:.55rem;
padding:1.4rem 0 0; border-top:1px solid rgba(244,240,233,.25);
opacity:0; transform:translateY(26px);
transition:border-top-color .5s, transform .95s var(--ease), opacity .95s ease; }
.in .shelf article{ opacity:1; transform:none; }
.in .shelf article:nth-child(3n+2){ transition-delay:.1s }
.in .shelf article:nth-child(3n){ transition-delay:.2s }
.shelf article:hover{ border-top-color:rgba(228,196,168,.75); transform:translateY(-6px) !important; }
.shelf .ph{ aspect-ratio:4/5; margin-bottom:.5rem; }
.shelf .ph img{ filter:saturate(.82) brightness(.92); }
.shelf .tag{ position:absolute; z-index:2; left:.7rem; top:.7rem; padding:.34rem .7rem .3rem;
border-radius:999px; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
background:rgba(10,9,18,.78); border:1px solid rgba(228,196,168,.5); color:var(--aube);
backdrop-filter:blur(6px); }
.shelf .tag.promo{ background:var(--aube); color:var(--nuit); border-color:var(--aube); }
.shelf em{ font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.75; }
.shelf h3{ margin:0; font-size:1.1rem; color:#FFFFFF; line-height:1.35; }
.shelf p{ margin:0; font-size:.85rem; color:#FFFFFF; line-height:1.7; }
.shelf .prix{ margin-top:.7rem; font-size:.8rem; letter-spacing:.1em; color:var(--aube);
font-variant-numeric:tabular-nums; }
.shelf .prix s{ color:#FFFFFF; margin-right:.55em; }
.shelf .go{ margin-top:.85rem; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--aube); text-decoration:none; display:inline-flex; align-items:center; gap:.45em;
border-bottom:1px solid transparent; justify-self:start; transition:border-color .35s; }
.shelf .go i{ font-style:normal; transition:transform .45s var(--ease); }
.shelf article:hover .go i{ transform:translateX(.5em); }
.shelf .go:hover{ border-color:rgba(228,196,168,.55); }
/* ── comment ça marche (3 étapes) ──────────── */
.pas{ display:grid; gap:1.6rem; counter-reset:pas; }
@media(min-width:800px){ .pas{ grid-template-columns:repeat(3,1fr); gap:2.2rem; } }
.pas > div{ position:relative; padding:1.5rem 1.4rem 1.4rem 3.4rem; border-radius:3px;
background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1); backdrop-filter:blur(4px); }
.pas > div::before{ counter-increment:pas; content:counter(pas);
position:absolute; left:1.3rem; top:1.35rem; font-family:Optima,Candara,sans-serif;
font-size:1.5rem; line-height:1; color:rgba(228,196,168,.5); }
.pas h3{ margin:0 0 .45rem; font-size:1rem; color:#FFFFFF; }
.pas p{ margin:0; font-size:.85rem; line-height:1.7; color:#FFFFFF; }
/* ── journal : liste d'articles ────────────── */
.posts{ list-style:none; margin:0; padding:0; }
.posts li{ border-top:1px solid rgba(244,240,233,.14);
opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s var(--ease); }
.posts li:last-child{ border-bottom:1px solid rgba(244,240,233,.14); }
.in .posts li{ opacity:1; transform:none; }
.in .posts li:nth-child(2){ transition-delay:.08s } .in .posts li:nth-child(3){ transition-delay:.16s }
.in .posts li:nth-child(4){ transition-delay:.24s } .in .posts li:nth-child(5){ transition-delay:.32s }
.posts a{ display:grid; gap:.55rem 1.6rem; padding:1.7rem .3rem; text-decoration:none; color:inherit;
align-items:start; transition:background .4s; }
@media(min-width:860px){
.posts a{ grid-template-columns:8.5rem 1fr 7rem; gap:.5rem 2rem; padding:1.9rem .8rem; }
.posts .meta{ grid-row:1 / span 3; }
.posts .vign{ grid-row:1 / span 3; grid-column:3; }
}
.posts a:hover{ background:rgba(23,21,40,.5); }
.posts .meta{ display:grid; gap:.4rem; align-content:start; }
.posts .date{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
color:#FFFFFF; font-variant-numeric:tabular-nums; }
.posts .cats{ display:flex; flex-wrap:wrap; gap:.35rem; }
.posts .cats span{ font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
color:rgba(228,196,168,.85); border:1px solid rgba(228,196,168,.28);
border-radius:999px; padding:.24rem .55rem .2rem; }
.posts h3{ margin:0; font-size:clamp(1.05rem,2vw,1.32rem); color:#FFFFFF; line-height:1.35;
transition:color .35s; max-width:34ch; }
.posts a:hover h3{ color:var(--aube); }
.posts p{ margin:0; font-size:.86rem; line-height:1.75; color:#FFFFFF; max-width:62ch; }
.posts .vign{ position:relative; width:7rem; aspect-ratio:4/5; border-radius:999px 999px 3px 3px;
overflow:hidden; background:#151222; }
.posts .vign img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:saturate(.7) brightness(.78); transition:transform 1.2s var(--ease), filter .7s; }
.posts a:hover .vign img{ transform:scale(1.07); filter:saturate(.9) brightness(.92); }
@media(max-width:859.9px){ .posts .vign{ display:none; } }
/* ── playlists : cartes Spotify ────────────── */
.spot{ display:grid; gap:1.8rem; }
@media(min-width:900px){ .spot{ grid-template-columns:repeat(2,1fr); gap:2.2rem; } }
.spot article{ display:grid; gap:.9rem; align-content:start; padding:1.5rem 1.4rem 1.4rem;
border-radius:3px; background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1);
backdrop-filter:blur(4px); transition:border-color .5s, background .5s;
opacity:0; transform:translateY(22px);
transition:opacity .9s ease, transform .9s var(--ease), border-color .5s, background .5s; }
.in .spot article{ opacity:1; transform:none; }
.in .spot article:nth-child(2){ transition-delay:.1s } .in .spot article:nth-child(3){ transition-delay:.2s }
.in .spot article:nth-child(4){ transition-delay:.3s }
.spot article:hover{ border-color:rgba(228,196,168,.42); background:rgba(30,26,50,.58); }
.spot em{ font-style:normal; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.75; }
.spot h3{ margin:0; font-size:1.14rem; color:#FFFFFF; }
.spot > article > p{ margin:0; font-size:.86rem; line-height:1.75; color:#FFFFFF; max-width:46ch; }
.spot iframe{ width:100%; height:352px; border:0; border-radius:12px; display:block;
color-scheme:normal; }
@media(min-width:1000px){ .spot.trois{ grid-template-columns:repeat(3,1fr); gap:1.6rem; } }
.spot.solo{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }
/* ── livre : couverture dessinée ───────────── */
.tome-wrap{ display:grid; place-items:center; perspective:1400px; }
.tome{ position:relative; width:min(320px,74vw); aspect-ratio:2/3; border-radius:2px 5px 5px 2px;
background:linear-gradient(120deg,#211D38 0%, #171528 45%, #120F22 100%);
box-shadow:0 60px 120px -55px rgba(124,107,166,.9), inset 0 0 0 1px rgba(228,196,168,.16);
transform:rotateY(-14deg) rotateX(3deg); transform-style:preserve-3d;
transition:transform 1.1s var(--ease);
display:grid; align-content:space-between; gap:1rem; padding:2.2rem 1.7rem 1.9rem 2.3rem; }
.tome:hover{ transform:rotateY(-4deg) rotateX(1deg); }
.tome::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:16px;
background:linear-gradient(90deg, rgba(10,9,18,.85), rgba(10,9,18,0));
border-radius:2px 0 0 2px; }
.tome::after{ content:""; position:absolute; inset:0; border-radius:2px 5px 5px 2px;
pointer-events:none; opacity:.3; mix-blend-mode:overlay; background-image:var(--grain); }
.tome .marque{ font-size:.6rem; letter-spacing:.36em; text-transform:uppercase; color:var(--aube); }
.tome .titre{ font-family:Optima,Candara,sans-serif; font-size:1.7rem; line-height:1.2; color:#FFFFFF; }
.tome .auteurs{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
color:#FFFFFF; line-height:1.9; }
.tome-cap{ margin-top:1.4rem; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
color:#FFFFFF; text-align:center; }
/* ══════════════════════════════════════════════════════════
Article de journal — mise en page longue lecture
══════════════════════════════════════════════════════════ */
body.art-page #prog{ display:block !important; }
.art-head{ padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem); display:grid; gap:1.15rem;
max-width:74ch; }
.art-head .kick{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.art-head .kick a, .art-head .kick span{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--aube); text-decoration:none; border:1px solid rgba(228,196,168,.3);
border-radius:999px; padding:.28rem .65rem .24rem; transition:background .35s, color .35s; }
.art-head .kick a:hover{ background:var(--aube); color:var(--nuit); }
.art-head h1{ font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.14; margin:0; color:#FFFFFF;
max-width:20ch; }
.art-head .who{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:#FFFFFF; }
.art-head .who b{ font-weight:400; color:#FFFFFF; }
.chapo{ font-family:Optima,Candara,sans-serif; font-style:italic;
font-size:clamp(1.05rem,2vw,1.32rem); line-height:1.75; color:#FFFFFF;
max-width:52ch; margin:0; padding-left:1.1rem; border-left:1px solid rgba(228,196,168,.55); }
.chapo span{ display:block; }
.chapo span + span{ margin-top:.5rem; color:#FFFFFF; font-size:.9em; }
.art-hero{ position:relative; width:100%; aspect-ratio:21/9; margin:0 0 clamp(2rem,5vw,3.4rem);
box-shadow:0 50px 110px -70px rgba(124,107,166,.8); }
@media(max-width:719.9px){ .art-hero{ aspect-ratio:4/3; } }
/* sommaire */
.somm{ margin:0 0 clamp(2.5rem,6vw,4rem); padding:1.5rem 1.6rem 1.3rem; border-radius:3px;
background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1); backdrop-filter:blur(4px);
max-width:74ch; }
.somm > em{ font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); opacity:.8; }
.somm ol{ list-style:none; margin:.9rem 0 0; padding:0; counter-reset:s;
display:grid; gap:.1rem; }
@media(min-width:780px){ .somm ol{ grid-template-columns:1fr 1fr; column-gap:2rem; } }
.somm li{ counter-increment:s; }
.somm a{ display:flex; gap:.7rem; align-items:baseline; padding:.42rem 0; text-decoration:none;
color:#FFFFFF; font-size:.88rem; line-height:1.5; transition:color .3s; }
.somm a::before{ content:""; flex:none; width:5px; height:5px; border-radius:50%;
background:rgba(228,196,168,.55); transform:translateY(-.3em); transition:background .3s, transform .3s; }
.somm a:hover::before{ background:var(--aube); transform:translateY(-.3em) scale(1.4); }
.somm a:hover{ color:var(--aube); }
/* corps de texte */
.prose{ display:grid; grid-template-columns:minmax(0,1fr) min(66ch,100%) minmax(0,1fr); }
.prose > *{ grid-column:2; }
.prose > .wide{ grid-column:1 / -1; }
.prose > *{ opacity:0; transform:translateY(18px);
transition:opacity .8s ease, transform .8s var(--ease); }
.prose > .seen{ opacity:1; transform:none; }
.prose p{ margin:0 0 1.35rem; font-size:1.04rem; line-height:1.92; color:#FFFFFF;
text-wrap:pretty; }
.prose p.ref{ font-size:.85rem; line-height:1.7; color:#FFFFFF; margin-bottom:.75rem;
padding-left:.95rem; border-left:1px solid rgba(228,196,168,.3); }
.prose p.ref em{ color:#FFFFFF; }
.prose p a, .prose li a{ color:var(--aube); text-decoration:none; border-bottom:1px solid rgba(228,196,168,.35); }
.prose p a:hover, .prose li a:hover{ border-color:var(--aube); }
.prose strong{ font-weight:500; color:#FFFFFF; }
.prose em{ font-style:italic; color:#FFFFFF; }
.prose p.lede::first-letter{ float:left; font-family:Optima,Candara,sans-serif; font-size:3.5em;
line-height:.82; padding:.06em .12em 0 0; color:var(--aube); }
.prose h2{ position:relative; margin:clamp(2.6rem,6vw,3.8rem) 0 1.1rem; font-size:clamp(1.4rem,2.8vw,1.95rem);
color:#FFFFFF; line-height:1.25; padding-top:1.5rem; }
.prose h2::before{ content:""; position:absolute; top:0; left:0; width:46px; height:1px;
background:linear-gradient(90deg, var(--aube), transparent); }
.prose h3{ margin:2.2rem 0 .8rem; font-size:1.12rem; color:var(--aube); font-weight:400;
letter-spacing:.01em; }
.prose h4{ margin:1.8rem 0 .6rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
color:#FFFFFF; font-family:"Avenir Next",Avenir,system-ui,sans-serif; font-weight:500; }
.prose ul, .prose ol{ margin:0 0 1.5rem; padding:0 0 0 1.4rem; display:grid; gap:.6rem; }
.prose ul{ list-style:none; padding-left:1.2rem; }
.prose ul li{ position:relative; font-size:.99rem; line-height:1.82; color:#FFFFFF; }
.prose ul li::before{ content:""; position:absolute; left:-1.2rem; top:.72em; width:5px; height:5px;
border-radius:50%; background:rgba(228,196,168,.75); }
.prose ol li{ font-size:.99rem; line-height:1.82; color:#FFFFFF; padding-left:.3rem; }
.prose ol li::marker{ color:rgba(228,196,168,.7); font-size:.85em; }
.prose blockquote{ margin:clamp(2rem,4vw,2.8rem) 0; padding:0 0 0 1.5rem;
border-left:1px solid rgba(228,196,168,.5); }
@media(min-width:1000px){ .prose blockquote{ margin-left:-3.2rem; width:calc(100% + 3.2rem); } }
.prose blockquote, .prose blockquote p{ font-family:Optima,Candara,sans-serif; font-style:italic;
font-size:clamp(1.12rem,2.2vw,1.45rem); line-height:1.7; color:#FFFFFF; }
.prose blockquote p{ margin:0; }
.prose hr{ grid-column:2; border:0; height:1px; margin:clamp(2.2rem,5vw,3.2rem) 0;
background:linear-gradient(90deg, transparent, rgba(244,240,233,.22), transparent); }
/* figures photo dans le corps */
.prose figure{ margin:clamp(2.2rem,5vw,3.2rem) 0; }
.prose figure .ph{ aspect-ratio:16/9; box-shadow:0 40px 90px -65px rgba(124,107,166,.7); }
.prose figure figcaption{ margin-top:.8rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
color:#FFFFFF; text-align:center; }
.prose > figure.wide{ max-width:1000px; margin-left:auto; margin-right:auto; }
/* grilles de lecture (anciennes tables) */
.grille{ margin:clamp(2rem,4.5vw,3rem) 0; display:grid; gap:1px; background:rgba(244,240,233,.12);
border:1px solid rgba(244,240,233,.12); border-radius:3px; overflow:hidden; }
.grille .row{ display:grid; gap:1px; background:rgba(244,240,233,.12); }
@media(min-width:640px){ .grille .row{ grid-template-columns:1fr 1.25fr; } }
.grille .cell{ background:rgba(16,14,30,.92); padding:.95rem 1.1rem; font-size:.88rem; line-height:1.7;
color:#FFFFFF; }
.grille .row.head .cell{ background:rgba(30,26,50,.95); color:var(--aube);
font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }
.grille .row.head .cell strong{ font-weight:500; color:var(--aube); }
.grille .cell:first-child{ color:#FFFFFF; }
.grille .cell strong{ color:#FFFFFF; font-weight:500; }
/* colonne étroite : la rangée devient un bloc, chaque cellule reprend son en-tête */
@media(max-width:639.9px){
.grille .row{ gap:0; }
.grille .row.head{ display:none; }
.grille .cell{ padding:.85rem 1rem; }
.grille .cell[data-h] + .cell[data-h]{ padding-top:.1rem; }
.grille .cell[data-h]::before{ content:attr(data-h); display:block; margin-bottom:.3rem;
font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(228,196,168,.85); }
}
/* figures dessinées */
.figsvg{ margin:clamp(2.4rem,5vw,3.4rem) auto; max-width:820px; padding:1.6rem 1.4rem 1.2rem;
border-radius:3px; background:rgba(23,21,40,.4); border:1px solid rgba(244,240,233,.1);
backdrop-filter:blur(4px); }
.figsvg svg{ width:100%; height:auto; display:block; overflow:visible; }
.figsvg figcaption{ margin-top:1rem; font-size:.72rem; line-height:1.7; letter-spacing:.04em;
color:#FFFFFF; text-align:center; }
.figsvg figcaption b{ font-weight:400; color:var(--aube); letter-spacing:.16em; text-transform:uppercase;
font-size:.62rem; display:block; margin-bottom:.35rem; }
.figsvg .ax{ stroke:rgba(244,240,233,.18); stroke-width:1; }
.figsvg .lbl{ fill:rgba(244,240,233,.6); font-family:"Avenir Next",Avenir,system-ui,sans-serif;
font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.figsvg .lbl.hi{ fill:var(--aube); }
.figsvg .val{ fill:rgba(244,240,233,.85); font-family:Optima,Candara,sans-serif; font-size:15px; }
.figsvg .stroke{ fill:none; stroke:var(--aube); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.figsvg .stroke.mauve{ stroke:var(--mauve); }
.figsvg .soft{ fill:none; stroke:rgba(244,240,233,.22); stroke-width:1; }
/* tracé animé quand la figure entre dans le champ */
.figsvg .draw{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
.figsvg.seen .draw{ animation:drawline 2.6s var(--ease) forwards; }
.figsvg.seen .draw.d2{ animation-delay:.45s } .figsvg.seen .draw.d3{ animation-delay:.9s }
@keyframes drawline{ to{ stroke-dashoffset:0; } }
.figsvg .pop{ opacity:0; transform:scale(.6); transform-origin:center; transform-box:fill-box; }
.figsvg.seen .pop{ animation:popin .7s var(--ease) forwards; }
.figsvg.seen .pop:nth-of-type(2){ animation-delay:.15s } .figsvg.seen .pop:nth-of-type(3){ animation-delay:.3s }
@keyframes popin{ to{ opacity:1; transform:scale(1); } }
.figsvg .fade{ opacity:0; }
.figsvg.seen .fade{ animation:fadein 1.1s ease forwards; }
@keyframes fadein{ to{ opacity:1; } }
.figsvg .breathe{ transform-origin:center; transform-box:fill-box; }
.figsvg.seen .breathe{ animation:breathe 6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.figsvg .pulse{ transform-origin:center; transform-box:fill-box; }
.figsvg.seen .pulse{ animation:pulsefig 3.2s ease-in-out infinite; }
@keyframes pulsefig{ 0%,100%{ opacity:.25; transform:scale(.9); } 50%{ opacity:.8; transform:scale(1.18); } }
.figsvg .travel{ offset-rotate:0deg; }
.figsvg.seen .travel{ animation:travel 5s linear infinite; }
@keyframes travel{ to{ offset-distance:100%; } }
@media (prefers-reduced-motion: reduce){
.figsvg .draw{ stroke-dashoffset:0; } .figsvg .pop,.figsvg .fade{ opacity:1; transform:none; }
.figsvg.seen .breathe,.figsvg.seen .pulse,.figsvg.seen .travel{ animation:none; }
.prose > *{ opacity:1; transform:none; }
}
/* encadré « en séance » */
.enseance{ margin:clamp(2.6rem,6vw,3.6rem) auto; max-width:820px; padding:1.7rem 1.6rem 1.5rem; border-radius:3px;
background:linear-gradient(180deg, rgba(124,107,166,.16), rgba(23,21,40,.5));
border:1px solid rgba(228,196,168,.28); }
.enseance em{ font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--aube); }
.enseance p{ margin:.7rem 0 1.1rem !important; font-size:.95rem; line-height:1.85;
color:#FFFFFF; }
.enseance .ctas{ display:flex; gap:.7rem; flex-wrap:wrap; }
/* pied d'article */
.art-foot{ margin:clamp(3rem,7vw,5rem) 0 0; padding-top:2rem;
border-top:1px solid rgba(244,240,233,.14); display:grid; gap:1.4rem; }
.art-foot .sig{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:#FFFFFF; line-height:1.9; }
.art-foot .sig a{ color:var(--aube); text-decoration:none; }
.rel{ display:grid; gap:1.4rem; margin-top:1rem; }
@media(min-width:760px){ .rel{ grid-template-columns:repeat(3,1fr); gap:1.8rem; } }
.rel a{ display:grid; gap:.55rem; align-content:start; text-decoration:none; color:inherit;
padding-top:1.1rem; border-top:1px solid rgba(244,240,233,.22); transition:border-color .4s, transform .6s var(--ease); }
.rel a:hover{ border-top-color:rgba(228,196,168,.7); transform:translateY(-4px); }
.rel .ph{ aspect-ratio:16/10; margin-bottom:.3rem; }
.rel em{ font-style:normal; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
color:rgba(228,196,168,.8); }
.rel h3{ margin:0; font-size:1rem; line-height:1.4; color:#FFFFFF; }
/* navigation article précédent / suivant */
.pn{ display:grid; gap:1rem; margin-top:clamp(2.4rem,5vw,3.4rem); }
@media(min-width:700px){ .pn{ grid-template-columns:1fr 1fr; gap:1.4rem; } }
.pn a{ display:grid; gap:.4rem; padding:1.1rem 1.3rem; border-radius:3px; text-decoration:none;
background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1);
transition:border-color .4s, background .4s; }
.pn a:hover{ border-color:rgba(228,196,168,.45); background:rgba(30,26,50,.6); }
.pn em{ font-style:normal; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
color:rgba(228,196,168,.75); }
.pn span{ font-family:Optima,Candara,sans-serif; font-size:.98rem; line-height:1.4; color:#FFFFFF; }
.pn a.nx{ text-align:right; }
/* lien de maquette non renseigné : visible mais inactif, pour ne pas produire de 404 */
a[aria-disabled="true"]{ opacity:.45; pointer-events:none; cursor:default; }
/* ── garde-fou : sans JavaScript, l'article doit rester lisible ──────────
Les états « masqué au départ » ne s'appliquent que si le script a posé
la classe .anim sur (inline, avant le premier rendu : pas de
clignotement). Si le JS ne s'exécute pas, tout s'affiche normalement. */
html:not(.anim) .prose > *{ opacity:1; transform:none; }
html:not(.anim) .art-page .ph{ clip-path:inset(0 0 0 0); }
html:not(.anim) .art-page .ph img{ transform:none; }
html:not(.anim) .figsvg .draw{ stroke-dashoffset:0; }
html:not(.anim) .figsvg .pop,
html:not(.anim) .figsvg .fade{ opacity:1; transform:none; }
/* ══════════════════════════════════════════════════════════
Le livre — « Un chemin sacré vers soi » (First Éditions)
══════════════════════════════════════════════════════════ */
/* ── couverture photographiée ───────────────── */
.cover-wrap{ display:grid; place-items:center; perspective:1600px; }
.cover{ position:relative; display:block; width:min(330px,74vw); aspect-ratio:1234/1758;
border-radius:2px 6px 6px 2px; overflow:hidden; transform:rotateY(-13deg) rotateX(3deg);
transform-style:preserve-3d; will-change:transform;
box-shadow:-16px 34px 70px -38px rgba(10,9,18,.95), 0 70px 130px -58px rgba(124,107,166,.85);
transition:transform 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.cover:hover{ transform:rotateY(-4deg) rotateX(1deg);
box-shadow:-10px 28px 60px -34px rgba(10,9,18,.9), 0 80px 150px -55px rgba(124,107,166,1); }
/* quand le script prend la main, il pose une transform en ligne : la règle :hover
ci-dessus ne sert plus qu'au repli sans JS. L'éclat, lui, reste piloté en CSS. */
.cover:hover .lustre{ opacity:.85; }
.cover img{ width:100%; height:100%; display:block; object-fit:cover; }
.cover .tranche{ position:absolute; left:0; top:0; bottom:0; width:15px; z-index:2; pointer-events:none;
background:linear-gradient(90deg, rgba(255,255,255,.24), rgba(10,9,18,.5) 46%, rgba(10,9,18,0)); }
.cover .lustre, .dos .lustre{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.55;
background:linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 48%,
rgba(255,255,255,0) 58%); transform:translateX(-14%);
transition:transform 1.3s var(--ease), opacity .8s ease; }
.cover:hover .lustre, .dos-scene:hover .lustre{ transform:translateX(16%); }
.hero .cover-cap, .cover-cap{ margin-top:1.5rem; max-width:none;
font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
color:#FFFFFF; text-align:center; line-height:2.2; }
.cover-cap b{ font-weight:400; color:var(--aube); }
@media(prefers-reduced-motion:reduce){ .cover{ transform:none; } .cover .lustre{ display:none; } }
/* ── la porte : la couverture ouvre les premières pages ───────────
Une invitation, pas un bouton : même vocabulaire que l'invite posée
sous le livre fermé dans /extrait. */
/* padding généreux plutôt que corps plus gros : le libellé garde la taille des
autres légendes du site, mais reste une cible confortable au doigt */
.porte{ margin-top:1.2rem; background:none; border:0; padding:.7rem .4rem; cursor:pointer;
font:inherit; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
color:#FFFFFF; transition:color .35s ease; }
.porte:hover{ color:var(--aube); }
.porte:focus-visible{ outline:1px solid rgba(228,196,168,.55); outline-offset:4px; border-radius:2px; }
.porte i{ font-style:normal; color:var(--aube); display:inline-block; margin-right:.35em;
animation:porte-respire 3.2s ease-in-out infinite; }
@keyframes porte-respire{ 0%,100%{ opacity:.55; transform:scale(1); }
50%{ opacity:1; transform:scale(1.18); } }
/* la légende suit la porte, plus la couverture */
.porte + .cover-cap{ margin-top:1.1rem; }
/* ── le lecteur : /extrait en plein écran ─────────────────────────
L'extrait suppose qu'il possède la fenêtre (overflow:hidden, tailles
en vw/vh). L'overlay lui rend exactement ça. */
.lecteur{ width:100%; height:100%; max-width:100%; max-height:100%;
padding:0; border:0; background:var(--nuit); overflow:hidden; }
.lecteur::backdrop{ background:rgba(10,9,18,.92); }
.lecteur iframe{ display:block; width:100%; height:100%; border:0; }
.lecteur .fermer{ position:absolute; right:1.1rem; top:1rem; z-index:2;
width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
display:grid; place-items:center; font:inherit; font-size:.85rem; line-height:1;
color:#FFFFFF; background:rgba(23,21,40,.72);
border:1px solid rgba(244,240,233,.16);
transition:color .3s, border-color .3s, background .3s; }
.lecteur .fermer:hover{ color:var(--aube); border-color:rgba(228,196,168,.45);
background:rgba(23,21,40,.95); }
body.lecteur-ouvert{ overflow:hidden; }
@media(prefers-reduced-motion:reduce){ .porte i{ animation:none; opacity:.9; } }
/* ── le dos du livre, détouré, debout ───────── */
/* Même lumière que la couverture : rien n'est posé derrière l'objet, il projette
lui-même son ombre portée et sa nappe mauve. Seules les valeurs changent —
un dos fait un dixième de la largeur d'un plat, l'ombre doit s'étaler plus. */
.dos-scene{ position:relative; width:min(400px,100%); margin:0 auto; perspective:1500px;
display:grid; place-items:center;
padding:clamp(2.4rem,6vw,3.8rem) 0 clamp(3rem,8vw,4.6rem); }
.dos{ position:relative; width:clamp(56px,7.6vw,82px); aspect-ratio:141/855;
border-radius:1px 3px 3px 1px; overflow:hidden;
transform:rotateY(9deg) rotateX(1deg); transform-style:preserve-3d; will-change:transform;
box-shadow:-9px 26px 48px -26px rgba(10,9,18,.95), 0 46px 105px -20px rgba(124,107,166,.8);
transition:transform 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.dos-scene:hover .dos{ box-shadow:-6px 20px 42px -24px rgba(10,9,18,.9),
0 54px 120px -16px rgba(124,107,166,.95); }
.dos img{ width:100%; height:100%; object-fit:cover; display:block; }
/* tranche éclairée à gauche et arête sombre à droite, comme sur la couverture */
.dos .tranche{ position:absolute; left:0; top:0; bottom:0; width:5px; z-index:2; pointer-events:none;
background:linear-gradient(90deg, rgba(255,255,255,.26), rgba(10,9,18,.45) 58%, rgba(10,9,18,0)); }
.dos::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(90deg, rgba(10,9,18,0) 64%, rgba(10,9,18,.4)); }
@media(prefers-reduced-motion:reduce){ .dos{ transform:none; } .dos .lustre{ display:none; } }
/* ── bandeau des disciplines traversées ─────── */
.champs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 0; padding:0; list-style:none; }
/* Même principe que les cartes : bordure dorée en fixe, pas au survol. */
.champs li{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--ivoire); padding:.5rem .85rem .45rem; border-radius:999px;
border:1px solid rgba(228,196,168,.42); background:rgba(23,21,40,.45);
transition:border-color .4s, color .4s; }
.champs li:hover{ border-color:rgba(228,196,168,.8); color:var(--ivoire); }
.champs.centre{ justify-content:center; margin-top:clamp(2rem,4vw,2.8rem); }
/* ── /alimentation · la philosophie ─────────────────────────
L'introduction reste en une colonne centrée, à mesure de lecture ; ce
sont les trois piliers, illustrés, qui portent le poids visuel. */
.philo-txt{ margin:0 auto; max-width:58ch; font-size:.97rem; line-height:1.85;
color:#FFFFFF; text-align:center; }
.philo-txt + .philo-txt{ margin-top:1.15rem; }
/* Marques dessinées des trois piliers ──────────────────────
Trois idées d'un même trait d'or : l'orbite dont on ne sort pas,
la courbe qui s'apaise, l'axe qui redonne des repères. Même boîte
optique (140 × 76), même centre — les trois pèsent pareil. La couleur
est posée en attributs dans le SVG : le dessin reste or même si ce
fichier arrive en retard ; le CSS n'ajoute que la hiérarchie des
opacités et le mouvement. Les longueurs de tracé (--l) sont relevées
une fois pour toutes : chemins figés, pas de mesure en JS. */
.portes.marquees > li{ padding-top:0; border-top:0; gap:1rem; }
.marque{ position:relative; display:block; margin-bottom:1.8rem; padding-bottom:1.6rem;
border-bottom:1px solid rgba(244,240,233,.22); transition:border-color .5s var(--ease); }
.portes.marquees > li:hover .marque{ border-bottom-color:rgba(228,196,168,.7); }
.marque svg{ display:block; width:100%; max-width:168px; height:auto;
margin-inline:auto; overflow:visible; }
/* Une nappe de lumière derrière chaque marque, à peine là. */
.marque::before{ content:""; position:absolute; left:50%; top:36%; width:170px; height:104px;
transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
background:radial-gradient(closest-side, rgba(228,196,168,.13), transparent 72%);
opacity:.75; transition:opacity .6s var(--ease); }
.portes.marquees > li:hover .marque::before{ opacity:1; }
/* Hiérarchie du trait */
.marque .piste{ stroke-width:1; stroke:rgba(228,196,168,.28); }
.marque .graduations{ stroke-width:1.2; stroke:rgba(228,196,168,.75); }
.marque .sillage{ stroke-width:1.2; opacity:0; }
.marque .pulse{ stroke:#FBEFE0; stroke-width:1.7; opacity:0;
filter:drop-shadow(0 0 5px rgba(243,220,196,.5)); }
/* Le trait s'écrit à l'entrée de la section… */
.marque .ligne, .marque .cercle, .marque .piste, .marque .graduations{
stroke-dasharray:var(--l,300); stroke-dashoffset:var(--l,300); }
/* Décalage d'un pilier à l'autre porté par une variable : une règle
nth-child sur les enfants écraserait les délais propres à chaque tracé. */
.portes.marquees > li{ --d:0s; }
.portes.marquees > li:nth-child(2){ --d:.14s; }
.portes.marquees > li:nth-child(3){ --d:.28s; }
.in .marque .ligne,
.in .marque .cercle{ animation:drawline 1.6s var(--ease) var(--d) forwards; }
.in .marque .piste{ animation:drawline 1.6s var(--ease) calc(var(--d) + .5s) forwards; }
.in .marque .graduations{ animation:drawline 1.2s var(--ease) calc(var(--d) + .7s) forwards; }
/* …puis les points se posent. */
.marque .lune, .marque .point, .marque .curseur circle, .marque .astre{
opacity:0; transform:scale(.5); transform-origin:center; transform-box:fill-box; }
.in .marque .lune,
.in .marque .curseur circle{ animation:popin .6s var(--ease) calc(var(--d) + 1.4s) forwards; }
.in .marque .astre{
animation:popin .5s var(--ease) calc(var(--d) + 1.2s + var(--i,0)*.09s) forwards,
scintille 6s ease-in-out calc(var(--d) + 2.8s + var(--i,0)*.7s) infinite; }
.etoiles circle:nth-of-type(1){ --i:1 } .etoiles circle:nth-of-type(2){ --i:2 }
.etoiles circle:nth-of-type(3){ --i:3 } .etoiles circle:nth-of-type(4){ --i:4 }
.etoiles circle:nth-of-type(5){ --i:5 }
/* longueurs relevées avec getTotalLength() sur les tracés définitifs */
.marque--boucle .cercle{ --l:131; }
.marque--boucle .piste{ --l:188; }
.marque--courbe .ligne{ --l:269; }
.marque--axe .ligne{ --l:112; }
.marque--axe .graduations{ --l:107; }
/* Le mouvement de fond ─────────────────────────────────────
Une fois le trait écrit, chaque marque garde un geste lent qui redit
son idée : la lune qui refait inlassablement le même tour, une onde
de lumière qui parcourt la courbe et vient mourir dans le point, le
curseur qui cherche sa place entre les graduations pendant que leurs
sommets scintillent. Lent, peu contrasté — l'œil ne doit l'attraper
qu'en périphérie. */
.marque .orbite{ transform-origin:70px 38px; transform-box:view-box; }
.in .marque .orbite{ animation:orbite 14s linear calc(var(--d) + 2.2s) infinite; }
@keyframes orbite{ to{ transform:rotate(360deg); } }
.in .marque .sillage{ animation:sillage 1.2s ease calc(var(--d) + 2.2s) forwards; }
@keyframes sillage{ to{ opacity:.45; } }
/* dasharray = 16 de lumière + (--l − 16) d'ombre ; un cycle décale d'une
longueur entière de chemin, la boucle est donc sans couture. */
.marque .pulse{ stroke-dasharray:16 253; }
.in .marque .pulse{ animation:file 7s linear calc(var(--d) + 2.4s) infinite,
lueur 1.2s ease calc(var(--d) + 2.4s) forwards; }
@keyframes file{ from{ stroke-dashoffset:16; } to{ stroke-dashoffset:-253; } }
@keyframes lueur{ to{ opacity:.85; } }
.in .marque .point{ animation:popin .6s var(--ease) calc(var(--d) + 1.4s) forwards,
respire 7s ease-in-out calc(var(--d) + 2.9s) infinite; }
@keyframes respire{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.marque .curseur{ transform-box:view-box; }
.in .marque .curseur{ animation:curseur 12s ease-in-out calc(var(--d) + 2.6s) infinite; }
@keyframes curseur{
0%,14%,100%{ transform:translateX(0); }
32%,46%{ transform:translateX(-23px); }
68%,84%{ transform:translateX(23px); }
}
@keyframes scintille{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@media(prefers-reduced-motion:reduce){
.marque .ligne, .marque .cercle, .marque .piste, .marque .graduations{ stroke-dashoffset:0; }
.marque .lune, .marque .point, .marque .curseur circle, .marque .astre{ opacity:1; transform:none; }
.marque .pulse, .marque .sillage{ display:none; }
.in .marque .orbite, .in .marque .curseur, .in .marque .astre, .in .marque .point{ animation:none; }
}
/* ── /alimentation · la bascule et l'encart ─────────────────
La bascule du raisonnement : deux lignes seules, plus larges que le
corps de texte, avant l'encart qui pose la signature. */
.pivot{ margin:clamp(2.2rem,5vw,3rem) auto 0; max-width:44ch; text-align:center;
font-family:Optima,Candara,sans-serif; font-size:clamp(1.1rem,2.2vw,1.45rem);
line-height:1.55; color:#FFFFFF; text-wrap:balance; }
/* L'encart de mise en avant : même vocabulaire que les cartes du site
(filet fin, fond nuit, coin droit), mais bordé d'un trait doré à
gauche pour le distinguer du corps de texte courant. */
.encart{ width:min(680px,100%); margin:clamp(2rem,4vw,2.6rem) auto 0;
display:grid; gap:.9rem;
padding:clamp(1.5rem,3vw,2rem) clamp(1.4rem,3vw,2.1rem);
border:1px solid rgba(244,240,233,.14); border-left:2px solid rgba(228,196,168,.6);
border-radius:3px; background:rgba(23,21,40,.45);
transition:border-color .5s ease; }
.encart:hover{ border-color:rgba(228,196,168,.32); border-left-color:var(--aube); }
.encart p{ margin:0; font-size:.95rem; line-height:1.85; color:#FFFFFF; }
/* ── /alimentation · les témoignages, en carrousel ──────────
Un témoignage à la fois, en grand : empilés, les sept formaient un mur
qu'on ne lit pas. Le défilement natif avec accroche assure le balayage
au doigt sans une ligne de script ; le JS ne sert qu'aux flèches, aux
pastilles et à l'état courant. */
.carr{ margin-top:clamp(2.2rem,5vw,3rem); }
.carr-piste{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.carr-piste::-webkit-scrollbar{ display:none; }
.carr-piste:focus-visible{ outline:1px solid rgba(228,196,168,.5); outline-offset:6px;
border-radius:3px; }
/* flex:0 0 100% — une vue par écran ; l'étirement aligne toutes les hauteurs
sur la plus longue, donc le bloc ne saute pas d'un témoignage à l'autre. */
.carr-vue{ flex:0 0 100%; scroll-snap-align:center; margin:0;
display:grid; align-content:center; justify-items:center; gap:1.5rem;
padding:clamp(1.6rem,4vw,2.6rem) clamp(1rem,4vw,3rem); text-align:center; }
/* Le blockquote global vise les citations d'ouverture ; on garde son échelle
éditoriale mais on la ramène à une taille lisible sur un paragraphe. */
.carr-vue blockquote{ margin:0; max-width:56ch;
font-size:clamp(1.02rem,1.9vw,1.24rem); line-height:1.75; }
.carr-vue blockquote p{ margin:0; font-style:italic; color:#FFFFFF; }
.carr-vue blockquote p::before{ content:"«\00a0"; color:rgba(228,196,168,.75); }
.carr-vue blockquote p::after{ content:"\00a0»"; color:rgba(228,196,168,.75); }
.carr-vue figcaption{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--aube); }
.carr-cmd{ display:flex; align-items:center; justify-content:center;
gap:clamp(1rem,3vw,1.8rem); margin-top:.4rem; }
.carr-fl{ flex:none; width:38px; height:38px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; padding:0; font:inherit;
color:#FFFFFF; background:rgba(23,21,40,.5);
border:1px solid rgba(244,240,233,.18);
transition:color .35s, border-color .35s, background .35s, opacity .35s; }
.carr-fl svg{ width:17px; height:17px; display:block; }
.carr-fl:hover{ color:var(--aube); border-color:rgba(228,196,168,.5);
background:rgba(30,26,50,.7); }
.carr-fl:disabled{ opacity:.28; cursor:default; }
.carr-fl:disabled:hover{ color:#FFFFFF; border-color:rgba(244,240,233,.18);
background:rgba(23,21,40,.5); }
.carr-pts{ display:flex; align-items:center; gap:.55rem; }
.carr-pt{ width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
background:none; border:1px solid rgba(244,240,233,.32);
transition:background .4s, border-color .4s, transform .4s var(--ease); }
.carr-pt:hover{ border-color:rgba(228,196,168,.7); }
.carr-pt[aria-current="true"]{ background:var(--aube); border-color:var(--aube);
transform:scale(1.25); }
/* Mention légale : lisible, mais clairement en retrait des témoignages. */
.avert{ margin:clamp(1.6rem,3vw,2.2rem) auto 0; max-width:74ch; text-align:center;
font-size:.72rem; line-height:1.75; color:#FFFFFF; }
/* ── FAQ dépliable ──────────────────────────────────────────
Même mécanique que le sommaire du livre : un filet par question, pas
de cadre, le chevron seul signale l'état. */
.faq{ width:min(760px,100%); margin:0 auto; }
.faq details{ border-top:1px solid rgba(244,240,233,.14); }
.faq details:last-of-type{ border-bottom:1px solid rgba(244,240,233,.14); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline;
gap:1.1rem; padding:1.25rem .3rem; transition:color .35s, background .35s;
font-family:Optima,Candara,sans-serif; font-size:clamp(1rem,1.9vw,1.14rem);
line-height:1.45; color:#FFFFFF; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq summary:hover{ color:var(--aube); }
.faq summary:focus-visible{ outline:1px solid rgba(228,196,168,.55); outline-offset:2px; }
.faq .chev{ flex:none; width:9px; height:9px; margin-left:auto; align-self:center;
border-right:1px solid rgba(228,196,168,.7); border-bottom:1px solid rgba(228,196,168,.7);
transform:rotate(45deg) translateY(-2px); transition:transform .45s var(--ease); }
.faq details[open] .chev{ transform:rotate(225deg) translateY(-2px); }
.faq details > p{ margin:0; padding:0 2.4rem 1.7rem .3rem; max-width:68ch;
font-size:.93rem; line-height:1.9; color:#FFFFFF;
animation:rise .6s var(--ease) both; }
.faq details > p a{ color:var(--aube); text-underline-offset:.25em;
text-decoration-thickness:1px; }
/* ── préface ────────────────────────────────── */
.prefa{ width:min(720px,100%); margin:0 auto; display:grid; gap:1.5rem; }
.prefa p{ margin:0; color:#FFFFFF; line-height:1.95; font-size:1rem; }
.prefa .pull{ position:relative; margin:1rem 0; padding:.4rem 0 .4rem clamp(1.4rem,4vw,2.6rem);
border-left:1px solid rgba(228,196,168,.45);
font-family:Optima,Candara,sans-serif; font-style:italic;
font-size:clamp(1.15rem,2.5vw,1.5rem); line-height:1.75; color:#FFFFFF; }
.prefa .pull::before{ content:"«"; position:absolute; left:-.05em; top:-.35em; font-size:3.4rem;
color:rgba(228,196,168,.2); font-style:normal; line-height:1; }
.prefa .sign{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
margin-top:.6rem; padding-top:1.4rem; border-top:1px solid rgba(244,240,233,.14);
font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#FFFFFF; }
.prefa .sign b{ font-family:Optima,Candara,sans-serif; font-weight:400; font-size:1.02rem;
letter-spacing:.06em; text-transform:none; color:var(--aube); }
/* épigraphes du livre */
.epi{ display:grid; gap:1.2rem; margin-top:clamp(2.5rem,6vw,3.6rem);
grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.epi blockquote{ margin:0; padding:1.5rem 1.3rem 1.3rem; border-radius:3px;
border:1px solid rgba(244,240,233,.12); background:rgba(23,21,40,.42);
display:grid; gap:.8rem; align-content:start;
opacity:0; transform:translateY(18px); transition:opacity .95s var(--ease), transform .95s var(--ease),
border-color .5s, background .5s; }
.in .epi blockquote{ opacity:1; transform:none; }
.in .epi blockquote:nth-child(2){ transition-delay:.1s }
.in .epi blockquote:nth-child(3){ transition-delay:.2s }
.in .epi blockquote:nth-child(4){ transition-delay:.3s }
.epi blockquote:hover{ border-color:rgba(228,196,168,.42); background:rgba(30,26,50,.58); }
.epi p{ margin:0; font-family:Optima,Candara,sans-serif; font-style:italic; font-size:1rem;
line-height:1.8; color:#FFFFFF; }
.epi cite{ font-style:normal; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--aube); }
/* ── sommaire : parties dépliables ──────────── */
.somm-out{ display:flex; justify-content:flex-end; gap:.5rem; margin:0 0 .4rem; }
.somm-out button{ font:inherit; cursor:pointer; font-size:.6rem; letter-spacing:.2em;
text-transform:uppercase; color:#FFFFFF; background:none; padding:.55rem .95rem;
border:1px solid rgba(244,240,233,.18); border-radius:999px; transition:color .3s, border-color .3s; }
.somm-out button:hover{ color:var(--ivoire); border-color:rgba(228,196,168,.45); }
.parts{ list-style:none; margin:0; padding:0; }
.parts > li{ border-top:1px solid rgba(244,240,233,.14);
opacity:0; transform:translateY(16px);
transition:opacity .9s var(--ease), transform .9s var(--ease); }
.parts > li:last-child{ border-bottom:1px solid rgba(244,240,233,.14); }
.in .parts > li{ opacity:1; transform:none; }
.in .parts > li:nth-child(2){ transition-delay:.09s } .in .parts > li:nth-child(3){ transition-delay:.18s }
.in .parts > li:nth-child(4){ transition-delay:.27s } .in .parts > li:nth-child(5){ transition-delay:.36s }
.in .parts > li:nth-child(6){ transition-delay:.45s }
/* Le sommaire compte huit entrées depuis l'ajout de la partie IV, de la préface
et de la lettre au lecteur : la cascade doit aller jusqu'au bout. */
.in .parts > li:nth-child(7){ transition-delay:.54s }
.in .parts > li:nth-child(8){ transition-delay:.63s }
/* Préface et lettre au lecteur n'ont pas de chiffre romain : le tiret tient la
colonne pour que les titres restent alignés sur ceux des parties. */
.parts.flat .rom:empty::before{ content:"—"; }
.part > summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline;
gap:clamp(.7rem,2vw,1.3rem); padding:1.4rem .3rem; transition:background .35s; }
.part > summary::-webkit-details-marker{ display:none; }
.part > summary::marker{ content:""; }
.part > summary:hover{ background:rgba(23,21,40,.4); }
.part .rom{ flex:none; width:2.6rem; font-size:.66rem; letter-spacing:.18em; color:var(--aube);
padding-top:.2em; }
.part .tit{ flex:1; font-family:Optima,Candara,sans-serif;
font-size:clamp(1.02rem,2.1vw,1.28rem); line-height:1.45; color:#FFFFFF;
transition:color .35s; }
.part > summary:hover .tit{ color:var(--aube); }
.part .cnt{ flex:none; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
color:#FFFFFF; white-space:nowrap; }
.part .chev{ flex:none; width:9px; height:9px; margin-left:.2rem; border-right:1px solid rgba(228,196,168,.7);
border-bottom:1px solid rgba(228,196,168,.7); transform:rotate(45deg) translateY(-2px);
transition:transform .45s var(--ease); }
.part[open] .chev{ transform:rotate(225deg) translateY(-2px); }
@media(max-width:640px){ .part .cnt{ display:none; } .part .rom{ width:1.5rem; } }
.chaps{ list-style:none; margin:0; padding:0 .3rem 1.9rem 2.2rem;
display:grid; gap:1.5rem; animation:rise .7s var(--ease) both; }
@media(min-width:641px){ .chaps{ padding-left:3.4rem; } }
@media(min-width:760px){ .chaps{ padding-left:3.9rem; } }
.chaps > li{ display:grid; gap:.55rem; }
.chaps .num{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
color:rgba(228,196,168,.75); }
.chaps h4{ margin:0; font-family:Optima,Candara,sans-serif; font-weight:400;
font-size:1.04rem; line-height:1.5; color:#FFFFFF; }
.chaps ul{ list-style:none; margin:.15rem 0 0; padding:0; display:grid; gap:.42rem; }
.chaps ul li{ position:relative; padding-left:1.15rem; font-size:.86rem; line-height:1.65;
color:#FFFFFF; max-width:64ch; }
.chaps ul li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1px;
background:rgba(228,196,168,.55); }
.chaps .manque{ color:#FFFFFF; font-size:.86rem; line-height:1.7; margin:0; }
/* ── sommaire à plat : les parties, sans dépliage ─────────────
Reprend la ligne des summary d'origine, sans le curseur ni le chevron. */
.parts.flat > li{ display:flex; align-items:baseline; gap:clamp(.7rem,2vw,1.3rem);
padding:1.4rem .3rem; }
.parts.flat .rom{ flex:none; width:2.6rem; font-size:.66rem; letter-spacing:.18em;
color:var(--aube); padding-top:.2em; }
.parts.flat .tit{ flex:1; font-family:Optima,Candara,sans-serif;
font-size:clamp(1.02rem,2.1vw,1.28rem); line-height:1.45; color:#FFFFFF; }
.parts.flat .cnt{ flex:none; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
color:#FFFFFF; white-space:nowrap; }
@media(max-width:640px){ .parts.flat .cnt{ display:none; } .parts.flat .rom{ width:1.5rem; } }
/* ── /livre · 02 L'expérience ─────────────────────────────────
Quatre portes d'entrée dans le livre : comprendre, élargir,
expérimenter, incarner. */
.boussole{ font-family:Optima,Candara,sans-serif; font-size:clamp(1.1rem,2.2vw,1.42rem);
line-height:1.45; color:#FFFFFF; max-width:26ch; text-wrap:balance; }
.portes{ list-style:none; margin:0; padding:0; display:grid; gap:1.6rem 2.2rem; }
@media(min-width:680px){ .portes{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1020px){ .portes{ grid-template-columns:repeat(4,1fr); gap:2.4rem; } }
/* Variante à trois blocs (/alimentation) : sans elle, la grille à quatre
colonnes laisse une colonne vide à droite. */
@media(min-width:680px){ .portes.trois{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.portes > li{ display:grid; gap:.75rem; align-content:start;
padding-top:1.15rem; border-top:1px solid rgba(244,240,233,.22);
opacity:0; transform:translateY(18px);
transition:opacity .9s var(--ease), transform .9s var(--ease), border-top-color .6s ease; }
.in .portes > li{ opacity:1; transform:none; }
.in .portes > li:nth-child(2){ transition-delay:.1s } .in .portes > li:nth-child(3){ transition-delay:.2s }
.in .portes > li:nth-child(4){ transition-delay:.3s }
.portes > li:hover{ border-top-color:rgba(228,196,168,.7); }
.portes .rom{ font-size:.63rem; letter-spacing:.24em; text-transform:uppercase; color:var(--aube); }
.portes p{ margin:0; font-size:.88rem; line-height:1.78; color:#FFFFFF; }
/* le pitch vidéo prend la place des encarts de citation */
.pitch{ margin:clamp(2.6rem,6vw,4rem) auto 0; width:min(880px,100%); }
.pitch-ph{ aspect-ratio:16/9; display:grid; place-items:center; border-radius:3px;
border:1px dashed rgba(228,196,168,.35); background:rgba(23,21,40,.45); text-align:center;
padding:1.5rem; }
.pitch figcaption{ margin-top:.9rem; text-align:center; font-size:.62rem; letter-spacing:.2em;
text-transform:uppercase; color:#FFFFFF; }
.mot{ margin:clamp(2.4rem,5vw,3.4rem) auto 0; width:min(680px,100%); text-align:center; }
.mot p{ margin:0; font-family:Optima,Candara,sans-serif; font-style:italic;
font-size:clamp(1.15rem,2.4vw,1.62rem); line-height:1.6; color:#FFFFFF; }
.mot cite{ display:block; margin-top:1.1rem; font-style:normal; font-size:.6rem;
letter-spacing:.22em; text-transform:uppercase; color:var(--aube); }
/* la préface intégrale, repliée derrière son propre lien */
.prefa-fold{ margin-top:clamp(2.4rem,5vw,3.4rem); }
.prefa-fold > summary{ cursor:pointer; list-style:none; width:max-content; margin:0 auto;
font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
color:#FFFFFF; padding:.7rem 1.2rem; border-radius:999px;
border:1px solid rgba(244,240,233,.18); transition:color .3s, border-color .3s; }
.prefa-fold > summary::-webkit-details-marker{ display:none; }
.prefa-fold > summary::marker{ content:""; }
.prefa-fold > summary:hover{ color:var(--aube); border-color:rgba(228,196,168,.45); }
.prefa-fold[open] > summary{ color:var(--aube); border-color:rgba(228,196,168,.45); }
.prefa-fold .prefa{ margin-top:clamp(1.8rem,4vw,2.6rem); animation:rise .7s var(--ease) both; }
/* ══════════════════════════════════════════════════════════
Menu groupé — maquette (prototype sur /alimentation)
Portée volontairement limitée à nav.top.groupe : les autres
pages gardent le menu à plat tant que la maquette n'est pas
validée. À la propagation, la classe pourra rester.
Desktop ≥940 : 5 entrées + Réserver, sous-menus au survol.
Mobile <940 : logo + Réserver + burger → panneau plein écran,
les 9 pages groupées, dépliées, sans second tap.
══════════════════════════════════════════════════════════ */
/* La barre doit primer sur le contenu : .hero (et les sections positionnées qui
suivent) sont peintes après le