/* Refonte de la page « organismes » de CiviCap, dans le langage de la newsletter :
   le dégradé de marque quadrillé, des cartes blanches, des titres en Instrument Sans avec
   un mot en Instrument Serif italique, des fragments d'interface posés sous verre et un
   bloc final sombre. Les fragments d'interface sont des illustrations, pas des captures. */
:root{
  --ink:#0F0A1A; --doux:#3D3850; --texte:#57516B; --muet:#8A8499; --pale:#9A94A8;
  --violet:#6D28D9; --violet-2:#7C3AED; --violet-3:#A78BFA; --lilas:#F3EEFF;
  --bord:rgba(76,52,140,.10); --fond:#F3F1F8; --vert:#16A34A; --ambre:#F59E0B; --nuit:#120A24;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --corps:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --plume:Caveat,'Segoe Print','Bradley Hand',cursive;
  --degrade:radial-gradient(75% 60% at 0% 0%,#FFB45C 0%,rgba(255,180,92,0) 70%),
    radial-gradient(65% 55% at 100% 0%,#B9A3FF 0%,rgba(185,163,255,0) 72%),
    radial-gradient(85% 65% at 100% 100%,#8E72F6 0%,rgba(142,114,246,0) 72%),
    radial-gradient(75% 60% at 0% 100%,#FF9E80 0%,rgba(255,158,128,0) 72%),
    linear-gradient(180deg,#FFE9DA 0%,#F2EAFF 55%,#E3D7FF 100%);
  --degrade-doux:radial-gradient(70% 95% at 100% 0%,rgba(185,163,255,.48),transparent 62%),
    radial-gradient(60% 95% at 0% 100%,rgba(255,180,92,.32),transparent 60%),#F7F5FC;
  --ombre-carte:0 24px 48px -36px rgba(46,16,101,.42);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--ink);font:400 17px/1.6 var(--corps);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;text-wrap:balance;word-spacing:.03em}
h3,.nom,.chiffre .l,.etapes b,.fiche-titre{word-spacing:.07em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--violet-3);outline-offset:3px}
[id]{scroll-margin-top:92px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:24px}
.section{padding-top:clamp(80px,10vw,128px)}

/* ---------- titres, pastilles, boutons ---------- */
.titre-2{font-size:clamp(34px,4.6vw,56px);line-height:1.03;letter-spacing:-.042em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;color:var(--violet)}
.tete{max-width:780px;margin:0 auto;text-align:center}
.tete .titre-2{margin-top:18px}
.tete p{margin:18px auto 0;max-width:620px;font-size:18px;color:var(--texte)}
.pastille{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:999px;background:var(--lilas);color:var(--violet);font:600 13px/1.25 var(--corps)}
.pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.surtitre{font:700 12px/1.3 var(--corps);letter-spacing:.14em;text-transform:uppercase;color:#4C1D95}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border:0;border-radius:999px;font:600 15px/1 var(--corps);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.bouton svg{transition:transform .18s ease}
.bouton:hover svg{transform:translateX(3px)}
.b-noir{background:var(--ink);color:#fff;box-shadow:0 12px 26px -12px rgba(15,10,26,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.b-noir:hover{transform:translateY(-1px);box-shadow:0 18px 32px -14px rgba(15,10,26,.65),inset 0 1px 0 rgba(255,255,255,.14)}
.b-blanc{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #E4DFEE}
.b-blanc:hover{box-shadow:inset 0 0 0 1px #CBC2E0}

/* ---------- navigation flottante ---------- */
.nav{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);width:min(1136px,calc(100% - 24px));display:flex;align-items:center;gap:4px;padding:7px 7px 7px 18px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px -16px rgba(46,16,101,.32),0 2px 6px -2px rgba(46,16,101,.08)}
.nav .logo img{height:36px;width:auto}
.nav .liens{margin-left:auto;display:flex;gap:2px}
.nav .liens a{padding:10px 14px;border-radius:999px;font:600 14px/1 var(--corps);color:var(--doux);transition:background-color .15s,color .15s}
.nav .liens a:hover{background:rgba(109,40,217,.07);color:var(--violet)}
.nav .bouton{margin-left:6px;padding:12px 18px;font-size:14px}

/* ---------- bandeau de tête ---------- */
.hero{padding:12px 12px 0}
.cadre{position:relative;isolation:isolate;max-width:1416px;margin:0 auto;border-radius:36px;overflow:hidden;background:var(--degrade);padding:92px clamp(12px,3vw,40px) clamp(28px,4vw,48px)}
.cadre::before,.bande::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.42) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 38%,transparent 30%,#000 82%);mask-image:radial-gradient(ellipse 70% 55% at 50% 38%,transparent 30%,#000 82%)}
.carte-hero{position:relative;max-width:1136px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(18px,5vw,64px) 0;border-radius:30px;background:#fff;text-align:center;overflow:hidden;box-shadow:0 40px 90px -50px rgba(46,16,101,.5)}
.badge{display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;border-radius:999px;background:#F5F0FF;border:1px solid #E9DEFF;font:600 13.5px/1.2 var(--corps);color:#5B21B6}
.rond{flex:none;width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center}
.hero h1{margin-top:26px;font-size:clamp(40px,6.3vw,80px);line-height:.98;letter-spacing:-.048em}
.hero h1 .l{display:block}
.hero h1 .v{color:var(--violet)}
.sous{max-width:650px;margin:26px auto 0;font-size:clamp(17px,1.45vw,19px);line-height:1.6;color:var(--texte)}
.ctas{margin-top:34px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.micro{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;font:500 14px/1.3 var(--corps);color:var(--texte)}
.micro span{display:inline-flex;align-items:center;gap:7px}
.micro svg{color:var(--vert)}
.deja{display:none;margin-top:14px;font:500 14px/1.4 var(--corps);color:var(--texte)}
.deja a{color:var(--violet);font-weight:600}

/* la démonstration : l'espace organisme, une question d'entraînement posée devant */
.demo{position:relative;max-width:1000px;height:500px;margin:68px auto 0}
.halo{position:absolute;left:6%;right:6%;top:100px;bottom:-80px;filter:blur(44px);background:radial-gradient(60% 70% at 15% 70%,rgba(255,170,110,.7),transparent 70%),radial-gradient(60% 70% at 85% 25%,rgba(167,139,250,.8),transparent 70%),radial-gradient(50% 50% at 55% 55%,rgba(196,181,253,.55),transparent 70%)}
.verre{padding:10px;border-radius:26px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 80px -30px rgba(60,28,130,.45),inset 0 1px 0 rgba(255,255,255,.95)}
.fen{background:#fff;border-radius:17px;border:1px solid rgba(76,52,140,.09);overflow:hidden;text-align:left}
.v-app{position:absolute;right:0;top:28px;width:76%}
.fondu{position:absolute;z-index:4;left:-60px;right:-60px;bottom:0;height:130px;background:linear-gradient(rgba(255,255,255,0),#fff 86%);pointer-events:none}
.app-haut{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #F0EDF6}
.app-titre{display:flex;align-items:center;gap:9px;font:600 14.5px/1 var(--corps);letter-spacing:-.01em;white-space:nowrap}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#F3F1F8;color:var(--muet);font:600 10px/1 var(--corps);letter-spacing:.04em}
.seg{display:flex;gap:2px;padding:3px;border-radius:10px;background:#F3F1F8}
.seg span{padding:7px 10px;border-radius:8px;font:600 12px/1 var(--corps);color:#6E6880;white-space:nowrap}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(46,16,101,.14)}
.app-droite{margin-left:auto;display:flex;align-items:center;gap:8px}
.solde{padding:7px 11px;border-radius:999px;background:#F7F5FC;border:1px solid #EEEAF6;font:500 12px/1 var(--corps);color:var(--texte);white-space:nowrap}
.solde b{font-weight:700;color:var(--ink)}
.mini-noir{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;background:var(--ink);color:#fff;font:600 12px/1 var(--corps);white-space:nowrap}
.app-table{padding:4px 18px 18px}
.ln{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,1fr) 42px minmax(0,1.1fr);column-gap:14px;align-items:center;padding:11px 0;border-top:1px solid #F3F0F8;font:500 13px/1.2 var(--corps);color:var(--doux)}
.ln.th{padding:10px 0 8px;border-top:0;font:600 10px/1.2 var(--corps);letter-spacing:.08em;text-transform:uppercase;color:var(--pale)}
.qui{display:flex;align-items:center;gap:10px;min-width:0}
.av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--f);color:var(--e);font:700 11px/1 var(--corps)}
.sk{display:block;height:8px;border-radius:5px;background:#ECE9F3;min-width:0}
.sc{display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc b{font-weight:700;color:var(--ink)}
.sc small{font-size:12px;color:var(--pale)}
.j{position:relative;flex:1;min-width:36px;height:6px;margin-left:9px;border-radius:9px;background:#EFECF6}
.j i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:var(--c)}
.j u{position:absolute;left:80%;top:-4px;width:2px;height:14px;border-radius:2px;background:var(--vert)}
.faible{display:flex;align-items:center;gap:7px;white-space:nowrap}
.faible svg{flex:none;color:#B45309}
.vide{color:#C9C4D6}
.nb{font-variant-numeric:tabular-nums}
.st{justify-self:start;padding:6px 10px;border-radius:999px;font:600 11.5px/1 var(--corps);white-space:nowrap}
.s-ok{background:#EAF8EF;color:#166534}.s-cours{background:#F1EBFF;color:#5B21B6}.s-aide{background:#FFF4D6;color:#92400E}
.carte{background:#fff;border-radius:18px;border:1px solid rgba(76,52,140,.10);box-shadow:0 0 0 6px rgba(255,255,255,.6),0 30px 60px -22px rgba(46,16,101,.38),0 8px 16px -8px rgba(46,16,101,.14)}
.q-carte{position:absolute;z-index:3;left:-44px;top:156px;width:292px;overflow:hidden;text-align:left}
.q-barre{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid #F0EDF6;font:500 11.5px/1 var(--corps);color:var(--muet);white-space:nowrap}
.q-barre svg{color:var(--violet)}
.q-barre b{font-weight:600;color:var(--doux)}
.q-barre .num{margin-left:auto;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--doux);font-variant-numeric:tabular-nums}
.prog{display:block;width:44px;height:4px;border-radius:9px;background:#EFECF6;overflow:hidden}
.prog i{display:block;height:100%;border-radius:9px;background:var(--violet-2)}
.q-corps{padding:14px 16px 16px}
.eti{display:block;font:600 10px/1 var(--corps);letter-spacing:.09em;text-transform:uppercase;color:var(--muet)}
.q-texte{margin-top:8px;font:600 16px/1.3 var(--corps);letter-spacing:-.014em;color:var(--ink)}
.rep{margin-top:12px;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:#EEFBF3;border:1px solid #C6F0D5;font:600 13px/1.3 var(--corps);color:#14532D}
.ok{flex:none;width:18px;height:18px;border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center}
.sep{margin:13px 0 10px;height:1px;background:#EEEBF4}
.ex{margin-top:7px;font:400 12.5px/1.6 var(--corps);color:var(--doux)}
.toast{position:absolute;z-index:3;right:-8px;top:0;display:flex;align-items:center;gap:9px;padding:10px 16px 10px 10px;border-radius:999px;font:600 13.5px/1 var(--corps);white-space:nowrap}
.plume{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 14px 8px 11px;border-radius:999px;background:#fff;font:600 20px/1 var(--plume);color:#3B2A63;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(46,16,101,.38),0 0 0 1px rgba(76,52,140,.06)}
.plume i{font:normal 600 12px/1 var(--corps);color:var(--violet-2)}
@media (prefers-reduced-motion:no-preference){
  .flotte{animation:flotte 7s ease-in-out infinite}
  .flotte.lent{animation-duration:9s;animation-delay:-3s}
}
@keyframes flotte{50%{translate:0 -8px}}

/* les trois parcours, sous la carte blanche */
.parcours{position:relative;max-width:1136px;margin:clamp(28px,4vw,44px) auto 0;text-align:center}
.trio{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.chiffre{padding:26px 26px 24px;border-radius:24px;background:#fff;text-align:left;box-shadow:0 24px 44px -28px rgba(46,16,101,.38)}
.chiffre .n{font:600 clamp(42px,5.4vw,68px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.chiffre .u{margin-top:12px;font:700 11px/1.2 var(--corps);letter-spacing:.11em;text-transform:uppercase;color:var(--muet)}
.chiffre .l{margin-top:10px;font:600 clamp(15px,1.6vw,20px)/1.22 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.legende{margin-top:18px;font:500 15px/1.5 var(--corps);color:#4B3F6B}

/* ---------- le constat ---------- */
.constat-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.constat-txt .titre-2{margin-top:18px}
.constat-txt p{margin-top:20px;max-width:470px;font-size:18px;color:var(--texte)}
.peines{display:grid;gap:12px}
.peines li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:center;padding:22px 26px 22px 22px;border-radius:24px;background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre-carte)}
.peines .no{height:52px;border-radius:15px;background:var(--lilas);color:var(--violet);display:grid;place-items:center;font:600 16px/1 var(--sans);letter-spacing:-.01em}
.peines h3{font-size:21px;line-height:1.25;letter-spacing:-.018em}
.peines p{margin-top:4px;font-size:16px;color:var(--texte)}

/* ---------- cartes à visuel ---------- */
.trois{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.carte-f,.b{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre-carte)}
.visuel{position:relative;isolation:isolate;flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:300px;padding:30px 24px;background:var(--degrade-doux);overflow:hidden}
.txt{padding:24px 28px 30px}
.carte-f .visuel{flex:none;height:340px}
.carte-f .txt{flex:1}
.txt h3{font-size:22px;line-height:1.2;letter-spacing:-.018em}
.txt p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--texte)}
.panneau{position:relative;width:100%;max-width:312px;padding:16px 18px 18px;border-radius:16px;background:#fff;border:1px solid rgba(76,52,140,.10);text-align:left;box-shadow:0 0 0 6px rgba(255,255,255,.55),0 26px 50px -22px rgba(46,16,101,.34),0 4px 12px -6px rgba(46,16,101,.10)}
.p-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 13.5px/1.2 var(--corps);letter-spacing:-.01em;color:var(--ink)}
.champ{margin-top:12px;display:flex;align-items:center;gap:8px;padding:5px 5px 5px 11px;border-radius:12px;border:1px solid #E6E1F0;background:#FBFAFE}
.champ svg{flex:none;color:var(--pale)}
.champ span:first-of-type{flex:1;min-width:0;font:500 12.5px/1 var(--corps);color:#A39DB5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invites{margin-top:8px}
.invites li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F3F0F8}
.invites li:first-child{border-top:0}
.invites .av{width:28px;height:28px;font-size:10.5px}
.envoyee{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 6px;border-radius:999px;background:#EAF8EF;color:#166534;font:600 11px/1 var(--corps);white-space:nowrap}
.envoyee .ok{width:14px;height:14px}
.fiche-tete{display:flex;align-items:center;gap:10px}
.fiche-tete .tag{margin-left:auto}
.mini-tag{display:inline-block;margin-top:6px;padding:4px 8px;border-radius:999px;background:#F1EBFF;color:#5B21B6;font:600 10.5px/1 var(--corps)}
.kpis{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpis > div{padding:10px 12px;border-radius:12px;background:#F7F5FC}
.kpis b{font:600 24px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.kpis small{font:500 12px/1 var(--corps);color:var(--pale)}
.kpis span{display:block;margin-top:6px;font:500 11px/1.2 var(--corps);color:var(--texte)}
.barres{margin-top:14px;display:grid;gap:9px}
.barre{display:grid;grid-template-columns:14px 74px minmax(0,1fr);align-items:center;gap:8px;font:500 11.5px/1 var(--corps);color:#4B4658}
.barre svg{color:var(--violet)}
.tr{display:block;height:6px;border-radius:9px;background:#EFECF6;overflow:hidden}
.tr i{display:block;height:100%;border-radius:9px;background:var(--violet-2)}
.barre.bas{color:#92400E;font-weight:600}
.barre.bas svg{color:#B45309}
.barre.bas .tr i{background:var(--ambre)}
.lic-solde{margin-top:8px;display:flex;align-items:center;gap:10px}
.lic-solde b{font:600 46px/1 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.lic-solde span{font:500 12.5px/1.3 var(--corps);color:var(--texte)}
.seg-l{margin-top:14px}
.seg-l span{flex:1;text-align:center}
.lic-ligne{margin-top:14px;padding-top:12px;border-top:1px dashed #E6E1F0;display:flex;justify-content:space-between;gap:10px;font:500 12.5px/1.3 var(--corps);color:var(--texte)}
.lic-ligne b{font-weight:700;color:var(--ink);white-space:nowrap}
.mini-large{margin-top:14px;display:block;padding:11px;border-radius:999px;background:var(--ink);color:#fff;text-align:center;font:600 13px/1 var(--corps)}
.paiement{margin-top:11px;display:flex;justify-content:center;gap:14px;font:500 11px/1 var(--corps);color:var(--pale)}
.paiement span{display:inline-flex;align-items:center;gap:5px}

/* ---------- les trois modes, sur une plaque blanche ---------- */
.plaque{border-radius:36px;background:#fff;padding:clamp(32px,5.5vw,72px) clamp(16px,4.5vw,64px);box-shadow:0 40px 90px -60px rgba(46,16,101,.45)}
.plaque .b:not(.b-grand){background:#F7F5FC;border-color:transparent;box-shadow:none}
.modes-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);align-items:center}
.modes-tete .titre-2{margin-top:18px}
.modes-tete p{margin-top:20px;max-width:460px;font-size:18px;color:var(--texte)}
.modes-tete img{width:100%;max-width:528px;justify-self:end;border-radius:26px}
.bento{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.b-grand{grid-row:span 2;background:var(--nuit);border-color:transparent}
.b-grand .visuel{background:radial-gradient(70% 70% at 100% 0%,rgba(124,58,237,.7),transparent 62%),radial-gradient(60% 60% at 0% 100%,rgba(251,180,40,.26),transparent 62%),var(--nuit)}
.b-grand .txt h3{color:#fff}
.b-grand .txt p{color:#CFC7E2}
.b-grand .visuel::before,.nuit::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 20%,#000 85%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 20%,#000 85%)}
.b-grand .visuel{padding-top:136px}
.v-exam{width:100%;max-width:520px}
.b-grand .verre{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.resultat{position:absolute;z-index:3;right:24px;top:22px;padding:13px 16px 14px;text-align:left}
.res-n{margin-top:7px;font:600 30px/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.res-n small{font:500 14px/1 var(--corps);letter-spacing:0;color:var(--pale)}
.res-ok{margin-top:9px;display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:999px;background:#EAF8EF;color:#166534;font:600 11px/1 var(--corps);white-space:nowrap}
.res-ok .ok{width:14px;height:14px}
.exam-haut{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #F0EDF6}
.exam-haut .num{font:600 12px/1 var(--corps);color:var(--doux);white-space:nowrap}
.exam-haut .num b{color:var(--ink)}
.exam-haut .prog{flex:1;width:auto;height:5px}
.chrono{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;background:#F1EBFF;color:#5B21B6;font:600 12.5px/1 var(--corps);font-variant-numeric:tabular-nums}
.exam-corps{padding:18px 16px 2px}
.exam-corps .q-texte{margin-top:0;font-size:17px}
.opt{display:flex;align-items:flex-start;gap:10px;margin-top:9px;padding:10px 12px;border-radius:11px;border:1px solid #EEEBF4;font:500 13px/1.4 var(--corps);color:var(--doux)}
.opt .rad{flex:none;margin-top:1px;width:15px;height:15px;border-radius:50%;border:1.5px solid #CFCADB}
.opt.sel{border-color:#C4B5FD;background:#FAF7FF;color:var(--ink)}
.opt.sel .rad{border:4.5px solid var(--violet-2)}
.exam-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 16px}
.drap{display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;white-space:nowrap;border-radius:999px;border:1px solid #F5E2A8;background:#FFFBEB;color:#78350F;font:600 12px/1 var(--corps)}
.suivant{display:inline-flex;align-items:center;gap:6px;color:var(--violet);font:600 12.5px/1 var(--corps);white-space:nowrap}
.choix{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choix span{display:grid;place-items:center;height:64px;border-radius:14px;border:1px solid #E9E5F2;color:var(--doux);font:600 26px/1 var(--sans);letter-spacing:-.03em}
.choix .on{border-color:var(--violet-2);background:#FAF7FF;color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.p-note{margin-top:12px;display:flex;align-items:center;gap:7px;font:500 11.5px/1.35 var(--corps);color:var(--texte)}
.p-note svg{flex:none;color:var(--violet)}
.pile{position:relative;width:100%;max-width:300px;height:226px}
.fiche{position:absolute;left:0;right:0;border-radius:18px;background:#fff;border:1px solid rgba(76,52,140,.10)}
.fiche.f3{top:0;left:30px;right:30px;height:60px;background:#EFEAFB}
.fiche.f2{top:12px;left:15px;right:15px;height:60px;background:#F8F6FE;box-shadow:0 -6px 16px -10px rgba(46,16,101,.18)}
.fiche.f1{top:26px;bottom:0;padding:16px 18px;box-shadow:0 0 0 6px rgba(255,255,255,.55),0 26px 50px -22px rgba(46,16,101,.34)}
.fiche-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 7px;border-radius:999px;background:var(--lilas);color:var(--violet);font:600 11px/1 var(--corps)}
.fiche-titre{margin-top:12px;font:600 22px/1.15 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.fiche .sk{margin-top:10px}
.fiche-pied{position:absolute;left:18px;right:18px;bottom:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.puce-lilas{padding:6px 10px;border-radius:999px;background:#F1EBFF;color:#5B21B6;font:600 11px/1 var(--corps);white-space:nowrap}

/* ---------- les thèmes ---------- */
.bande{position:relative;isolation:isolate;border-radius:36px;overflow:hidden;background:var(--degrade);padding:clamp(48px,6vw,84px) clamp(16px,4vw,56px)}
.bande .pastille{background:rgba(255,255,255,.78);color:#5B21B6}
.bande .tete p{color:#4B3F6B}
.tuiles{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tuiles li{display:flex;flex-direction:column;gap:18px;padding:22px 18px 24px;border-radius:22px;background:#fff;box-shadow:0 22px 44px -28px rgba(46,16,101,.4)}
.ic{flex:none;width:48px;height:48px;border-radius:15px;background:var(--lilas);color:var(--violet);display:grid;place-items:center}
.tuiles .nom{font:600 clamp(15px,1.2vw,17px)/1.25 var(--sans);letter-spacing:-.014em;color:var(--ink)}

/* ---------- tarifs ---------- */
.prix-g{max-width:800px;margin:clamp(40px,5vw,56px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prix{display:flex;flex-direction:column;padding:28px 28px 30px;border-radius:28px;background:#fff;border:1px solid var(--bord);box-shadow:var(--ombre-carte)}
.duree{align-self:flex-start;padding:7px 12px;border-radius:999px;background:var(--lilas);color:var(--violet);font:600 13px/1 var(--corps)}
.montant{margin-top:22px;display:flex;align-items:baseline;gap:8px}
.montant b{font:600 clamp(46px,4.6vw,60px)/1 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.montant span{font:600 15px/1 var(--corps);color:var(--texte)}
.ttc{margin-top:10px;font:500 14px/1.4 var(--corps);color:var(--muet)}
.prix ul{margin-top:22px;padding-top:20px;border-top:1px solid #F0EDF6;display:grid;gap:11px}
.prix li{display:flex;align-items:center;gap:10px;font:500 15px/1.35 var(--corps);color:var(--doux)}
.prix li svg{flex:none;color:var(--vert)}
.prix-pied{max-width:800px;margin:16px auto 0;display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding:14px 14px 14px 26px;border-radius:24px;background:#fff;border:1px solid var(--bord)}
.prix-pied > span{display:inline-flex;align-items:center;gap:9px;font:500 15px/1.35 var(--corps);color:var(--doux)}
.prix-pied > span svg{flex:none;color:var(--violet)}
.prix-pied .bouton{margin-left:auto}

/* ---------- questions fréquentes ---------- */
.faq-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start}
.faq-g .titre-2{margin-top:18px}
.contact{margin-top:28px;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;background:#fff;border:1px solid var(--bord);font:500 15px/1.45 var(--corps);color:var(--texte)}
.contact .ic{width:44px;height:44px;border-radius:14px}
.contact a{display:block;color:var(--violet);font-weight:600}
.accordeon{display:grid;gap:10px}
.accordeon details{border-radius:20px;background:#fff;border:1px solid var(--bord);transition:box-shadow .2s ease}
.accordeon details[open]{box-shadow:0 24px 44px -30px rgba(46,16,101,.42)}
.accordeon summary{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;border-radius:20px;font:600 16.5px/1.35 var(--corps);color:var(--ink)}
.accordeon summary::-webkit-details-marker{display:none}
.plus{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:var(--lilas);color:var(--violet);display:grid;place-items:center;transition:transform .2s ease,background-color .2s ease,color .2s ease}
.accordeon details[open] .plus{transform:rotate(45deg);background:var(--ink);color:#fff}
.reponse{padding:0 22px 22px;margin-top:-6px;font-size:16px;line-height:1.6;color:var(--texte)}

/* ---------- essai : le bloc sombre ---------- */
.nuit{position:relative;isolation:isolate;border-radius:36px;overflow:hidden;padding:clamp(40px,6vw,80px) clamp(18px,5vw,72px);color:#fff;background:radial-gradient(70% 90% at 100% 0%,rgba(124,58,237,.75),transparent 62%),radial-gradient(60% 80% at 0% 100%,rgba(251,180,40,.30),transparent 62%),radial-gradient(50% 60% at 50% 50%,rgba(185,163,255,.12),transparent 70%),var(--nuit)}
.essai-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:center}
.pastille-nuit{background:rgba(255,255,255,.1);color:#DDD3FF}
.pastille-nuit::before{background:#C4B5FD}
.nuit .titre-2{margin-top:18px;color:#fff}
.nuit .titre-2 em{color:#C4B5FD}
.essai-txt > p{margin-top:18px;max-width:440px;font-size:18px;color:#CFC7E2}
.etapes{margin-top:32px;display:grid;gap:10px}
.etapes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px 14px 14px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.etapes .no{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--ink);display:grid;place-items:center;font:600 18px/1 var(--sans)}
.etapes b{display:block;font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:#fff}
.etapes small{display:block;margin-top:3px;font:400 14.5px/1.45 var(--corps);color:#CFC7E2}
.formulaire{padding:clamp(24px,3vw,36px);border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.formulaire h3{font-size:26px;line-height:1.15;letter-spacing:-.028em;margin-bottom:4px}
.formulaire label{display:block;margin-top:16px;font:600 13.5px/1.2 var(--corps);color:var(--doux)}
.formulaire input,.formulaire select{display:block;width:100%;margin-top:7px;padding:13px 14px;border-radius:13px;border:1px solid #E2DDED;background-color:#FBFAFE;font:500 15.5px/1.2 var(--corps);color:var(--ink);transition:border-color .15s,box-shadow .15s,background-color .15s}
.formulaire input::placeholder{color:#B3ADC2}
.formulaire input:focus,.formulaire select:focus{outline:none;border-color:var(--violet-3);background-color:#fff;box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.formulaire select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2357516B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.formulaire .deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.formulaire .deux label{display:flex;flex-direction:column;justify-content:flex-end}
.formulaire .case{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font:500 13.5px/1.5 var(--corps);color:var(--texte);cursor:pointer}
.formulaire .case input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--violet);cursor:pointer}
.formulaire .case a{color:var(--violet);font-weight:600}
.formulaire .case a:hover{text-decoration:underline}
.formulaire .bouton{width:100%;margin-top:24px;padding:17px 24px}
.form-note{margin-top:12px;text-align:center;font:500 13.5px/1.45 var(--corps);color:var(--muet)}

/* ---------- pied de page ---------- */
.pied{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:clamp(56px,7vw,96px);padding-block:32px 48px;border-top:1px solid #E6E1F0}
.pied img{height:34px;width:auto}
.pied-liens{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 14px/1.4 var(--corps);color:var(--texte)}
.pied-liens a:hover{color:var(--violet)}
.pied small{margin-left:auto;font:500 14px/1.4 var(--corps);color:var(--muet)}

/* ---------- largeurs intermédiaires et mobile ---------- */
@media (max-width:1180px){
  .ln{grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr)}
  .c-tests,.solde{display:none}
}
@media (max-width:1040px){
  .q-carte{width:244px;left:-48px}
  .v-app{width:79%}
  .ln{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr)}
  .c-parcours{display:none}
}
@media (max-width:1180px){
  .tuiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tuiles li{grid-column:span 2}
  .tuiles li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:900px){
  .q-carte{display:none}
  .v-app{left:0;right:0;margin:0 auto;width:100%}
  .constat-g,.modes-tete,.faq-g,.essai-g{grid-template-columns:minmax(0,1fr)}
  .modes-tete img{justify-self:center}
  .trois,.bento{grid-template-columns:minmax(0,1fr)}
  .b-grand{grid-row:auto}
}
@media (max-width:760px){
  .nav .liens{display:none}
  .nav .bouton{margin-left:auto}
  .deja{display:block}
  .prix-g{grid-template-columns:minmax(0,1fr)}
  .prix-pied{padding:18px 18px 18px 20px}
  .prix-pied .bouton{margin-left:0;width:100%}
  .pied small{margin-left:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .hero{padding:8px 8px 0}
  .cadre{padding:80px 8px 20px;border-radius:28px}
  .carte-hero{border-radius:24px}
  .hero h1 .l{display:inline}
  .demo{height:400px;margin-top:48px}
  .seg,.solde,.c-theme,.toast,.demo .plume,.b-grand .plume{display:none}
  .b-grand .visuel{padding-top:132px}
  .resultat{left:18px;right:auto}
  .ln{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;column-gap:10px}
  .st{padding:5px 8px;font-size:10.5px}
  .exam-pied{padding:12px 12px 14px}
  .drap{padding:7px 10px 7px 8px;font-size:11.5px}
  .suivant{font-size:12px}
  .ln.th{font-size:9.5px;letter-spacing:.05em}
  .tuiles{grid-template-columns:minmax(0,1fr)}
  .tuiles li,.tuiles li:nth-child(n+4){grid-column:auto;flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .bande,.nuit,.plaque{border-radius:28px}
  .peines li{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px}
  .peines .no{height:44px;border-radius:13px}
  .visuel{min-height:0;padding:28px 18px}
  .txt{padding:22px 22px 26px}
}
@media (max-width:520px){
  .formulaire .deux{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr);gap:8px}
  .chiffre{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;padding:16px 20px;border-radius:20px}
  .chiffre .n{grid-row:span 2;font-size:46px}
  .chiffre .u{margin-top:0;align-self:end}
  .chiffre .l{margin-top:5px;align-self:start;font-size:17px}
}
@media (max-width:420px){
  .ctas .bouton{width:100%}
}
@media (max-width:360px){
  .titre-2{font-size:32px}
  .hero h1{font-size:34px}
  .badge{gap:7px;padding-right:12px;font-size:12px;white-space:nowrap}
  .form-note{font-size:12px}
}

/* États du formulaire d'essai connecté au site. */
.pro-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { margin:16px 0; padding:14px 16px; border-radius:13px; background:#FEF2F2; color:#991B1B; font-size:14px; }
.pro-ok p { margin-top:18px; color:var(--texte); }
.pro-ok a { color:var(--violet); text-decoration:underline; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.nuit .pro-ok .titre-2 { color:var(--ink); font-size:32px; }
.pro-ok > svg { color:var(--vert); }
.reponse a { color:var(--violet); text-decoration:underline; }