/* CarPanel — site vitrine. Design system aligné sur l'app :
   navy #0E1B3D + orange #FF6A2C, Poppins, rayons 12/16, pastilles d'icônes SOFT_TINT. */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Poppins_400Regular.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Poppins_500Medium.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Poppins_600SemiBold.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Poppins_700Bold.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/Poppins_800ExtraBold.woff2) format('woff2')}

:root{
  --navy:#0E1B3D; --navy-2:#14264F; --navy-3:#1A2C57; --orange:#FF6A2C; --orange-deep:#E84F18;
  --paper:#F4F7FB; --card:#FFFFFF; --ink:#16233F; --slate:#5A6A8A; --line:#DCE4F0;
  --hero-ink:#FFFFFF; --hero-slate:#B9C4DC; --hero-line:rgba(185,196,220,.22);
  --tint:rgba(255,106,44,.12);
  --r-md:12px; --r-lg:16px; --w:1120px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ animation:none!important; transition:none!important } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16.5px/1.65 Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:var(--w); margin:0 auto; padding:0 24px }
h1,h2,h3{ text-wrap:balance; margin:0 }
p{ margin:0 }
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange); margin-bottom:14px;
}

/* Boutons — mêmes codes que l'app : rayon 12, orange vif + label NAVY */
.btn{
  display:inline-block; padding:13px 24px; border-radius:var(--r-md); font-weight:700; font-size:15.5px;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor:pointer;
  font-family:inherit;
}
.btn:focus-visible{ outline:3px solid var(--orange); outline-offset:3px }
.btn-solid{ background:var(--orange); color:var(--navy); box-shadow:0 8px 22px rgba(255,106,44,.35) }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,106,44,.45) }
.btn-ghost{ border:1.5px solid var(--hero-line); color:var(--hero-ink) }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px) }
.btn-ghost-ink{ border:1.5px solid var(--line); color:var(--ink) }
.btn-ghost-ink:hover{ border-color:var(--orange); color:var(--orange) }

/* Bouton « retour en haut » — fixe en bas à droite, apparaît après défilement.
   Masqué par défaut (aria-hidden + opacité) ; la classe .show le révèle (JS). */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:var(--orange); color:var(--navy);
  display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(255,106,44,.4);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, box-shadow .15s ease;
}
.totop.show{ opacity:1; transform:translateY(0); pointer-events:auto }
.totop:hover{ box-shadow:0 12px 26px rgba(255,106,44,.5) }
.totop:focus-visible{ outline:3px solid var(--navy); outline-offset:3px }
.totop svg{ width:22px; height:22px; display:block }
@media (max-width:600px){ .totop{ right:14px; bottom:14px; width:44px; height:44px } }
@media (prefers-reduced-motion:reduce){ .totop{ transition:opacity .2s ease } }

/* Logo SVG (vrai logo vectoriel de l'app) */
.logo-link{ display:inline-flex; align-items:center; color:#fff; text-decoration:none }
.logo-svg{ height:26px; width:auto; display:block }
.logo-svg-foot{ height:24px; width:auto; display:block }

/* ── Nav ── */
nav{
  position:sticky; top:0; z-index:50; background:rgba(14,27,61,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hero-line);
}
nav .wrap{ display:flex; align-items:center; gap:28px; height:66px }
nav .links{ display:flex; gap:24px; margin-left:auto }
nav .links a{ color:var(--hero-slate); text-decoration:none; font-size:14.5px; font-weight:600 }
nav .links a:hover, nav .links a[aria-current]{ color:#fff }
nav .cta{ padding:9px 18px; font-size:14px }
/* CTA du menu mobile — masqué sur desktop (la barre porte déjà son bouton).
   Revue personas 9 juil. 2026 : le menu burger n'offrait aucune action directe. */
nav .links .links-cta{ display:none }
.navtoggle{ display:none }
.burger{ display:none; margin-left:auto; cursor:pointer; padding:10px; flex-direction:column; gap:5px }
.burger span{ display:block; width:22px; height:2.5px; border-radius:2px; background:#fff; transition:transform .2s ease, opacity .2s ease }
@media (max-width:820px){
  .burger{ display:flex }
  /* Menu mobile : ouverture ANIMÉE (déroulé en hauteur + fondu) au lieu d'une
     apparition instantanée. On garde .links toujours en flex mais replié
     (max-height:0 + opacité 0) ; la case cochée le déroule. `visibility` est
     retardée à la fermeture pour laisser l'animation se terminer avant de
     couper les clics. La règle reduced-motion globale (haut du fichier) coupe
     ces transitions → repli instantané pour qui le préfère. */
  nav .links{
    display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0;
    background:#0E1B3D; padding:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .32s ease, opacity .24s ease, padding .32s ease, visibility 0s linear .32s;
  }
  nav .links a{ padding:13px 24px; font-size:16px }
  nav .links .links-cta{ display:block; margin:10px 20px 8px; padding:13px 18px; text-align:center;
    background:var(--orange); color:var(--navy); font-weight:700; border-radius:12px }
  .navtoggle:checked ~ .links{
    max-height:460px; opacity:1; visibility:visible; padding:8px 0 12px;
    border-bottom:1px solid var(--hero-line); box-shadow:0 18px 30px rgba(0,0,0,.35);
    transition:max-height .34s ease, opacity .3s ease .04s, padding .34s ease, visibility 0s;
  }
  .navtoggle:checked ~ .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
  .navtoggle:checked ~ .burger span:nth-child(2){ opacity:0 }
  .navtoggle:checked ~ .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }
  nav .cta{ display:none }
}

/* ── Hero (accueil + pages hub) ── */
.hero{ background:linear-gradient(175deg, var(--navy) 62%, var(--navy-2) 100%); color:var(--hero-ink); overflow:hidden }
/* Accueil : photo de carrosserie EN FOND, vue « à travers » un voile bleu marine
   assez soutenu (la photo est claire) → texte blanc lisible + identité préservée.
   Image légère (JPG optimisé) ; version mobile plus petite. */
.hero--photo{
  background:
    linear-gradient(175deg, rgba(14,27,61,.72) 0%, rgba(14,27,61,.6) 52%, rgba(20,38,79,.86) 100%),
    url(/assets/img/hero-carrosserie.jpg) center 42% / cover no-repeat;
}
@media (max-width:820px){
  /* Mobile : la section est TRÈS haute (titre + aperçu app + chiffres) → étirer
     la photo en `cover` renvoyait le sujet tout en bas, derrière l'aperçu, et ne
     laissait que le haut sombre derrière le titre. On affiche donc l'image
     PORTRAIT comme une bannière en HAUT (largeur 100%, hauteur naturelle : toute
     la scène visible, non zoomée, derrière le titre) puis on fond dans le bleu ;
     l'aperçu de l'app et les chiffres restent sur fond uni. */
  .hero--photo{
    background:
      linear-gradient(180deg, rgba(14,27,61,.48) 0%, rgba(14,27,61,.44) 34%, rgba(14,27,61,.72) 58%, rgba(16,29,64,.94) 74%, var(--navy) 86%),
      url(/assets/img/hero-carrosserie-mobile.jpg) top center / 100% auto no-repeat,
      var(--navy);
  }
}
/* Page Particuliers (/carrosserie/) : hero « flat » (texte seul) → photo remise
   de clés en plein cadre `cover`. Images plus claires que l'accueil → voile un
   peu plus soutenu pour garder le titre lisible. */
.hero--particuliers{
  background:
    linear-gradient(175deg, rgba(14,27,61,.8) 0%, rgba(14,27,61,.7) 50%, rgba(20,38,79,.9) 100%),
    url(/assets/img/hero-particuliers.jpg) center 38% / cover no-repeat;
}
@media (max-width:820px){
  .hero--particuliers{
    background:
      linear-gradient(180deg, rgba(14,27,61,.82) 0%, rgba(14,27,61,.72) 46%, rgba(20,38,79,.9) 100%),
      url(/assets/img/hero-particuliers-mobile.jpg) center 32% / cover no-repeat;
  }
}
/* Page Flotte (/flotte/) : hero « flat » → photo parc de véhicules d'entreprise
   sous voile bleu. Image en lumière chaude (coucher de soleil) → voile un peu
   plus dense pour la refroidir/assombrir et garder le titre lisible. */
.hero--flotte{
  background:
    linear-gradient(175deg, rgba(14,27,61,.82) 0%, rgba(14,27,61,.72) 50%, rgba(20,38,79,.9) 100%),
    url(/assets/img/hero-flotte.jpg) center 46% / cover no-repeat;
}
@media (max-width:820px){
  .hero--flotte{
    background:
      linear-gradient(180deg, rgba(14,27,61,.82) 0%, rgba(14,27,61,.72) 46%, rgba(20,38,79,.9) 100%),
      url(/assets/img/hero-flotte-mobile.jpg) center 42% / cover no-repeat;
  }
}
/* Page Carrossiers (/logiciel-carrosserie/) : hero AVEC aperçu d'app (non-flat)
   → même logique que l'accueil (bannière mobile pour ne pas cacher le sujet
   derrière l'aperçu). Photo atelier haut de gamme, déjà sombre → voile léger. */
.hero--carrossiers{
  background:
    linear-gradient(175deg, rgba(14,27,61,.86) 0%, rgba(14,27,61,.76) 52%, rgba(20,38,79,.93) 100%),
    url(/assets/img/hero-carrossiers.jpg) center 46% / cover no-repeat;
}
@media (max-width:820px){
  .hero--carrossiers{
    background:
      linear-gradient(180deg, rgba(14,27,61,.68) 0%, rgba(14,27,61,.63) 34%, rgba(14,27,61,.86) 58%, rgba(16,29,64,.96) 74%, var(--navy) 86%),
      url(/assets/img/hero-carrossiers-mobile.jpg) top center / 100% auto no-repeat,
      var(--navy);
  }
}
.hero .wrap{ padding:78px 24px 0; text-align:center }
.hero.flat .wrap{ padding-bottom:74px }
.hero h1{
  font-size:clamp(32px, 5vw, 54px); font-weight:800; line-height:1.12; letter-spacing:-.02em;
  max-width:840px; margin:0 auto;
}
.hero h1 .em{ color:var(--orange) }
.hero p.lede{
  max-width:640px; margin:22px auto 0; color:var(--hero-slate); font-size:18px; line-height:1.65;
}
.hero .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px }
.hero .shot{
  margin:62px auto -2px; max-width:940px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:1px solid var(--hero-line); border-bottom:none;
  box-shadow:0 -12px 80px rgba(255,106,44,.14), 0 24px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.hero .shot img{ display:block; width:100%; height:auto }

/* ── En-tête de page simple (légal, contact…) ── */
.pagehead{ background:linear-gradient(175deg, var(--navy) 62%, var(--navy-2) 100%); color:#fff }
.pagehead .wrap{ padding:64px 24px 62px }
.pagehead h1{ font-size:clamp(30px,4.6vw,48px); font-weight:800; letter-spacing:-.02em }
.pagehead p{ color:var(--hero-slate); margin-top:12px; max-width:640px; font-size:17px }

/* ── Deux portes ── */
.doors{ padding:84px 0 }
.doors .grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
@media (max-width:860px){ .doors .grid{ grid-template-columns:1fr } }
.door{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; display:flex; flex-direction:column; gap:14px;
}
/* Micro-animation au survol des cartes de contenu : ombre portée + bordure
   teintée (PAS de `transform` — ces cartes sont aussi la cible de l'apparition
   au défilement, elle-même en transform, on évite le conflit). */
.door, .feat, .step, .plan{ transition:box-shadow .2s ease, border-color .2s ease }
.door:hover, .feat:hover, .step:hover, .plan:hover{
  box-shadow:0 16px 38px rgba(14,27,61,.14);
  border-color:rgba(255,106,44,.5);
}
@media (prefers-reduced-motion: reduce){
  .door, .feat, .step, .plan{ transition:none }
}
.door .tag{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange) }
.door h2{ font-size:24px; font-weight:700; letter-spacing:-.015em }
.door ul{ margin:4px 0 10px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.door li{ padding-left:28px; position:relative; color:var(--slate); font-size:15.5px }
.door li::before{ content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:6px;
  background:var(--tint); color:var(--orange); font-size:12px; font-weight:800; display:grid; place-items:center }
.door li b{ color:var(--ink); font-weight:600 }
.door .btn{ align-self:flex-start; margin-top:auto }

/* ── Sections communes ── */
section .head{ text-align:center; max-width:680px; margin:0 auto 48px }
section .head h2{ font-size:clamp(25px,3.4vw,36px); font-weight:800; letter-spacing:-.02em }
section .head p{ color:var(--slate); margin:14px 0 0; font-size:17px }

/* ── Grille de fonctionnalités — pastille d'icône façon app (SOFT_TINT) ── */
.features{ padding:30px 0 90px }
.features .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:960px){ .features .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .features .grid{ grid-template-columns:1fr } }
.feat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px }
.feat .ico{
  width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; margin-bottom:16px;
  background:var(--tint); color:var(--orange);
}
.feat .ico svg{ width:23px; height:23px }
.feat h3{ font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em }
.feat p{ margin:0; color:var(--slate); font-size:14.5px; line-height:1.62 }

/* ── Sections produit alternées (page logiciel) ── */
.featrows{ padding:20px 0 60px }
.featrow{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; padding:44px 0 }
.featrow:nth-child(even){ grid-template-columns:1.15fr 1fr }
.featrow:nth-child(even) .txt{ order:2 }
@media (max-width:880px){ .featrow, .featrow:nth-child(even){ grid-template-columns:1fr } .featrow:nth-child(even) .txt{ order:0 } }
.featrow .txt h2{ font-size:clamp(22px,2.8vw,30px); font-weight:800; letter-spacing:-.015em; margin-bottom:12px }
.featrow .txt p{ color:var(--slate); font-size:15.5px; line-height:1.7 }
.featrow .txt ul{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px }
.featrow .txt li{ padding-left:26px; position:relative; color:var(--slate); font-size:15px }
.featrow .txt li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800 }
.featrow .txt li b{ color:var(--ink); font-weight:600 }
.featrow figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(14,27,61,.12) }
.featrow img{ display:block; width:100%; height:auto }

/* ── Étapes (page carrosserie) ── */
.steps{ padding:30px 0 80px }
.steps .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media (max-width:860px){ .steps .grid{ grid-template-columns:1fr } }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; position:relative }
.step .num{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;
  background:var(--orange); color:var(--navy); font-weight:800; font-size:15px;
}
.step h3{ font-size:17px; font-weight:700; margin-bottom:8px }
.step p{ color:var(--slate); font-size:14.5px; line-height:1.62 }

/* ── Ordres de grandeur (page carrosserie) — fourchettes TTC de la grille de
   référence. Revue personas 9 juil. 2026 : « aucune fourchette de prix publique ». ── */
.ranges{ max-width:820px; margin:36px auto 0 }
.ranges h3{ text-align:center; font-size:16.5px; font-weight:700; margin-bottom:16px }
.range-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (max-width:620px){ .range-grid{ grid-template-columns:1fr } }
.range{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px }
.range-label{ color:var(--slate); font-size:14.5px }
.range-price{ font-weight:800; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.range-note{ text-align:center; color:var(--slate); font-size:12.5px; margin:14px auto 0; max-width:620px }

/* Mention discrète sous le CTA d'une porte (accueil — carrossier indépendant) */
.door-alt{ margin:10px 0 0; font-size:13px; color:var(--slate) }
.door-alt a{ color:var(--slate); text-decoration:underline }
.door-alt a:hover{ color:var(--orange) }

/* Note « clients gratuits » au-dessus des cartes de prix (page tarifs) */
.clientnote{ text-align:center; color:var(--slate); font-size:14.5px; margin:0 auto 34px; max-width:640px }
.clientnote b{ color:var(--orange) }
.clientnote a{ color:var(--slate); text-decoration:underline }
.clientnote a:hover{ color:var(--orange) }


/* Consigne de la visite : cartouche SOUS l'écran (la bulle posée sur la capture
   masquait ce qu'on est censé regarder). min-height : limite les sauts de mise
   en page entre étapes aux textes inégaux. */
.demo-caption{ display:none; margin-top:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px; min-height:96px; text-align:left }
.demo-caption.on{ display:block }
.demo-caption p{ margin:0 0 6px; font-size:14.5px; line-height:1.5; color:var(--ink) }
.demo-caption .demo-do{ display:block }

.demo-caption-final{ text-align:center }
.demo-final-actions{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px }

/* Démo téléphone SEULE sur la page : sur PC le téléphone est haut — le
   cartouche passe À CÔTÉ (tout tient dans la vue) ; empilé sur mobile.
   Le duo de l'accueil (colonnes étroites) et la fenêtre desktop (large,
   pas haute) gardent le cartouche dessous. */
.demo-solo{ max-width:340px; margin:0 auto }
@media (min-width:900px){
  .demo-solo{ max-width:760px }
  .demo-solo .demo{ display:grid; grid-template-columns:340px minmax(280px,1fr); gap:28px; align-items:center }
  .demo-solo .demo-caption{ margin-top:0 }
  .demo-solo .demo-caption-final{ text-align:left }
  .demo-solo .demo-final-actions{ justify-content:flex-start }
  .demo-solo .demo-bar{ grid-column:1 / -1 }
}

/* ── Bande captures ── */
.strip{ background:var(--navy); padding:76px 0 }
/* Variante COMPACTE : bande titre + bouton, sans visuels — le padding standard
   (76px) laissait un grand vide sous le CTA (revue mobile 9 juil. 2026). */
.strip.slim{ padding:54px 0 58px }
/* Deux bandes marine qui se suivent : liseré discret pour les distinguer. */
.strip.slim + .strip.slim{ border-top:1px solid var(--hero-line) }
.strip.slim .head{ margin-bottom:0 }
/* Rangée de CTA : flex + gap (deux boutons côte à côte se chevauchaient en
   text-align:center — le halo du bouton plein mordait sur le bouton fantôme).
   flex-wrap : sur mobile, les boutons s'empilent proprement, centrés. */
.cta-row{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap }
.strip.slim .cta-row{ margin:26px 0 0 }
.strip .head h2, .strip .head{ color:#fff }
.strip .head p{ color:var(--hero-slate) }
.strip .row{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start }
@media (max-width:860px){ .strip .row{ grid-template-columns:1fr } }
.strip figure{ margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hero-line);
  box-shadow:0 18px 60px rgba(0,0,0,.45) }
.strip img{ display:block; width:100%; height:auto }
.strip .tall img{ max-height:560px; object-fit:cover; object-position:top }
.strip figcaption{ font-size:13px; color:var(--hero-slate); padding:10px 4px 0 }

/* ── Tarifs ── */
.pricing{ padding:90px 0 }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto } }
.plan{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px; display:flex; flex-direction:column; gap:8px }
.plan.hot{ border:2px solid var(--orange); position:relative; box-shadow:0 16px 48px rgba(255,106,44,.16) }
.plan.hot .flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:var(--navy); font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 14px; border-radius:999px }
.plan h3{ font-size:18px; font-weight:700 }
.plan .price{ font-size:36px; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums }
.plan .price small{ font-size:14px; font-weight:500; color:var(--slate); letter-spacing:0 }
/* Lien discret sous le CTA d'une carte (Entreprise : « Contactez-nous »). */
.plan .plan-alt{ margin:10px 0 0; font-size:12.5px; color:var(--slate); text-align:center }
.plan .plan-alt a{ color:var(--slate); text-decoration:underline }
.plan .plan-alt a:hover{ color:var(--orange) }

/* Prix « formule » (Entreprise : socle + par compte) : plus long → typo réduite
   pour tenir sur une ligne, même hauteur visuelle que les prix simples.
   ⚠️ min-width:0 sur .plan : sans lui, le nowrap impose sa largeur minimale à
   la colonne de grille et faisait déborder les cartes sur téléphone. */
.plan{ min-width:0 }
.plan .price-formula{ font-size:26px; line-height:1.25; white-space:nowrap; padding:7px 0 }
/* « HT / mois » passe SOUS la formule : en ligne, il débordait de la carte
   à toutes les largeurs desktop (la formule seule tient, l'unité se lit dessous). */
.plan .price-formula small{ display:block; margin-top:3px }
/* Largeurs intermédiaires (grille 3 colonnes étroite) : formule réduite pour
   rester sur une ligne dans une colonne ~230 px. */
@media (max-width:1200px) and (min-width:561px){ .plan .price-formula{ font-size:22px } }
@media (max-width:560px){ .plan .price-formula{ font-size:21px } }
/* Équivalent annuel sous le prix mensuel (2 mois offerts — ANNUAL_MONTHS_CHARGED). */
.plan .annual{ font-size:12.5px; color:var(--orange); font-weight:600; margin:2px 0 6px }
.plan .who{ color:var(--slate); font-size:14px; min-height:44px }
.plan ul{ margin:12px 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px }
.plan li{ font-size:14.5px; color:var(--slate); padding-left:24px; position:relative }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800 }
.plan .btn{ margin-top:auto; text-align:center }
.trial{ text-align:center; color:var(--slate); font-size:14.5px; margin-top:26px }
.trial b{ color:var(--orange) }

/* Tableau comparatif (page tarifs) */
.compare{ padding:10px 0 90px }
.compare .tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card) }
.compare table{ border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px }
.compare th, .compare td{ padding:13px 18px; text-align:left; border-top:1px solid var(--line) }
.compare thead th{ border-top:none; background:var(--paper); font-weight:700; font-size:13.5px }
.compare td.c{ text-align:center; color:var(--slate) }
.compare td.c .yes{ color:var(--orange); font-weight:800 }
.compare tbody th{ font-weight:600; color:var(--ink); font-size:14px }

/* ── FAQ ── */
.faq{ padding:70px 0 90px }
.faq h2.cat{ font-size:20px; font-weight:800; margin:38px 0 16px; letter-spacing:-.01em }
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0; margin-bottom:10px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:16px 20px; font-weight:600; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--orange); font-weight:800; font-size:19px; flex-shrink:0 }
.faq details[open] summary::after{ content:"–" }
.faq .a{ padding:0 20px 18px; color:var(--slate); font-size:15px; line-height:1.7 }

/* ── Bloc aide / CTA final ── */
.help{ padding:0 0 90px }
.help .box{
  background:linear-gradient(135deg, var(--navy), var(--navy-3)); border-radius:18px; color:#fff;
  padding:56px 48px; display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center;
}
@media (max-width:820px){ .help .box{ grid-template-columns:1fr; padding:40px 28px } }
.help h2{ font-size:clamp(23px,3vw,30px); font-weight:800; letter-spacing:-.015em }
.help p{ color:var(--hero-slate); margin:14px 0 24px; font-size:15.5px }
.help .mini{ display:flex; flex-direction:column; gap:12px }
.help .mini a{
  background:rgba(255,255,255,.06); border:1px solid var(--hero-line); border-radius:var(--r-md);
  padding:15px 20px; color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  display:flex; justify-content:space-between; align-items:center;
}
.help .mini a:hover{ border-color:var(--orange) }
.help .mini span{ color:var(--orange) }

.ctaband{ padding:0 0 90px }
/* Quand le carton CTA (marine) suit directement une bande marine (.strip),
   les deux blocs bleus se collaient — on aère avec le fond clair de la page. */
.strip + .ctaband{ padding-top:64px }
.ctaband .box{
  background:linear-gradient(135deg, var(--navy), var(--navy-3)); border-radius:18px; color:#fff;
  padding:56px 48px; text-align:center;
}
.ctaband h2{ font-size:clamp(23px,3vw,32px); font-weight:800; letter-spacing:-.015em }
.ctaband p{ color:var(--hero-slate); margin:14px auto 26px; max-width:560px; font-size:16px }

/* ── Prose (pages légales, à propos) ── */
.prose{ padding:56px 0 90px }
.prose .inner{ max-width:760px; margin:0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:44px 48px }
@media (max-width:640px){ .prose .inner{ padding:28px 22px } }
.prose h2{ font-size:19px; font-weight:700; margin:30px 0 10px; letter-spacing:-.01em }
.prose h2:first-child{ margin-top:0 }
.prose p{ color:var(--slate); font-size:15px; line-height:1.75; margin-bottom:12px; white-space:pre-line }
.prose .note{ font-size:13.5px; color:var(--slate); border-left:3px solid var(--orange); padding-left:14px; margin-top:26px }
.prose a{ color:var(--orange); text-decoration:none }
.prose a:hover{ text-decoration:underline }

/* ── Contact ── */
.contactgrid{ padding:56px 0 90px }
.contactgrid .grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto }
@media (max-width:720px){ .contactgrid .grid{ grid-template-columns:1fr } }
.contactcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
  display:flex; flex-direction:column; gap:10px }
.contactcard .ico{ width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--tint); color:var(--orange) }
.contactcard .ico svg{ width:22px; height:22px }
.contactcard h3{ font-size:17px; font-weight:700 }
.contactcard p{ color:var(--slate); font-size:14.5px; line-height:1.6 }
.contactcard a.mail{ color:var(--orange); font-weight:700; text-decoration:none; font-size:16px }
.contactcard a.mail:hover{ text-decoration:underline }

/* ── Footer ── */
footer{ border-top:1px solid var(--line); padding:52px 0 40px; color:var(--slate); font-size:14px; background:var(--card) }
.footgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px }
@media (max-width:820px){ .footgrid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .footgrid{ grid-template-columns:1fr } }
/* align-items:flex-start : sans lui, le SVG du logo s'étire sur toute la
   colonne (stretch) et son dessin se recentre → logo décalé vers la droite. */
.brandcol{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:var(--ink) }
.brandcol .tagline{ font-size:13px; font-weight:500; color:var(--slate) }
.brandcol .tagline b{ color:var(--orange); font-weight:600 }
.brandcol .footdesc{ font-size:13.5px; line-height:1.6; color:var(--slate); max-width:320px }
.footcol{ display:flex; flex-direction:column; gap:9px }
.footcol h4{ margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink) }
.footcol a{ color:var(--slate); text-decoration:none; font-size:14px }
.footcol a:hover{ color:var(--orange) }
.footbase{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:13px }

/* 404 */
.notfound-links{ margin-top:22px; font-size:14.5px; color:var(--slate) }
.notfound-links a{ color:var(--slate); text-decoration:underline }
.notfound-links a:hover{ color:var(--orange) }
.notfound{ padding:110px 0 130px; text-align:center }
.notfound h1{ font-size:clamp(40px,8vw,84px); font-weight:800; color:var(--navy); letter-spacing:-.03em }
.notfound p{ color:var(--slate); margin:14px 0 30px; font-size:17px }

/* ── Cadres d'appareils (captures) ────────────────────────────────────────── */
/* Fenêtre navigateur minimaliste : dit « logiciel web » sans photo d'appareil. */
.window{ background:var(--card) }
.winbar{ display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:#EAF0F8; border-bottom:1px solid var(--line) }
.winbar .dots{ display:flex; gap:5px; flex-shrink:0 }
.winbar .dots i{ width:9px; height:9px; border-radius:50%; background:#D3DCEA; display:block }
.winbar .addr{
  flex:1; max-width:300px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:999px; font-size:11px; color:var(--slate); text-align:center;
  padding:3px 12px; font-weight:500; letter-spacing:.01em; white-space:nowrap; overflow:hidden;
}
/* Variante sur section sombre (héros, bande navy) */
.window.dark{ background:#0B142E }
.window.dark .winbar{ background:#16244A; border-color:var(--hero-line) }
.window.dark .dots i{ background:#31426E }
.window.dark .addr{ background:#0E1B3D; border-color:var(--hero-line); color:var(--hero-slate) }

/* Coque smartphone stylisée (CSS pur) */
.phone{
  width:min(300px, 82%); margin:0 auto; padding:10px; border-radius:40px;
  background:#0B142E; border:1px solid var(--hero-line);
  box-shadow:0 18px 60px rgba(0,0,0,.45); position:relative;
}
/* (encoche « Dynamic Island » supprimée : posée en overlay, elle masquait le
   haut des captures — barre de recherche, en-têtes — au lieu d'habiller le cadre.) */
/* Capture affichée EN ENTIER : le recadrage object-fit coupait la barre
   d'onglets du bas en plein milieu → l'écran semblait déborder du cadre. */
.phone img{ display:block; width:100%; height:auto; border-radius:30px }
.strip figure.phonewrap{ border:none; box-shadow:none; border-radius:0; overflow:visible; background:none }
.strip figure.phonewrap figcaption{ text-align:center }

/* ── Visite guidée cliquable (vraies captures + points cliquables) ───────────
   Générée par build.js depuis demos.json. Un clic sur le point orange passe à
   l'étape suivante (script du layout). Sans JS : l'étape 1 reste affichée. */
.demo-section{ padding:64px 0 26px }
.demo-section h2{ font-size:clamp(26px,4vw,36px); font-weight:800; color:var(--navy); letter-spacing:-.02em; text-align:center }
.demo-section .demo-sub{ color:var(--slate); text-align:center; margin:10px auto 34px; max-width:560px; font-size:16px }
/* Colonne LARGE = la démo atelier (fenêtre desktop). Depuis la revue personas,
   le client (téléphone) passe en premier dans le DOM (ordre mobile) → la piste
   large doit donc être la 2ᵉ. Ne pas re-swapper sans inverser aussi le DOM. */
.demo-duo{ display:grid; grid-template-columns:1fr 2fr; gap:32px; align-items:start }
@media (max-width:940px){ .demo-duo{ grid-template-columns:1fr } }
.demo-duo h3{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 10px; text-align:center }

.demo-window{ border-radius:14px; overflow:hidden; border:1px solid var(--hero-line); box-shadow:0 18px 50px rgba(11,20,46,.18) }
.demo-stage{ position:relative; width:100% }
.demo-phone .demo-stage{ border-radius:30px; overflow:hidden }
.demo-shot{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .35s ease; display:block }
.demo-shot.on{ opacity:1 }
/* La 1ʳᵉ image dimensionne la scène (les autres sont empilées dessus). */
.demo-stage .demo-shot[data-step="0"]{ position:relative; inset:auto; height:auto }

/* « Beacon » discret : anneau translucide + petit cœur — l'écran reste lisible
   à travers (le point plein masquait l'élément qu'il désignait). */
.demo-spot{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; padding:0;
  background:rgba(255,106,44,.14); border:1.5px solid rgba(255,106,44,.6);
  border-radius:50%; cursor:pointer; display:none; z-index:3; transition:background .2s, border-color .2s }
.demo-spot::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  margin:-4px 0 0 -4px; border-radius:50%; background:rgba(255,106,44,.85) }
.demo-spot i{ position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(255,106,44,.45);
  animation:demoPulse 2s ease-out infinite; pointer-events:none }
.demo-spot:hover{ background:rgba(255,106,44,.24); border-color:rgba(255,106,44,.85) }
.demo-spot.on{ display:block }
.demo-spot:focus-visible{ outline:3px solid var(--navy); outline-offset:3px }
@keyframes demoPulse{ 0%{ transform:scale(.75); opacity:.7 } 100%{ transform:scale(1.55); opacity:0 } }

/* Orange assombri : l'orange de marque (#FF6A2C) ne passe pas le contraste AA
   sur fond blanc en 12px — c'est l'instruction principale de chaque bulle. */
.demo-do{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:700; color:#C2410C }
.demo-do::before{ content:"→ " }

.demo-restart{ border:0; background:none; color:var(--slate); font:600 12.5px Poppins,system-ui,sans-serif;
  cursor:pointer; padding:4px }
.demo-restart:hover{ color:var(--orange) }

.demo-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }
.demo-progress{ font-size:12.5px; color:var(--slate); font-weight:500 }
.demo-dotsrow{ display:flex; gap:2px }
/* Cible tactile 24px (WCAG 2.5.8) — la puce visible de 9px est dessinée dedans. */
.demo-dot{ width:24px; height:24px; border:0; padding:0; background:none; cursor:pointer; position:relative }
.demo-dot::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:#D3DCEA }
.demo-dot.on::before{ background:var(--orange) }
.demo-dot:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; border-radius:50% }

.demo-phone{ margin:0 auto }
/* Sur la coque téléphone, l'encoche passe au-dessus des captures. */
.demo-phone::before{ z-index:5 }

@media (prefers-reduced-motion: reduce){
  .demo-spot i{ animation:none }
  .demo-shot{ transition:none }
}


/* Indice de défilement horizontal du comparatif (mobile) */
@media (max-width:700px){
  .compare .tablewrap{ position:relative }
  .compare .tablewrap::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:36px; pointer-events:none;
    background:linear-gradient(to left, var(--card), transparent);
  }
  .compare .scrollhint{ display:block; text-align:center; font-size:12.5px; color:var(--slate); margin-top:8px }
}
.compare .scrollhint{ display:none }

/* ── Guide des prix (/prix/) ─────────────────────────────────────────── */
.crumbs{ font-size:13px; color:var(--slate); margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.crumbs a{ color:var(--slate); text-decoration:none }
.crumbs a:hover{ color:var(--orange) }
.crumbs span[aria-hidden]{ opacity:.55 }
.feat-link{ display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s }
.feat-link:hover{ border-color:var(--orange); transform:translateY(-2px) }
.feat-more{ display:inline-block; margin-top:12px; color:var(--orange); font-weight:700; font-size:14px }
.prix-factors{ margin:4px 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.prix-factors li{ position:relative; padding-left:24px; color:var(--slate); font-size:15px; line-height:1.65 }
.prix-factors li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--orange) }
.range-label small{ color:var(--slate); opacity:.8; font-size:12px }
.featrow-more{ margin-top:14px; font-size:14.5px }
.featrow-more a{ color:var(--orange); font-weight:700; text-decoration:none }
.featrow-more a:hover{ text-decoration:underline }
.range-label a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--orange) }
.range-label a:hover{ color:var(--orange) }

/* ── Apparition au défilement (PC uniquement, ≥900px) ────────────────────
   Glissement alterné gauche/droite. Les classes .rv sont posées PAR le
   script du layout (sans JS : rien n'est caché). Mobile : aucun effet.
   `overflow-x:clip` évite la barre horizontale pendant la glissade. */
@media (min-width:900px){
  html, body{ overflow-x:clip }
  .rv{ opacity:0; transform:translateX(var(--dx,-64px));
       transition:opacity .7s ease-out, transform .7s cubic-bezier(.22,.61,.36,1) }
  .rv.on{ opacity:1; transform:none }
}
/* Smartphone/tablette (<900px) : montée en fondu VERTICALE (le pendant du
   glissement latéral du PC), plus adaptée au défilement au pouce. Effet plus
   court et discret. Classes posées par le script du layout. */
@media (max-width:899px){
  .rv{ opacity:0; transform:translateY(18px);
       transition:opacity .5s ease-out, transform .55s cubic-bezier(.22,.61,.36,1) }
  .rv.on{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important }
}
@media print{
  .rv{ opacity:1 !important; transform:none !important }
}

/* ── Mention française (footer + bande de réassurance tarifs) ─────────── */
.frline{ display:flex; align-items:center; gap:8px; color:var(--hero-slate); font-size:13px; margin-top:14px }
.flag-fr{ border-radius:2px; flex:none }
.trustline{ display:flex; justify-content:center; align-items:center; gap:34px; flex-wrap:wrap;
  margin:26px auto 0; color:var(--slate); font-size:14px; font-weight:600 }
.trustline > span{ display:flex; align-items:center; gap:8px }
.trustline .tico{ display:inline-flex; color:var(--orange) }
.trustline .tico svg{ width:15px; height:15px }

/* ── Standards SaaS (vague 1) : bandeau, CTA mobile, chiffres, formulaire, tarifs ── */
/* Bandeau d'annonce (offre honnête permanente : essai sans CB) */
.annbar{ display:block; background:#0B142E; color:#B9C4DC; text-align:center; font-size:13px;
  padding:8px 16px; text-decoration:none; border-bottom:1px solid rgba(185,196,220,.14) }
.annbar b{ color:#fff }
.annbar:hover b{ color:var(--orange) }

/* CTA persistant sur mobile (le bouton de nav disparaît sous 820px).
   Ordre visuel téléphone : [logo] … [Estimer][☰] — le burger passe TOUT À
   DROITE, après le bouton orange (retour utilisateur 10 juil. 2026). Réordonné
   en flex `order` (jamais dans le DOM : le menu à cocher dépend de l'ordre des
   frères `input ~ label ~ .links`). */
.cta-m{ display:none }
@media (max-width:820px){
  .cta-m{ display:inline-flex; margin-left:auto; order:1; padding:8px 14px; font-size:13.5px }
  .burger{ margin-left:0; order:2 }
}

/* Bande de chiffres produit (réassurance honnête, sous le héros) */
.statband{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; list-style:none;
  margin:34px auto 0; padding:0 0 46px; max-width:860px }
.statband li{ flex:1 1 150px; min-width:150px; background:rgba(255,255,255,.05);
  border:1px solid var(--hero-line); border-radius:var(--r-md); padding:14px 10px; text-align:center }
.statband b{ display:block; font-size:22px; font-weight:800; color:#fff; letter-spacing:-.01em }
.statband span{ display:block; margin-top:2px; font-size:12.5px; color:#B9C4DC }
/* Apparition en cascade des 4 chiffres quand la bande entre à l'écran. La classe
   `.anim` n'est posée QUE par le JS (sans JS, tout reste visible) ; `.in` (posée
   à l'entrée dans la vue) déclenche la montée en fondu, décalée par cellule. */
.statband.anim li{ opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1) }
.statband.anim.in li{ opacity:1; transform:none }
.statband.anim li:nth-child(2){ transition-delay:.09s }
.statband.anim li:nth-child(3){ transition-delay:.18s }
.statband.anim li:nth-child(4){ transition-delay:.27s }
@media (prefers-reduced-motion: reduce){
  .statband.anim li{ opacity:1; transform:none; transition:none }
}

/* Formulaire de contact / leads */
.leadform-section{ padding:44px 0 10px }
.leadform, .leadform-ok{ max-width:760px; margin:0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 32px }
.leadform-title{ font-size:20px; font-weight:800; letter-spacing:-.01em }
.leadform-sub{ color:var(--slate); font-size:14.5px; margin:6px 0 18px }
.leadform-types{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.ltype{ font:600 13.5px/1 Poppins,system-ui,sans-serif; padding:9px 14px; border-radius:99px;
  border:1px solid var(--line); background:transparent; color:var(--slate); cursor:pointer }
.ltype.on{ background:var(--tint); border-color:var(--orange); color:var(--orange) }
.leadform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px }
.leadform-grid label{ display:block; font-size:13px; font-weight:600; color:var(--ink) }
.leadform-grid .req{ color:var(--orange) }
.leadform-grid input, .leadform-grid select, .leadform-grid textarea{
  display:block; width:100%; margin-top:6px; padding:11px 12px; font:400 15px/1.4 Poppins,system-ui,sans-serif;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px }
.leadform-grid input:focus, .leadform-grid select:focus, .leadform-grid textarea:focus{
  outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange) }
.leadform .lf-full{ grid-column:1 / -1 }
.leadform .only-demo{ display:none }
.leadform.is-demo .only-demo{ display:block }
/* Honeypot : hors écran (les robots le remplissent, pas les humains) */
.leadform .lf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.leadform-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px }
.leadform-rgpd{ font-size:12.5px; color:var(--slate) }
.leadform-rgpd a{ color:var(--slate) }
.leadform-err{ margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px;
  background:rgba(220,38,38,.08); color:#B91C1C; border:1px solid rgba(220,38,38,.25) }
.leadform-err a{ color:#B91C1C; font-weight:700 }
.leadform-ok{ text-align:center }
.leadform-ok h3{ font-size:20px; font-weight:800; color:var(--ink) }
.leadform-ok p{ color:var(--slate); margin-top:8px }
@media (max-width:640px){
  .leadform{ padding:24px 18px }
  .leadform-grid{ grid-template-columns:1fr }
}

/* Toggle mensuel / annuel (page tarifs) */
.billing-toggle{ display:flex; justify-content:center; gap:8px; margin:6px 0 30px }
.billing-toggle .bt{ font:700 14px/1 Poppins,system-ui,sans-serif; padding:10px 18px; border-radius:99px;
  border:1px solid var(--line); background:transparent; color:var(--slate); cursor:pointer }
.billing-toggle .bt.on{ background:var(--navy); border-color:var(--navy); color:#fff }
.bt-badge{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px;
  background:var(--tint); color:var(--orange); font-size:11.5px; font-weight:700 }
.billing-toggle .bt.on .bt-badge{ background:rgba(255,106,44,.2) }
/* bascule d'affichage des prix */
.plans .pa{ display:none }
.plans.show-annual .pm{ display:none }
.plans.show-annual .pa{ display:inline }

/* Calculateur formule Entreprise */
.calc{ max-width:760px; margin:40px auto 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 28px }
.calc h3{ font-size:17px; font-weight:800; letter-spacing:-.01em }
.calc-sub{ color:var(--slate); font-size:13.5px; margin:6px 0 16px }
.calc-row{ display:flex; align-items:center; gap:18px }
.calc-row input[type=range]{ flex:1; accent-color: var(--orange) }
.calc-seats{ font-size:14px; color:var(--slate); white-space:nowrap }
.calc-seats b{ color:var(--ink); font-size:17px }
.calc-out{ display:flex; gap:12px; margin-top:16px }
.calc-box{ flex:1; text-align:center; background:var(--tint); border-radius:var(--r-md); padding:14px 8px }
.calc-box .calc-label{ display:block; font-size:12px; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.04em }
.calc-box b{ display:block; font-size:22px; font-weight:800; color:var(--ink); margin:4px 0 2px; font-variant-numeric:tabular-nums }
.calc-box .calc-unit{ display:block; font-size:12px; color:var(--slate) }
.calc-note{ margin-top:14px; font-size:12.5px; color:var(--slate) }
@media (max-width:560px){ .calc-out{ flex-direction:column } }

/* Kit presse : logo présenté sur fond bleu nuit */
.presse-logo-chip{ background:var(--navy); border-radius:var(--r-md); padding:26px; display:flex; justify-content:center }
.presse-logo-chip .logo-svg-foot{ height:34px }