/* Retraite spirituelle en Normandie — Institut Buyutin
   Identité Buyutin (emblème tulipe-livre-B, vieux rose #c4939a, Cormorant Garamond, DM Sans, script)
   déclinée en automne : le rose reste la couleur maîtresse (emblème, titres script, étiquettes) ;
   l'ambre et le miel sont la lumière (héros, feuilles), le marron et la crème les matières. */
:root{
  --nuit:#241618; --cacao:#3b2427; --rose:#c4939a; --rose-clair:#e8cdc6;
  --creme:#f7e7dd; --lin:#f2d8c8; --papier:#fdf5ef;
  --encre:#2e1d1f; --encre-2:#6d5551;
  --rose-profond:#a65d68; --prune:#3a1416; --miel:#f7ddb5; --ambre:#d9893f; --peche:#f0c0a2; --miel-rose:#e8b3a8;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --script:"Luxurious Script","Pinyon Script","Cormorant Garamond",cursive;
  --col:min(40rem,calc(100vw - 2.5rem)); --large:min(72rem,calc(100vw - 2.5rem));
  --lent:1.6s; --couverture:2.5rem;
  --emblem:url(../img/emblem.png);
}
@font-face{font-family:"Luxurious Script";src:url(../fonts/luxurious-script-v9-latin-regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/web/cormorant.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/web/cormorant-italic.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/web/dm-sans.woff2) format("woff2")}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nuit);color:var(--encre);font:300 1.0625rem/1.75 var(--sans);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
:focus-visible{outline:2px solid var(--rose-profond);outline-offset:4px}

/* en-tête : transparent sur le héros, voile prune flouté ensuite (lisible sur le clair) */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;color:var(--prune);transition:background .8s ease,padding .8s ease,box-shadow .8s ease}
.top.est-plein{color:var(--creme);background:rgba(58,20,22,.96);padding:.7rem 1.25rem;box-shadow:0 10px 30px -20px rgba(0,0,0,.6)}
.top__brand,.top__link{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.top__brand{display:inline-flex;align-items:center;gap:.6rem}
.top__marque{display:inline-block;width:1.5rem;height:1.6rem;background:var(--rose);-webkit-mask:var(--emblem) center/contain no-repeat;mask:var(--emblem) center/contain no-repeat}
.top__link{border-bottom:1px solid var(--rose);padding-bottom:2px}
/* sur téléphone, l'en-tête s'efface dès qu'on descend : la barre « Réserver » du bas prend le relais */
@media(max-width:899px){.top{transition:transform .6s ease,background .8s ease}.top.est-plein{transform:translateY(-100%)}}

/* HERO */
/* après-midi doré : crème en haut, miel, puis un pêche rosé qui garde le rose Buyutin dans la lumière */
.hero{position:relative;z-index:0;min-height:calc(100svh + var(--couverture));display:grid;align-items:center;color:var(--prune);overflow:hidden;background:linear-gradient(180deg,#fcf0dc 0,var(--miel) 40%,#f0c0a2 76%,#e3a28f 100%)}
/* rayons de soleil qui glissent lentement depuis le coin haut */
.hero__rayons{position:absolute;inset:-20%;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,250,235,0) 0 70px,rgba(255,248,226,.55) 110px,rgba(255,250,235,0) 160px 260px);-webkit-mask:radial-gradient(55% 60% at 78% 18%,#000,transparent 78%);mask:radial-gradient(55% 60% at 78% 18%,#000,transparent 78%);will-change:transform;animation:rayons 26s ease-in-out infinite alternate}
@keyframes rayons{to{transform:translateX(5%)}}

.hero__lueur{position:absolute;left:68%;top:44%;width:60rem;height:60rem;margin:-30rem 0 0 -30rem;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,238,.5),rgba(255,252,238,0));will-change:transform;animation:promene 38s ease-in-out infinite alternate}
@keyframes promene{0%{transform:translate(-6vw,-4vh)}25%{transform:translate(8vw,6vh)}50%{transform:translate(-2vw,10vh)}75%{transform:translate(10vw,-6vh)}100%{transform:translate(-8vw,4vh)}}
@media(max-width:899px){.hero__lueur{left:50%;top:28%}}
.hero__braises{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__scene{position:relative;z-index:1;will-change:transform;display:grid;gap:2rem;align-items:center;justify-items:center;padding:6rem 1.25rem 4.5rem;width:100%;max-width:84rem;margin:0 auto}
.hero__inner{max-width:40rem;text-align:center}
.emblem{position:relative;width:min(74vw,25rem);aspect-ratio:836/900;opacity:0;filter:blur(14px);transform:scale(.96);animation:eclot 3.6s .3s ease forwards}
@keyframes eclot{to{opacity:1;filter:blur(0);transform:none}}
/* halo : un cœur miel bordé de rose */
.emblem__halo{position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(255,206,140,.7),rgba(232,168,170,.42) 50%,rgba(196,147,154,0) 76%);animation:respire 9s ease-in-out infinite}
@keyframes respire{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
/* l'emblème, marque de lumière crème et rose posée sur le paysage */
.emblem__fenetre{position:absolute;inset:0;overflow:hidden;will-change:transform;-webkit-mask:var(--emblem) center/100% 100% no-repeat;mask:var(--emblem) center/100% 100% no-repeat;background:linear-gradient(170deg,#fffaf0 0,#fbe9da 55%,#f2cfc4 100%);opacity:.94}
/* le paysage en plein écran */
.hero__fond{position:absolute;inset:0;z-index:0;background:#e8b49a url(../img/mer-calme-dore.jpg) center/cover}
.hero__fond video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 3.5s ease}
.hero__fond video.is-on{opacity:1}
/* voile : léger sur tout le paysage (unité de couleur), dense seulement derrière le texte */
.hero__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,240,220,.93) 0,rgba(252,240,220,.82) 36%,rgba(252,240,220,.25) 58%,rgba(247,221,181,.08) 100%),linear-gradient(180deg,rgba(247,221,181,0) 70%,rgba(240,192,162,.55) 100%)}
@media(max-width:899px){.hero__fond::after{background:linear-gradient(180deg,rgba(252,240,220,.1) 0,rgba(252,240,220,.06) 45%,rgba(252,240,220,.55) 80%,rgba(252,240,220,.9) 100%)}}
/* le son de la mer : jamais automatique, un geste le lance */
/* le son de la mer : une simple icône, discrète, jamais automatique */
.hero__son{position:absolute;z-index:3;right:1.25rem;bottom:calc(var(--couverture) + 1.1rem);display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;opacity:.6;transition:opacity .4s ease,background .4s ease}
.hero__son:hover,.hero__son:focus-visible,.hero__son[aria-pressed="true"]{opacity:1;background:rgba(252,240,220,.45)}
.hero__son svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--prune);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero__son .onde{opacity:.35;transition:opacity .5s ease}
.hero__son[aria-pressed="true"] .onde{opacity:1;animation:onde 2.4s ease-in-out infinite}
.hero__son[aria-pressed="true"] .o2{animation-delay:-1.2s}
@keyframes onde{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:899px){
  .hero__son{top:4.2rem;bottom:auto;right:.9rem}
  .hero__defiler{display:none}
  /* sur téléphone, le paysage occupe le haut de l'écran, cadré sur la mer, puis se fond dans la crème */
  .hero__fond{bottom:auto;height:min(68svh,36rem);-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent)}
  .hero__fond video{object-position:50% 65%}
}
.kicker,.etiquette{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin:0 0 1.25rem}
.hero .kicker{color:var(--rose-profond);font-weight:500}
/* dans le héros clair, le bouton passe en prune ; il reste crème sur les fonds sombres */
.hero .bouton{background:var(--prune);color:#fcf0dc}
.hero .bouton:hover,.hero .bouton:focus-visible{background:var(--rose-profond)}
.hero__title{font-size:clamp(2.6rem,8.5vw,5.2rem);line-height:1.02;font-weight:400}
.script{display:block;font-family:var(--script);font-size:1.12em;line-height:1.15;color:var(--rose-profond);font-weight:400;white-space:nowrap}
.hero__lead{font-family:var(--serif);font-size:clamp(1.25rem,3.2vw,1.55rem);line-height:1.4;margin:1.4rem auto 1rem}
.hero__texte{font-size:.95rem;line-height:1.7;color:#5e3430;margin:0 auto 2rem;max-width:34rem}
.hero__texte i{font-family:var(--serif);font-size:1.1em}
/* un seul endroit à la fois : le texte d'accueil est dans le héros sur ordinateur, en ouverture de « L'instant présent » sur téléphone */
@media(min-width:900px){.seul-mobile{display:none!important}}
@media(max-width:899px){.seul-bureau{display:none!important}}
.present__ouverture{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--rose-clair);margin:0 0 1.5rem}
.present__ouverture i{font-style:italic}
/* sur téléphone, l'essentiel tient dans le premier écran : emblème réduit d'un tiers, marges resserrées */
@media(max-width:899px){
  .hero__scene{padding-top:4rem;gap:1rem}
  .emblem{width:min(46vw,16rem)}
  .hero .kicker{margin-bottom:.9rem}
  .hero__lead{font-size:1.18rem;margin:.9rem auto 1.3rem}
  .hero__cta{gap:.9rem 1.6rem}
  .hero__faits{margin-top:1.1rem;gap:.4rem}
  .hero__faits li{font-size:.74rem;padding:.35rem .8rem}
}
/* très petits écrans (iPhone SE) : le titre se resserre aussi */
@media(max-width:899px) and (max-height:700px){.hero__title{font-size:2.35rem}.emblem{width:min(40vw,14rem)}}
.hero__cta{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;align-items:center;justify-content:center;margin:0}
.hero__faits{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:0;margin:2rem 0 0}
.hero__faits li{font-size:.78rem;letter-spacing:.06em;padding:.4rem .9rem;border-radius:999px;background:rgba(255,255,255,.4);border:1px solid rgba(166,93,104,.3);color:#5a2a2e}
.hero__faits strong{color:var(--prune);font-weight:500}
.lien{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:3px}
.hero__defiler{position:absolute;z-index:1;left:50%;bottom:calc(var(--couverture) + 1rem);margin:0;width:1px;height:2.6rem;background:rgba(58,20,22,.18);overflow:hidden}
.hero__defiler span{display:block;width:1px;height:1rem;background:var(--rose-profond);animation:descend 5s ease-in-out infinite}
@keyframes descend{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
@media(min-width:900px){
  .hero__scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;padding:6rem 4rem 4rem}
  .hero__inner{order:1;text-align:left}
  .emblem{order:2;width:min(34vw,32rem)}
  .hero__cta,.hero__faits{justify-content:flex-start}
  .hero__lead,.hero__texte{margin-left:0}
}

/* bouton : crème plein, sobre */
.bouton{display:inline-block;padding:1.15rem 2.4rem;border-radius:999px;background:var(--creme);color:var(--nuit);text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .6s ease}
.bouton:hover,.bouton:focus-visible{background:var(--rose-clair)}
.bouton--grand{font-size:.85rem;padding:1.3rem 2.8rem}

/* sections : des couvertures posées les unes sur les autres, bords arrondis, jamais de coupe nette */
.bloc{position:relative;padding:calc(clamp(4.5rem,11vw,8.5rem) + var(--couverture)) 1.25rem clamp(4.5rem,11vw,8.5rem);margin-top:calc(var(--couverture) * -1);border-radius:var(--couverture) var(--couverture) 0 0;display:grid;justify-items:center;gap:1.4rem;text-align:center}
.bloc>*{width:var(--col);min-width:0}
.bloc--nuit{background:var(--nuit);color:var(--creme)}
.bloc--cacao{background:var(--cacao);color:var(--creme)}
.bloc--braise{background:radial-gradient(120% 75% at 50% 0,#6b3539,#4a2629 55%,var(--cacao));color:var(--creme)}
.bloc--creme{background:var(--creme)}
.bloc--lin{background:var(--lin)}
/* miel : la lumière du héros, reprise dans la page */
.bloc--miel{background:linear-gradient(180deg,#fcf0dc 0,var(--miel) 50%,var(--peche) 100%)}
.bloc--prune{background:radial-gradient(110% 70% at 50% 0,#5c2329,var(--prune) 60%,#2a0e10);color:var(--creme)}
.bloc--reserver{background:radial-gradient(120% 80% at 50% 0,#6a2e33,var(--prune) 55%,#24100f);color:var(--creme)}
main>.bloc,.pied{z-index:1}
#present{box-shadow:0 -24px 50px -24px rgba(58,20,22,.4)}
.etiquette{margin:0}
.bloc--creme .etiquette,.bloc--lin .etiquette,.bloc--miel .etiquette{color:var(--rose-profond)}
.titre{font-size:clamp(2rem,6vw,3.4rem);line-height:1.12;font-weight:400}
.titre--script{font-family:var(--script);font-size:clamp(3.2rem,11vw,6rem);line-height:1.05;color:var(--rose-clair)}
.intro{margin:0;font-size:1.05rem;opacity:.9}
.bloc--nuit .intro,.bloc--cacao .intro,.bloc--braise .intro,.bloc--prune .intro{color:var(--rose-clair)}

/* hors réseau : cinq objets qui se dessinent puis s'allument */
.signes{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2.75rem 1.25rem;width:var(--large)}
.signes h3{font-size:1.5rem;margin:.75rem 0 .25rem;font-weight:400}
.signes p{margin:0 auto;color:var(--rose-clair);font-size:.93rem;max-width:16rem}
.icone{width:5rem;height:6.25rem;margin:0 auto;fill:none;stroke:var(--rose);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.js .icone [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.flamme{fill:rgba(232,205,198,0);stroke:var(--rose-clair);transform-origin:48px 56px;animation:vacille 7s ease-in-out infinite;transition:fill 2s ease 2.2s,filter 2s ease 2.2s}
.signes li.vu .flamme{fill:rgba(240,190,150,.4);filter:drop-shadow(0 0 6px rgba(240,180,138,.8))}
@keyframes vacille{0%,100%{transform:rotate(0) scaleY(1)}30%{transform:rotate(-2.5deg) scaleY(1.05)}65%{transform:rotate(2deg) scaleY(.96)}}
.rayon{stroke:var(--rose-clair);animation:luit 6s ease-in-out infinite}
@keyframes luit{0%,100%{opacity:.35}50%{opacity:1}}
.vapeur{stroke:var(--rose-clair);animation:monte 9s ease-in-out infinite}
.v2{animation-delay:3s}.v3{animation-delay:6s}
@keyframes monte{0%{opacity:0;transform:translateY(8px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}
.point{fill:var(--rose);stroke:none;opacity:0;transition:opacity 1.2s ease 2s}
.signes li.vu .point{opacity:1}
@media(min-width:900px){.signes{grid-template-columns:repeat(4,1fr);gap:2rem}}

/* duo arche : la photo s'ouvre comme une fenêtre */
.bloc--duo{text-align:left;align-items:center}
.arche{margin:0;width:min(22rem,100%);justify-self:center;overflow:hidden;border-radius:999px 999px 1.5rem 1.5rem}
.arche img{aspect-ratio:2/3;object-fit:cover;width:100%;transform:translateY(var(--par,0px)) scale(1.14);will-change:transform}
.js .arche{clip-path:inset(18% 22% 18% 22% round 999px)}
.js .arche.vu{clip-path:inset(0 0 0 0 round 999px 999px 1.5rem 1.5rem);transition:clip-path 2.6s cubic-bezier(.2,.7,.2,1),opacity var(--lent) ease}
.colonne{display:grid;gap:1.1rem}
.colonne>*{margin:0}
.citation{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1.35;color:var(--rose-profond);margin-top:.75rem!important}
@media(min-width:900px){
  .bloc--duo{grid-template-columns:minmax(0,22rem) minmax(0,32rem);gap:5rem;justify-content:center}
  .bloc--duo>*{width:auto}
}

/* quatre */
.quatre{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.25rem;width:var(--large);text-align:left}
.quatre li{background:rgba(255,250,245,.7);border-radius:1.5rem;padding:1.5rem 1.4rem}
.quatre li::before{content:"";display:block;width:1.3rem;height:1.4rem;margin-bottom:.8rem;background:var(--rose);-webkit-mask:var(--emblem) center/contain no-repeat;mask:var(--emblem) center/contain no-repeat}
.quatre h3{font-size:1.5rem;margin-bottom:.35rem}
.quatre p{margin:0;font-size:.97rem}
@media(min-width:800px){.quatre{grid-template-columns:repeat(4,1fr)}}

/* galerie : un rang de grandes images qui avance seul ; au doigt, on le fait glisser dans les deux sens */
.bloc--galerie>.defile{width:calc(100% + 2.5rem);max-width:none}
.defile{overflow-x:auto;overflow-y:hidden;margin-top:2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.defile::-webkit-scrollbar{display:none}
.defile:focus-visible{outline-offset:-4px}
.defile__rang{list-style:none;margin:0;padding:0 1.25rem;display:flex;width:max-content}
.defile__rang li{flex:none;width:clamp(15rem,27vw,23rem);margin-right:1.25rem}
.defile__rang img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1.5rem;pointer-events:none;user-select:none;-webkit-user-select:none}

/* programme : un chemin qui s'éclaire au fil du défilement */
.chemin{position:relative;width:var(--large);margin-top:2.5rem;text-align:left;padding-left:2.75rem}
.chemin__fil{position:absolute;left:1rem;top:0;bottom:0;width:2px;background:rgba(166,93,104,.16);border-radius:2px}
.chemin__trace{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:top;transform:scaleY(0);will-change:transform;background:linear-gradient(#f2c88e,var(--peche) 40%,var(--rose) 75%,var(--rose-profond));border-radius:2px}
.chemin__flamme{position:absolute;left:50%;top:0;will-change:transform;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,var(--rose) 0,var(--rose) 30%,rgba(196,147,154,0) 70%)}
.jour{position:relative;z-index:1;margin:2.5rem 0 1.25rem}
.jour:first-of-type{margin-top:0}
.jour::before{content:"";position:absolute;left:calc(-1.75rem + 1px);top:2.1rem;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:var(--creme);border:2px solid var(--rose);transition:background .8s ease,border-color .8s ease}
.jour__num{font-family:var(--serif);font-size:4.2rem;line-height:1;color:var(--rose);margin:0;display:inline-block;vertical-align:baseline}
.jour__nom{display:inline-block;font-family:var(--script);font-weight:400;font-size:2.8rem;color:var(--rose-profond);margin-left:.6rem;line-height:1}
.jour__theme{margin:.4rem 0 0;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--encre-2)}
.etapes{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.etape{position:relative;z-index:1;background:var(--papier);border-radius:1.25rem;padding:1rem 1.25rem;box-shadow:0 14px 30px -22px rgba(166,93,104,.55)}
.etape::before{content:"";position:absolute;left:calc(-1.75rem + 1px);top:1.45rem;width:11px;height:11px;transform:translate(-50%,-50%);border-radius:50%;background:var(--creme);border:2px solid var(--rose);transition:background .8s ease,border-color .8s ease}
/* atteint : le cercle se remplit, à plat, sans lueur */
.jour.atteint::before,.etape.atteint::before{background:var(--rose);border-color:var(--rose)}
.etape__moment{display:block;font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-profond)}
.etape p{margin:.2rem 0 0;font-family:var(--serif);font-size:1.3rem;line-height:1.3}
.js .etape{opacity:0;transform:translateY(16px);transition:opacity 1.2s ease,transform 1.2s ease}
@media(min-width:900px){
  .chemin{padding-left:0}
  .chemin__fil{left:calc(50% - 1px)}
  .jour{text-align:center;margin:4rem auto 2rem;width:max-content;padding:.25rem 1.5rem;background:var(--creme)}
  .jour::before{left:50%;top:-1.5rem}
  .etapes{grid-template-columns:1fr 1fr;column-gap:5rem;row-gap:1.25rem;align-items:start}
  .etape:nth-child(odd){grid-column:1;text-align:right}
  .etape:nth-child(even){grid-column:2;margin-top:3.5rem}
  .etape:nth-child(odd)::before{left:auto;right:-2.5rem;transform:translate(50%,-50%)}
  .etape:nth-child(even)::before{left:-2.5rem}
}

/* Ustadha Rahma : chiffres et titres, sans filets */
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:var(--col);margin-top:1.5rem}
.chiffres p{margin:0;display:grid;gap:.35rem}
.chiffres strong{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,12vw,5.5rem);line-height:1;background:linear-gradient(180deg,var(--creme),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.chiffres span{font-size:.85rem;color:var(--rose-clair);max-width:14rem;margin:0 auto}
.titres-rahma{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;width:var(--large)}
.titres-rahma li{font-size:.86rem;padding:.6rem 1.15rem;border-radius:999px;background:rgba(196,147,154,.1);border:1px solid rgba(196,147,154,.35);color:var(--rose-clair)}

/* témoignages */
.temoignages{display:grid;gap:1.25rem;width:var(--large);margin-top:1.5rem;text-align:left}
blockquote{margin:0;padding:1.75rem 1.5rem;background:rgba(255,250,245,.7);border-radius:1.5rem;position:relative}
blockquote::before{content:"\201C";position:absolute;top:-.1rem;right:1.25rem;font-family:var(--serif);font-size:5rem;line-height:1;color:var(--rose);opacity:.5}
blockquote p{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.45;margin:0 0 1rem}
cite{font-style:normal;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-profond)}
@media(min-width:900px){.temoignages{grid-template-columns:1fr 1fr}}

/* offre */
.offre{width:min(34rem,100%);margin-top:1rem;padding:2.75rem 1.5rem 2.25rem;border-radius:2rem;background:linear-gradient(180deg,rgba(243,230,212,.08),rgba(243,230,212,.02));border:1px solid rgba(232,205,198,.22);display:grid;justify-items:center;gap:.9rem}
.offre>*{margin:0}
.offre__prix{font-family:var(--serif);font-weight:400;font-size:clamp(5rem,22vw,8rem);line-height:.95;background:linear-gradient(180deg,#fcf0dc 15%,var(--peche) 55%,var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.offre__prix span{font-size:.42em}
.offre__fois{font-family:var(--serif);font-size:1.4rem;color:var(--rose-clair)}
.offre__fois strong{color:var(--creme);font-weight:500}
.offre__inclus{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.6rem 0 .8rem!important}
.offre__inclus li{font-size:.82rem;padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(232,205,198,.25);color:var(--rose-clair)}
.offre__cta{margin:.75rem 0 .5rem!important}
@media(max-width:380px){.offre{padding-left:1rem;padding-right:1rem}.offre__inclus li{padding:.4rem .75rem;font-size:.78rem}}
.offre__tout{font-family:var(--serif);font-size:1.25rem;color:var(--creme)}
.petit{font-size:.82rem;opacity:.7}

/* faq */
.bloc--faq details{width:var(--col);background:var(--papier);border-radius:1.25rem;padding:1.1rem 1.4rem;text-align:left;margin-bottom:-.6rem}
.bloc--faq summary{cursor:pointer;font-family:var(--serif);font-size:1.3rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.bloc--faq summary::after{content:"+";color:var(--rose-profond);font-family:var(--sans);transition:transform .6s}
.bloc--faq details[open] summary::after{transform:rotate(45deg)}
.bloc--faq summary::-webkit-details-marker{display:none}
.bloc--faq details p{margin:.75rem 0 0;font-size:.97rem}

.pied{position:relative;background:var(--nuit);color:var(--rose-clair);padding:calc(3rem + var(--couverture)) 1.25rem 6rem;margin-top:calc(var(--couverture) * -1);border-radius:var(--couverture) var(--couverture) 0 0;text-align:center;font-size:.8rem}
.pied__marque{display:block;width:2.4rem;height:2.6rem;margin:0 auto 1rem;background:var(--rose);-webkit-mask:var(--emblem) center/contain no-repeat;mask:var(--emblem) center/contain no-repeat}

/* le lieu : un encadré */
.lieu{width:var(--large);background:var(--papier);border-radius:2rem;padding:clamp(2rem,5vw,3.5rem) clamp(1.1rem,4vw,3.5rem);display:grid;gap:1.4rem;justify-items:center}
.lieu>*{margin:0}
.lieu .titre{max-width:38rem}
.lieu__photos{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem!important}
.lieu__photos img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1.1rem}
.lieu__grande{grid-column:1 / -1}
.lieu__grande img{aspect-ratio:16/10}
.lieu__faits{list-style:none;padding:0;display:grid;gap:1.25rem;width:100%;text-align:left;margin-top:.75rem!important}
.lieu__faits h3{font-size:1.4rem;margin-bottom:.25rem}
.lieu__faits p{margin:0;font-size:.95rem}
@media(min-width:800px){
  .lieu__photos{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
  .lieu__grande{grid-column:1;grid-row:1 / span 2}
  .lieu__grande img{aspect-ratio:auto}
  .lieu__faits{grid-template-columns:repeat(3,1fr);gap:2rem}
}

/* portrait de l'Ustadha */
.portrait{margin:0 0 .5rem;width:min(13rem,60%);overflow:hidden;border-radius:999px 999px 1.25rem 1.25rem}
.portrait picture{display:block}
.portrait img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:999px 999px 1.25rem 1.25rem}

/* pour qui */
.pour-qui{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1.25rem;width:var(--large);text-align:left}
.pour-qui li{background:var(--papier);border-radius:1.5rem;padding:1.5rem 1.4rem}
.pour-qui h3{font-size:1.5rem;margin-bottom:.35rem}
.pour-qui p{margin:0;font-size:.97rem}
@media(min-width:800px){.pour-qui{grid-template-columns:repeat(3,1fr)}}

/* après la réservation, inviter */
.apres{width:100%;margin-top:.75rem!important;padding-top:1.25rem;border-top:1px solid rgba(232,205,198,.18);text-align:left}
.apres__titre{margin:0 0 .6rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.apres ol{margin:0;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.92rem;color:var(--rose-clair)}
.inviter{margin:1rem 0 0}
.faq__plus{width:var(--col);margin:1.75rem 0 0;font-size:.95rem}
.pied__liens{display:flex;justify-content:center;gap:1.5rem;margin:0 0 .75rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.pied__liens a{text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:2px}

/* barre mobile */
.barre{position:fixed;left:50%;bottom:max(.9rem,env(safe-area-inset-bottom));transform:translate(-50%,170%);z-index:19;display:flex;gap:.9rem;align-items:center;background:var(--creme);color:var(--nuit);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding:.85rem 1.6rem;border-radius:999px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transition:transform .9s ease}
.barre__prix{letter-spacing:.05em;padding-left:.9rem;border-left:1px solid rgba(36,22,24,.25)}
.barre.est-visible{transform:translate(-50%,0)}
@media(min-width:900px){.barre{display:none}}

/* apparition lente */
.js .bloc>:not(.semis):not(.filigrane),.js .hero__inner{opacity:0;transform:translateY(18px);transition:opacity var(--lent) ease,transform var(--lent) ease}
.js .vu{opacity:1!important;transform:none!important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .bloc>:not(.semis):not(.filigrane),.js .hero__inner,.js .etape{opacity:1;transform:none;transition:none}
  .js .arche{clip-path:none}
  .js .icone [pathLength]{stroke-dashoffset:0}
  .flamme,.vapeur,.rayon,.hero__defiler span,.chemin__flamme,.emblem__halo{animation:none}
  .flamme{fill:rgba(240,190,150,.4)}.point{opacity:1}.vapeur{opacity:.5}
  .emblem{animation:none;opacity:1;filter:none;transform:none}
  .emblem__fenetre{transform:none}
  .hero__fond video{transition:none}
  .hero__son .onde{animation:none!important}
  .hero__lueur,.hero__rayons{animation:none}
  .hero__inner>*{opacity:1;transform:none}
  .barre,.top{transition:none}
}

/* motifs : les feuilles marquent les passages, la tulipe du logo signe l'identité ; avec parcimonie */
.symboles{position:absolute}
.feuille{position:absolute;width:40px;height:40px;pointer-events:none;will-change:transform}
.feuille.v1,.feuille.s1{fill:#d9822b;color:#a85a1c}
.feuille.v2,.feuille.s4{fill:#c4939a;color:#a65d68}
.feuille.v3{fill:#e2a93b;color:#b07a22}
.feuille.v4,.feuille.s2{fill:#a65d68;color:#7d3f48}
.feuille.v5{fill:#b8471f;color:#8a3416}
.feuille.v6,.feuille.s3{fill:#c4939a;color:#a65d68}
/* chaque feuille a sa propre inclinaison ; le défilement ajoute un léger tournoiement par-dessus */
.feuille.v1{rotate:-28deg}.feuille.v2{rotate:35deg}.feuille.v3{rotate:-60deg}.feuille.v4{rotate:18deg}.feuille.v5{rotate:-12deg}.feuille.v6{rotate:52deg}
.feuille.s1{rotate:-22deg}.feuille.s2{rotate:40deg}.feuille.s3{rotate:-35deg}.feuille.s4{rotate:25deg}

/* passages entre « Vous vous reconnaissez ? », « Ce que vous emporterez », « Pour qui ? » : un seul fond qui coule */
#reconnaitre{background:linear-gradient(180deg,var(--creme) 0,#f8e2d2 100%);padding-bottom:clamp(3.5rem,8vw,6rem)}
#emporter{background:linear-gradient(180deg,#f8e2d2 0,var(--miel) 50%,#f8e2d2 100%)}
#pour-qui{background:linear-gradient(180deg,#f8e2d2 0,var(--creme) 100%)}
.bloc--suite{margin-top:0;border-radius:0;padding-top:clamp(3.5rem,8vw,6rem)}
.couture{position:relative;z-index:3;height:0;overflow-x:clip}
.couture .feuille{top:0}
.couture .v1{left:7%;margin-top:-50px;width:42px;height:42px}
.couture .v2{left:22%;margin-top:15px;width:50px;height:50px}
.couture .v3{left:41%;margin-top:-65px;width:36px;height:36px}
.couture .v4{left:63%;margin-top:20px;width:44px;height:44px}
.couture .v5{left:80%;margin-top:-40px}
.couture .v6{left:90%;margin-top:30px;width:34px;height:34px}
@media(max-width:700px){.couture .v3,.couture .v6{display:none}}

/* deux feuilles dans les marges du programme et des témoignages (écrans larges seulement) */
.bloc>.semis{position:absolute;inset:0;width:auto;pointer-events:none;overflow:hidden}
.semis .s1{left:6%;top:22%;width:46px;height:46px}
.semis .s2{right:7%;top:58%;width:38px;height:38px}
.semis .s3{left:8%;top:14%;width:40px;height:40px}
.semis .s4{right:6%;top:70%;width:48px;height:48px}
@media(max-width:899px){.bloc>.semis{display:none}}

/* seuil entre le programme (clair) et l'Ustadha (prune) : la tulipe est coupée par la couture ;
   au-dessus elle est prune, en dessous elle prend la crème du programme */
.seuil{position:relative;z-index:3;height:0}
.seuil svg{position:absolute;left:50%;top:calc(var(--couverture) * -1);width:4.4rem;height:6.8rem;margin:-3.4rem 0 0 -2.2rem;overflow:visible}
.seuil__haut{fill:var(--prune);clip-path:inset(0 0 50% 0)}
.seuil__bas{fill:var(--creme);clip-path:inset(50% 0 0 0)}

/* la tulipe en filigrane derrière l'offre */
.bloc--reserver{overflow:hidden}
.bloc>.filigrane{position:absolute;width:min(30rem,78vw);height:auto;aspect-ratio:683/1056;overflow:visible;top:14%;left:50%;transform:translateX(-8%) rotate(8deg);fill:var(--rose);opacity:.08;pointer-events:none}
.bloc--reserver>:not(.filigrane){position:relative}

/* édition complète */
.hero__complet{margin:0 0 1rem;font-style:normal;font-size:.95rem;color:#5a2a2e}
.hero__complet span{display:inline-block;margin-right:.5rem;padding:.2rem .8rem;border-radius:999px;background:var(--prune);color:var(--creme);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.offre--complet .offre__fois{text-align:center;max-width:26rem;line-height:1.35}
.prochains{width:100%;display:grid;gap:.9rem;justify-items:center;margin:.6rem 0}
.prochains__liste{list-style:none;padding:0;margin:0;width:100%;display:grid;gap:.75rem}
.prochain[hidden]{display:none}
.prochain a{display:grid;gap:.25rem;padding:1.1rem 1.25rem;border-radius:1.2rem;border:1px solid rgba(232,205,198,.25);color:var(--creme);text-decoration:none;text-align:left;transition:background .6s ease}
.prochain a:hover,.prochain a:focus-visible{background:rgba(243,230,212,.08)}
.prochain__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-clair)}
.prochain__nom{font-family:var(--serif);font-size:1.5rem;line-height:1.15}
.prochain__texte{font-size:.9rem;opacity:.8}
@media(min-width:900px){.seul-mobile{display:none!important}}