:root {
    --blanc:#FFFFFF; --encre:#1C1D1F; --encre-2:#2E3238;
    --gris-1:#5B6068; --gris-2:#878D96; --gris-3:#CAD0D9;
    --gris-4:#EEEFF1; --gris-5:#F7F8F9;
    --noir:#202124; --noir-2:#151618; --noir-b:#505967;
    --bleu:#2F6FED; --bleu-clair:#5A90F5; --bleu-pale:#EAF1FE;
    --vert:#00B86B;
    --ambre:#E0913A;
    --s:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --w:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--blanc);color:var(--encre);font-family:var(--s);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .w{max-width:var(--w);margin:0 auto;padding:0 24px}
  .mono{font-family:var(--s)}

  h1,h2,h3{font-family:var(--s);font-weight:600;letter-spacing:-0.022em;line-height:0.98}
  h1{font-size:clamp(40px,6.4vw,64px)}
  h2{font-size:clamp(30px,4.2vw,46px);line-height:1.02}
  h3{font-size:19px;letter-spacing:-0.012em;line-height:1.3}
  .sous{font-size:17px;color:var(--gris-1);line-height:1.5}

  /* ── Boutons, calés sur Attio ── */
  .b{display:inline-flex;align-items:center;justify-content:center;gap:7px;
     height:44px;padding:0 16px;border-radius:12px;font-size:16px;font-weight:500;
     border:1px solid transparent;cursor:pointer;font-family:var(--s);
     transition:background .16s,border-color .16s,transform .16s}
  .b.p{background:var(--noir);color:#F3F4F6}
  .b.p:hover{background:#34363B}
  .b.s{background:var(--blanc);color:var(--encre-2);border-color:var(--gris-3)}
  .b.s:hover{border-color:var(--gris-2)}
  .b.sm{height:36px;padding:0 13px;border-radius:10px;font-size:14px}
  .b.inv{background:var(--blanc);color:var(--encre)}
  .b.inv:hover{background:var(--gris-4)}
  .b:active{transform:translateY(1px)}

  /* ── En-tête ── */
  header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--gris-4)}
  .nav{display:flex;align-items:center;gap:32px;height:62px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16.5px;letter-spacing:-0.02em}
  /* La marque est un SVG en ligne : net à toutes les tailles, aucune requête
     supplémentaire, et il suit la couleur du texte si on l'inverse un jour. */
  .logo .m{width:22px;height:22px;display:block;flex:0 0 auto}
  /* liens simples et boutons de menu partagent la même boîte, sinon ils
     ne s'alignent pas et les espacements paraissent irréguliers */
  .nav .l{display:flex;align-items:center;gap:2px;margin-left:10px}
  .nav .l>a,.mm>button{display:inline-flex;align-items:center;gap:5px;height:34px;
    padding:0 11px;border-radius:9px;font-family:var(--s);font-size:14.5px;
    font-weight:450;color:var(--gris-1);background:none;border:0;cursor:pointer}
  .nav .l>a:hover{background:var(--gris-4);color:var(--encre)}
  .nav .r{margin-left:auto;display:flex;gap:8px;align-items:center}
  @media(max-width:900px){.nav .l{display:none}}

  /* ── Pastille d'annonce à anneau ── */
  .ann-zone{display:flex;justify-content:center;padding:30px 0 0}
  /* L'anneau tourne dans un carré plus grand que la pastille : sans overflow:hidden
     sur le parent, la rotation balaie toute la largeur du héros. */
  
  /* L'angle doit être une vraie propriété typée pour être animable : sans
   @property, un conic-gradient saute au lieu de tourner. */
@property --tour{syntax:'<angle>';initial-value:0deg;inherits:false}
.ann{position:relative;display:inline-flex;border-radius:13px;padding:1.5px;
  background:var(--gris-4);isolation:isolate}
/* Le dégradé couvre toute la pilule, puis un masque ne garde que l'anneau :
   il épouse ainsi les coins arrondis, ce qu'un carré tournant ne fait pas.
   L'arc coloré est étroit — c'est lui qui parcourt le contour. */
.ann::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tour) at 50% 50%,
    transparent 0turn,transparent .55turn,
    var(--bleu) .70turn,var(--vert) .78turn,var(--ambre) .84turn,
    transparent .95turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:tourne 4.5s linear infinite}
@media (prefers-reduced-motion:reduce){.ann::before{animation:none}}
  .ann-in{position:relative;display:inline-flex;align-items:center;gap:7px;
    padding:5px 7px 5px 11px;border-radius:12px;background:var(--blanc);
    font-size:13px;font-weight:450;color:var(--encre-2)}
  @keyframes tourne{to{--tour:360deg}}
  .ann .fl{display:grid;place-items:center;width:19px;height:19px;border-radius:6px;background:var(--gris-4);font-size:11px;color:var(--gris-1)}
  @media(prefers-reduced-motion:reduce){.ann::before{animation:none}}

    .mtl{display:block;text-align:center;padding:16px 12px;border-radius:11px;
    background:var(--f);color:var(--t);font-weight:600;font-size:15px;letter-spacing:-.01em}
  a.mtl:hover{filter:brightness(.96)}
  .mtl[data-ici]{outline:2px solid currentColor;outline-offset:-2px;cursor:default}
  @media(max-width:760px){#points .w>div,#rdv .w>div{grid-template-columns:1fr!important}}
  .reprise{border:1px solid var(--bleu);border-radius:14px;padding:24px 24px 20px;background:var(--gris-5)}
  .r-t{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu);font-weight:700}
  .r-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:16px 0 18px}
  .r-g b{display:block;margin-bottom:4px;font-size:14.5px}
  .r-g p{color:var(--gris-1);font-size:14px;line-height:1.55}
  .r-p{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--gris-4)}
  .r-p span{flex:1;min-width:260px;font-size:14.5px;color:var(--gris-1)}
  @media(max-width:760px){.r-g{grid-template-columns:1fr;gap:16px}}
  .offre{border:1px solid var(--gris-4);border-radius:14px;padding:22px 20px;background:#fff}
  .offre.mise{border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu)}
  .o-n{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-2);font-weight:700}
  .o-p{font-size:33px;font-weight:700;letter-spacing:-.02em;margin:7px 0 2px}
  .o-p span{font-size:14px;font-weight:500;color:var(--gris-2);letter-spacing:0}
  .o-q{font-size:13.5px;color:var(--gris-1);margin-bottom:13px}
  .offre ul{list-style:none;display:grid;gap:7px}
  .offre li{position:relative;padding-left:19px;font-size:14px;color:var(--gris-1)}
  .offre li:before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gris-3)}
  /* ── Héro ── */
  .hero{text-align:center;padding:26px 0 0}
  .hero h1{margin:20px auto 0;max-width:15ch;text-wrap:balance}
  .hero .sous{margin:24px auto 0;max-width:52ch}
  .hero .act{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
  .hero .fine{margin-top:22px;font-family:var(--s);font-size:12px;color:var(--gris-2);letter-spacing:.01em}

  /* ── Apparition au défilement ── */
  /* Apparition discrète : visible par défaut (sans JavaScript, tout s'affiche).
     Avec JavaScript, ce qui est hors de l'écran part d'une opacité réduite,
     jamais de zéro : une section qui tarde ne laisse pas un grand vide blanc. */
  .rev{transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .5s cubic-bezier(.22,.8,.3,1)}
  .js-rev .rev:not(.on){opacity:.4;transform:translateY(10px)}
  @media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

  /* ── Fenêtre applicative ── */
  .app{border:1px solid var(--gris-3);border-radius:14px;background:var(--blanc);overflow:hidden;
       box-shadow:0 1px 2px rgba(20,22,30,.04),0 30px 70px -40px rgba(20,22,30,.32)}
  /* Barre de la démo, façon fenêtre de navigateur. Classes préfixées ab- :
     « .mk » était aussi pris par la maquette du cycle, qui l'écrasait. */
  .app-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
    padding:10px 14px;border-bottom:1px solid var(--gris-4);background:var(--gris-5)}
  .ab-pts{display:flex;gap:6px}
  .ab-pts i{width:10px;height:10px;border-radius:50%;background:var(--gris-3);display:block}
  .ab-url{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;
    padding:5px 14px 5px 6px;border-radius:9px;background:var(--blanc);border:1px solid var(--gris-4);
    font-size:12.5px;line-height:1;color:var(--noir-b);white-space:nowrap}
  .ab-mk{flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--demo-c, var(--bleu));color:#fff;
    display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:.02em}
  .ab-url b{font-weight:600}
  .ab-url span.ab-sep{color:var(--gris-2)}
  .ab-fic{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:11px;
    color:var(--gris-1);white-space:nowrap}
  .ab-fic i{width:6px;height:6px;border-radius:50%;background:var(--vert);display:block;animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .app-body{display:grid;grid-template-columns:186px 1fr;min-height:352px}
  @media(max-width:780px){.app-body{grid-template-columns:1fr}.app-side{display:none}}
  .app-side{border-right:1px solid var(--gris-4);padding:14px 10px;background:#FCFCFD}
  .app-side .t{font-family:var(--s);font-size:9.5px;letter-spacing:.085em;text-transform:uppercase;color:var(--gris-2);padding:0 8px 8px;font-weight:600}
  .app-side a{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 9px;border-radius:7px;color:var(--gris-1)}
  .app-side a.on{background:var(--encre);color:#fff;font-weight:550}
  .app-side a .d{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4}
  .app-main{padding:16px 18px}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
  @media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
  .kpi{border:1px solid var(--gris-4);border-radius:9px;padding:10px 12px}
  .kpi .l{font-family:var(--s);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);font-weight:600}
  .kpi .v{font-size:18px;font-weight:600;letter-spacing:-0.025em;margin-top:2px}
  table.t{width:100%;border-collapse:collapse}
  table.t th{font-family:var(--s);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);text-align:left;padding:7px 9px;border-bottom:1px solid var(--gris-4);font-weight:500}
  table.t td{padding:9px;border-bottom:1px solid var(--gris-4);font-size:12.5px}
  table.t tr:last-child td{border-bottom:0}
  .et{display:inline-block;font-family:var(--s);font-size:9.5px;padding:2px 7px;border-radius:20px;background:var(--bleu-pale);color:#1B4FBF}
  .et.v{background:#E3F6EE;color:#00754A}.et.a{background:#FCF1E2;color:#9A6014}
  .jg{height:4px;background:var(--gris-4);border-radius:3px;overflow:hidden;width:78px}
  .jg i{display:block;height:100%;background:var(--bleu);border-radius:3px}

  /* ── Sections ── */
  section{padding:96px 0}
  .oeil{font-family:var(--s);font-size:11px;letter-spacing:.085em;text-transform:uppercase;color:var(--gris-2);font-weight:600}
  /* Pas de fond en dur ici : il ne masquait rien et dessinait un rectangle blanc
   sur les sections grises, et un bloc blanc sur la section tarifs, qui est noire. */
  .tete{max-width:640px;position:relative;z-index:2;margin-bottom:34px}
  .tete h2{margin:12px 0 18px;text-wrap:balance}
  .tete .sous{margin:0}
  .tete.c{margin-inline:auto;text-align:center}

  /* ── Section sombre ── */
  .sombre{background:var(--noir-2);color:#EDEEF0}
  .sombre .oeil{color:var(--noir-b)}
  .sombre .sous{color:#9CA3AE}
  .sombre .cadre{border-color:#2A2C31;background:#1B1C1F}

  /* ── Cycle qui s'assemble ── */
  .cyc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start}
  @media(max-width:880px){.cyc{grid-template-columns:1fr;gap:24px}}
  .cyc-q .q+.q{margin-top:18px}
  .cyc-q .oeil{display:block;margin-bottom:9px}
  .ops{display:flex;flex-wrap:wrap;gap:7px}
  .op{font-size:13px;font-weight:450;color:var(--gris-1);background:var(--blanc);border:1px solid var(--gris-3);
      border-radius:10px;padding:7px 13px;cursor:pointer;font-family:var(--s);transition:all .15s}
  .op:hover{border-color:var(--gris-2);color:var(--encre)}
  .op.on{background:var(--encre);border-color:var(--encre);color:#fff;font-weight:500}
  .cyc-r{border:1px solid var(--gris-3);border-radius:14px;background:var(--gris-5);padding:6px}
  .cyc-h{display:flex;align-items:center;padding:10px 12px 12px}
  .cyc-h .n{margin-left:auto;font-family:var(--s);font-size:11.5px;color:var(--bleu)}
  .ets{list-style:none;background:var(--blanc);border:1px solid var(--gris-4);border-radius:10px;max-height:344px;overflow-y:auto}
  /* Le configurateur débouchait sur rien : cette barre récupère la config choisie. */
  .cyc-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:22px;
      border:1px solid var(--gris-3);border-radius:14px;background:var(--blanc);padding:17px 20px}
  .cyc-cta .txt{flex:1 1 300px;min-width:0}
  .cyc-cta b{display:block;font-size:15px;letter-spacing:-0.015em;margin-bottom:3px}
  .cyc-cta span{display:block;font-size:13.5px;color:var(--gris-1);line-height:1.45}
  .cyc-cta .act{display:flex;gap:9px;flex-wrap:wrap}
  @media(max-width:560px){.cyc-cta .act{width:100%}.cyc-cta .act .b{flex:1 1 auto}}
  .sombre .cyc-cta{border-color:#2A2C31;background:#1B1C1F}
  .ets li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;
          padding:9px 13px;border-bottom:1px solid var(--gris-4);font-size:13.5px;
          animation:pop .3s cubic-bezier(.22,.9,.3,1) both}
  @keyframes pop{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.ets li{animation:none}}
  .ets li:last-child{border-bottom:0}
  .ets .i{font-family:var(--s);font-size:10.5px;color:var(--gris-2)}
  .ets .rl{font-family:var(--s);font-size:9px;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap;font-weight:600}
  .ets .rl.bureau{background:var(--bleu-pale);color:#1B4FBF}
  .ets .rl.terrain{background:#FCF1E2;color:#9A6014}
  .ets li.ph{display:flex;align-items:center;background:var(--gris-5);padding:7px 13px;
    font-family:var(--s);font-size:10px;letter-spacing:.085em;text-transform:uppercase;color:var(--gris-2);
    border-bottom:1px solid var(--gris-4);animation:none;font-weight:600}
  .ets li.ph .ph-n{margin-left:auto;letter-spacing:0;text-transform:none}
  .ets .dc{font-family:var(--s);font-size:9.5px;color:var(--gris-2)}

  /* ── Connecteurs ── */
  .stack{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:900px){.stack{grid-template-columns:repeat(2,1fr)}}
  .cx{border:1px solid #2A2C31;border-radius:12px;background:#1B1C1F;padding:16px;position:relative;overflow:hidden}
  .cx .nom{font-size:14px;font-weight:550;margin-top:10px}
  .cx .st{font-family:var(--s);font-size:10px;color:var(--noir-b);margin-top:3px;display:flex;align-items:center;gap:6px}
  .cx .st i{width:5px;height:5px;border-radius:50%;background:var(--noir-b);display:block;transition:background .3s}
  .cx.ok .st i{background:var(--vert)}
  .cx.ok .st span{color:var(--vert)}
  .cx .ic{width:30px;height:30px;border-radius:8px;background:#26282D;display:grid;place-items:center;font-family:var(--s);font-size:11px;font-weight:600;color:#9CA3AE}
  .cx .barre{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--vert);transition:width .9s cubic-bezier(.3,.9,.3,1)}
  .cx.ok .barre{width:100%}
  .cx.attente{opacity:.55;border-style:dashed}
  .cx.attente .st i{background:var(--noir-b)}

  /* ── Courbe de croissance ── */
  .croi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:center}
  @media(max-width:900px){.croi{grid-template-columns:1fr;gap:26px}}
  .graph{border:1px solid var(--gris-3);border-radius:14px;padding:20px;background:var(--blanc)}
  .graph svg{width:100%;height:auto;display:block}
  .trace{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.9s cubic-bezier(.3,.85,.35,1)}
  .on .trace{stroke-dashoffset:0}
  .aire{opacity:0;transition:opacity 1.1s ease .7s}
  .on .aire{opacity:1}
  .pt{opacity:0;transition:opacity .4s ease}
  .on .pt{opacity:1}
  .chiffres{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap}
  .chiffres b{display:block;font-size:26px;font-weight:600;letter-spacing:-0.03em}
  .chiffres span{font-family:var(--s);font-size:11px;color:var(--gris-2);letter-spacing:.07em;text-transform:uppercase;font-weight:600}

  /* ── Tables ── */
  .tb{border:1px solid var(--gris-3);border-radius:14px;overflow:hidden;background:var(--blanc)}
  .tb table{width:100%;border-collapse:collapse}
  .tb th{font-family:var(--s);font-size:10px;letter-spacing:.085em;text-transform:uppercase;color:var(--gris-2);text-align:left;padding:12px 16px;border-bottom:1px solid var(--gris-4);font-weight:500}
  .tb td{padding:15px 16px;border-bottom:1px solid var(--gris-4);font-size:14.5px;color:var(--gris-1);vertical-align:top}
  .tb td.k{color:var(--encre);font-weight:550;white-space:nowrap}
  .tb tr:last-child td{border-bottom:0}
  @media(max-width:760px){.tb{overflow-x:auto}.tb table{min-width:600px}}

  /* ── Bulles ── */
  .bl{display:flex;flex-wrap:wrap;gap:8px}
  .bu{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:450;color:var(--gris-1);
      background:var(--blanc);border:1px solid var(--gris-3);border-radius:999px;padding:8px 16px;
      cursor:pointer;transition:all .15s;user-select:none;font-family:var(--s)}
  .bu:hover{border-color:var(--gris-2);color:var(--encre)}
  .bu .sg{font-size:14px;line-height:1;color:var(--gris-2);transition:transform .22s,color .15s}
  .bu.on{background:var(--encre);border-color:var(--encre);color:#fff;font-weight:500}
  .bu.on .sg{transform:rotate(45deg);color:#fff}
  .bu.au{border-style:dashed}
  .cpt{font-family:var(--s);font-size:12.5px;color:var(--gris-2);margin-top:18px}
  .cpt b{color:var(--bleu);font-weight:500}

  /* ── Tarifs ── */
  .tf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:900px){.tf{grid-template-columns:1fr}}
  .tc{border:1px solid var(--gris-3);border-radius:14px;padding:24px;display:flex;flex-direction:column;background:var(--blanc)}
  .tc.mis{border-color:var(--encre);box-shadow:0 20px 44px -30px rgba(20,22,30,.5)}
  .tc h3{font-size:16px}
  .tc .ss{color:var(--gris-2);font-size:13.5px;margin-top:4px;min-height:40px}
  .tc .px{font-size:36px;font-weight:600;letter-spacing:-0.035em;margin:14px 0 0}
  .tc .px small{font-size:14px;color:var(--gris-2);font-weight:450;letter-spacing:0}
  .tc ul{list-style:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--gris-4);flex:1}
  .tc li{font-size:14px;color:var(--gris-1);padding:5px 0 5px 20px;position:relative}
  .tc li::before{content:'';position:absolute;left:0;top:12px;width:9px;height:1.5px;background:var(--gris-3)}
  .tc .b{margin-top:18px;width:100%}

  .enc{border:1px solid var(--gris-3);border-radius:12px;padding:18px 22px;margin-top:18px;font-size:14.5px;color:var(--gris-1);background:var(--gris-5)}
  .enc b{color:var(--encre)}

  /* ── Contact ── */
  .fin{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  @media(max-width:900px){.fin{grid-template-columns:1fr;gap:28px}}
  .ch{display:block;margin-bottom:13px}
  .ch span{display:block;font-family:var(--s);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2);margin-bottom:6px;font-weight:600}
  input,select,textarea{width:100%;background:var(--blanc);border:1px solid var(--gris-3);border-radius:10px;
    color:var(--encre);font-family:var(--s);font-size:15px;padding:10px 13px}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--bleu-pale);border-color:var(--bleu)}
  textarea{min-height:92px;resize:vertical}

  footer{border-top:1px solid var(--gris-4);padding:28px 0}
  .ft{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--s);font-size:11.5px;color:var(--gris-2)}
  .ft .d{margin-left:auto}

  /* ── Méga-menu au survol ── */
  .mm{position:relative}
    .mm:hover>button{background:var(--gris-4);color:var(--encre)}
  .mm>button svg{transition:transform .2s}
  .mm:hover>button svg{transform:rotate(180deg)}
  .mm-p{position:absolute;top:calc(100% + 8px);left:0;opacity:0;visibility:hidden;
    transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:90}
  .mm:hover .mm-p{opacity:1;visibility:visible;transform:none}
  .mm-c{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:0;
    background:var(--blanc);border:1px solid var(--gris-4);border-radius:16px;
    box-shadow:0 2px 6px rgba(20,22,30,.05),0 24px 48px -24px rgba(20,22,30,.24);overflow:hidden}
  .mm-col{padding:18px}
  .mm-col+.mm-col{background:var(--gris-5)}
  .mm-t{font-size:13px;color:var(--gris-2);font-weight:450;margin-bottom:12px}
  .mm-i{display:block;padding:7px 9px;border-radius:9px;margin:0 -9px}
  .mm-i:hover{background:var(--gris-4)}
  .mm-col+.mm-col .mm-i:hover{background:#EDEEF0}
  .mm-i b{display:block;font-size:14.5px;font-weight:550;color:var(--encre)}
  .mm-i span{font-size:13.5px;color:var(--gris-2)}
  .mm-i.court{padding:6px 9px}
  .mm-i.court b{font-weight:450}

  /* ── Section épinglée : la colonne gauche ne bouge pas ── */
  .pin{display:grid;grid-template-columns:310px minmax(0,1fr);gap:64px;align-items:start;
    position:relative;z-index:1}
  @media(max-width:940px){.pin{grid-template-columns:1fr;gap:26px}.pin-nav{display:none}}
  /* la colonne reste calée au milieu de l'écran pendant que la droite défile */
  .pin-nav{position:sticky;top:180px}
  .pin-nav a{display:block;font-size:22px;font-weight:600;letter-spacing:-0.02em;
    padding:13px 0 13px 24px;border-left:3px solid var(--gris-4);color:var(--gris-3);
    transition:color .35s ease,border-color .35s ease}
  .pin-nav a.on{color:var(--encre);border-left-color:var(--bleu)}
  .pane{padding-bottom:88px}
  .pane:last-child{padding-bottom:0}
  .pane h3{font-size:24px;letter-spacing:-0.02em;line-height:1.25;margin-bottom:8px}
  .pane h3 span{color:var(--gris-2);font-weight:600}
  .pane .vis{margin-top:22px;border:1px solid var(--gris-3);border-radius:14px;overflow:hidden;
    background:var(--gris-5);box-shadow:0 1px 2px rgba(20,22,30,.04),0 20px 44px -34px rgba(20,22,30,.3)}

  /* ── Courbe pleine largeur ── */
  .scale{border-top:1px solid var(--gris-4);position:relative;overflow:hidden;padding:0}
  .scale-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:30px;
    max-width:var(--w);margin:0 auto;padding:90px 24px}
  @media(max-width:940px){.scale-in{grid-template-columns:1fr;gap:34px}}
  .pil{display:inline-block;font-size:13px;font-weight:500;color:var(--bleu);
    background:var(--bleu-pale);padding:4px 11px;border-radius:8px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin-top:30px;max-width:380px}
  .stats div{border-left:2px solid var(--bleu);padding-left:14px}
  .stats b{display:block;font-size:30px;font-weight:600;letter-spacing:-0.035em;line-height:1.1}
  .stats span{font-size:14px;color:var(--gris-2)}
  .courbe{position:relative;min-height:330px}
  .courbe svg{width:100%;height:auto;display:block}
  .hach line{stroke:#E4E7EB;stroke-width:1;opacity:0;transition:opacity .5s}
  .on .hach line{opacity:1}
  .trace{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.85,.35,1)}
  .on .trace{stroke-dashoffset:0}

  /* ── Extrait de code ── */
  .code{background:var(--noir-2);border:1px solid #2A2C31;border-radius:12px;overflow:hidden}
  .code-h{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid #2A2C31;background:#1B1C1F}
  .code-h span{font-family:var(--s);font-size:11px;color:var(--noir-b)}
  .code-h button{margin-left:auto;font-family:var(--s);font-size:11px;background:#26282D;color:#C6CBD2;
    border:1px solid #33363C;border-radius:7px;padding:4px 10px;cursor:pointer}
  .code-h button:hover{background:#2E3137}
  .code pre{margin:0;padding:15px;overflow-x:auto;font-family:var(--s);font-size:12.5px;line-height:1.75;color:#C6CBD2}
  .code .tag{color:#7FB2FF}.code .att{color:#9AE6C4}.code .val{color:#E0C089}.code .cm{color:#5B6068}

  /* ── Démo intégrée ── */
  .demo-frame{border:1px solid var(--gris-3);border-radius:14px;overflow:hidden;background:var(--blanc);
    box-shadow:0 1px 2px rgba(20,22,30,.04),0 30px 70px -40px rgba(20,22,30,.32)}



  .tete .sur{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
    color:var(--gris-2);margin-bottom:14px}

  /* ── Le calcul fait à sa place ──
     Un visiteur qui lit « à partir de 29 € » ailleurs et « à partir de 149 € »
     ici s'en va avant d'avoir compris. Il ne fera pas la division tout seul. */
  .calc-pli{margin-top:20px}
  .calc-pli>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
    font-size:14px;color:var(--gris-1);padding:9px 0;border-bottom:1px solid var(--gris-3)}
  .calc-pli>summary::-webkit-details-marker{display:none}
  .calc-pli>summary::after{content:"";width:7px;height:7px;flex:0 0 auto;
    border-right:1.6px solid var(--gris-2);border-bottom:1.6px solid var(--gris-2);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .calc-pli[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .calc-pli>summary:hover{color:var(--noir-b);border-bottom-color:var(--gris-2)}
  .calc{margin-top:16px;background:var(--blanc);border:1px solid var(--gris-4);
    border-radius:18px;padding:24px 26px}
  .calc-q{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:20px}
  .calc-q>span{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
  .calc-b{display:flex;gap:6px;flex-wrap:wrap}
  .calc-b button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-width:44px;
    padding:8px 13px;border-radius:10px;border:1px solid var(--gris-3);background:var(--blanc);
    color:var(--gris-1);transition:background .15s,color .15s,border-color .15s}
  .calc-b button:hover{border-color:var(--gris-2);color:var(--noir-b)}
  .calc-b button.on{background:var(--encre,#14161E);border-color:var(--encre,#14161E);color:#fff}
  .calc-r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .calc-c{background:var(--gris-5);border:1px solid var(--gris-4);border-radius:14px;padding:18px 20px}
  .calc-c.nous{background:var(--bleu-pale);border-color:var(--bleu-pale)}
  .calc-l{display:block;font-size:12.5px;color:var(--gris-2);font-weight:600;letter-spacing:.01em}
  .calc-l i{font-style:normal;color:var(--bleu)}
  .calc-c b{display:block;font-size:32px;letter-spacing:-.03em;margin:6px 0 4px;
    font-variant-numeric:tabular-nums}
  .calc-c em{display:block;font-style:normal;font-size:12.5px;color:var(--gris-2);line-height:1.5}
  .calc-c.nous em{color:#1B4FBF;font-weight:600}
  .calc-n{margin:16px 0 0;font-size:11.5px;color:var(--gris-2);line-height:1.6}
  @media(max-width:620px){.calc-r{grid-template-columns:1fr}.calc{padding:20px}}

  .demo-frame iframe{width:100%;height:520px;border:0;display:block;background:var(--gris-5)}
  /* Sur téléphone, le logiciel ne tient pas dans 330 px : on le montre en
     entier, réduit comme une capture, et on l'ouvre en plein écran au toucher.
     Le cadre est rendu à 1280 px de large puis mis à l'échelle (--k, posé en JS). */
  /* En-tête : le bouton ne passe jamais sur deux lignes ; sous 360 px il se
     raccourcit en « rendez-vous ». */
  .nav-rdv{white-space:nowrap}
  @media(max-width:359px){.nav-rdv-l{display:none}}
  .demo-vue{position:relative}
  .demo-ouvrir{display:none}
  @media(max-width:780px){
    .demo-vue{height:calc(800px * var(--k, .27));overflow:hidden}
    .demo-frame .demo-vue iframe{width:1280px;height:800px;transform:scale(var(--k, .27));
      transform-origin:0 0;pointer-events:none}
    .demo-ouvrir{display:flex;position:absolute;inset:0;align-items:flex-end;justify-content:center;
      padding:0 0 18px;text-decoration:none;
      background:linear-gradient(to bottom,rgba(255,255,255,0) 45%,rgba(255,255,255,.92))}
    #demo-plein{display:none}
    .demo-frame .app-bar{grid-template-columns:auto 1fr;padding:8px 10px}
    .demo-frame .ab-fic,.demo-frame .ab-sep,.demo-frame .ab-demo{display:none}
    .demo-ouvrir span{background:var(--demo-c, var(--bleu));color:#fff;font-weight:600;font-size:15px;
      padding:12px 20px;border-radius:12px;box-shadow:0 10px 24px -12px rgba(20,22,30,.5)}
  }
  /* Le choix du métier est au-dessus de la démonstration, pas en bas de page :
     c'est ce qui décide de ce que le visiteur va voir, pas une note de fin. */
  .choix{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 26px}
  .choix .ch{font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
    padding:8px 14px;border-radius:999px;border:1px solid transparent;background:var(--gris-5);
    color:var(--gris-1);transition:background .15s,color .15s,border-color .15s}
  .choix .ch:hover{background:var(--f);color:var(--t)}
  .choix .ch[aria-pressed="true"]{background:var(--f);color:var(--t);border-color:currentColor}
  .demo-pied{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
    margin-top:18px;font-size:12.5px;color:var(--gris-2);line-height:1.7}
  .demo-pied a:not(.b){color:var(--gris-1);text-decoration:none;border-bottom:1px solid var(--gris-3)}
  .demo-pied a:not(.b):hover{color:var(--bleu);border-bottom-color:currentColor}
  @media(max-width:620px){.demo-pied{justify-content:center;text-align:center}}

  /* ═══ Scène animée du héros : fenêtres flottantes + chronologie ═══ */
  .scene{position:relative;margin-top:44px;padding:0 0 76px}
  .scene .app{position:relative;z-index:2;max-width:980px;margin:0 auto}
  /* les fenêtres secondaires passent sous la principale, comme chez Attio,
     et reviennent au premier plan quand on les désigne */

  /* ═══ Le devis qui part, en direct ═══
     La fenêtre garde une hauteur fixe : sans cela, chaque étape la ferait
     grandir et rétrécir, et tout ce qui l'entoure sauterait à chaque tour. */
  /* La séquence prend la place de l'ancienne fenêtre de facturation, à droite. */
  .f-live{right:-18px;bottom:-26px;width:330px}
  .live-b{position:relative;height:214px;padding:13px 14px 0;overflow:hidden}
  .live-et{position:absolute;inset:13px 14px auto;opacity:0;transform:translateY(7px);
           transition:opacity .42s ease,transform .42s ease}
  .live-et.vue{opacity:1;transform:none}
  .live-tag{font-family:var(--s);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
            color:var(--gris-2);margin-bottom:7px}
  .live-et b{display:block;font-size:13px;color:var(--encre);line-height:1.35}
  .live-et > span{display:block;font-size:11.5px;color:var(--gris-2);margin-top:3px}
  .live-l{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--gris-4);
          opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease}
  .live-et.vue .live-l{opacity:1;transform:none}
  .live-et.vue .live-l:nth-of-type(1){transition-delay:.10s}
  .live-et.vue .live-l:nth-of-type(2){transition-delay:.26s}
  .live-et.vue .live-l:nth-of-type(3){transition-delay:.42s}
  .live-l span{flex:1;font-size:11.5px;color:var(--encre-2);overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}
  .live-l em{font-style:normal;font-family:var(--s);font-size:10.5px;color:var(--gris-2)}
  .live-l b{font-size:11.5px;font-weight:600;color:var(--encre);white-space:nowrap}
  .live-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;
            opacity:0;transition:opacity .35s ease .60s}
  .live-et.vue .live-tot{opacity:1}
  .live-tot span{font-size:11.5px;color:var(--gris-2)}
  .live-tot b{font-size:16px;font-weight:650;color:var(--encre);font-variant-numeric:tabular-nums}
  .live-mail{font-size:11.5px;color:var(--encre-2);line-height:1.75}
  .live-mail span{display:inline-block;width:42px;color:var(--gris-2);font-size:10.5px}
  .live-pj{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;
           background:var(--gris-5);border-radius:6px;font-family:var(--s);font-size:10.5px}
  .live-pj .ic{width:12px;height:12px;color:var(--vert)}
  .live-ok{display:flex;align-items:center;gap:11px;padding-top:26px}
  .live-ok .ic{width:26px;height:26px;padding:6px;border-radius:50%;background:#E8F4EC;color:var(--vert);flex:0 0 auto}
  .live-ok b{font-size:13.5px}
  .live-ok span{font-size:11.5px;color:var(--gris-2)}
  .live-pied{position:absolute;left:14px;right:14px;bottom:11px}
  .live-barre{height:2px;border-radius:2px;background:var(--gris-4);overflow:hidden}
  .live-barre i{display:block;height:100%;width:0;background:var(--encre);border-radius:2px;
                transition:width .5s linear}
  .live-chrono{display:block;margin-top:7px;font-family:var(--s);font-size:9.5px;color:var(--gris-2)}

  /* Réserve remontée du dépôt : elle se voit sans qu'on la cherche. */
  .live-res{margin-top:8px;padding:7px 9px;border-radius:6px;background:#FDF0EE;
            color:#98504E;font-size:11px;line-height:1.4}

  /* Planning : une ligne par équipe, la couleur porte le statut. */
  /* Le planning occupe le bas à gauche, où était le mobile. */
  .f-plan{left:-34px;bottom:-18px;width:298px}
  .plan-b{padding:11px 13px;display:grid;gap:8px}
  .plan-r{display:flex;align-items:center;gap:9px;font-size:11.5px}
  .plan-r span{flex:0 0 118px;color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .plan-r i{flex:1;font-style:normal;font-size:10.5px;padding:4px 9px;border-radius:5px;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .plan-r i.encours{background:#E5E7EB;color:#374151}
  .plan-r i.planifie{background:#E8F0EA;color:#48705C}
  .plan-r i.libre{background:var(--gris-5);color:var(--gris-2)}

  /* Animations coupées : on montre l'étape d'arrivée, complète et lisible. */
  @media(prefers-reduced-motion:reduce){
    .live-et,.live-l,.live-tot{transition:none}
    .live-et[data-et="4"]{opacity:1;transform:none}
    .live-barre i{width:100%;transition:none}
  }
  .flot:hover,.flot:focus-visible,.flot.devant{z-index:6}
  .flot.devant,.flot:hover{box-shadow:0 3px 10px rgba(20,22,30,.08),0 34px 70px -28px rgba(20,22,30,.42)}
  /* La séquence porte le geste que la page veut montrer : elle est devant au
     repos, avec l'ombre qui va avec. Son rang reste sous celui de
     l'interaction (6), pour qu'un clic sur une autre fenêtre la fasse
     quand même passer devant. */
  .flot.f-live{z-index:5;box-shadow:0 3px 10px rgba(20,22,30,.08),0 34px 70px -28px rgba(20,22,30,.42)}
  .flot:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
  .flot{position:absolute;z-index:1;background:var(--blanc);border:1px solid var(--gris-3);
    border-radius:13px;box-shadow:0 2px 6px rgba(20,22,30,.06),0 26px 56px -26px rgba(20,22,30,.34);
    cursor:grab;touch-action:none;user-select:none;
    transition:box-shadow .2s ease}
  .flot.prise{cursor:grabbing;transition:none}
  .flot .flot-h,.flot .top{cursor:inherit}
  
  @media(max-width:1180px){.flot{display:none}}
  .flot-h{display:flex;align-items:center;gap:6px;padding:8px 11px;border-bottom:1px solid var(--gris-4);
    background:var(--gris-5);border-radius:12px 12px 0 0}
  .flot-h i{width:9px;height:9px;border-radius:50%;display:block}
  .flot-h i:nth-child(1){background:#F0655A}.flot-h i:nth-child(2){background:#F3BE4F}
  .flot-h i:nth-child(3){background:#61C554}
  .flot-h span{font-family:var(--s);font-size:10.5px;color:var(--gris-2);margin-left:6px}
  .flot-b{padding:13px;user-select:text}

  /* message du terrain */
  .f-msg{left:-62px;top:22px;width:258px}
  .f-msg .qui{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
  .f-msg .qui b{width:24px;height:24px;border-radius:50%;background:var(--bleu);color:#fff;
    display:grid;place-items:center;font-size:10px;font-weight:700}
  .f-msg p{font-size:12.5px;color:var(--gris-1);margin-top:8px;line-height:1.45}
  .f-msg .ph{display:flex;gap:5px;margin-top:9px}
  .f-msg .ph i{flex:1;height:38px;border-radius:6px;display:block;
    background:linear-gradient(135deg,#D8DCE2,#EDEFF2)}

  /* téléphone de l'atelier */
  .f-mob{left:-20px;bottom:-14px;width:212px;border-radius:20px;overflow:hidden}
  .f-mob .top{background:var(--noir-2);color:#EDEEF0;padding:9px 13px;font-family:var(--s);font-size:10px;
    display:flex;align-items:center;gap:6px}
  .f-mob .top b{margin-left:auto;font-family:var(--s);font-size:11px;font-weight:600}
  .f-mob .corps{padding:12px}
  .f-mob .tache{border:1px solid var(--gris-4);border-radius:9px;padding:9px 10px;font-size:11.5px}
  .f-mob .tache+.tache{margin-top:7px}
  .f-mob .tache b{display:block;font-size:12px;margin-bottom:2px}
  .f-mob .tache span{color:var(--gris-2)}
  .f-mob .bt{margin-top:10px;background:var(--encre);color:#fff;border-radius:8px;text-align:center;
    padding:8px;font-size:11.5px;font-weight:600}

  /* facture émise */
  .f-fac{right:-52px;top:146px;width:248px}
  .f-fac .l{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;padding:4px 0}
  .f-fac .l span{color:var(--gris-2)}
  .f-fac .l b{font-weight:600}
  .f-fac .tot{border-top:1px solid var(--gris-4);margin-top:7px;padding-top:9px;font-size:17px;font-weight:600;
    letter-spacing:-0.02em;display:flex;justify-content:space-between;align-items:baseline}
  .f-fac .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--s);font-size:9.5px;
    background:#E3F6EE;color:#00754A;padding:3px 8px;border-radius:20px;margin-top:9px}

  /* ligne qui apparaît dans le tableau principal */
  tr.neuve{background:var(--bleu-pale)!important;animation:surligne 2.6s ease forwards}
  @keyframes surligne{0%{background:var(--bleu-pale)}70%{background:var(--bleu-pale)}100%{background:transparent}}
  tr.masquee{display:none}
  @media(prefers-reduced-motion:reduce){
    .flot{opacity:1;transform:none;transition:none}
    tr.neuve{animation:none;background:transparent!important}
  }
  .ic{width:1em;height:1em;vertical-align:-.14em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Un enfant de grille garde min-width:auto et refuse de se réduire sous sa
     largeur intrinsèque : la colonne épinglée débordait de 26px en téléphone. */
  .pin-panes, .pin-panes > *, .pin-col, .pin-col > * { min-width: 0; }

  /* ══════════ Version 5 : blanc, encre chaude, orange-rouge ══════════
     Calée sur pennylane.com/fr (mesuré le 09/10/2026) : Manrope, titres en
     600 à -3 %, H1 52 px, H2 36 px, cartes à 12 px de rayon et liseré fin
     sans ombre, boutons à 6 px de rayon, 48 px de haut.
     Couleurs : fond blanc, encre chaude #231A1A (titres, pied de page) ;
     les teintes orange sont redéfinies plus bas (version 6). */
  @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
    src:url(/fonts/manrope-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
    src:url(/fonts/manrope-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  :root{
    --s:'Manrope',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Arial,sans-serif;
    --encre:#231A1A; --encre-2:#3B302E; --texte-2:#625754;
    --gris-1:#625754; --gris-2:#7A6F6B; --gris-3:#DCD5D2; --gris-4:#ECE7E4; --gris-5:#FAF8F7;
    --trait:rgba(35,26,26,.16);
    --bleu-pale:#FFF1EC;
  }
  body{font-family:var(--s);color:var(--encre)}
  h1,h2,h3{font-family:var(--s);font-weight:600;letter-spacing:-.03em;color:var(--encre)}
  h1{font-size:clamp(34px,4.2vw,52px);line-height:1.15}
  h2{font-size:clamp(28px,3vw,36px);line-height:1.2}
  .sous{color:var(--texte-2);font-size:clamp(17px,1.5vw,21px);line-height:1.45}
  .hl{color:var(--rouge)}
  .tete .sur{display:none}
  .tete h2{margin:0 0 14px}

  /* En-tête */
  header{background:rgba(255,255,255,.92);border-bottom-color:var(--gris-4)}
  .logo{color:var(--encre)}
  .nav .l>a{color:var(--encre);font-weight:500;font-size:15.5px}
  .nav .l>a:hover{background:var(--gris-5);color:var(--encre)}

  /* Boutons : rectangles à petit rayon, comme la référence */
  .b{border-radius:6px;font-weight:600;height:48px;padding:0 20px;font-size:16px}
  .b.sm{height:40px;border-radius:6px;padding:0 16px;font-size:14.5px}
  .b.p{background:var(--grad);color:#fff;border:0}
  .b.p:hover{background:var(--grad);filter:brightness(.94)}
  .b.s{background:#fff;color:var(--encre);border:1px solid var(--trait)}
  .b.s:hover{border-color:var(--encre)}

  /* Héros */
  .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;
    text-align:left;padding:64px 24px 96px}
  .ann{display:inline-flex;gap:6px;align-items:center;font-size:15px;font-weight:600;color:var(--encre);
    background:none;padding:0;border-radius:0}
  .ann::before{display:none}
  .ann span{color:var(--rouge)}
  .hero h1{margin:22px 0 0;max-width:17ch}
  .hero .sous{margin:22px 0 0;max-width:40ch}
  .hero .act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:32px}
  .hero-v{margin:0;border-radius:12px;overflow:hidden;background:#F6F0EA}
  .hero-v img{display:block;width:100%;height:auto}
  @media(max-width:960px){
    .hero{grid-template-columns:1fr;gap:36px;text-align:center;padding:36px 24px 64px}
    .hero h1,.hero .sous{margin-inline:auto}
    .hero .act{justify-content:center}
  }

  /* Bandeau : encre chaude, rubans orange */
  #bandeau{padding:0 0 112px}
  .bandeau{position:relative;overflow:hidden;background:var(--encre);border-radius:16px;padding:72px 28px 64px;
    text-align:center;isolation:isolate}
  .bandeau h2{color:#fff;max-width:22ch;margin:0 auto;font-size:clamp(28px,3.4vw,44px);line-height:1.25}
  .ruban{position:absolute;z-index:-1;width:min(300px,28%);height:100%;top:0}
  .ruban.g{left:0}.ruban.d{right:0}
  .pilules{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:34px 0 34px}
  .pilule{display:inline-flex;align-items:center;padding:12px 20px;border-radius:8px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15.5px;font-weight:600}
  @media(max-width:700px){
    .bandeau{padding:52px 18px 46px}
    .ruban{width:40%;opacity:.5}
    .pilules{flex-direction:column;align-items:stretch;max-width:300px;margin-inline:auto}
  }

  /* Titres de section alignés à gauche, comme la référence */
  .g-titre{font-size:clamp(32px,4.4vw,56px);line-height:1.15;margin:0 0 48px;max-width:20ch}
  @media(max-width:700px){.g-titre{margin-bottom:32px}.g-titre .br{display:none}}

  /* Bento : cartes blanches, liseré fin, visuel ancré en bas qui déborde */
  #outils{padding:0 0 112px}
  .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
  .bento .bc:nth-child(1){grid-column:span 6}.bento .bc:nth-child(2),.bento .bc:nth-child(3){grid-column:span 3}
  .bento .bc:nth-child(n+4){grid-column:span 4}
  .bc{position:relative;display:block;overflow:hidden;height:470px;border:1px solid var(--trait);border-radius:12px;
    background:#EFEFEF;padding:30px 30px 0;transition:border-color .2s}
  a.bc:hover{border-color:var(--encre)}
  a.bc:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
  .bc h3{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.35;max-width:12ch;margin:0}
  .bc .fl{position:absolute;top:28px;right:28px;font-size:20px;color:var(--encre);transition:transform .2s}
  a.bc:hover .fl{transform:translate(2px,-2px)}
  .bv{position:absolute}
  .bv img{display:block}
  .bv-agenda{left:30px;top:120px;width:880px;border:1px solid var(--gris-4);border-radius:10px;overflow:hidden;
    box-shadow:0 10px 30px -18px rgba(35,26,26,.35)}
  .bv-agenda img{width:100%;height:auto}
  .mini{background:#fff;border:1px solid var(--gris-4);border-radius:10px;padding:18px 20px;
    box-shadow:0 10px 30px -18px rgba(35,26,26,.35);font-size:14px}
  .mini-t{display:block;font-size:16px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em}
  .bv-devis{left:30px;right:30px;top:150px}
  .ln{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--gris-4);color:var(--texte-2)}
  .ln em{font-style:normal;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
  .ln span{white-space:nowrap}
  .bv-devis .mini{padding:14px 16px;font-size:13px}
  .bv-devis{left:24px;right:24px}
  .bv-fact{left:30px;right:-30px;top:150px;display:grid;gap:14px}
  .tuile{border:1px solid var(--gris-4);border-radius:10px;padding:18px 20px;background:#fff;
    box-shadow:0 10px 30px -18px rgba(35,26,26,.35)}
  .tuile span{display:block;font-size:14px;color:var(--texte-2)}
  .tuile b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
  .tuile small{font-size:13px;color:var(--texte-2)}
  .tuile.fonce{background:var(--encre);border-color:var(--encre);margin-left:28px}
  .tuile.fonce span,.tuile.fonce small{color:#D9CFCB}
  .tuile.fonce b{color:#fff}
  .bv-dem{left:30px;right:-60px;top:150px}
  .dm{padding:12px 0;border-top:1px solid var(--gris-4)}
  .dm b{display:block;font-size:15px;font-weight:600}
  .dm span{font-size:13.5px;color:var(--texte-2)}
  .bv-parc{left:30px;right:30px;top:130px}
  .pk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--gris-4)}
  .pk:first-child{border-top:0;padding-top:0}
  .pk span{font-size:13.5px;color:var(--texte-2)}
  .pk span b{display:block;color:var(--encre);font-size:14.5px;font-weight:600}
  .pk em{font-style:normal;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
  .pk em.ok{background:#EEF6F0;color:#2F6B45}
  .pk em.bientot{background:#FFF1E6;color:#9A4A0C}
  .pk em.echue{background:#FDECEA;color:#B42318}
  .bv-tel{left:50%;transform:translateX(-50%);top:130px;width:230px;border-radius:26px;border:7px solid #1E1A1A;overflow:hidden;
    box-shadow:0 20px 40px -20px rgba(35,26,26,.5)}
  .bv-tel img{width:100%;height:auto}
  /* Pastilles flottantes : la seule place des icônes, et elles disent quelque chose */
  .pill{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:10px;
    background:#fff;border:1px solid var(--gris-4);box-shadow:0 12px 28px -14px rgba(35,26,26,.45);
    font-size:14.5px;font-weight:600;color:var(--encre);white-space:nowrap}
  .pill i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#FFE7DD}
  .pill svg{width:18px;height:18px;fill:none;stroke:var(--rouge);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .pill.alerte i{background:#FDECEA}.pill.alerte svg{stroke:#B42318}
  .p1{left:46%;top:96px}.p2{right:24px;top:330px}
  .p3{left:30px;top:96px}
  .p4{right:24px;top:360px}
  .p5{left:24px;top:330px}
  @media(max-width:1100px){
    .bento{grid-template-columns:1fr 1fr}
    .bento .bc:nth-child(n){grid-column:span 1}.bento .bc:nth-child(1){grid-column:span 2}
  }
  @media(max-width:640px){
    .bento{grid-template-columns:1fr;gap:14px}
    .bento .bc:nth-child(n){grid-column:auto}
    .bc{height:360px;padding:22px 22px 0}
    .bc h3{font-size:21px}
    .bv-agenda{left:22px;top:90px;width:620px}
    .bv-devis,.bv-fact,.bv-dem,.bv-parc{left:22px;top:100px}
    .p1{left:auto;right:16px;top:150px}.p2{left:22px;top:280px}
    .p3{left:auto;right:16px;top:30px;display:none}
    .p4{top:286px}
    .bv-tel{top:96px;width:200px}.p5{left:16px;top:270px}
  }

  /* Frise */
  #deroule{padding:0 0 112px}
  .frise{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;position:relative;padding-bottom:24px}
  .frise::after{content:"";position:absolute;left:0;bottom:0;height:3px;border-radius:3px;width:0;
    background:var(--vif);transition:width 1.6s cubic-bezier(.4,.1,.2,1) .25s}
  .frise.on::after{width:100%}
  .frise li{opacity:.25;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
  .frise.on li{opacity:1;transform:none}
  .frise li:nth-child(2){transition-delay:.12s}.frise li:nth-child(3){transition-delay:.24s}
  .frise li:nth-child(4){transition-delay:.36s}.frise li:nth-child(5){transition-delay:.48s}
  .frise li:nth-child(6){transition-delay:.6s}.frise li:nth-child(7){transition-delay:.72s}
  .frise li:nth-child(8){transition-delay:.84s}
  .frise a{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 16px 16px;border-radius:12px;
    background:#fff;border:1px solid var(--trait);transition:border-color .2s}
  .frise a:hover{border-color:var(--encre)}
  .frise a:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
  .fr-n{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--rouge);font-variant-numeric:tabular-nums}
  .frise b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
  .frise .fr-t{font-size:13.5px;line-height:1.5;color:var(--texte-2);flex:1}
  .quis{display:flex;flex-wrap:wrap;gap:4px}
  .qui{font-style:normal;font-size:12px;font-weight:600;color:var(--texte-2);padding:2px 8px;border-radius:6px;border:1px solid var(--gris-4)}
  @media(max-width:1100px){.frise{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media(max-width:640px){
    .frise{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 24px 14px;
      margin-inline:-24px;scroll-padding-inline:24px;scrollbar-width:none}
    .frise li{flex:0 0 64%;scroll-snap-align:start}
    .frise::after{display:none}
  }

  /* La démo qui défile seule */
  #logiciel{padding:0 0 112px}
  .auto-l{display:flex;gap:4px;width:fit-content;max-width:100%;margin:0 auto 22px;padding:5px;border-radius:10px;
    border:1px solid var(--trait);background:#fff;overflow-x:auto;scrollbar-width:none}
  .auto-l button{position:relative;overflow:hidden;flex:0 0 auto;font:inherit;font-size:15px;font-weight:600;
    padding:9px 17px;border-radius:7px;border:0;background:none;color:var(--texte-2);cursor:pointer;transition:color .2s}
  .auto-l button>span:last-child{position:relative}
  .auto-l button:hover{color:var(--encre)}
  .auto-l button[aria-selected="true"]{color:var(--encre);background:var(--gris-5)}
  .auto-l button:focus-visible{outline:2px solid var(--rouge);outline-offset:-2px}
  .rempli{position:absolute;left:0;right:0;bottom:0;height:3px;transform-origin:left;transform:scaleX(0);background:var(--vif)}
  .auto.joue [aria-selected="true"] .rempli{animation:remplir var(--duree,6s) linear forwards}
  .auto.joue.pause [aria-selected="true"] .rempli{animation-play-state:paused}
  @keyframes remplir{to{transform:scaleX(1)}}
  .auto-s{border-radius:16px;padding:48px 6% 30px;background:linear-gradient(180deg,#fff 0%,#FBF6F3 100%);border:1px solid var(--trait)}
  .fen{max-width:980px;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--gris-4);
    box-shadow:0 30px 60px -36px rgba(35,26,26,.45)}
  .pile{position:relative;aspect-ratio:16/10;background:#F5F7FA}
  .pile img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.012);transition:opacity .55s ease,transform .7s ease}
  .pile img.on{opacity:1;transform:none}
  .auto-leg{max-width:640px;margin:24px auto 0;text-align:center;font-size:16px;line-height:1.55;color:var(--texte-2);min-height:3.1em}
  @media(max-width:700px){
    .auto-l{justify-content:flex-start;margin-inline:-8px;max-width:calc(100% + 16px)}
    .auto-s{padding:20px 12px 16px;border-radius:12px}
  }
  #auto{scroll-margin-top:84px}

  /* Chauffeurs et techniciens : deux cartes jumelles, capture recadrée qui déborde */
  #terrain{padding:0 0 112px}
  .ter{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .ter-c{height:520px}
  .ter-c h3{max-width:none}
  #terrain .g-titre{max-width:24ch}
  .ter-c p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--texte-2);max-width:46ch}
  /* Un cadre ancré en bas de carte ; la capture y est décalée pour ne montrer
     que la fiche utile (fenêtre de la location, contenu du module atelier). */
  .bv-chauf,.bv-atel{left:30px;right:0;bottom:0;height:290px;overflow:hidden;border:1px solid var(--gris-4);
    border-right:0;border-bottom:0;border-radius:10px 0 0 0;box-shadow:0 10px 30px -18px rgba(35,26,26,.35)}
  .bv-chauf img,.bv-atel img{position:absolute;max-width:none;height:auto}
  .bv-chauf img{width:1500px;left:-239px;top:-56px}
  .bv-atel img{width:1300px;left:-212px;top:-6px}
  @media(max-width:860px){.ter{grid-template-columns:1fr}.ter-c{height:500px}}
  @media(max-width:640px){.ter-c{height:440px}.bv-chauf,.bv-atel{left:22px;height:190px}.bv-chauf img{width:1100px;left:-175px;top:-41px}.bv-atel img{width:1000px;left:-163px;top:-5px}}

  /* Démo en direct, tarifs, rendez-vous, pied de page */
  .demo-frame{border-color:var(--trait);border-radius:12px;box-shadow:0 30px 60px -40px rgba(35,26,26,.45)}
  .choix .ch{background:#fff;border:1px solid var(--trait);color:var(--encre);border-radius:8px}
  .choix .ch:hover{border-color:var(--encre)}
  .choix .ch[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
  .demo-pied a:not(.b):hover{color:var(--rouge)}
  @media(max-width:780px){.demo-ouvrir span{background:var(--grad);border-radius:6px}}
  .offre{border-color:var(--trait);border-radius:12px;box-shadow:none}
  .offre.mise{border-color:var(--rouge);box-shadow:0 0 0 1px var(--rouge)}
  .o-n{color:var(--texte-2)}
  .offre li:before{background:var(--rouge)}
  .calc{border-color:var(--trait);border-radius:12px}
  .calc-b button.on{background:var(--encre);border-color:var(--encre)}
  .calc-c.nous{background:#FFF4EF;border-color:#FFE1D4}
  .calc-l i,.calc-c.nous em{color:var(--rouge-f)}
  .reprise{border-color:var(--trait);background:#fff;border-radius:12px}
  .r-t{color:var(--rouge)}
  #demo{padding:0 0 112px!important}
  #tarifs{padding:0 0 112px!important}
  #rdv{padding:0 0 112px}
  .calendly-inline-widget{border-color:var(--trait)!important;border-radius:12px!important}
  footer{background:var(--encre);border-top:0;padding:30px 0}
  .ft{color:#D9CFCB}

  @media(prefers-reduced-motion:reduce){
    .frise li,.frise::after,.frise a,.pile img{transition:none}
    .frise li{opacity:1;transform:none}.frise::after{width:100%}
  }

  /* ══════════ Version 6 : orange-corail vif ══════════
     Deux dégradés. Le décoratif (fond du héros, rubans, barres de progression)
     va jusqu'à l'orange franc #FF7A2B. Celui qui porte du texte blanc s'arrête
     à #F7652A : blanc ≥ 3,07:1, le seuil AA du grand texte, et ce texte est
     toujours grand (boutons 19 px gras, titres ≥ 28 px). Petits textes
     colorés sur blanc : #D9361E (4,7:1). Mots mis en avant : #F2452F, jamais
     sous 28 px (3,7:1). */
  :root{
    --vif:linear-gradient(120deg,#FF4D3D 0%,#FF7A2B 100%);
    --grad:linear-gradient(120deg,#FF4D3D 0%,#F7652A 100%);
    --corail:#F2452F; --rouge:#D9361E; --rouge-f:#D9361E;
  }
  .hl{color:var(--corail)}
  .b.p{background:var(--grad);font-size:19px;font-weight:700;letter-spacing:-.01em;
    box-shadow:0 10px 24px -12px rgba(255,77,61,.75)}
  .b.p:hover{background:var(--grad);filter:saturate(1.1) brightness(1.04)}
  .b.p.sm,header .b.p{background:var(--encre);font-size:14.5px;font-weight:600;box-shadow:none}
  header .b.p:hover{background:#3A2E2C;filter:none}
  .fr-n{color:var(--corail)}
  .ann span{color:var(--corail)}
  /* Héros : la photo sur un panneau vif, la main sort par le bas */
  .hero-v{position:relative;background:
    radial-gradient(55% 45% at 30% 28%,rgba(255,111,106,.9),transparent 70%),
    radial-gradient(60% 50% at 85% 85%,rgba(255,138,61,.85),transparent 70%),
    var(--vif);border-radius:16px;aspect-ratio:1/1;overflow:hidden}
  .hero-v img{position:absolute;left:50%;bottom:-2%;width:104%;max-width:none;height:auto;transform:translateX(-50%)}
  /* Bandeau : le dégradé vif lui-même, texte blanc en grand, rubans clairs */
  .bandeau{background:
    radial-gradient(40% 60% at 22% 30%,rgba(255,111,106,.95),transparent 70%),
    radial-gradient(45% 60% at 80% 80%,rgba(255,138,61,.9),transparent 70%),
    var(--grad)}
  .ruban{mix-blend-mode:soft-light;opacity:.95}
  .ruban path{stroke-opacity:.9}
  .bandeau h2{color:#fff}
  .pilule{background:rgba(255,255,255,.94);border-color:transparent;color:var(--encre)}
  .bandeau .b.p{background:var(--encre);box-shadow:0 12px 28px -14px rgba(35,26,26,.8)}
  .bandeau .b.p:hover{background:#3A2E2C;filter:none}
  /* Pastilles, frise, démo */
  .pill i{background:#FFE9E3}.pill svg{stroke:var(--corail)}
  .frise::after,.rempli{background:var(--vif)}
  .offre.mise{border-color:var(--corail);box-shadow:0 0 0 1px var(--corail),0 24px 50px -30px rgba(255,77,61,.6)}
  .offre li:before{background:var(--corail)}
  .calc-c.nous{background:#fff;border-color:var(--corail)}
  @media(max-width:780px){.demo-ouvrir span{background:var(--grad);font-size:19px;font-weight:700}}
  @media(max-width:640px){.b.p{font-size:18.7px}}

  /* ══════════ Version 7 : largeur Pennylane, héros paysage ══════════
     Mesuré sur pennylane.com à 1440 px : contenu presque bord à bord (marges
     d'environ 60 px), titre à gauche sur ~55 %, photo paysage 1,45:1 sur ~45 %,
     et ~170 px avant le premier bloc fort. Le bandeau ne doit pas apparaître
     dans le premier écran à 1440×900. */
  .w{max-width:1472px;padding:0 56px}
  @media(max-width:700px){.w{padding:0 20px}}
  .sous{max-width:620px}
  .hero{gap:56px;padding:88px 56px 0}
  @media(min-width:961px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}.hero .hero-t h1{font-size:clamp(36px,3.35vw,52px)}}
  @media(max-width:960px){.hero{grid-template-columns:1fr}}
  .hero h1{font-size:clamp(32px,3.05vw,48px);line-height:1.18;max-width:21ch}
  .hero .sous{font-size:clamp(17px,1.4vw,20px)}
  .hero-v{width:100%;aspect-ratio:1600/1104;border-radius:16px}
  .hero-v img{position:static;width:100%;height:100%;transform:none;object-fit:cover}
  .preuve{margin:0 auto;padding-top:44px;padding-bottom:36px;text-align:left;font-size:14.5px;color:var(--texte-2);letter-spacing:.01em}
  .bandeau{max-width:1120px;margin:0 auto;padding:60px 48px 60px}
  .bandeau h2{font-size:clamp(28px,2.9vw,40px)}
  .bandeau .pilules{margin:26px 0 28px}
  #bandeau{padding-bottom:140px}
  @media(max-width:960px){.hero{padding:36px 20px 0;gap:32px}}
  @media(max-width:700px){
    .preuve{padding-top:56px;padding-bottom:56px;font-size:13.5px}
    .bandeau{padding:64px 20px 56px}
    .frise{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
    .auto-l{margin-inline:0;max-width:100%}
  }

  /* ══════════ Version 8 : bandeau façon Pennylane ══════════
     Mesuré sur pennylane.com à 1440 : pleine largeur du conteneur, 24 px de
     rayon, une ligne de tête (logo | pastille), le titre, trois pilules à
     icône carrée, le bouton. Rubans plus grands et plus clairs. */
  .bandeau{max-width:none;padding:56px 40px 64px;border-radius:24px;min-height:460px;
    display:flex;flex-direction:column;align-items:center;justify-content:center}
  .bandeau h2{font-size:clamp(28px,3vw,42px);max-width:24ch;margin-top:26px}
  .ruban{width:min(420px,32%);opacity:.92;mix-blend-mode:normal}
  .bd-tete{display:flex;align-items:center;gap:18px;color:#fff}
  .bd-logo{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:600;letter-spacing:-.02em}
  .bd-logo svg{width:28px;height:28px}
  .bd-sep{width:1px;height:34px;background:rgba(255,255,255,.55)}
  .bd-badge{background:#fff;color:var(--encre);border-radius:10px;padding:9px 14px;font-size:14.5px;font-weight:600}
  .bandeau .pilules{margin:30px 0 32px;gap:16px}
  .pilule{gap:12px;padding:10px 20px 10px 10px;border-radius:10px;background:rgba(35,26,26,.28);
    border:1px solid rgba(255,255,255,.45);color:#fff;font-size:16px;font-weight:600;backdrop-filter:blur(4px)}
  .pilule i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#fff}
  .pilule svg{width:19px;height:19px;fill:none;stroke:var(--corail);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:700px){
    .bandeau{padding:44px 18px 44px;min-height:0}
    .bd-tete{flex-direction:column;gap:12px}.bd-sep{display:none}
    .ruban{width:46%;opacity:.55}
  }

  /* ══════════ Version 9 : le héros est une photo ══════════
     L'écran du bureau montre l'agenda de flotte, notre atout principal ; la
     photo remplit le panneau arrondi, sans dégradé derrière. */
  .hero-v{background:#8C8177;aspect-ratio:1551/1070;overflow:visible;position:relative}
  .hero-v img{position:static;width:100%;height:100%;object-fit:cover;border-radius:16px;transform:none}
  .hpill{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:10px;
    background:#fff;box-shadow:0 14px 30px -14px rgba(35,26,26,.45);font-size:14.5px;font-weight:600;color:var(--encre);white-space:nowrap}
  .hpill i{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#FFE9E3}
  .hpill svg{width:17px;height:17px;fill:none;stroke:var(--corail);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .hp1{left:-18px;top:13%}
  .hp2{right:-14px;top:4%}
  @media(max-width:960px){.hp1{left:10px;top:10px}.hp2{right:10px;top:auto;bottom:10px}.hpill{font-size:13px}}
  @media(max-width:420px){.hp2{display:none}}
  .ft .credit{flex-basis:100%;font-size:11px}
  .ft .credit a{text-decoration:underline}

  /* Carte « Module atelier » : la photo d'un téléphone tenu en main. Le fond
     de la carte reprend le gris clair de la photo, pour qu'aucun cadre ne se
     voie ; la main sort par le bas. */
  .bc-photo{background:#EFEFEF}
  .bv-main{left:0;right:0;top:88px;bottom:0;overflow:hidden}
  .bv-main img{width:100%;height:auto;max-width:430px;margin:0 auto}
  @media(max-width:640px){.bv-main{top:104px}.bv-main img{max-width:340px}}
  /* L'étiquette se place entre le titre et le téléphone : elle ne couvre rien. */
  .bc-photo .p5{left:30px;top:70px}
  @media(max-width:640px){.bc-photo .p5{left:16px;top:58px}}

  /* Chauffeurs et atelier : deux captures nettes (3×), de même format,
     affichées à leur taille CSS et ancrées en bas des cartes jumelles. */
  .bv-chauf,.bv-atel{left:30px;right:auto;bottom:0;width:624px;max-width:calc(100% - 30px);height:320px;
    overflow:hidden;border:1px solid var(--gris-4);border-right:0;border-bottom:0;border-radius:10px 0 0 0;background:#F5F7FA}
  .bv-chauf img,.bv-atel img{position:static;width:624px;max-width:none;height:320px;display:block}
  .ter-c{height:540px}
  @media(max-width:860px){.ter-c{height:520px}}
  @media(max-width:640px){.ter-c{height:480px}.bv-chauf,.bv-atel{left:22px;max-width:calc(100% - 22px);height:250px}
    .bv-chauf img,.bv-atel img{width:488px;height:250px}}

  /* Téléphone : captures dédiées, prises à la largeur d'un téléphone, pour que
     rien d'important ne soit coupé à droite. */
  .bv-chauf picture,.bv-atel picture{display:block}
  @media(max-width:640px){
    .ter-c{height:auto;padding-bottom:0}
    .bv-chauf,.bv-atel{position:relative;left:auto;bottom:auto;margin:22px -22px 0 0;width:auto;max-width:none;height:auto;border-radius:10px 0 0 0}
    .bv-chauf img,.bv-atel img{width:100%;max-width:306px;height:auto}
  }

  .preuve a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--gris-3);text-underline-offset:3px}
  .preuve a:hover{text-decoration-color:var(--corail)}

  /* Carte « Demandes du site » : le code à coller, puis les demandes reçues. */
  .bc-p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--texte-2);max-width:34ch}
  .snip{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--encre);color:#E9E2DF;
    font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:hidden;position:relative;z-index:1}
  .snip .t{color:#FF9A7A}.snip .a{color:#F6C27A}.snip .v{color:#B8E2C8}
  .bv-dem{top:312px;right:30px}
  .p4{top:322px;bottom:auto;right:42px}
  /* Agenda : l'étiquette « contrôle échu » posée sur une zone vide de l'agenda */
  .p2{top:414px;bottom:auto;right:24px}
  @media(max-width:640px){
    .bc-p{font-size:14px}
    .snip{font-size:11px;padding:10px 12px}
    .bv-dem{top:280px;right:22px}
    .p4{top:288px;bottom:auto;right:30px;font-size:12.5px;padding:6px 10px 6px 6px}.p4 i{width:24px;height:24px}
    .bv-agenda{left:-96px}
    .p2{left:auto;top:290px;bottom:auto;right:14px;font-size:12.5px;padding:6px 10px 6px 6px}.p2 i{width:24px;height:24px}
  }

  @media(max-width:640px){.bv-fact,.bv-parc{top:86px}.tuile{padding:14px 16px}.tuile b{font-size:26px}.pk{padding:9px 0}}

  /* ══════════ Version 15 : ERP, ordres de réparation, le bon engin ══════════ */
  .kicker{margin:18px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge)}
  .hero h1{margin-top:10px}
  .bento .bc.bc-or{grid-column:1 / -1 !important}
  .bc-or{height:420px}
  .bc-or .bc-p{max-width:30ch}
  .bv-or{left:44%;right:-40px;top:34px;border:1px solid var(--gris-4);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(35,26,26,.35)}
  .bv-or img{display:block;width:100%;height:auto}
  .p6{left:30px;bottom:30px}
  #engin{padding:0 0 112px}
  .engin-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
  .engin-t .g-titre{margin-bottom:20px}
  .etapes{list-style:none;counter-reset:e;margin-top:28px;display:grid;gap:18px}
  .etapes li{counter-increment:e;display:grid;grid-template-columns:36px 1fr;column-gap:14px}
  .etapes li::before{content:counter(e);grid-row:span 2;font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--corail);line-height:1}
  .etapes b{font-size:17px;font-weight:600;letter-spacing:-.015em}
  .etapes span{font-size:15.5px;line-height:1.5;color:var(--texte-2)}
  .engin-v{position:relative;margin:0}
  .engin-v img{display:block;width:100%;height:auto;border:1px solid var(--trait);border-radius:16px;
    box-shadow:0 30px 60px -40px rgba(35,26,26,.45)}
  /* Posée sur la ligne « 1 famille convient », vide à droite, dans l'image. */
  .hp3{right:2%;top:44%;z-index:2}
  @media(max-width:640px){.hp3{position:relative;right:auto;top:auto;margin-top:14px;font-size:13px;padding:6px 10px 6px 6px}.hp3 i{width:22px;height:22px}}
  .frise{grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
  .frise a{padding:16px 13px 14px}
  .frise b{font-size:15px}
  .frise .fr-t{font-size:13px}
  @media(max-width:1100px){.frise{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:960px){.engin-g{grid-template-columns:1fr;gap:32px}.bv-or{left:30px;top:200px;right:-200px}.bc-or{height:520px}}
  @media(max-width:640px){
    .bc-or{height:470px}.bv-or{left:22px;top:230px;right:-300px}.p6{left:16px;bottom:auto;top:178px;font-size:12.5px}
  }

  .pk em.rep{background:#F0EDF7;color:#5B3FA0}
  /* Contact par courriel : sous l'agenda et en pied de page. */
  .rdv-mail{text-align:center;margin:22px auto 0;font-size:16px;color:var(--texte-2)}
  .rdv-mail a{color:var(--encre);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .ft .ft-mail{color:inherit;text-decoration:underline;text-underline-offset:3px}
  /* ══════════ Textes longs : bloc métier, FAQ, pages de contenu ══════════
     Une colonne de lecture d'environ 70 caractères, les titres de la marque,
     les liens en rouge lisible (#D9361E, 4,7:1 sur blanc). Aucun fond teinté. */
  .lien-plus{margin:28px 0 0;font-size:15.5px;color:var(--texte-2)}
  .lien-plus.c{text-align:center}
  .lien-plus a,.doc a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .lien-plus a:hover,.doc a:hover{text-decoration-thickness:2px}
  #metier{padding:0 0 112px}
  .doc{max-width:760px}
  .doc>h2{margin:0 0 22px}
  .doc h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:38px 0 12px}
  .doc p,.doc li{font-size:17px;line-height:1.68;color:var(--encre-2)}
  .doc p+p{margin-top:14px}
  .doc ul,.doc ol{margin:14px 0 0 22px;display:grid;gap:8px}
  .doc strong{color:var(--encre);font-weight:700}
  .metier-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
  .metier-g .g-titre{position:sticky;top:96px;margin:0}
  @media(max-width:960px){.metier-g{grid-template-columns:1fr;gap:28px}.metier-g .g-titre{position:static}}
  #faq{padding:0 0 112px}
  .faq{max-width:880px}
  .faq details{border-top:1px solid var(--trait)}
  .faq details:last-child{border-bottom:1px solid var(--trait)}
  .faq summary{cursor:pointer;list-style:none;position:relative;padding:22px 44px 22px 0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:6px;top:17px;font-size:26px;font-weight:400;color:var(--corail)}
  .faq details[open] summary::after{content:"−"}
  .faq details>div{padding:0 0 24px;max-width:72ch}
  .faq details>div p{font-size:16.5px;line-height:1.65;color:var(--encre-2)}
  .faq details>div p+p{margin-top:10px}
  .faq details>div a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px}

  /* Pied de page : le plan du site au-dessus de la ligne de signature */
  .ft-cols{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:32px;padding-top:28px;padding-bottom:30px;
    border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:22px}
  .ft-cols b{display:block;color:#fff;font-size:14px;font-weight:700;margin-bottom:12px}
  .ft-cols span{color:#D9CFCB;font-size:14px}
  .ft-cols a{display:block;width:max-content;max-width:100%;color:#D9CFCB;font-size:14.5px;padding:4px 0}
  .ft-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
  @media(max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.ft-cols{grid-template-columns:1fr;gap:24px}}

/* ══ Pages de contenu (générées par generer-pages.py) ══ */
.page{padding-top:36px;padding-bottom:40px}
.page section.bloc{padding:0 0 72px}
.fil{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--texte-2);margin:0 0 30px}
.fil a{color:var(--texte-2);text-decoration:underline;text-decoration-color:var(--gris-3);text-underline-offset:3px}
.fil a:hover{color:var(--encre)}
.page-tete{max-width:860px;margin:0 0 56px}
.page-tete .kicker{margin:0}
.page-tete h1{font-size:clamp(32px,3.6vw,50px);line-height:1.15;margin:14px 0 18px;text-wrap:balance}
.page-tete .sous{margin:0}
.meta{margin-top:18px;font-size:14px;color:var(--texte-2)}
.doc h2{font-size:clamp(26px,2.6vw,32px);line-height:1.2;margin:56px 0 16px}
.doc>h2:first-child,.doc>:first-child{margin-top:0}
.doc ul+p,.doc ol+p,.doc .tab-w+p,.doc .capture+p{margin-top:16px}
.doc p+ul,.doc p+ol{margin-top:12px}
.doc .note{font-size:14.5px;line-height:1.6;color:var(--texte-2);margin-top:14px}
.chapo{font-size:19px !important;line-height:1.6 !important;color:var(--encre) !important;margin-bottom:8px}
.tab-w{overflow-x:auto;margin:22px 0 6px;border:1px solid var(--trait);border-radius:12px;-webkit-overflow-scrolling:touch}
.tab{border-collapse:collapse;width:100%;min-width:600px;font-size:15px;line-height:1.5}
.tab th,.tab td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gris-4)}
.tab thead th{font-size:13.5px;font-weight:700;color:var(--encre);border-bottom:1px solid var(--trait)}
.tab tbody tr:last-child td{border-bottom:0}
.tab td a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px}
.capture{margin:28px 0 8px}
.capture img{display:block;width:100%;height:auto;border:1px solid var(--trait);border-radius:12px;box-shadow:0 24px 50px -36px rgba(35,26,26,.5)}
@media(min-width:1180px){.doc .capture{width:1080px;max-width:calc(100vw - 112px)}}
.capture figcaption{font-size:14px;color:var(--texte-2);margin-top:10px;line-height:1.5}
.sources li{font-size:15px}
.art-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:960px){.art-grille{grid-template-columns:1fr}}
.art-carte{display:flex;flex-direction:column;border:1px solid var(--trait);border-radius:12px;padding:28px;background:#fff;transition:border-color .2s}
.art-carte:hover{border-color:var(--encre)}
.art-carte h2,.art-carte h3{font-size:21px;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px}
.art-carte p{font-size:15.5px;line-height:1.6;color:var(--texte-2);flex:1}
.art-carte span{margin-top:18px;font-size:14px;font-weight:600;color:var(--rouge)}
.cta-fin{position:relative;overflow:hidden;border-radius:20px;padding:56px 28px;text-align:center;color:#fff;margin:24px 0 40px;
  background:radial-gradient(40% 60% at 22% 30%,rgba(255,111,106,.95),transparent 70%),radial-gradient(45% 60% at 80% 80%,rgba(255,138,61,.9),transparent 70%),var(--grad)}
.cta-fin h2{color:#fff;font-size:clamp(26px,2.8vw,36px);line-height:1.2;margin:0 auto 12px;max-width:24ch}
.cta-fin p{color:#fff;font-size:17px;margin:0 auto 26px;max-width:52ch}
.cta-fin .b.p{background:var(--encre);box-shadow:none}
.cta-fin .b.s{background:#fff;border-color:#fff}
.cta-fin .act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.page .calc-pli{margin-top:20px}