/* CHEMIN : /var/www/crm-site/assets/site.css
   SwissVeo — identite sombre cinematographique.
   Un seul theme, volontairement : le site est sombre, le CRM est clair.

   Ce fichier couvre deux choses :
   1. le systeme de la nouvelle page d'accueil (fond, hero, cartes, packs) ;
   2. les classes historiques dont les autres pages se servent encore
      (formulaires, tableaux, FAQ, pages de texte) — restylees en sombre. */

:root{
  --noir:#050505;
  --noir-2:#0A0A0C;
  --voile:rgba(255,255,255,.04);
  --bord:rgba(255,255,255,.09);
  --bord-2:rgba(255,255,255,.17);
  --ink:#FFFFFF;
  --muted:#9CA3AF;
  --muted-2:#6B7280;
  --rouge:#E30613;
  --rouge-clair:#FF4D4D;
  --rouge-fonce:#B00510;
  --vert:#4ADE80;
  --nav-h:80px;

  /* Alias conserves pour les pages qui les utilisent encore. */
  --bg:var(--noir); --surface:var(--noir-2); --em:var(--rouge-clair);
  --em-dim:rgba(227,6,19,.14); --line:var(--bord); --line-2:var(--bord-2);
  --ardoise:#9CA3AF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--noir); color:var(--ink);
  font-family:"DM Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.08; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:3}
.page{display:block}

/* ─────────  Grain, sur toute la page  ───────── */
.grain{position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─────────  Fond lumineux du hero  ─────────
   Trois nappes qui derivent, a la place d'une video : aucun fichier a
   charger, et rien que l'en-tete de securite puisse bloquer.
   Pour une vraie video : deposer /assets/hero.mp4 et remplacer le contenu
   de .fond par une balise <video> en object-fit:cover. */
.fond{position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(ellipse 52% 40% at 20% -8%, rgba(255,77,77,.32), transparent 62%),
    radial-gradient(ellipse 48% 38% at 80% -6%, rgba(227,6,19,.30), transparent 64%),
    radial-gradient(ellipse 72% 46% at 50% 4%,  rgba(176,5,16,.24), transparent 70%),
    var(--noir)}
/* Une seule couche animee, et seulement en opacite : c'est la seule
   propriete que le compositeur gere sans repeindre quoi que ce soit. */
.fond .pulse{position:absolute; inset:0; pointer-events:none; will-change:opacity;
  background:radial-gradient(ellipse 62% 42% at 50% -4%, rgba(255,77,77,.20), transparent 66%);
  animation:pulse 9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45} 50%{opacity:1}}
.fond video{width:100%; height:100%; object-fit:cover}
.nappe{display:none}   /* remplacees par les degrades ci-dessus */
.n1{width:70vw; height:70vw; max-width:900px; max-height:900px; left:-8vw; top:-24vw;
    background:radial-gradient(circle, rgba(255,77,77,.42), transparent 66%);
    animation:derive1 26s ease-in-out infinite}
.n2{width:60vw; height:60vw; max-width:820px; max-height:820px; right:-10vw; top:-16vw;
    background:radial-gradient(circle, rgba(227,6,19,.40), transparent 66%);
    animation:derive2 32s ease-in-out infinite}
.n3{width:80vw; height:52vw; max-width:1100px; max-height:700px; left:50%; top:2vw;
    transform:translate3d(-50%,0,0);
    background:radial-gradient(ellipse, rgba(176,5,16,.34), transparent 68%);
    animation:derive3 24s ease-in-out infinite}
@keyframes derive1{0%,100%{transform:translate3d(0,0,0)}      50%{transform:translate3d(7vw,4vw,0)}}
@keyframes derive2{0%,100%{transform:translate3d(0,0,0)}      50%{transform:translate3d(-6vw,5vw,0)}}
@keyframes derive3{0%,100%{transform:translate3d(-50%,0,0)}   50%{transform:translate3d(-44%,3vw,0)}}
/* La lumiere s'eteint en noir plein a 85 % de la hauteur, soit au milieu
   de la capture du tableau de bord. */
.fond::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(5,5,5,.35) 52%,
             rgba(5,5,5,.86) 74%, var(--noir) 85%)}
.fond::before{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 90% 70% at 50% 8%, transparent 30%, rgba(5,5,5,.55) 100%)}

/* Version reduite du fond, pour les pages interieures. */
.fond.court::after{background:linear-gradient(180deg, transparent 0%, rgba(5,5,5,.5) 45%, var(--noir) 78%)}

/* ─────────  En-tete  ───────── */
header.top{position:fixed; top:0; left:0; right:0; z-index:80; height:var(--nav-h);
  background:rgba(5,5,5,.92); border-bottom:1px solid rgba(255,255,255,.06)}
.bar{display:flex; align-items:center; height:100%; gap:34px}
.logo{display:flex; align-items:center; gap:13px; font-weight:700; font-size:20px;
  letter-spacing:-.03em; background:none; border:0; color:inherit; cursor:pointer;
  font-family:inherit; padding:0}
/* Le logo se suffit a lui-meme : pas de pastille, pas d'ombre. Il est
   simplement plus grand, pose a cote du nom. */
.pastille{width:46px; height:46px; flex:none; display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.logo:hover .pastille{transform:scale(1.06)}
.pastille svg{width:44px; height:44px; stroke:var(--rouge-clair); stroke-width:2.5;
  fill:none; stroke-linecap:round}
.pastille img{width:100%; height:100%; object-fit:contain}
nav.liens{display:flex; gap:2px; margin-left:auto}
nav.liens a{padding:9px 15px; border-radius:10px; font-size:14.5px; color:var(--muted); transition:.2s}
nav.liens a:hover,nav.liens a[aria-current]{color:var(--ink); background:var(--voile)}
.tete-cta{display:flex; gap:10px; align-items:center}
.burger{display:none; width:42px; height:42px; border:1px solid var(--bord); border-radius:11px;
  background:none; color:#fff; cursor:pointer; align-items:center; justify-content:center}

/* ─────────  Boutons  ─────────
   `bt` est le nom courant, `btn` reste accepte : plusieurs pages l'emploient. */
.bt,.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 22px; border-radius:999px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:.28s cubic-bezier(.16,1,.3,1)}
.bt-f,.btn-outline,.btn-ghost{border-color:var(--bord-2); color:var(--ink); background:var(--voile)}
.bt-f:hover,.btn-outline:hover,.btn-ghost:hover{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.08)}
.bt-p,.btn-grad,.btn-white,.btn-primary{background:#fff; color:#050505}
.bt-p:hover,.bt-p:active,.btn-grad:hover,.btn-white:hover,.btn-primary:hover{
  background:linear-gradient(to right, var(--rouge-clair), var(--rouge));
  color:#fff; transform:scale(1.05); box-shadow:0 14px 40px -12px rgba(227,6,19,.7)}
.bt-lg,.btn-lg{height:56px; padding:0 34px; font-size:16.5px}
.bt:focus-visible,.btn:focus-visible,.logo:focus-visible,.burger:focus-visible,
.seg button:focus-visible{outline:2px solid var(--rouge-clair); outline-offset:3px}

/* ─────────  Menu plein ecran  ───────── */
.plein{position:fixed; inset:0; z-index:75; background:#050505;
  display:none; flex-direction:column; padding:calc(var(--nav-h) + 28px) 24px 40px}
.plein.on{display:flex}
.plein a{font-size:30px; font-weight:700; letter-spacing:-.03em; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.07); opacity:0;
  animation:entre .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes entre{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.plein .bas{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.plein .bas .bt{width:100%}

/* ─────────  Hero  ───────── */
.hero{position:relative; padding-top:var(--nav-h); overflow:hidden}
.hero.plein-ecran{min-height:100svh}
.hero-in{padding-top:100px; text-align:center}
.hero h1{font-size:clamp(34px,5.4vw,60px); max-width:17ch; margin:0 auto}
.sous{margin-top:24px; font-size:clamp(15px,1.5vw,18px); color:var(--muted);
  max-width:62ch; margin-inline:auto}
.cta{margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fondu .5s ease 1.5s forwards}
.note{margin-top:18px; font-size:13px; color:var(--muted-2);
  opacity:0; animation:fondu .5s ease 1.7s forwards}
@keyframes fondu{to{opacity:1}}

/* Revelation mot a mot : opacite + flou, etalee sur quatre secondes. */
.mot{display:inline-block; opacity:0; transform:translate3d(0,14px,0);
  animation:net .48s cubic-bezier(.22,1,.36,1) forwards}
@keyframes net{to{opacity:1; transform:translate3d(0,0,0)}}

/* En-tete court des pages interieures : pas d'attente de quatre secondes. */
.hero.court .hero-in{padding-top:76px; padding-bottom:10px}
.hero.court .cta,.hero.court .note{animation-delay:.35s}

.vu{opacity:0; transform:translate3d(0,18px,0)}
.vu.on{opacity:1; transform:translate3d(0,0,0);
  transition:opacity .38s ease-out, transform .48s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .mot,.cta,.note,.tableau,.vu{opacity:1 !important; filter:none !important; transform:none !important}
}

/* ─────────  Maquette du tableau de bord  ───────── */
.tableau{margin:64px auto 0; max-width:1080px; border-radius:16px; padding:8px;
  border:1px solid var(--bord); position:relative; z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:0 -1px 0 rgba(255,255,255,.12) inset, 0 50px 120px -50px rgba(227,6,19,.35),
             0 30px 80px -40px #000;
  opacity:0; animation:leve .7s cubic-bezier(.22,1,.36,1) 1.85s forwards}
@keyframes leve{from{opacity:0; transform:translate3d(0,26px,0)} to{opacity:1; transform:translate3d(0,0,0)}}
.ecran{border-radius:11px; overflow:hidden; border:1px solid var(--bord); background:var(--noir-2)}
.ecran-bar{display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--bord); background:rgba(255,255,255,.025)}
.pt{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14)}
.url{margin-left:12px; font-size:11.5px; color:var(--muted-2)}
.appli{display:grid; grid-template-columns:184px 1fr; min-height:380px}
.cote{border-right:1px solid var(--bord); padding:14px 10px; display:flex; flex-direction:column; gap:2px}
.cote-t{font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); padding:12px 9px 5px}
.cote-l{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  font-size:12.5px; color:var(--muted)}
.cote-l.on{background:rgba(227,6,19,.14); color:#FF8A8F; box-shadow:inset 0 0 0 1px rgba(227,6,19,.24)}
.cote-l u{margin-left:auto; text-decoration:none; font-size:9.5px; padding:1px 6px;
  border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted)}
.corps{padding:16px 18px}
.corps-h{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.corps-h b{font-size:15px; letter-spacing:-.02em}
.corps-h .mois{margin-left:auto; font-size:11px; color:var(--muted-2)}
.corps-h .mini{font-size:11px; padding:5px 11px; border-radius:999px; color:#fff; font-weight:500;
  background:linear-gradient(to right, var(--rouge-clair), var(--rouge))}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:13px}
.kpi{border:1px solid var(--bord); border-radius:11px; padding:11px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012))}
.kpi small{display:block; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2)}
.kpi b{display:block; font-size:19px; font-weight:700; letter-spacing:-.04em; margin-top:5px}
.kpi b i{font-style:normal; font-size:10px; color:var(--muted-2); margin-left:3px; font-weight:400}
.kpi u{display:block; text-decoration:none; font-size:10px; margin-top:3px; color:var(--muted-2)}
.kpi u.ok{color:var(--vert)} .kpi u.no{color:#FF6B72}
.liste{border:1px solid var(--bord); border-radius:11px; overflow:hidden}
.liste-h{display:flex; padding:10px 13px 9px; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-2)}
.liste-h span{margin-left:auto; letter-spacing:0; text-transform:none; font-size:10.5px}
.li{display:grid; grid-template-columns:1.4fr .9fr .7fr .7fr; gap:10px; align-items:center;
  padding:9px 13px; border-top:1px solid var(--bord); font-size:11.5px; color:var(--muted)}
.li b{color:var(--ink); font-weight:500}
.li .mnt{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
.et{justify-self:end; font-size:9.5px; padding:2px 8px; border-radius:999px}
.et-ok{background:rgba(74,222,128,.14); color:var(--vert)}
.et-no{background:rgba(255,107,114,.14); color:#FF6B72}
.et-at{background:rgba(255,255,255,.08); color:var(--muted)}

/* ─────────  Sections  ───────── */
.sec{padding:110px 0; position:relative; z-index:3}
.eyebrow{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rouge-clair); margin-bottom:16px}
.tete,.sec-head{text-align:center; max-width:44rem; margin:0 auto 54px}
.tete h2,.sec-head h2{font-size:clamp(28px,3.6vw,44px)}
.tete p,.sec-head p{color:var(--muted); margin-top:16px; font-size:17px}
.center{text-align:center; margin-inline:auto}
/* `grad-text` n'a plus de degrade : sur ce fond, le blanc plein est plus net. */
.grad-text{color:var(--ink)}

.grille{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.carte,.card{border:1px solid var(--bord); border-radius:16px; padding:26px 24px 30px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.05));
  box-shadow:inset 0 -40px 80px -34px rgba(227,6,19,.14);
  transition:border-color .35s, box-shadow .35s, transform .35s}
.carte:hover,.card:hover{border-color:rgba(255,255,255,.2); transform:translate3d(0,-3px,0);
  box-shadow:inset 0 -40px 80px -26px rgba(227,6,19,.3), 0 22px 44px -26px #000}
.carte .ic,.card-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--bord); background:rgba(255,255,255,.05); margin-bottom:18px; font-size:16px}
.card-ic svg{width:17px; height:17px; color:var(--ic,var(--rouge-clair))}
.carte h3,.card h3{font-size:18px; margin-bottom:9px; letter-spacing:-.02em}
.carte p,.card p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* ─────────  Metiers qui defilent  ───────── */
.metiers{margin-top:70px; text-align:center}
.metiers p{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:22px}
.defile-cadre{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.defile{display:flex; gap:56px; width:max-content; animation:glisse 32s linear infinite}
.defile span{font-size:17px; font-weight:500; color:rgba(255,255,255,.26); white-space:nowrap}
@keyframes glisse{to{transform:translateX(-50%)}}

/* ─────────  Packs  ───────── */
.packs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
.pack{position:relative; border:1px solid var(--bord); border-radius:18px; padding:28px 26px 30px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.05))}
.pack.mis{border-color:rgba(227,6,19,.4);
  box-shadow:inset 0 -60px 110px -34px rgba(227,6,19,.3), 0 30px 70px -42px rgba(227,6,19,.9)}
.pack .ruban,.pill{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:4px 13px;
  border-radius:999px; color:#fff; white-space:nowrap;
  background:linear-gradient(to right,var(--rouge-clair),var(--rouge))}
.pack h3,.plan-name{font-size:17px; letter-spacing:-.02em}
.pack .pour{font-size:13px; color:var(--muted-2); margin-top:4px}
.prix,.plan-price{display:block; font-size:46px; font-weight:700; letter-spacing:-.05em; margin:20px 0 2px}
.prix sup{font-size:.34em; font-weight:500; vertical-align:super; margin-left:5px; color:var(--muted)}
.pack .par,.plan-per{display:block; font-size:12px; color:var(--muted-2)}
.pack ul{list-style:none; margin:24px 0 26px; padding:0; display:grid; gap:11px}
.pack li{font-size:14px; color:var(--muted); display:flex; gap:10px}
.pack li b{color:var(--rouge-clair); flex:none}
.pack .bt,.pack .btn{width:100%}
.pack .ou{display:block; text-align:center; margin-top:11px; font-size:12px; color:var(--muted-2)}
.pack .ou a{border-bottom:1px solid var(--bord-2)}
.pack .ou a:hover{color:var(--ink)}

/* Les deux chemins de souscription, sur la page tarifs. */
.cta-duo{display:flex; flex-direction:column; gap:8px}
.cta-duo .bt,.cta-duo .btn{width:100%}
.cta-essai{font-size:11.5px; color:var(--muted-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--bord-2); white-space:nowrap; text-align:center}
.cta-essai:hover{color:var(--ink)}

/* ─────────  Tableaux  ───────── */
.tbl-wrap{overflow-x:auto; border:1px solid var(--bord); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.045))}
table{border-collapse:collapse; width:100%; min-width:840px}
th,td{text-align:left; padding:15px 20px; border-top:1px solid var(--bord);
  font-size:14.5px; color:var(--muted)}
thead th{border-top:0; vertical-align:bottom; background:rgba(255,255,255,.03); color:var(--ink)}
th.hi,td.hi{background:rgba(227,6,19,.07)}
td.mid{text-align:center; font-variant-numeric:tabular-nums}
td.feat{color:var(--ink)}
.yes{color:var(--rouge-clair)}
.no{color:#3F3F46}
thead th{position:relative}

/* ─────────  Segments  ───────── */
.seg{display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  border:1px solid var(--bord); background:var(--voile); margin-bottom:34px}
.seg button{font-family:inherit; font-size:13.5px; border:0; background:none;
  color:var(--muted); padding:9px 18px; border-radius:999px; cursor:pointer; transition:.22s}
.seg button.on{background:#fff; color:#050505; font-weight:600}

/* ─────────  Panneaux, formulaires  ───────── */
.panel{border:1px solid var(--bord); border-radius:18px; padding:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.05));
  box-shadow:inset 0 -40px 80px -40px rgba(227,6,19,.12)}
.panel h3{font-size:19px}
.form-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
.field{display:grid; gap:7px; margin-bottom:17px}
.field label{font-size:13.5px; font-weight:500; color:var(--ink)}
.field input,.field select{
  font-family:inherit; font-size:15px; padding:13px 15px; border-radius:12px; color:var(--ink);
  border:1px solid var(--bord-2); background:rgba(255,255,255,.05); transition:.2s}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none; border-color:var(--rouge-clair);
  background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(227,6,19,.18)}
.field small{font-size:12.5px; color:var(--muted-2)}
.field option{background:#101013; color:var(--ink)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
/* Champ piege : hors du flux sans display:none, que les robots detectent. */
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.alert,.avis{border:1px solid var(--bord-2); border-radius:14px; padding:16px 18px;
  margin-bottom:24px; background:rgba(255,255,255,.04)}
.alert{border-color:rgba(255,107,114,.45); background:rgba(255,107,114,.09)}
.alert strong,.avis strong{display:block; color:var(--ink); font-size:14.5px;
  font-weight:600; margin-bottom:6px}
.alert ul{margin:0; padding-left:18px; display:grid; gap:5px}
.alert li,.avis span{font-size:13.5px; color:var(--muted); line-height:1.55}
.alert a,.avis a{color:var(--rouge-clair); text-decoration:underline}
.avis{border-left:3px solid var(--rouge)}

.steps{display:grid; margin-top:20px}
.step{display:flex; gap:15px; padding:16px 0; border-top:1px solid var(--bord)}
.step b{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--rouge-clair);
  flex:none; padding-top:4px}
.step strong{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:3px}
.step p{font-size:13.5px; color:var(--muted); line-height:1.55}
.recap{position:sticky; top:calc(var(--nav-h) + 20px)}

.kv{display:grid; margin-top:18px}
.kv div{display:flex; justify-content:space-between; gap:18px; padding:13px 0;
  border-top:1px solid var(--bord); font-size:14.5px; color:var(--muted)}
.kv span:last-child{color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.checks li{display:flex; gap:12px; font-size:15px; color:var(--muted)}
.checks li svg{width:18px; height:18px; flex:none; color:var(--rouge-clair); margin-top:3px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.quote{margin-top:26px; padding-left:15px; border-left:2px solid var(--rouge); font-size:13.5px; color:var(--muted-2)}

/* ─────────  FAQ  ───────── */
.faq{border-top:1px solid var(--bord)}
.faq details{border-bottom:1px solid var(--bord); padding:19px 0}
.faq summary{cursor:pointer; font-size:16px; color:var(--ink); font-weight:500; list-style:none;
  display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--muted-2); font-family:"JetBrains Mono",monospace}
.faq details[open] summary::after{content:"\2212"; color:var(--rouge-clair)}
.faq p{margin-top:12px; color:var(--muted); font-size:14.5px; max-width:62ch}

/* ─────────  Pages de texte  ───────── */
.prose{max-width:70ch}
.prose h2{font-size:clamp(26px,3vw,38px); margin-bottom:10px}
.prose h3{font-size:17px; margin:34px 0 10px; color:var(--ink)}
.prose p,.prose li{color:var(--muted); font-size:15.5px; line-height:1.75}
.prose p + p{margin-top:12px}
.prose ul{padding-left:20px; display:grid; gap:8px; margin:12px 0}
.prose a{color:var(--rouge-clair)}
.prose .maj{font-size:12.5px; color:var(--muted-2); margin-top:6px}

/* ─────────  Appel final  ───────── */
.final{position:relative; overflow:hidden; border:1px solid var(--bord); border-radius:22px;
  padding:66px 40px; text-align:center; margin-bottom:100px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.06));
  box-shadow:inset 0 -90px 150px -50px rgba(227,6,19,.3)}
.final h2{position:relative; font-size:clamp(28px,3.6vw,44px)}
.final p{position:relative; color:var(--muted); margin:16px auto 30px; max-width:46ch}
.final .bt{position:relative}

footer{border-top:1px solid var(--bord); padding:38px 0 54px; font-size:13.5px;
  color:var(--muted-2); position:relative; z-index:3}
.pied,.foot{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap}
.pied a:hover,.foot a:hover{color:var(--ink)}

/* ─────────  Carrousel de captures  ───────── */
.carrousel{position:relative; z-index:3; overflow:hidden; padding-bottom:48px; margin-bottom:-48px}
.carr-piste{display:flex; transition:transform .55s cubic-bezier(.16,1,.3,1)}
.carr-vue{flex:0 0 100%; margin:0; padding:0 2px}
.carr-cadre{border:1px solid var(--bord); border-radius:16px; overflow:hidden;
  background:var(--noir-2); box-shadow:0 40px 100px -50px rgba(227,6,19,.4), 0 20px 60px -40px #000}
.carr-cadre img{width:100%; height:auto; background:#fff}
.carr-vue figcaption{text-align:center; padding:22px 20px 0}
.carr-vue figcaption b{display:block; font-size:16px; font-weight:600; letter-spacing:-.02em}
.carr-vue figcaption span{display:block; font-size:14px; color:var(--muted); margin-top:6px;
  max-width:58ch; margin-inline:auto}
.carr-fleche{position:absolute; top:38%; transform:translateY(-50%); z-index:4;
  width:42px; height:42px; border-radius:50%; cursor:pointer; opacity:.6;
  border:1px solid var(--bord-2); background:rgba(5,5,5,.86);
  color:#fff; display:grid; place-items:center; transition:.2s}
.carr-fleche svg{width:19px; height:19px}
.carr-fleche.gauche{left:14px} .carr-fleche.droite{right:14px}
.carrousel:hover .carr-fleche{opacity:1}
.carr-fleche:hover{background:#fff; color:#050505; border-color:#fff}
.carr-points{display:flex; justify-content:center; gap:8px; margin-top:24px}
.carr-point{width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.24); transition:.25s}
.carr-point.on{background:var(--rouge-clair); width:22px}
.carr-point:hover{background:rgba(255,255,255,.5)}

@media (max-width:900px){
  nav.liens,.tete-cta .bt-f{display:none}
  .burger{display:flex}
  .hero-in{padding-top:76px}
  .appli{grid-template-columns:1fr} .cote{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .grille,.packs,.split,.form-grid{grid-template-columns:1fr}
  .split,.form-grid{gap:34px}
  .li{grid-template-columns:1.3fr .8fr .8fr} .li .mono{display:none}
  .sec{padding:74px 0}
  .tableau{margin-top:44px}
  .recap{position:static}
  .carr-fleche{display:none}
  .final{padding:44px 22px}
}
@media (max-width:600px){
  .tete-cta .bt-p{display:none}
  .cta .bt{width:100%}
  .two{grid-template-columns:1fr}
}


/* ─────────  Pack sur devis, en bande  ─────────
   Il n'a pas de prix a comparer : le mettre en colonne laissait un vide
   dans la grille et le faisait paraitre au rabais. */
.bande-pack{display:grid; grid-template-columns:1.1fr 1fr auto; gap:36px; align-items:center;
  margin-top:16px; padding:28px 30px; border:1px solid var(--bord); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04))}
.bande-pack h3{font-size:17px; letter-spacing:-.02em}
.bande-pack p{font-size:14px; color:var(--muted); margin-top:8px; max-width:48ch}
.bande-pack ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.bande-pack li{font-size:14px; color:var(--muted); display:flex; gap:10px}
.bande-pack li b{color:var(--rouge-clair); flex:none}
.bande-pack .bt{white-space:nowrap}
@media (max-width:900px){
  .bande-pack{grid-template-columns:1fr; gap:22px}
  .bande-pack .bt{width:100%}
}