/* CertyNEX — feuille de style commune au site vitrine
   v0.89 : arborescence « trois solutions » (menu Solutions, page Tarifs, cartes .sol3, blocs .uni et .vplace).
   v0.88 : thème « navy » unifié (d'après la maquette Certynex Consolidation) — fond bleu nuit, titres serif,
   surtitres en chasse fixe, boutons « beam » à bordure animée, écrans mis en valeur par un halo. */
:root{
  --bg:#0a1226; --card:#0e1a30; --soft:#0c1528; --soft2:#13294b; --line:#1c2b4a; --line2:#22345c;
  --navy:#1d3564; --navy2:#13294b;
  --ink:#e6edf8; --mut:#9db1d4; --faint:#7e93b8;
  --blue:#8ab4f8; --blue2:#4f8bff; --violet:#7c5cff;
  --teal:#3fd2c7; --teal2:#3fd2c7; --mint:#3fd2c7;
  --ok:#3fd2c7; --gold:#f5c66b; --goldbg:rgba(245,198,107,.12);
  --wrap:1440px;
  --mono:'SF Mono',ui-monospace,Consolas,monospace; --sans:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif; --serif:Georgia,'Times New Roman',serif;
  --wm:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='600' viewBox='0 0 1400 600'><g font-family='Georgia,Times New Roman,serif' font-weight='700' font-size='210' letter-spacing='-4' fill='none' stroke='rgba(190,205,235,0.11)' stroke-width='1'><text x='-60' y='215'>CertyNEX</text><text x='640' y='515'>CertyNEX</text></g></svg>"); --wmpos:0 0/1400px 600px repeat;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);
  font:16px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
/* v0.89 — filigrane : le mot CertyNEX en contour, répété derrière tout le site (sous le texte, jamais dessus :
   calque fixé en z-index négatif, contours à 7 % d'opacité, aucun impact sur la lisibilité) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--wm) var(--wmpos)}
section.alt{background:var(--wm) var(--wmpos) fixed,var(--soft)}
@media(max-width:700px){:root{--wmpos:0 0/900px 386px repeat}}
@media(prefers-reduced-motion:no-preference){}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.18;letter-spacing:-.5px;margin:0}
h1{font-family:var(--serif);font-size:clamp(32px,4.6vw,50px);font-weight:700;color:#fff;line-height:1.18}
h2{font-family:var(--serif);font-size:clamp(25px,3.2vw,34px);font-weight:700;color:#fff}
h3{font-size:18px;font-weight:700;color:#fff}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--mut)}
section{padding:76px 0}
section.alt{background:var(--soft)}
.kick{font:700 10.5px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.center{text-align:center}
.mx{max-width:720px;margin:0 auto}

/* ---------- barre de navigation ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(10,18,38,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid #16233f}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;flex:none;font-weight:700;color:#fff;letter-spacing:-.2px;font-family:var(--serif)}
.brand .wm{white-space:nowrap;display:flex;flex-direction:column;line-height:1.05}.brand .wm span{color:var(--teal)}
.brand .bk{font:700 9px var(--mono);letter-spacing:.25em;color:var(--blue);margin-bottom:3px}
.nav .links{display:flex;gap:22px;margin-left:14px;align-items:center}
.nav .links a{color:#9db1d4;font-size:13.5px;font-weight:500;white-space:nowrap}
.nav .links a:hover{color:#fff;text-decoration:none}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:10px 20px;font-weight:600;font-size:13.5px;
  border:1px solid #2a4573;background:transparent;color:#c7d3e8;cursor:pointer;transition:.15s;white-space:nowrap;font-family:var(--sans)}
.btn:hover{text-decoration:none;border-color:var(--blue);color:#fff}
.btn.p{background:linear-gradient(180deg,#fff,rgba(255,255,255,.92) 60%,rgba(255,255,255,.6));border-color:transparent;color:#0b1220;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn.p:hover{filter:brightness(1.04);color:#0b1220}
.btn.g{background:transparent;border-color:#2a4573;color:#c7d3e8}
.btn.g:hover{border-color:var(--blue);color:#fff}
.btn.lg{padding:13px 30px;font-size:15px;border-radius:12px}
/* bordure lumineuse tournante (conic-gradient animé), autour d'un bouton ou d'un écran */
@property --va{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam{position:relative;display:inline-flex;border-radius:11px}
.beam::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--va),transparent 0 60%,#7c5cff 74%,#4f8bff 84%,#3fd2c7 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:vspin 4.6s linear infinite}
.beam.lg{border-radius:12px}
@keyframes vspin{to{--va:360deg}}
@media(prefers-reduced-motion:reduce){.beam::before{animation:none}}
.lk-cnx,.lk-demo{display:none}
.burger{display:none;background:none;border:0;font-size:24px;color:#fff;cursor:pointer}
.nav .links a.on{color:#fff}
/* v0.89 — menu « Solutions » : trois entrées, ouvert au survol, au clavier (focus) ou au clic (tactile) */
.nsub{position:relative}
.sub-b{background:none;border:0;padding:0;font:inherit;text-decoration:none;font-size:13.5px;font-weight:500;line-height:1.62;color:#9db1d4;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sub-b svg{transition:transform .2s}
.sub-b:hover{text-decoration:none}
.sub-b:hover,.sub-b.on{color:#fff}
.sub-m{display:none;position:absolute;top:calc(100% + 14px);left:-14px;min-width:380px;text-align:left;background:#0d1830;border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:70}
.sub-m::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nsub:hover .sub-m,.nsub:focus-within .sub-m,.nsub.open .sub-m{display:block}
.nsub:hover .sub-b svg,.nsub.open .sub-b svg{transform:rotate(180deg)}
.nav .links .sub-m a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:9px;white-space:normal;color:#c7d3e8}
.nav .links .sub-m a:hover,.nav .links .sub-m a.on{background:#13294b;color:#fff}
.sub-m a b{font-size:13.5px;color:#fff;font-weight:600}
.sub-m a span{font-size:12px;color:var(--faint);line-height:1.45}
.sub-m a i{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-style:normal}
.sub-m a i.dev{color:var(--gold)}.sub-m a i.dem{color:#b8a6ff}

/* ---------- accroche ---------- */
.hero{background:var(--wm) var(--wmpos) fixed,radial-gradient(900px 420px at 50% -80px,#1d3564 0%,#0d1830 55%,#0a1226 100%);color:#fff;padding:78px 0 64px;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:15ch}
.hero .lead{color:#9db1d4;margin:18px 0 28px;max-width:60ch;font-size:clamp(15px,1.4vw,17px);line-height:1.7}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .rassure{margin-top:20px;color:#7e93b8;font-size:13px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.mock{position:relative;background:#0e1a30;border:1px solid rgba(138,180,248,.25);border-radius:16px;padding:18px 20px;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.mock::before{content:"";position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:115%;height:130%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(79,139,255,.34),rgba(63,210,199,.12) 45%,transparent 70%)}
.hero-grid>div{position:relative;z-index:1}
.mock .l{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(138,180,248,.18);
  font-size:13.5px;color:#c7d3e8}
.mock .l:last-child{border:0}
.mock .l b{color:#fff}
.mock .t{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:8px}
.mock .ok{color:var(--mint)}

/* ---------- bandeau de preuves ---------- */
.proof{background:#0e1a30;border-top:1px solid #16233f;border-bottom:1px solid #16233f;color:#9db1d4;padding:16px 0;font-size:13px;font-family:var(--mono)}
.proof .wrap{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.proof b{color:#fff}

/* ---------- grilles ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:34px}
.card{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card);transition:.18s}
.card:hover{border-color:#2a4573;transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.35)}
.card .ico{width:40px;height:40px;border-radius:10px;background:#13294b;border:1px solid #22345c;display:flex;align-items:center;
  justify-content:center;font-size:21px;margin-bottom:13px}
.card p{color:var(--mut);font-size:14.5px;margin:8px 0 0}

/* ---------- solutions ---------- */
.sol{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--card);display:flex;flex-direction:column}
.sol.dispo{border:2px solid var(--teal);box-shadow:0 10px 34px rgba(13,148,136,.13)}
.sol .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;margin-bottom:12px;align-self:flex-start}
.tag.on{background:rgba(63,210,199,.14);color:var(--teal)}
.tag.soon{background:var(--goldbg);color:var(--gold)}
.tag.next{background:var(--soft2);color:var(--mut)}
.sol ul{list-style:none;padding:0;margin:14px 0 20px;font-size:14.5px;color:var(--mut)}
.sol ul li{padding:5px 0 5px 23px;position:relative}
.sol ul li::before{content:"✔";position:absolute;left:0;color:var(--teal);font-weight:700}
.sol .foot{margin-top:auto}

/* ---------- étapes ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:22px;margin-top:38px}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;
  background:var(--teal);color:#06201d;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.step p{color:var(--mut);font-size:14.5px;margin:7px 0 0}

/* ---------- tarifs ---------- */
.prix{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:20px;margin-top:38px;align-items:start}
.pc{border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:var(--card);position:relative;display:flex;flex-direction:column}
.pc.pop{border:2px solid var(--teal);box-shadow:0 14px 40px rgba(13,148,136,.16)}
.pop-b{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#06201d;font-size:11px;
  font-weight:800;padding:5px 15px;border-radius:999px;white-space:nowrap;letter-spacing:.3px}
.pc .n{font-size:19px;font-weight:800}
.pc .d{color:var(--mut);font-size:13.5px;min-height:62px;margin-top:5px}
.pc .m{font-size:40px;font-weight:800;letter-spacing:-1.5px;margin-top:6px;line-height:1.05}
.pc .m small{font-size:14px;font-weight:650;color:var(--mut);letter-spacing:0}
.pc .a{font-size:13px;color:var(--faint);margin-bottom:18px}
.pc ul{list-style:none;padding:0;margin:18px 0 0;font-size:14px;color:var(--mut)}
.pc ul li{padding:5px 0 5px 23px;position:relative}
.pc ul li::before{content:"✔";position:absolute;left:0;color:var(--teal);font-weight:700}
.pc .b{margin-top:4px}

/* ---------- divers ---------- */
.faq details{border-bottom:1px solid var(--line);padding:17px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mut);margin:11px 0 0;font-size:15px}
.band{background:radial-gradient(700px 300px at 50% 120%,#1d3564 0%,#0e1a30 70%);border:1px solid #1c2b4a;color:#fff;border-radius:20px;padding:56px 44px;text-align:center;margin:0 22px}
.band h2{color:#fff}.band p{color:#8aa0c4;max-width:56ch;margin:12px auto 26px;font-size:14.5px}
.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .nav .links{display:none}
  .nav .links.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#0d1830;flex-direction:column;
    padding:16px 22px;gap:14px;border-bottom:1px solid var(--line)}
  .burger{display:block;margin-left:auto}
  /* « Connexion » quitte la barre (faute de place) mais DOIT rester atteignable : un client déjà
     inscrit se connecte depuis son téléphone. Elle passe dans le menu déroulant. */
  .nav .right .btn:not(.p){display:none}
  .nav .links .lk-cnx{display:block;font-weight:700;color:#fff;border-top:1px solid var(--line);padding-top:12px}
  /* menu déroulant : sur un téléphone, les trois solutions sont simplement listées, en retrait */
  .sub-b{display:none}
  .sub-m,.nsub:hover .sub-m{display:block;position:static;min-width:0;background:none;border:0;padding:0;box-shadow:none}
  .sub-m::before{display:none}
  .nav .links .sub-m .sub-t{display:block;font:700 10.5px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:6px;padding:0;border:0}
  .nav .links .sub-m a{padding:8px 0 8px 14px;border-left:2px solid var(--line);border-radius:0;margin-bottom:2px}
  .nav .links .sub-m a:hover{background:none}
  .nav{gap:10px}
  .nav .right .btn.p{padding:9px 13px;font-size:13.5px}
  .brand{font-size:18px;gap:7px}
  .brand svg{width:30px;height:30px;flex:none}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .band{padding:32px 22px}
}

/* ---------- page « gamme » : cartes de solution ---------- */
.gamme{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
@media(max-width:760px){.gamme{grid-template-columns:1fr}}
.gcard{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--card);display:flex;flex-direction:column;
  transition:.18s;text-decoration:none;color:inherit}
.gcard:hover{text-decoration:none;border-color:var(--teal);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.gcard.on{border:2px solid var(--teal)}
.gcard.soon{background:var(--soft);border-style:dashed}
.gcard .gi{width:52px;height:52px;border-radius:14px;background:var(--soft2);display:flex;align-items:center;
  justify-content:center;font-size:25px;margin-bottom:15px}
.gcard h3{font-size:21px;margin-bottom:4px}
.gcard .gt{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;margin-bottom:13px;align-self:flex-start}
.gcard p{color:var(--mut);font-size:14.5px;margin:0}
.gcard ul{list-style:none;padding:0;margin:14px 0 0;font-size:14px;color:var(--mut)}
.gcard ul li{padding:4px 0 4px 22px;position:relative}
.gcard ul li::before{content:"✔";position:absolute;left:0;color:var(--teal);font-weight:700}
.gcard .go{margin-top:auto;padding-top:18px;font-weight:700;color:var(--teal);font-size:14.5px}
.gcard.soon .go{color:var(--mut)}
/* ---------- bandeau de solution (pages produit) ---------- */
.pill-sol{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#dff0f4;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;margin-bottom:16px}
.pill-sol a{color:#9fe6dc}
.soon-band{background:var(--soft);border:1px dashed var(--line);border-radius:18px;padding:34px;text-align:center;margin-top:36px}

/* ---------- sélecteur de solution : présent sur chaque page produit ---------- */
.solsw{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.solsw>a,.solsw>span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:700;text-decoration:none;
  transition:.15s;white-space:nowrap}
.solsw>a:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}
.solsw>.cur{background:var(--teal);border-color:var(--teal);color:#06201d}
.solsw .sm{font-weight:600;font-size:11px;opacity:.65;margin-left:2px}
.solsw .all{border-style:dashed}
/* dans l'accroche sombre */
.hero .solsw{gap:6px;margin-bottom:22px}
.hero .solsw>a,.hero .solsw>span{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);
  color:#cfe4ea;font-size:12.5px;padding:5px 12px}
.hero .solsw>a:hover{background:rgba(255,255,255,.18);border-color:var(--mint);color:#fff}
.hero .solsw>.cur{background:var(--teal);border-color:var(--teal);color:#06201d}
.solsw-w{margin-top:38px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.solsw-w .solsw{justify-content:center;margin-bottom:0}
.solsw-w .lbl{font-size:12.5px;color:var(--faint);letter-spacing:.3px;margin-bottom:14px}
/* sur un téléphone, un libellé long ne doit pas pousser la page hors de l'écran */
@media(max-width:620px){.solsw>a,.solsw>span{white-space:normal;text-align:left}}
/* ---------- tarif d'une solution qui n'est pas encore commercialisée ---------- */
.psoon{max-width:520px;margin:30px auto 0;border:2px dashed var(--line);border-radius:20px;padding:32px;
  background:var(--soft);text-align:center}
.psoon .pt{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
  background:rgba(63,210,199,.12);border:1px solid rgba(63,210,199,.3);border-radius:999px;padding:4px 12px;display:inline-block}
.psoon .pm{font-size:31px;font-weight:800;letter-spacing:-.8px;margin:16px 0 6px}
.psoon p{color:var(--mut);font-size:14.5px;margin:0 auto 22px;max-width:44ch}

/* ---------- pied de page à cinq colonnes ---------- */
@media(max-width:1000px){}
/* ---------- durée d'engagement, au-dessus de la grille tarifaire ---------- */
.eng{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin:26px 0 4px}
.eng .lbl{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.eng button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 17px;cursor:pointer;
  font-weight:700;font-size:14px;color:var(--ink);font-family:inherit;display:inline-flex;align-items:center;gap:8px;
  transition:.15s}
.eng button:hover{border-color:var(--teal)}
.eng button.on{background:var(--teal);border-color:var(--teal);color:#06201d}
.eng button i{font-style:normal;font-size:11px;font-weight:800;background:var(--soft2);color:var(--teal);
  border-radius:999px;padding:2px 8px}
.eng button.on i{background:rgba(255,255,255,.22);color:#fff}
.eng-note{text-align:center;color:var(--faint);font-size:13px;margin:8px 0 0}
.pc .eco{color:var(--teal);font-weight:700;font-size:13px;margin-top:-4px}

/* ---------- « aujourd'hui » / « avec CertyNEX » ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.vs>div{border-radius:20px;padding:26px 28px;border:1px solid var(--line);background:var(--card)}
.vs .now{background:var(--soft);border-style:dashed}
.vs .cnx{border:2px solid var(--teal);box-shadow:0 14px 36px rgba(15,118,110,.10)}
.vs h3{font-size:17px;margin:0 0 4px;letter-spacing:-.2px}
.vs .kk{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px;
  display:inline-block;padding:3px 10px;border-radius:999px}
.vs .now .kk{background:rgba(240,110,90,.14);color:#f28b7a}
.vs .cnx .kk{background:var(--soft2);color:var(--teal)}
.vs ul{list-style:none;padding:0;margin:14px 0 0}
.vs li{position:relative;padding:8px 0 8px 27px;font-size:14.5px;color:var(--mut);line-height:1.55;
  border-top:1px solid var(--line)}
.vs li:first-child{border-top:none}
.vs .now li::before{content:"✕";position:absolute;left:0;top:8px;color:#f28b7a;font-weight:800}
.vs .cnx li::before{content:"✔";position:absolute;left:0;top:8px;color:var(--teal);font-weight:800}
.vs b{color:var(--ink)}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
/* ---------- tutoriels vidéo ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:36px}
.vid{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);display:flex;
  flex-direction:column;text-align:left;padding:0;font-family:inherit;cursor:pointer;transition:.18s}
.vid:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.vid[disabled]{cursor:default;opacity:.72}
.vid[disabled]:hover{transform:none;box-shadow:none;border-color:var(--line)}
.vid .th{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#13294b,#1d3564);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.vid .th img{width:100%;height:100%;object-fit:cover}
.vid .pl{position:absolute;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:19px;padding-left:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.vid .du{position:absolute;right:10px;bottom:10px;background:rgba(8,20,30,.78);color:#fff;font-size:11.5px;
  font-weight:700;border-radius:6px;padding:2px 8px}
.vid .bd{padding:17px 19px 20px}
.vid h3{font-size:15.5px;margin:0 0 7px;letter-spacing:-.2px}
.vid p{color:var(--mut);font-size:13.5px;line-height:1.55;margin:0}
.vid .soon{display:inline-block;margin-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;background:var(--soft);color:var(--mut);border-radius:999px;padding:3px 10px}
.vov{position:fixed;inset:0;z-index:9000;background:rgba(8,18,26,.86);display:flex;align-items:center;
  justify-content:center;padding:22px}
.vov .box{width:min(1000px,96vw)}
.vov .fr{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.vov iframe,.vov video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vov .cap{color:#dbe9ee;font-size:14px;margin-top:12px;display:flex;gap:14px;align-items:center}
.vov .cap b{color:#fff}
.vov .x{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;
  padding:7px 15px;cursor:pointer;font-weight:700;font-family:inherit}
.vids-vide{border:2px dashed var(--line);border-radius:20px;background:var(--soft);padding:34px;text-align:center;
  margin-top:32px;color:var(--mut)}

/* =========================================================================
   Démarrer un dossier : la démonstration guidée, la liste des pièces à
   réunir et les modèles de tableaux. (/liasse#demarrer)
   ========================================================================= */
.demo{max-width:1000px;margin:34px auto 0}
.demo{position:relative}
.demo::before{content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);width:110%;height:110%;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 30%,rgba(79,139,255,.28),rgba(63,210,199,.10) 45%,transparent 70%)}
.demo-scene{--bg:#fff;--card:#fff;--soft:#f4f7fa;--soft2:#eef4f6;--line:#e3e8f0;--ink:#141a29;--mut:#4d5872;--faint:#8b93a7;--navy:#0f3446;--teal:#0d9488;--teal2:#12b3a3;--ok:#158a5b;
  position:relative;border:1px solid rgba(138,180,248,.25);border-radius:16px;overflow:hidden;color:var(--ink);
  box-shadow:0 40px 120px rgba(0,0,0,.6);background:#fff}
.demo-scene h3{color:var(--navy)}
.demo-chrome{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--navy);color:#fff}
.demo-chrome .pt{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);flex:none}
.demo-chrome .url{margin-left:8px;font-size:11.5px;letter-spacing:.4px;color:rgba(255,255,255,.72)}
.demo-ecran{position:relative;height:400px;background:var(--soft);padding:16px 18px;overflow:hidden;
  font-size:12.5px;color:var(--ink)}
@media(max-width:700px){.demo-ecran{height:340px;font-size:11px;padding:12px}}
.demo-cur{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;z-index:5;
  transition:transform .72s cubic-bezier(.4,.02,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.demo-cur svg{display:block}
.demo-onde{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--teal2);
  margin:-6px 0 0 -6px;opacity:0;pointer-events:none}
.demo-cur.clic .demo-onde{animation:ondeClic .55s ease-out}
@keyframes ondeClic{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.demo-bas{margin-top:14px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.demo-leg{flex:1;min-width:260px;font-size:14.5px;color:var(--mut);line-height:1.55}
.demo-leg b{color:#fff;display:inline-block;min-width:44px}
.demo-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo-ctl button{border:1px solid var(--line);background:var(--card);color:#c7d3e8;border-radius:9px;
  padding:6px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;line-height:1.1}
.demo-ctl button:hover{background:var(--soft2)}
.demo-dots{display:flex;gap:5px;margin-left:6px}
.demo-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
.demo-dots i.on{background:var(--teal);transform:scale(1.35)}
@media(prefers-reduced-motion:reduce){.demo-cur{transition:none}}

/* --- écrans reconstitués --- */
.dk{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:700}
.dband{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;margin:-16px -18px 14px;padding:11px 18px}
.dband b{font-size:13.5px}
.dband .dsp{margin-left:auto;display:flex;gap:7px}
.dband .dsp span{background:rgba(255,255,255,.14);border-radius:7px;padding:3px 9px;font-size:11px}
.dtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dtab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:5px 10px;font-size:11px;font-weight:700;color:var(--mut)}
.dtab .n{width:16px;height:16px;border-radius:50%;background:var(--soft2);color:var(--faint);font-size:9.5px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.dtab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.dtab.on .n{background:rgba(255,255,255,.24);color:#fff}
.dtab.ok .n{background:var(--ok);color:#fff}
.dpan{border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:12px;background:var(--card);overflow:hidden}
.dpan .dh{padding:9px 14px;background:var(--soft2);border-bottom:1px solid var(--line)}
.dpan .dh b{font-size:14px;color:var(--navy);display:block}
.dpan .dh i{font-style:normal;font-size:11px;color:var(--faint);letter-spacing:1.2px;text-transform:uppercase;font-weight:700}
.dpan .db{padding:13px 14px}
.ddrop{border:2px dashed var(--line);border-radius:11px;padding:20px;text-align:center;color:var(--mut);background:var(--soft)}
.ddrop.on{border-color:var(--teal);background:#eefaf8;color:var(--navy)}
.ddrop b{color:var(--navy)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dfld label{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:3px}
.dfld div{border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:var(--card);font-size:11.5px;min-height:26px}
.dfld.fill div{border-color:var(--teal);background:#f2fbfa}
table.dt{width:100%;border-collapse:collapse;font-size:11px}
table.dt th{background:var(--navy);color:#fff;padding:5px 7px;text-align:left;font-weight:700;font-size:10px}
table.dt td{border-bottom:1px solid var(--line);padding:4px 7px}
table.dt td.n{text-align:right;font-variant-numeric:tabular-nums}
table.dt tr.tot td{background:#eefaf8;font-weight:800;color:var(--navy)}
.dpill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:800}
.dpill.ok{background:#e7f6ef;color:#0e8a5f}.dpill.bad{background:#fdecea;color:#b3261e}
.demo-scene .dmod{background:#fff}
.dmod{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;box-shadow:0 8px 24px rgba(15,52,70,.12)}
.dmod .dr{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:11px}
.dmod .dr span{flex:1;border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--soft)}
.dmod .dr b{flex:1;color:var(--navy)}
.dbtn{display:inline-block;background:var(--teal);color:#fff;border-radius:8px;padding:5px 13px;font-size:11.5px;font-weight:700}
.dbtn.g{background:var(--card);color:var(--navy);border:1px solid var(--line)}

/* --- ce qu'il vous faut --- */
.pieces{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:30px}
.piece{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:15px 17px}
.piece .ico{font-size:21px}
.piece h3{font-size:15.5px;margin:7px 0 5px}
.piece p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.5}
.piece .tag{display:inline-block;margin-top:9px;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800}
.piece .tag.req{background:var(--goldbg);color:var(--gold)}
.piece .tag.opt{background:var(--soft2);color:var(--mut)}
.piece .al{display:block;margin-top:7px;font-size:12px;color:var(--faint)}

/* --- les modèles --- */
.mods{margin-top:30px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.mods-h{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:20px 24px;background:var(--soft2);color:#fff;border-bottom:1px solid var(--line)}
.mods-h h3{font-size:19px;color:#fff}
.mods-h p{margin:5px 0 0;font-size:13.5px;color:rgba(255,255,255,.76);max-width:60ch}
.mods-h .dl{margin-left:auto}
.mods-h .dl a{display:inline-block;background:var(--teal2);color:#04302c;border-radius:10px;padding:11px 20px;
  font-weight:800;font-size:14.5px;white-space:nowrap}
.mods-h .dl a:hover{background:var(--mint);text-decoration:none}
.mods-h .dl small{display:block;text-align:center;margin-top:6px;font-size:11px;color:rgba(255,255,255,.6)}
table.modt{width:100%;border-collapse:collapse;font-size:13.5px}
table.modt th{text-align:left;padding:10px 24px;background:var(--soft2);color:#9db1d4;font-size:11px;
  text-transform:uppercase;letter-spacing:1px}
table.modt td{padding:10px 24px;border-bottom:1px solid var(--line);color:var(--mut)}
table.modt td:first-child{color:var(--ink);font-weight:700}
table.modt tr:last-child td{border-bottom:none}
table.modt .req{color:var(--gold);font-weight:800}
@media(max-width:760px){table.modt th:nth-child(3),table.modt td:nth-child(3){display:none}
  table.modt th,table.modt td{padding:9px 14px}.mods-h{padding:16px}}

/* Marqueur des champs d'identité non encore renseignés : `scripts/check_site.py` refuse la mise en
   ligne tant qu'il en reste un. Une page d'identité incomplète est pire que pas de page. */
.arens{color:var(--gold);background:var(--goldbg);border-radius:5px;padding:1px 7px;font-size:13px}

/* titre d'accueil : la seconde ligne, plus légère */
.h1-sous{display:block;font-weight:400;font-size:.6em;letter-spacing:0;margin-top:10px;color:var(--teal);font-style:italic}

/* démonstration : la barre des phases */
.demo-chap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.demo-chap button{border:1px solid var(--line);background:var(--card);color:var(--mut);border-radius:999px;padding:6px 12px 6px 6px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s,border-color .2s}
.demo-chap button i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--soft2);color:#c7d3e8;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.demo-chap button:hover{border-color:var(--teal)}
.demo-chap button.on{background:var(--navy);color:#fff;border-color:var(--blue2)}
.demo-chap button.on i{background:var(--teal);color:#06201d}
.demo-chap button.fait i{background:var(--teal);color:#06201d}
.demo-chap button.fait i::before{content:'✔';font-size:10px}
.demo-leg b{min-width:110px}
table.dt tr.tot td{font-weight:700;background:var(--soft2)}
@media(max-width:700px){.demo-chap button{font-size:11.5px;padding:5px 9px 5px 5px}}

/* ---------- la gamme en cartes (v0.86, d'après la maquette « Apple cards ») ---------- */

/* ---------- gamme : grille bento (bande sombre) ---------- */
#gamme,#solutions{background:var(--wm) var(--wmpos) fixed,var(--soft);color:#fff;padding:70px 0 76px;border-top:1px solid #16233f;border-bottom:1px solid #16233f}
#gamme .kick,#solutions .kick{color:var(--mint)}
#gamme h2,#solutions h2{color:#fff}
#gamme .lead,#solutions .lead{color:#9ca3af}#gamme .lead b,#solutions .lead b{color:#fff}
.bento{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(300px,auto);gap:14px}
.cell{position:relative;border:1px solid #1c2b4a;border-radius:18px;background:linear-gradient(180deg,#0e1a30,#0b1526);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s}
.cell:hover{border-color:rgba(138,180,248,.45);transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(87,224,208,.08) inset}
.cell::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(79,139,255,.18),transparent 70%);opacity:0;transition:opacity .3s}.cell:hover::before{opacity:1}
.bento>.c8{grid-column:span 8}.bento>.c4{grid-column:span 4}.bento>.c3{grid-column:span 3}
.cell .txt{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;margin-top:auto}
.cell h3{margin:0;font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:#fff}
.bento>.c8 h3{font-size:clamp(22px,2.2vw,28px)}
.cell p{margin:0;color:#9ca3af;font-size:13.5px;line-height:1.55}
.cell .badge{align-self:flex-start;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:4px 9px;border-radius:999px}
.cell .badge.dev{background:#f5c66b}.cell .badge.ann{background:#b8a6ff}
.cell .more{color:#fff;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:4px}.cell .more:hover{color:var(--mint);text-decoration:none}
.cell .cta{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:11px 16px;border-radius:999px;background:var(--card);color:#0b0f19;font-weight:600;font-size:14px;text-decoration:none}.cell .cta:hover{background:var(--mint);text-decoration:none}
.viz{flex:1;min-height:150px;padding:18px 18px 0;position:relative;overflow:hidden}
.vz-liasse{padding:20px 20px 0;display:flex;align-items:flex-end}
.win{width:100%;border-radius:12px 12px 0 0;background:#111f3a;border:1px solid rgba(138,180,248,.2);border-bottom:0;box-shadow:0 -10px 40px rgba(0,0,0,.4);font-size:12px;transform:translateY(6px);transition:transform .4s}.cell:hover .win{transform:translateY(0)}
.wbar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.08);color:#9ca3af;font-size:11px}.wbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}.wbar span{margin-left:6px}
.wtabs{display:flex;gap:4px;padding:8px 10px;flex-wrap:wrap}.wtabs b{font-weight:500;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.06);color:#e5e7eb;font-size:11px}.wtabs b.ok{margin-left:auto;background:rgba(87,224,208,.15);color:var(--mint)}
.wt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.wt td{padding:6px 12px;border-top:1px solid rgba(255,255,255,.06);color:#d1d5db}.wt td:nth-child(2){text-align:right;color:#fff;font-weight:500;white-space:nowrap}.wt td:nth-child(3){width:90px;text-align:right;font-size:11px}
.wt .ok,.pill.ok{color:var(--mint)}.wt .warn{color:#fcd34d}
.wfoot{display:flex;gap:6px;padding:10px 12px;flex-wrap:wrap}.pill{font-size:10.5px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:#9ca3af}.pill.ok{border-color:rgba(87,224,208,.35)}
.term{border-radius:12px;background:#08101f;border:1px solid rgba(138,180,248,.2);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;color:#cbd5e1;display:flex;flex-direction:column;gap:6px}
.tl{position:relative;padding-left:20px;opacity:0;transform:translateX(-6px);animation:tlin .4s ease-out forwards}
.tl::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.tl.off{color:#6b7280}.tl.off::before{content:"○";color:#6b7280}.tl b{color:#fff;font-weight:600}.tl.off b{color:#9ca3af}
.tl:nth-child(1){animation-delay:.1s}.tl:nth-child(2){animation-delay:.5s}.tl:nth-child(3){animation-delay:.9s}.tl:nth-child(4){animation-delay:1.3s}.tl:nth-child(5){animation-delay:1.7s}.tl:nth-child(6){animation-delay:2.1s}
@keyframes tlin{to{opacity:1;transform:none}}
.vz-docs{display:flex;align-items:flex-end;justify-content:center}
.doc{position:absolute;left:50%;bottom:0;width:66%;height:120px;border-radius:10px 10px 0 0;background:#f8fafc;box-shadow:0 -6px 30px rgba(0,0,0,.35);transition:transform .35s}
.doc.d3{transform:translate(-50%,0) rotate(-6deg);opacity:.35}.doc.d2{transform:translate(-50%,0) rotate(-3deg);opacity:.6}
.doc.d1{transform:translate(-50%,0);padding:14px 14px 0;display:flex;flex-direction:column;gap:5px;color:#0b0f19}.doc.d1 b{font-size:12px}.doc.d1 span{font-size:10px;color:#475569;line-height:1.4}.doc.d1 em{font-style:normal;font-size:9.5px;color:#0d9488;font-weight:700;margin-top:auto;padding-bottom:10px}
.cell:hover .doc.d3{transform:translate(-50%,-10px) rotate(-9deg)}.cell:hover .doc.d2{transform:translate(-50%,-5px) rotate(-4deg)}
.vz-audit{display:flex;align-items:flex-end;justify-content:center;min-height:230px}
.fiche{position:absolute;left:50%;bottom:10px;width:76%;padding:10px 12px;border-radius:12px;background:#111f3a;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .4s;display:flex;flex-direction:column;gap:2px}
.fiche b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);font-weight:700}.fiche span{font-size:12px;color:#e5e7eb}
.fiche.f1{transform:translate(-50%,0) rotate(-4deg)}.fiche.f2{transform:translate(-50%,-56px) rotate(3deg)}.fiche.f3{transform:translate(-50%,-112px) rotate(-2deg)}
.cell:hover .fiche.f1{transform:translate(-50%,0)}.cell:hover .fiche.f2{transform:translate(-50%,-64px)}.cell:hover .fiche.f3{transform:translate(-50%,-128px)}
.vz-conso{padding:14px 14px 0;display:flex;align-items:center}
.lnk path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.6s ease-out forwards}
.lnk path:nth-child(2){animation-delay:.2s}.lnk path:nth-child(3){animation-delay:.4s}.lnk path:nth-child(4){stroke-dasharray:3 3;stroke-dashoffset:0;animation:none}
@keyframes draw{to{stroke-dashoffset:0}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 18px 0}
.stats div{border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:12px}.stats b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}.stats span{font-size:11.5px;color:#9ca3af}
@media(max-width:1000px){.bento>.c8,.bento>.c4{grid-column:span 12}.bento>.c3{grid-column:span 6}}
@media(max-width:600px){.bento{grid-auto-rows:auto}.bento>.c3{grid-column:span 12}.viz{min-height:170px}}
@media(prefers-reduced-motion:reduce){.tl,.lnk path{animation:none;opacity:1;transform:none;stroke-dashoffset:0}.cell,.win,.doc,.fiche{transition:none}}

/* ---------- pied de page : carte sombre + texte révélé au survol ---------- */
footer{position:relative;margin:76px 16px 16px;border-radius:28px;overflow:hidden;background:#0e1a30;color:#9db1d4;border:1px solid #1c2b4a;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:0;font-size:14px}
@media(min-width:768px){footer{margin:90px 32px 32px}}
footer a{color:#9db1d4;text-decoration:none;transition:color .15s}footer a:hover{color:#fff;text-decoration:none}
.fgrad{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(79,139,255,.22),rgba(63,210,199,.06) 40%,transparent 70%)}
.fin{position:relative;z-index:1;padding:40px 24px 8px}
@media(min-width:768px){.fin{padding:56px 48px 8px}}
.fgrid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:768px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}}
footer h4{color:#fff;font-size:13px;margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
footer li{padding:0}
footer li a,footer li span{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.fct li svg{color:var(--mint);flex:none}
.fbadge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border-radius:999px;font:600 11px var(--mono);color:var(--teal);background:rgba(63,210,199,.1);border:1px solid rgba(63,210,199,.3)}
.fdot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}
.fdot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--mint);opacity:.5;animation:fping 1.4s ease-out infinite}
@keyframes fping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2);opacity:0}}
.fbot{border-top:1px solid #1c2b4a;margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;font:12px var(--mono);color:#7e93b8}
.fhover{position:relative;height:110px;margin-top:6px}
@media(min-width:768px){.fhover{height:200px}}
.fhover svg{width:100%;height:100%;display:block;cursor:default;user-select:none}
.fhover text{font-family:var(--serif);font-weight:700;font-size:172px;letter-spacing:-.01em}
.fbase{fill:transparent;stroke:rgba(255,255,255,.28);stroke-width:.5;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke .3s}
.fbase.draw{animation:fdash 3s ease-in-out forwards}
.fbase.on{stroke:rgba(255,255,255,.55)}
@keyframes fdash{to{stroke-dashoffset:0}}
.frev{fill:transparent;stroke:url(#frg);stroke-width:1.4;mask:url(#fmk);-webkit-mask:url(#fmk)}
@media(prefers-reduced-motion:reduce){.fdot::after,.fbase.draw{animation:none}.fbase{stroke-dashoffset:0}}

/* ---------- accroche centrée + écran mis en valeur (page Consolidation, d'après la maquette) ---------- */
.chero{text-align:center;padding:64px 0 40px}
.chero h1{max-width:24ch;margin:14px auto 10px}
.chero .lead{margin:0 auto 28px;max-width:56ch}
.chero .cta{justify-content:center}
.chero .rassure{margin-top:14px}
.chero .solsw{margin-bottom:26px}
.shot{width:min(1000px,100%);position:relative;margin:44px auto 0}
.shot .glow{position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:115%;height:130%;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(79,139,255,.34),rgba(63,210,199,.12) 45%,transparent 70%)}
.bshot{display:block;border-radius:15px;position:relative}
.bshot::before{inset:-1px;border-radius:15px;animation-duration:7s}
.shot img{position:relative;width:100%;height:auto;border-radius:14px;border:1px solid rgba(138,180,248,.25);box-shadow:0 40px 120px rgba(0,0,0,.6);display:block}
/* écran reconstitué du cockpit de consolidation (remplacé par la capture quand elle est fournie) */
.cockpit{position:relative;width:100%;border-radius:14px;border:1px solid rgba(138,180,248,.25);background:#0d1830;box-shadow:0 40px 120px rgba(0,0,0,.6);text-align:left;font-size:12px;color:#c7d3e8;overflow:hidden}
.ck-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #16233f;color:#9db1d4;font-size:11px}
.ck-bar i{width:9px;height:9px;border-radius:50%;background:#22345c}.ck-bar span{margin-left:8px}.ck-bar em{margin-left:auto;font:600 10px var(--mono);font-style:normal;border:1px solid #22345c;border-radius:6px;padding:2px 7px;color:#7e93b8}
.ck-body{display:grid;grid-template-columns:200px 1fr;min-height:330px}
.ck-side{border-right:1px solid #16233f;padding:12px 10px;display:flex;flex-direction:column;gap:2px;background:#0b1526}
.ck-side b{font:700 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7e93b8;padding:8px 8px 4px}
.ck-side a{padding:6px 9px;border-radius:7px;color:#9db1d4;font-size:11.5px}.ck-side a.on{background:#13294b;color:#fff}
.ck-main{padding:14px 16px}
.ck-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.ck-kpi div{border:1px solid #1c2b4a;border-radius:9px;padding:8px 10px;background:#0e1a30;color:#fff;font-weight:600;font-size:12px}
.ck-kpi small{display:block;font:600 9px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#7e93b8;margin-bottom:3px}
.ck-kpi code{font:600 11px var(--mono);color:var(--blue)}.ck-kpi .ok{color:var(--teal)}
.ck-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ck-t th{text-align:left;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7e93b8;padding:6px 8px;border-bottom:1px solid #1c2b4a}
.ck-t td{padding:7px 8px;border-bottom:1px solid #16233f;color:#c7d3e8}.ck-t td:nth-child(3),.ck-t td:nth-child(4){text-align:right;color:#fff}
.ck-t .ok{color:var(--teal)}.ck-t .warn{color:var(--gold)}
.ck-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cockpit .pill{font:600 10px var(--mono);padding:3px 9px;border-radius:999px;border:1px solid #22345c;color:#9db1d4}.cockpit .pill.ok{color:var(--teal);border-color:rgba(63,210,199,.35)}
@media(max-width:760px){.ck-body{grid-template-columns:1fr}.ck-side{display:none}.ck-kpi{grid-template-columns:1fr 1fr}.ck-t th:nth-child(5),.ck-t td:nth-child(5){display:none}}
/* trois arguments, normes, écosystème (composants de la maquette) */
.sub{color:#7e93b8;font-size:14px;text-align:center;max-width:60ch;margin:10px auto 30px;line-height:1.65}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1020px;margin:0 auto}
@media(max-width:820px){.g3{grid-template-columns:1fr}}
.f{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px 20px 18px}
.f .ic{width:36px;height:36px;border-radius:10px;background:#13294b;border:1px solid #22345c;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px}
.f h3{font-size:14.5px;margin-bottom:7px}
.f p{color:#8aa0c4;font-size:12.5px;line-height:1.65;margin:0}
.norms{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:1020px;margin:0 auto}
.norms span{font:600 11px var(--mono);border:1px solid #22345c;border-radius:999px;padding:6px 13px;color:#9db1d4}
.norms span b{color:var(--teal)}
.eco{background:linear-gradient(180deg,#0e1a30,#0a1226);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;max-width:1020px;margin:0 auto}
.eco .l{flex:1;min-width:260px}
.eco h3{font-family:var(--serif);font-size:20px;margin:6px 0 8px}
.eco p{color:#8aa0c4;font-size:13px;line-height:1.7;margin:0}
.eco .prods{display:flex;gap:12px;flex-wrap:wrap}
.eco .pr{background:#0b1526;border:1px solid #22345c;border-radius:13px;padding:15px 18px;min-width:190px;max-width:230px;color:inherit;transition:border-color .15s}
.eco .pr:hover{text-decoration:none;border-color:var(--blue)}
.eco .pr .t{font-family:var(--serif);color:#fff;font-weight:700;font-size:15px}
.eco .pr .d{color:#7e93b8;font-size:11.5px;margin-top:4px;line-height:1.55}
.eco .pr.on{border-color:#2f6fed;box-shadow:0 0 0 3px rgba(47,111,237,.15)}

/* capture d'écran dans la colonne de droite d'une accroche à deux colonnes */
.shotc{position:relative}
.shotc::before{content:"";position:absolute;left:50%;top:-20%;transform:translateX(-50%);width:130%;height:140%;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(79,139,255,.34),rgba(63,210,199,.12) 45%,transparent 70%)}
.shotc .bshot{display:block}
.shotc img{position:relative;width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(138,180,248,.25);box-shadow:0 40px 120px rgba(0,0,0,.6)}

/* =========================================================================
   v0.89 — réorganisation : trois solutions, un compte unique
   ========================================================================= */
/* « Choisissez votre solution » : trois cartes, même gabarit, sur la bande sombre #gamme */
.sol3{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sol3 .cell{min-height:520px}
.sol3 .cell .txt{gap:10px}
.sol3 .cell h3{font-family:var(--serif);font-size:22px;font-weight:700}
.sol3 .pub{font-size:12.5px;color:var(--faint);line-height:1.5}
.sol3 .pub b{color:#c7d3e8;font-weight:600}
.sol3 .cell .btn{align-self:flex-start;margin-top:6px}
.sol3 .viz{min-height:210px}
.sol3 .vz-audit{min-height:230px}
@media(max-width:1000px){.sol3{grid-template-columns:1fr}.sol3 .cell{min-height:0}}
/* jauge « public » sous chaque carte et dans les pages : cabinet · PME · grande entreprise */
.pubs{display:flex;gap:6px;flex-wrap:wrap}
.pubs span{font:600 10.5px var(--mono);letter-spacing:.06em;border:1px solid #22345c;border-radius:999px;padding:3px 9px;color:#9db1d4}
.pubs span.on{border-color:rgba(63,210,199,.5);color:var(--teal)}
/* le compte unique : la règle, puis les trois faits */
.uni{max-width:1020px;margin:36px auto 0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#0e1a30,#0a1226);padding:34px 30px}
.uni .regle{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);color:#fff;line-height:1.4;margin:0 0 8px;text-align:center}
.uni .regle b{color:var(--teal);font-weight:700}
.uni .note{text-align:center;color:var(--faint);font-size:13.5px;margin:0 auto 26px;max-width:66ch}
.uni .g3{max-width:none}
.uni .f p b{color:#e6edf8}
.uni .ex{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;font-size:13.5px;color:var(--mut);line-height:1.6}
.uni .ex b{color:#fff}
/* section « Pour qui » des pages de solution */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:32px}
.who>div{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card)}
.who .q{font:700 10.5px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.who h3{font-size:16.5px;margin-bottom:6px}
.who p{margin:0;color:var(--mut);font-size:14.2px;line-height:1.62}
.who ul{margin:8px 0 0;padding-left:18px;color:var(--mut);font-size:14px;line-height:1.6}
/* aperçu de l'outil : galerie de captures + mention honnête quand la capture n'existe pas encore */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:22px;margin-top:34px}
.shots figure{margin:0}
.shots figcaption{margin-top:10px;font-size:13.5px;color:var(--mut);line-height:1.5}
.shots figcaption b{color:#fff}
.shot-soon{border:2px dashed var(--line);border-radius:16px;background:var(--soft);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:26px;color:var(--mut)}
.shot-soon b{color:#fff;font-size:15px}
.shot-soon small{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
/* vidéos : emplacement explicitement « à venir » — jamais un faux lecteur */
.vplace{border:2px dashed var(--line);border-radius:20px;background:var(--soft);padding:36px 30px;text-align:center;margin-top:32px;color:var(--mut)}
.vplace .tag{display:inline-block;font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--goldbg);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.vplace b{color:#fff}
.vplace p{margin:8px auto 0;max-width:60ch;font-size:14.5px}
/* page Tarifs : une bande par offre */
.offre{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:30px 30px 26px;margin-top:26px}
.offre.first{margin-top:36px}
.offre .oh{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.offre .oh .n{font:700 10.5px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--blue)}
.offre h2{font-size:clamp(22px,2.6vw,28px);margin-top:4px}
.offre .oh p{margin:8px 0 0;color:var(--mut);font-size:14.5px;max-width:70ch}
.offre .oh .st{margin-left:auto;align-self:center}
.offre .st{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--teal);color:#06201d;white-space:nowrap}
.offre .st.dev{background:var(--gold)}.offre .st.dem{background:#b8a6ff}
.offre .prix{margin-top:28px}
.offre .pc .m{font-size:34px}.offre .pc .m small{white-space:nowrap}
.offre .inc{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.offre .inc div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--mut);line-height:1.5}
.offre .inc b{color:#fff;display:block;margin-bottom:2px}
.offre .psoon{margin-top:26px;max-width:none;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;text-align:left}
.offre .psoon p{margin:0;max-width:none}
.offre .psoon .pm{margin:8px 0 4px;font-size:24px}
@media(max-width:700px){.offre{padding:22px 18px}.offre .psoon{grid-template-columns:1fr}}
.offre .lnk{margin-top:18px;font-size:13.5px}
/* accueil : les trois solutions en bref (la page /solutions porte les cartes détaillées) */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.tri{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:22px;color:inherit;text-decoration:none;transition:.18s}
.tri:hover{border-color:var(--teal);transform:translateY(-3px);text-decoration:none;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.tri b{font-family:var(--serif);font-size:20px;color:#fff;line-height:1.25}
.tri .d{color:#9ca3af;font-size:14px;line-height:1.55}
.tri .p{font:600 11px var(--mono);color:var(--teal);margin-top:auto;padding-top:8px}
.tri .badge{align-self:flex-start;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:4px 9px;border-radius:999px}
.tri .badge.dev{background:#f5c66b}.tri .badge.ann{background:#b8a6ff}
@media(max-width:900px){.trio{grid-template-columns:1fr}}
@media(min-width:1025px){.nav .links .sub-m .sub-t{display:none}}

/* =========================================================================
   v0.90 — navigation à six titres, accroche « hero-1 », gamme en déploiement panoramique au défilement,
   « Voir l'outil » (captures, pas à pas, démonstration, vidéos) qui s'ouvre au clic
   ========================================================================= */
.nav .links .sub-m .sub-all{display:block;margin-top:4px;padding:9px 12px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;font-size:12.5px;color:var(--blue)}
.nav .links .sub-m .sub-all:hover{background:#13294b;color:#fff}
.nav .links{gap:20px}
@media(max-width:1180px) and (min-width:1025px){.nav .links{gap:14px;margin-left:6px}.nav .links a,.sub-b{font-size:13px}.nav .right .btn{padding:9px 14px}}

/* ---- accroche « hero-1 » : grille qui s'efface, grand titre en dégradé, horizon lumineux ---- */
.hx{position:relative;overflow:hidden;text-align:center;padding:92px 0 0;isolation:isolate}
.hx-grid{position:absolute;inset:0 0 auto 0;height:640px;z-index:-1;opacity:.9;pointer-events:none;
  background:linear-gradient(to right,rgba(138,180,248,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(138,180,248,.09) 1px,transparent 1px);
  background-size:6rem 5rem;-webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 70%,transparent 110%);mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 70%,transparent 110%)}
.hx-arc{position:absolute;left:50%;bottom:-560px;width:140%;height:900px;transform:translateX(-50%);border-radius:100%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#0a1226 84%,rgba(79,139,255,.55) 95%,rgba(186,214,255,.95));
  box-shadow:0 -30px 120px rgba(79,139,255,.18);animation:hxUp 1.4s .25s cubic-bezier(.2,.7,.2,1) both}
.hx-eye{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9db1d4;
  padding:8px 18px;border-radius:999px;border:2px solid rgba(255,255,255,.06);background:linear-gradient(to top right,rgba(212,212,216,.05),rgba(156,163,175,.05),transparent);
  text-decoration:none;animation:hxIn .8s both}
.hx-eye:hover{text-decoration:none;color:#fff}.hx-eye svg{transition:transform .3s}.hx-eye:hover svg{transform:translateX(4px)}
.hx-t{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.1vw,70px);line-height:1.06;letter-spacing:-.02em;margin:26px auto 0;max-width:21ch;text-wrap:balance;
  background:linear-gradient(to bottom right,#fff 30%,rgba(255,255,255,.42));-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;animation:hxIn .9s .08s both}
.hx-t2{display:block;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal);font-size:clamp(20px,2.3vw,30px);margin-top:14px;animation:hxIn .9s .16s both}
.hx-s{max-width:62ch;margin:20px auto 0;color:#9db1d4;font-size:clamp(15px,1.35vw,17.5px);line-height:1.7;animation:hxIn .9s .24s both}
.hx-s b{color:#fff}
.hx .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px;animation:hxIn .9s .32s both}
.hx .rassure{margin-top:16px;color:#7e93b8;font-size:13px;animation:hxIn .9s .4s both}
.hx .shot{margin-top:52px;animation:hxUp 1.1s .45s both}
.hx.small{padding-bottom:170px}.hx.small .hx-arc{bottom:-800px;opacity:.85}
@keyframes hxIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hxUp{from{opacity:0;transform:translate(var(--hx-x,0),40px)}to{opacity:1;transform:translate(var(--hx-x,0),0)}}
.hx-arc{--hx-x:-50%}
@media(prefers-reduced-motion:reduce){.hx-eye,.hx-t,.hx-t2,.hx-s,.hx .cta,.hx .rassure,.hx .shot,.hx-arc{animation:none}}

/* ---- la gamme en déploiement panoramique : les trois cartes empilées se déploient en arc au défilement ---- */
.pano{position:relative}
.pano-stage{position:relative}
.pano-head{text-align:center;max-width:720px;margin:0 auto}
.pano-cards{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pano-cards>li{margin:0}
a.solc{display:flex;flex-direction:column;height:100%;min-height:540px;border:1px solid #1c2b4a;border-radius:18px;background:linear-gradient(180deg,#0e1a30,#0b1526);
  color:inherit;text-decoration:none;overflow:hidden;position:relative;transition:border-color .25s,box-shadow .25s}
a.solc:hover{text-decoration:none;border-color:rgba(63,210,199,.55);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(63,210,199,.12) inset}
a.solc .viz{flex:none;min-height:210px}
a.solc .txt{padding:18px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
a.solc h3{font-family:var(--serif);font-size:22px;color:#fff;line-height:1.2;margin:0}
a.solc p{margin:0;color:#9ca3af;font-size:13.5px;line-height:1.55}
a.solc .badge{align-self:flex-start;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:4px 9px;border-radius:999px}
a.solc .badge.dev{background:#f5c66b}a.solc .badge.ann{background:#b8a6ff}
a.solc .go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:14px}
a.solc .go svg{transition:transform .25s}a.solc:hover .go svg{transform:translateX(4px)}a.solc:hover .go{color:var(--teal)}
a.solc .pub{font-size:12.5px;color:var(--faint);line-height:1.5}a.solc .pub b{color:#c7d3e8;font-weight:600}
/* mode panoramique (activé par le script sur grand écran, sans « mouvement réduit ») */
.pano.on{height:260vh}
.pano.on .pano-stage{position:sticky;top:70px;height:calc(100vh - 70px);overflow:hidden;perspective:1200px}
.pano.on .pano-head{position:absolute;left:0;right:0;top:3.5vh;z-index:20;padding:0 22px;will-change:transform,opacity}
.pano.on .pano-cards{position:absolute;inset:0;margin:0;display:block;transform-style:preserve-3d;will-change:transform}
.pano.on .pano-cards>li{position:absolute;left:50%;top:58%;width:min(370px,27vw);height:min(600px,68vh);margin-left:calc(min(370px,27vw) / -2);margin-top:calc(min(600px,68vh) / -2);
  will-change:transform;transform-origin:50% 50% -50px}
.pano.on a.solc{min-height:0;height:100%;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.pano.on a.solc .viz{min-height:0;height:34%;flex:none}
.pano.on a.solc .vz-audit{min-height:0}
.pano.on a.solc .txt{gap:7px;padding:14px 18px 18px}
.pano.on a.solc p{font-size:13px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pano.on a.solc .pubs{display:none}
.pano.on .pano-head .lead{display:none}
.pano.on .pano-foot{display:none}
.pano-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7e93b8;display:none}
.pano.on .pano-hint{display:block}
@media(max-width:1000px){.pano-cards{grid-template-columns:1fr}a.solc{min-height:0}}
/* téléphone : les cartes glissent en place au fil du défilement */
.pano-rv{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.pano-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pano-rv{opacity:1;transform:none;transition:none}}

/* ---- « Voir l'outil » : trois portes, chacune ouvre la visionneuse ---- */
.doors{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;margin-top:34px}
.door{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);
  cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.door:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.door .im{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d1830}
.door .im img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .5s}
.door:hover .im img{transform:scale(1.04)}
.door .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,18,38,.85))}
.door .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.door:hover .pl{transform:translate(-50%,-50%) scale(1.08)}
.door .n{position:absolute;left:16px;bottom:12px;z-index:2;font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.door .bd{padding:16px 18px 18px}
.door h3{font-size:17px;margin:0 0 6px}
.door p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.55}
@media(max-width:900px){.doors{grid-template-columns:1fr}}
/* la visionneuse : plein écran, la page Tutoriels en mode intégré */
.tmod{position:fixed;inset:0;z-index:9000;background:rgba(5,10,22,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;transition:opacity .25s}
.tmod.on{opacity:1}
.tmod .box{position:relative;width:min(1240px,100%);height:min(900px,100%);border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--bg);
  box-shadow:0 40px 120px rgba(0,0,0,.6);transform:translateY(16px) scale(.98);transition:transform .3s}
.tmod.on .box{transform:none}
.tmod iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.tmod .x{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:#0e1a30;color:#fff;
  font-size:20px;line-height:1;cursor:pointer}
.tmod .x:hover{border-color:var(--teal)}
@media(max-width:700px){.tmod{padding:0}.tmod .box{border-radius:0;height:100%}}

/* ---- page Tutoriels ---- */
.ttabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:26px 0 0}
.ttabs button{border:1px solid var(--line);background:var(--card);color:#c7d3e8;border-radius:999px;padding:9px 18px;font:600 14px var(--sans);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.15s}
.ttabs button:hover{border-color:var(--teal);color:#fff}
.ttabs button.on{background:var(--teal);border-color:var(--teal);color:#06201d}
.ttabs button i{font-style:normal;font:700 10px var(--mono);opacity:.7}
.tpan{display:none;animation:hxIn .45s both}.tpan.on{display:block}
.galg{margin-top:34px}
.galg h3{font:700 10.5px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.gal button{display:block;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:zoom-in;text-align:left;font:inherit;color:inherit;transition:.18s}
.gal button:hover{border-color:var(--teal);transform:translateY(-2px)}
.gal img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.gal span{display:block;padding:10px 12px;font-size:13px;color:#c7d3e8}
.gal span b{color:#fff;display:block;font-size:13.5px}
.pas{list-style:none;counter-reset:pas;margin:34px auto 0;padding:0;max-width:1020px}
.pas>li{counter-increment:pas;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.pas>li:first-child{border-top:0}
.pas .tx{position:relative;padding-left:58px}
.pas .tx::before{content:counter(pas);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:12px;background:var(--teal);color:#06201d;
  display:flex;align-items:center;justify-content:center;font:800 16px var(--sans)}
.pas .tx h3{font-size:18px;margin:0 0 8px}
.pas .tx p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.62}
.pas .tx .ph{display:inline-block;margin-top:10px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.pas button{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:none;cursor:zoom-in;display:block;width:100%;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.pas button img{display:block;width:100%;height:auto}
@media(max-width:820px){.pas>li{grid-template-columns:1fr;gap:14px}}
.lbx{position:fixed;inset:0;z-index:9500;background:rgba(5,10,22,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:12px}
.lbx img{max-width:min(1440px,100%);max-height:calc(100vh - 110px);border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lbx .cap{color:#c7d3e8;font-size:14px;text-align:center;max-width:80ch}.lbx .cap b{color:#fff}
.lbx .nv{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:#0e1a30;color:#fff;font-size:22px;cursor:pointer}
.lbx .nv.p{left:14px}.lbx .nv.s{right:14px}.lbx .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#0e1a30;color:#fff;font-size:20px;cursor:pointer}
body.embed header,body.embed footer,body.embed .emb-hide{display:none!important}
body.embed .tuto-top{padding-top:22px}
body.embed{padding-bottom:30px}
/* pages Sécurité et Questions */
.sec-h{max-width:760px;margin:0 auto;text-align:center}
.qchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.qchips a{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 15px;font-size:13.5px;color:#c7d3e8;font-weight:600}
.qchips a:hover{border-color:var(--teal);color:#fff;text-decoration:none}
.qgrp{max-width:840px;margin:0 auto;padding-top:34px}
.qgrp h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.qsearch{display:block;width:min(520px,100%);margin:22px auto 0;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:#0e1a30;color:#fff;font:15px var(--sans)}
.qsearch::placeholder{color:#7e93b8}

/* =========================================================================
   v0.91 — accueil : les solutions en carrousel « coverflow », sur un mur de photos de l'outil en fond
   ========================================================================= */
.cfsec{position:relative;overflow:hidden;isolation:isolate;background:var(--soft);border-top:1px solid #16233f;border-bottom:1px solid #16233f;padding:84px 0 70px}
/* le fond : un mur de captures, flou, sombre et lent — il ne passe jamais devant le texte (z-index négatif, voile par-dessus) */
.cf-bg{position:absolute;inset:-10% -5%;z-index:-2;pointer-events:none;overflow:hidden}
.cf-mur{display:grid;grid-template-columns:repeat(6,minmax(260px,1fr));gap:18px;width:190%;transform:rotate(-7deg) translate(-4%,-6%);
  filter:blur(2px) saturate(.8);opacity:.46;animation:cfMur 80s linear infinite alternate}
.cf-mur img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:12px}
@keyframes cfMur{to{transform:rotate(-7deg) translate(-24%,-2%)}}
.cf-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(10,18,38,.55),rgba(10,18,38,.86) 70%),linear-gradient(180deg,var(--soft) 0%,rgba(12,21,40,0) 18%,rgba(12,21,40,0) 82%,var(--soft) 100%)}
.cfsec .kick{color:var(--mint)}.cfsec .lead{color:#b3c3de}
.cfsec h2,.cfsec .lead{text-shadow:0 2px 18px rgba(5,10,22,.8)}
@media(prefers-reduced-motion:reduce){.cf-mur{animation:none}}
/* le carrousel */
.cf{--cf-card:clamp(210px,27vw,390px);margin-top:26px}
.cf-stage{position:relative}
.cf-frame{overflow:hidden;padding:44px 0;outline:none;cursor:grab;touch-action:pan-y;perspective:calc(var(--cf-card) * 3);border-radius:18px}
.cf-frame:focus-visible{box-shadow:0 0 0 2px var(--teal) inset}
.cf-frame.drag{cursor:grabbing}
.cf-track{position:relative;height:calc(var(--cf-card) * .625);transform-style:preserve-3d;user-select:none;-webkit-user-select:none;pointer-events:none}
.cf-card{pointer-events:auto}
.cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0d1830;
  border:1px solid rgba(138,180,248,.22);box-shadow:0 26px 60px rgba(0,0,0,.55);will-change:transform,opacity;display:block;color:inherit}
.cf-card img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;pointer-events:none;user-select:none}
.cf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,18,38,.8));pointer-events:none;transition:opacity .3s}
.cf-card.mid{border-color:rgba(63,210,199,.6);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(63,210,199,.25)}
.cf-card.mid:hover{text-decoration:none}
.cf-tag{position:absolute;left:12px;bottom:10px;z-index:2;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:4px 9px;border-radius:999px}
.cf-tag.dev{background:#f5c66b}.cf-tag.dem{background:#b8a6ff}
.cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:200;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(14,26,48,.8);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.cf-nav:hover{border-color:var(--teal);background:#13294b}
.cf-nav.p{left:6px}.cf-nav.s{right:6px}
.cf-cap{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:4px;padding:0 16px}
.cf-cap.in{animation:hxIn .35s both}
.cf-etat{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:4px 10px;border-radius:999px}
.cf-etat.dev{background:#f5c66b}.cf-etat.dem{background:#b8a6ff}
.cf-titre{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:#fff;margin:12px 0 0;text-shadow:0 2px 18px rgba(5,10,22,.8)}
.cf-ecran{color:#b3c3de;font-size:14.5px;margin:6px 0 0;max-width:62ch;min-height:1.6em}
.cf-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(680px,100%);margin:20px 0 0}
.cf-meta div{background:rgba(14,26,48,.78);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(4px)}
.cf-meta dt{font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7e93b8}
.cf-meta dd{margin:4px 0 0;color:#fff;font-size:13.5px;font-weight:600}
.cf-go{margin-top:20px}
.cf-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.cf-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#fff;opacity:.3;cursor:pointer;transition:opacity .2s,transform .2s}
.cf-dots button[aria-current="true"]{opacity:1;transform:scale(1.25);background:var(--teal)}
/* sans script : une rangée défilante de liens */
.cf:not(.on) .cf-track{pointer-events:auto;height:auto;display:flex;gap:14px;overflow-x:auto;padding:0 16px;scroll-snap-type:x mandatory}
.cf:not(.on) .cf-card{position:relative;left:auto;flex:none;scroll-snap-align:center}
.cf:not(.on) .cf-nav,.cf:not(.on) .cf-cap,.cf:not(.on) .cf-dots{display:none}
@media(max-width:700px){.cf{--cf-card:min(78vw,340px)}.cf-meta{grid-template-columns:1fr}.cf-nav{width:40px;height:40px}.cf-frame{padding:30px 0}.cf-mur{grid-template-columns:repeat(6,minmax(180px,1fr))}}

/* =========================================================================
   v0.92 — accueil : les trois solutions à égalité dans l'accroche ; carrousel de photos légendées
   ========================================================================= */
.trio3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1080px;margin:56px auto 0;text-align:left;animation:hxUp 1.1s .45s both}
.t3{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none;animation:t3f 7s ease-in-out infinite}
.t3.audit{animation-delay:-2.3s}.t3.conso{animation-delay:-4.6s}
.t3:hover{text-decoration:none}
.t3im{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(138,180,248,.25);box-shadow:0 30px 80px rgba(0,0,0,.55);transition:transform .3s,border-color .3s}
.t3im img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.t3:hover .t3im{transform:translateY(-6px);border-color:rgba(63,210,199,.6)}
.t3l{display:flex;flex-direction:column;gap:6px;padding:0 4px}
.t3l i{align-self:flex-start;font:700 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:3px 8px;border-radius:999px}
.t3l i.dev{background:#f5c66b}.t3l i.dem{background:#b8a6ff}
.t3l b{font-family:var(--serif);color:#fff;font-size:17px;line-height:1.25}
.t3:hover .t3l b{color:var(--teal)}
@keyframes t3f{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:760px){.trio3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 4px 8px;margin-left:-6px;margin-right:-6px}.t3{scroll-snap-align:center;animation:none}}
@media(prefers-reduced-motion:reduce){.t3{animation:none}}
/* cartes du carrousel : une photo, un voile sombre en bas, le texte par-dessus — toujours lisible, photo ou pas */
.cf{--cf-card:clamp(210px,23vw,310px)}
.cf-track{height:calc(var(--cf-card) * 1.3333)}
.cf-card{aspect-ratio:3/4;background:linear-gradient(160deg,#13294b,#0b1526)}
.cf-card.cf-liasse{background:linear-gradient(160deg,#0f4a52,#0b1526 70%)}
.cf-card.cf-audit{background:linear-gradient(160deg,#5a4513,#0b1526 70%)}
.cf-card.cf-conso{background:linear-gradient(160deg,#3b2f6e,#0b1526 70%)}
.cf-card img{object-position:center;opacity:0;transition:opacity .5s}
.cf-card img.ok{opacity:1}
.cf-card img.sans{display:none}
.cf-card::after{background:linear-gradient(0deg,rgba(7,13,28,.97) 0%,rgba(7,13,28,.86) 34%,rgba(7,13,28,.35) 62%,rgba(7,13,28,.05) 100%)}
.cf-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;text-align:left}
.cf-txt i{align-self:flex-start;font:700 9.5px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#06201d;background:var(--teal);padding:3px 8px;border-radius:999px}
.cf-txt i.dev{background:#f5c66b}.cf-txt i.dem{background:#b8a6ff}
.cf-txt b{font-family:var(--serif);color:#fff;font-size:clamp(16px,1.5vw,20px);line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.cf-txt em{font:600 10.5px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--teal)}
.cf-card.cf-audit .cf-txt em{color:#f5c66b}.cf-card.cf-conso .cf-txt em{color:#b8a6ff}
.cf-txt small{font-size:12.5px;line-height:1.45;color:#c7d3e8}
.cf-tag{position:static}
/* mur de photos en fond : flou, voilé, derrière le texte */
.cf-mur img{aspect-ratio:16/10;object-position:center;background:#0e1a30;opacity:0;transition:opacity .8s}
.cf-mur img.ok{opacity:1}.cf-mur img.sans{visibility:hidden}
.cf-mur{filter:blur(3px) saturate(.7);opacity:.42}
@media(max-width:700px){.cf{--cf-card:min(66vw,280px)}}
/* /solutions : la carte demandée depuis l'accueil s'allume */
a.solc.hl{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal),0 0 60px rgba(63,210,199,.35),0 30px 80px rgba(0,0,0,.55);animation:solHl 1.1s ease-in-out 3}
@keyframes solHl{50%{box-shadow:0 0 0 3px var(--teal),0 0 90px rgba(63,210,199,.55),0 30px 80px rgba(0,0,0,.55)}}
/* =========================================================================
   v0.93 — le carrousel de photos prend la place des trois aperçus, dans l'accroche
   ========================================================================= */
.cfhero{position:relative;margin-top:40px;isolation:isolate;animation:hxUp 1.1s .45s both}
.cfhero .cf-bg,.cfhero .cf-veil{inset:auto;top:-10px;bottom:-40px;left:50%;width:100vw;transform:translateX(-50%)}
.cfhero .cf-bg{-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent)}
.cfhero .cf-veil{background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(10,18,38,.5),rgba(10,18,38,.88) 75%)}
.cfhero .cf{margin-top:0}
.cf-slog{margin:0 0 -6px;font-family:var(--serif);font-size:clamp(18px,2.1vw,26px);color:#fff;text-shadow:0 2px 18px rgba(5,10,22,.85)}
.cf-slog span{display:inline-block;opacity:0;animation:slogIn .7s both}
.cf-slog span:nth-child(1){animation-delay:.9s}.cf-slog span:nth-child(2){animation-delay:1.4s;color:var(--teal);font-style:italic}.cf-slog span:nth-child(3){animation-delay:1.9s}
@keyframes slogIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cfhero .cf-titre,.cfhero .cf-ecran{text-shadow:0 2px 14px rgba(5,10,22,.9)}
@media(prefers-reduced-motion:reduce){.cfhero,.cf-slog span{animation:none;opacity:1}}
/* /solutions : des photos sur les cartes, une phrase-slogan sur chaque photo, des slogans qui se relaient en tête */
a.solc .sph{position:relative;display:block;flex:none;height:210px;overflow:hidden;background:linear-gradient(160deg,#13294b,#0b1526)}
a.solc.liasse .sph{background:linear-gradient(160deg,#0f4a52,#0b1526 75%)}a.solc.audit .sph{background:linear-gradient(160deg,#5a4513,#0b1526 75%)}a.solc.conso .sph{background:linear-gradient(160deg,#3b2f6e,#0b1526 75%)}
a.solc .sph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .6s}
a.solc .sph img.ok{opacity:1}a.solc .sph img.sans{display:none}
a.solc:hover .sph img{transform:scale(1.05)}
a.solc .sph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0c1628 2%,rgba(12,22,40,.55) 45%,rgba(12,22,40,.1) 100%)}
a.solc .sph q{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;quotes:"« " " »";font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.3;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.pano.on a.solc .sph{height:36%}
.pano-slog{position:relative;height:1.6em;margin:10px auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,22px);color:var(--teal)}
.pano-slog span{position:absolute;left:0;right:0;top:0;opacity:0;animation:slogTour 16s infinite}
.pano-slog span:nth-child(2){animation-delay:4s}.pano-slog span:nth-child(3){animation-delay:8s}.pano-slog span:nth-child(4){animation-delay:12s}
@keyframes slogTour{0%{opacity:0;transform:translateY(8px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.pano-slog span{animation:none}.pano-slog span:first-child{opacity:1}}

/* ===== v0.94 — le déroulé des pages (defil.js) : chaque bloc monte, se précise et apparaît au défilement ;
   les titres de section se dévoilent mot à mot ; le bandeau final grossit doucement. Le style du site est inchangé. */
.defil .dv{opacity:0;transform:translateY(38px) scale(.985);filter:blur(6px);transition:opacity .95s cubic-bezier(.22,1,.36,1) var(--dd,0s),transform .95s cubic-bezier(.22,1,.36,1) var(--dd,0s),filter .95s cubic-bezier(.22,1,.36,1) var(--dd,0s)}
.defil .dv.in{opacity:1;transform:none;filter:none}
.defil .dh .dw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .1em;margin:0 -.02em -.1em}
.defil .dh .dw>span{display:inline-block;transform:translateY(108%);opacity:0;transition:transform .85s cubic-bezier(.22,1,.36,1) calc(var(--dd,0s) + var(--i,0) * 55ms),opacity .5s ease calc(var(--dd,0s) + var(--i,0) * 55ms)}
.defil .dh.in .dw>span{transform:none;opacity:1}
.band.dsc{transform:scale(var(--dsc,1));transform-origin:50% 100%;will-change:transform}
@media(prefers-reduced-motion:reduce){.defil .dv,.defil .dh .dw>span{opacity:1;transform:none;filter:none;transition:none}.band.dsc{transform:none}}

/* ===== v0.95 — CertyAsset rejoint la gamme ; « Connexion » à deux choix ; projets juridiques ===== */
/* menu « Connexion » : CertyLiasse (app.certynex.com) ou CertyAsset (certyasset.certynex.com) */
.ncnx{position:relative}
.ncnx>button{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit}
.ncnx>button svg{transition:transform .2s}.ncnx.open>button svg{transform:rotate(180deg)}
.cnx-m{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:310px;background:#0d1830;border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:80;text-align:left}
.ncnx.open .cnx-m{display:block}
.cnx-t{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#7e93b8;padding:6px 12px 8px}
.cnx-m a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;color:#c7d3e8;text-decoration:none}
.cnx-m a:hover,.cnx-m a:focus{background:#13294b;color:#fff;text-decoration:none;outline:none}
.cnx-m a b{font-size:14px;color:#fff;font-weight:700}.cnx-m a span{font-size:12.5px;color:var(--faint)}
.cnx-m a em{font:600 10.5px var(--mono);font-style:normal;color:var(--teal)}
@media(max-width:1024px){.ncnx{display:none}.nav .links .lk-cnx2{border-top:0;padding-top:4px}}
/* la carte CertyAsset sur /solutions : étiquette dessinée, en attendant une photo (img/photos/sol-asset.jpg) */
a.solc.asset .sph{background:linear-gradient(160deg,#0f3d2e,#0b1526 75%)}
.atag{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);z-index:1;width:220px;padding:12px 14px 10px;border-radius:10px;background:#f4f1e8;color:#0a1226;box-shadow:0 18px 40px rgba(0,0,0,.45);font:700 14px var(--mono);letter-spacing:.06em;text-align:center}
.atag::before{content:"";display:block;height:38px;margin-bottom:8px;background:repeating-linear-gradient(90deg,#0a1226 0 2px,transparent 2px 4px,#0a1226 4px 7px,transparent 7px 9px,#0a1226 9px 10px,transparent 10px 13px)}
.atag small{display:block;font:600 9px var(--mono);letter-spacing:.2em;color:#5b6b86;margin-bottom:4px}
a.solc .sph img.ok~.atag{display:none}
.pano-cards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1180px){.pano-cards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.pano-cards.n4{grid-template-columns:1fr}}
.pano.on .pano-cards.n4>li{width:min(320px,21.5vw);margin-left:calc(min(320px,21.5vw) / -2)}
/* page /asset */
.afn{margin-top:30px}
.aprof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:12px;margin-top:30px}
.aprof>div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);display:flex;flex-direction:column;gap:4px}
.aprof b{color:#fff;font-size:14.5px}.aprof span{color:var(--mut);font-size:13.5px;line-height:1.55}
.ashot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0d1830}
.ashot img{display:block;width:100%;height:auto}
.ashot figcaption{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:10px 14px;border-top:1px solid var(--line)}
.ashot.wide{margin-top:26px}
.aview{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start;margin-top:34px}
.ashot.menu img{max-height:620px;object-fit:cover;object-position:top}
@media(max-width:860px){.aview{grid-template-columns:1fr}.ashot.menu{max-width:300px;margin:0 auto}.ashot.menu img{max-height:420px}}
.ashots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin-top:26px}
.ashots:empty{display:none}
/* projets de textes juridiques (CGU, confidentialité) */
.projet{border:1px dashed var(--gold);border-radius:12px;padding:14px 18px;margin:0 0 30px;color:#f5d48a;background:rgba(245,198,107,.06);font-size:14.5px;line-height:1.6}
.projet b{color:#f5c66b}
.ac{font:600 12.5px var(--mono);color:#0a1226;background:#f5c66b;border-radius:5px;padding:1px 6px;white-space:normal}
.jur h2{margin-top:46px;font-size:24px}.jur h3{margin-top:22px;font-size:17px}
.jur p,.jur li{color:var(--mut);font-size:15px;line-height:1.7}.jur ul{padding-left:20px}
.jur table{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* v0.95 — quatre arguments en 2 × 2 (page /asset) */
.g3.g4{grid-template-columns:repeat(2,1fr);max-width:900px}
@media(max-width:820px){.g3.g4{grid-template-columns:1fr}}
/* ===== v0.96 — CertyAcademy (formation IFRS) ===== */
.acn-t{text-align:center;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:38px 0 14px}
.acn{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px;max-width:1080px;margin:0 auto}
.acn>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:3px;min-width:0}
.acn b{font:700 13px var(--mono);color:var(--teal)}
.acn span{color:#fff;font-size:13.5px;line-height:1.4}
.acn em{font:600 10.5px var(--mono);font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
.acn i{font-style:normal;font-size:11.5px;color:var(--gold)}
.aca-body{grid-template-columns:1fr 230px}
.aca-body .ck-main{min-width:0}
.aca-tabs{display:flex;gap:6px;margin-bottom:12px}
.aca-tabs span{font:600 10.5px var(--mono);padding:4px 10px;border-radius:999px;border:1px solid #22345c;color:#9db1d4}
.aca-tabs span.on{background:#13294b;color:#fff;border-color:rgba(63,210,199,.45)}
.aca-p{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:#c7d3e8}.aca-p b{color:#fff}
.aca-ex{border:1px solid #1c2b4a;border-radius:9px;padding:9px 11px;background:#0e1a30;margin-bottom:10px;font-size:12px;line-height:1.55;font-variant-numeric:tabular-nums}
.aca-ex small{display:block;font:600 9px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#7e93b8;margin-bottom:3px}
.aca-ex b{color:var(--teal)}
.cockpit .pill.warn{color:var(--gold);border-color:rgba(245,198,107,.35)}
.aca-side{border-left:1px solid #16233f;padding:14px 14px;background:#0b1526;display:flex;flex-direction:column;gap:10px}
.aca-side>b{font:700 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7e93b8}
.aca-side div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:11.5px;color:#c7d3e8}
.aca-side div i{grid-column:1/-1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--teal) var(--v),#1c2b4a var(--v))}
.aca-side em{font:600 9.5px var(--mono);font-style:normal;color:var(--faint)}
@media(max-width:760px){.aca-body{grid-template-columns:1fr}.aca-side{border-left:0;border-top:1px solid #16233f}}
.aca-off{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:30px auto 0}
.aca-off>div{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--card)}
.aca-off .pt{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.aca-off h3{margin:6px 0 10px;font-size:19px}
.aca-off ul{margin:0;padding-left:18px;color:var(--mut);font-size:14px;line-height:1.7}
@media(max-width:700px){.aca-off{grid-template-columns:1fr}}
/* carte CertyAcademy sur /solutions : une fiche de norme dessinée */
a.solc.academy .sph{background:linear-gradient(160deg,#4a2a14,#0b1526 75%)}
.anorm{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(3deg);z-index:1;width:210px;padding:12px 14px;border-radius:10px;background:#f4f1e8;color:#0a1226;box-shadow:0 18px 40px rgba(0,0,0,.45);font:600 11px var(--mono)}
.anorm b{display:block;font:700 15px var(--mono);margin-bottom:6px}
.anorm i{display:block;height:6px;border-radius:3px;margin-top:5px;background:linear-gradient(90deg,#0f8f86 var(--v),#d8d2c2 var(--v))}
a.solc .sph img.ok~.anorm{display:none}
.pano-cards.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1180px){.pano-cards.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.pano-cards.n5{grid-template-columns:1fr}}
.pano.on .pano-cards.n5>li{width:min(280px,17.5vw);margin-left:calc(min(280px,17.5vw) / -2)}
.pano.on .pano-cards.n5 a.solc h3{font-size:19px}
/* v0.97 — grille CertyAsset sur /asset (hors bloc .offre) */
.inc.offre-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px;max-width:1080px;margin-left:auto;margin-right:auto}
.inc.offre-inc div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--mut);line-height:1.5}
.inc.offre-inc b{color:#fff;display:block;margin-bottom:2px}
/* v0.98 — le « spot » de l'essai gratuit de 48 h sur /asset */
.spot48{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px 34px;max-width:1000px;margin:30px auto 0;padding:26px 32px;text-align:left;border-radius:22px;border:1px solid rgba(63,210,199,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(63,210,199,.22),rgba(13,24,48,.0) 55%),linear-gradient(135deg,#10243f,#0c1628);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(245,198,107,.15) inset}
.s48-big{font:800 96px/0.9 var(--serif);color:#fff;letter-spacing:-4px;text-shadow:0 0 40px rgba(63,210,199,.45)}
.s48-big span{font-size:44px;color:var(--teal);letter-spacing:0;margin-left:4px}
.s48-k{font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.s48-txt h2{margin:0 0 8px;font-size:24px;line-height:1.2;text-wrap:balance}
.s48-txt p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.6}
@media(max-width:860px){.spot48{grid-template-columns:1fr;text-align:center;padding:24px 20px}.s48-big{font-size:80px}}
.spot48 .beam{justify-self:center}
/* v0.98 — accueil : cartes CertyAsset et CertyAcademy dans le carrousel */
.cf-card.cf-asset{background:linear-gradient(160deg,#0f3d2e,#0b1526 70%)}
.cf-card.cf-academy{background:linear-gradient(160deg,#4a2a14,#0b1526 70%)}
.cf-card.cf-asset .cf-txt em{color:#3fd2c7}.cf-card.cf-academy .cf-txt em{color:#f5c66b}
.cf-card .atag,.cf-card .anorm{top:34%;transform:translate(-50%,-50%) rotate(-4deg) scale(.85)}
.cf-card img.ok~.atag,.cf-card img.ok~.anorm{display:none}

/* v0.98 — pages élargies (largeur utile 1440 px) ; carrousel de l'accueil sur toute la largeur de l'écran */
@media(min-width:1200px){.wrap{padding:0 40px}}
.cfhero .cf{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.cfhero .cf-frame{border-radius:0}
@media(min-width:1100px){.cf{--cf-card:clamp(240px,19vw,360px)}}
.cfhero .cf-cap{max-width:var(--wrap);margin-left:auto;margin-right:auto}
/* v0.98 — CertyAcademy : les domaines en carrousel */
.dcar{position:relative;margin-top:30px}
.dcar-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,82vw);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;scrollbar-width:thin}
.dcar-track>article{scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;background:var(--card);display:flex;flex-direction:column;gap:8px;min-height:230px}
.dcar-track>article.on{border-color:rgba(63,210,199,.6);background:radial-gradient(120% 120% at 0 0,rgba(63,210,199,.16),transparent 60%),var(--card)}
.dcar-track .dk{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dcar-track .on .dk{color:var(--teal)}
.dcar-track h3{margin:0;font-family:var(--serif);font-size:23px;color:#fff}
.dcar-track p{margin:0;color:var(--mut);font-size:14px;line-height:1.6}
.dcar-track .dst{margin-top:auto;align-self:flex-start;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 10px;border:1px solid currentColor;color:var(--faint)}
.dcar-track .on .dst{color:#06201d;background:var(--teal);border-color:var(--teal)}
.dcar-nav{display:flex;gap:10px;justify-content:center;margin-top:8px}
.dcar-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:#fff;font-size:18px;cursor:pointer}
.dcar-nav button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* v0.98 — domaines Academy : une photo par domaine, sans barre de défilement visible */
.dcar-track{scrollbar-width:none}.dcar-track::-webkit-scrollbar{display:none}
.dcar-track>article{padding:0 0 20px;overflow:hidden}
.dcar-track>article>*:not(.dimg){margin-left:22px;margin-right:22px}
.dimg{display:block;height:170px;margin:0 0 6px;background:linear-gradient(160deg,#13294b,#0b1526);overflow:hidden;position:relative}
.dimg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.dimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,26,48,.85),transparent 55%)}
.dcar-track>article:not(.on) .dimg img{filter:saturate(.75)}

/* ===================================================================== v0.99 — en-tête agrandi, barre des solutions figée */
:root{--hh:70px}
@media(min-width:1025px){
  :root{--hh:88px}
  header .wrap.nav{max-width:1760px;height:88px;gap:34px;padding:0 48px}
  .brand{font-size:27px;gap:13px}
  .brand svg{width:46px;height:46px}
  .brand .bk{font-size:10px;margin-bottom:4px}
  .nav .links{gap:34px;margin-left:26px}
  .nav .links a,.sub-b{font-size:16px}
  .nav .right{gap:14px}
  .nav .right .btn{padding:13px 24px;font-size:15.5px;border-radius:12px}
  .sub-m{top:calc(100% + 24px)}.sub-m::before{top:-26px;height:26px}
  .sub-m a b{font-size:15px}.sub-m a span{font-size:13px}
  .cnx-m{top:calc(100% + 14px)}
}
@media(max-width:1280px) and (min-width:1025px){
  header .wrap.nav{padding:0 28px;gap:22px}.nav .links{gap:22px;margin-left:10px}
  .nav .links a,.sub-b{font-size:15px}.brand{font-size:24px}.brand svg{width:40px;height:40px}
  .nav .right .btn{padding:11px 18px;font-size:14.5px}
}
.solbar{position:sticky;top:var(--hh);z-index:55;background:rgba(10,18,38,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #16233f;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.solbar .wrap{max-width:1760px}
.solbar .solsw{flex-wrap:nowrap;justify-content:center;gap:12px;margin:0;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.solbar .solsw::-webkit-scrollbar{display:none}
.solbar .solsw>a,.solbar .solsw>span{flex:none;font-size:16px;font-weight:600;padding:11px 20px;border-radius:999px;gap:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#dbe5f5;white-space:nowrap;transition:.18s}
.solbar .solsw>a:hover{background:rgba(63,210,199,.14);border-color:var(--teal);color:#fff;transform:translateY(-1px)}
.solbar .solsw>.cur{background:linear-gradient(135deg,#3fd2c7,#57e0d0);border-color:transparent;color:#06201d;box-shadow:0 6px 22px rgba(63,210,199,.35)}
.solbar .solsw>.all{border-style:dashed;background:transparent}
html:has(.solbar){scroll-padding-top:calc(var(--hh) + 84px)}
html:not(:has(.solbar)){scroll-padding-top:calc(var(--hh) + 16px)}
@media(max-width:1180px){.solbar .solsw{justify-content:flex-start}}
@media(max-width:1024px){.solbar .solsw{padding:10px 0;gap:8px}.solbar .solsw>a,.solbar .solsw>span{font-size:13.5px;padding:8px 14px}
  html:has(.solbar){scroll-padding-top:calc(var(--hh) + 64px)}}

/* ---------- v0.99 — CertyAcademy : l'outil en action (séquences animées) */
.sim{max-width:1180px;margin:34px auto 0}
.sim-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.sim-tabs button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;font:600 15px var(--sans);color:#c7d3e8;cursor:pointer;
  padding:11px 18px;border-radius:12px;border:1px solid var(--line2);background:var(--card);transition:.18s}
.sim-tabs button b{font-size:17px}
.sim-tabs button em{font:700 9px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,198,107,.4);border-radius:999px;padding:2px 6px}
.sim-tabs button:hover{border-color:var(--teal);color:#fff}
.sim-tabs button.on{color:#fff;border-color:rgba(63,210,199,.7);background:radial-gradient(120% 140% at 0 0,rgba(63,210,199,.2),transparent 65%),var(--card)}
.sim-tabs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--teal),var(--blue2))}
.sim-tabs button.on i{animation:simbar var(--dur,9000ms) linear forwards}
.sim.pause .sim-tabs button.on i{animation:none;width:100%}
@keyframes simbar{to{width:100%}}
.sim-beam{display:block;width:100%}
.sim-win{position:relative;border-radius:14px;border:1px solid rgba(138,180,248,.25);background:#0d1830;box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:hidden;color:#c7d3e8;font-size:14px;text-align:left}
.sim-win .ck-bar{font-size:12.5px}
.sc{display:none;min-height:430px}
.sc.go{display:grid;grid-template-columns:220px 1fr;animation:scin .45s ease}
.sc.sc-exo.go{grid-template-columns:1fr 260px}
.sc.sc-pt.go,.sc.sc-exam.go,.sc.sc-team.go{grid-template-columns:1fr}
@keyframes scin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sc-main{padding:24px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sc-plan{border-right:1px solid #16233f;background:#0b1526;padding:20px 16px;display:flex;flex-direction:column;gap:4px}
.sc-plan b{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7e93b8;margin-bottom:8px}
.sc-plan span{font-size:13px;color:#9db1d4;padding:6px 10px;border-radius:8px;border-left:2px solid transparent}
.go .sc-plan .k1{animation:hl 2.4s .3s both}.go .sc-plan .k2{animation:hl 2.4s 2.6s both}.go .sc-plan .k3{animation:hl 3s 4.9s both}
@keyframes hl{0%,100%{background:transparent;color:#9db1d4;border-color:transparent}10%,85%{background:#13294b;color:#fff;border-color:var(--teal)}}
.sc .a{opacity:0}
.sc.go .a{animation:apparait .6s ease both}
.sc.go .a1{animation-delay:.3s}.sc.go .a2{animation-delay:1.6s}.sc.go .a3{animation-delay:3.2s}.sc.go .a4{animation-delay:4.8s}.sc.go .a5{animation-delay:6.2s}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc-main p{margin:0;line-height:1.65;font-size:15px}
.sc mark{background:none;color:#fff;box-shadow:inset 0 -.5em 0 rgba(63,210,199,.28)}
.sc-lv span{transition:.3s}
.go .sc-lv .l1{animation:lv1 9s both}.go .sc-lv .l2{animation:lv2 9s both}
@keyframes lv1{0%,30%{background:var(--teal);color:#06201d}31%,100%{background:transparent;color:#9db1d4}}
@keyframes lv2{0%,30%{background:transparent;color:#9db1d4}31%,100%{background:var(--teal);color:#06201d}}
.sc .aca-ex{font-size:14.5px}.sc .aca-ex b{font-size:17px;color:var(--teal)}
.sc .ck-t{font-size:13.5px}.sc .ck-t td,.sc .ck-t th{padding:8px 10px}
.sc-pop{align-self:flex-start;border:1px solid rgba(245,198,107,.45);background:rgba(245,198,107,.08);border-radius:12px;padding:12px 16px;font-size:14px;max-width:560px}
.sc-pop small,.sc-q small,.sc-ccl small,.sc-pth small{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.sc-pop span{display:block;margin-top:6px;color:var(--teal);font-weight:700}
.sc-q{font-size:16px;line-height:1.55;color:#fff;background:#0b1526;border:1px solid #1c2b4a;border-radius:12px;padding:14px 18px}
.sc-q small{color:var(--blue)}
.sc-opt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sc-opt li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;border:1px solid #22345c;background:#0e1a30;font-size:14.5px}
.sc-opt li b{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#13294b;color:#fff;font-size:13px}
.go .sc-opt li.bon{animation:apparait .6s 1.6s both,bon .5s 3.9s forwards}
@keyframes bon{to{border-color:var(--teal);background:rgba(63,210,199,.14);color:#fff}}
.sc-cur{position:absolute;right:22%;top:50%;width:22px;height:22px;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23fff' stroke='%230b1220' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain}
.go .sc-cur{animation:curseur 2.4s 2.2s both}
@keyframes curseur{0%{opacity:0;transform:translate(160px,120px)}20%{opacity:1}75%{opacity:1;transform:translate(0,0)}82%{transform:translate(0,0) scale(.82)}90%,100%{opacity:0;transform:translate(0,0) scale(1)}}
.sc-fb{border-left:3px solid var(--teal);background:rgba(63,210,199,.08);border-radius:0 10px 10px 0;padding:12px 16px;font-size:14.5px;line-height:1.6}
.sc-fb b{color:var(--teal)}
.sc-side{gap:12px;padding:22px 18px}
.sc-side div{font-size:13px}
.sc-side .up i{--v:80%}
.go .sc-side .up i{animation:monte 1s 4.2s both}
.sc-side .up em{color:var(--teal);opacity:0}.go .sc-side .up em{animation:apparait .4s 4.6s both}
@property --v{syntax:'<percentage>';initial-value:0%;inherits:false}
@keyframes monte{from{--v:60%}to{--v:80%}}
.sc-serie{font-size:13px!important;color:var(--mut);margin-top:auto!important}.sc-serie b{color:#fff}
.sc-steps span{font-size:13px}
.sc.go .sc-steps .a5{color:var(--gold)}
.sc-tab td:nth-child(n+2),.sc-tab th:nth-child(n+2){text-align:right}
.sc-tab td:last-child{color:var(--teal)!important;font-weight:700}
.sc-pth{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#0b1526;border:1px solid #1c2b4a;border-radius:12px;padding:12px 16px;font-size:14px;color:#fff}
.sc-pth small{color:#7e93b8}
.sc-wp td:nth-child(2){text-align:right;color:#fff}.sc-wp td:nth-child(3){font:600 11.5px var(--mono);color:var(--blue)}
.sc-wp td:nth-child(4){text-align:left!important;color:#9db1d4!important}.sc-wp td i{font-style:normal;color:var(--teal);font-weight:700;margin-right:6px}
.sc-wp tr.tot td{font-weight:700;border-top:1px solid #2a4573}
.sc-ccl{position:relative;border:1px solid #1c2b4a;border-radius:12px;padding:14px 18px;font-size:14.5px;background:#0b1526}
.sc-stamp{position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(-8deg);font:800 15px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);border:2px solid var(--teal);border-radius:8px;padding:5px 12px;opacity:0}
.go .sc-stamp{animation:tampon .5s 7.2s both}
@keyframes tampon{from{opacity:0;transform:translateY(-50%) rotate(-8deg) scale(1.8)}to{opacity:1;transform:translateY(-50%) rotate(-8deg) scale(1)}}
.sc-eh{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px;color:#9db1d4}
.sc-eh b{color:#fff}
.sc-clock{font:700 16px var(--mono);color:var(--gold)}.sc-clock b{color:var(--gold)}
.sc-prog{flex:1;min-width:160px;height:8px;border-radius:5px;background:#1c2b4a;overflow:hidden}
.sc-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--blue2))}
.go .sc-prog i{animation:simbar 3s .3s ease-out forwards}
.sc-qn{font:700 14px var(--mono)}
.sc-res{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:stretch}
.sc-score{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid rgba(63,210,199,.45);border-radius:14px;
  background:radial-gradient(120% 120% at 50% 0,rgba(63,210,199,.18),transparent 70%),#0b1526;padding:18px}
.sc-score b{font:700 40px var(--serif);color:#fff}.sc-score span{font:700 22px var(--mono);color:var(--teal)}.sc-score small{color:var(--faint);font-size:12px;margin-top:6px}
.sc-comp{border:1px solid #1c2b4a;border-radius:14px}
.sc-comp div{font-size:13.5px}
.go .sc-comp i{animation:barre 1.2s 3.6s both}
@keyframes barre{from{--v:0%}}
.sc-soon{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,198,107,.45);border-radius:999px;padding:4px 10px}
.sc-tm td:nth-child(2){min-width:200px}
.sc-tm td:nth-child(2) i{display:inline-block;vertical-align:middle;width:120px;height:7px;border-radius:4px;margin-right:10px;background:linear-gradient(90deg,var(--teal) var(--v),#1c2b4a var(--v))}
.go .sc-tm td:nth-child(2) i{animation:barre 1.2s 1.2s both}
.sc-tm td{text-align:left!important}.sc-tm .ok{color:var(--teal)!important}.sc-tm .warn{color:var(--gold)!important}
@media(max-width:860px){
  .sim-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none}
  .sim-tabs button{flex:none;font-size:14px;padding:9px 14px}
  .sc.go,.sc.sc-exo.go{grid-template-columns:1fr}
  .sc-plan{display:none}.sc-side{border-left:0;border-top:1px solid #16233f}
  .sc-main{padding:18px 16px}.sc{min-height:0}
  .sc-pth{grid-template-columns:1fr 1fr}.sc-res{grid-template-columns:1fr}
  .sc .ck-t{font-size:12px}.sc .ck-t td,.sc .ck-t th{padding:6px 6px}
  .sc-wp td:nth-child(3),.sc-wp th:nth-child(3){display:none}
  .sc-tm td:nth-child(2) i{width:60px}
}
@media(prefers-reduced-motion:reduce){.sc .a,.sc-stamp,.sc-side .up em{opacity:1!important;animation:none!important}.sc-cur{display:none}}

/* ---------- v0.99 — CertyAcademy : carrousel des domaines (flèches, points, défilement automatique) */
.dcar{position:relative;margin-top:34px;padding:0 64px}
.dcar-track{grid-auto-columns:calc((100% - 2*22px)/3);gap:22px;scrollbar-width:none;padding:8px 2px 18px;scroll-behavior:smooth}
.dcar-track::-webkit-scrollbar{display:none}
.dcar-track>article{min-height:380px;padding:0 0 22px;transition:transform .25s,border-color .25s}
.dcar-track>article:hover{transform:translateY(-4px);border-color:rgba(63,210,199,.55)}
.dcar-track>article .dimg{height:220px;border-radius:17px 17px 0 0}
.dcar-track h3{font-size:27px}
.dcar-track p{font-size:15px}
.dcar-ar{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(63,210,199,.5);background:rgba(13,24,48,.92);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.18s}
.dcar-ar.prev{left:0}.dcar-ar.next{right:0}
.dcar-ar:hover:not(:disabled){background:var(--teal);color:#06201d;border-color:var(--teal)}
.dcar-ar:disabled{opacity:.3;cursor:default}
.dcar-ar:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.dcar-dots{display:flex;justify-content:center;gap:10px;margin-top:14px}
.dcar-dots button{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:#2a4573;cursor:pointer;transition:.25s}
.dcar-dots button.on{width:28px;background:var(--teal)}
@media(max-width:1100px){.dcar-track{grid-auto-columns:calc((100% - 22px)/2)}}
@media(max-width:700px){.dcar{padding:0}.dcar-track{grid-auto-columns:86%;gap:14px}.dcar-ar{display:none}.dcar-track>article .dimg{height:180px}}
.sc-cours .ck-t td:nth-child(n+3),.sc-tab td:nth-child(n+2),.sc-wp td:nth-child(2),.sc-tm td:nth-child(3){white-space:nowrap}