/* Accueil du Mix : les parties se séparent par la lumière et la composition,
   jamais par un fond de section. Aucune section ne porte de background. */
.section{padding-block:88px}
.titre-section{font-size:clamp(36px,4vw,58px);max-width:920px;margin-inline:auto}
.centre{text-align:center}
.chapeau-section{font-size:17px;line-height:1.7;margin:18px auto 0;max-width:600px}

/* ---------- Héros ---------- */
.hero{position:relative;overflow-x:clip}
.hero-inner{width:min(var(--large),calc(100% - 2 * var(--gouttiere)));margin:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:32px;padding-block:44px 60px;min-height:740px}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{font-size:14px;color:var(--lilas);margin-bottom:24px;letter-spacing:.01em}
.hero h1{font-size:clamp(60px,5.55vw,80px);line-height:1.03;letter-spacing:-.04em}
.hero-line{display:block;padding-block:.055em;margin-block:-.055em;overflow:clip}
.hero-line>span,.hero-line>em{display:block;transform-origin:left bottom}
.hero-line-last{overflow:visible;margin-top:.2em}
.hero h1 em{font-size:.72em;line-height:1.12;letter-spacing:-.025em;white-space:normal}
.signature-arc{height:18px;width:min(470px,95%);margin-top:8px;margin-bottom:-22px;overflow:visible;pointer-events:none}
.signature-arc path{fill:none;stroke:var(--lilas);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;opacity:.55}
.hero-description{max-width:430px;font-size:17px;line-height:1.75;margin:34px 0 28px;color:#d3cbe3}
.hero-actions{display:flex;align-items:center;gap:24px;margin-bottom:16px}
.micro{font-size:13px;line-height:1.6;color:var(--texte-2)}
.hero-product{position:relative;min-width:0;align-self:center}
/* Les halos sont accrochés au téléphone et retombent à 0 bien avant leur bord. */
.hero-haze{position:absolute;pointer-events:none;z-index:-1;left:50%;top:44%;width:760px;height:820px;transform:translate(-50%,-50%) rotate(-18deg);opacity:0;transition:opacity .65s var(--motion-out)}
.hero-haze-lilac{opacity:1;background:radial-gradient(closest-side at 56% 42%,#c8b4f02e 0,#c8b4f012 55%,transparent 100%)}
.hero-haze-rose{background:radial-gradient(closest-side,#d87da82e,#d87da810 55%,transparent 100%)}
.hero-haze-sage{background:radial-gradient(closest-side,#7fd8b824,#7fd8b80d 55%,transparent 100%)}
.hero[data-screen=noter] .hero-haze-lilac,.hero[data-screen=savoir] .hero-haze-lilac,.hero[data-screen=adoration] .hero-haze-lilac{opacity:.25}
.hero[data-screen=noter] .hero-haze-rose{opacity:1}
.hero[data-screen=savoir] .hero-haze-sage,.hero[data-screen=adoration] .hero-haze-sage{opacity:1}
.hero[data-screen=adoration] .hero-haze-sage{background:radial-gradient(closest-side,#9cc8d82a,#9cc8d80f 55%,transparent 100%)}
.hero[data-screen=tahara] .hero-haze-lilac{background:radial-gradient(closest-side,#e8c07d24,#e8c07d0d 55%,transparent 100%)}
.hero[data-screen=dhikr] .hero-haze-lilac{background:radial-gradient(closest-side,#cf83b62a,#cf83b60f 55%,transparent 100%)}

/* ---------- Des repères. Chaque jour. ---------- */
.daily{display:grid;grid-template-columns:1.02fr 1fr;gap:72px;align-items:center;padding-block:96px}
.daily-story{position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:44px 38px 26px;border:1px solid var(--bord);border-radius:32px;background:var(--verre)}
.daily .section-intro{position:relative;z-index:1}
.daily .section-intro h2{font-size:clamp(36px,4vw,58px)}
.daily .section-intro p{font-size:16px;margin:18px 0 22px}
.daily-gallery{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;height:366px;margin:26px -6px 0;perspective:1100px;perspective-origin:50% 35%}
.daily-night{position:absolute;inset:-9% -13% -10%;z-index:-2;pointer-events:none;transform-origin:50% 64%;border-radius:50%;background:radial-gradient(circle at 14% 37%,#c8b4f0a6 0 .7px,transparent 1.4px),radial-gradient(circle at 88% 66%,#d87da880 0 .8px,transparent 1.5px),radial-gradient(ellipse at 73% 20%,#8c5c9d33 0,transparent 58%),radial-gradient(ellipse at 20% 80%,#6673a82e 0,transparent 56%)}
.daily-orbit{position:absolute;inset:17% -2% 12%;border:1px solid #c8b4f059;border-left-color:transparent;border-bottom-color:#a8b4e026;border-radius:50%;z-index:-1;pointer-events:none}
/* Les trois mini-iPhone : le même métal que le téléphone du héros. */
.daily-screen{position:relative;width:calc((100% - 20px)/3);max-width:152px;aspect-ratio:720/1561;padding:4px;border:1px solid #fff;border-radius:23px;background:linear-gradient(130deg,#fff,#b4abba 55%,#f1eef4);box-shadow:0 2px 0 #96869f,0 15px 24px #08061345;transform-origin:center 70%;flex:none}
.daily-screen::after{content:'';position:absolute;top:9px;left:50%;width:26%;height:7px;transform:translateX(-50%);border-radius:7px;background:#0d0b13;pointer-events:none}
.daily-screen-savoir{z-index:2}
.daily-screen img{width:100%;height:100%;display:block;object-fit:contain;border-radius:18px;background:#12102b;transform:translateZ(1px);backface-visibility:hidden}
.daily-list{position:relative;isolation:isolate;min-width:0}
.daily-list article{position:relative;display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--filet)}
.daily-list article:first-of-type{padding-top:0}
.daily-list article:last-of-type{border-bottom:0;padding-bottom:0}
.daily-list h3{font-size:21px;line-height:1.3;letter-spacing:-.01em}
.daily-list p{font-size:15px;line-height:1.65;margin-top:6px;max-width:440px}
.daily-thread{position:absolute;left:12px;top:14px;bottom:24px;width:1px;background:linear-gradient(#d87da8aa,#e8c07daa,#7fd8b8aa,#9cc8d8aa,#cf83b6aa);transform-origin:top;z-index:-1;pointer-events:none}
.phase{width:24px;height:24px;flex:none;margin-top:3px;border-radius:50%;background:var(--nuit-0)}
.phase>circle{fill:currentColor}
.phase .phase-bord{fill:none;stroke:currentColor;stroke-opacity:.45;stroke-width:1}
.daily-list article:nth-of-type(1) .phase{color:var(--rose)}
.daily-list article:nth-of-type(2) .phase{color:var(--or)}
.daily-list article:nth-of-type(3) .phase{color:var(--menthe)}
.daily-list article:nth-of-type(4) .phase{color:var(--bleu)}
.daily-list article:nth-of-type(5) .phase{color:var(--mauve)}

/* ---------- Intimité : une respiration typographique ---------- */
.intimite{padding-block:120px;text-align:center}
.intimite h2{font-size:clamp(40px,5vw,72px);font-style:normal}
.intimite p{max-width:560px;margin:22px auto 0;font-size:17px;line-height:1.7;color:#d9d3ea}
.intimite p+p{margin-top:10px}
.intimite .button{margin-top:34px}

/* ---------- Comparatif ---------- */
#comparaison{padding-bottom:80px}
#comparaison .centre{margin-bottom:44px}
.aide-comparatif{display:none;font-size:14px;margin-bottom:12px}
.tableau-enveloppe{border:1px solid var(--bord);border-radius:20px;overflow:auto;background:rgba(200,180,240,.05);scrollbar-width:thin;scrollbar-color:rgba(200,180,240,.4) transparent;overscroll-behavior-x:contain}
.tableau{width:100%;border-collapse:separate;border-spacing:0;text-align:center;font-size:15px;line-height:1.5;min-width:650px}
.tableau th,.tableau td{padding:20px;border-bottom:1px solid var(--filet);font-weight:400;vertical-align:middle;color:var(--texte-2)}
.tableau thead th{font-size:13px;font-weight:600;color:var(--texte);letter-spacing:.01em}
.tableau thead th:first-child{color:var(--texte-2)}
.tableau th:first-child{text-align:left;width:28%}
.tableau tbody th{color:var(--texte);font-size:15px}
.tableau tr:last-child>*{border-bottom:0}
.tableau .nous{background-color:rgba(200,180,240,.12);color:var(--texte);font-weight:500;width:19%}
.tableau thead .nous{background-image:var(--degrade);background-size:100% 2px;background-repeat:no-repeat;background-position:top}
.tableau .oui{color:var(--menthe)}
.note-tableau{margin-top:16px;font-size:14px}
.sources-comparatif{font-size:13px;color:var(--texte-2);margin-top:8px;line-height:1.8;max-width:820px}
.sources-comparatif summary{cursor:pointer;width:fit-content;min-height:36px;padding:8px 0}
.sources-comparatif p{margin:10px 0}
.sources-comparatif ul{padding-left:20px}
.sources-comparatif li{padding:3px 0}

/* ---------- Retours des testeuses : une rangée à faire glisser ---------- */
#testeuses{padding-block:90px 100px}
#testeuses .centre{margin-bottom:40px}
.avis-defile{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-inline:max(var(--gouttiere),calc((100% - var(--large)) / 2));scroll-padding-inline:max(var(--gouttiere),calc((100% - var(--large)) / 2));padding-block:4px 60px;margin-bottom:-40px;scrollbar-width:thin;scrollbar-color:rgba(200,180,240,.35) transparent;cursor:grab;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.avis-defile[data-glisse]{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.avis-defile[data-fin]{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px);mask-image:linear-gradient(to right,transparent,#000 48px)}
.avis-defile.en-main{cursor:grabbing;scroll-snap-type:none;user-select:none}
.avis-defile:focus-visible{outline-offset:-3px}
.avis-defile::-webkit-scrollbar{height:6px}
.avis-defile::-webkit-scrollbar-thumb{background:rgba(200,180,240,.3);border-radius:3px}
.voix{flex:0 0 480px;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-start;padding:34px 36px 28px;background:rgba(200,180,240,.07);border:1px solid var(--bord);border-radius:28px 28px 28px 4px}
.voix::before{content:'\201C';font:70px/.65 var(--serif);color:var(--lilas);opacity:.7;display:block;height:36px}
.voix blockquote{font-family:var(--serif);font-size:26px;line-height:1.3;letter-spacing:-.012em;color:var(--texte);margin:0 0 22px}
.voix figcaption{margin-top:auto;font-size:12px;color:var(--texte-2)}

/* ---------- Questions ---------- */
#questions .centre{margin-bottom:36px}
.questions{max-width:760px;margin-inline:auto}
.questions details{border-bottom:1px solid var(--filet)}
.questions details:first-child{border-top:1px solid var(--filet)}
.questions summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 2px;font:500 21px/1.35 var(--serif);color:var(--texte);letter-spacing:-.01em}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:'+';flex:none;font:300 28px/1 var(--sans);color:var(--lilas);transition:transform .25s var(--motion-out)}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions details p{font-size:16px;line-height:1.75;margin:0 40px 22px 2px;max-width:640px}

/* ---------- Ouvrir l'app ---------- */
#ouvrir{padding-block:40px 60px}
.portes-panneau{position:relative;overflow:hidden;border:1px solid var(--bord);border-radius:32px;padding:250px 56px 52px;background:linear-gradient(to bottom,rgba(11,10,26,.3),rgba(11,10,26,.42) 38%,rgba(11,10,26,.78)),url('img/ciel-horizon.webp') 22% top/cover no-repeat,var(--nuit-1)}
.portes-panneau .chapeau-section{color:#d9d3ea}
.portes{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;max-width:980px;margin:34px auto 0}
.porte{display:flex;align-items:center;gap:14px;min-height:84px;padding:16px 20px;border-radius:16px;text-decoration:none;color:var(--texte);background:rgba(14,12,32,.6);border:1px dashed rgba(200,180,240,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.porte>svg{width:24px;height:24px;flex:none}
.porte>span:not(.attente){display:grid;gap:2px;text-align:left}
.porte .l1{font-size:15px;font-weight:500}
.porte .l2{font-size:13px;color:var(--texte-2)}
.porte .attente{margin-left:auto;font:italic 400 18px/1 var(--serif);color:var(--or)}
.porte.bientot{cursor:default}
.porte.bientot>svg{color:var(--texte-2)}
.porte:first-child{color:var(--nuit-0);background:var(--degrade) #c8b4f0;border:1px solid #c8b4f0;box-shadow:inset 0 1px 0 #ffffff70;transition:transform .2s var(--ease),box-shadow .2s}
.porte:first-child .l2{color:#332942}
@media (hover:hover) and (pointer:fine){.porte:first-child:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff99,0 7px 28px #c8b4f030}}
.porte:first-child:active{transform:scale(.985)}

/* ---------- Inscription ---------- */
#prevenue{display:grid;grid-template-columns:1fr 460px;gap:80px;align-items:center;padding-block:80px 70px}
#prevenue .centre{text-align:left}
#prevenue h2{font-size:clamp(32px,3vw,42px);max-width:500px;margin:0}
#prevenue .chapeau-section{margin:16px 0 0;max-width:440px}
.formulaire .champ{display:flex;flex-direction:column;gap:8px}
.formulaire label{font-size:14px;color:var(--texte)}
.formulaire input{background:rgba(11,10,26,.55);color:var(--texte);border:1px solid rgba(200,180,240,.38);border-radius:14px;min-height:52px;padding:13px 16px;font-size:16px;width:100%}
.formulaire input::placeholder{color:#8f88ad;opacity:1}
.formulaire input:focus-visible{outline:3px solid var(--lilas);outline-offset:2px}
.formulaire .bouton{width:100%;margin-top:12px;color:var(--nuit-0);background:var(--lilas);border-color:var(--lilas)}
.formulaire .bouton:hover{background:#d6c6f5}
.formulaire .bouton:disabled{cursor:wait;opacity:.7}
.mention{font-size:13px;line-height:1.7;margin-top:12px}
.reponse{font-size:15px;line-height:1.7;margin-top:14px;color:var(--texte);padding:14px 16px;background:rgba(200,180,240,.1);border:1px solid var(--bord);border-radius:12px}
.pot-de-miel{position:absolute!important;left:-10000px!important;opacity:0;width:1px;height:1px;overflow:hidden}

/* ---------- Tablette ---------- */
@media (max-width:1100px){
  .hero-inner{gap:12px;min-height:700px}
  .hero h1{font-size:clamp(56px,6.1vw,68px)}
  .daily{gap:48px}
  .daily-gallery{height:310px}
  .daily-screen{border-radius:19px}.daily-screen img{border-radius:14px}
  .portes-panneau{padding-inline:36px}
  #prevenue{grid-template-columns:1fr 400px;gap:48px}
}
/* ---------- Sous 880 px : une pile, aucun état caché à l'entrée ---------- */
@media (max-width:880px){
  .section{padding-block:72px}
  .hero-inner{display:flex;flex-direction:column;min-height:0;padding-block:40px 24px;gap:8px}
  .hero-copy{text-align:center;width:100%}
  .hero h1{font-size:clamp(54px,9.6vw,74px);max-width:620px;margin-inline:auto}
  .signature-arc{margin-inline:auto;width:80%}
  .hero-description{margin:28px auto 22px;max-width:380px;font-size:16px}
  .hero-actions{justify-content:center}
  .hero-product{width:100%;max-width:480px}
  .hero-haze{width:520px;height:620px}
  .daily{grid-template-columns:1fr;gap:28px;padding-block:56px}
  .daily-list{max-width:560px}
  .intimite{padding-block:96px}
  .portes{grid-template-columns:1fr 1fr}
  .porte:first-child{grid-column:1/-1;justify-content:center}
  #prevenue{grid-template-columns:1fr;gap:28px;padding-block:56px 48px}
}
@media (max-width:760px){
  .aide-comparatif{display:block}
  .tableau th:first-child{position:sticky;left:0;z-index:2;background:#16132e;width:150px;min-width:150px;max-width:150px}
  .tableau thead .nous{background-color:rgba(200,180,240,.12)}
}
@media (max-width:650px){
  .section{padding-block:60px}
  .titre-section{font-size:clamp(34px,9.4vw,44px)}
  .chapeau-section{font-size:15px}
  .hero-inner{padding-top:32px}
  .hero .eyebrow{margin-bottom:18px}
  .hero h1{font-size:clamp(48px,12.3vw,62px);line-height:1.03}
  .hero-description{font-size:15px;line-height:1.7;margin-top:26px}
  .micro{font-size:12px}
  .hero-haze{width:420px;height:560px}
  .daily{gap:18px;padding-block:36px}
  .daily-story{padding:24px 20px 12px;border-radius:24px}
  .daily .section-intro h2{font-size:clamp(34px,9.4vw,44px)}
  .daily .section-intro p{font-size:15px;margin:12px 0 14px}
  .daily-gallery{height:172px;width:min(270px,100%);margin:6px auto 0;gap:10px}
  .daily-orbit{inset:19% 5% 14%}
  .daily-screen{width:calc((100% - 20px)/3);max-width:92px;padding:3px;border-radius:14px}
  .daily-screen::after{top:5px;height:4px}
  .daily-screen img{border-radius:11px}
  .daily-list article{gap:16px;padding:12px 0}
  .daily-list h3{font-size:18px;line-height:1.25}
  .daily-list p{font-size:14px;line-height:1.55;margin-top:3px}
  .daily-thread{left:11px}
  .phase{width:22px;height:22px}
  .intimite{padding-block:72px}
  .intimite h2{font-size:clamp(34px,9.6vw,44px)}
  .intimite p{font-size:16px}
  .tableau th,.tableau td{padding:16px 14px;font-size:14px}
  .tableau tbody th{font-size:14px}
  #testeuses{padding-block:60px 70px}
  #testeuses .centre{margin-bottom:28px}
  .avis-defile{gap:14px}
  .avis-defile{padding-block:4px 14px;margin-bottom:0;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .avis-defile[data-glisse]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .avis-defile[data-fin]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px);mask-image:linear-gradient(to right,transparent,#000 28px)}
  .voix{flex-basis:80vw;padding:26px 22px 22px}
  .voix blockquote{font-size:21px}
  .questions summary{font-size:19px;padding:17px 2px}
  .questions details p{font-size:15px;margin-right:16px}
  #ouvrir{padding-block:24px 40px}
  .portes-panneau{padding:210px 18px 24px;border-radius:24px;background:linear-gradient(to bottom,rgba(11,10,26,.28),rgba(11,10,26,.5) 34%,rgba(11,10,26,.82)),url('img/ciel-horizon-1200.webp') 24% -70px/auto 100% no-repeat,#0d0c1c}
  .portes{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .porte{min-height:72px;padding:14px 16px}
  .porte:first-child{justify-content:flex-start}
  #prevenue{padding-block:48px 40px}
  #prevenue h2{font-size:clamp(28px,8vw,34px)}
}
@media (max-width:380px){
  .hero h1{font-size:48px}
  .daily-list h3{font-size:17px}
}
@media print{
  .hero-haze,.daily-night,.daily-orbit,.signature-arc{display:none}
  .voix,.tableau-enveloppe,.daily-story,.portes-panneau{background:#fff!important;border-color:#bbb}
  .avis-defile{display:block;-webkit-mask-image:none;mask-image:none;overflow:visible}
  .voix{margin-bottom:12px}
  .questions details>p{display:block}
}

/* 27/09, « trop de texte partout » : sous le telephone, seul le titre de l'ecran reste. */
.lc-phone-caption .lc-phone-caption-text{display:none}