@import url("nsq-base.css"); /* ══════════════════════════════════════════════════════════════ SITE.CSS — surcouche NeuroXPerience® v2 Repositionnement : "Devenez plus vaste que votre histoire" ══════════════════════════════════════════════════════════════ */ /* ── petites reprises de header (site sans nsq-xenia.js) ──── */ #nsqHello{display:none} /* backdrop-filter sur
crée un containing block pour tout descendant position:fixed (dont le tiroir nav mobile), qui se retrouve alors piégé dans la petite boîte du header au lieu du viewport entier. On déplace le flou/fond sur un ::before pour que
lui-même reste un containing block neutre. */ header{background:none;border-bottom:none;backdrop-filter:none} header::before{content:"";position:absolute;inset:0;z-index:-1; backdrop-filter:blur(14px);background:rgba(8,11,20,.72);border-bottom:1px solid var(--bord)} .burger{all:unset;display:none;cursor:pointer;width:32px;height:24px;position:relative} .burger span{position:absolute;left:0;right:0;height:2px;background:var(--txt);border-radius:2px;transition:.2s} .burger span:nth-child(1){top:0}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:22px} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(1){top:11px;transform:rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(3){top:11px;transform:rotate(-45deg)} @media (max-width:980px){ .burger{display:block} nav{position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(8,11,20,.98); flex-direction:column;align-items:flex-start;padding:28px 32px;gap:6px; transform:translateX(100%);transition:transform .25s;overflow-y:auto} nav.open{transform:translateX(0);display:flex} nav a{padding:12px 0;font-size:17px;width:100%;border-bottom:1px solid var(--bord)} .navcta{margin-top:14px;text-align:center} } /* ── signature de marque (bloc identité, 3 lignes) ─────────── */ .signature3{display:flex;flex-direction:column;gap:2px} .signature3 .s1{color:var(--txt2)} .signature3 .s2{color:var(--accent)} .signature3 .s3{color:var(--txt)} /* ── kicker pill ──────────────────────────────────────────── */ .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bord); border-radius:999px;padding:7px 16px;font-family:'DM Mono',monospace;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(107,79,187,.08)} /* ── SITUATIONS — sélecteur d'entrée ──────────────────────── */ .sitcard{background:linear-gradient(180deg,rgba(13,16,34,.94),rgba(13,16,34,.78)); border:1px solid var(--bord);border-radius:18px;padding:32px;backdrop-filter:blur(18px); box-shadow:0 30px 80px -30px rgba(0,0,0,.9)} .sitcard .sithead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;gap:12px} .sitq{font-family:'DM Sans',sans-serif;font-weight:500;font-size:20px;line-height:1.5;margin-bottom:22px} .sitlist{display:flex;flex-direction:column;gap:10px} .sitlist button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;border:1px solid var(--bord); border-radius:12px;padding:16px 18px;color:var(--txt);font-size:15.5px;line-height:1.45; transition:.2s;background:rgba(107,79,187,.04);display:flex;align-items:center;gap:12px} .sitlist button .sn2{font-family:'DM Mono',monospace;font-size:11px;color:var(--gold);flex:none} .sitlist button:hover{border-color:var(--accent);background:rgba(155,127,232,.11);transform:translateX(3px)} .sitlist button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sitfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--bord)} /* ── SURIMPRESSION EXPÉRIENCE ─────────────────────────────── */ #expOverlay{position:fixed;inset:0;z-index:100;display:none; background:rgba(8,11,20,.94);backdrop-filter:blur(20px); overflow-y:auto;overscroll-behavior:contain} #expOverlay[data-open]{display:block} .exp-shell{max-width:680px;margin:0 auto;padding:90px 24px 90px;min-height:100%; display:flex;flex-direction:column;justify-content:center} .exp-close{all:unset;position:fixed;top:18px;right:20px;z-index:2;cursor:pointer; width:44px;height:44px;border-radius:50%;border:1px solid var(--bord); display:flex;align-items:center;justify-content:center;color:var(--txt2); font-size:17px;background:rgba(13,16,34,.8);transition:.2s} .exp-close:hover{color:var(--txt);border-color:var(--accent)} .exp-progress{position:fixed;top:0;left:0;right:0;z-index:1;background:rgba(8,11,20,.9); border-bottom:1px solid var(--bord);padding:14px 24px 12px} .exp-prog-in{max-width:680px;margin:0 auto} .exp-prog-track{height:2px;background:rgba(107,79,187,.22);border-radius:2px;overflow:hidden;margin-top:9px} .exp-prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--gold)); border-radius:2px;transition:width .45s cubic-bezier(.4,0,.2,1)} .exp-screen{display:none;animation:expIn .38s ease-out both} .exp-screen[data-on]{display:block} @keyframes expIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .exp-screen h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:36px; line-height:1.18;margin:14px 0 18px;text-wrap:balance} .exp-lead{color:var(--txt2);font-size:17px;line-height:1.7;margin-bottom:26px} .exp-tag{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .exp-input{all:unset;box-sizing:border-box;width:100%;border:1px solid var(--bord); border-radius:12px;padding:16px 18px;min-height:54px;font-family:'DM Sans',sans-serif; font-size:16px;color:var(--txt);background:rgba(8,11,20,.55);transition:.2s;margin-bottom:22px} .exp-input::placeholder{color:var(--txt2)} .exp-input:focus{border-color:var(--accent);background:rgba(155,127,232,.07)} .exp-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; gap:10px;cursor:pointer;background:var(--purple);color:#fff;border-radius:12px; padding:17px 30px;min-height:54px;font-family:'DM Sans',sans-serif;font-weight:500; font-size:16px;letter-spacing:.02em;transition:.22s; box-shadow:0 18px 44px -18px rgba(107,79,187,.9);text-align:center} .exp-btn:hover{background:var(--accent);transform:translateY(-2px)} .exp-btn[disabled]{opacity:.45;cursor:default;transform:none} .exp-ghost{all:unset;cursor:pointer;color:var(--txt2);font-size:14px;padding:12px 4px;display:inline-block;transition:.2s} .exp-ghost:hover{color:var(--accent)} /* respiration */ .breathe-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;margin:30px 0 34px} .breathe-dot{width:120px;height:120px;border-radius:50%; background:radial-gradient(circle,rgba(155,127,232,.55),rgba(107,79,187,.12) 70%); border:1px solid var(--bord);animation:breathe 8s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(.72)}45%{transform:scale(1)}70%{transform:scale(1)}} .breathe-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)} @media (prefers-reduced-motion:reduce){.breathe-dot{animation:none}} /* choix ternaire oui/un peu/non */ .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px} .tri button{all:unset;box-sizing:border-box;text-align:center;cursor:pointer;border:1px solid var(--bord); border-radius:12px;padding:16px 10px;color:var(--txt);font-size:14.5px;transition:.2s;background:rgba(107,79,187,.04)} .tri button:hover{border-color:var(--accent);background:rgba(155,127,232,.11)} .tri button.picked{border-color:var(--gold);background:rgba(201,168,76,.13)} .exp-check{margin-bottom:30px} .exp-check p{font-size:16px;margin-bottom:12px;color:var(--txt)} /* reveal */ .reveal-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px; font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .nextcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px} .nextcard{background:var(--card);border:1px solid var(--bord);border-radius:14px;padding:20px; display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:.22s} .nextcard:hover{border-color:rgba(155,127,232,.55);transform:translateY(-3px)} .nextcard .nc-n{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)} .nextcard h4{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;line-height:1.2;color:var(--txt)} .nextcard p{color:var(--txt2);font-size:13.5px;line-height:1.5} @media (max-width:700px){.nextcards{grid-template-columns:1fr}} /* ── carnet de passages (mémoire locale) ──────────────────── */ .carnetBtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px; color:var(--txt2);font-size:14px;transition:.2s} .carnetBtn:hover{color:var(--accent)} #carnetPanel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:110; background:var(--card);border-left:1px solid var(--bord);transform:translateX(100%); transition:transform .28s ease;overflow-y:auto;padding:28px 26px 60px;box-shadow:-30px 0 60px -30px rgba(0,0,0,.9)} #carnetPanel[data-open]{transform:translateX(0)} #carnetVeil{position:fixed;inset:0;z-index:109;background:rgba(8,11,20,.6);display:none} #carnetVeil[data-open]{display:block} .carnetHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .carnetEntry{border-top:1px solid var(--bord);padding:18px 0} .carnetEntry .ce-date{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .carnetEntry h4{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;margin:6px 0 6px} .carnetEntry p{color:var(--txt2);font-size:14px;line-height:1.55;margin-bottom:4px} .carnetEmpty{color:var(--txt2);font-size:14.5px;line-height:1.7;margin-top:18px} .carnetClear{margin-top:26px;color:var(--txt2);font-size:12.5px;background:none;border:none;cursor:pointer;text-decoration:underline;padding:0} /* ── situations sur la home (bloc pain reformulé) ─────────── */ .sitTag{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold); border:1px solid rgba(201,168,76,.4);border-radius:3px;padding:2px 6px;margin-left:10px;white-space:nowrap;vertical-align:3px} /* ── offres — grille 3 colonnes compacte pour la home ─────── */ .offersGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px} .offerMini{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:30px; display:flex;flex-direction:column;gap:14px} .offerMini.mid{border-color:rgba(155,127,232,.55)} .offerMini .om-eng{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .offerMini h3{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;line-height:1.2} .offerMini .om-price{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:var(--txt)} .offerMini .om-price small{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:400;color:var(--txt2)} .offerMini p{color:var(--txt2);font-size:14.5px;line-height:1.6;flex:1} .offerMini a.cta2{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--bord); border-radius:10px;padding:13px 18px;color:var(--txt);text-decoration:none;font-size:14.5px;transition:.2s} .offerMini a.cta2:hover{border-color:var(--accent);background:rgba(155,127,232,.1)} .offerMini.mid a.cta2{background:var(--purple);border-color:var(--purple)} .offerMini.mid a.cta2:hover{background:var(--accent)} @media (max-width:980px){.offersGrid{grid-template-columns:1fr}} /* ── bloc livre Sofia sur la home ──────────────────────────── */ .sofiaBlock{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center} .sofiaCover{aspect-ratio:3/4;border-radius:16px;border:1px dashed rgba(107,79,187,.55); background:linear-gradient(150deg,rgba(107,79,187,.35),rgba(13,16,34,.95)); display:flex;align-items:center;justify-content:center;text-align:center;padding:24px} .sofiaCover span{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);line-height:1.8} @media (max-width:980px){.sofiaBlock{grid-template-columns:1fr}} /* ── charge model diagram (texte) ─────────────────────────── */ .chainRow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0} .chainRow .cx{font-family:'DM Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--txt2);border:1px solid var(--bord);border-radius:999px;padding:8px 16px} .chainRow .cx.on{color:var(--txt);border-color:var(--accent);background:rgba(155,127,232,.1)} .chainRow .arrow{color:var(--purple)} /* misc utility */ .mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt44{margin-top:44px} .center{text-align:center} /* ══════════════════════════════════════════════════════════════ V3 — « Redécouvrez le bonheur d'être simplement vous-même » Nouvel axe marketing, cartes dépliables, expérience approfondie. Cette couche vient après tout le reste : elle prime en cascade. ══════════════════════════════════════════════════════════════ */ /* ── HERO — slogan, baseline, rappel de carnet ────────────── */ .signature3{display:flex;flex-direction:column;gap:2px} .signature3 .s1{display:block} .signature3 .s2{display:block;font-style:italic;color:var(--accent);font-size:.86em} .heroBase{font-family:'DM Sans',sans-serif;font-weight:500;font-size:20px;line-height:1.45; color:var(--txt);margin:18px 0 14px;max-width:520px} #hero .sub{margin-top:0} #hero .sub em{font-style:italic;color:var(--txt)} .heroAgain{margin-top:22px;color:var(--txt2);font-size:14px;line-height:1.6} .heroAgain:empty{display:none} /* la septième entrée — « encore autre chose » — se distingue sans crier */ .sitlist button.open{border-style:dashed;border-color:rgba(201,168,76,.45)} .sitlist button.open:hover{border-color:var(--gold);background:rgba(201,168,76,.09)} .sitlist button.open .sn2{color:var(--accent)} /* ── SECTION « DIT SIMPLEMENT » ───────────────────────────── */ #simple{padding-top:110px} .simpleHead{max-width:860px;margin-bottom:52px} .simpleHead .dl{margin:16px 0 22px} .simpleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .simpleCard{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:30px; display:flex;flex-direction:column;gap:12px;transition:.25s} .simpleCard:hover{border-color:rgba(155,127,232,.5);transform:translateY(-3px)} .simpleCard h3{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;line-height:1.22} .simpleCard p{color:var(--txt2);font-size:15.5px;line-height:1.65} .simpleAnswer{margin-top:52px;padding:38px 40px;border-radius:18px; border:1px solid var(--bord);background:linear-gradient(180deg,rgba(107,79,187,.10),transparent)} .simpleAnswer .quote{margin-top:14px} .simpleWhy{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:10px} .simpleWhy li{color:var(--txt);font-size:16.5px;padding-left:26px;position:relative} .simpleWhy li:before{content:"→";position:absolute;left:0;color:var(--gold)} @media(max-width:980px){.simpleGrid{grid-template-columns:1fr}.simpleAnswer{padding:28px 24px}} /* ── LES SIX ENDROITS — cartes qui se déplient ────────────── */ .painHead{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:44px} .painHead .dl em{font-style:italic;color:var(--accent)} .painCards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} .painCard{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:28px;transition:.25s} .painCard:hover{border-color:rgba(155,127,232,.5)} .painCard[open]{border-color:rgba(155,127,232,.6);background:linear-gradient(180deg,rgba(107,79,187,.09),var(--card))} .painCard>summary{cursor:pointer;list-style:none;display:block} .painCard>summary::-webkit-details-marker{display:none} .painCard>summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px} .pcTop{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px} .pcTop b{color:var(--accent);font-size:17px;font-weight:400;line-height:1} .painCard h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;line-height:1.22;margin-bottom:14px} .pcMore{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--accent);transition:color .2s} .pcMore:before{content:"+";font-family:'DM Sans',sans-serif;font-size:16px;line-height:1;color:var(--purple);transition:transform .2s} .painCard[open] .pcMore:before{transform:rotate(45deg)} .painCard[open] .pcMore{color:var(--txt2)} .painCard>summary:hover .pcMore{color:var(--txt)} .pcBody{margin-top:20px;padding-top:20px;border-top:1px solid rgba(107,79,187,.22); animation:pcIn .32s ease-out both} @keyframes pcIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pcBody p{color:var(--txt2);font-size:16px;line-height:1.7;margin-bottom:18px} @media(max-width:1080px){.painCards{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.painCards{grid-template-columns:1fr}.painHead{grid-template-columns:1fr;gap:24px;align-items:start}} #pain .painShot{margin-top:52px} /* ── LES QUATRE TEMPS — onglets ───────────────────────────── */ .methodTabsWrap{margin-top:44px;border:1px solid var(--bord);border-radius:18px;padding:30px;background:var(--card)} .methodTabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .methodPanel h3{font-family:'Cormorant Garamond',serif;font-size:29px;font-weight:600;line-height:1.2;margin-bottom:14px} .methodPanel p{color:var(--txt2);font-size:16.5px;max-width:62ch;margin-bottom:22px} /* ── FAQ sur l'accueil ────────────────────────────────────── */ .faqGrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .faqGrid .dl em{font-style:italic;color:var(--accent)} .faqGrid .faq{margin-top:0} @media(max-width:980px){.faqGrid{grid-template-columns:1fr;gap:32px}} /* ── orientation : la piste retenue ───────────────────────── */ .inlineCta{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center; gap:10px;border:1px solid var(--bord);border-radius:11px;padding:14px 22px;color:var(--txt); font-family:'DM Sans',sans-serif;font-size:15px;transition:.2s;background:rgba(107,79,187,.06)} .inlineCta:hover{border-color:var(--accent);background:rgba(155,127,232,.12);transform:translateY(-1px)} .inlineCta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .recoInline{margin:26px 0 8px;padding:22px 26px;border-radius:14px; border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.06)} .recoInline[hidden]{display:none} .recoInline b{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;margin:8px 0 6px} .recoInline p{color:var(--txt2);font-size:15.5px;line-height:1.65} .offerMini[data-hint]{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,168,76,.25)} /* ══════════════════════════════════════════════════════════════ L'EXPÉRIENCE — surimpression à deux colonnes ══════════════════════════════════════════════════════════════ */ #expOverlay{padding:0} .expTop{position:fixed;top:0;left:0;right:0;z-index:2;background:rgba(8,11,20,.94); backdrop-filter:blur(14px);border-bottom:1px solid var(--bord);padding:14px 24px 12px} .expTopIn{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap} .expTrail{display:flex;gap:20px;flex:1;flex-wrap:wrap} .expTrail span{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace; font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt2)} .expTrail span i{width:20px;height:20px;border-radius:50%;border:1px solid var(--bord); display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:10px} .expTrail span.on{color:var(--txt)} .expTrail span.on i{border-color:var(--accent);background:rgba(155,127,232,.16);color:var(--accent)} .expTrail span.ok i{border-color:rgba(201,168,76,.5);color:var(--gold)} .expProgTrack{flex-basis:100%;height:2px;background:rgba(107,79,187,.22);border-radius:2px;overflow:hidden} .expProgFill{height:100%;background:linear-gradient(90deg,var(--purple),var(--gold)); border-radius:2px;transition:width .45s cubic-bezier(.4,0,.2,1)} @media(max-width:900px){.expTrail{display:none}} .exp-shell{max-width:1080px;margin:0 auto;padding:112px 24px 90px;min-height:100%; display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start;justify-content:initial} .expAside{position:sticky;top:130px;border-left:1px solid var(--bord);padding-left:22px} .expThread{color:var(--txt);font-size:15.5px;line-height:1.55;margin-top:8px} .expThread.small{font-size:14.5px;color:var(--txt2)} .expAsideNote{margin-top:26px;color:var(--txt2);font-size:13px;line-height:1.65} .expAside .exp-ghost{margin-top:12px;padding-left:0} .expMain{min-width:0} .expMain:focus{outline:none} @media(max-width:900px){ .exp-shell{grid-template-columns:1fr;gap:0;padding:92px 20px 80px} .expAside{position:static;order:2;margin-top:44px;border-left:none;border-top:1px solid var(--bord); padding-left:0;padding-top:24px} .expMain{order:1} } .exp-tag{margin-bottom:6px} .exp-screen h2,.expMain h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:40px; line-height:1.15;margin:12px 0 18px;text-wrap:balance} .expMain h2 em{font-style:italic;color:var(--accent)} @media(max-width:760px){.expMain h2{font-size:31px}} .expField{margin-bottom:24px} .expField label{display:block;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--txt2);margin-bottom:9px} .exp-area{all:unset;box-sizing:border-box;width:100%;border:1px solid var(--bord);border-radius:12px; padding:15px 18px;min-height:110px;font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6; color:var(--txt);background:rgba(8,11,20,.55);transition:.2s} .exp-area.small{min-height:74px;font-size:15px;margin-top:6px} .exp-area::placeholder{color:var(--txt2)} .exp-area:focus{border-color:var(--accent);background:rgba(155,127,232,.07)} .exp-input{margin-bottom:0} .expChoices{display:flex;flex-direction:column;gap:11px;margin-bottom:26px} .expChoice{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%; border:1px solid var(--bord);border-radius:13px;padding:17px 20px;background:rgba(107,79,187,.04); color:var(--txt);transition:.2s} .expChoice:hover{border-color:var(--accent);background:rgba(155,127,232,.11);transform:translateX(3px)} .expChoice:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .expChoice.on{border-color:var(--gold);background:rgba(201,168,76,.11)} .expChoice.open{border-style:dashed;border-color:rgba(201,168,76,.45)} .expChoice b{display:block;font-weight:500;font-size:16px;line-height:1.45;margin-top:5px} .expChoice small{display:block;color:var(--txt2);font-size:13.5px;line-height:1.55;margin-top:6px} .expChoice .lab{display:block} .expChips{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px} .expChips.big{margin:0 0 24px} .expChip{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--bord);border-radius:999px; padding:9px 16px;color:var(--txt2);font-size:13.5px;transition:.2s;background:rgba(107,79,187,.04)} .expChip:hover{border-color:var(--accent);color:var(--txt);background:rgba(155,127,232,.1)} .expChip:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .expChip.on{border-color:var(--gold);color:var(--txt);background:rgba(201,168,76,.12)} .expMini{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .expMini button{all:unset;box-sizing:border-box;cursor:pointer;border-bottom:1px solid var(--bord); padding:7px 12px;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--txt2);transition:.2s} .expMini button:hover{color:var(--txt)} .expMini button.on{color:var(--accent);border-bottom-color:var(--accent)} .expMini button.ok{color:var(--gold);border-bottom-color:rgba(201,168,76,.5)} .expMini button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .expNote{padding:16px 20px;border-left:2px solid var(--purple);background:rgba(107,79,187,.08); color:var(--txt2);font-size:15px;line-height:1.65;border-radius:0 8px 8px 0} .expNote b{color:var(--txt);font-weight:500} .expFrag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:28px;line-height:1.35; color:var(--txt);padding:26px 30px;margin:8px 0 24px;border-radius:14px; border:1px solid rgba(201,168,76,.32);background:rgba(201,168,76,.05);text-wrap:balance} .expFoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px; padding-top:26px;border-top:1px solid var(--bord)} .expFoot .exp-btn{margin-left:auto} .exp-btn.ghost{background:none;border:1px solid var(--bord);color:var(--txt);box-shadow:none} .exp-btn.ghost:hover{border-color:var(--accent);background:rgba(155,127,232,.1)} .exp-link{all:unset;cursor:pointer;color:var(--accent);font-size:14.5px; border-bottom:1px solid rgba(155,127,232,.4);padding-bottom:2px;transition:.2s} .exp-link:hover{color:var(--txt);border-bottom-color:var(--txt)} .exp-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* la jauge d'intensité */ .gaugeBox{margin:8px 0 22px} .gaugeLab{display:flex;justify-content:space-between;align-items:baseline;gap:16px; font-size:15.5px;color:var(--txt);margin-bottom:14px} .gaugeLab output{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;color:var(--gold);line-height:1} .gauge{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background: linear-gradient(90deg,var(--purple) var(--pct,50%),rgba(107,79,187,.18) var(--pct,50%));outline:none} .gauge::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%; background:var(--gold);border:3px solid var(--bg);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)} .gauge::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold); border:3px solid var(--bg);cursor:pointer} .gauge:focus-visible{outline:2px solid var(--accent);outline-offset:6px} .gaugeEnds{display:flex;justify-content:space-between;margin-top:10px; font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt2)} /* la pause guidée */ .beat{display:flex;align-items:center;gap:28px;margin:26px 0 8px;flex-wrap:wrap} .beat .breathe-dot{width:110px;height:110px;flex:0 0 110px;animation:none;display:flex; align-items:center;justify-content:center;transition:transform 4s ease-in-out} .beat .breathe-dot span{font-family:'DM Mono',monospace;font-size:15px;color:var(--txt)} .beat[data-phase="in"] .breathe-dot{transform:scale(1)} .beat[data-phase="out"] .breathe-dot{transform:scale(.74)} .beat b{display:block;font-size:17px;font-weight:500;margin-bottom:8px} .beat p{color:var(--txt2);font-size:15px;line-height:1.65;max-width:44ch} .beat .exp-ghost{margin-top:10px;padding-left:0} @media(prefers-reduced-motion:reduce){.beat .breathe-dot{transition:none}} /* le bilan */ .sideBy{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bord); border:1px solid var(--bord);border-radius:14px;overflow:hidden;margin:24px 0} .sideBy>div{background:var(--card);padding:22px 24px} .sideBy b{display:block;margin-top:8px;font-family:'Cormorant Garamond',serif;font-size:42px; font-weight:600;line-height:1;color:var(--txt2)} .sideBy .now b{color:var(--gold)} .sideBy b i{font-style:normal;font-size:17px;color:var(--txt2)} .lineOut{padding:18px 0;border-top:1px solid rgba(107,79,187,.22)} .lineOut p{color:var(--txt);font-size:16.5px;line-height:1.6;margin-top:7px} /* ══════════════════════════════════════════════════════════════ LE TIROIR — carnet, maintenant, orientation ══════════════════════════════════════════════════════════════ */ #carnetPanel{width:min(480px,94vw);padding:0} .drHead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px; padding:26px 26px 20px;border-bottom:1px solid var(--bord);position:sticky;top:0; background:var(--card);z-index:2} .drHead h2{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;line-height:1.15;margin-top:8px} .drBody{padding:26px} .drBody .exp-lead{margin-bottom:18px} .drFoot{padding:18px 26px 30px;border-top:1px solid var(--bord)} .welcomeCtx{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;line-height:1.4; color:var(--txt);padding:18px 22px;border-radius:12px;border:1px solid rgba(201,168,76,.3); background:rgba(201,168,76,.06);margin-bottom:18px} .orientQ{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;line-height:1.22;margin:12px 0 8px} .recoBox{padding:24px;border-radius:14px;border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.06)} .recoBox b{display:block;font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;margin-bottom:10px} .recoBox p{color:var(--txt2);font-size:15.5px;line-height:1.65} .carnetEmptyBox{text-align:center;padding:30px 0} .carnetEmptyBox h3{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;line-height:1.25} .carnetEmptyBox h3 em{font-style:italic;color:var(--accent)} .carnetEntry h4{margin-bottom:8px} .carnetEntry label{display:block;margin-top:14px} .carnetMap{border:1px solid var(--bord);border-radius:14px;padding:20px;margin-bottom:24px;background:rgba(107,79,187,.05)} .cmHead{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px} .cmRow{display:flex;gap:10px;flex-wrap:wrap} .cmCol{display:flex;flex-direction:column;align-items:center;gap:6px} .cmCol i{width:30px;height:30px;border-radius:50%;border:1px solid var(--bord);display:flex; align-items:center;justify-content:center;font-style:normal;color:var(--gold);font-size:13px; background:rgba(201,168,76,.07)} .cmCol small{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--txt2)} .cmLegend{margin-top:16px;line-height:1.6} /* ── message furtif ───────────────────────────────────────── */ #nsqToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200; background:var(--card);border:1px solid var(--bord);border-radius:12px;padding:14px 22px; color:var(--txt);font-size:14.5px;box-shadow:0 24px 60px -24px rgba(0,0,0,.9); opacity:0;pointer-events:none;transition:.28s;max-width:min(440px,92vw);text-align:center} #nsqToast[data-on]{opacity:1;transform:translate(-50%,0)} /* ── bouton flottant « maintenant » ───────────────────────── */ .nowFab{all:unset;box-sizing:border-box;position:fixed;right:22px;bottom:22px;z-index:90;cursor:pointer; display:flex;align-items:center;gap:13px;padding:12px 20px 12px 14px;border-radius:999px; border:1px solid var(--bord);background:rgba(13,16,34,.94);backdrop-filter:blur(14px); box-shadow:0 24px 60px -24px rgba(0,0,0,.9);transition:.22s} .nowFab:hover{border-color:var(--accent);transform:translateY(-2px)} .nowFab:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .nfDot{width:26px;height:26px;border-radius:50%;flex:0 0 26px; background:radial-gradient(circle,rgba(155,127,232,.85),rgba(107,79,187,.15) 70%); animation:nfPulse 4.5s ease-in-out infinite} @keyframes nfPulse{0%,100%{transform:scale(.82);opacity:.75}50%{transform:scale(1);opacity:1}} .nfTxt{display:flex;flex-direction:column;font-family:'DM Mono',monospace;font-size:9.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);line-height:1.4} .nfTxt b{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:0; text-transform:none;color:var(--txt)} @media(max-width:620px){ .nowFab{right:14px;bottom:14px;padding:11px 16px 11px 12px} .nfTxt{font-size:9px}.nfTxt b{font-size:13px} } @media(prefers-reduced-motion:reduce){.nfDot{animation:none}} /* ── apparition douce ───────────────────────────────────────── Le masquage n'est appliqué que si le script tourne : sans lui, [data-anim] n'existe pas et tout le contenu reste visible. */ html[data-anim] .rise{opacity:0;transform:translateY(16px); transition:opacity .6s ease-out,transform .6s ease-out} html[data-anim] .rise[data-in]{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html[data-anim] .rise{opacity:1;transform:none}} /* ── .navcta devient un bouton : neutraliser le style natif ─── */ button.navcta{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.4;cursor:pointer; letter-spacing:.01em;text-align:center} button.navcta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ══════════════════════════════════════════════════════════════ Correctif de surimpression. #expOverlay porte un backdrop-filter : il devient donc le bloc conteneur de tout descendant en position:fixed, qui se cale sur la HAUTEUR TOTALE du contenu défilé, pas sur la fenêtre. Le bandeau de progression et la croix se retrouvaient au milieu de l'écran. On passe la surimpression en colonne flex : un bandeau qui ne défile pas, un corps qui défile seul. ══════════════════════════════════════════════════════════════ */ #expOverlay{overflow:hidden} #expOverlay[data-open]{display:flex;flex-direction:column} .expTop{position:relative;flex:0 0 auto;backdrop-filter:none;background:rgba(8,11,20,.96)} .exp-close{position:absolute;top:auto} #expOverlay .exp-close{top:16px;right:20px} .exp-shell{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; width:100%;padding:44px 24px 90px} .expAside{top:0} @media(max-width:900px){.exp-shell{padding:34px 20px 80px}} .drHead .lab{max-width:30ch} /* .cta et .exp-btn servent aussi bien à qu'à