/* EUNOPSIS — site eunopsis.fr. Couleurs et police strictement issues du kit (identite/_sources/eu.css). */
@font-face{font-family:"Montserrat";src:url("fonts/montserrat.woff") format("woff");font-weight:100 900;font-display:swap}
:root{
  --nuit:#0B2D44; --teal:#00B3A4; --lagon:#46D1C7; --glace:#E6F4F7;
  --ardoise:#4F6475; --abysse:#061A28; --blanc:#FFFFFF; --filet:#D3E4EA;
  --clair:#B8CDD6;
  --f:"Montserrat","Segoe UI",Arial,sans-serif;
  --w:1180px; --g:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--f);color:var(--nuit);background:var(--blanc);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--g)}
.sur{display:block;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.dark .sur{color:var(--lagon)}
.t2{font-size:clamp(28px,3.6vw,44px);line-height:1.15}
.t3{font-size:19px;line-height:1.3}
.txt{color:var(--ardoise)}
.dark .txt{color:var(--clair)}
.filet{width:56px;border-top:2px solid var(--lagon);margin:22px 0}
.dark{background:var(--nuit);color:var(--blanc)}
.abysse{background:var(--abysse);color:var(--blanc)}
.glace{background:var(--glace)}
section{position:relative}
.pad{padding:clamp(72px,10vw,130px) 0}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--f);padding:15px 26px;border-radius:40px;text-decoration:none;border:1.5px solid var(--teal);transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--teal);color:var(--blanc)}
.btn-p:hover{background:#00a093}
.btn-s{color:var(--nuit);border-color:var(--nuit)}
.dark .btn-s{color:var(--blanc);border-color:rgba(255,255,255,.55)}
.btn-s:hover{background:rgba(70,209,199,.12)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* navigation — sur fond clair dès l'accueil */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav .logo img{height:44px;width:auto}
.nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--filet)}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:14px;font-weight:500;text-decoration:none;color:var(--nuit);white-space:nowrap}
.nav ul a:hover{color:var(--teal)}
.nav .cta{font-size:14px;padding:12px 22px;white-space:nowrap}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--nuit);margin:5px 0;transition:.2s}
@media (max-width:1160px){
  .nav ul{position:fixed;inset:84px 0 auto;flex-direction:column;gap:0;background:var(--blanc);padding:8px var(--g) 20px;box-shadow:0 12px 30px rgba(6,26,40,.15);display:none}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--filet)}
  .nav.open ul{display:flex}
  .nav .cta{display:none}
  .burger{display:block}
}

/* HERO 3D — section épinglée, la scène avance avec le défilement. Fond « salle blanche ». */
.hero{height:340vh;background:#F3F8FA;color:var(--nuit)}
.hero .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .fallback{position:absolute;inset:0;background:url("img/bloc-ecran.jpg") center/cover;opacity:0;transition:opacity .6s}
.hero.no3d .fallback{opacity:.25}
.hero .voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(243,248,250,.94) 0%,rgba(243,248,250,.6) 42%,rgba(243,248,250,0) 62%);transition:opacity .6s}
.hero.passe .voile{opacity:0}
.hero .intro{position:absolute;left:0;right:0;top:calc(50% + 30px);transform:translateY(-50%);transition:opacity .5s,transform .5s}
.hero .intro .wrap>div{max-width:600px}
.hero .marque{width:clamp(240px,30vw,420px);height:auto;margin-bottom:30px}
.hero h1{font-size:clamp(30px,3.7vw,50px);line-height:1.1}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--ardoise);margin-top:24px;max-width:520px}
.scope{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ardoise);margin-top:22px}
.scope i{font-style:normal;margin:0 .8em;color:var(--teal)}
.hero.passe .intro{opacity:0;transform:translateY(calc(-50% - 30px));pointer-events:none}
/* les trois étapes */
.etapes{position:absolute;left:0;right:0;bottom:clamp(28px,7vh,70px);opacity:0;transition:opacity .5s}
.hero.passe .etapes{opacity:1}
.etapes .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.etape{border-top:2px solid rgba(0,179,164,.2);padding-top:16px;opacity:.4;transition:opacity .4s,border-color .4s}
.etape b{display:block;font-size:20px;font-weight:600}
.etape span{display:block;font-size:14px;color:var(--ardoise);line-height:1.5;margin-top:4px}
.etape.on{opacity:1;border-color:var(--teal)}
.etape .n{font-size:12px;letter-spacing:.2em;color:var(--teal);font-weight:600}
.defile{position:absolute;right:var(--g);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ardoise);transition:opacity .4s}
.hero.passe .defile{opacity:0}
@media (max-width:760px){
  .hero{height:300vh}
  .etapes .wrap{grid-template-columns:1fr;gap:0}
  .etape{display:none;border-top:0;padding:0}
  .etape.on{display:block}
  .defile{display:none}
  .hero .intro{top:auto;bottom:8vh;transform:none}
  .hero .marque{width:220px;margin-bottom:18px}
  .hero h1{font-size:30px}
  .hero .lead{font-size:16px;margin-top:16px}
  .hero .btns{margin-top:24px}
  .hero.passe .intro{transform:translateY(-30px)}
  .hero .voile{background:linear-gradient(0deg,rgba(243,248,250,.97) 0%,rgba(243,248,250,.9) 55%,rgba(243,248,250,0) 66%)}
}

/* sections de contenu */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.split.inv>:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.inv>:first-child{order:0}}
.cadre{border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(6,26,40,.22)}
.cadre img{width:100%;height:100%;object-fit:cover}

/* trois verbes */
.verbes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:70px}
.verbes div{border-top:2px solid var(--lagon);padding-top:20px}
.verbes h3{color:var(--teal);font-size:22px;margin-bottom:8px}
@media (max-width:760px){.verbes{grid-template-columns:1fr}}

/* transmettre */
.devise{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;font-size:clamp(24px,3vw,38px);font-weight:300;margin:10px 0 26px}
.devise b{font-weight:600;color:var(--teal)}
.devise i{font-style:normal;color:var(--lagon);font-weight:300}
.cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.carte{background:var(--blanc);border-radius:14px;padding:28px 24px;box-shadow:0 1px 0 var(--filet),0 10px 30px rgba(11,45,68,.06)}
.carte img{width:40px;height:40px;margin-bottom:18px}
.carte h3{font-size:18px;margin-bottom:8px}
.carte p{font-size:15px;color:var(--ardoise);line-height:1.6}
@media (max-width:1000px){.cartes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cartes{grid-template-columns:1fr}}
.citation{margin-top:70px;padding:34px 38px;border-left:3px solid var(--teal);background:var(--blanc);border-radius:0 14px 14px 0;font-size:clamp(18px,1.8vw,22px);line-height:1.55;font-weight:500;color:var(--nuit)}
.citation small{display:block;margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ardoise);font-weight:500}

/* au bloc */
.mosaique{display:grid;grid-template-columns:1fr 1.25fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:50px;height:clamp(420px,46vw,560px)}
.mosaique figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--abysse)}
.mosaique figure:first-child{grid-row:span 2}
.mosaique img{width:100%;height:100%;object-fit:cover}
.mosaique figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;font-size:13px;font-weight:500;background:linear-gradient(transparent,rgba(6,26,40,.85))}
@media (max-width:760px){.mosaique{grid-template-columns:1fr;grid-template-rows:none;height:auto}.mosaique figure{height:240px}.mosaique figure:first-child{grid-row:auto}}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.point{background:rgba(255,255,255,.05);border:1px solid rgba(70,209,199,.18);border-radius:12px;padding:22px}
.point img{width:30px;height:30px;margin-bottom:12px}
.point h3{font-size:16px;margin-bottom:6px}
.point p{font-size:14px;color:var(--clair);line-height:1.55}
@media (max-width:1000px){.points{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.points{grid-template-columns:1fr}}

/* fondateur */
.fondateur{overflow:hidden}
.portrait{position:relative;max-width:420px}
.portrait .ph{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:404/500}
.portrait .ph img{width:100%;height:100%;object-fit:cover}
.portrait svg{position:absolute;right:-118px;top:-30px;width:130px;opacity:.9}
@media (max-width:900px){.portrait svg{display:none}}
.portrait .nom{margin-top:18px;font-weight:600}
.portrait .nom span{display:block;font-weight:400;font-size:14px;color:var(--ardoise)}
.recit p+p{margin-top:18px}
.frise{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:2px solid var(--filet)}
.frise div{padding:18px 18px 0 0;position:relative}
.frise div::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--blanc);border:2px solid var(--teal)}
.frise b{display:block;font-size:22px;color:var(--teal);font-weight:600}
.frise span{display:block;font-size:14px;color:var(--ardoise);line-height:1.5;margin-top:4px}
@media (max-width:620px){.frise{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--filet);margin-left:6px}.frise div{padding:0 0 22px 22px}.frise div::before{top:4px;left:-7px}}

/* modalités */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.mode{border:1px solid var(--filet);border-radius:14px;padding:30px 26px;background:var(--blanc)}
.mode .k{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.mode h3{font-size:20px;margin:10px 0}
.mode p{font-size:15px;color:var(--ardoise)}
@media (max-width:900px){.modes{grid-template-columns:1fr}}
.parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;counter-reset:p}
.parcours div{background:var(--glace);border-radius:14px;padding:24px 26px;counter-increment:p}
.parcours div::before{content:"0" counter(p);display:block;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--teal);margin-bottom:8px}
.parcours b{display:block;font-size:17px}
.parcours span{font-size:15px;color:var(--ardoise)}
@media (max-width:900px){.parcours{grid-template-columns:1fr}}

/* confiance */
.garanties{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.garanties img{width:34px;height:34px;margin-bottom:14px}
.garanties h3{font-size:18px;margin-bottom:6px}
.garanties p{font-size:15px;color:var(--clair)}
@media (max-width:900px){.garanties{grid-template-columns:1fr}}
.coches{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.coches span{font-size:14px;font-weight:500;padding:10px 18px;border-radius:30px;border:1px solid rgba(70,209,199,.35);color:var(--glace)}
.coches span::before{content:"✓";color:var(--lagon);margin-right:8px;font-weight:700}
.pilote{margin-top:36px;padding:20px 24px;border-radius:12px;background:rgba(255,255,255,.05);font-size:14px;color:var(--clair);line-height:1.6}
.pilote b{color:var(--blanc);font-weight:600}

/* FAQ */
.faq{max-width:820px;margin-top:40px}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:10px;height:10px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq details p{padding:0 0 24px;color:var(--ardoise)}

/* contact */
.contact{overflow:hidden}
.contact .chev{position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:520px;opacity:.10;pointer-events:none}
.coord{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px 56px;margin-top:50px}
.coord small{display:block;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lagon);margin-bottom:6px}
.coord a,.coord span{font-size:17px;text-decoration:none;color:var(--blanc)}
.coord a:hover{color:var(--lagon)}
@media (max-width:760px){.coord{grid-template-columns:1fr}}

/* pied */
footer{background:var(--abysse);color:#8FAAB7;font-size:13px;padding:34px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer img{height:26px;width:auto}
footer a{color:#8FAAB7;text-decoration:none;margin-left:18px}
footer a:hover{color:var(--lagon)}

/* apparition douce */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* pages légales */
.legal{padding:130px 0 90px}
.legal h1{font-size:clamp(30px,4vw,42px);margin-bottom:30px}
.legal h2{font-size:20px;margin:36px 0 10px}
.legal p,.legal li{color:var(--ardoise)}
.legal .wrap{max-width:860px}

/* sur mesure */
.adapt{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adapt div{background:var(--glace);border-radius:14px;padding:24px 22px}
.adapt img{width:32px;height:32px;margin-bottom:12px}
.adapt h3{font-size:17px;margin-bottom:6px}
.adapt p{font-size:14.5px;color:var(--ardoise);line-height:1.55}
@media (max-width:560px){.adapt{grid-template-columns:1fr}}
.cocon{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:c;border-top:2px solid var(--filet)}
.cocon li{counter-increment:c;padding:22px 18px 0 0;position:relative}
.cocon li::before{content:counter(c);position:absolute;top:-15px;left:0;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.cocon b{display:block;font-size:16px;margin-top:6px}
.cocon span{display:block;font-size:14px;color:var(--ardoise);margin-top:4px}
@media (max-width:760px){.cocon{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--filet);margin-left:14px}.cocon li{padding:0 0 22px 28px}.cocon li::before{top:0;left:-15px}}