/* Noveria · landing « Le produit raconté au défilement » (maquette e-histoire)
   Une seule scène épinglée : l'ordinateur (ou le téléphone) raconte le produit, le défilement tient l'horloge. */

:root{
  --bleu:#1F6FEB; --bleu2:#3B8BFF; --bleu3:#7FB3FF; --bleu-f:#1558C7;
  --marine:#0B1E4F; --encre:#16264A; --gris:#5B6B8A; --gris2:#8593AD;
  --ciel:#EEF5FF; --ciel2:#F6FAFF; --ligne:#DCE7F7; --blanc:#fff;
  --vert:#12915A; --vert-f:#E7F7EF; --ambre:#9A5B00; --ambre-f:#FFF4DB; --rouge:#D93A3F; --rouge-f:#FDECEC;
  --bordeaux:#5B1437;
  --nuit:#050C22;
  --r:22px; --r-s:14px;
  --ombre:0 1px 2px rgba(11,30,79,.06),0 12px 32px -12px rgba(11,30,79,.18);
  --ombre-l:0 2px 6px rgba(11,30,79,.06),0 40px 80px -30px rgba(11,30,79,.35);
  --nav-h:68px;
  --gauche:max(32px, calc((100vw - 1340px) / 2));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:#fff;color:var(--encre);font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:normal}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--ciel);color:var(--bleu-f);padding:.1em .4em;border-radius:6px}

.evitement{position:absolute;left:-999px;top:8px;z-index:100;background:var(--marine);color:#fff;padding:10px 14px;border-radius:10px}
.evitement:focus{left:8px}
:focus-visible{outline:3px solid var(--bleu2);outline-offset:3px;border-radius:8px}
.wrap{width:min(1240px,100% - 2*var(--gauche));margin:0 auto}

/* Slogan de marque */
.slogan{font-weight:400;letter-spacing:-.005em;color:var(--marine);white-space:nowrap}
.slogan b{font-family:'Fraunces',Georgia,serif;font-weight:900;font-variation-settings:"opsz" 144;font-size:1.07em;letter-spacing:-.02em;margin:0 .03em}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.005em;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-bleu{background:var(--bleu);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px rgba(31,111,235,.7)}
.btn-bleu:hover{background:var(--bleu-f);transform:translateY(-1px)}
.btn-blanc{background:#fff;color:var(--marine);border:1px solid var(--ligne)}
.btn-blanc:hover{border-color:var(--bleu3);transform:translateY(-1px)}

.btn-grand{height:56px;padding:0 28px;font-size:16px}
.btn-petit{height:40px;padding:0 18px;font-size:14px}

/* ================= Navigation ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,.84);transition:background .35s,border-color .35s;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(220,231,247,.7)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gauche)}
.marque{display:flex;align-items:center;gap:10px;color:var(--marine)}
.marque img{width:30px;height:30px;border-radius:8px}
.marque .nom{font-weight:800;font-size:20px;letter-spacing:-.025em}
.marque .slogan{font-size:17px;margin-left:4px;padding-left:14px;border-left:1px solid var(--ligne)}
.liens{display:flex;gap:30px;font-size:14.5px;font-weight:600;color:var(--encre)}
.liens a{position:relative;padding:6px 0}
.liens a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bleu);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.liens a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:18px}
.lien-cnx{font-weight:600;font-size:14.5px}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--ligne);background:#fff;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--marine);border-radius:2px;transition:transform .3s}
.burger i:first-child{top:16px}.burger i:last-child{top:23px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-mobile{position:absolute;top:var(--nav-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--ligne);padding:12px 16px 20px;display:grid;gap:4px;box-shadow:var(--ombre)}
.menu-mobile[hidden]{display:none}
.menu-mobile a{padding:12px 4px;font-weight:600;border-bottom:1px solid var(--ciel)}
.menu-mobile .btn{margin-top:10px;border:0;color:#fff}
@media (max-width:1100px){.liens{display:none}}
@media (max-width:820px){
  :root{--nav-h:58px;--gauche:16px}
  .lien-cnx,.nav-actions .btn{display:none}
  .burger{display:block}
  .marque .nom{font-size:18px}
  .marque img{width:26px;height:26px}
  .marque .slogan{font-size:14px;padding-left:10px;margin-left:2px}
}

/* ================= La scène épinglée ================= */
.histoire{position:relative;height:calc((var(--u,11.4) + 1) * 100svh);background:var(--ciel2)}
.scene{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.fond{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#F8FBFF 0%,#EEF5FF 100%)}
.fond .grille{position:absolute;inset:0;background-image:linear-gradient(rgba(31,111,235,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,111,235,.07) 1px,transparent 1px);background-size:56px 56px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 80%)}
.fond .halo{position:absolute;border-radius:50%;will-change:transform}
.fond .h1{width:900px;height:900px;left:50%;top:40%;margin:-450px 0 0 -450px;background:radial-gradient(circle,rgba(59,139,255,.22),rgba(59,139,255,0) 62%)}
.fond .h2{width:700px;height:700px;left:70%;top:75%;margin:-350px 0 0 -350px;background:radial-gradient(circle,rgba(127,179,255,.28),rgba(127,179,255,0) 60%)}

/* Hero */
.hero{position:absolute;left:50%;top:calc(var(--nav-h) + 5.2svh);width:min(1080px,100% - 32px);transform:translateX(-50%);text-align:center;z-index:3}
.hero .slogan.grand{font-size:22px;margin-bottom:14px;opacity:.9}
.hero h1{font-size:clamp(40px,5.4vw,80px);line-height:1.0;letter-spacing:-.045em;font-weight:800;color:var(--marine);text-wrap:balance}
.nowrap{white-space:nowrap}
.souligne{position:relative;color:var(--bleu);white-space:nowrap;display:inline-block}
.souligne::after{content:"";position:absolute;left:2%;right:2%;bottom:-.02em;height:.1em;border-radius:1em;background:linear-gradient(90deg,var(--bleu),var(--bleu3));transform-origin:left;animation:trait 1.1s .35s cubic-bezier(.7,0,.2,1) both}
@keyframes trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lead{margin:22px auto 0;max-width:680px;font-size:18px;line-height:1.6;color:var(--gris)}
.ctas{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.checks{margin-top:18px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--encre)}
.checks li{display:inline-flex;align-items:center;gap:7px}
.checks li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center/11px no-repeat}
.indice{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.souris{width:20px;height:30px;border:2px solid var(--gris2);border-radius:12px;position:relative}
.souris i{position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--bleu);animation:molette 1.6s ease-in-out infinite}
@keyframes molette{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{opacity:0}}

/* Texte latéral */
.recit{position:absolute;left:var(--gauche);top:var(--nav-h);bottom:110px;width:min(390px,30vw);z-index:2;pointer-events:none}
.chap{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translate3d(0,-50%,0);will-change:transform,opacity}
.chap.actif{pointer-events:auto}
.chap .num{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:18px}
.chap .num b{display:inline-grid;place-items:center;height:26px;padding:0 9px;border-radius:8px;background:var(--marine);color:#fff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.chap h2{font-size:clamp(30px,2.9vw,44px);line-height:1.06;letter-spacing:-.038em;font-weight:800;color:var(--marine);text-wrap:balance}
.chap > p:not(.num){margin-top:18px;font-size:17px;line-height:1.62;color:var(--gris);text-wrap:pretty}
.chap .btn{margin-top:26px}
.chrono{display:inline-block;min-width:1.25em;text-align:right;color:var(--bleu);font-variant-numeric:tabular-nums}
.unite{color:var(--bleu)}

/* Cadran */
.cadran{position:absolute;left:var(--gauche);bottom:34px;z-index:4;display:flex;align-items:center;gap:16px;opacity:0}
.montre{width:58px;height:58px;flex:none}
.montre .bord{fill:#fff;stroke:var(--ligne);stroke-width:1.5}
.montre .graduations line{stroke:var(--gris2);stroke-width:.8}
.montre .graduations line.h{stroke:var(--marine);stroke-width:1.8}
.montre .piste{fill:none;stroke:var(--ciel);stroke-width:3}
.montre .avance{fill:none;stroke:var(--bleu);stroke-width:3;stroke-dasharray:1 1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%;stroke-linecap:round}
.montre .aiguille{stroke:var(--marine);stroke-width:2.2;stroke-linecap:round;transform-origin:50px 50px}
.montre .axe{fill:var(--bleu)}
.cadran-txt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--marine);margin-bottom:8px;font-variant-numeric:tabular-nums}
.cadran-txt span{color:var(--gris2)}
.puces{display:flex;gap:5px}
.puces button{position:relative;width:30px;height:22px;display:flex;align-items:center}
.puces button span{position:absolute;bottom:100%;left:50%;transform:translate(-50%,4px);background:var(--marine);color:#fff;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.puces button:hover span,.puces button:focus-visible span{opacity:1;transform:translate(-50%,-2px)}
.puces i{display:block;width:100%;height:4px;border-radius:4px;background:#D5E2F5;overflow:hidden;position:relative}
.puces i::after{content:"";position:absolute;inset:0;background:var(--bleu);transform:scaleX(var(--p,0));transform-origin:left;border-radius:4px}

/* Poste : zone de l'appareil */
.poste{position:absolute;top:var(--nav-h);bottom:0;right:var(--gauche);width:calc(100vw - 2 * var(--gauche) - min(390px,30vw) - 50px);display:flex;align-items:center;justify-content:center;perspective:3600px;perspective-origin:50% 40%;z-index:1;pointer-events:none}
.appareil{position:relative;width:min(100%,calc((100svh - var(--nav-h) - 110px) * 1.52),960px);transform-style:preserve-3d;will-change:transform}
.pc .appareil{transform-origin:50% 100%}
.capot{position:relative;transform-origin:50% 100%;transform-style:preserve-3d;will-change:transform}
.face{position:relative;background:linear-gradient(180deg,#1b1e26,#0c0e13);border-radius:22px 22px 8px 8px;padding:1.9% 1.9% 2.4%;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 0 1.5px #AEB5C1,0 0 0 2.5px #E3E7ED;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face::before{content:"";position:absolute;top:.7%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2f3a;box-shadow:0 0 0 1.5px #151820}
.ecran{position:relative;aspect-ratio:1120/700;overflow:hidden;border-radius:5px;background:#fff;clip-path:inset(0 round 5px)}
.virtuel{position:absolute;left:0;top:0;width:1120px;height:700px;transform-origin:0 0;overflow:hidden;background:#fff;font-size:15px;line-height:1.45;color:var(--encre)}
.eteint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#141a2a,#05070c 70%);pointer-events:none;display:grid;place-items:center}
.eteint img{width:9%;opacity:.9;filter:drop-shadow(0 0 18px rgba(59,139,255,.8))}
.verrou-h{display:none}
.tel .eteint{align-content:start;gap:0;padding-top:24%}
.tel .eteint img{width:22%;order:2;margin-top:18%}
.tel .verrou-h{display:block;order:1;font-size:clamp(40px,15vw,64px);font-weight:700;color:#DCE7FF;letter-spacing:-.03em;line-height:1}
.reflet{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 100%);mix-blend-mode:screen}
.dos{position:absolute;inset:0;border-radius:22px 22px 8px 8px;transform:translateZ(calc(-1 * var(--ep))) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:linear-gradient(172deg,#F2F4F7 0%,#DCE0E7 30%,#C7CDD6 58%,#D6DBE2 80%,#E9ECF0 100%);box-shadow:inset 0 0 0 1px #9AA2AE,inset 0 0 0 2.5px #F7F8FA,inset 0 0 0 4px rgba(120,130,146,.18);display:grid;place-items:center}
.dos img{position:relative;width:12%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(60,70,90,.25)) drop-shadow(0 0 18px rgba(59,139,255,.35))}
.dos .brosse{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,rgba(90,100,118,.05) 1px 2px,transparent 2px 3px);opacity:.7}
.dos .brillance{position:absolute;top:-20%;bottom:-20%;left:-60%;width:60%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 58%,rgba(255,255,255,0) 100%);mix-blend-mode:soft-light;will-change:transform}
.tranche{position:absolute;display:block;background:linear-gradient(90deg,#8C95A3,#C9CFD8 12%,#EEF0F4 50%,#C9CFD8 88%,#8C95A3)}
.t-haut{left:18px;right:18px;top:0;height:var(--ep);transform-origin:50% 0;transform:rotateX(-90deg);border-radius:2px}
.t-g{left:0;top:18px;bottom:0;width:var(--ep);transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(180deg,#E6E9EE,#B9C0CA)}
.t-d{right:0;top:18px;bottom:0;width:var(--ep);transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(180deg,#E6E9EE,#B9C0CA)}
.socle{position:absolute;top:100%;left:-2%;width:104%;height:0;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;background:linear-gradient(180deg,#C9CED7 0%,#DADEE5 40%,#E4E7EC 100%);border-radius:0 0 26px 26px;box-shadow:inset 0 0 0 1px #A3AAB6,inset 0 0 0 2.5px #F3F5F8}
.socle .contact{position:absolute;left:-7%;right:-7%;top:-6%;bottom:-26%;transform:translateZ(-23px);border-radius:60px;background:radial-gradient(ellipse 48% 46% at 50% 52%,rgba(11,30,79,.55),rgba(11,30,79,.2) 58%,rgba(11,30,79,0) 78%);filter:blur(12px)}
.socle .clavier{position:absolute;left:12%;right:12%;top:7%;height:44%;border-radius:10px;background:repeating-linear-gradient(90deg,#1d212a 0 5.6%,transparent 5.6% 6.4%),#A9B0BC;-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 15%,transparent 15% 17%);mask-image:repeating-linear-gradient(180deg,#000 0 15%,transparent 15% 17%)}
.socle .pave{position:absolute;left:33%;right:33%;top:58%;bottom:8%;border-radius:12px;background:linear-gradient(180deg,#D3D8DF,#CBD0D8);box-shadow:0 0 0 1px #AAB1BC inset}
.socle .levre{position:absolute;left:0;right:0;top:100%;height:22px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(180deg,#F4F6F8,#C8CDD5 35%,#9CA3AF 100%);border-radius:0 0 14px 14px}
.socle .levre::after{content:"";position:absolute;left:50%;top:0;width:15%;height:40%;transform:translateX(-50%);background:#A2A9B4;border-radius:0 0 10px 10px}
.ombre-sol{position:absolute;left:-8%;right:-8%;top:96%;height:70px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,30,79,.3),rgba(11,30,79,0) 70%);transform:translateZ(-1px);pointer-events:none}

/* Chrome du navigateur (virtuel) */
.chrome{position:absolute;left:0;right:0;top:0;height:40px;background:#F3F5F9;border-bottom:1px solid #E3E8F0;display:flex;align-items:center;padding:0 16px;z-index:5}
.feux{display:flex;gap:7px}
.feux i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.feux i:nth-child(2){background:#FEBC2E}.feux i:nth-child(3){background:#28C840}
.chrome .url{position:absolute;left:50%;transform:translateX(-50%);height:26px;min-width:420px;padding:0 14px;border-radius:8px;background:#fff;border:1px solid #E1E6EF;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:var(--gris)}
.chrome .url svg{width:12px;height:12px;fill:none;stroke:var(--gris2);stroke-width:2.4}
.chrome .url span{transition:opacity .25s}
.chrome .heure,.chrome .reseau{display:none}
.zone{position:absolute;left:0;right:0;top:40px;bottom:0;overflow:hidden;background:#fff}

/* Barre latérale de l'app */
.barre-app{position:absolute;left:0;top:0;bottom:0;width:214px;background:var(--ciel2);border-right:1px solid var(--ligne);padding:22px 14px;z-index:4;will-change:opacity}
.b-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--marine);padding:0 8px;margin-bottom:26px}
.b-logo img{width:28px;height:28px}
.barre-app li{display:flex;align-items:center;gap:11px;height:40px;padding:0 11px;border-radius:11px;font-weight:600;font-size:15px;color:var(--encre);border:1px solid transparent;margin-bottom:5px;transition:background .3s,color .3s,border-color .3s}
.barre-app li svg,.onglets-tel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.barre-app li.on{background:#fff;border-color:var(--ligne);color:var(--bleu)}
.b-user{position:absolute;left:14px;right:14px;bottom:18px;display:flex;align-items:center;gap:10px;padding:8px;font-size:13.5px}
.b-user b{display:block;color:var(--marine)}
.b-user small{color:var(--gris);font-size:12px}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--bleu);background:var(--ciel);border:1px solid var(--ligne)}

.calque{position:absolute;inset:0;opacity:0;will-change:opacity,transform;overflow:hidden;contain:paint}
.calque.dans-app{left:214px}
.onglets-tel{display:none}

/* ---- Calque 1 : parcours d'entrée ---- */
.c-onb{background:linear-gradient(180deg,#F6FAFF,#fff 60%)}
.etapes{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-bottom:1px solid var(--ligne);font-size:13px;font-weight:600;color:#9AA8C2;background:rgba(255,255,255,.7)}
.etapes span{display:flex;align-items:center;gap:7px;transition:color .3s}
.etapes span::before{content:"";width:8px;height:8px;border-radius:50%;background:#C9D6EA;transition:background .3s,box-shadow .3s}
.etapes span.on{color:var(--marine)}
.etapes span.on::before{background:var(--bleu);box-shadow:0 0 0 4px rgba(31,111,235,.15)}
.etapes span.fait::before{background:var(--vert)}
.etapes i{width:34px;height:1px;background:#D2DDEE}
.onb-corps{width:600px;margin:58px auto 0}
.sur{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.onb-corps h3{margin-top:10px;font-size:46px;line-height:1.05;letter-spacing:-.04em;font-weight:800;color:var(--marine)}
.onb-sous{margin-top:12px;font-size:16px;color:var(--gris)}
.depot{position:relative;margin-top:26px;height:236px;border:2px dashed var(--bleu3);border-radius:18px;background:#fff;transition:background .3s,border-color .3s,box-shadow .3s}
.depot.survol{background:var(--ciel);border-style:solid;border-color:var(--bleu);box-shadow:0 0 0 6px rgba(31,111,235,.1)}
.depot-vide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:opacity .3s}
.depot-vide .rond{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ciel);margin-bottom:8px}
.depot-vide svg{width:22px;height:22px;fill:none;stroke:var(--bleu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.depot-vide b{font-size:17px;color:var(--marine)}
.depot-vide small{font-size:13px;color:var(--gris)}
.depot-lu{position:absolute;inset:0;padding:22px 26px;opacity:0;transition:opacity .3s}
.fichier{display:flex;align-items:center;gap:12px}
.pdf{width:38px;height:46px;border-radius:7px;background:#E5484D;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.fichier b{color:var(--marine);font-size:16px}
.fichier small{margin-left:auto;font-size:13px;font-weight:700;color:var(--bleu)}
.jauge{margin-top:14px;height:6px;border-radius:6px;background:var(--ciel);overflow:hidden}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--bleu),var(--bleu2));transform-origin:left;transform:scaleX(0);border-radius:6px}
.extraits{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.x{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--vert-f);color:#0B6B42;font-weight:700;font-size:13.5px;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.x::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312915A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.x.ok{opacity:1;transform:none}
.sans-ia{margin-top:14px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris2);opacity:0;transition:opacity .4s}
.sans-ia.ok{opacity:1}
.cv-vol{position:absolute;left:0;top:0;width:150px;will-change:transform,opacity;z-index:3}
.cv-feuille{width:150px;height:200px;background:#fff;border-radius:6px;padding:16px 14px;box-shadow:0 30px 60px -20px rgba(11,30,79,.45),0 0 0 1px rgba(11,30,79,.06)}
.cv-feuille b{display:block;font-size:14px;color:var(--marine)}
.cv-feuille small{display:block;font-size:10px;color:var(--gris);margin-bottom:10px}
.cv-feuille i{display:block;height:5px;border-radius:3px;background:#E3EAF5;margin-top:7px}
.cv-feuille i.c{width:60%}
.curseur{position:absolute;width:26px;height:26px;right:-14px;bottom:30px;fill:#0B1E4F;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}

/* ---- Calque 2 : page personnelle (Trajectoire) ---- */
.c-page{background:#F4F2F3}
.pp{color:#151515;will-change:transform}
.pp-tete{height:46px;display:flex;align-items:center;gap:9px;padding:0 44px;border-bottom:1px solid #E3DEE1;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pp-tete img{width:22px;height:22px}
.pp-tete b{font-size:14px;letter-spacing:0;text-transform:none;font-weight:800}
.pp-tete span{margin-left:auto;color:#6f6a6d;font-weight:600}
.pp-hero{padding:22px 44px 10px}
.dispo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--bordeaux);color:var(--bordeaux);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dispo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bordeaux)}
.pp-hero h4{margin-top:10px;font-size:54px;line-height:1;letter-spacing:-.055em;font-weight:800}
.pp-hero h4 em{font-style:normal;color:var(--bordeaux)}
.pp-hero p{margin-top:10px;font-size:17px;line-height:1.45;max-width:720px;color:#333}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center}
.pp-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0 8px;padding-left:16px;border-left:1px solid #E3DEE1}
.pp-meta span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#fff;border:1px solid #E3DEE1;font-size:11px;font-weight:700;color:#4a4548}
.pp-meta sup{font-size:.7em;margin-left:1px}
.pp-btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;margin:12px 10px 0 0;background:var(--bordeaux);color:#fff;font-size:12.5px;font-weight:700}
.pp-btn.creux{background:transparent;color:#151515;border:1px solid #151515}
.pp-h{font-size:19px;letter-spacing:-.03em;font-weight:800;color:#151515}
.pp-sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pp-r{font-size:11.5px;color:#6f6a6d;font-weight:600}
.pp-traj{margin:4px 44px 0;padding-top:12px;border-top:1px solid #E3DEE1}
.traj-zone{position:relative;height:66px;margin-top:8px}
.traj{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.traj .aire{fill:url(#traj-fond)}
.traj .ligne{fill:none;stroke:var(--bordeaux);stroke-width:2.4;stroke-dasharray:1 1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.traj .futur{fill:none;stroke:var(--bordeaux);stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.7}
.traj-zone .pt{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--bordeaux);box-shadow:0 0 0 3px #F4F2F3;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .09s)}
.traj-zone .pt.auj{width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;border:3px solid var(--bordeaux)}
.traj-zone .pt.cible{width:16px;height:16px;margin:-8px 0 0 -8px;background:#fff;border:2px dashed var(--bordeaux)}
.pp-traj.ok .pt{transform:scale(1)}
.traj-et{position:relative;height:34px;margin-top:8px;list-style:none;padding:0}
.traj-et li{position:absolute;left:var(--x);top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;line-height:1.25}
.traj-et b{display:block;font-size:11px;font-weight:800;color:#151515;font-variant-numeric:tabular-nums}
.traj-et span{font-size:10.5px;font-weight:600;color:#6f6a6d}
.traj-et .c b,.traj-et .c span{color:var(--bordeaux)}
.pp-projet{margin:12px 44px 0;padding-top:12px;border-top:1px solid #E3DEE1}
.source-tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bordeaux)}
.pp-carte{display:grid;grid-template-columns:132px 1fr;gap:20px;margin-top:10px;padding:14px 18px;background:#fff;border:1px solid #E3DEE1;border-radius:6px}
.pp-quand{display:flex;flex-direction:column;gap:2px;padding-right:16px;border-right:1px solid #EEE9EC}
.pp-quand small{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8487}
.pp-quand b{font-size:15px;font-weight:800;color:var(--bordeaux);letter-spacing:-.01em;margin-bottom:4px}
.pp-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pp-table{margin-top:6px;font-size:12px}
.pp-table .ln{display:grid;grid-template-columns:1fr 1.15fr 44px;gap:14px;align-items:center;padding:5px 0;border-bottom:1px solid #EEE9EC}
.pp-table .ln:last-child{border-bottom:0;padding-bottom:0}
.pp-table .tete span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a8487;font-weight:700}
.pp-table i{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:8px;border-radius:4px;background:rgba(91,20,55,.08);color:var(--bordeaux);font-style:normal;font-size:10px;font-weight:800}
.pp-table .ln span:nth-child(2){color:#4a4548}
.pp-table .s{justify-self:end;color:var(--bordeaux);font-weight:800}
.pp-table .tete .s{color:#8a8487}
.sq{position:relative}
.sq > *{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.sq:not(.ok) > *{opacity:0;transform:translateY(6px)}
.sq::before{content:"";position:absolute;left:0;top:4px;width:min(100%,var(--sq-w,70%));height:calc(100% - 8px);border-radius:8px;background:linear-gradient(90deg,#E8E3E6 0%,#F1EDEF 50%,#E8E3E6 100%);background-size:200% 100%;animation:miroir 1.4s linear infinite;transition:opacity .3s}
.sq.ok::before{opacity:0;animation:none}
.pp-traj.sq::before,.pp-projet.sq::before{top:16px;height:calc(100% - 18px)}
.pp-projet.sq::before{width:100%;border-radius:0;background:linear-gradient(#E6E0E3,#E6E0E3) 0 0/90px 18px no-repeat,linear-gradient(#EDE8EA,#EDE8EA) 0 30px/46% 14px no-repeat,linear-gradient(#EDE8EA,#EDE8EA) 100% 2px/150px 10px no-repeat,repeating-linear-gradient(180deg,#EFEAEC 0 11px,transparent 11px 29px) 0 62px/100% calc(100% - 62px) no-repeat;animation:pouls 1.4s ease-in-out infinite}
.pp-projet.sq.ok::before{opacity:0;animation:none}
@keyframes pouls{50%{opacity:.55}}
@keyframes miroir{from{background-position:100% 0}to{background-position:-100% 0}}
.toast-35{position:absolute;right:22px;top:62px;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:var(--marine);color:#fff;font-size:14px;box-shadow:0 18px 40px -16px rgba(11,30,79,.6);font-variant-numeric:tabular-nums;z-index:3}
.toast-35 .pastille{width:9px;height:9px;border-radius:50%;background:#FFB020;box-shadow:0 0 0 4px rgba(255,176,32,.25)}
.toast-35.fini .pastille{background:#2BD47D;box-shadow:0 0 0 4px rgba(43,212,125,.25)}
.toast-proj{position:absolute;right:22px;top:116px;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid #E3DEE1;color:#151515;font-size:13px;font-weight:700;box-shadow:var(--ombre);opacity:0;z-index:3}
.toast-proj svg{width:16px;height:16px;fill:none;stroke:var(--vert);stroke-width:3}

/* ---- Calque 3 : radar et tri ---- */
.app-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 40px 0}
.app-tete h3{font-size:32px;letter-spacing:-.035em;font-weight:800;color:var(--marine);line-height:1.1}
.app-tete p{margin-top:4px;font-size:15px;color:var(--gris)}
.compteur{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border:1px solid var(--ligne);border-radius:14px;background:var(--ciel2)}
.compteur b{width:40px;height:40px;display:grid;place-items:center;background:#fff;border:1px solid var(--ligne);border-radius:10px;font-size:19px;color:var(--marine)}
.compteur span{font-weight:700;font-size:14px;color:var(--marine);line-height:1.2}
.compteur small{display:block;font-weight:500;font-size:12px;color:var(--gris)}
.radar-bandeau{margin:18px 40px 0;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 8px;border-radius:999px;background:var(--marine);color:#CFE0FF;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.radar-bandeau b{color:#fff}
.balai{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,rgba(127,179,255,.25),transparent 70%);border:1px solid rgba(127,179,255,.5);position:relative;overflow:hidden}
.balai i{position:absolute;left:50%;top:50%;width:50%;height:50%;transform-origin:0 0;background:conic-gradient(from 0deg,rgba(127,179,255,.9),transparent 30%);animation:balai 1.6s linear infinite}
@keyframes balai{to{transform:rotate(360deg)}}
.liste-tri{position:absolute;left:40px;right:40px;top:176px;bottom:0}
.ligne-o{position:absolute;left:0;right:0;top:0;height:42px;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:12px;background:#fff;border:1px solid var(--ligne);font-size:14px;will-change:transform,opacity;transition:box-shadow .3s,border-color .3s,background .3s}
.ligne-o.monte{z-index:2;box-shadow:0 14px 26px -12px rgba(11,30,79,.38),0 0 0 1px var(--bleu3)}
.ligne-o > *{transition:color .4s,background .4s,opacity .4s}
.ligne-o.pale .soc,.ligne-o.pale .tit,.ligne-o.pale .vil{color:#B3BDCF}
.ligne-o.pale .ini,.ligne-o.pale .sc{opacity:.45}
.ligne-o.top{z-index:1;border-color:var(--bleu3);box-shadow:0 0 0 3px rgba(31,111,235,.10),0 10px 22px -16px rgba(11,30,79,.4)}
.ligne-o.top.r0{background:#F4F8FF;border-color:var(--bleu)}
.ini{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ciel);color:var(--bleu);font-weight:800;font-size:11.5px}
.ligne-o .soc{flex:none;width:190px;font-weight:700;color:var(--marine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne-o .tit{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gris)}
.ligne-o .vil{flex:none;width:80px;color:var(--gris2);font-size:13px}
.ligne-o .sc{flex:none;width:52px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;background:var(--ciel);color:var(--bleu);transition:opacity .3s,transform .3s}
.ligne-o .sc.haut{background:var(--vert-f);color:var(--vert)}
.ligne-o .sc.bas{background:#F1F3F7;color:var(--gris2)}
.ligne-o .sc:not(.ok){opacity:0;transform:scale(.7)}
.pile{position:absolute;z-index:3;left:50%;top:146px;width:470px;height:384px;margin-left:-235px}
.carte{position:absolute;inset:0;background:#fff;border:1px solid var(--ligne);border-radius:22px;padding:22px 24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,30,79,.35),0 2px 6px rgba(11,30,79,.05);will-change:transform,opacity}
.carte.suivante{transform:translateY(14px) scale(.95);opacity:0}
.c-haut{display:flex;align-items:center;justify-content:space-between}
.c-soc{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--marine)}
.anneau{position:relative;width:62px;height:62px;display:grid;place-items:center;text-align:center}
.anneau svg{position:absolute;inset:0;transform:rotate(-90deg)}
.anneau .fond-a{fill:none;stroke:var(--ciel);stroke-width:4}
.anneau .val{fill:none;stroke:var(--bleu);stroke-width:4;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
.anneau b{font-size:18px;font-weight:800;color:var(--marine);line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.anneau small{font-size:9px;color:var(--gris);margin-top:-12px}
.c-titre{margin-top:14px;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:var(--marine)}
.c-meta{margin-top:8px;display:flex;gap:14px;font-size:13px;color:var(--gris)}
.c-meta span::before{content:"· ";color:var(--bleu3)}
.c-meta span:first-child::before{content:""}
.c-pq{margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne);font-size:13.5px;font-weight:800;color:var(--marine)}
.raisons{margin-top:8px}
.raisons li,.f-raisons li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--encre);padding:5px 0}
.raisons li{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.raisons li.ok,.raisons.fixes li{opacity:1;transform:none}
.raisons i,.f-raisons i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ciel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6FEB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center/13px no-repeat}
.tampon{position:absolute;right:100px;top:16px;padding:5px 12px;border:3px solid var(--vert);color:var(--vert);border-radius:10px;font-size:19px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-12deg) scale(1.6);opacity:0;background:rgba(255,255,255,.85)}
.boutons-tri{position:absolute;left:50%;top:552px;transform:translateX(-50%);display:flex;gap:12px}
.boutons-tri span{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:180px;height:50px;border-radius:14px;font-weight:700;font-size:16px}
.boutons-tri svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b-passer{background:#fff;border:1px solid var(--ligne);color:var(--marine)}
.b-garder{background:var(--bleu);color:#fff;box-shadow:0 12px 24px -12px rgba(31,111,235,.8);transition:transform .15s}
.b-garder.appui{transform:scale(.94);background:var(--bleu-f)}

/* ---- Calque 4 : fiche ---- */
.fiche-cam{position:relative;padding:24px 40px;transform-origin:0 0}
.retour{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--bleu);font-size:14px}
.retour svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.f-tete{margin-top:16px;display:flex;align-items:center;gap:16px}
.ini.gros{width:54px;height:54px;border-radius:14px;font-size:17px}
.f-titre{flex:1;min-width:0}
.f-titre h3{font-size:24px;line-height:1.2;letter-spacing:-.03em;font-weight:800;color:var(--marine)}
.f-titre p{margin-top:4px;font-size:14px;color:var(--gris);display:flex;align-items:center;gap:8px}
.pill-v{display:inline-flex;height:22px;align-items:center;padding:0 8px;border-radius:999px;background:var(--vert-f);color:var(--vert);font-size:12px;font-weight:800}
.f-score{display:flex;align-items:flex-end;gap:4px;padding-left:18px;border-left:1px solid var(--ligne)}
.f-score b{font-size:40px;line-height:.9;font-weight:800;color:var(--marine);letter-spacing:-.04em}
.f-score small{font-size:11px;color:var(--gris);line-height:1.2}
.f-grille{margin-top:22px;display:grid;grid-template-columns:1fr 420px;gap:28px}
.f-h{font-size:15px;font-weight:800;color:var(--marine);margin:4px 0 8px}
.f-raisons{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--ligne)}
.f-lignes i{display:block;height:9px;border-radius:5px;background:#EBF0F8;margin-top:12px}
.f-lignes i.court{width:55%}
.bloc{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:14px 16px;box-shadow:0 12px 30px -22px rgba(11,30,79,.35)}
.bloc + .bloc{margin-top:12px}
.bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.bloc-tete b{font-size:15.5px;color:var(--marine)}
.etat-qui{font-size:12px;font-weight:700;color:var(--gris);font-variant-numeric:tabular-nums}
.etat-qui.fini{color:var(--vert)}
.pers,.ancien{position:relative;display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid var(--ciel)}
.pers .p-txt,.ancien .p-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.p-txt b{font-size:14px;color:var(--marine)}
.p-txt small{font-size:12.5px;color:var(--gris)}
.av.a1{background:#E8F0FF;color:var(--bleu)}.av.a2{background:#F3EAFE;color:#7A3FD1;border-color:#E6D8FB}.av.a3{background:#E9F8F1;color:var(--vert);border-color:#CDEEDD}
.av.e{background:#F6E9EF;color:var(--bordeaux);border-color:#EBD3DE}
.tag-dec{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--marine);color:#fff}
.tag-dec.gris{background:var(--ciel);color:var(--gris)}
.pers > *,.ancien > *{transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.pers:not(.ok) > *,.ancien:not(.ok) > *{opacity:0;transform:translateX(10px)}
.pers::after,.ancien::after{content:"";position:absolute;left:0;right:0;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:linear-gradient(90deg,#EDF2FA,#F7FAFE,#EDF2FA);background-size:200% 100%;animation:miroir 1.3s linear infinite;transition:opacity .3s}
.pers.ok::after,.ancien.ok::after{opacity:0;animation:none}
.anciens .bloc-tete{justify-content:flex-start}
.anc-titre{display:flex;flex-direction:column;line-height:1.25}
.anc-titre small{font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums}
.rouleau{flex:none;width:58px;height:58px;border-radius:14px;box-shadow:inset 0 6px 8px -6px rgba(11,30,79,.25),inset 0 -6px 8px -6px rgba(11,30,79,.25);border:1px solid var(--ligne);overflow:hidden;background:#fff;position:relative}
.bande{position:absolute;left:0;top:0;width:58px;will-change:transform}
.bande img{width:58px;height:58px;padding:8px;object-fit:contain}
.voile{position:absolute;inset:0;background:rgba(11,30,79,.3);opacity:0;pointer-events:none}
.mail{position:absolute;left:50%;top:26px;width:640px;margin-left:-320px;background:#fff;border-radius:18px;box-shadow:0 40px 90px -30px rgba(11,30,79,.55),0 0 0 1px rgba(11,30,79,.06);opacity:0;will-change:transform,opacity;overflow:hidden}
.mail-tete{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--ciel2);border-bottom:1px solid var(--ligne)}
.mail-tete b{color:var(--marine);font-size:15px}
.mail-tete span{font-size:12px;font-weight:700;color:var(--gris)}
.mail-champ{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--ciel);font-size:14px;min-height:42px}
.mail-champ span{width:44px;color:var(--gris2);font-weight:600}
.mail-champ b{color:var(--marine);font-weight:700}
.mail-champ em{margin-left:auto;font-size:12px;font-weight:700;color:var(--vert);background:var(--vert-f);padding:3px 8px;border-radius:999px}
.mail-corps{padding:16px 20px;min-height:236px;font-size:15px;line-height:1.62;white-space:pre-wrap;color:var(--encre)}
.hl{background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .6s cubic-bezier(.2,.8,.2,1);border-radius:3px}
.h-fait{background-image:linear-gradient(rgba(18,145,90,.16),rgba(18,145,90,.16))}
.h-q{background-image:linear-gradient(rgba(122,63,209,.16),rgba(122,63,209,.16))}
.h-lien{background-image:linear-gradient(rgba(31,111,235,.18),rgba(31,111,235,.18));color:var(--bleu);font-weight:700}
.mail.surligne .hl{background-size:100% 100%}
.caret{display:inline-block;width:2px;height:1.1em;vertical-align:-.18em;background:var(--bleu);margin-left:1px;animation:clign 1s steps(1) infinite}
@keyframes clign{50%{opacity:0}}
.mail-pied{display:flex;align-items:center;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--ciel)}
.pied-note{margin-right:auto;font-size:12.5px;font-weight:700;color:var(--gris)}
.m-btn{height:38px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;font-weight:700;font-size:14px;border:1px solid var(--ligne);color:var(--marine)}
.m-btn.bleu{background:var(--bleu);border-color:var(--bleu);color:#fff}
.annot{display:flex;gap:8px;padding:0 20px 16px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.mail.surligne .annot{opacity:1;transform:none}
.annot span{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
.a-f{background:rgba(18,145,90,.12);color:var(--vert)}.a-q{background:rgba(122,63,209,.12);color:#6A33BD}.a-l{background:rgba(31,111,235,.12);color:var(--bleu)}

/* ---- Calque 5 : extension ---- */
.c-ext{background:#fff}
.form-site{position:absolute;left:0;top:0;bottom:0;width:740px;padding:22px 56px;background:#fff;will-change:transform}
.form-site::before{content:"";position:absolute;left:0;right:0;top:0;height:112px;background:#F3F4F6;z-index:-1}
.test{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid #C9CDD4;color:#4B5563;border-radius:4px}
.form-site h3{margin-top:10px;font-size:28px;font-weight:800;color:#111827;letter-spacing:-.02em;font-family:system-ui,-apple-system,sans-serif}
.f-sous{font-size:13px;color:#4B5563;margin-top:2px;font-family:system-ui,-apple-system,sans-serif}
.champs{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-family:system-ui,-apple-system,sans-serif}
.ch{display:flex;flex-direction:column;gap:5px;position:relative}
.ch span{font-size:12.5px;font-weight:700;color:#111827}
.ch i{display:flex;align-items:center;height:36px;padding:0 11px;border:1.5px solid #D1D5DB;border-radius:6px;font-style:normal;font-size:13.5px;color:#111827;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .3s,background .3s,box-shadow .3s}
.ch.large{grid-column:1/-1}
.ch.large.relire i{height:54px;white-space:normal;align-items:flex-start;padding-top:7px;line-height:1.35}
.ch i.choisir{color:#9CA3AF}
.ch em{position:absolute;right:0;top:0;font-size:11px;font-weight:800;opacity:0;transition:opacity .3s}
.ch.ok i{border-color:#22A06B;background:#F2FBF6}
.ch.ok.relire i{border-color:#E8A317;background:#FFFBEF}
.ch.ok.relire em{color:#B7791F;opacity:1}
.ch.ok.toi i{border-color:#E5484D;background:#FFF5F5}
.ch.ok.toi em{color:#D93A3F;opacity:1}
.ch.fic.ok i::before{content:"PDF";flex:none;font-size:9px;font-weight:800;color:#fff;background:#E5484D;border-radius:3px;padding:2px 4px;margin-right:8px}
.ch i .v{transition:opacity .25s}
.ch:not(.ok) i .v{opacity:0}
.chrome .url span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.case{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:13px;color:#111827;font-family:system-ui,-apple-system,sans-serif}
.cb{width:17px;height:17px;border:1.5px solid #9CA3AF;border-radius:4px;background:#fff;transition:box-shadow .3s}
.case em{font-size:11.5px;font-weight:800;color:#D93A3F;opacity:0;transition:opacity .3s}
.case.note .cb{box-shadow:0 0 0 4px rgba(229,72,77,.18);border-color:#E5484D}
.case.note em{opacity:1}
.envoyer{display:inline-flex;align-items:center;margin-top:14px;height:38px;padding:0 16px;border-radius:6px;background:#111827;color:#fff;font-size:13.5px;font-weight:700;font-family:system-ui,-apple-system,sans-serif}
.ext-panneau{position:absolute;right:22px;top:14px;width:300px;background:#fff;border-radius:12px;box-shadow:0 30px 70px -26px rgba(11,30,79,.5),0 0 0 1px rgba(11,30,79,.08);overflow:hidden;will-change:transform,opacity;font-size:13px}
.ext-tete{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;background:var(--marine);color:#fff}
.ext-tete img{width:20px;height:20px}
.ext-compte{margin:12px 12px 0;padding:10px 12px;border:1px solid var(--ligne);border-radius:9px;background:var(--ciel2);display:flex;flex-direction:column}
.ext-compte small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.ext-compte b{color:var(--marine);font-size:13px}
.ext-txt{margin:12px 14px 0;color:var(--gris);font-size:12.5px}
.ext-btn{display:flex;align-items:center;justify-content:center;margin:12px 12px 0;height:40px;border-radius:9px;background:var(--bleu);color:#fff;font-weight:700;transition:transform .15s,background .2s}
.ext-btn.appui{transform:scale(.96);background:var(--bleu-f)}
.ext-res{margin:10px 14px 0;font-size:12.5px;font-weight:800;color:var(--vert);opacity:0;transition:opacity .35s}
.ext-res.ok{opacity:1}
.ext-note{margin:10px 14px 14px;font-size:12px;color:var(--gris)}

/* ---- Calque 6 : Candidatures ---- */
.relance-pill{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--ambre-f);border:1px solid #F5D98E;color:var(--ambre);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .3s}
.relance-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.relance-pill b{font-weight:800}
.relance-pill.ping{transform:scale(1.06)}
.tableau{position:absolute;left:30px;right:30px;top:118px;height:420px;display:flex;gap:10px;will-change:transform}
.col{flex:1;min-width:0;background:var(--ciel2);border:1px solid var(--ligne);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;transition:background .3s,border-color .3s,box-shadow .3s}
.col.cible.survol{background:#EAF2FF;border-color:var(--bleu3);box-shadow:0 0 0 4px rgba(31,111,235,.08)}
.col-t{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--marine);padding:4px 4px 2px;line-height:1.2;min-height:34px}
.col-t i{flex:none;width:8px;height:8px;border-radius:50%}
.col-t b{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;border:1px solid var(--ligne);background:#fff;font-variant-numeric:tabular-nums}
.d1{background:#9AA8C2}.d2{background:var(--bleu)}.d3{background:#7A3FD1}.d4{background:#B7791F}.d5{background:var(--vert)}
.k{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.k .ini{width:26px;height:22px;border-radius:6px;font-size:10px}
.k small{position:absolute;left:44px;right:10px;top:13px;font-size:12px;line-height:1.3;color:var(--gris);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k b{margin-top:4px;font-size:13.5px;line-height:1.3;color:var(--marine)}
.k em{font-size:12px;color:var(--gris)}
.k em::before{content:"→ "}
.k em.ambre{color:var(--ambre);background:var(--ambre-f);border-radius:8px;padding:5px 8px;margin-top:4px}
.k em.ambre::before{content:""}
.fantome,.place{height:112px;border-radius:12px;flex:none}
.place{border:1.5px dashed transparent;transition:border-color .3s}
.col.cible.survol .place{border-color:var(--bleu3)}
.vide{border:1.5px dashed var(--ligne);border-radius:12px;padding:16px 10px;text-align:center;font-size:12.5px;color:var(--gris)}
.k.volante{position:absolute;left:0;top:0;width:180px;height:112px;z-index:5;will-change:transform;box-shadow:0 1px 2px rgba(11,30,79,.05)}
.k.volante.leve{box-shadow:0 30px 50px -18px rgba(11,30,79,.45),0 0 0 1.5px var(--bleu3)}
.k .relance{display:flex;align-items:center;gap:6px;margin-top:6px;padding:5px 8px;border-radius:8px;background:var(--ambre-f);color:var(--ambre);font-size:11.5px;font-weight:700;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.k .relance svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.k.volante.relancee .relance{opacity:1;transform:none}
.k.volante.relancee{height:auto}
.calendrier{position:absolute;left:30px;right:30px;bottom:22px;display:flex;align-items:center;gap:22px;padding:12px 18px;border-radius:14px;background:var(--marine);color:#CFE0FF;font-size:13px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.calendrier.ok{opacity:1;transform:none}
.cal-t{font-weight:600;white-space:nowrap}
.cal-jours{position:relative;flex:1;display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:#7F95C4;font-variant-numeric:tabular-nums}
.cal-jours .j0{color:#fff}
.cal-jours .j7{color:#FFC94D}
.cal-jours .cal-curseur{position:absolute;left:0;top:-7px;width:8px;height:8px;border-radius:50%;background:#FFC94D;box-shadow:0 0 0 4px rgba(255,201,77,.25);will-change:transform}

/* ============ Mode téléphone (≤ 820 px) ============ */
.tel .recit{left:16px;right:16px;top:auto;bottom:0;width:auto;height:var(--legende-h,236px)}
.tel .chap{top:14px;transform:none}
.tel .chap .num{margin-bottom:8px;font-size:11px}
.tel .chap .num b{height:22px;padding:0 7px}
.tel .chap h2{font-size:22px;line-height:1.12;letter-spacing:-.03em}
.tel .chap > p:not(.num){margin-top:8px;font-size:14px;line-height:1.5}
.tel .chap .btn{margin-top:12px;height:44px}
.tel .cadran{left:16px;right:16px;bottom:auto;top:calc(var(--nav-h) + 6px);justify-content:center}
.tel .montre,.tel .cadran-txt{display:none}
.tel .puces{gap:4px}
.tel .puces button{width:calc((100vw - 60px) / 8);height:14px}
.tel .puces i{height:3px}
.tel .puces span{display:none}
.tel .poste{left:0;right:0;width:auto;top:calc(var(--nav-h) + 24px);bottom:var(--legende-h,236px);perspective:1400px;align-items:center}
.tel .appareil{width:min(66vw,calc((100svh - var(--nav-h) - 24px - var(--legende-h,236px) - 14px) * .468),320px)}
.tel .face{border-radius:13% / 6.2%;padding:3.2%;background:#0d0f14;box-shadow:0 0 0 1.5px #3b404b,0 30px 60px -24px rgba(11,30,79,.55)}
.tel .face::before{display:none}
.tel .ecran{aspect-ratio:340/736;border-radius:10.5% / 4.9%;clip-path:inset(0 round 10.5% / 4.9%)}
.tel .virtuel{width:340px;height:736px}
.tel .dos,.tel .socle{display:none}
.tel .ombre-sol{top:98%;height:40px}
.tel .chrome{height:66px;display:block;padding:0;background:#F6F8FB}
.tel .feux{display:none}
.tel .chrome::before{content:"";position:absolute;left:50%;top:9px;width:94px;height:26px;margin-left:-47px;border-radius:14px;background:#05070c}
.tel .chrome .heure{display:block;position:absolute;left:28px;top:12px;font-size:14px;font-weight:700;color:#111}
.tel .chrome .reseau{display:flex;position:absolute;right:26px;top:15px;gap:2px;align-items:flex-end}
.tel .reseau i{width:3px;background:#111;border-radius:1px}
.tel .reseau i:nth-child(1){height:5px}.tel .reseau i:nth-child(2){height:7px}.tel .reseau i:nth-child(3){height:9px}
.tel .reseau b{width:20px;height:10px;border-radius:3px;border:1.5px solid #111;margin-left:5px;background:linear-gradient(90deg,#111 70%,transparent 70%);background-clip:content-box;padding:1px}
.tel .chrome .url{top:38px;left:12px;right:12px;transform:none;min-width:0;height:24px;font-size:11.5px;border-radius:7px}
.tel .zone{top:66px}
.tel .barre-app{display:none}
.tel .calque.dans-app{left:0;bottom:54px}
.tel .onglets-tel{display:flex;position:absolute;left:0;right:0;bottom:0;height:54px;border-top:1px solid var(--ligne);background:rgba(255,255,255,.96);justify-content:space-around;align-items:center;z-index:4;padding-bottom:4px}
.tel .onglets-tel span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--gris2);transition:color .3s}
.tel .onglets-tel span.on{color:var(--bleu)}
.tel .etapes{height:44px;gap:4px;font-size:11px}
.tel .etapes span{font-size:0;gap:0}
.tel .etapes span.on{font-size:11px;gap:5px}
.tel .etapes i{width:14px}
.tel .onb-corps{width:auto;margin:26px 18px 0}
.tel .onb-corps h3{font-size:31px}
.tel .onb-sous{font-size:14px}
.tel .depot{height:270px}
.tel .depot-lu{padding:16px}
.tel .fichier b{font-size:13.5px}
.tel .fichier small{display:none}
.tel .x{font-size:12px;height:28px;padding:0 10px}
.tel .cv-vol{transform-origin:0 0}
.tel .pp-tete{padding:0 18px}
.tel .pp-tete span{display:none}
.tel .pp-hero{padding:18px 18px 10px}
.tel .pp-hero h4{font-size:44px}
.tel .pp-hero p{font-size:15px}
.tel .pp-btn{height:32px;font-size:12px;padding:0 12px;margin-top:10px}
.tel .pp-traj,.tel .pp-projet{margin-left:18px;margin-right:18px}
.tel .traj-zone{height:56px}
.tel .pp-meta{display:none}
.tel .pp-r,.tel .traj-et span,.tel .pp-quand,.tel .pp-table .ln span:nth-child(2){display:none}
.tel .traj-et{height:18px}
.tel .pp-carte{grid-template-columns:1fr;padding:10px 12px}
.tel .pp-table .ln{grid-template-columns:1fr 30px;font-size:11.5px}
.tel .toast-35{left:14px;right:14px;bottom:14px;justify-content:center;height:40px;font-size:13px}
.tel .toast-proj{left:14px;right:14px;bottom:62px;justify-content:center;font-size:12px}
.tel .app-tete{padding:16px 16px 0}
.tel .app-tete h3{font-size:26px}
.tel .app-tete p{font-size:13px}
.tel .compteur,.tel .c-crm .app-tete p{display:none}
.tel .radar-bandeau{margin:12px 16px 0;font-size:11px;height:30px;padding-right:10px}
.tel .liste-tri{left:12px;right:12px;top:140px}
.tel .ligne-o{height:48px;gap:9px;padding:0 10px;flex-wrap:wrap;align-content:center;row-gap:0}
.tel .ligne-o .ini{width:26px;height:26px;font-size:10px}
.tel .ligne-o .soc{width:auto;flex:1;font-size:13px}
.tel .ligne-o .tit{display:none}
.tel .ligne-o .vil{width:auto;font-size:11.5px}
.tel .ligne-o .sc{width:40px;height:24px;font-size:12px}
.tel .pile{left:14px;right:14px;width:auto;margin-left:0;top:120px;height:350px}
.tel .carte{padding:18px}
.tel .c-titre{font-size:18px}
.tel .raisons li{font-size:13px;align-items:flex-start}
.tel .tampon{top:14px;right:84px;font-size:15px;padding:4px 9px}
.tel .boutons-tri{top:488px;left:14px;right:14px;transform:none}
.tel .boutons-tri span{flex:1;width:auto;height:46px;font-size:15px}
.tel .fiche-cam{padding:16px}
.tel .f-tete{flex-wrap:wrap;gap:10px}
.tel .ini.gros{width:42px;height:42px;font-size:14px}
.tel .f-titre{flex-basis:calc(100% - 110px)}
.tel .f-titre h3{font-size:16.5px}
.tel .f-titre p{font-size:12px;flex-wrap:wrap}
.tel .f-score{padding-left:10px}
.tel .f-score b{font-size:28px}
.tel .f-grille{grid-template-columns:1fr;gap:14px;margin-top:14px}
.tel .f-gauche .f-h:nth-of-type(2),.tel .f-lignes{display:none}
.tel .f-raisons{margin-bottom:0}
.tel .f-raisons li{font-size:12.5px;padding:3px 0}
.tel .bloc{padding:12px}
.tel .tag-dec{display:none}
.tel .mail{left:8px;right:8px;width:auto;margin-left:0;top:8px}
.tel .mail-tete{padding:12px 14px}
.tel .mail-tete span{display:none}
.tel .mail-champ{padding:8px 14px;font-size:12.5px;min-height:36px;gap:8px}
.tel .mail-champ span{width:36px}
.tel .mail-champ em{display:none}
.tel .mail-corps{padding:12px 14px;font-size:13px;min-height:300px;line-height:1.55}
.tel .mail-pied{flex-wrap:wrap;padding:10px 14px 12px}
.tel .pied-note{flex-basis:100%;font-size:11.5px}
.tel .m-btn{height:34px;font-size:12.5px}
.tel .annot{padding:0 14px 12px;flex-wrap:wrap;gap:6px}
.tel .annot span{font-size:11px}
.tel .form-site{width:auto;right:0;padding:16px 16px}
.tel .form-site::before{height:92px}
.tel .form-site h3{font-size:22px}
.tel .champs{grid-template-columns:1fr;gap:8px;margin-top:22px}
.tel .ch i{height:32px;font-size:12.5px}
.tel .ch.large.relire i{height:62px}
.tel .ext-panneau{left:8px;right:8px;top:auto;bottom:8px;width:auto}
.tel .ext-compte,.tel .ext-txt,.tel .ext-note{display:none}
.tel .ext-tete{height:38px}
.tel .ext-res{margin-bottom:12px}
.tel .tableau{left:12px;right:auto;top:76px;width:auto;height:420px}
.tel .col{flex:none;width:150px}
.tel .calendrier{left:10px;right:10px;bottom:12px;flex-direction:column;align-items:stretch;gap:12px;padding:10px 14px;font-size:11.5px}
.tel .cal-t{white-space:normal}
.tel .relance-pill{height:30px;font-size:12px;padding:0 10px}
.tel .retour-txt{display:none}

/* ---- Après critique : téléphone, tri et page ---- */
.tel .c-tri .app-tete p{display:none}
.tel .radar-bandeau{height:auto;min-height:30px;padding:5px 12px 5px 6px;border-radius:15px;line-height:1.3}
.tel .radar-bandeau .balai{flex:none}
.tel .liste-tri{top:112px}
.tel .pile{top:114px;height:404px}
.tel .boutons-tri{top:532px}
.tel .c-titre{font-size:16.5px}
.tel .raisons li{font-size:12.5px;padding:4px 0}
.tel .pp{padding-bottom:112px}
.tel .toast-35,.tel .toast-proj{top:auto}
.tel .tranche{display:none}

/* ================= Après critique : typographie, nav sombre, bento ================= */
:root{--ep:11px}
.pt{margin-left:-.1em}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.nav.sombre{background:rgba(5,12,34,.74);border-bottom-color:rgba(127,179,255,.14)}
.nav.sombre .marque,.nav.sombre .liens,.nav.sombre .lien-cnx{color:#E4ECFF}
.nav.sombre .marque .slogan{color:#C9D6F0;border-left-color:rgba(127,179,255,.25)}
.nav.sombre .marque img{background:#fff;padding:2px}
.nav.sombre .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.nav.sombre .burger i{background:#fff}
.nav .marque img{transition:background .35s,padding .35s}

/* ================= Sections suivantes ================= */
section{position:relative}
.tete{max-width:780px}
.tete .sur{margin-bottom:14px}

.tete h2{font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:800;color:var(--marine);text-wrap:balance}

.tete .sous{margin-top:18px;font-size:18px;line-height:1.6;color:var(--gris);max-width:640px}
.tete .sous a{color:var(--bleu);font-weight:700}
.revele{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.revele.vu{opacity:1;transform:none}

/* Démo : salle obscure */

/* Produit : bento */

/* Comment ça marche */

/* Pourquoi */

/* Tarifs */

table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
th{font-size:13px;color:var(--marine)}
td:first-child{color:var(--gris);font-weight:600}

/* FAQ */
.faq{padding:120px 0;background:var(--ciel2)}
.faq-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
.questions{display:grid;gap:12px}
.q{background:#fff;border:1px solid var(--ligne);border-radius:18px;transition:box-shadow .3s,border-color .3s,opacity .8s,transform .9s}
.q[open]{border-color:var(--bleu3);box-shadow:var(--ombre)}
.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:700;font-size:16.5px;color:var(--marine)}
.q summary::-webkit-details-marker{display:none}
.q summary i{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:var(--ciel)}
.q summary i::before,.q summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--bleu);border-radius:2px;transition:transform .3s}
.q summary i::after{transform:rotate(90deg)}
.q[open] summary i::after{transform:rotate(0)}
.q p{padding:0 22px 20px;color:var(--gris)}
.q p a{color:var(--bleu);font-weight:700}

/* Appel final */
.final{position:relative;padding:150px 0 160px;background:radial-gradient(ellipse 70% 80% at 50% 110%,#1F6FEB 0%,#0B1E4F 55%,#050C22 100%);color:#fff;text-align:center;overflow:hidden}
.final-arche{position:absolute;left:50%;bottom:-120px;width:520px;height:520px;margin-left:-260px;opacity:.16;filter:blur(1px)}
.final-arche img{display:none}
.final-arche::before{content:"";position:absolute;left:8%;right:8%;top:6%;bottom:0;border:clamp(56px,9vw,92px) solid #fff;border-bottom:0;border-radius:999px 999px 0 0;opacity:.5}
.final-in{position:relative}
.final h2{font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:800;max-width:900px;margin:0 auto;text-wrap:balance}
.final h2 em{color:var(--bleu3)}
.final p{margin-top:20px;font-size:18px;color:#B9C8E8}
.final .btn{margin-top:34px}

/* Pied */
.pied{background:var(--nuit);color:#8EA0C8;padding:34px 0 40px;font-size:14px}
.pied-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pied .marque{color:#fff}
.pastille-logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 6px 18px -8px rgba(59,139,255,.8)}
.pied .pastille-logo img{width:26px;height:26px;border-radius:0}
.pied .marque .slogan{color:#C9D6F0;border-left-color:#23315A;font-size:15px}
.pied nav{display:flex;gap:18px;flex-wrap:wrap}
.pied nav a:hover{color:#fff}

/* ================= Responsive des sections ================= */

@media (max-width:820px){
  .hero{top:calc(var(--nav-h) + 22px)}
  .hero .slogan.grand{font-size:17px;margin-bottom:10px}
  .hero h1{font-size:clamp(34px,9.4vw,44px);letter-spacing:-.04em}
  .hero .lead{font-size:15px;margin-top:14px;line-height:1.55}
  .ctas{margin-top:18px;flex-direction:column;align-items:stretch;gap:10px;padding:0 6px}
  .btn-grand{height:50px;font-size:15px}
  .checks{display:none}
  .indice{display:none}
  .tete h2{font-size:clamp(32px,8.6vw,44px)}
  .tete .sous{font-size:16px}
  
  
  
  
  
  
  
  
  
  .produit,.comment,.pourquoi,.tarifs,.faq{padding:84px 0}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .faq-grille{grid-template-columns:1fr;gap:30px}
  .q summary{font-size:15.5px;padding:18px}
  .q p{padding:0 18px 18px}
  .final{padding:100px 0 110px}
  .final p{font-size:16px}
  .final-arche{width:340px;height:340px;margin-left:-170px;bottom:-90px}
  .pied-in{flex-direction:column;align-items:flex-start}
  
}

/* ================= Mouvement réduit : version calme ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .revele{opacity:1;transform:none}
  
  
  
  .souris i{animation:none}
}
.rouleau{transition:box-shadow .4s}
.rouleau.pose{box-shadow:inset 0 6px 8px -6px rgba(11,30,79,.25),inset 0 -6px 8px -6px rgba(11,30,79,.25),0 0 0 3px rgba(91,20,55,.16)}

/* ================= Après critique 2 (30/09) ================= */
/* Hero : l'arche du dos se lit à l'endroit depuis la position de lecture (capot vu de l'avant) */
.dos img{transform:rotate(180deg);filter:drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 1px 0 rgba(60,70,90,.25)) drop-shadow(0 0 18px rgba(59,139,255,.35))}
/* Composition : la machine a de l'air des deux côtés (le socle ne touche plus le bord à 1440) */
.pc .poste{right:calc(var(--gauche) + 36px)}
.pc .appareil{width:min(92%,calc((100svh - var(--nav-h) - 110px) * 1.52),900px)}

/* Chapitre 02 : chrono qui claque à 35 s, pastille verte qui pulse une fois */
.chrono-bloc{position:relative;display:inline-block;transform-origin:0 70%;will-change:transform}
.puce-live{display:inline-block;width:.24em;height:.24em;margin-right:.2em;vertical-align:.2em;border-radius:50%;background:#FFB020;box-shadow:0 0 0 .07em rgba(255,176,32,.28);transition:background .25s,box-shadow .25s}
.chrono-bloc.fini .puce-live{background:#2BD47D;box-shadow:0 0 0 .07em rgba(43,212,125,.28);animation:pouls-vert 1.1s .05s ease-out 1}
@keyframes pouls-vert{0%{box-shadow:0 0 0 0 rgba(43,212,125,.55)}100%{box-shadow:0 0 0 .5em rgba(43,212,125,0)}}
.toast-35{will-change:transform}
.toast-35.fini .pastille{animation:pouls-vert 1.1s ease-out 1}

/* Chapitre 03 : la carte naît de la ligne (contenu de la ligne en contre-échelle), ombre de vol à part */
.carte .c-ligne{position:absolute;left:0;top:0;right:auto;padding:0 13px;border:0;background:transparent;box-shadow:none;transform-origin:0 0;will-change:auto;z-index:2;pointer-events:none}
.carte.active{transition:background .35s,border-color .35s}
.carte.vol{background:#F4F8FF;border-color:var(--bleu)}
.ombre-vol{position:absolute;inset:0;border-radius:22px;background:#fff;box-shadow:0 70px 110px -40px rgba(11,30,79,.6),0 26px 50px -30px rgba(31,111,235,.45);opacity:0;will-change:transform,opacity;pointer-events:none}
.c-titre{text-wrap:balance}

/* Chapitre 04 : pastille du chrono sur une ligne, chiffres tabulaires (le chrono ne bouge pas) */
.etat-qui{white-space:nowrap;flex:none}

/* Chapitre 07 : le bouton « Envoyer la candidature » tient dans l'écran */
.form-site{padding:16px 56px}
.form-site::before{height:100px}
.champs{margin-top:16px;gap:8px 18px}
.case{margin-top:10px}
.envoyer{margin-top:10px}

/* Chapitre 08 : tableau plus court, frise J → J+7 juste dessous et visible dès le début, gros plan final */
.crm-cam{position:absolute;inset:0;transform-origin:0 0}
.tableau{height:392px}
.calendrier{top:524px;bottom:auto;gap:26px;padding:14px 20px;transform:translateY(8px)}
.cal-t{display:flex;flex-direction:column;gap:3px;min-width:190px;white-space:nowrap}
.cal-t b{color:#fff;font-size:13.5px}
.cal-etat{font-size:12px;font-weight:700;color:#8FA6D6;font-variant-numeric:tabular-nums;transition:color .3s}
.calendrier.fini .cal-etat{color:#FFC94D}
.cal-jours{padding-top:16px;align-items:flex-start}
.cal-jours span{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:26px;color:#6E83B3;transition:color .3s}
.cal-jours span small{font-size:10px;font-weight:600;color:#6E83B3}
.cal-jours span.passe{color:#fff}
.cal-jours .j7.passe,.cal-jours .j7.passe small{color:#FFC94D}
.cal-rail{position:absolute;left:4px;right:4px;top:3px;height:2px;border-radius:2px;background:rgba(127,179,255,.22);overflow:hidden}
.cal-plein{display:block;height:100%;background:linear-gradient(90deg,#7FB3FF,#FFC94D);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.cal-jours .cal-curseur{top:0}
.calendrier.fini .cal-curseur{box-shadow:0 0 0 5px rgba(255,201,77,.3)}
.k .relance{white-space:nowrap;align-self:flex-start}
.tel .tableau{height:396px}
.tel .calendrier{top:484px;bottom:auto;gap:8px;padding:10px 12px}
.tel .cal-t{flex-direction:row;justify-content:space-between;min-width:0;gap:8px}
.tel .cal-t b{font-size:12px}
.tel .cal-etat{font-size:11px}
.tel .cal-jours{padding-top:14px}
.tel .cal-jours span{min-width:0;font-size:10.5px}
.tel .cal-jours span small{font-size:9px}

/* Sections après l'histoire : titres centrés (plus de moitié droite vide à 1440) */

/* Bento Match & manques : pastilles sur une ligne, libellé qui passe dessous sur téléphone */

.carte .c-in{transform-origin:0 0}
/* Le CV du hero : sort du bouton et vole jusque dans l'écran (ordinateur seulement) */
.cv-hero{z-index:4;visibility:hidden;opacity:0;pointer-events:none}
.tel .cv-hero{display:none}
/* Téléphone : caméra par chapitre. L'appareil grossit (1,35 à 1,45) autour de la zone utile, cadré par la scène ;
   pendant le gros plan, plus de calques figés (will-change) : le texte est redessiné net à la nouvelle échelle */
.tel .poste.cam{clip-path:inset(0 -60px)}
.tel .poste.cam .appareil,.tel .poste.cam .appareil *{will-change:auto!important}

/* Nom « Noveria Intern » (03/10/2026) : toujours sur une ligne ; sur téléphone, le slogan de l'en-tête laisse la place
   au nom (il est déjà repris en grand au-dessus du titre) */
.marque .nom{white-space:nowrap}
@media (max-width:560px){.nav .marque .slogan{display:none}}

/* Logos de l'appareil : width/height dans le HTML pour réserver la place, hauteur suivant la largeur en % (03/10/2026) */
.dos img,.eteint img{height:auto}

/* Sections du bas : mises en page seulement à l'approche (03/10/2026). Hauteurs de contenu mesurées (sans les marges intérieures) pour que la barre de défilement
   et les ancres #tarifs / #faq ne sautent pas ; « auto » garde ensuite la vraie hauteur. */
#tarifs,#faq,section.final,footer.pied{content-visibility:auto}
#tarifs{contain-intrinsic-size:auto 1216px}#faq{contain-intrinsic-size:auto 468px}
section.final{contain-intrinsic-size:auto 277px}footer.pied{contain-intrinsic-size:auto 82px}
@media (max-width:820px){
  #tarifs{contain-intrinsic-size:auto 2459px}#faq{contain-intrinsic-size:auto 629px}
  section.final{contain-intrinsic-size:auto 264px}footer.pied{contain-intrinsic-size:auto 207px}
}