/* Organisation by Charlotte, version 9 : « Premium sombre » neutre (retour à la direction C du départ).
   Nuit neutre et chaude, ivoire et blanc nacré en accent. Pas de violet, pas de jaune, pas de pastel.
   Sections droites. Mouvement et 3D en CSS, jamais de défilement bloqué ; tout s'arrête si l'utilisateur limite les animations. */
:root{
  --nuit:#101013;--nuit-2:#16161b;--nuit-3:#1d1d23;--carte:#19191f;--ligne:#ffffff17;--ligne-2:#ffffff2e;
  --texte:#f3efe8;--doux:#aba69e;--ivoire:#e9e2d5;--ivoire-f:#d4cbbb;
  --titres:'Fraunces',Georgia,serif;--rayon:14px;--ombre:0 40px 80px -40px #000;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--nuit)}
body{margin:0;overflow-x:clip;background:var(--nuit);color:var(--texte);font:400 1rem/1.7 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
/* grain très fin sur toute la page, comme du papier photo */
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
::selection{background:var(--ivoire);color:var(--nuit)}
h1,h2,h3,.h3{font-family:var(--titres);font-weight:300;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.4vw,3rem)}
h3,.h3{font-size:1.3rem;line-height:1.2;font-weight:400}
.h4{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--doux);margin:0 0 14px}
em{font-style:italic;color:var(--ivoire);font-weight:300}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
section{padding:clamp(90px,11vw,160px) 0;position:relative}
.sur{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--doux);margin:0 0 20px}
.sur::before{content:"";display:inline-block;width:28px;height:1px;background:var(--ivoire);vertical-align:middle;margin-right:12px;opacity:.6}
.main{font-family:'Caveat',cursive}
.small,.note{font-size:.86rem;color:var(--doux)}
.todo{background:#fff3a0;color:#5a4a00;padding:0 .3em;border-radius:3px;font-size:.9em}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--texte);color:var(--nuit);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:1px solid var(--ivoire);outline-offset:4px;border-radius:4px}

/* ------------------------------------------------ En-tête */
header.site{position:sticky;top:0;z-index:50;background:#101013b8;backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .4s}
header.site.scrolled{border-color:var(--ligne)}
.nav{display:flex;align-items:center;gap:34px;min-height:78px}
.brand{text-decoration:none;margin-right:auto}
.logo{display:flex;align-items:center}
.logo .mark{display:none}
.word{display:flex;flex-direction:column;line-height:1.1}
.word b{font-family:var(--titres);font-weight:300;font-size:1.35rem;letter-spacing:-.01em}
.word small{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--doux)}
.links{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center;font-size:.88rem}
.links a{position:relative;text-decoration:none;color:var(--doux);padding:4px 0;transition:color .3s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ivoire);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.links a:hover,.links a[aria-current=page]{color:var(--texte)}
.links a:hover::after,.links a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.links .rdv{color:var(--nuit);background:var(--ivoire);border-radius:99px;padding:9px 20px}
.links .rdv::after{display:none}
.links .rdv:hover{background:#fff;color:var(--nuit)}
.menu-btn{display:none;background:none;border:1px solid var(--ligne-2);border-radius:99px;padding:7px 16px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--texte)}
@media (max-width:940px){
  .word small{display:none}
  .menu-btn{display:block}
  .links{position:fixed;inset:78px 0 0;background:var(--nuit);flex-direction:column;align-items:flex-start;padding:40px 24px;gap:24px;transform:translateX(100%);transition:transform .5s var(--ease);font-size:1.4rem}
  .links.open{transform:none}
}

/* ------------------------------------------------ Boutons et liens */
.cta{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--ivoire);color:var(--nuit);font-weight:500;font-size:.84rem;text-decoration:none;
  padding:11px 20px;border-radius:99px;overflow:hidden;isolation:isolate;transition:color .4s,box-shadow .4s}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.cta:hover::before{transform:none}
.cta:hover{box-shadow:0 0 50px -10px #ffffff66}
.arrow{width:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.cta:hover .arrow{transform:translateX(5px)}
.cta-zone{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:48px}
.text-link{position:relative;display:inline-block;color:var(--texte);text-decoration:none;padding-bottom:3px}
.text-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ivoire);transform-origin:left;transition:transform .5s var(--ease)}
.text-link:hover::before{transform:scaleX(.3)}
.text-link::after{content:" →"}

/* ------------------------------------------------ Accueil */
.accueil{padding:clamp(40px,6vw,90px) 0 clamp(80px,9vw,120px);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 50% 70% at 26% 50%,#ffffff12,transparent 70%),radial-gradient(ellipse 40% 50% at 85% 10%,#ffffff0a,transparent 70%),var(--nuit)}
.accueil::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 35% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 35% 45%,#000 20%,transparent 75%)}
.accueil-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:center}
.hote{position:relative;margin:0;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;perspective:1200px}
.halo{position:absolute;left:50%;top:46%;width:90%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#f3ede233 0%,#ffffff10 40%,transparent 68%);animation:respire 7s ease-in-out infinite alternate}
@keyframes respire{to{scale:1.07;opacity:.8}}
.hote img{position:relative;z-index:1;width:auto;max-width:100%;height:min(64vh,580px);object-fit:contain;object-position:bottom;transform-style:preserve-3d;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
  filter:drop-shadow(0 40px 60px #000c);animation:entree-photo 1.6s .15s both var(--ease);transition:transform .3s ease-out}
@keyframes entree-photo{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(10px) drop-shadow(0 40px 60px #000c)}}
.bulle{position:relative;z-index:3;margin:-28px 0 0;max-width:280px;background:#ffffff0f;border:1px solid var(--ligne-2);backdrop-filter:blur(14px);border-radius:18px 18px 18px 4px;
  padding:14px 18px;font-size:.9rem;line-height:1.45;color:var(--texte);animation:bulle .9s 1.1s both var(--ease)}
@keyframes bulle{from{opacity:0;transform:translateY(16px)}}
.accueil-texte>*{animation:monte 1s both var(--ease)}
.accueil-texte>:nth-child(1){animation-delay:.1s}.accueil-texte>:nth-child(3){animation-delay:.7s}
.accueil-texte>:nth-child(4){animation-delay:.85s}.accueil-texte>:nth-child(5){animation-delay:1s}
.accueil-texte>h1{animation:none}
@keyframes monte{from{opacity:0;transform:translateY(24px)}}
/* le titre arrive mot par mot, chaque mot sortant de derrière un cache */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mot>span{display:inline-block;transform:translateY(105%);animation:mot-monte 1.1s var(--ease) forwards;animation-delay:calc(.2s + var(--i) * .06s)}
@keyframes mot-monte{to{transform:none}}
.lead{font-size:1.06rem;color:var(--doux);max-width:46ch;margin-bottom:24px}
.choix{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.choix-btn{position:relative;overflow:hidden;font:inherit;font-size:.86rem;cursor:pointer;padding:9px 18px;border-radius:99px;border:1px solid var(--ligne-2);background:transparent;color:var(--doux);transition:color .3s,border-color .3s,background .3s}
.choix-btn:hover{color:var(--texte);border-color:var(--ivoire)}
.choix-btn[aria-selected=true]{background:var(--ivoire);border-color:var(--ivoire);color:var(--nuit)}
.choix-btn.auto::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--nuit);opacity:.35;transform-origin:left;animation:minuteur 5s linear}
@keyframes minuteur{from{transform:scaleX(0)}}
.reponses{display:grid}
.reponse{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px 24px 14px 14px;
  animation:apparition .6s both var(--ease);transition:transform .25s ease-out,border-color .4s}
.reponse:hover{border-color:var(--ligne-2)}
.reponse[hidden]{display:none}
@keyframes apparition{from{opacity:0;transform:translateY(10px) rotateX(8deg)}}
.reponse img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:10px}
.reponse .h3{font-size:1.3rem;margin:0 0 6px}
.reponse p{color:var(--doux);font-size:.92rem;margin:0 0 14px}
.liens{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.liens .cta{padding:10px 18px;font-size:.86rem}
/* encadré des 4 choix : survols discrets (Charlotte : « ça bouge beaucoup trop »), juste un éclaircissement, rien ne bouge */
.reponse .cta::before{display:none}
.reponse .cta{transition:background .25s}.reponse .cta:hover{background:#fff;box-shadow:none}.reponse .cta:hover .arrow{transform:none}
@media (max-width:900px){.accueil-grille{grid-template-columns:1fr}.hote{min-height:420px}.hote img{height:min(52vh,460px)}}
@media (max-width:560px){.reponse{grid-template-columns:1fr;padding:12px}.bulle{margin:-18px 12px 0;max-width:none;align-self:stretch}}

/* ------------------------------------------------ Bande de mots + chiffres */
.defile-mots{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:26px 0;background:var(--nuit-2)}
.defile-piste{display:inline-flex;align-items:center;gap:34px;animation:defile-mots 50s linear infinite;padding-left:34px}
.defile-mots:hover .defile-piste{animation-play-state:paused}
.defile-piste span{font-family:var(--titres);font-weight:300;font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--texte)}
.defile-piste span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1px #ffffff66}
.defile-piste i{font-style:normal;color:var(--doux);font-size:.9rem}
@keyframes defile-mots{to{transform:translateX(-50%)}}
.chiffres-section{padding:0;background:var(--nuit-2)}
.chiffres{list-style:none;margin:0;padding:48px 0 64px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.chiffres li{display:flex;flex-direction:column;gap:6px;padding-left:20px;border-left:1px solid var(--ligne-2)}
.chiffres b{font-family:var(--titres);font-weight:200;font-size:clamp(2.2rem,3.8vw,3.4rem);color:var(--texte);line-height:1}
.chiffres span{color:var(--doux);font-size:.86rem}
@media (max-width:700px){.chiffres{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------ Titres de section */
.head{margin-bottom:60px;position:relative}
.head .num{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--doux);margin-bottom:16px}
.head::before{content:"";display:block;width:60px;height:1px;background:var(--ivoire);margin-bottom:22px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.head.vu::before{transform:none}
.head h2{max-width:20ch;margin:0}
.head p{max-width:56ch;color:var(--doux);margin:16px 0 0}

/* ------------------------------------------------ Sections : noir, blanc, noir, blanc (Charlotte, 01/11/2026)
   Les sections .clair inversent les couleurs : fond blanc nacré, texte nuit, boutons nuit. */
main>section{background:var(--nuit)}
.clair,.defile-mots{--nuit:#fff;--nuit-2:#fff;--nuit-3:#f4f4f5;--carte:#f7f7f8;--ligne:#1010131a;--ligne-2:#10101333;
  --texte:#16161b;--doux:#5c5c63;--ivoire:#1d1d23;--ivoire-f:#3a3a42;--ombre:0 40px 80px -40px #10101340;color:var(--texte)}
main>section.clair{background:var(--nuit)}
.clair ::selection{background:var(--ivoire);color:var(--nuit)}
.clair .cta::before{background:#000}
.clair .cta:hover{box-shadow:0 18px 40px -16px #10101366}
.clair .reponse .cta:hover,.clair .links .rdv:hover{background:#000}
.clair.voyage{background:var(--nuit)!important}
.clair .offer:hover,.clair .etape.allumee{box-shadow:0 30px 60px -36px #10101359}

/* ------------------------------------------------ Offres : tiroirs qui s'ouvrent */
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.offer{position:relative;display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;text-decoration:none;
  box-shadow:inset 0 1px 0 #ffffff14;transition:flex 1s var(--ease),border-color .5s,box-shadow .6s}
.offer-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 20%;filter:grayscale(.35) brightness(.8);transition:transform 1.4s var(--ease),filter .8s,opacity .8s}
.offer:hover .offer-img{filter:none}
.offer::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#ffffff14 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position 1.4s var(--ease)}
.offer:hover::before{background-position:-20% 0}
.offer:hover{border-color:var(--ligne-2);box-shadow:inset 0 1px 0 #ffffff24,0 50px 90px -40px #000}
.offer .who{position:absolute;top:16px;left:16px;z-index:2;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;background:#10101399;backdrop-filter:blur(10px);color:var(--texte);
  padding:6px 12px;border-radius:99px;border:1px solid var(--ligne-2)}
.offer h3{position:relative;z-index:2;margin:22px 26px 6px;font-size:1.6rem;font-weight:300}
.offer p{position:relative;z-index:2;margin:0 26px;color:var(--doux);font-size:.92rem}
.offer .more{position:relative;z-index:2;margin:auto 26px 0;padding:16px 0 24px;font-size:.86rem;color:var(--texte);display:flex;gap:8px;align-items:center}
@media (min-width:900px){
  .offers{display:flex;gap:14px;height:400px}
  .offer{flex:1;min-width:0;justify-content:flex-end}
  .offer:hover,.offer:focus-visible,.offers:not(:hover) .offer:first-child{flex:2.6}
  .offer-img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:.5}
  .offer-img[src*="pdf-pile"]{object-fit:contain;padding:26px 20px 120px}   /* la pile de PDF (sans fond) reste entière, quelle que soit sa place */
  .offer:hover .offer-img,.offers:not(:hover) .offer:first-child .offer-img{opacity:.9;transform:scale(1.04);filter:none}
  .offer::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#101013 10%,#101013cc 32%,transparent 70%);pointer-events:none}
  .offer h3{margin:auto 0 26px 24px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:2.1rem;align-self:flex-start;transition:font-size .6s}
  .offer:hover h3,.offers:not(:hover) .offer:first-child h3{writing-mode:horizontal-tb;transform:none;margin:auto 26px 8px;white-space:normal;font-size:1.8rem}
  .offer p,.offer .more{max-height:0;opacity:0;overflow:hidden;transition:max-height .9s var(--ease),opacity .6s .2s}
  .offer .more{margin:0 26px;padding:12px 0 24px}
  .offer:hover p,.offer:hover .more,.offers:not(:hover) .offer:first-child p,.offers:not(:hover) .offer:first-child .more{max-height:160px;opacity:1}
}
@media (max-width:760px){.offers{grid-template-columns:1fr}}

/* ------------------------------------------------ Le voyage : chemin qui se dessine */
.voyage{background:radial-gradient(ellipse 60% 60% at 50% 40%,#ffffff0a,transparent 70%),var(--nuit-2)!important;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);overflow:hidden}
.voyage .sur,.voyage-titre{text-align:center}
.voyage-titre{max-width:20ch;margin:0 auto 80px}
.chemin{position:relative;max-width:900px;margin:0 auto}
.trace{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}  /* le tracé passe par les points (calculé dans profondeur.js) */
.trace path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.fond-trace{stroke:#ffffff12}
.trait{stroke:var(--ivoire);stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #ffffff88)}
.etapes{list-style:none;margin:0;padding:0;display:grid;gap:80px;perspective:1200px}
.etape{position:relative;width:42%;padding:28px 30px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);opacity:.3;transition:opacity .9s,border-color .9s,box-shadow .9s}
.etape:nth-child(odd){justify-self:start}.etape:nth-child(even){justify-self:end}
.etape.allumee{opacity:1;border-color:var(--ligne-2);box-shadow:0 40px 80px -40px #000,inset 0 1px 0 #ffffff1a}
.etape .num{font-family:var(--titres);font-style:italic;font-weight:200;color:var(--ivoire);font-size:2.2rem;line-height:1}
.etape h3{margin:10px 0 6px}
.etape p{margin:0;color:var(--doux);font-size:.93rem}
.etape .point{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--nuit);border:1px solid #ffffff44;translate:0 -50%;transition:all .7s}
.etape:nth-child(odd) .point{right:-19.5%}.etape:nth-child(even) .point{left:-19.5%}
.etape.allumee .point{background:var(--ivoire);border-color:var(--ivoire);box-shadow:0 0 0 6px #ffffff10,0 0 24px #ffffffaa}
@media (max-width:760px){
  .etape,.etape:nth-child(even){width:auto;justify-self:stretch;margin-left:44px}
  .etape:nth-child(odd) .point,.etape:nth-child(even) .point{left:-37px;right:auto}
}

/* ------------------------------------------------ Ordinateur 3D qui s'ouvre au défilement */
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:center}
.duo .intro{max-width:46ch}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.portable{--ouverture:-88deg;perspective:1600px;padding:20px 0 40px}
.portable-3d{position:relative;width:100%;max-width:620px;margin:0 auto;transform:rotateX(14deg) rotateY(-16deg);transform-style:preserve-3d;transition:transform .4s ease-out}
.ecran{position:relative;aspect-ratio:16/10;background:#0b0b0d;border:10px solid #2a2a30;border-bottom-width:14px;border-radius:14px 14px 4px 4px;transform-origin:50% 100%;
  transform:rotateX(var(--ouverture));transform-style:preserve-3d;box-shadow:0 0 0 1px #ffffff14,0 -20px 80px -20px #ffffff22}
.ecran img{width:100%;height:100%;object-fit:cover;border-radius:3px;backface-visibility:hidden}
.ecran-dos{position:absolute;inset:-10px;border-radius:14px;background:linear-gradient(135deg,#3a3a42,#1f1f25);transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden}
.clavier{position:relative;height:16px;margin:0 -7%;background:linear-gradient(#3a3a42,#232329);border-radius:2px 2px 14px 14px;transform-origin:50% 0;transform:rotateX(-6deg);box-shadow:0 30px 50px -10px #000}
.clavier i{position:absolute;left:50%;top:0;width:18%;height:6px;translate:-50% 0;background:#16161b;border-radius:0 0 8px 8px}

/* ------------------------------------------------ Captures, PDF */
.navigateur{display:block;margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 50px 100px -40px #000,0 0 0 1px #ffffff1a}
.barre-nav{display:flex;gap:5px;padding:9px 12px;background:#e9e7e3}
.barre-nav i{width:8px;height:8px;border-radius:50%;background:#cfccc6}
.navigateur img{width:100%}
.navigateur.large{max-width:1000px;margin-inline:auto}
.legende{text-align:center;color:var(--doux);font-size:.88rem;margin-top:16px}
.mini-etapes{padding-left:20px;color:var(--doux);margin:0 0 28px}
.mini-etapes li{margin:6px 0}
.couvertures{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:900px;margin-inline:auto;perspective:1200px}
.couvertures figure{margin:0}
.couvertures img{border-radius:6px;box-shadow:0 40px 70px -30px #000}
.couvertures figcaption{font-size:.86rem;color:var(--doux);margin-top:14px;text-align:center}
@media (max-width:640px){.couvertures{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------ Citation qui s'allume mot par mot */
.citation{max-width:920px;text-align:center}
.citation blockquote{margin:0 0 30px;font-family:var(--titres);font-weight:200;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.18}
.citation blockquote em{color:inherit}
.cite-mot{opacity:.16;transition:opacity .4s}
.cite-mot.on{opacity:1}
.signature{color:var(--doux);font-size:.88rem}
.signature .main{display:block;font-size:2.1rem;color:var(--ivoire);line-height:1.1}

/* ------------------------------------------------ MILOHY */
.milohy{display:grid;grid-template-columns:.75fr 1.25fr;align-items:stretch;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;text-decoration:none;
  transition:border-color .5s,transform .25s ease-out}
.milohy:hover{border-color:var(--ligne-2)}
.milohy img{width:100%;height:100%;max-height:400px;object-fit:cover;object-position:50% 72%}
.milohy-texte{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(28px,5vw,64px);color:var(--doux)}
.milohy-texte .sur{margin:0}
.milohy-titre{font-family:var(--titres);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--texte);line-height:1.1}
@media (max-width:700px){.milohy{grid-template-columns:1fr}.milohy img{max-height:260px}}

/* ------------------------------------------------ Questions */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--ligne);padding:24px 0}
.faq summary{cursor:pointer;font-family:var(--titres);font-weight:300;font-size:1.35rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-weight:300;color:var(--ivoire);font-size:1.4rem;line-height:1;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq p{margin:14px 0 0;color:var(--doux);max-width:62ch}

/* ------------------------------------------------ Pages intérieures */
.page-hero{padding:clamp(60px,8vw,120px) 0 24px;background:radial-gradient(ellipse 50% 70% at 80% 30%,#ffffff0d,transparent 70%)}
.page-hero h1{max-width:18ch}
.page-hero-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.hero-visuel{width:100%;border-radius:var(--rayon);aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;box-shadow:0 50px 100px -40px #000;border:1px solid var(--ligne)}
@media (max-width:860px){.page-hero-grille{grid-template-columns:1fr}}
.intro{font-size:1.05rem;color:var(--doux);max-width:54ch}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 28px;padding:0;font-size:.76rem;color:var(--doux)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}
.tldr{max-width:480px;margin-top:34px;padding:22px 26px;background:var(--carte);border:1px solid var(--ligne);border-left:1px solid var(--ivoire);border-radius:6px}
.tldr .label{font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em;color:var(--doux)}
.tldr ul{margin:10px 0 0;padding-left:18px;font-size:.92rem;color:var(--doux)}
.tldr li{margin:4px 0}
.ideas{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 64px}
.idea{position:relative;padding-left:38px}
.idea::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;border:1px solid var(--ivoire)}
.idea::after{content:"";position:absolute;left:7px;top:9px;width:4px;height:8px;border-right:1.4px solid var(--ivoire);border-bottom:1.4px solid var(--ivoire);transform:rotate(40deg)}
.idea h3{margin:0 0 6px;font-size:1.3rem}
.idea p{margin:0 0 8px;color:var(--doux);font-size:.94rem}
@media (max-width:700px){.ideas{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none;padding:0;margin:0}
.steps li{padding-top:20px;border-top:1px solid var(--ligne-2)}
.steps .n{font-family:var(--titres);font-style:italic;color:var(--ivoire)}
.steps p{margin:0;font-size:.92rem;color:var(--doux)}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.price{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--ivoire);border-bottom:1px solid var(--ligne)}
.price h3{margin:0 0 4px}.price p{margin:0;color:var(--doux);font-size:.92rem;max-width:60ch}
.price .range{font-family:var(--titres);font-weight:200;font-size:2.4rem;white-space:nowrap}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,100px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.portrait img{max-width:420px;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--rayon);box-shadow:0 50px 100px -40px #000;filter:saturate(.9)}
.prose p{max-width:58ch;font-size:1.04rem;color:var(--doux)}
.prose h2{margin-bottom:24px}
.contact-list{list-style:none;padding:0}
.contact-list li{padding:14px 0;border-bottom:1px solid var(--ligne)}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#visionneuse{width:min(1000px,96vw);border:1px solid var(--ligne);border-radius:12px;padding:14px;background:var(--nuit);color:var(--texte)}
#visionneuse::backdrop{background:#000c}
.legal{max-width:760px;color:var(--doux)}
.legal h2{font-size:1.4rem;margin-top:1.8em;color:var(--texte)}
.legal table{width:100%;border-collapse:collapse;font-size:.9rem;margin:12px 0 20px}
.legal th,.legal td{border:1px solid var(--ligne-2);padding:8px 10px;text-align:left;vertical-align:top}
.lost{text-align:center;padding:150px 0}.lost .intro{margin-inline:auto}.lost .cta{margin-top:22px}

/* ------------------------------------------------ Pied de page */
footer.site{border-top:1px solid var(--ligne);padding:80px 0 32px;font-size:.88rem;background:var(--nuit)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot ul{list-style:none;padding:0;margin:0}.foot li{margin-bottom:10px}
.foot a{text-decoration:none;color:var(--doux);transition:color .3s}.foot a:hover{color:var(--texte)}
.foot p{color:var(--doux);margin-top:16px;max-width:36ch}
.foot .h4{color:var(--texte)}
.foot-logo .mark{display:none}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:56px;padding-top:24px;border-top:1px solid var(--ligne);font-size:.78rem;color:var(--doux)}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* ------------------------------------------------ Mouvement */
.barre-lecture{position:fixed;top:0;left:0;right:0;height:1px;background:var(--ivoire);transform-origin:left;transform:scaleX(0);z-index:60}
.lumiere-souris{position:fixed;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,#ffffff0d 0%,#ffffff05 35%,transparent 65%);transition:opacity .6s}
/* curseur : un anneau qui suit la souris et grandit sur les liens */
.anneau{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #ffffff66;border-radius:50%;pointer-events:none;z-index:150;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s,opacity .3s;opacity:0}
.anneau.sur-lien{width:64px;height:64px;margin:-32px 0 0 -32px;background:#ffffff14;border-color:#ffffffaa}
.js .fade,.js .stagger>*{opacity:0;transform:translateY(20px);transition:opacity 1.1s,transform 1.1s var(--ease)}
.js .fade.vu,.js .stagger.vu>*{opacity:1;transform:none}
.js .stagger.vu>*:nth-child(2){transition-delay:.1s}.js .stagger.vu>*:nth-child(3){transition-delay:.2s}.js .stagger.vu>*:nth-child(4){transition-delay:.3s}
.js .milohy.fade{transform:perspective(1200px) rotateX(20deg) translateY(60px) scale(.95);transition:opacity 1.2s,transform 1.4s var(--ease)}
.js .milohy.fade.vu{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .fade,.js .stagger>*{opacity:1;transform:none}
  .mot>span{transform:none}.cite-mot{opacity:1}.portable{--ouverture:-6deg}
  .head::before{transform:none}.etape{opacity:1}.trait{stroke-dashoffset:0}
  .lumiere-souris,.anneau{display:none}
}
@media (hover:none){.anneau,.lumiere-souris{display:none}}

/* =====================================================================================
   Version 10 : plus vrai, moins d'effets « IA ».
   ===================================================================================== */
/* plus de petits traits décoratifs (ils ressemblaient à des tirets) */
.sur::before,.head::before{display:none}
/* plus de quadrillage derrière la photo ; la lueur bouge lentement derrière Charlotte */
.accueil::after{display:none}
.halo{background:radial-gradient(circle,#f3ede22e 0%,#ffffff0e 42%,transparent 68%);animation:lueur 14s ease-in-out infinite alternate}
@keyframes lueur{0%{translate:-56% -50%;scale:1}50%{translate:-44% -56%;scale:1.12}100%{translate:-50% -44%;scale:.95}}
/* la photo se fond sur tous ses bords : plus aucun bord droit ni ombre rectangulaire */
.hote img{filter:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 98%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 98%);mask-composite:intersect}
@keyframes entree-photo{from{opacity:0;transform:translateY(40px) scale(.96)}}
/* vrai ordinateur portable */
.portable-photo{width:100%;max-width:640px;margin-inline:auto;filter:drop-shadow(0 40px 50px #000);transition:transform .25s ease-out}
.js .portable-photo.fade{transform:translateY(40px) scale(.96);transition:opacity 1.2s,transform 1.2s var(--ease)}
.js .portable-photo.fade.vu{transform:none}
/* vrais avis clients */
.avis{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.avis figure{margin:0;padding:24px 26px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--nuit-2)}
.avis blockquote{margin:0 0 12px;font-family:var(--titres);font-weight:300;font-size:1.2rem;line-height:1.35}
.avis figcaption{font-size:.8rem;color:var(--doux)}
.avis-lien{grid-column:1/-1;margin:4px 0 0}
@media (max-width:700px){.avis{grid-template-columns:1fr}}

/* =====================================================================================
   Version 11 : petites touches de rose poudré (celui des réseaux, adouci pour le fond sombre).
   Seulement : mots en italique des titres, chemin 1-2-3-4, barre de lecture, « + » des questions,
   signature, une pointe dans la lueur derrière la photo. Boutons, textes et fonds restent ivoire et nuit.
   ===================================================================================== */
:root{--rose:#f0549e}
h1 em,h2 em,.milohy-titre em,.defile-piste span:nth-child(8n+1){color:var(--rose)}
.halo{background:radial-gradient(circle,#f0c9d42e 0%,#ffffff0e 42%,transparent 68%)}
.barre-lecture{background:var(--rose)}
.trait{stroke:var(--rose);filter:drop-shadow(0 0 6px #f0549e88)}
.etape .num{color:var(--rose)}
.etape.allumee .point{background:var(--rose);border-color:var(--rose);box-shadow:0 0 0 6px #f0549e1a,0 0 22px #f0549eaa}
.faq summary::after{color:var(--rose)}
.signature .main{color:var(--rose)}

/* Version 14 : rose passé en FUCHSIA #f0549e (essai demandé par Charlotte ; ancien rose poudré : #f2a5bc) */
/* Version 12 : rose un peu plus présent, bande de mots sans contour (il paraissait flou), rose dans le pied de page */
:root{--rose:#f0549e}
.sur{color:var(--rose)}
.halo{background:radial-gradient(circle,#f0549e3d 0%,#f0549e12 42%,transparent 68%)}
.defile-piste span:nth-child(4n+3){color:var(--texte);-webkit-text-stroke:0}
.defile-piste span:nth-child(4n+1){color:var(--rose)}
.defile-piste i{color:var(--rose)}
.offer .who{border-color:#f0549e66}
.chiffres li{border-left-color:#f0549e66}
.text-link::before{background:var(--rose)}
footer.site{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,#f0549e99,transparent) 1;
  background:radial-gradient(ellipse 50% 70% at 50% 100%,#f0549e14,transparent 70%),var(--nuit)}
.foot .h4{color:var(--rose)}
.foot a:hover{color:var(--rose)}
/* Version 19 (placée après la 18 dans la cascade, voir plus bas) */

/* Version 18 : haut des pages intérieures dans la première fenêtre, photos entières (plus de recadrage) */
.page-hero{padding:3vh 0 4vh}
.page-hero-grille,.apropos .split{min-height:0;align-items:start}
.page-hero-grille>div:first-child,.apropos .prose{padding-top:2vh}
.page-hero h1{font-size:clamp(2rem,min(4.2vw,6.6vh),3.6rem);margin-bottom:2vh}
.page-hero .crumbs{margin-bottom:2vh}
.page-hero .intro{font-size:clamp(.95rem,2vh,1.06rem)}
.hero-visuel{aspect-ratio:auto;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 78px - 12vh);object-fit:contain;margin-inline:auto;display:block}
.page-hero-visuel{display:flex;justify-content:center}
.portrait{display:flex;justify-content:center}
.portrait img{aspect-ratio:auto;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 78px - 10vh)}
.apropos{padding-top:3vh}
.apropos h1{font-size:clamp(2rem,min(3.8vw,6vh),3.2rem);margin-bottom:2.2vh}
.apropos .prose p{font-size:clamp(.94rem,1.9vh,1.05rem);margin-bottom:1.4vh}
.apropos .prose .signature-texte{font-size:clamp(2.2rem,5vh,3rem)}
.apropos .cta-zone{margin-top:2.4vh}
@media (max-width:860px){.page-hero-grille,.apropos .split{min-height:0}.hero-visuel{max-height:40svh}.portrait img{max-height:42svh}}

/* Version 17 : « En bref » réduit à une ligne discrète d'étiquettes (3 au plus) ; page À propos en une section */
.tldr{max-width:none;margin-top:22px;padding:0;background:none;border:0}
.tldr .label{display:none}
.tldr ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tldr li{margin:0;font-size:.8rem;color:var(--doux);border:1px solid var(--ligne-2);border-radius:99px;padding:5px 12px}
.tldr li:nth-child(n+4){display:none}
.apropos{padding-bottom:clamp(70px,9vw,120px)}
.apropos .split{align-items:center}
.apropos .crumbs{margin-bottom:18px}
.apropos h1{font-size:clamp(2.1rem,4vw,3.4rem);margin-bottom:26px}
.apropos .prose p{font-size:1.06rem}
.apropos .prose .signature-texte{font-size:3.2rem;color:var(--rose);line-height:1;margin:14px 0 0}
.apropos .cta-zone{margin-top:30px}
@media (max-width:820px){.apropos h1{font-size:clamp(1.7rem,7.4vw,2.4rem);overflow-wrap:break-word}.apropos .portrait img{max-height:46svh;width:100%}}

/* Version 16 : logo signature « Charlotte » (en-tête, pied de page) ; monogramme OC en icône (icone.svg) */
.logo .mark,.foot-logo .mark{display:block!important;width:auto;height:48px;color:var(--texte)}
.foot-logo .mark{height:66px}
.logo .word,.foot-logo .word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.word b::after{display:none}
.main{font-family:'Allura',cursive;font-weight:400}
.signature .main{font-size:2.8rem}
@media (max-width:560px){.logo .mark{height:38px}}

/* Version 15 : nom et accroche espacés ; le souligné des liens s'arrête au texte */
.word{gap:6px}
.foot .word{gap:8px}
.milohy-texte .text-link,.liens .text-link,.avis-lien .text-link{align-self:flex-start;width:fit-content}

/* Version 13 : le haut de page tient en entier dans la première fenêtre (tout se règle sur la hauteur de l'écran) */
@media (max-width:900px){
  .accueil{padding:12px 0 18px}
  .hote{min-height:0}
  .hote img{height:25svh}
  .accueil h1{font-size:clamp(1.7rem,7.6vw,2.4rem);margin-bottom:8px}
  .reponse .h3{font-size:1.05rem;margin-bottom:4px}.reponse p{font-size:.84rem;margin-bottom:10px}
  .accueil .sur{margin-bottom:8px}
  .accueil .lead{font-size:.92rem;margin-bottom:12px}
  .choix{margin-bottom:10px;gap:6px}.choix-btn{padding:7px 13px;font-size:.82rem}
  .reponse img{display:none}.reponse{grid-template-columns:1fr;padding:14px 16px}
}
@media (min-width:901px){
  .accueil{min-height:calc(100svh - 78px);max-height:calc(100svh - 78px);display:flex;align-items:center;padding:2.5vh 0;box-sizing:border-box}
  .accueil-grille{width:min(1200px,100% - 48px);align-items:center}
  .hote{min-height:0;height:calc(100svh - 78px - 5vh)}
  .hote img{height:100%;max-height:none}
  .accueil h1{font-size:clamp(2rem,min(4.4vw,7.2vh),4.4rem);margin-bottom:1.6vh}
  .accueil .sur{margin-bottom:1.6vh}
  .accueil .lead{font-size:clamp(.92rem,1.9vh,1.05rem);margin-bottom:1.8vh}
  .choix{margin-bottom:1.6vh}
  .reponse{grid-template-columns:clamp(130px,19vh,200px) 1fr;padding:10px 20px 10px 10px;gap:18px}
  .reponse .h3{font-size:clamp(1.05rem,2.2vh,1.3rem)}
  .reponse p{font-size:clamp(.82rem,1.7vh,.92rem);margin-bottom:1.2vh}
  .liens .cta{padding:8px 16px}
}
.word b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rose);margin-left:3px;vertical-align:baseline}
@media print{header.site,footer.site,.cta{display:none}body{background:#fff;color:#111}}

/* Version 19 : le haut de chaque page intérieure remplit le premier écran (comme À propos), sans rien couper en bas.
   Tout se règle sur la hauteur de l'écran : ni trop grand, ni trop petit. */
@media (min-width:861px){
  .page-hero{padding:1.5vh 0 2.5vh}
  .page-hero-grille,.apropos .split{min-height:calc(100svh - 78px - 4vh);align-items:center;grid-template-columns:1fr 1.1fr}
  .apropos .split{grid-template-columns:.85fr 1.15fr}
  .page-hero-grille>div:first-child,.apropos .prose{padding-top:0}
  .page-hero h1{font-size:clamp(2.2rem,min(4.6vw,8vh),4.6rem);margin-bottom:2.4vh}
  .page-hero .crumbs{margin-bottom:2.2vh}
  .page-hero .intro{font-size:clamp(1rem,2.3vh,1.22rem);max-width:52ch}
  .tldr{margin-top:3vh}.tldr li{font-size:clamp(.8rem,1.75vh,.95rem);padding:.7vh 1.3vh}
  .hero-visuel{max-height:calc(100svh - 78px - 12vh)}
  /* À propos : un peu plus compact pour que la ligne sous le bouton reste visible */
  .apropos h1{font-size:clamp(2rem,min(3.8vw,6.6vh),3.6rem);margin-bottom:2vh}
  .apropos .prose p{font-size:clamp(.92rem,1.85vh,1.05rem);margin-bottom:1.1vh}
  .apropos .prose .signature-texte{font-size:clamp(2rem,4.6vh,2.8rem);margin-top:.6vh}
  .apropos .cta-zone{margin-top:2vh;gap:.8vh}
  .apropos .portrait img{max-height:calc(100svh - 78px - 14vh)}
}
@media (min-width:861px){.page-hero-grille{grid-template-columns:1fr 1.25fr}}

/* Version 20 : marges par défaut partout (même largeur que l'en-tête : 1200 px au plus, 24 px de chaque côté sur petit écran) */
.wrap,.page-hero-grille.wrap,.apropos .split.wrap,body:has(.accueil) section:has(.offers) .wrap{width:min(1200px,100% - 48px)}

/* Version 22 : bandeau cookies. En bas à gauche, jamais de défilement bloqué ; « Refuser » et « Accepter » ont le même poids.
   La mascotte est un papillon : posé à droite du bandeau, il s'envole sur la page si on accepte, se cache derrière si on refuse. */
.cookies [hidden]{display:none}
.cookies{position:fixed;left:24px;bottom:24px;z-index:99;width:min(600px,100% - 48px);   /* à gauche, en longueur et peu haut : il cache peu de texte */
  background:var(--carte);border:1px solid var(--ligne-2);border-radius:var(--rayon);padding:12px 14px 12px 18px;box-shadow:var(--ombre),0 0 60px -20px #f0549e55;
  opacity:0;translate:0 30px;pointer-events:none;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.cookies.visible{opacity:1;translate:0 0;pointer-events:auto}
.cookies.parti{translate:0 40px}
.cookies .h3{font-size:1rem;margin:0 0 2px}
/* sur grand écran : titre et texte à gauche, les deux boutons empilés à droite (bandeau en longueur, peu haut) */
.cookies-texte{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
.cookies-texte .h3,.cookies-msg{grid-column:1}
.cookies-boutons{grid-column:2;grid-row:1 / span 2}
.cookies-msg{font-size:.76rem;color:var(--doux);margin:0;line-height:1.45}
.cookies-msg a{color:var(--texte);text-decoration-color:var(--rose);text-underline-offset:3px}
.cookies-boutons{display:grid;grid-template-columns:1fr;gap:6px;min-width:160px}
.cookies-boutons button{font:500 .78rem 'Inter',sans-serif;padding:9px 8px;line-height:1.25;min-width:0;border-radius:99px;cursor:pointer;border:1px solid var(--ivoire);background:var(--ivoire);color:var(--nuit);transition:background .3s,box-shadow .3s}
.cookies-boutons button:hover,.cookies-boutons button:focus-visible{background:#fff;box-shadow:0 0 30px -8px #ffffff88;outline:none}
/* le papillon : couleurs fondues sans traits (fuchsia au cœur, bords nuit, reflet violet irisé, taches nacrées floutées),
   fins filaments courbes parcourus par un reflet. Posé à droite sur le bord haut du bandeau ; la zone qui le contient s'arrête
   net à ce bord : quand il descend, il passe « derrière » le bandeau. */
.papillon-zone{position:absolute;right:-10px;bottom:100%;width:190px;height:210px;overflow:hidden;pointer-events:none}
.papillon{position:absolute;left:0;bottom:0;width:170px;translate:0 105%;rotate:7deg;transition:translate 1.2s cubic-bezier(.3,.9,.3,1),rotate 1.2s}
.cookies.visible .papillon{translate:0 26%;transition-delay:.35s}

.poudre.etoile{border-radius:0;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 30%,#f6e6ff 60%,transparent 80%)!important;animation:poudre var(--d) ease-out forwards,scintille .3s ease-in-out infinite alternate}
/* survol d'« Accepter » : il se hisse et bat vite des ailes */
.cookies.espoir .papillon{translate:0 22%;rotate:2deg}
/* survol de « Refuser » : il recule un peu derrière le bandeau, ailes à moitié repliées */
.cookies.inquiet .papillon{translate:0 40%}
/* refusée, bien visible mais jamais triste : il fait « non » (il secoue la tête et le corps), replie vite ses ailes,
   le bandeau tremble un instant, puis il plonge derrière le bandeau (un petit nuage de poussière monte, cookies.js) */
.cookies.triste .papillon{animation:refus 1.3s ease-in forwards;transition:none}
.cookies.triste .papillon *{animation:none!important;transition:transform .25s var(--ease)}
.cookies.triste .papillon .aile-g{transform:perspective(900px) rotateY(-60deg) rotate(-16deg)}
.cookies.triste .papillon .aile-d{transform:perspective(900px) rotateY(58deg) rotate(18deg)}
.cookies.triste{animation:secoue .45s ease-in-out .15s}
@keyframes refus{0%{translate:0 26%;rotate:7deg}12%{rotate:-10deg}24%{rotate:14deg}36%{rotate:-10deg}48%{rotate:8deg;translate:0 18%}62%{rotate:0deg;translate:0 16%}100%{rotate:24deg;translate:0 120%}}
@keyframes secoue{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}}
/* acceptée : le papillon du bandeau est caché ; une copie vole à travers la page (cookies.js) */
/* retards négatifs : chaque partie démarre déjà en mouvement (aucune attente au départ), avec le même décalage qu'avant ;
   la queue est tournée vers la gauche même quand rien ne bouge (refus, mouvements réduits). */
/* le phénix en 7 calques de même taille, superposés : tout bouge ensemble, avec un léger décalage d'une partie à l'autre.
   Ailes : la base bat en volume autour de l'épaule (temps fort en descendant), le bout suit en retard et se plie davantage,
   les filaments ondulent. Corps : le thorax monte et descend, la tête hoche, la queue se balance en retard.
   --bat = durée d'un demi-battement (au repos 1,3 s ; plus vite au survol d'« Accepter » ; mené par cookies.js en vol). */
.papillon{aspect-ratio:765/956;--bat:1.6s}
.papillon .aile,.papillon .corps,.papillon img{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.papillon .aile img{filter:url(#obc-onde-fine) drop-shadow(0 0 8px #f0549e44)}
.papillon .aile-g{transform-origin:61.2% 41.3%;animation:battre-g var(--bat) cubic-bezier(.37,0,.63,1) infinite alternate}
.papillon .aile-d{transform-origin:65.4% 41%;animation:battre-d var(--bat) cubic-bezier(.37,0,.63,1) infinite alternate}
.papillon .phenix-aile-g-bout{transform-origin:43.7% 22.7%;animation:plie-g var(--bat) cubic-bezier(.37,0,.63,1) calc(var(--bat) * -1.75) infinite alternate}
.papillon .phenix-aile-d-bout{transform-origin:78.4% 21.6%;animation:plie-d var(--bat) cubic-bezier(.37,0,.63,1) calc(var(--bat) * -1.75) infinite alternate}
.papillon .corps{transform-origin:62% 46%;animation:porte var(--bat) cubic-bezier(.37,0,.63,1) calc(var(--bat) * -1.9) infinite alternate}
.papillon .phenix-tete{transform-origin:65.4% 44.5%;animation:hoche var(--bat) cubic-bezier(.37,0,.63,1) calc(var(--bat) * -1.8) infinite alternate}
.papillon .phenix-queue{transform-origin:62.4% 49.8%;transform:rotate(29deg);animation:remue var(--bat) cubic-bezier(.37,0,.63,1) calc(var(--bat) * -1.6) infinite alternate}
.cookies.espoir .papillon{--bat:.7s}
.cookies.inquiet .papillon *{animation-play-state:paused}
@keyframes battre-g{from{transform:perspective(900px) rotateY(14deg) rotate(7deg)}to{transform:perspective(900px) rotateY(-58deg) rotate(-16deg)}}
@keyframes battre-d{from{transform:perspective(900px) rotateY(-12deg) rotate(-6deg)}to{transform:perspective(900px) rotateY(54deg) rotate(18deg)}}
@keyframes plie-g{from{transform:rotate(8deg)}to{transform:rotate(-18deg)}}
@keyframes plie-d{from{transform:rotate(-7deg)}to{transform:rotate(18deg)}}
@keyframes porte{from{transform:translateY(-1%) rotate(1deg)}to{transform:translateY(2.5%) rotate(-2deg)}}
@keyframes hoche{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}
@keyframes remue{from{transform:rotate(34deg) scale(.94,.9)}to{transform:rotate(24deg) scale(1.12,1.1)}}   /* queue tournée vers la gauche, remontée vers les ailes */
.papillon.en-vol{position:fixed;bottom:auto;z-index:120;translate:none;rotate:none;pointer-events:none;will-change:transform;transform-origin:62% 48%}
/* onde de lumière fuchsia de la gerbe (refus) : elle s'élargit d'un coup puis s'efface */
.onde{position:fixed;z-index:118;border-radius:50%;pointer-events:none;translate:-50% -50%;background:radial-gradient(circle,#fff6 0,#f0549eaa 18%,#b77bff55 45%,transparent 70%);opacity:0;animation:onde .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes onde{0%{opacity:1;scale:.1}100%{opacity:0;scale:1}}
.poudre{position:fixed;z-index:119;border-radius:50%;pointer-events:none;opacity:0;animation:poudre var(--d) ease-out forwards}
@keyframes etincelle{from{opacity:.55}to{opacity:1}}
@keyframes flamme{0%{transform:scale(.97,1) skewY(-2deg)}100%{transform:scale(1.05,1.02) skewY(3deg)}}
@keyframes scintille{to{filter:brightness(2.4)}}
@keyframes poudre{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}
@media (max-width:560px){
  .papillon-zone{right:0;width:134px;height:130px}.papillon{left:22px;width:88px}
  .cookies{left:12px;right:12px;bottom:12px;width:auto;padding:14px}
  .cookies-msg{font-size:.8rem;margin:0 0 10px}
  .cookies-texte{display:block}.cookies-boutons{grid-template-columns:1fr 1fr;min-width:0}   /* téléphone : en bloc, boutons côte à côte */
}
@media (prefers-reduced-motion:reduce){.papillon,.papillon *,.cookies,.poudre,.onde{animation:none!important;transition:none!important}}
/* lien « Gérer les cookies » du pied de page : un bouton qui a l'air d'un lien */
.lien-cookies{background:none;border:0;padding:0;font:inherit;color:var(--doux);cursor:pointer;text-align:left;transition:color .3s}
.lien-cookies:hover{color:var(--rose)}
/* =====================================================================================
   03/11/2026 : un seul site pour organisationbycharlotte.com. Accompagnement sur mesure au cœur,
   sites et applis, skills disponibles, page /liens, pages légales du texte maître.
   Mêmes couleurs, mêmes polices ; tout marche aussi dans les sections blanches (.clair).
   ===================================================================================== */
/* bouton principal dans le haut des pages intérieures */
.page-hero .cta-zone{margin-top:3vh}
/* « Ça te parle ? » et listes simples à puce fuchsia */
.probleme{max-width:900px}
.coince{list-style:none;margin:0 0 28px;padding:0}
.coince li{position:relative;padding:16px 0 16px 30px;border-bottom:1px solid var(--ligne);color:var(--texte);font-size:1.05rem}
.coince li::before{content:"";position:absolute;left:4px;top:1.55em;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.duo .coince li{font-size:.98rem;padding:11px 0 11px 28px}
/* les quatre formules : 4 côte à côte sur grand écran, 2 x 2 sur écran moyen, 1 par ligne sur téléphone */
.formules{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media (max-width:1200px){.formules{grid-template-columns:1fr 1fr}}
.formule{display:flex;flex-direction:column;padding:30px 28px;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon)}
.formule.en-avant{border-color:#f0549e88;box-shadow:0 30px 70px -40px #f0549e66}
.formule .f-nom{font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin:0 0 14px}
.formule .f-prix{font-family:var(--titres);font-weight:300;font-size:clamp(2.2rem,3.4vw,2.8rem);line-height:1;margin:0 0 8px;color:var(--texte)}
.formule .f-prix small{display:block;font-family:'Inter',sans-serif;font-size:.78rem;color:var(--doux);margin-bottom:6px}
.formule .f-duree{font-size:.86rem;color:var(--doux);margin:0 0 18px}
.formule .f-pour{font-family:var(--titres);font-size:1.2rem;font-weight:300;margin:0 0 16px;color:var(--texte)}
.formule ul{margin:0;padding:16px 0 0 18px;border-top:1px solid var(--ligne);color:var(--doux);font-size:.92rem}
.formule li{margin:0 0 8px}
.formules-note{max-width:80ch;margin-top:26px}
@media (max-width:700px){.formules{grid-template-columns:1fr}}
/* qui t'accompagne */
.qui{display:flex;gap:26px;align-items:center;max-width:820px}
.qui img{width:96px;height:96px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 25%;border:1px solid var(--ligne-2)}
.qui p{color:var(--doux);margin:0 0 12px}
@media (max-width:560px){.qui{flex-direction:column;align-items:flex-start}}
/* skills disponibles */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.skill{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden}
.skill .navigateur{border-radius:0;box-shadow:none}
.skill .navigateur img{aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.skill-texte{display:flex;flex-direction:column;align-items:flex-start;padding:28px 28px 32px;flex:1}
.skill-texte p{color:var(--doux)}
.skill-texte .cta{margin-top:auto}
.skill-texte .mini-etapes{font-size:.92rem}
.skill-badge{display:inline-block;font-size:.66rem!important;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte)!important;border:1px solid #f0549e88;border-radius:99px;padding:5px 12px;margin:0 0 16px}
.skill h3{font-size:1.9rem;margin:0 0 10px}
@media (max-width:820px){.skills{grid-template-columns:1fr}}
/* l'appli de live : deux téléphones */
.appli-visuel{margin:0}
.appli-visuel img{width:100%;max-width:560px;margin-inline:auto;filter:drop-shadow(0 30px 40px #00000066)}
/* page /liens */
.bio{padding-bottom:clamp(60px,8vw,110px)}
.bio-wrap{max-width:620px;text-align:center}
.bio-photo{width:112px;height:112px;margin:2vh auto 22px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:1px solid #f0549e88}
.bio h1{margin-inline:auto}
.bio .intro{margin-inline:auto}
.liens-bio{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;text-align:left}
.lien-bio{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;padding:18px 22px;background:var(--carte);border:1px solid var(--ligne-2);border-radius:var(--rayon);text-decoration:none;transition:border-color .3s,transform .3s var(--ease)}
.lien-bio:hover{border-color:#f0549e99;transform:translateY(-2px)}
.lien-bio .arrow{grid-row:1/3;grid-column:2;color:var(--rose)}
.lien-titre{font-family:var(--titres);font-size:1.25rem;font-weight:400;color:var(--texte)}
.lien-detail{font-size:.86rem;color:var(--doux)}
.lien-bio.principal{background:var(--ivoire);border-color:var(--ivoire)}
.lien-bio.principal .lien-titre,.lien-bio.principal .lien-detail,.lien-bio.principal .arrow{color:var(--nuit)}
.reseaux-bio{list-style:none;margin:34px 0 0;padding:0;display:flex;justify-content:center;gap:12px}
.reseaux-bio a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne-2);color:var(--doux);transition:color .3s,border-color .3s}
.reseaux-bio a:hover{color:var(--rose);border-color:var(--rose)}
.reseaux-bio svg{width:20px;height:20px;fill:currentColor}
/* pages légales du texte maître */
.legal ul{padding-left:20px}.legal li{margin:0 0 8px}
.legal a{color:var(--texte)}
.legal .formulaire{margin:18px 0 26px;padding:20px 24px;border:1px solid var(--ligne-2);border-radius:var(--rayon);background:var(--carte);font-size:.92rem}
.legal .lien-cookies{color:var(--texte);text-decoration:underline}
.legal .a-completer{background:#fff3a0;color:#5a4a00;padding:0 .3em;border-radius:3px}.skill .navigateur img.entiere{object-fit:contain;background:#141217}
.lien-titre{line-height:1.25;margin-bottom:4px}.lien-detail{line-height:1.45}

/* =====================================================================================
   03/11/2026 : corrections téléphone (vues par Charlotte sur son téléphone).
   ===================================================================================== */
/* 1. En-tête opaque (couleur nuit du site) et sans flou. Le flou (backdrop-filter) faisait de l'en-tête le « cadre » du menu
   téléphone (position:fixed) : le menu fermé, poussé à droite, élargissait toute la page à 750 px (défilement de côté,
   bandeau cookies hors de l'écran) et le menu ouvert n'avait presque pas de hauteur, donc pas de fond. */
header.site{background:var(--nuit);-webkit-backdrop-filter:none;backdrop-filter:none}
header.site.scrolled{box-shadow:0 8px 24px -12px #000c}
body{overflow-x:clip}   /* garde-fou : plus jamais de défilement de côté */
@media (max-width:940px){
  .links{top:78px;right:0;bottom:auto;left:0;height:calc(100vh - 78px);height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--nuit);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
  .links.open{visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  .links li{width:100%}
  .links a{display:inline-block;padding:6px 0}
}
/* 2. Bandeau cookies sur téléphone : en bas, compact, sans phénix (cookies.js ne le pose pas), boutons de 44 px */
@media (max-width:560px){
  .cookies{left:8px;right:8px;bottom:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 96px);overflow-y:auto;padding:12px 14px 14px}
  .cookies .papillon-zone{display:none}
  .cookies .h3{font-size:.95rem;margin:0 0 4px}
  .cookies-msg{font-size:.78rem;line-height:1.4;margin:0 0 10px}
  .cookies-texte{display:block}
  .cookies-boutons{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
  .cookies-boutons button{min-height:44px;font-size:.82rem;padding:8px 6px}
}
/* 3. Téléphone et tablette : blocs stables au défilement (la 3D est coupée dans profondeur.js), apparitions plus courtes,
   pas de flou derrière les étiquettes des offres (lourd à redessiner pendant le défilement) */
@media (max-width:900px){
  .js .fade,.js .stagger>*{transform:translateY(12px);transition:opacity .6s,transform .6s var(--ease)}
  .js .fade.vu,.js .stagger.vu>*{transform:none}
  .js .milohy.fade,.js .portable-photo.fade{transform:translateY(12px)}
  .js .milohy.fade.vu,.js .portable-photo.fade.vu{transform:none}
  .offer .who{-webkit-backdrop-filter:none;backdrop-filter:none;background:#101013d9}
  .offers,.chiffres li,.etape,.couvertures figure,.faq details,.head h2{transform:none!important}
  /* les 4 réponses du haut de page (qui changent seules toutes les 5 s) sont superposées dans la même case :
     la plus haute fixe la hauteur, donc toute la page ne saute plus de 40 px à chaque changement */
  .reponses>.reponse{grid-area:1/1}
  .reponses>.reponse[hidden]{display:grid;visibility:hidden}
}