:root{
  /* DA 2026 « Liquid Glass » — mêmes tokens que app/index.html + cockpit-public.css.
     Source de vérité : ~/agents/projects/vtcomptes/design/da-liquid-glass-2026.md */
  --bg-deep:#010102;
  --bg-indigo:rgba(155,27,48,.35);   /* ex aurora bleu nuit → mono-teinte accent */
  --bg-cyan:rgba(155,27,48,.20);     /* ex aurora cyan → mono-teinte accent */
  --bg-copper:rgba(155,27,48,.28);   /* ex aurora cuivre → mono-teinte accent */
  --copper:#6E0F1F;
  --copper-bright:#E8627A;
  --gold:#D5D9E0;
  --cream:#f7f8f8;
  --white:#ffffff;
  --glass:rgba(20,21,22,.55);
  --glass-strong:rgba(20,21,22,.72);
  --glass-light:rgba(255,255,255,0.04);
  --border-glass:rgba(255,255,255,.06);
  --border-glass-hover:rgba(155,27,48,0.45);
  --text-1:#f7f8f8;
  --text-2:#d0d6e0;
  --text-3:#8a8f98;
  --text-4:#62666d;
  --radius-sm:8px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-xl:16px;
  --radius-pill:999px;
  --radius-btn:8px;
  --container:min(1280px, 92vw);
  --space-xs:8px;
  --space-sm:16px;
  --space-md:32px;
  --space-lg:56px;
  --space-xl:80px;
  --space-xxl:140px;
}

*{box-sizing:border-box;margin:0;padding:0}
*::selection{background:var(--copper);color:var(--white)}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Les halos décoratifs (.aurora-copper) débordent volontairement du cadre.
     `overflow-x` posé sur <body> seul ne suffit pas : le débordement remontait
     à <html> et la page glissait latéralement sur un écran de 320px (iPhone SE).
     `clip` coupe sans créer de conteneur de défilement (n'affecte pas position:fixed). */
  overflow-x:clip;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--text-1);
  background:var(--bg-deep);
  overflow-x:hidden;
  min-height:100vh;
  cursor:none;
}

/* ───── Aurora background animée ───── */
.aurora{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:var(--bg-deep);
}
.aurora::before,
.aurora::after{
  content:'';
  position:absolute;
  width:80vmax;
  height:80vmax;
  border-radius:50%;
  filter:blur(120px);
  opacity:0.55;
  will-change:transform;
}
.aurora::before{
  background:radial-gradient(circle, var(--bg-indigo) 0%, transparent 60%);
  top:-20vmax;
  left:-20vmax;
  animation:auroraDrift1 28s ease-in-out infinite alternate;
}
.aurora::after{
  background:radial-gradient(circle, var(--bg-cyan) 0%, transparent 60%);
  bottom:-30vmax;
  right:-20vmax;
  animation:auroraDrift2 32s ease-in-out infinite alternate;
}
.aurora-copper{
  position:fixed;
  width:60vmax;
  height:60vmax;
  border-radius:50%;
  background:radial-gradient(circle, var(--bg-copper) 0%, transparent 60%);
  filter:blur(140px);
  opacity:0.28;
  z-index:-2;
  top:30vh;
  left:30vw;
  animation:auroraDrift3 40s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes auroraDrift1{
  0%   {transform:translate(0,0) scale(1)}
  100% {transform:translate(20vmax,15vmax) scale(1.15)}
}
@keyframes auroraDrift2{
  0%   {transform:translate(0,0) scale(1)}
  100% {transform:translate(-15vmax,-20vmax) scale(1.2)}
}
@keyframes auroraDrift3{
  0%   {transform:translate(0,0)}
  100% {transform:translate(-20vmax,30vmax)}
}

/* ───── Grain ───── */
.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───── Spotlight cursor ───── */
.cursor-dot,
.cursor-spotlight{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  top:0;left:0;
  will-change:transform;
}
.cursor-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper-bright);
  box-shadow:0 0 16px rgba(155,27,48,0.65);
  transform:translate(-50%,-50%);
  transition:width .25s, height .25s, background .25s;
  mix-blend-mode:screen;
}
.cursor-spotlight{
  width:480px;height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(155,27,48,0.16) 0%, rgba(155,27,48,0.04) 30%, transparent 60%);
  transform:translate(-50%,-50%);
  filter:blur(2px);
  mix-blend-mode:screen;
}
.cursor-dot.is-hover{
  width:36px;height:36px;
  background:transparent;
  border:2px solid var(--copper-bright);
  box-shadow:none;
}

@media (max-width:900px), (pointer:coarse){
  body{cursor:auto}
  .cursor-dot,.cursor-spotlight{display:none}
}

/* ───── Layout ───── */
.container{
  width:var(--container);
  margin:0 auto;
  position:relative;
}

section{
  position:relative;
  padding:var(--space-xl) 0;
  scroll-margin-top:100px;
}

/* ───── Nav ───── */
.nav{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px, 92vw);
  z-index:100;
  background:var(--glass-strong);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-pill);
  padding:12px 20px 12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:transform .4s ease, box-shadow .4s ease;
}
.nav.is-scrolled{
  box-shadow:0 12px 48px rgba(0,0,0,0.4);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--cream);
  text-decoration:none;
}
.nav-brand-mark{
  width:30px;height:30px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:14px;
  color:var(--bg-deep);
  box-shadow:0 6px 20px rgba(155,27,48,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
}
.nav-links a{
  color:var(--text-2);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  transition:background .25s, color .25s;
}
.nav-links a:hover{
  color:var(--cream);
  background:var(--glass-light);
}
.nav-cta{
  display:flex;align-items:center;gap:8px;
  background:var(--cream);
  color:var(--bg-deep);
  font-size:14px;
  font-weight:600;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(245,239,230,0.25);
}
@media (max-width:900px){
  /* Nav mobile : les liens ne disparaissent plus (David 2026-09-01).
     Avant, sous 900px il ne restait que le logo + « Accéder à l'app » :
     ni Tarifs, ni Blog, ni Simulateur — sur la page qui reçoit le plus de
     trafic mobile. Rail horizontal sous le logo, accès en un seul appui. */
  .nav{
    padding:10px 14px 0 18px;
    flex-wrap:wrap;
    column-gap:12px;
    row-gap:0;
    border-radius:20px;
    overflow:hidden;   /* le rail est clippé par les coins arrondis de la pilule */
  }
  .nav-brand{order:1}
  .nav-cta{order:2;margin-left:auto;padding:8px 14px;font-size:13px}
  .nav-links{
    display:flex;
    order:3;
    width:100%;
    margin:9px -18px 0 -18px;
    padding:8px 18px 9px;
    gap:5px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-top:1px solid var(--border-glass);
    /* le rail déborde forcément (7 entrées) : on le DIT avec un fondu au bord */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links li{flex:0 0 auto}
  .nav-links a{
    display:block;
    padding:6px 13px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    background:var(--glass-light);
    border:1px solid var(--border-glass);
  }
  /* Ordre mobile : d'abord les destinations qui font vivre le tunnel
     (tarifs, simulateur, blog), ensuite les ancres de la page. */
  .nav-links li:nth-child(4){order:1}  /* Tarifs */
  .nav-links li:nth-child(5){order:2}  /* Simulateur fiscal */
  .nav-links li:nth-child(7){order:3}  /* Blog */
  .nav-links li:nth-child(1){order:4}  /* Comment ça marche */
  .nav-links li:nth-child(2){order:5}  /* Fonctionnalités */
  .nav-links li:nth-child(3){order:6}  /* Multi-flotte */
  .nav-links li:nth-child(6){order:7}  /* FAQ */
  .nav-links a.nav-link-accent{
    color:var(--copper-bright,#D5D9E0);
    border-color:rgba(232,98,122,.35);
  }
  /* la nav est plus haute : le hero repart plus bas pour ne rien masquer */
  .hero{padding-top:180px}
}
@media (max-width:380px){
  .nav-brand{font-size:15px}
  .nav-cta{padding:8px 12px}
}
/* Repli du rail au défilement (David 2026-09-01) — la nav est déjà `fixed`,
   rien à compenser : on anime seulement la hauteur du 2e rang. */
@media (max-width:900px){
  .nav.has-collapsible-rail .nav-links{
    max-height:60px;
    transition:max-height .22s ease, padding .22s ease, margin .22s ease,
               opacity .16s ease, border-color .22s ease;
  }
  .nav.is-rail-collapsed .nav-links{
    max-height:0;margin-top:0;padding-top:0;padding-bottom:0;
    opacity:0;border-top-color:transparent;
  }
  /* on rend au 1er rang la respiration que le rail lui prenait */
  .nav.has-collapsible-rail{transition:padding-bottom .22s ease}
  .nav.is-rail-collapsed{padding-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .nav .nav-links{transition:none !important}
}

/* ───── Hero ───── */
.hero{
  min-height:100vh;
  padding-top:140px;
  padding-bottom:100px;
  display:flex;
  align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  padding:8px 16px 8px 12px;
  border-radius:var(--radius-pill);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:500;
  color:var(--text-2);
  margin-bottom:28px;
}
.live-pill::before{
  content:'';
  width:8px;height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,0.5);
  animation:livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.6)}
  50%   {box-shadow:0 0 0 8px rgba(16,185,129,0)}
}

.hero-kicker{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:clamp(42px, 5.5vw, 76px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--cream);
  margin-bottom:14px;
}
.hero-kicker em{
  font-style:normal;
  background:linear-gradient(120deg, var(--copper-bright) 0%, var(--gold) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero h1{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(48px, 6.2vw, 88px);
  line-height:1.02;
  letter-spacing:-0.035em;
  color:var(--cream);
  margin-bottom:28px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg, var(--copper-bright) 0%, var(--gold) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-tagline{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--cream);
  margin-bottom:24px;
  opacity:0.92;
}

.hero-sub{
  font-size:clamp(17px, 1.4vw, 20px);
  color:var(--text-2);
  max-width:560px;
  margin-bottom:40px;
  line-height:1.55;
}

.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 30px;
  border-radius:var(--radius-btn);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s;
  cursor:none;
  font-family:inherit;
}
.btn-primary{
  background:linear-gradient(135deg, var(--copper) 0%, var(--copper-bright) 100%);
  color:var(--bg-deep);
  box-shadow:0 14px 40px rgba(155,27,48,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 20px 56px rgba(155,27,48,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-ghost{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  color:var(--cream);
}
.btn-ghost:hover{
  background:var(--glass-strong);
  border-color:var(--border-glass-hover);
}
.btn svg{width:18px;height:18px}

/* ─── CTA de section (2026-07-30) ───────────────────────────────────────
   Boutons intermédiaires après workflow/features — chacun tient sur ce que
   la section qui précède vient de montrer, pas une phrase générique reprise
   3 fois. Plus discret que .cta-banner (réservé à la fermeture de page). */
.section-cta{
  margin:64px auto 0;
  max-width:560px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;
}
.section-cta p{
  font-size:16px;
  line-height:1.5;
  color:var(--text-2);
}
/* Micro-ligne de réassurance sous un CTA — même registre typographique que
   .hero-trust (déjà sous le CTA du hero), reprise telle quelle, jamais un
   nouveau chiffre ou une nouvelle promesse. */
.cta-reassure{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
  margin-top:2px;
}

/* ─── Barre d'action mobile (2026-07-30) ───
   display:flex reste vrai en permanence dans la media query (jamais de
   display:none à basculer par JS — cf. le piège rencontré ce soir sur les
   squelettes/erreurs de feuille). Seul un transform hors-écran + pointer-events
   la cache par défaut ; .is-visible la ramène. Toujours display:none au-delà
   de 600px, sans dépendre du JS. */
.mobile-action-bar{display:none}
@media (max-width:600px){
  .mobile-action-bar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    align-items:center; gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--glass-strong);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-top:1px solid var(--border-glass);
    transform:translateY(120%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
  }
  .mobile-action-bar.is-visible{transform:translateY(0); pointer-events:auto}
  .mobile-action-bar-text{
    flex:1; min-width:0;
    font-size:13px; line-height:1.3;
    color:var(--text-2);
  }
  .mobile-action-bar .btn{padding:11px 16px; font-size:13px; white-space:nowrap; gap:0}
  .mobile-action-bar-close{
    flex-shrink:0;
    width:30px; height:30px;
    display:grid; place-items:center;
    border-radius:50%;
    background:var(--glass);
    border:1px solid var(--border-glass);
    color:var(--text-2);
    padding:0;
    cursor:pointer;
  }
}
/* Jamais visible derrière/à travers une feuille ouverte, même en plein scroll. */
body.has-open-sheet .mobile-action-bar{transform:translateY(120%) !important; pointer-events:none !important}

.hero-trust{
  margin-top:36px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-3);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.hero-trust .dot{width:4px;height:4px;border-radius:50%;background:var(--text-4)}

/* ───── Hero mockup ───── */
.hero-mockup{
  perspective:1800px;
  perspective-origin:50% 30%;
}
.mockup-frame{
  position:relative;
  background:var(--glass-strong);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:18px;
  transform:rotateX(-6deg) rotateY(-10deg);
  transform-style:preserve-3d;
  box-shadow:
    0 60px 120px -40px rgba(0,0,0,0.7),
    0 30px 60px -30px rgba(155,27,48,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.mockup-frame::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:var(--radius-lg);
  padding:1px;
  background:linear-gradient(135deg, rgba(155,27,48,0.5) 0%, transparent 50%, rgba(155,27,48,0.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0.6;
}
.mockup-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 0 14px 0;
  border-bottom:1px solid var(--border-glass);
  margin-bottom:14px;
}
.mockup-bar-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.18)}
.mockup-bar-dot:nth-child(1){background:#ff5f57}
.mockup-bar-dot:nth-child(2){background:#ffbd2e}
.mockup-bar-dot:nth-child(3){background:#28c941}
.mockup-bar-url{
  margin-left:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
}

.mockup-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.mockup-card{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  padding:18px;
}
.mockup-card-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-3);
  margin-bottom:8px;
}
.mockup-card-value{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:26px;
  color:var(--cream);
  line-height:1;
  letter-spacing:-0.02em;
}
.mockup-card-trend{
  margin-top:8px;
  font-size:12px;
  color:#10b981;
  display:flex;align-items:center;gap:4px;
}
.mockup-row{
  grid-column:1 / -1;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  padding:16px;
}
.mockup-row-title{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.mockup-row-title h4{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--cream);
}
.mockup-row-title span{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
}
.mockup-driver{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.04);
  font-size:13px;
}
.mockup-driver:first-of-type{border-top:none}
.mockup-driver-name{display:flex;align-items:center;gap:10px;color:var(--text-1)}
.mockup-driver-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--copper),var(--gold));
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  color:var(--bg-deep);
}
.mockup-driver-amount{
  font-family:'JetBrains Mono',monospace;
  color:var(--copper-bright);
  font-weight:600;
}
.mockup-status-pending .mockup-driver-amount{color:var(--text-3)}
.mockup-status-sent::after{
  content:'envoyé';
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#10b981;
  margin-left:8px;
  padding:2px 6px;
  background:rgba(16,185,129,0.12);
  border-radius:6px;
}

/* Floating badges autour du mockup */
.float-badge{
  position:absolute;
  background:var(--glass-strong);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  font-size:13px;
  color:var(--cream);
  z-index:2;
  transform:translateZ(40px);
  animation:floatY 6s ease-in-out infinite;
}
.float-badge-1{top:-30px;right:-30px;animation-delay:0s}
.float-badge-2{bottom:-20px;left:-30px;animation-delay:-3s}
.float-badge-icon{
  width:36px;height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(155,27,48,0.2), rgba(155,27,48,0.1));
  border:1px solid rgba(155,27,48,0.3);
  display:grid;place-items:center;
  color:var(--copper-bright);
}
.float-badge-icon svg{width:18px;height:18px}
.float-badge-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-3);
  display:block;
  margin-bottom:2px;
}

@keyframes floatY{
  0%,100%{transform:translateY(0) translateZ(40px)}
  50%   {transform:translateY(-8px) translateZ(40px)}
}

@media (max-width:1024px){
  .float-badge-1{top:-15px;right:10px}
  .float-badge-2{bottom:-15px;left:10px}
  .mockup-frame{transform:rotateX(-2deg) rotateY(-2deg)}
}

/* ───── Trust strip ───── */
.trust-strip{
  padding:var(--space-lg) 0;
  border-top:1px solid var(--border-glass);
  border-bottom:1px solid var(--border-glass);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  text-align:center;
}
@media (max-width:768px){
  .trust-grid{grid-template-columns:repeat(2, 1fr);gap:40px 24px}
}
.trust-item .num{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg, var(--cream) 0%, var(--copper-bright) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:block;
  margin-bottom:8px;
}
.trust-item .lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-3);
}

/* ───── Ambiance (photos réelles, 2026-08-04) ─────
   2 photos, chacune SA propre carte de verre (doctrine liquid glass : jamais
   deux verres empilés). Contraste géré par un scrim LOCAL (dégradé bas de
   photo), jamais un voile plein cadre. */
.ambiance-section{
  padding:var(--space-md) 0;
}
.ambiance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media (max-width:900px){
  .ambiance-grid{grid-template-columns:1fr}
}
.ambiance-card{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--border-glass);
  margin:0;
}
.ambiance-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ambiance-card::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:60%;
  background:linear-gradient(180deg, transparent 0%, rgba(1,1,2,.72) 65%, rgba(1,1,2,.9) 100%);
  pointer-events:none;
}
.ambiance-glass{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:1;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border-glass);
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  margin:0;
}
@supports not (backdrop-filter: blur(1px)){
  .ambiance-glass{background:var(--surface-2, #141516)}
}
.ambiance-glass-eyebrow{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--copper-bright);
  margin-bottom:6px;
}
.ambiance-glass p{
  font-size:14px;
  line-height:1.5;
  color:var(--cream);
  margin:0;
}

/* ───── Section header ───── */
.section-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 40px;
}
.section-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--copper-bright);
  padding:6px 14px;
  border:1px solid rgba(155,27,48,0.3);
  border-radius:var(--radius-pill);
  margin-bottom:20px;
}
.section-head h2{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--cream);
  margin-bottom:18px;
}
.section-head p{
  color:var(--text-2);
  font-size:18px;
  line-height:1.55;
}

/* ───── Problem section ───── */
.problem-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){
  .problem-grid{grid-template-columns:1fr}
}
.problem-card{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.problem-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-glass-hover);
}
.problem-card-icon{
  width:52px;height:52px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(220,38,38,0.18), rgba(220,38,38,0.04));
  border:1px solid rgba(220,38,38,0.25);
  display:grid;place-items:center;
  color:#fca5a5;
  margin-bottom:24px;
}
.problem-card-icon svg{width:24px;height:24px}
.problem-card h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--cream);
  margin-bottom:12px;
  line-height:1.2;
}
.problem-card p{
  color:var(--text-2);
  font-size:15px;
  line-height:1.6;
}

/* ───── Workflow sticky stack ───── */
.workflow{
  padding-bottom:var(--space-xxl);
}
.workflow-stack{
  position:relative;
  margin-top:80px;
}
.workflow-step{
  position:sticky;
  top:120px;
  background:var(--glass-strong);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-xl);
  padding:48px;
  margin-bottom:24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
  transition:transform .5s, opacity .5s;
}
.workflow-step:nth-child(1){top:120px}
.workflow-step:nth-child(2){top:136px}
.workflow-step:nth-child(3){top:152px}
.workflow-step:nth-child(4){top:168px}
.workflow-step:nth-child(5){top:184px}
.workflow-step:nth-child(6){top:200px}

.workflow-step-grid{
  display:grid;
  grid-template-columns:auto 1fr 1.2fr;
  gap:48px;
  align-items:center;
}
@media (max-width:900px){
  .workflow-step{padding:32px}
  .workflow-step-grid{grid-template-columns:1fr;gap:24px}
}
.workflow-num{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:56px;
  line-height:1;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.workflow-text h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--cream);
  margin-bottom:14px;
  line-height:1.15;
}
.workflow-text p{
  color:var(--text-2);
  font-size:15px;
  line-height:1.6;
}
.workflow-time{
  display:inline-block;
  margin-top:16px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--copper-bright);
  padding:5px 12px;
  background:rgba(155,27,48,0.12);
  border:1px solid rgba(155,27,48,0.25);
  border-radius:var(--radius-pill);
}
.workflow-visual{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  padding:20px;
  min-height:200px;
  position:relative;
  overflow:hidden;
}
.wf-csv-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-radius:8px;
  margin-bottom:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text-2);
}
.wf-csv-row .ok{color:#10b981}
.wf-calc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-calc-cell{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-glass);
  border-radius:10px;
  padding:12px;
  text-align:center;
}
.wf-calc-cell .l{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;color:var(--text-3);letter-spacing:0.1em;display:block;margin-bottom:4px}
.wf-calc-cell .v{font-family:'Inter',sans-serif;font-weight:700;color:var(--copper-bright);font-size:18px}
.wf-whatsapp{
  background:#075e54;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:8px;
  font-size:12px;
  color:#fff;
  position:relative;
}
.wf-whatsapp::after{
  content:'✓✓';
  position:absolute;
  bottom:6px;right:10px;
  font-size:10px;
  color:#34d399;
}
.wf-blur{
  display:inline-block;
  filter:blur(9px) saturate(0.6);
  user-select:none;
  pointer-events:none;
  letter-spacing:-0.02em;
}
.wf-example-note{
  text-align:center;
  margin-top:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  color:var(--text-4);
  text-transform:uppercase;
  letter-spacing:0.12em;
  opacity:0.7;
}
.wf-qonto{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-glass);
  border-radius:10px;
}
.wf-qonto-icon{
  width:32px;height:32px;
  border-radius:8px;
  background:linear-gradient(135deg, #6f56df, #4f46e5);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:#fff;
  font-size:12px;
}

/* Étape 1 — Fleet card mockup */
.wf-fleet-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--border-glass);
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.wf-fleet-card + .wf-fleet-card{margin-top:10px}
.wf-fleet-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(135deg, var(--copper), var(--gold));
}
.wf-fleet-card.is-inactive::before{
  background:linear-gradient(135deg, #475569, #1e293b);opacity:.55;
}
.wf-fleet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wf-fleet-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, var(--copper), var(--gold));
  box-shadow:0 0 10px rgba(155,27,48,0.55);flex-shrink:0;
}
.wf-fleet-card.is-inactive .wf-fleet-dot{
  background:linear-gradient(135deg, #475569, #1e293b);box-shadow:none;
}
.wf-fleet-name{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:var(--cream);flex:1;letter-spacing:-0.01em}
.wf-fleet-stats{display:flex;gap:14px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.wf-fleet-stats b{color:var(--cream);font-weight:700;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:-0.02em}
.wf-fleet-toggle{
  position:absolute;top:14px;right:14px;
  width:42px;height:22px;border-radius:999px;
  background:linear-gradient(135deg, rgba(155,27,48,0.18), rgba(155,27,48,0.06));
  border:1px solid rgba(155,27,48,0.4);
  backdrop-filter:blur(8px);
}
.wf-fleet-toggle::after{
  content:'';position:absolute;top:2px;left:22px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg, var(--copper), var(--gold));
  box-shadow:0 0 8px rgba(155,27,48,0.7);
}
.wf-fleet-card.is-inactive .wf-fleet-toggle{
  background:linear-gradient(135deg, #ef4444, #7f1d1d);
  border-color:#ef4444;
}
.wf-fleet-card.is-inactive .wf-fleet-toggle::after{
  left:2px;background:linear-gradient(135deg, #fff, #e2e8f0);box-shadow:none;
}

/* Étape 3 — Frais form mockup */
.wf-frais-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-radius:8px;margin-bottom:6px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border-glass);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2);
}
.wf-frais-row .label{color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-size:9px}
.wf-frais-row .val{color:var(--copper-bright);font-weight:700;font-family:'Inter',sans-serif;font-size:13px}
.wf-frais-row.is-total{background:linear-gradient(135deg, rgba(155,27,48,0.18), rgba(155,27,48,0.06));border-color:rgba(155,27,48,0.4)}
.wf-frais-row.is-total .val{color:var(--gold);font-size:15px}

/* Étape 4 — Dashboard preview */
.wf-dash{display:flex;flex-direction:column;gap:6px}
.wf-dash-head,.wf-dash-row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;
  padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;
  align-items:center;
}
.wf-dash-head{color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-size:9px;border-bottom:1px solid var(--border-glass);padding-bottom:8px}
.wf-dash-row{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px}
.wf-dash-row .name{color:var(--cream);font-family:'Inter',sans-serif;font-weight:600;font-size:12px}
.wf-dash-row .ca{color:var(--text-2)}
.wf-dash-row .frais{color:#ef9b9b}
.wf-dash-row .net{color:var(--gold);font-weight:700;font-family:'Inter',sans-serif;font-size:13px;text-align:right}

/* ───── Bento features — grille 3 × 2 uniforme ───── */
.bento{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:minmax(260px, 1fr);
  gap:18px;
}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}

.bento-cell{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, box-shadow .5s;
}
.bento-cell:hover{
  transform:translateY(-3px);
  border-color:var(--border-glass-hover);
  box-shadow:0 20px 50px -10px rgba(155,27,48,0.18);
}
.bento-cell .icon{
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(155,27,48,0.18), rgba(155,27,48,0.04));
  border:1px solid rgba(155,27,48,0.25);
  display:grid;place-items:center;
  color:var(--copper-bright);
  margin-bottom:24px;
}
.bento-cell .icon svg{width:24px;height:24px}
.bento-cell h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:21px;
  color:var(--cream);
  margin-bottom:10px;
  line-height:1.2;
}
.bento-cell p{color:var(--text-2);font-size:14px;line-height:1.55}

/* Anciennes classes wide/normal/tall conservées en no-op pour ne pas casser le HTML.
   La grille est maintenant uniforme 3 × 2 : chaque cell occupe 1 colonne. */
.bento-cell.wide,
.bento-cell.normal,
.bento-cell.tall{grid-column:auto;grid-row:auto}

.bento-cell.feature-iso{
  background:linear-gradient(135deg, var(--glass) 0%, rgba(155,27,48,0.08) 100%);
}
.bento-cell.feature-iso .feature-iso-visual{
  margin-top:22px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.feature-iso-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  padding:6px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-pill);
  color:var(--text-2);
}

.bento-cell.feature-fuel .fuel-graph{
  margin-top:20px;
  height:60px;
  display:flex;
  align-items:flex-end;
  gap:4px;
}
.fuel-bar{
  flex:1;
  background:linear-gradient(180deg, var(--copper-bright), var(--copper));
  border-radius:4px 4px 0 0;
  opacity:0.85;
}

/* ───── Apps marquee ───── */
.apps-section{
  padding:var(--space-xl) 0;
}
.marquee{
  position:relative;
  overflow:hidden;
  margin-top:48px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:marqueeScroll 35s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.app-chip{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-pill);
  padding:14px 24px 14px 16px;
  white-space:nowrap;
  transition:border-color .3s, transform .3s;
}
.app-chip:hover{border-color:var(--border-glass-hover);transform:translateY(-2px)}
.app-dot{
  width:32px;height:32px;
  border-radius:10px;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:14px;
  color:#ffffff;
}
/* Couleurs officielles des marques (2026) — pictos stylisés, pas de logo */
.app-dot.uber  {background:linear-gradient(135deg,#000,#1a1a1a);color:#fff;border:1px solid rgba(255,255,255,0.18)}
.app-dot.bolt  {background:linear-gradient(135deg,#34d186,#10b981);color:#fff}
.app-dot.heetch{background:linear-gradient(135deg,#ff3d7f 0%,#ff1f4f 100%);color:#fff;box-shadow:0 4px 14px rgba(255,31,79,0.35)}
.app-dot.freenow{background:linear-gradient(135deg,#dc0e0e,#a30b0b);color:#fff}
.app-dot.marcel{background:linear-gradient(135deg,#1e40af,#1e3a8a);color:#fff}
.app-dot.allocab{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff}
.app-dot.lecab {background:linear-gradient(135deg,#0a0a0a,#262626);color:#fff;border:1px solid rgba(255,255,255,0.2)}
.app-dot.caocao{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}
.app-name{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--cream);
}
.app-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-3);
}
.app-chip.is-soon{
  opacity:0.45;
  filter:saturate(0.6);
}
.app-chip.is-soon .app-tag{
  color:var(--copper-bright);
  font-weight:500;
}

.apps-disclaimer{
  margin-top:32px;
  text-align:center;
  font-size:11px;
  color:var(--text-3);
  font-family:'JetBrains Mono',monospace;
}

/* ───── Pricing ───── */
.pricing-toggle-row{
  display:flex;
  justify-content:center;
  margin-bottom:48px;
}
.pricing-toggle{
  display:inline-flex;
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-pill);
  padding:5px;
  position:relative;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.pricing-toggle button{
  background:none;border:none;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
  padding:10px 22px;
  border-radius:var(--radius-pill);
  cursor:none;
  position:relative;
  z-index:1;
  transition:color .3s;
}
.pricing-toggle button.active{color:var(--bg-deep)}
.pricing-toggle .toggle-pill{
  position:absolute;
  top:5px;left:5px;
  height:calc(100% - 10px);
  background:var(--cream);
  border-radius:var(--radius-pill);
  z-index:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1);
}
.pricing-savings{
  display:inline-block;
  margin-left:10px;
  background:rgba(16,185,129,0.15);
  color:#34d399;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  text-transform:uppercase;
  letter-spacing:0.1em;
}

/* ─── Sticker promo "−10%" : étoile dentelée posée en haut-droite du montant,
   presque collée au prix, fortement inclinée pour casser l'effet corporate
   et donner l'esprit "vrai sticker" coloré. */
.price-amount{position:relative}
.price-promo-stamp{
  display:none; /* visible via .is-monthly sur body */
  position:absolute;
  top:-22px;
  left:calc(100% - 14px);
  align-items:center;
  justify-content:center;
  width:62px; height:62px;
  background:radial-gradient(circle at 38% 32%, #6ee7b7 0%, #10b981 55%, #047857 100%);
  color:#062018;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:-0.02em;
  text-shadow:0 1px 0 rgba(255,255,255,0.35);
  transform:rotate(18deg);
  filter:drop-shadow(0 6px 14px rgba(16,185,129,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  pointer-events:none;
  z-index:3;
  /* Étoile à 16 branches */
  clip-path:polygon(
    50% 0%, 56% 11%, 67% 5%, 68% 17%, 81% 14%, 78% 26%, 91% 27%, 84% 38%,
    96% 44%, 86% 50%, 96% 56%, 84% 62%, 91% 73%, 78% 74%, 81% 86%, 68% 83%,
    67% 95%, 56% 89%, 50% 100%, 44% 89%, 33% 95%, 32% 83%, 19% 86%, 22% 74%,
    9% 73%, 16% 62%, 4% 56%, 14% 50%, 4% 44%, 16% 38%, 9% 27%, 22% 26%,
    19% 14%, 32% 17%, 33% 5%, 44% 11%
  );
}
body.is-monthly .price-promo-stamp{display:inline-flex}
@media (max-width:600px){
  .price-promo-stamp{width:54px;height:54px;font-size:11px;top:-18px}
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}
/* Freemium 2026-07-23 : 5e carte (Gratuit) ajoutée — repli à 3 colonnes avant que ça
   ne devienne trop serré sur laptop, avant le repli existant à 2 puis 1 (mobile-first). */
@media (max-width:1320px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pricing-grid{grid-template-columns:1fr}}

.price-card{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  position:relative;
  transition:transform .4s, border-color .4s;
  display:flex;
  flex-direction:column;
}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{
  border-color:var(--copper);
  box-shadow:0 30px 80px -20px rgba(155,27,48,0.4);
  background:linear-gradient(180deg, rgba(155,27,48,0.1) 0%, var(--glass) 100%);
}
.price-badge{
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--copper) 0%, var(--gold) 100%);
  color:var(--bg-deep);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(155,27,48,0.4);
}
/* Bandeau offre de lancement (2026-08-28) : bloc de flux, PAS un absolute
   (le .price-badge "Recommandé" ci-dessus reste seul à flotter hors-carte).
   Placé uniquement sur les plans payants — le plan Gratuit est gratuit pour
   toujours, un bandeau "jusqu'au 31 décembre 2026" y serait contradictoire. */
.launch-offer{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#34d399;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.32);
  border-radius:var(--radius-md);
  padding:6px 10px;
  text-align:center;
  margin:0 0 16px;
  line-height:1.3;
}
.price-card h3{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--cream);
  margin-bottom:8px;
}
.price-card-sub{
  color:var(--text-3);
  font-size:13px;
  margin-bottom:24px;
  min-height:36px;
}
.price-amount{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:46px;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--cream);
  display:inline-flex;
  align-self:flex-start;
  align-items:baseline;
  margin-bottom:6px;
}
.price-amount .currency{font-size:32px;margin-right:4px;color:var(--copper-bright)}
.price-amount .cycle{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  font-weight:500;
  color:var(--text-3);
  margin-left:8px;
  letter-spacing:0;
}
.price-aligned{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--copper-bright);
  margin-bottom:24px;
}
.price-features{
  list-style:none;
  margin:18px 0;
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
}
.price-features li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--text-2);
  line-height:1.4;
}
.price-features li svg{
  width:16px;height:16px;
  flex-shrink:0;
  color:var(--copper-bright);
  margin-top:2px;
}
.price-card .btn{
  width:100%;
  justify-content:center;
}
.price-card .btn-ghost{margin-top:auto}
.price-trial{
  text-align:center;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-3);
}
.price-trial strong{color:var(--copper-bright);font-weight:500}
.price-monthly-equiv{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
  margin-top:4px;
  margin-bottom:18px;
  letter-spacing:0.02em;
}

/* ─── CTA central sous la grille de tarifs : amène vers /abonnement.html ─── */
.pricing-cta-row{
  margin:56px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
}
.pricing-cta-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  color:var(--text-3);
  letter-spacing:.16em;text-transform:uppercase;
}
.pricing-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:18px 40px;
  border-radius:var(--radius-btn);
  background:linear-gradient(135deg, var(--copper) 0%, var(--copper-bright) 50%, var(--gold) 100%);
  color:var(--bg-deep);
  font-family:'Inter',sans-serif;
  font-size:16px;font-weight:700;
  letter-spacing:-0.01em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 18px 44px -8px rgba(155,27,48,.55),
    0 4px 12px -4px rgba(155,27,48,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, filter .25s;
  min-width:320px;
}
.pricing-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 26px 60px -8px rgba(155,27,48,.7),
    0 6px 18px -4px rgba(155,27,48,.5),
    inset 0 1px 0 rgba(255,255,255,.5);
  filter:brightness(1.05);
}
.pricing-cta-btn:active{transform:translateY(0); transition-duration:.08s}
.pricing-cta-arrow{
  width:18px;height:18px;flex-shrink:0;
  transition:transform .25s;
}
.pricing-cta-btn:hover .pricing-cta-arrow{transform:translateX(4px)}
@media (max-width:600px){
  .pricing-cta-btn{min-width:0;width:100%;font-size:15px;padding:16px 24px}
}

/* ───── FAQ ───── */
.faq-orb{
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.1);
  display:grid;
  place-items:center;
  font-family:'Inter',sans-serif;
  font-size:34px;
  font-weight:600;
  color:var(--copper-bright);
  margin:0 auto 28px;
  box-shadow:0 14px 38px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .5s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s, box-shadow .35s, color .35s;
  cursor:default;
  user-select:none;
}
.faq-orb:hover{
  transform:scale(1.18) rotate(-4deg);
  background:rgba(255,255,255,0.09);
  border-color:rgba(155,27,48,0.5);
  color:var(--gold);
  box-shadow:0 22px 56px rgba(155,27,48,0.32), inset 0 1px 0 rgba(255,255,255,0.1);
}

.faq-list{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .3s;
}
.faq-item:hover{border-color:var(--border-glass-hover)}
.faq-item summary{
  list-style:none;
  padding:24px 28px;
  cursor:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:17px;
  color:var(--cream);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';
  width:24px;height:24px;
  flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23E8627A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size:contain;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .faq-body{
  padding:0 28px 24px;
  color:var(--text-2);
  font-size:15px;
  line-height:1.65;
}

/* ───── CTA banner ───── */
.cta-banner{
  position:relative;
  margin:var(--space-xl) auto;
  width:var(--container);
  background:linear-gradient(135deg, rgba(155,27,48,0.15) 0%, rgba(1,1,2,0.6) 60%, rgba(155,27,48,0.1) 100%);
  border:1px solid var(--border-glass-hover);
  border-radius:var(--radius-xl);
  padding:80px 64px;
  text-align:center;
  overflow:hidden;
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
}
.cta-banner::before{
  content:'';
  position:absolute;
  top:-50%;left:-20%;
  width:140%;height:200%;
  background:radial-gradient(ellipse at center, rgba(155,27,48,0.18) 0%, transparent 50%);
  pointer-events:none;
}
.cta-banner-content{position:relative;z-index:1}
.cta-banner h2{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(28px, 3.6vw, 46px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--cream);
  margin-bottom:18px;
}
.cta-banner p{
  color:var(--text-2);
  font-size:18px;
  margin-bottom:36px;
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:768px){.cta-banner{padding:56px 28px}}

/* ───── Footer ───── */
footer{
  padding:80px 0 32px;
  border-top:1px solid var(--border-glass);
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:64px;
}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
}
/* Sous 360px, deux colonnes coupaient les libellés au bord de l'écran :
   on repasse en colonne unique plutôt que de tronquer. */
@media (max-width:360px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
}
.footer-grid > *{min-width:0}
.footer-brand h4{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--cream);
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.footer-brand p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
  max-width:300px;
}
.footer-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--glass);
  border:1px solid var(--border-glass);
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-2);
}
.footer-status::before{
  content:'';
  width:8px;height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 10px #10b981;
}
.footer-col h5{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--text-3);
  margin-bottom:18px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{
  color:var(--text-1);
  text-decoration:none;
  font-size:14px;
  transition:color .25s;
}
.footer-col a:hover{color:var(--copper-bright)}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--border-glass);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
}
.footer-legal{max-width:680px;line-height:1.65}
.footer-legal strong{color:var(--text-2);font-weight:500}
.footer-marks{
  margin-top:6px;
  font-size:9px;
  color:var(--text-4);
  opacity:0.55;
  line-height:1.4;
  font-family:'Inter',sans-serif;
  font-weight:400;
}

/* ───── Reveal anim ───── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
  .aurora::before,.aurora::after,.aurora-copper{animation:none}
}

/* ───── Phase 4 — Simulateur + Hero CTA ───── */
.nav-link-accent{
  color:var(--copper-bright) !important;
  font-weight:600;
  position:relative;
}
.nav-link-accent::after{
  content:'';
  position:absolute;
  bottom:-3px;
  left:0;
  right:0;
  height:2px;
  background:var(--copper);
  border-radius:2px;
  opacity:0.7;
}
.hero-sim-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:rgba(155,27,48,0.12);
  border:1px solid rgba(155,27,48,0.28);
  border-radius:var(--radius-pill);
  font-size:13px;
  color:var(--text-2);
  margin-top:28px;
  margin-bottom:0;
}
.hero-sim-badge a{
  color:var(--copper-bright);
  text-decoration:none;
  font-weight:500;
}
.hero-sim-badge a:hover{color:var(--gold)}
@media(max-width:768px){
  .hero-sim-badge{font-size:12px;padding:7px 14px;margin-top:20px}
}

.footer-brand-name{
  font-size:18px; font-weight:700; color:var(--cream);
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.mockup-row-title-text{
  font-size:12px; font-weight:600; color:var(--text-1);
}

/* ═══════════════════════════════════════════════════════════════════
   Feuilles montantes — calculateur, blog, tarifs (2026-07-30)
   Recette : reference_colocmanager_detail_overlay (ColocManager 2026-06-13/30).
   Le contenu reste perceptible en haut (max-height < 100vh, margin-top:auto),
   fermeture au doigt/molette avec voile progressif, jamais de nettoyage à chaud.
   ═══════════════════════════════════════════════════════════════════ */
.sheet-backdrop{
  position:fixed; inset:0; z-index:9000;
  background:rgba(1,1,2,0);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  pointer-events:none;
}
/* Le voile n'est JAMAIS animé via opacity (ça affaiblirait aussi le panneau enfant,
   qui n'a pas à s'estomper — seule sa position bouge). Uniquement l'alpha du fond,
   piloté en JS pendant le geste (1:1), et par transition CSS au repos/ouverture/fermeture
   via .sheet-anim (ajoutée/retirée en même temps que sur le panneau). */
.sheet-backdrop.is-open{pointer-events:auto; background:rgba(1,1,2,.62)}
.sheet-backdrop.sheet-anim{transition:background .32s ease}
.sheet-panel{
  position:relative;
  width:100%; max-width:760px;
  max-height:95vh;
  margin-top:auto;
  background:var(--glass-strong);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--border-glass);
  border-bottom:none;
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  box-shadow:0 -24px 70px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  will-change:transform;
}
.sheet-backdrop.is-open .sheet-panel{transform:translateY(0)}
.sheet-panel.sheet-anim{transition:transform .34s cubic-bezier(.32,.72,0,1)}
.sheet-grip{
  width:36px; height:4px; border-radius:99px;
  background:var(--border-glass-hover);
  margin:10px auto 0;
  flex-shrink:0;
}
.sheet-head{
  display:flex; align-items:center; justify-content:flex-end;
  padding:10px 16px 6px;
  flex-shrink:0;
}
.sheet-close{
  width:34px; height:34px; border-radius:99px;
  display:grid; place-items:center;
  background:var(--glass-light);
  border:1px solid var(--border-glass);
  color:var(--text-2);
  cursor:pointer;
  flex-shrink:0;
}
.sheet-close:hover{color:var(--cream); border-color:var(--border-glass-hover)}
.sheet-close:focus-visible{outline:2px solid var(--copper-bright); outline-offset:2px}
.sheet-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  flex:1;
  min-height:120px;
}
/* Un contenu cloné dans une feuille (tarif/constat/fonctionnalité) peut porter la
   classe .reveal de la landing sans avoir jamais reçu .is-visible (source hors
   champ au moment du tap, ou jamais scrollée) — la feuille a sa propre transition
   d'entrée, le contenu qu'elle affiche doit toujours être visible immédiatement. */
.sheet-body .reveal{opacity:1!important;transform:none!important}
.sheet-body{padding:4px 24px 48px}
.sheet-body :is(nav){display:none}
@media (min-width:640px){.sheet-body{padding:4px 40px 56px}}
/* Garde-fou icônes (2026-08-28) : le <style> propre à la page source est réinjecté
   scopé (voir extractFragment() plus bas), mais si une future page oublie une règle
   de taille pour un <svg> sans width/height, ce filet à spécificité nulle sur le
   :where() l'empêche de retomber sur la taille navigateur par défaut (~300px) —
   cause du bug d'icônes géantes constaté sur le simulateur fiscal. */
.sheet-fragment svg:where(:not([width]):not([height])){width:20px;height:20px;flex-shrink:0}

.sheet-skeleton{
  /* Créé et inséré uniquement quand nécessaire (jamais présent-mais-caché dans le DOM),
     donc visible dès l'insertion — pas de classe .is-visible à activer séparément. */
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:32px 24px 40px;
}
.sheet-skeleton-bar{
  height:15px; border-radius:6px;
  background:linear-gradient(90deg, var(--glass-light) 25%, rgba(255,255,255,.09) 50%, var(--glass-light) 75%);
  background-size:200% 100%;
  animation:sheetShimmer 1.3s ease-in-out infinite;
}
.sheet-skeleton-bar.w60{width:60%}
.sheet-skeleton-bar.w40{width:40%}
.sheet-skeleton-bar.tall{height:120px; border-radius:12px}
@keyframes sheetShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sheet-skeleton-label{
  font-size:12px; color:var(--text-3); text-align:center; margin-top:6px;
  opacity:0; animation:sheetLabelIn .2s ease forwards .28s;
}
@keyframes sheetLabelIn{to{opacity:1}}

.sheet-error{
  display:flex; /* même logique que .sheet-skeleton ci-dessus : inséré = visible */
  flex-direction:column; align-items:center; text-align:center;
  gap:14px;
  padding:56px 24px 40px;
}
.sheet-error-icon{color:var(--copper-bright)}
.sheet-error p{color:var(--text-2); font-size:14px; max-width:340px; margin:0}
.sheet-error a{
  color:var(--bg-deep); background:var(--copper-bright);
  padding:11px 22px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:700; text-decoration:none;
}
.sheet-error a:hover{filter:brightness(1.08)}

@media (min-width:900px){
  .sheet-backdrop{padding-top:6vh; align-items:flex-start; justify-content:center}
  .sheet-panel{
    margin-top:auto; margin-bottom:0;
    /* 2026-08-28 : 760px fixe rendait la feuille étroite/centrée sur grand écran.
       min(1100px, 92vw) l'élargit nettement (occupe la majorité du viewport sur
       laptop/desktop courant) tout en gardant une marge de voile cliquable de
       chaque côté pour la fermeture au clic extérieur (jamais 100vw). */
    max-width:min(1100px, 92vw);
    max-height:calc(94vh - 6vh);
    border-radius:var(--radius-lg);
  }
}

/* Rend le fond de la landing inerte visuellement (pas seulement au clavier) tant
   qu'une feuille est ouverte — évite tout scroll parasite derrière le voile. */
body.has-open-sheet{overflow:hidden}

/* ─── Tarifs compacts (mobile ≤600px) — feuille de détail au tap ───
   Repli de sécurité volontaire : .pricing-grid (la grille complète, déjà en 1 colonne
   ≤600px) reste affichée par défaut. Seul un rendu JS RÉUSSI (buildPricingCompact())
   ajoute .pricing-compact-ready sur #pricing pour basculer vers la version compacte —
   si le script échoue, la page ne se retrouve jamais avec une grille vide. */
.pricing-grid-compact{display:none}
@media (max-width:600px){
  #pricing.pricing-compact-ready .pricing-grid{display:none}
  #pricing.pricing-compact-ready .pricing-grid-compact{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
.price-card-mini{
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:border-color .2s, transform .15s;
}
.price-card-mini:active{transform:scale(.97)}
.price-card-mini:focus-visible{outline:2px solid var(--copper-bright); outline-offset:2px}
.price-card-mini.is-wide{grid-column:1/-1; flex-direction:row; align-items:center; gap:16px; padding:18px 18px}
.price-card-mini.is-wide .price-mini-top{flex:1}
.price-card-mini.is-featured{
  border-color:var(--copper);
  background:linear-gradient(180deg, rgba(155,27,48,.16) 0%, var(--glass) 100%);
  box-shadow:0 16px 40px -14px rgba(155,27,48,.4);
}
.price-mini-top{display:flex; flex-direction:column; gap:8px}
.price-mini-badge{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bg-deep);
  background:linear-gradient(135deg,var(--copper) 0%,var(--gold) 100%);
  padding:3px 9px; border-radius:var(--radius-pill);
}
.price-mini-launch{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#34d399;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.32);
  padding:3px 9px; border-radius:var(--radius-pill);
}
.price-mini-name{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--cream)}
.price-mini-amount{display:flex; align-items:baseline; gap:2px}
.price-mini-amount .num{font-family:'Inter',sans-serif; font-weight:800; font-size:26px; color:var(--cream); letter-spacing:-.02em}
.price-mini-amount .cur{font-size:13px; color:var(--copper-bright); margin-right:1px}
.price-mini-amount .cyc{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-3); margin-left:3px}
.price-mini-args{list-style:none; display:flex; flex-direction:column; gap:5px; margin:0; padding:0}
.price-mini-args li{font-size:11px; color:var(--text-2); display:flex; gap:5px; align-items:flex-start; line-height:1.35}
.price-mini-args li svg{width:12px; height:12px; flex-shrink:0; color:var(--copper-bright); margin-top:2px}
.price-mini-more{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--copper-bright); margin-top:auto; padding-top:2px; display:flex; align-items:center; gap:3px; transition:gap .15s}
.price-card-mini:hover .price-mini-more,.price-card-mini:focus-visible .price-mini-more{gap:6px}
.price-mini-more svg{flex-shrink:0}

/* ─── Constat (#problem) compact (mobile ≤600px) — 2 cartes + la 3e pleine largeur ───
   Même repli de sécurité que les tarifs : .problem-grid (déjà en 1 colonne ≤900px)
   reste affichée tant que .problem-compact-ready n'est pas posé par un JS réussi.
   Contenu RACCOURCI (une ligne qui garde la charge émotionnelle des cartes d'origine),
   jamais tronqué — le détail complet reste à un tap dans la feuille. */
.problem-grid-compact{display:none}
@media (max-width:600px){
  #problem.problem-compact-ready .problem-grid{display:none}
  #problem.problem-compact-ready .problem-grid-compact{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
.problem-card-mini{
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:border-color .2s, transform .15s;
}
.problem-card-mini:active{transform:scale(.97)}
.problem-card-mini:focus-visible{outline:2px solid var(--copper-bright); outline-offset:2px}
.problem-card-mini.is-wide{grid-column:1/-1; flex-direction:row; align-items:center; gap:14px}
.problem-mini-icon{
  width:36px;height:36px; flex-shrink:0;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(220,38,38,0.18), rgba(220,38,38,0.04));
  border:1px solid rgba(220,38,38,0.25);
  display:grid;place-items:center;
  color:#fca5a5;
}
.problem-mini-icon svg{width:18px;height:18px}
.problem-mini-body{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0}
.problem-mini-name{font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--cream); line-height:1.25}
.problem-mini-punch{font-size:12px; color:var(--text-2); line-height:1.4}
.problem-mini-more{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--copper-bright); margin-top:2px; display:flex; align-items:center; gap:3px; transition:gap .15s}
.problem-card-mini:hover .problem-mini-more,.problem-card-mini:focus-visible .problem-mini-more{gap:6px}
.problem-mini-more svg{flex-shrink:0}

/* ─── Fonctionnalités (#features) compact (mobile ≤600px) — grille 2 colonnes ───
   Cas simple : 6 cartes uniformes, aucun orphelin. Même repli de sécurité que
   tarifs/constat : .bento (déjà en 1 colonne ≤600px) reste affichée par défaut. */
.bento-compact{display:none}
@media (max-width:600px){
  #features.features-compact-ready .bento{display:none}
  #features.features-compact-ready .bento-compact{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}
.bento-card-mini{
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-lg);
  padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
  transition:border-color .2s, transform .15s;
}
.bento-card-mini:active{transform:scale(.97)}
.bento-card-mini:focus-visible{outline:2px solid var(--copper-bright); outline-offset:2px}
.bento-mini-icon{
  width:36px;height:36px;
  border-radius:11px;
  background:linear-gradient(135deg, rgba(155,27,48,0.18), rgba(155,27,48,0.04));
  border:1px solid rgba(155,27,48,0.25);
  display:grid;place-items:center;
  color:var(--copper-bright);
}
.bento-mini-icon svg{width:18px;height:18px}
.bento-mini-name{font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--cream); line-height:1.25}
.bento-mini-punch{font-size:12px; color:var(--text-2); line-height:1.4}
.bento-mini-more{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--copper-bright); margin-top:2px; display:flex; align-items:center; gap:3px; transition:gap .15s}
.bento-card-mini:hover .bento-mini-more,.bento-card-mini:focus-visible .bento-mini-more{gap:6px}
.bento-mini-more svg{flex-shrink:0}