/* Nova — styles propres à la page (après base.css et projet.css) */
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Extralight.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chillax";src:url("../../fonts/nova/Chillax-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../../fonts/nova/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../../fonts/nova/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}


/* =====================================================================
   UNIVERS NOVA — la nuit (#1B074C), le bleu de la marque (#212D8F), la crème (#FFEBD0), un éclat bleu-violet
   Mêmes composants que les autres dossiers (repères, bascule, apparition), passés en encre claire.
   ===================================================================== */
html{color-scheme:dark;overflow-x:clip}body{background:#F1EFEA}
.page-projet{--fond-projet:#1B074C;--texte-projet:#FFEBD0;--accent-projet:#9AA6FF;--trait-projet:rgba(255,235,208,.24);--doux-projet:#C9BFD9;--tuile:#1B074C;--ink:255,235,208;--bleu:#212D8F;--eclat:#9AA6FF}
.planche{color:var(--texte-projet)}
.mono{color:inherit;font-size:max(11px,calc(11px*var(--k)))}
.bloc-tete,.chap .num,figure.f figcaption .leg,.credit{color:rgba(255,235,208,.7)!important}
/* --- composants communs des dossiers (repères, bascule, rangées, apparitions) --- */
/* --- hero --- */
.p-hero{height:min(calc(100vh - var(--barre) - var(--cadre-l)),760px);min-height:560px}
.p-hero::after{display:none}
.p-hero .fondu{position:absolute;top:0;bottom:0;right:0;width:68%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 50%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 50%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%);mask-composite:intersect}
.p-hero .fondu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--doux);animation:none}
.p-hero .fondu img.actif{opacity:1}
.p-hero .fondu img:first-child{animation:p-zoom 2.4s var(--machine) both}
.p-hero .p-titre{font-size:min(11.5vw,170px);white-space:nowrap;max-width:none}
.p-hero .h-rp{display:flex;gap:10px;align-items:center}
.p-hero .h-rp i{display:inline-block;width:18px;height:2px;background:rgba(var(--ink),.25);transition:background .4s}
.p-hero .h-rp i.actif{background:var(--texte-projet)}

/* --- intro --- */
.p-meta dl{border-top-color:var(--texte-projet)}
.p-meta dt{color:var(--doux-projet)}
.p-texte p+p{color:var(--texte-projet);font-size:16px}
.p-texte .lab{color:var(--doux-projet)}

/* --- chapitre (une quête) --- */
.chap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:120px var(--m) 64px;border-top:1px solid var(--texte-projet)}
.chap .num{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--doux-projet);margin-bottom:26px}
.chap h2{grid-column:1/8;font-weight:900;font-stretch:25%;text-transform:uppercase;line-height:.84;font-size:min(8vw,112px);text-wrap:balance}
.chap h2 span{color:var(--accent-projet)}
.chap p{grid-column:9/13;align-self:end;font-size:17px;line-height:1.55}

/* --- bloc --- */
.bloc{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.bloc-tete{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--trait-projet);padding-top:10px;margin-bottom:30px;color:var(--doux-projet)}
.bloc .tx{grid-column:1/5;align-self:start}
.bloc .vis{grid-column:5/13;min-width:0}
.bloc.inv .tx{grid-column:9/13;grid-row:2}
.bloc.inv .vis{grid-column:1/9;grid-row:2}
.bloc.plein .tx{grid-column:1/6;margin-bottom:34px}
.bloc.plein .vis{grid-column:1/-1}
.tx h3{font-size:34px;font-weight:800;font-stretch:32%;text-transform:uppercase;line-height:.92;margin-bottom:16px;text-wrap:balance}
.tx p{font-size:16px;line-height:1.6;max-width:40ch}
.tx p+p{margin-top:12px}
.tx .aide{display:flex;align-items:flex-start;gap:8px;margin-top:22px;color:var(--accent-projet)}
.tx .aide::before{content:"";width:18px;height:1px;background:currentColor;flex:none;margin-top:.62em}

.monte{opacity:0;transform:translateY(22px);transition:opacity .9s var(--machine),transform 1.1s var(--machine)}
.monte.vu{opacity:1;transform:none}
figure.f.rv::before{clip-path:inset(0 100% 100% 0);transition:clip-path 1.1s var(--machine)}
figure.f.rv::after,figure.f.rv figcaption{opacity:0;transition:opacity .6s var(--doux) .5s}
figure.f.rv>.tuile,figure.f.rv>.x-comparer,figure.f.rv>.x-table{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--machine) .25s}
figure.f.rv.vu::before{clip-path:inset(0)}
figure.f.rv.vu::after,figure.f.rv.vu figcaption{opacity:1}
figure.f.rv.vu>.tuile,figure.f.rv.vu>.x-comparer,figure.f.rv.vu>.x-table{clip-path:inset(0)}

/* tuiles */
.tuile{position:relative;overflow:hidden}
.tuile img{display:block;width:100%;height:auto}
/* repère d'imprimeur (DA du site, .repere) : filet tireté + traits de coupe aux 4 coins + étiquettes mono .rk / .rd */
figure.f{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;--cdc:rgba(var(--ink),.6)}
figure.f::before{content:"";position:absolute;inset:10px;border:1px dashed var(--trait-projet);pointer-events:none;z-index:2}
figure.f::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(var(--cdc),var(--cdc)) left 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 top 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px top 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) left 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) left 10px bottom 0/1px 6px no-repeat,
  linear-gradient(var(--cdc),var(--cdc)) right 0 bottom 10px/6px 1px no-repeat,linear-gradient(var(--cdc),var(--cdc)) right 10px bottom 0/1px 6px no-repeat}
figure.f figcaption{position:absolute;inset:0;z-index:3;pointer-events:none}
figure.f figcaption .leg{position:absolute;left:34px;top:-4px;line-height:1;white-space:nowrap}
figure.f figcaption .seg{position:absolute;right:30px;top:-12px;pointer-events:auto;background:var(--fond-projet)}
.cadre{display:flex;justify-content:flex-start}
.bloc.inv .cadre{justify-content:flex-end}
.cadre>figure{width:var(--w,100%);max-width:100%}


/* rangée justifiée */
.rang{display:flex;gap:var(--gouttiere);align-items:flex-start}
.rang>figure{flex:var(--r) 1 0;min-width:0}

/* --- bascule « en situation / à plat » : sur place, sans fenêtre --- */
.scene-b{position:relative;transition:height .75s var(--machine)}
.scene-b>.mk{display:block;width:100%;height:auto;transition:opacity .5s var(--doux),transform .8s var(--machine),filter .5s}
.scene-b>.pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:22px;background:var(--tuile);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--machine)}
.scene-b>.pl img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 10px 24px rgba(var(--ink),.16);transform:translateY(-18px) rotate(-1.2deg);opacity:0;transition:transform .9s var(--machine) .1s,opacity .4s .1s}
.scene-b>.pl img+img{transform:translateY(-18px) rotate(1.4deg)}
.x-note{transition:opacity .4s}
.bascule.plat .scene-b>.mk{opacity:0;transform:scale(.96);filter:blur(2px)}
.bascule.plat .scene-b>.pl{clip-path:inset(0)}
.bascule.plat .scene-b>.pl img{transform:none;opacity:1}
.seg{display:inline-flex;border:1px solid rgba(var(--ink),.35);border-radius:999px;padding:2px;gap:2px;flex:none}
.seg button{border:0;background:none;border-radius:999px;padding:3px 10px;min-height:22px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);cursor:pointer;transition:background .35s,color .35s}
.seg button[aria-pressed="true"]{background:var(--texte-projet);color:var(--fond-projet)}
.seg button:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}

/* citation */
.p-citation{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gouttiere);padding:0 var(--m) 96px}
.p-citation small{grid-column:1/-1;border-top:1px solid var(--trait-projet);padding-top:10px;margin:0 0 26px;color:rgba(var(--ink),.72)}
.p-citation p,.p-citation.longue p{grid-column:1/10;font-size:min(5vw,64px);line-height:.92;color:var(--texte-projet)}

/* note manuscrite */
.x-note{position:absolute;font-family:var(--hand);color:var(--rouge);font-size:32px;line-height:.9;white-space:nowrap;z-index:3;pointer-events:none}
.x-note svg{position:absolute;overflow:visible}.x-note path{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round}

/* ===================== composants interactifs ===================== */
.x-btn{background:none;border:1px solid var(--trait-projet);color:var(--texte-projet);min-height:40px;min-width:40px;padding:9px 14px;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s,background .3s,color .3s}
.x-btn:hover{border-color:var(--texte-projet)}
.x-btn.plein{background:var(--texte-projet);color:var(--fond-projet);border-color:var(--texte-projet)}
.x-btn:focus-visible{outline:2px solid var(--accent-projet);outline-offset:2px}
.x-btn .ar{width:16px;height:10px}


/* --- hero : la nuit étoilée, la carte à droite --- */
.p-hero .p-titre{font-size:min(21vw,300px)}
.p-hero .ciel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.p-hero .fondu img:first-child{animation:p-zoom 2.4s var(--machine) both}

/* --- intro --- */
.p-meta dl{border-top-color:var(--texte-projet)}
.p-meta dt{color:var(--doux-projet)}
.p-texte p+p{color:var(--texte-projet);font-size:16px}
.p-texte .lab{color:var(--doux-projet)}

/* --- le symbole qui s'assemble --- */
.astre{position:relative;display:flex;align-items:center;justify-content:center;padding:64px 30px 84px;--k:1.2;--bl:#3D53F4}
.equation{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px)}
.astre .signes{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px)}
.astre .signes button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--bl);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--machine),color .4s}
.astre .signes button.on{opacity:1;transform:none}
.astre .ic-w{height:calc(78px*var(--k));display:flex;align-items:center}
.astre svg.ic{height:calc(var(--h)*var(--k)*1px);width:auto;overflow:visible}
.astre .signes button span{font-family:"Chillax",var(--flex);font-weight:600;font-size:17px;color:var(--doux-projet);transition:color .4s}
.astre .signes button.actif,.astre .signes button:focus-visible{color:var(--texte-projet)}
.astre .signes button.actif span{color:var(--texte-projet)}
.astre .signes button:focus-visible{outline:2px solid var(--eclat);outline-offset:6px;border-radius:6px}
.astre .op{position:relative;flex:none;width:16px;height:16px;margin-bottom:29px;color:var(--bl);opacity:0;transition:opacity .5s}
.astre .op::before,.astre .op::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.5px;margin-top:-1.25px;background:currentColor}
.astre .op.plus::after{transform:rotate(90deg)}
.astre .op.egal{margin:0 6px}
.astre .op.egal::before{top:32%}.astre .op.egal::after{top:68%}
.astre .op.on{opacity:1}
.astre .sym-w{position:relative;flex:none;width:calc(170px*var(--k));line-height:0}
.astre svg.sym{position:relative;z-index:1;width:100%;height:auto;overflow:visible;color:var(--texte-projet)}
.astre svg.sym path{transform-box:fill-box;transform-origin:center;transition:color .4s var(--doux)}
.astre .coeur{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;margin:-29% 0 0 -29%;border-radius:50%;background:radial-gradient(circle,#FFEBD0 52%,rgba(255,235,208,.35) 64%,rgba(255,235,208,0) 74%);opacity:0;transform:scale(.3);transition:opacity .45s var(--doux),transform .7s var(--machine)}
.astre .coeur.on{opacity:1;transform:none}
.astre .halo{position:absolute;left:50%;top:50%;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;background:radial-gradient(circle,rgba(154,166,255,.5) 0%,rgba(33,45,143,.32) 32%,transparent 66%);opacity:0;transform:scale(.4);pointer-events:none}
.astre .rejouer{position:absolute;right:24px;bottom:22px}

/* --- logotype, couleurs, typo --- */
.logo-l{color:var(--texte-projet);padding:36px 30px;display:flex;justify-content:center}
.logo-l svg{width:min(470px,100%);height:auto}
.nuancier{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.nuancier div{height:120px;border:1px solid var(--trait-projet);display:flex;align-items:flex-end;padding:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.vis>*+*{margin-top:var(--gouttiere)}

/* --- pictogrammes --- */
.pictos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gouttiere);color:var(--texte-projet)}
.pictos .p{display:flex;align-items:center;justify-content:center;height:190px}
.pictos svg{height:120px;width:auto;transition:transform .7s var(--machine),filter .7s}
.pictos .p:hover svg{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 0 14px rgba(154,166,255,.65))}

/* --- le téléphone qu'on utilise --- */
.proto{display:grid;grid-template-columns:auto minmax(0,380px);justify-content:center;gap:clamp(40px,6vw,96px);align-items:center}
.tel{position:relative;width:310px;aspect-ratio:560/1218;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2a2550,#0c0a1c 60%);box-shadow:0 0 0 1px rgba(255,235,208,.14),0 40px 80px rgba(5,0,25,.6),0 0 90px rgba(85,102,247,.18)}
.tel .ecran{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#1B074C}
.tel .ecran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);filter:blur(10px);transition:opacity .55s var(--doux),transform .8s var(--machine),filter .6s var(--doux)}
.tel .ecran img.on{opacity:1;transform:none;filter:none}
.tel .zone{position:absolute;border:0;background:none;cursor:pointer;border-radius:999px;z-index:3}
.tel .zone::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1.5px solid rgba(255,235,208,.75);opacity:0;animation:appel 2.4s var(--doux) infinite}
.tel .zone:focus-visible{outline:2px solid var(--eclat);outline-offset:3px}
@keyframes appel{0%{opacity:0;transform:scale(.9)}35%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
.onglets{display:flex;flex-direction:column;gap:0;max-width:360px;margin-top:34px}
.fiche{display:flex;flex-direction:column;gap:22px}
.f-n{font-size:11px;letter-spacing:.08em;color:var(--doux-projet)}.f-n b{color:var(--eclat);font-weight:500}
.f-txt{position:relative;display:grid}
.f-it{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .45s var(--doux),transform .6s var(--machine);pointer-events:none}
.f-it.on{opacity:1;transform:none}
.f-it p{margin:0}
.f-t{font-family:"Chillax",var(--flex);font-weight:600;font-size:clamp(34px,3.4vw,52px);line-height:1;letter-spacing:-.015em;align-self:start}
.f-d{font-size:17px;line-height:1.5;color:var(--doux-projet);margin-top:16px!important;max-width:30ch}
.f-nav{display:flex;align-items:center;gap:10px}
.f-nav .ar{width:20px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;display:block}
.f-pts{display:flex;gap:6px;margin-left:12px}.f-pts i{width:6px;height:6px;border-radius:50%;background:var(--trait-projet);transition:background .3s,transform .3s}.f-pts i.on{background:var(--texte-projet);transform:scale(1.3)}
.onglets button{all:unset;cursor:pointer;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--trait-projet);color:var(--doux-projet);transition:color .3s,background .3s}
.onglets button:last-child{border-bottom:1px solid var(--trait-projet)}
.onglets button b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em}
.onglets button span{font-size:17px;font-weight:600;color:inherit}
.onglets button em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.onglets button[aria-pressed="true"]{color:var(--texte-projet);background:rgba(154,166,255,.08)}
.onglets button[aria-pressed="true"] b{color:var(--eclat)}
.onglets button[aria-pressed="true"] em{opacity:.8}
.onglets button:focus-visible{outline:2px solid var(--eclat);outline-offset:2px}


/* --- spécimen typographique vivant --- */
.specimen{display:flex;flex-direction:column;color:var(--texte-projet);padding:30px 36px 26px;font-family:"Chillax",var(--flex)}
.sp-haut{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:end;border-bottom:1px solid var(--trait-projet);padding-bottom:22px}
.sp-aa{font-size:clamp(100px,10vw,160px);line-height:.78;font-weight:var(--w);letter-spacing:-.02em;transition:font-weight .3s}
.sp-nom{display:flex;align-items:baseline;gap:12px;font-size:26px;font-weight:600}
.sp-nom small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-projet);font-weight:400}
.sp-nom.m{font-family:"Space Mono",var(--mono);font-size:19px;font-weight:700}
.sp-poids{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px}
.sp-poids button{all:unset;cursor:pointer;font-size:17px;color:var(--doux-projet);border-bottom:1px solid transparent;padding:2px 0;transition:color .25s,border-color .25s}
.sp-poids button:nth-child(1){font-weight:200}.sp-poids button:nth-child(2){font-weight:300}.sp-poids button:nth-child(3){font-weight:400}.sp-poids button:nth-child(4){font-weight:500}.sp-poids button:nth-child(5){font-weight:600}.sp-poids button:nth-child(6){font-weight:700}
.sp-poids button:hover,.sp-poids button:focus-visible,.sp-poids button[aria-pressed="true"]{color:var(--texte-projet);border-color:var(--texte-projet)}
.sp-l{margin:18px 0 20px;font-size:clamp(30px,3.2vw,46px);line-height:1.05;font-weight:var(--w);letter-spacing:-.01em;outline:0;transition:font-weight .3s;caret-color:var(--eclat)}
.sp-l:focus{text-decoration:underline 1px var(--trait-projet);text-underline-offset:8px}
.sp-bas{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;border-top:1px solid var(--trait-projet);padding-top:20px}
.sp-num{display:block;margin-top:8px;font-family:"Space Mono",var(--mono);font-size:clamp(18px,2vw,26px);letter-spacing:.02em}
.sp-c{display:flex;gap:8px}
.sp-c span{width:92px;height:92px;display:flex;flex-direction:column;justify-content:flex-end;padding:9px;background:var(--c);color:var(--t,var(--texte-projet));border:1px solid var(--trait-projet);font-family:"Space Mono",var(--mono);font-size:10px;letter-spacing:.04em}
.sp-c b{font-family:"Chillax",var(--flex);font-size:14px;font-weight:600;letter-spacing:0}

/* --- la carte en 3D --- */
.carte-s{display:grid;grid-template-columns:100%;place-items:center;padding:74px 30px 84px;background:radial-gradient(60% 70% at 50% 45%,rgba(85,102,247,.22),transparent 70%);cursor:pointer;touch-action:pan-y}
.c3d{width:min(520px,86%);aspect-ratio:470/291;perspective:1500px;container-type:inline-size;position:relative}
.c3d::after{content:"";position:absolute;left:8%;right:8%;bottom:-16%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(5,0,25,.75),transparent);filter:blur(6px);z-index:-1}
.c-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;border-radius:13.6%/22%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(154,166,255,.35),0 30px 60px rgba(5,0,25,.55)}
.face img{width:100%;height:100%;display:block}
.face .reflet{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 56%,transparent 64%);background-size:250% 100%;background-position:var(--gx,50%) 0;mix-blend-mode:screen;pointer-events:none}
.verso{transform:rotateY(180deg);background:linear-gradient(160deg,#300E93 0%,#260B78 50%,#1D0858 100%);color:#FFEBD0;font-family:"Space Mono",var(--mono)}
.v-piste{position:absolute;left:0;right:0;top:10%;height:17%;background:#0C0424}
.v-sign{position:absolute;left:6.4%;top:36%;width:60%;height:12.5%;display:flex;align-items:center;justify-content:flex-end;background:#FFEBD0;border-radius:.8cqw}
.v-motif{position:absolute;inset:0 22% 0 0;border-radius:.8cqw 0 0 .8cqw;background:repeating-linear-gradient(-45deg,rgba(33,45,143,.13) 0 .5cqw,transparent .5cqw 1.4cqw)}
.v-cvv{position:relative;padding:0 3.4cqw;color:#1B074C;font-size:3.4cqw;letter-spacing:.2em}
svg.v-sym{position:absolute;right:-6%;bottom:-24%;width:46%;height:auto;color:#FFEBD0;opacity:.07}
.v-txt{position:absolute;left:6.4%;top:56%;width:58%;margin:0;font-size:2.15cqw;line-height:1.45;color:rgba(255,235,208,.72)}
.v-sig{position:absolute;left:6.4%;bottom:8.5%;margin:0;font-family:"Chillax",var(--flex);font-weight:500;font-size:4.4cqw;letter-spacing:-.01em}

/* --- motion : deux films joués en direct --- */
.mo{position:relative;width:100%;overflow:hidden;background:#1B074C}
.mo-scene{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.mo-svg{display:block}
.mo-barre{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,235,208,.12);z-index:3}
.mo-barre i{position:absolute;inset:0;background:var(--texte-projet);transform-origin:0 0;transform:scaleX(0)}
.mo-f .seg{right:30px}
svg.mo-src{display:none}
/* story */
.st{background:radial-gradient(90% 60% at 50% 40%,#2A0F78,#1B074C 60%,#0E0330);font-family:"Chillax",var(--flex);color:#FFEBD0}
.st>*{position:absolute}
.st-ciel{inset:0;width:100%;height:100%}
.st-jar{inset:0}
.st-jar span{position:absolute;left:0;top:0;white-space:nowrap;font-family:"Space Mono",var(--mono);font-size:44px;text-transform:uppercase;letter-spacing:.02em;opacity:0;will-change:transform}
.st-q{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:600;font-size:132px;line-height:1;letter-spacing:-.02em}
.st-q span{display:block;opacity:0}
.st-halo{left:50%;top:50%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(154,166,255,.6),rgba(33,45,143,.35) 35%,transparent 68%);opacity:0}
svg.st-sym{left:50%;top:50%;width:300px;height:auto;overflow:visible;color:#FFEBD0;opacity:0;filter:drop-shadow(0 0 30px rgba(255,235,208,.7))}
.st-flash{inset:0;background:radial-gradient(circle at 50% 50%,#fff 0,#FFEBD0 30%,rgba(255,235,208,.85) 60%,rgba(255,235,208,.6));opacity:0}
.st-calme{left:50%;top:50%;font-weight:300;font-size:150px;white-space:nowrap;opacity:0}
.st-cap{left:0;right:0;top:170px;height:200px}
.st-cap span{position:absolute;left:80px;right:80px;text-wrap:balance;top:0;text-align:center;font-weight:600;font-size:76px;line-height:1.05;letter-spacing:-.015em;opacity:0}
.st-tel{left:50%;top:430px;width:600px;height:1305px;padding:16px;border-radius:84px;background:linear-gradient(145deg,#2a2550,#0c0a1c 60%);box-shadow:0 0 0 2px rgba(255,235,208,.16),0 60px 120px rgba(5,0,25,.6),0 0 160px rgba(85,102,247,.3);opacity:0;transform-origin:50% 0}
.st-tel .ecran{position:relative;width:100%;height:100%;border-radius:68px;overflow:hidden;background:#1B074C}
.st-tel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-carte{left:50%;top:50%;width:860px;aspect-ratio:470/291;opacity:0;filter:drop-shadow(0 50px 70px rgba(5,0,25,.7))}
.st-carte img{width:100%;height:100%;border-radius:13.6%/22%;display:block;box-shadow:0 0 0 2px rgba(154,166,255,.35)}
.st-fin{left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px}
.st-fin>*{opacity:0}
svg.st-logo{width:760px;height:auto;color:#FFEBD0}
.st-fin p{margin:0;font-weight:500;font-size:68px;letter-spacing:-.01em}
.st-cta{margin-top:30px;padding:30px 56px;border-radius:999px;background:#FFEBD0;color:#1B074C;font-weight:600;font-size:46px}
.st .ui{left:0;right:0;top:0;padding:34px 30px;font-family:var(--flex)}
.ui .barres{display:flex;gap:8px}
.ui .barres b{flex:1;height:6px;border-radius:3px;background:rgba(255,235,208,.32);overflow:hidden}
.ui .barres i{display:block;height:100%;background:#FFEBD0;transform-origin:0 0;transform:scaleX(0)}
.ui .qui{display:flex;align-items:center;gap:18px;margin-top:26px;font-size:34px}
.ui .av{width:72px;height:72px;border-radius:50%;background:#212D8F;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,235,208,.5)}
.ui .av svg{width:44px;height:auto;color:#FFEBD0}
.ui .qui em{font-style:normal;font-size:28px;opacity:.7}

.rang[style*='--rs']{max-width:calc(var(--rs)*680px + (var(--n) - 1)*var(--gouttiere));margin-inline:auto}
/* indications : souris ou doigt */
.doigt,.court{display:none}
@media (hover:none){.souris{display:none}.doigt{display:inline}}
.nw{white-space:nowrap}
.tx p,.p-texte p,.chap p{text-wrap:pretty}
.vis>*+*{margin-top:calc(var(--gouttiere) + 22px)}

/* citation */
.p-citation p span{color:var(--eclat)}

.credit{padding:0 var(--m) 60px;color:var(--doux-projet)}

@media (max-width:900px){
  .p-hero .fondu{width:100%;opacity:.55}
  .p-hero .p-titre{font-size:clamp(80px,26vw,170px)}
  .p-hero .h-rp{display:none}
  .chap{padding:72px var(--m) 48px}.chap h2,.chap p{grid-column:1/-1}.chap p{margin-top:20px}
  .bloc{padding-bottom:64px}.bloc .tx,.bloc .vis,.bloc.inv .tx,.bloc.inv .vis{grid-column:1/-1!important;grid-row:auto!important}
  .bloc .tx{margin-bottom:24px}
  .p-citation p,.p-citation.longue p{grid-column:1/-1;font-size:34px}
  .rang{flex-direction:column}.rang>figure{flex:none;width:100%}
  .pictos{grid-template-columns:repeat(3,1fr)}.pictos .p{height:130px}.pictos svg{height:84px}
  .nuancier div{height:80px}
  .proto{grid-template-columns:1fr;justify-items:center;gap:28px}.tel{width:min(280px,78vw)}.onglets{width:100%;max-width:none;margin:24px 0 8px}.fiche{width:100%;gap:14px}.f-t{font-size:32px}.f-d{margin-top:10px!important}
  .x-note{display:none}
  .chap .num{flex-direction:column;align-items:flex-start;gap:4px}
  .astre{--k:.62;padding:40px 12px 76px}.equation{flex-direction:column;gap:18px}.astre .signes{gap:8px}.astre .signes button span{font-size:13px}.astre .op{width:11px;height:11px;margin-bottom:24px}.astre .op.egal{transform:rotate(90deg);margin:0}.astre .sym-w{width:180px}.astre .halo{width:360px;height:360px;margin:-180px}
  .rang{gap:40px}.rang[style*='--rs']{max-width:none}
  .long{display:none}.court{display:inline}
  .carte-s{padding:52px 14px 62px}.c3d{width:92%}
  .sp-haut{grid-template-columns:1fr;gap:14px}.sp-bas{grid-template-columns:1fr}.sp-c span{width:auto;flex:1;height:76px}
  .specimen{padding:26px 22px 24px}
  .rang.motions{flex-direction:row;flex-wrap:wrap}.rang.motions>figure{width:100%}
  .rang.motions>figure:first-child{width:min(100%,360px);margin:0 auto}
}
@media (max-width:600px){
  .p-hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .p-hero .fondu{position:relative;width:100%;height:68vw;opacity:1;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 40%);mask-image:linear-gradient(0deg,transparent 0%,#000 40%)}
  .p-hero .h-in{position:relative;left:auto;right:auto;bottom:auto;padding:22px var(--m) 30px}
}
@media (prefers-reduced-motion:reduce){.monte{opacity:1;transform:none}.tel .zone::after{animation:none}}