/* ============================================================
     CARLYTO — Redesign accueil v2
     • Bleu RÉDUIT à un rôle d'accent (CTA / actif), base claire neutre
     • 2 sidebars : gauche = arbre familles de pièces ; droite = véhicule connecté
     • Heros DIFFUS : glow flou fondu dans le fond, plus de grosses boîtes
     ============================================================ */
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
  :root{
    --char:#10151e; --char-2:#161d2a;      /* header / chrome sombre (charbon, pas bleu) */
    --ink:#141a24; --text:#586271; --muted:#8a93a1;
    --bg:#ffffff; --surface:#f6f8fb; --surface-2:#eef2f7; --line:#e7ebf1;
    --accent:#1f6feb; --accent-600:#175cc9; --accent-50:#eef4ff;  /* bleu = ACCENT seulement */
    --red:#e5302a; --red-50:#fdeceb; --green:#16a35a; --green-50:#e7f6ee;
    --amber:#f4a823; --amber-50:#fdf3e0;
    --shadow-sm:0 1px 2px rgba(16,21,30,.06),0 1px 3px rgba(16,21,30,.05);
    --shadow-md:0 8px 22px rgba(16,21,30,.10);
    --shadow-lg:0 22px 54px rgba(16,21,30,.16);
    --radius:14px; --maxw:1440px;
    --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.5}
  a{color:inherit;text-decoration:none} svg{display:block}
  h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.14;letter-spacing:-.01em}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;border-radius:11px;padding:12px 18px;font-weight:600;font-size:14px;font-family:inherit;transition:.15s}
  .btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)} .btn-accent:hover{background:var(--accent-600)}
  .btn-red{background:var(--red);color:#fff} .btn-red:hover{filter:brightness(.95)}
  .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#23303f}
  .btn-out{background:#fff;color:var(--ink);border:1px solid var(--line)} .btn-out:hover{border-color:var(--accent);color:var(--accent)}
  .btn-soft{background:var(--accent-50);color:var(--accent)} .btn-soft:hover{background:#e2edff}
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px}
  .pill-green{background:var(--green-50);color:var(--green)} .pill-accent{background:var(--accent-50);color:var(--accent)}
  .pill-red{background:var(--red);color:#fff} .pill-amber{background:var(--amber-50);color:#b9791a}
  .kicker{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
  .sec-head h2{font-size:22px;font-weight:700}
  /* lien de section : pilule accent douce — bleu clair au repos, bleu plein au survol */
  .sec-head a{display:inline-flex;align-items:center;color:var(--accent);font-weight:600;font-size:12.5px;letter-spacing:.01em;
    padding:5px 14px;border-radius:999px;background:var(--accent-50);
    transition:background .22s ease,color .22s ease,box-shadow .22s ease}
  .sec-head a:hover{background:linear-gradient(135deg,#1e90ff,#0a6bff);color:#fff;
    box-shadow:0 0 0 1px rgba(10,107,255,.35),0 6px 16px -4px rgba(10,107,255,.7)}
  /* Titres de section : TOUT CAPITALES, lourd, mot-clé en bloc bleu surligné */
  .sec-head h2.st{display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.05;color:var(--ink)}
  .sec-head h2.st .ac{color:#fff;background:linear-gradient(135deg,#2b7bff,#0a52e6);padding:3px 11px 4px;border-radius:8px;
    box-shadow:0 7px 16px -6px rgba(10,82,230,.75);letter-spacing:.01em}

  /* ============ PROMO BAR ============ */
  .promo{background:linear-gradient(180deg,#eef2f6,#dde3ea 60%,#cbd3dd);color:#28303b;font-size:19px;border-bottom:1px solid rgba(40,48,59,.12);font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:.01em}
  .promo .wrap{display:flex;align-items:center;justify-content:space-between;height:57px}
  .promo .left{flex:1;min-width:0;overflow:hidden;margin-right:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .promo .marq{display:flex;width:max-content;animation:promoMarquee 32s linear infinite}
  .promo .left:hover .marq{animation-play-state:paused}
  .promo .grp{display:flex;gap:33px;padding-right:33px}
  .promo .grp span{display:inline-flex;gap:10px;align-items:center;font-weight:500;white-space:nowrap}
  .promo .grp i[data-lucide]{display:inline-flex} .promo .grp svg{width:22px;height:22px;stroke-width:2;opacity:1}
  /* une couleur par icône (livraison · retours · garantie · expédition) */
  .promo .grp span:nth-child(1) svg{color:#4ade80}  /* Livraison — vert */
  .promo .grp span:nth-child(2) svg{color:#60a5fa}  /* Retours — bleu */
  .promo .grp span:nth-child(3) svg{color:#fbbf24}  /* Garantie — or */
  .promo .grp span:nth-child(4) svg{color:#fb923c}  /* Expédition — orange */
  @keyframes promoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.promo .marq{animation:none}}
  /* note clients — capsule « charbon vitrée » + liseré or, étoiles à remplissage proportionnel */
  .promo .right{flex:none;display:flex;align-items:center}
  .promo .rating{position:relative;display:inline-flex;align-items:center;gap:11px;padding:7px 15px 7px 16px;border-radius:13px;
    background:linear-gradient(180deg,#2f3a4b,#1e2733);
    border:1px solid rgba(244,168,35,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(0,0,0,.4),0 4px 14px rgba(16,21,30,.30);
    line-height:1;white-space:nowrap;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
  /* halo doré qui balaie au survol */
  .promo .rating:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(255,203,82,.16) 48%,transparent 66%);
    transform:translateX(-120%);transition:transform .6s ease}
  .promo .rating:hover{transform:translateY(-1px);border-color:rgba(244,168,35,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(16,21,30,.4),0 0 0 3px rgba(244,168,35,.12)}
  .promo .rating:hover:before{transform:translateX(120%)}
  /* étoiles : base sombre + calque or clipé à --fill (4,8/5 = 96%) */
  .promo .rstars{position:relative;display:inline-block;font-size:14px;letter-spacing:2px}
  .promo .rstars .rbase{color:rgba(255,255,255,.16)}
  .promo .rstars .rfill{position:absolute;top:0;left:0;width:var(--fill);overflow:hidden;white-space:nowrap;
    color:#ffcb52;background:linear-gradient(180deg,#ffe08a,#ffcb52 50%,#f0a519);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 5px rgba(255,203,82,.5))}
  .promo .rnum{display:inline-flex;align-items:baseline;gap:1px}
  .promo .rnum b{color:#fff;font-weight:700;font-size:15.5px;letter-spacing:-.02em}
  .promo .rnum i{font-style:normal;color:rgba(255,255,255,.5);font-weight:600;font-size:12px}
  .promo .rsep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28)}
  .promo .rcnt{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.72);font-weight:600;font-size:12.5px}
  .promo .rcnt svg{width:14px;height:14px;color:#34d27b;stroke-width:2.4}

  /* ============ HEADER ============ */
  header{background:var(--char);position:sticky;top:0;z-index:40}
  .head{display:flex;align-items:center;gap:20px;height:72px}
  .logo{display:flex;align-items:center;gap:13px}
  .logo .lmono{height:46px;width:auto;display:block}
  .logo .lstack{display:flex;flex-direction:column;gap:5px}
  .logo .lname{height:22px;width:auto;display:block}
  .logo .lslog{display:flex;align-items:center;gap:7px;font-size:9px;line-height:1;font-weight:600;font-style:italic;letter-spacing:.12em;text-transform:uppercase;color:#9aa4b2;white-space:nowrap}
  .logo .lslog i{width:4px;height:4px;border-radius:50%;background:#0c68f3;flex:none}
  .foot-logo-img .lmono{height:50px}
  .foot-logo-img .lname{height:24px}
  .foot-logo-img .lslog{font-size:10px}
  .logo .mark{width:42px;height:42px;border-radius:11px;border:2px solid var(--accent);background:#0c1320;display:grid;place-items:center}
  .logo .mark b{font-style:italic;font-weight:700;font-size:23px;color:#fff}
  .logo .txt b{display:block;color:#fff;font-style:italic;font-weight:700;font-size:21px;letter-spacing:.5px;line-height:1}
  .logo .txt span{display:block;color:#7f8b9c;font-size:11px;letter-spacing:.14em;margin-top:4px;font-weight:600}
  .hsearch{flex:1;display:flex;max-width:600px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
  .hsearch input{flex:1;border:none;outline:none;padding:13px 16px;font-size:14.5px;font-family:inherit}
  .hsearch button{border:none;background:var(--accent);color:#fff;width:54px;display:grid;place-items:center;cursor:pointer}
  .hactions{display:flex;align-items:center;gap:2px;color:#cdd5e0}
  .hact{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 11px;border-radius:10px;cursor:pointer;position:relative}
  .hact:hover{background:rgba(255,255,255,.07)} .hact span{font-size:12.5px;font-weight:600}
  .hact .badge{position:absolute;top:1px;right:5px;color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:0 5px;
    background:linear-gradient(180deg,#ff5a4f,#e5302a 60%,#c01f1a);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 1px rgba(120,20,15,.35);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  /* Panier : la pastille ronde sautille au survol */
  .hact:hover .badge{animation:badgeJump .55s cubic-bezier(.34,1.7,.5,1) infinite}
  @keyframes badgeJump{0%,100%{transform:translateY(0) scale(1)}
    40%{transform:translateY(-5px) scale(1.12)}
    70%{transform:translateY(0) scale(.96)}}
  @media (prefers-reduced-motion:reduce){.hact:hover .badge{animation:none}}

  /* ============ 3-COLUMN SHELL ============ */
  .shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start;padding:30px 0 64px}

  /* ---- LEFT : arbre des familles de pièces ---- */
  aside.left{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow-sm);overflow:hidden;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
  .left .lh{display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:13px 15px;font-weight:700;font-size:13.5px;letter-spacing:.01em}
  .left .lh svg{flex:none}
  .tree{overflow:auto;padding:6px}
  .fam{border-radius:10px}
  .fam>button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:none;font-family:inherit;cursor:pointer;padding:10px 11px;border-radius:9px;color:var(--ink);font-weight:600;font-size:13.5px;text-align:left}
  .fam>button:hover{background:var(--surface)}
  .fam>button .fic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;flex:none}
  .fam>button .nm{flex:1}
  .fam>button .chev{transition:.18s;color:var(--muted)}
  .fam.open>button{background:var(--accent-50);color:var(--accent)}
  .fam.open>button .fic{background:#fff;}
  .fam.open>button .chev{transform:rotate(90deg);color:var(--accent)}
  .sub{display:none;padding:2px 6px 8px 50px}
  .fam.open .sub{display:block}
  .sub a{display:block;padding:6px 9px;border-radius:7px;font-size:13px;color:var(--text)}
  .sub a:hover{background:var(--surface);color:var(--accent)}
  .left .lf{border-top:1px solid var(--line);padding:11px 14px}
  .left .lf a{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--red)}

  /* ---- RIGHT : véhicule connecté (pop-up) ---- */
  aside.right{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
  .vpop{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden}
  .vpop .vtop{background:var(--char);padding:16px 16px 18px;color:#fff;position:relative;border-bottom:3px solid var(--accent)}
  .vpop .vtop .vid{display:flex;align-items:center;gap:8px;margin-top:12px;position:relative;z-index:1}
  .vpop .vtop .vid .carico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
  /* Bandeau de section dans le panneau véhicule */
  .vsec{display:flex;align-items:center;gap:7px;padding:12px 16px 2px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .vsec:before{content:"";flex:none;width:14px;height:2px;background:var(--accent);border-radius:2px}
  /* Grille caractéristiques (séparateurs fins = effet fiche technique) */
  .vspecs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:8px 0 2px}
  .vspecs .sp{background:#fff;padding:9px 14px;min-width:0}
  .vspecs .sp.full{grid-column:1 / -1}
  .vspecs .sp small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
  .vspecs .sp b{color:var(--ink);font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vspecs .sp .ener{display:inline-flex;align-items:center;gap:5px}
  .vspecs .sp .ener i{width:7px;height:7px;border-radius:99px;background:var(--amber);display:inline-block}
  .vpop .connrow{display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}
  .vpop .conn{display:inline-flex;align-items:center;background:rgba(22,163,90,.18);color:#5fe39b;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
  .vpop .connrow .dot{position:relative;width:8px;height:8px;border-radius:99px;background:#34d27b;flex:none;animation:dotGlow 2s ease-in-out infinite}
  .vpop .connrow .dot:after{content:"";position:absolute;inset:0;border-radius:99px;background:#34d27b;animation:dotPulse 2s ease-out infinite}
  @keyframes dotPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
  @keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(52,210,123,.5)}50%{box-shadow:0 0 6px 1px rgba(52,210,123,.85)}}
  .vpop h3{color:#fff;font-size:19px;margin:12px 0 2px;position:relative;z-index:1}
  .vpop .vsub{color:#aeb9c9;font-size:13px;position:relative;z-index:1}
  .vpop .plate-mini{display:inline-flex;margin-top:12px;border:2px solid #fff;border-radius:7px;overflow:hidden;position:relative;z-index:1}
  .vpop .plate-mini .eu{background:var(--accent);color:#fff;padding:5px 8px;font-weight:700;font-size:12px}
  .vpop .plate-mini .n{padding:5px 11px;font-weight:700;color:#fff;letter-spacing:2px;background:#0d1320}
  .vbody{padding:14px 16px}
  .vstat{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
  .vstat:last-of-type{border-bottom:none}
  .vstat .l{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text)}
  .vstat .l .si{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
  .vstat .l .si.ok{background:var(--green-50);color:var(--green)} .vstat .l .si.bl{background:var(--accent-50);color:var(--accent)} .vstat .l .si.am{background:var(--amber-50);color:#b9791a}
  .vstat b{color:var(--ink);font-size:13.5px}
  /* Lignes mises en valeur (discret, pro) : fond teinté léger + filet d'accent */
  .vstat.hl{border-bottom:none;border-radius:9px;padding:9px 11px;margin:4px 0;border:1px solid transparent;box-shadow:inset 2px 0 0 currentColor}
  .vstat.hl .l{font-weight:600;color:var(--ink)}
  .vstat.hl.bl{background:var(--accent-50);border-color:#dceaff;color:var(--accent)}
  .vstat.hl.gr{background:var(--green-50);border-color:#cdeedd;color:var(--green)}
  .vstat.hl .v{display:inline-flex;align-items:center;gap:6px}
  .vstat.hl .v .ctpill{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px}
  .vstat.hl .v .more{color:var(--accent);font-weight:700;font-size:13px}
  .vbar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:9px}
  .vbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#4bd089);width:62%}
  .vacts{display:grid;gap:8px;padding:4px 16px 16px}
  .vacts .btn{width:100%}
  .vmini{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:13px 15px}
  .vmini .t{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:13px;margin-bottom:6px}
  .vmini p{font-size:13px;margin:0}
  .vmini a{color:var(--accent);font-weight:600;font-size:13px;display:inline-flex;gap:5px;margin-top:8px}

  /* ============ CENTER ============ */
  main.center{display:flex;flex-direction:column;gap:44px;min-width:0}

  /* ============ HERO — CARROUSEL DE PROMOS (fond pièces auto sombre) ============ */
  .hero{position:relative;border-radius:0;overflow:hidden;background:var(--char);border:1px solid #1d2533;box-shadow:var(--shadow-sm)}
  .hero .bg{position:absolute;inset:0;z-index:0;
      background:url('https://images.pexels.com/photos/190574/pexels-photo-190574.jpeg?auto=compress&cs=tinysrgb&w=1600&q=70') center/cover no-repeat}
  .hero .bg:after{content:"";position:absolute;inset:0;
      background:linear-gradient(100deg,rgba(12,17,24,.95) 0%,rgba(14,20,30,.86) 55%,rgba(16,24,38,.72) 100%)}

  /* Carrousel (repris du carlyto.com actuel, adapté à la v2) */
  .hero-carousel{position:relative;z-index:2;width:100%;overflow:hidden}
  .hcar-track{display:flex;transition:transform .7s cubic-bezier(.45,.05,.3,1)}
  .hcar-slide{position:relative;flex:0 0 100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:42px 40px 56px;min-height:300px}
  .hcar-ill{position:absolute;right:42px;top:50%;transform:translateY(-50%);width:210px;height:210px;opacity:.92;pointer-events:none;display:flex;align-items:center;justify-content:center;animation:ill-glow-host 2s ease-in-out infinite}
  .hcar-ill svg{width:100%;height:100%}
  .hcar-slide::before{content:"";position:absolute;right:38px;top:50%;transform:translateY(-50%);width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:0}
  .hcar-slide.s-flash::before{background:radial-gradient(circle,rgba(58,123,208,.32),transparent 70%)}
  .hcar-slide.s-promo::before{background:radial-gradient(circle,rgba(229,48,42,.30),transparent 70%)}
  .hcar-slide.s-new::before{background:radial-gradient(circle,rgba(46,99,184,.32),transparent 70%)}
  .hcar-slide.s-refer::before{background:radial-gradient(circle,rgba(244,168,35,.24),transparent 70%)}
  .hcar-body{position:relative;z-index:1;max-width:64%;min-width:0}
  .hcar-tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#FFE87A;margin-bottom:12px}
  /* doigt animé pointant vers le bloc recherche (slide référence) */
  .point-down{display:inline-block;font-size:26px;line-height:1;margin-left:6px;vertical-align:-4px;animation:pointBounce 1.1s ease-in-out infinite;filter:drop-shadow(0 4px 7px rgba(0,0,0,.35))}
  @keyframes pointBounce{0%,100%{transform:rotate(-38deg) translateY(0)}50%{transform:rotate(-38deg) translateY(8px)}}
  /* slide "Nouveauté carnet" : tag agrandi en surbrillance verte */
  .hcar-slide.s-new .hcar-tag{font-size:17px;font-weight:700;letter-spacing:.1em;color:#5fe39b;background:rgba(52,210,123,.18);border:1px solid rgba(52,210,123,.5);padding:6px 16px;border-radius:999px;margin-bottom:15px}
  /* slide "Astuce / pièce défectueuse" : tag agrandi en surbrillance jaune */
  .hcar-slide.s-refer .hcar-tag{font-size:17px;font-weight:700;letter-spacing:.1em;color:#FFE87A;background:rgba(255,210,74,.18);border:1px solid rgba(255,210,74,.5);padding:6px 16px;border-radius:999px;margin-bottom:15px}
  .hcar-body h3{color:#fff;font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.01em;margin-bottom:9px;text-transform:uppercase}
  .hcar-body p{color:rgba(255,255,255,.72);font-size:16px;font-weight:500;line-height:1.5;margin:0}
  .hcar-body p mark{background:none;color:#FFE87A;font-weight:600}
  .hcar-cta{position:relative;z-index:1;margin-top:4px;display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:10px;background:var(--red);color:#fff;font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(229,48,42,.4);transition:.15s}
  .hcar-cta:hover{filter:brightness(1.06);transform:translateY(-2px)}
  .hcar-dots{position:absolute;bottom:16px;left:40px;display:flex;gap:7px;z-index:3}
  .hcar-dot{width:8px;height:8px;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.3);border:none;padding:0;transition:.2s}
  .hcar-dot.active{background:#FFE87A;width:22px;border-radius:4px}
  @keyframes ill-glow-host{0%,100%{filter:drop-shadow(0 0 6px rgba(255,210,74,.6))}50%{filter:drop-shadow(0 0 22px rgba(255,224,90,1)) drop-shadow(0 0 36px rgba(255,210,74,.7))}}
  .ill-ring{transform-origin:44px 44px;animation:ill-spin 9s linear infinite}
  @keyframes ill-spin{to{transform:rotate(360deg)}}
  .ill-bolt{transform-origin:44px 44px;animation:ill-bolt-pulse 1.5s ease-in-out infinite}
  @keyframes ill-bolt-pulse{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.22) rotate(-5deg)}60%{transform:scale(1.1) rotate(3deg)}}
  .ill-ring10{transform-origin:44px 44px;animation:ill-ring-glow 2.6s ease-in-out infinite}
  @keyframes ill-ring-glow{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
  /* piston moteur animé (slide « Astuce ») */
  .ill-piston{animation:ill-piston-stroke 1.3s ease-in-out infinite}
  @keyframes ill-piston-stroke{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
  .ill-spark{transform-origin:44px 16px;animation:ill-spark-flash 1.3s ease-in-out infinite}
  @keyframes ill-spark-flash{0%{opacity:1;transform:scale(1.15)}12%{opacity:0;transform:scale(.6)}100%{opacity:0;transform:scale(.6)}}
  .ill-pct{transform-origin:44px 46px;animation:ill-pct-pop 2.6s ease-in-out infinite}
  @keyframes ill-pct-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
  .hcar-new-glow{animation:new-glow 2.2s ease-in-out infinite}
  @keyframes new-glow{0%,100%{color:#fff;text-shadow:0 0 4px rgba(150,200,255,.3)}50%{color:#CFE6FF;text-shadow:0 0 10px rgba(160,210,255,1),0 0 24px rgba(120,180,255,.9),0 0 42px rgba(90,160,255,.6)}}

  /* ============ BLOC RECHERCHE (séparé, sous le hero, angles droits) ============ */
  .finderbar{--m:42,88,148;--md:#1a3a64;position:relative;overflow:hidden;background:#fff;border:1px solid #dde3ec;border-radius:0;
    box-shadow:0 24px 54px -16px rgba(16,21,30,.22),0 2px 6px rgba(16,21,30,.06),inset 0 1px 0 #fff;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  /* filigrane technique (roue) — matière discrète */
  .fb-deco{position:absolute;right:-40px;bottom:-52px;width:220px;height:220px;color:var(--ink);opacity:.04;pointer-events:none;z-index:0}
  .fb-inner{position:relative;z-index:1;padding:30px 32px}
  /* en-tête : base typographique (la couleur vient de --m du module) */
  .fb-head h2{line-height:1.1;text-transform:uppercase}
  .fb-head h2 .ac{color:rgb(var(--m))}
  .finder{background:transparent;border:none;box-shadow:none;padding:0;max-width:none}
  /* Onglets plaque / VIN : segmenté, actif dans la couleur du module */
  .finder .tabs{display:flex;gap:5px;margin-bottom:15px;background:#eef1f6;padding:5px;border-radius:12px;flex-wrap:wrap;
    box-shadow:inset 0 1px 3px rgba(16,21,30,.07)}
  .finder .tabs button{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:transparent;padding:11px 8px;border-radius:9px;font-family:inherit;font-weight:600;font-size:13px;color:#5a6b86;cursor:pointer;transition:.15s}
  .finder .tabs button svg{width:16px;height:16px;flex:none;opacity:.7}
  .finder .tabs button:hover{background:rgba(255,255,255,.75);color:var(--md)}
  .finder .tabs button.on{background:linear-gradient(180deg,rgb(var(--m)),var(--md));color:#fff;
    box-shadow:0 5px 12px -4px rgba(var(--m),.55),inset 0 1px 0 rgba(255,255,255,.24)}
  .finder .tabs button.on svg{opacity:1}
  .ig{display:none} .ig.on{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  /* champ avec icône intégrée (icône teintée du module, halo de focus coloré) */
  .field{position:relative;flex:1;min-width:230px;display:flex;align-items:center}
  .field>svg{position:absolute;left:14px;color:rgb(var(--m));opacity:.85;pointer-events:none}
  .field .inp{padding-left:42px}
  .ig .inp{flex:1;min-width:200px}
  .selrow{display:flex;gap:9px;flex:1;min-width:240px}
  select,.inp{width:100%;padding:14px;border:1.5px solid #dbe2ec;border-radius:11px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:#fff;
    box-shadow:inset 0 1px 2px rgba(16,21,30,.05);transition:.15s}
  select::placeholder,.inp::placeholder{color:#9aa6b6;font-weight:500}
  select:focus,.inp:focus{outline:none;border-color:rgb(var(--m));background:#fff;box-shadow:0 0 0 3px rgba(var(--m),.16),inset 0 1px 2px rgba(16,21,30,.04)}
  /* CTA module-couleur (plein, dégradé + ombre teintée) */
  .btn-find{padding:14px 24px;border-radius:11px;font-size:14px}
  .finderbar .btn-find{background:linear-gradient(180deg,rgb(var(--m)),var(--md));color:#fff;
    box-shadow:0 2px 5px rgba(16,21,30,.18),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(12,14,20,.22)}
  .finderbar .btn-find:hover{background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),linear-gradient(180deg,rgb(var(--m)),var(--md));
    transform:none;box-shadow:0 2px 5px rgba(16,21,30,.18),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(12,14,20,.22)}
  /* ===== Deux modules distincts : GAUCHE = plaque/VIN (bleu) · DROITE = référence (rouge) ===== */
  .fb-split{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:stretch}
  /* panneaux : identité couleur par module via --m / --md, dégradés fins (anti-banding) */
  .fb-split .fb-col{--m:42,88,148;--md:#1a3a64;
    min-width:0;display:flex;flex-direction:column;padding:22px;overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#f6f8fc 72%,#f1f4f9);border:1px solid #e4e8ef;
    box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(16,21,30,.42)}
  .fb-split .fb-col-ref{--m:178,56,46;--md:#7e271f;
    background:linear-gradient(180deg,#ffffff,#faf6f5 72%,#f5efee);border:1px solid #ece6e5;
    box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(16,21,30,.4)}
  /* en-tête de module : pastille icône en dégradé + titre, filet de séparation teinté */
  /* en-tête = BANDEAU cristal (signature charte Carlyto), teinté par module */
  .fb-split .fb-head{display:flex;align-items:center;gap:13px;margin:-22px -22px 18px;padding:14px 18px;
    background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--m)) 9%,#fff),color-mix(in srgb,rgb(var(--m)) 17%,#fff));
    border-bottom:1px solid color-mix(in srgb,rgb(var(--m)) 28%,#dfe6f0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 8px -4px rgba(var(--m),.28)}
  .fb-split .fb-head .fbico{width:42px;height:42px;flex:none;display:grid;place-items:center;color:#fff;
    background:linear-gradient(180deg,rgb(var(--m)),var(--md));
    box-shadow:0 7px 15px -5px rgba(var(--m),.6),inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.12)}
  .fb-split .fb-head .fbico svg{width:20px;height:20px}
  .fb-split .fb-head h2 .l1{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6a7488}
  .fb-split .fb-head h2 .l2{display:block;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:3px}
  .fb-split .finder{max-width:none}
  /* colonne référence : le champ se cale en bas pour aligner les deux CTA */
  .fb-col-ref .finder{margin-top:auto}
  /* note référence : honnête et neutre (ne révèle rien du référencement) */
  .fb-col-ref .rhint{display:flex;gap:9px;font-size:12.5px;color:#5d6470;font-weight:500;margin:14px 0 0;line-height:1.55;
    background:linear-gradient(180deg,#fbf7f6,#f7f1f0);border:1px solid #ecdfdd;border-left:3px solid rgb(var(--m));padding:11px 13px}
  .fb-col-ref .rhint::before{content:"";flex:none;width:15px;height:15px;margin-top:1px;
    background:rgb(var(--m));-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>") center/contain no-repeat;opacity:.85}
  /* angles droits sur les deux blocs finder : conteneur ET éléments internes */
  .finderbar,.finderbar *{border-radius:0 !important}
  @media(max-width:820px){
    .fb-split{grid-template-columns:1fr}
  }

  /* TRUST inline */
  .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .trust .it{position:relative;display:flex;gap:13px;align-items:center;background:linear-gradient(180deg,#fff,#f7f9fc);border:1px solid #e3e8f0;border-radius:16px;padding:18px 18px;box-shadow:0 2px 8px rgba(16,21,30,.06);overflow:hidden;border-radius:0}
  .trust .ic{width:46px;height:46px;border-radius:13px;background:var(--tc,var(--accent));color:#fff;display:grid;place-items:center;flex:none}
  .trust .ic svg{width:24px;height:24px}
  /* une couleur par atout (cohérent avec le bandeau promo) */
  .trust .it:nth-child(1){--tc:#16a35a}  /* Livraison — vert */
  .trust .it:nth-child(2){--tc:#f4a823}  /* Garantie — or */
  .trust .it:nth-child(3){--tc:#1f6feb}  /* Retours — bleu */
  .trust .it:nth-child(4){--tc:#fb923c}  /* Expédié aujourd'hui — orange (cohérent promo) */
  /* ===== Icônes Lucide (set moderne) : tailles par zone ===== */
  .hact svg{width:21px;height:21px}
  .hact .grg{width:auto;height:22px}
  /* « Mon garage » : store métallique qui se relève à l'ouverture */
  .hact .grg .grg-door{transform-box:fill-box;transform-origin:top;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease}
  .hact:hover .grg .grg-door{transform:scaleY(.07);opacity:.28}
  .hsearch button svg{width:20px;height:20px}
  .burger svg{width:18px;height:18px}
  .catnav .quick a{display:inline-flex;align-items:center;gap:6px}
  .catnav .quick a svg{width:17px;height:17px}
  .finder .field svg{width:17px;height:17px}
  .fbico svg{width:22px;height:22px}
  .cd-fam .i svg{width:23px;height:23px}
  .cd-sub .sh .i svg{width:27px;height:27px}
  .vstat .l .si svg{width:16px;height:16px}
  .vpop .carico svg{width:20px;height:20px}
  .vpop .ctpill svg{width:11px;height:11px}
  .nexa .ft .ic svg{width:16px;height:16px}
  .cd-fam .chev svg{width:14px;height:14px}
  .hcar-cta svg{width:13px;height:13px}
  .pcar-nav svg{width:18px;height:18px}
  .flash-head .bolt svg{width:22px;height:22px}
  .trust b{color:var(--ink);display:block;font-size:13px} .trust small{font-size:12.5px;color:var(--muted)}

  /* ===== FLASH SALES — refonte premium : dark net + accent rouge maîtrisé ===== */
  .flash{position:relative;overflow:hidden;padding:32px 30px 28px;border:1px solid #20262f;border-radius:0;
      background:linear-gradient(165deg,#1d222b 0%,#14171d 58%,#0e1014 100%)}
  /* liseré rouge en tête : signal d'urgence net */
  .flash::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
      background:linear-gradient(90deg,#ff5a52,#e5302a 42%,transparent 88%)}
  /* lueur rouge d'ambiance, discrète, coin haut-droit */
  .flash::after{content:"";position:absolute;top:-32%;right:-6%;width:360px;height:360px;border-radius:50%;z-index:0;
      background:radial-gradient(circle,rgba(229,48,42,.20),transparent 66%);pointer-events:none}

  .flash-head{position:relative;z-index:2;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:26px}

  /* identité : éclair carré arrondi + titre */
  .fh-id{display:flex;align-items:center;gap:15px}
  .fh-bolt{position:relative;width:50px;height:50px;flex:none;display:grid;place-items:center;color:#fff;border-radius:14px;
      background:linear-gradient(145deg,#ff5a52,#e5302a);
      box-shadow:0 10px 22px -7px rgba(229,48,42,.7),inset 0 1px 0 rgba(255,255,255,.32)}
  .fh-bolt svg{width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
  .fh-bolt::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid rgba(255,90,82,.55);opacity:0;animation:boltPulse 2.4s ease-out infinite}
  @keyframes boltPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
  .fh-txt h2{display:inline-flex;align-items:center;flex-wrap:wrap;gap:11px;font-size:33px;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .fh-txt h2 em{font-style:normal;color:#fff;background:linear-gradient(135deg,#ff5a52,#e5302a);padding:3px 12px 4px;border-radius:8px;
    text-shadow:none;box-shadow:0 7px 18px -6px rgba(229,48,42,.85)}
  .fh-txt p{margin:7px 0 0;font-size:13px;color:#94a0b2;font-weight:600;letter-spacing:.02em}

  /* badge remise : « ghost » rouge ajouré (arrondi, cohérent avec le titre) */
  .fh-disc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
      padding:9px 20px;border-radius:13px;color:#fff;
      background:rgba(229,48,42,.12);border:1.5px solid rgba(255,90,82,.55);
      box-shadow:inset 0 0 18px rgba(229,48,42,.18)}
  .fh-disc .d1{font-size:10px;font-weight:700;letter-spacing:.2em;color:#ff9b95}
  .fh-disc .d2{font-size:28px;font-weight:700;letter-spacing:-.01em;margin-top:4px;color:#ff6b62}

  /* compteur : chips sombres vitrés arrondis, secondes en rouge vivant */
  .fh-timer{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
  .fh-lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#ff9b95}
  .fh-lbl .dot{width:8px;height:8px;border-radius:50%;background:#ff5a52;box-shadow:0 0 10px #e5302a;animation:blink 1.1s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
  .fh-clock{display:flex;align-items:center;gap:9px}
  .fh-clock .cell{position:relative;min-width:82px;text-align:center;padding:15px 11px 11px;border-radius:15px;
      background:linear-gradient(180deg,#2a313d,#13171e);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 12px 24px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -12px 20px -14px rgba(0,0,0,.7)}
  /* accent rouge en tête de chaque cellule pour la mettre en évidence */
  .fh-clock .cell::before{content:"";position:absolute;top:0;left:24%;right:24%;height:2px;border-radius:0 0 2px 2px;
      background:linear-gradient(90deg,transparent,#ff5a52,transparent)}
  .fh-clock .cell .v{display:block;font-size:41px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.5)}
  .fh-clock .cell i{display:block;margin-top:8px;font-style:normal;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#8a93a1}
  .fh-clock .cell.live{border-color:rgba(229,48,42,.7);background:linear-gradient(180deg,rgba(229,48,42,.26),rgba(229,48,42,.07));animation:liveGlow 1.1s ease-in-out infinite}
  .fh-clock .cell.live .v{color:#ff7a72}
  @keyframes liveGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(229,48,42,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px 1px rgba(229,48,42,.75)}}
  /* CTA bas : pilule rouge premium, capitales fines */
  .flash .flash-all{position:relative;z-index:2;padding:13px 30px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700}

  .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;transition:.15s}
  .card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
  .card .thumb{position:relative;background:var(--surface);border-bottom:1px solid var(--line);height:128px;display:grid;place-items:center}
  .card .thumb .tag{position:absolute;top:9px;left:9px}
  .card .fav{position:absolute;top:9px;right:9px;width:27px;height:27px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:13px;cursor:pointer}
  .card .body{padding:14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
  .card .brand{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase}
  .card .name{color:var(--ink);font-weight:600;font-size:13px;line-height:1.35}
  .rate{display:flex;gap:5px;align-items:center;font-size:12.5px;color:var(--muted)} .rate .s{color:var(--amber)}
  .save{font-size:12px;color:var(--green);font-weight:600}
  .card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:4px}
  .price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
  .price .now{font-size:17px;font-weight:600;color:var(--red);line-height:1} .price .now.plain{color:var(--ink)} .price .old{font-size:12.5px;color:var(--muted);text-decoration:line-through}
  .card .add{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;border:none;cursor:pointer}
  .card .add:hover{box-shadow:inset 0 0 0 100px rgba(255,255,255,.20),0 0 9px rgba(255,255,255,.45),0 3px 9px rgba(16,21,30,.16)}

  /* HERO PRODUIT PRO — surface nette, filet d'accent à gauche */
  .phero{position:relative;border-radius:0;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);border-left:3px solid var(--accent)}
  .phero .pin{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .9fr;gap:24px;align-items:center;padding:32px 34px}
  .phero h3{font-size:24px;font-weight:700;letter-spacing:-.01em;max-width:340px}
  .phero p{font-size:13.5px;margin:8px 0 16px;max-width:330px}
  .phero .visual{position:relative;height:150px;display:grid;place-items:center}
  .phero .glow-part{width:118px;height:118px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}

  /* NEXADIAG PRO — charbon plein, sobre */
  .nexa{position:relative;border-radius:0;overflow:hidden;color:#fff;background:var(--char);border:1px solid #1d2533}
  .nexa .nin{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:34px}
  .nexa h2{color:#fff;font-size:24px} .nexa p{color:#bcc6d6;margin:10px 0 0;font-size:13.5px;max-width:400px}
  .nexa .feats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
  .nexa .ft{display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 11px}
  .nexa .ft .ic{width:30px;height:30px;border-radius:8px;background:rgba(31,111,235,.2);color:#7fb0ff;display:grid;place-items:center;flex:none}
  .nexa .ft b{color:#fff;font-size:13px}
  .nexa .phone{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);border:5px solid #0a0f17;padding:12px;color:var(--ink)}
  .nexa .phone .ph-h{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:8px}
  .nexa .phone .veh{background:var(--surface);border-radius:9px;padding:8px 10px;font-size:12.5px;font-weight:600;margin-bottom:8px}
  .nexa .phone .veh small{display:block;color:var(--muted);font-weight:500;font-size:12px}
  .nexa .phone .r{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
  .nexa .phone .r b{color:var(--ink)} .nexa .phone .scanbtn{margin-top:9px;background:var(--accent);color:#fff;text-align:center;border-radius:8px;padding:8px;font-size:12.5px;font-weight:600}

  /* BRANDS */
  .brandlist{display:flex;flex-wrap:wrap;gap:10px}
  .brandlist .b{display:flex;align-items:center;justify-content:center;min-width:124px;height:58px;
    background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 16px}
  .brandlist .b img{max-height:30px;max-width:92px;width:auto;height:auto;object-fit:contain;display:block}
  .brandlist .b.bt{font-weight:700;font-size:15px;color:#8a93a1;letter-spacing:.05em}

  /* FOOTER */
  footer{background:var(--char);color:#aeb9c9;margin-top:10px}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px;padding:42px 0 26px}
  footer h4{color:#fff;font-size:13.5px;margin:0 0 13px}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  footer ul a{font-size:13px;color:#aeb9c9} footer ul a:hover{color:#fff}
  .foot-logo .txt b{color:#fff} .foot-logo .txt span{color:#7f8b9c}
  .foot-pay{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;align-items:center}
  .foot-pay img{height:30px;width:auto;display:block;background:#fff;border-radius:6px;padding:6px 9px;box-shadow:0 1px 3px rgba(0,0,0,.25);box-sizing:border-box}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:15px 0;font-size:13px;color:#7f8b9c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

  /* ============ NAV CATÉGORIES (burger sous le logo) ============ */
  .catnav{background:linear-gradient(180deg,#1a2230,#141b27);border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px -14px rgba(0,0,0,.7);position:relative;z-index:35}
  .catnav .wrap{display:flex;align-items:center;gap:16px;height:54px}
  /* bouton burger : pilule bleue premium (relief + lift au survol) */
  .burger{position:relative;display:inline-flex;align-items:center;gap:10px;
    background:linear-gradient(180deg,#2b7bff,#0a66ff);color:#fff;border:none;font-family:inherit;
    font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
    padding:11px 17px;border-radius:11px;cursor:pointer;white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 7px 16px -5px rgba(10,102,255,.6);
    transition:transform .15s,box-shadow .15s,background .15s}
  .burger:hover{transform:translateY(-1px);background:linear-gradient(180deg,#3b86ff,#1466e6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 22px -6px rgba(10,102,255,.72)}
  .burger:active{transform:translateY(0)}
  /* liens rapides : pilules sombres + état au survol */
  .catnav .quick{flex:1;display:flex;align-items:center;gap:1px;overflow:visible;-ms-overflow-style:none;scrollbar-width:none}
  .catnav .quick::-webkit-scrollbar{display:none}
  .catnav .quick a{position:relative;color:#c3ccd9;font-weight:600;font-size:14.5px;padding:10px 15px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
  .catnav .quick a svg{opacity:.72;transition:opacity .15s}
  .catnav .quick a:hover{background:rgba(255,255,255,.08);color:#fff}
  .catnav .quick a:hover svg{opacity:1}
  .catnav .quick a.deal{color:#ff7a70;font-weight:600}
  .catnav .quick a.deal svg{color:#ff6b62;opacity:1}
  .catnav .quick a.deal:hover{background:rgba(229,48,42,.16);color:#ff9b93}
  /* Carnet entretien : chip « feature » bleu ciel, survol en bleu ciel translucide */
  .catnav .quick a.q-carnet{margin-left:auto;margin-right:0;color:#fff;font-weight:600;gap:9px;padding:9px 16px;
    background:linear-gradient(180deg,rgba(56,189,248,.32),rgba(56,189,248,.15));
    border:1px solid rgba(56,189,248,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 15px -8px rgba(56,189,248,.5)}
  .catnav .quick a.q-carnet svg{opacity:1;color:#7dd3fc;transition:color .15s;transform-origin:center;animation:qcarnetSync 3.2s ease-in-out infinite}
  /* synchro de l'icône : tour complet + léger pop, toutes les ~3,2s */
  @keyframes qcarnetSync{
    0%,66%{transform:rotate(0) scale(1)}
    84%{transform:rotate(360deg) scale(1.16)}
    92%{transform:rotate(360deg) scale(1)}
    100%{transform:rotate(360deg) scale(1)}}
  @media (prefers-reduced-motion:reduce){.catnav .quick a.q-carnet svg{animation:none}}
  .catnav .quick a.q-carnet:hover{color:#fff;border-color:rgba(125,211,252,.7);
    background:rgba(56,189,248,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -8px rgba(56,189,248,.4)}
  .catnav .quick a.q-carnet:hover svg{color:#bae6fd}
  /* Rappels entretiens : chip-bouton déroulant (orange) + panneau live */
  .pg-home .catnav .quick{overflow:visible}
  .qdd{position:relative;display:inline-flex;margin-left:12px;margin-right:60px}
  .qdd-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:inherit;font-weight:600;font-size:14.5px;
    color:#fff;white-space:nowrap;padding:9px 13px 9px 16px;border-radius:8px;
    background:linear-gradient(180deg,rgba(249,115,22,.34),rgba(249,115,22,.16));
    border:1px solid rgba(249,115,22,.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 15px -8px rgba(249,115,22,.5);
    transition:background .15s,border-color .15s}
  .qdd-btn svg{width:17px;height:17px}
  .qdd-btn .qdd-bell{color:#fdba74;transition:color .15s;transform-origin:50% 12%;animation:qddBellRing 2.8s ease-in-out infinite}
  /* cloche : sonnerie (balancement) visible, par intermittence */
  @keyframes qddBellRing{
    0%,55%,100%{transform:rotate(0)}
    59%{transform:rotate(17deg)}63%{transform:rotate(-14deg)}67%{transform:rotate(11deg)}
    71%{transform:rotate(-8deg)}75%{transform:rotate(5deg)}79%{transform:rotate(-2deg)}83%{transform:rotate(0)}}
  @media (prefers-reduced-motion:reduce){.qdd-btn .qdd-bell{animation:none}}
  .qdd-btn .qdd-caret{width:15px;height:15px;opacity:.85;transition:transform .2s}
  .qdd-btn:hover{background:rgba(249,115,22,.22);border-color:rgba(251,146,60,.72)}
  .qdd-btn:hover .qdd-bell{color:#fed7aa}
  .qdd.open .qdd-caret{transform:rotate(180deg)}
  .qdd-cnt{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
    color:#fff;font-size:11px;font-weight:700;letter-spacing:-.01em;
    background:linear-gradient(180deg,#ffb24d,#f97316 60%,#ea6a0c);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(150,60,0,.35)}
  /* panneau déroulant */
  .qdd-panel{position:absolute;top:calc(100% + 10px);right:0;width:322px;z-index:60;color:var(--ink);
    background:#fff;border:1px solid #e3e9f1;border-radius:12px;overflow:hidden;
    box-shadow:0 20px 46px -16px rgba(16,21,30,.42),0 4px 12px rgba(16,21,30,.12)}
  .qdd-panel[hidden]{display:none}
  .qdd-head{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;
    background:linear-gradient(180deg,#fff7ed,#ffedd5);border-bottom:1px solid #fbd9b0}
  .qdd-title{font-size:12.5px;font-weight:700;color:#9a3412;text-transform:uppercase;letter-spacing:.05em}
  .qdd-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:.05em}
  .qdd-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:qddPulse 1.6s infinite}
  @keyframes qddPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
  .qdd-sync{display:flex;align-items:center;gap:7px;padding:9px 15px;font-size:11.5px;color:var(--muted);
    border-bottom:1px solid var(--line);background:var(--surface)}
  .qdd-sync svg{width:13px;height:13px;color:var(--green)}
  .qdd-sync b{color:var(--ink);font-weight:600}
  .qdd-list{list-style:none;margin:0;padding:6px}
  .qdd-it{display:flex;align-items:center;gap:11px;padding:9px;border-radius:8px}
  .qdd-it+.qdd-it{margin-top:1px}
  .qdd-it:hover{background:var(--surface)}
  .qdd-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;
    background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
  .qdd-ic svg{width:17px;height:17px}
  .qdd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .qdd-info b{font-size:13px;font-weight:600;color:var(--ink)}
  .qdd-info small{font-size:11.5px;color:var(--muted)}
  /* état = pastille pulsée (couleur selon gravité, cadence selon urgence) */
  .qdd-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);animation:qddDotPulse 1.6s infinite}
  @keyframes qddDotPulse{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}
    70%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 0%,transparent)}}
  .qdd-it.urgent{--c:#e5302a}
  .qdd-it.soon{--c:#f97316}
  .qdd-it.watch{--c:#1f6feb}
  .qdd-it.urgent .qdd-dot{animation-duration:1.05s}
  .qdd-it.soon .qdd-dot{animation-duration:1.6s}
  .qdd-it.watch .qdd-dot{animation-duration:2.2s}
  .qdd-all{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;font-size:12.5px;font-weight:700;
    color:var(--accent);border-top:1px solid var(--line);background:var(--surface)}
  .qdd-all svg{width:14px;height:14px}
  .qdd-all:hover{background:var(--accent-50)}
  /* ===== Drawer latéral catalogue (style Autodoc) : rail familles + panneau sous-catégories ===== */
  .cat-backdrop{position:fixed;inset:0;background:rgba(11,15,22,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .28s;z-index:90}
  .cat-backdrop.open{opacity:1;visibility:visible}
  .catdrawer{position:fixed;top:0;left:0;height:100vh;height:100dvh;display:flex;background:#fff;
    border-radius:0 18px 18px 0;overflow:hidden;
    box-shadow:0 30px 80px rgba(8,12,20,.45),0 0 0 1px rgba(16,21,30,.05);
    transform:translateX(-100%);transition:transform .34s cubic-bezier(.33,1,.68,1);z-index:95;max-width:100vw}
  .catdrawer.open{transform:translateX(0)}
  /* code couleur par famille : --fc hérité par le rail ET le panneau (data-fam) */
  .catdrawer [data-fam="freinage"]{--fc:#e5302a}
  .catdrawer [data-fam="moteur"]{--fc:#1f6feb}
  .catdrawer [data-fam="filtration"]{--fc:#0ea5a5}
  .catdrawer [data-fam="suspension"]{--fc:#6366f1}
  .catdrawer [data-fam="embrayage"]{--fc:#d97706}
  .catdrawer [data-fam="electricite"]{--fc:#ca9a04}
  .catdrawer [data-fam="allumage"]{--fc:#f97316}
  .catdrawer [data-fam="refroidissement"]{--fc:#0ea5e9}
  .catdrawer [data-fam="echappement"]{--fc:#64748b}
  .catdrawer [data-fam="carrosserie"]{--fc:#8b5cf6}
  .catdrawer [data-fam="climatisation"]{--fc:#06b6d4}
  .catdrawer [data-fam="entretien"]{--fc:#16a35a}
  .catdrawer [data-fam="pneus"]{--fc:#334155}
  /* familles réelles du backend absentes de la maquette (menu unifié, js/drawer.js) */
  .catdrawer [data-fam="batterie"]{--fc:#eab308}
  .catdrawer [data-fam="eclairage"]{--fc:#f59e0b}
  .catdrawer [data-fam="essuie-glaces"]{--fc:#38bdf8}
  .catdrawer [data-fam="fluides"]{--fc:#16a35a}
  .catdrawer [data-fam="outillage"]{--fc:#78716c}
  .catdrawer [data-fam="pneumatiques"]{--fc:#334155}
  .catdrawer [data-fam="divers"]{--fc:#94a3b8}
  /* rail gauche : liste des familles */
  .cd-rail{width:312px;flex:none;display:flex;flex-direction:column;background:linear-gradient(180deg,#fbfcfe,#f4f7fb);border-right:1px solid var(--line);height:100%}
  .cd-head{display:flex;align-items:center;justify-content:space-between;gap:9px;
    background:linear-gradient(180deg,#1c2433,#10151e);color:#fff;padding:17px 16px;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;flex:none;
    box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
  .cd-head span{display:inline-flex;align-items:center;gap:10px}
  .cd-head span::before{content:"";width:5px;height:18px;border-radius:3px;background:linear-gradient(180deg,#3b86ff,#0a66ff)}
  .cd-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:8px;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .2s}
  .cd-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
  .cd-fams{overflow-y:auto;padding:9px;flex:1}
  .cd-fams::-webkit-scrollbar{width:8px}
  .cd-fams::-webkit-scrollbar-thumb{background:#d6dde6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
  .cd-fams::-webkit-scrollbar-thumb:hover{background:#c2cad6;background-clip:padding-box}
  .cd-fam{position:relative;width:100%;display:flex;align-items:center;gap:12px;background:transparent;border:none;font-family:inherit;cursor:pointer;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:600;font-size:13.5px;text-align:left;transition:background .15s,box-shadow .15s,color .15s}
  .cd-fam::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:22px;border-radius:3px;background:var(--fc);transition:transform .18s}
  .cd-fam .i{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--fc) 16%,#fff);color:var(--fc);display:grid;place-items:center;flex:none;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 20%,transparent);transition:transform .16s,background .16s,box-shadow .16s}
  .cd-fam .nm{flex:1}
  .cd-fam .chev{color:var(--muted);flex:none;transition:transform .16s,color .16s}
  .cd-fam:hover{background:#fff;box-shadow:0 3px 10px rgba(16,21,30,.06)}
  .cd-fam:hover .i{transform:scale(1.06)}
  .cd-fam:hover .chev{transform:translateX(2px);color:var(--fc)}
  .cd-fam.active{background:color-mix(in srgb,var(--fc) 10%,#fff)}
  .cd-fam.active::before{transform:translateY(-50%) scaleY(1)}
  .cd-fam.active .i{background:var(--fc);color:#fff;box-shadow:0 5px 11px -2px color-mix(in srgb,var(--fc) 60%,transparent)}
  .cd-fam.active .chev{color:var(--fc)}
  /* panneau droit : sous-catégories de la famille active */
  .cd-panel{position:relative;width:560px;flex:none;background:var(--surface);overflow-y:auto;height:100%;padding:24px 26px}
  .cd-panel::-webkit-scrollbar{width:9px}
  .cd-panel::-webkit-scrollbar-thumb{background:#d6dde6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
  .cd-panel::-webkit-scrollbar-thumb:hover{background:#c2cad6;background-clip:padding-box}
  .cd-sub{display:none}
  .cd-sub.active{display:block;animation:cdFade .22s ease}
  @keyframes cdFade{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
  .cd-sub .sh{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .cd-sub .sh .i{width:44px;height:44px;border-radius:11px;background:linear-gradient(140deg,color-mix(in srgb,var(--fc) 78%,#fff),var(--fc));color:#fff;display:grid;place-items:center;flex:none;
    box-shadow:0 7px 15px -3px color-mix(in srgb,var(--fc) 55%,transparent)}
  /* 3ᵉ niveau : groupes en cartes survolables */
  .cd-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
  .cd-group{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 15px;transition:transform .16s,box-shadow .16s,border-color .16s}
  .cd-group:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fc) 38%,var(--line));box-shadow:0 12px 24px -12px rgba(16,21,30,.25)}
  .cd-group .gh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;margin-bottom:9px;cursor:pointer}
  .cd-group .gh::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--fc);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--fc) 16%,transparent)}
  .cd-group .gh:hover{color:var(--fc)}
  .cd-glinks a{display:flex;align-items:center;font-size:12.5px;color:var(--text);padding:5px 9px;border-radius:8px;transition:background .14s,color .14s,padding .14s}
  .cd-glinks a:hover{background:color-mix(in srgb,var(--fc) 10%,#fff);color:var(--fc);padding-left:13px}
  /* compteur de pièces réel à droite du libellé */
  .cd-glinks a .cd-n{margin-left:auto;padding-left:10px;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
  .cd-glinks a:hover .cd-n{color:var(--fc)}
  /* « Voir tout : <Famille> » en pied de panneau */
  .cd-more{margin-top:16px}
  .cd-more .cd-all{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;transition:border-color .16s,color .16s,background .16s}
  .cd-more .cd-all .cd-n{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
  .cd-more .cd-all .cd-n::before{content:"· "}
  .cd-more .cd-all:hover{color:var(--fc);border-color:color-mix(in srgb,var(--fc) 40%,var(--line));background:color-mix(in srgb,var(--fc) 6%,#fff)}
  .cd-more .cd-empty{font-size:12.5px;color:var(--muted)}
  /* gamme pas encore ouverte : visible mais non cliquable */
  .cd-fam.soon{cursor:default;opacity:.62}
  .cd-fam.soon:hover{background:transparent;box-shadow:none}
  .cd-fam.soon:hover .i{transform:none}
  .cd-soon{flex:none;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);background:#eef1f6;border:1px solid var(--line);border-radius:6px;padding:2px 6px}
  .cd-mback{display:none}
  /* mobile : navigation à 2 niveaux (familles → sous-catégories qui glissent) */
  @media(max-width:860px){
    .catdrawer{width:min(92vw,380px);border-radius:0 16px 16px 0}
    .cd-rail{width:100%}
    .cd-panel{position:absolute;top:0;left:0;width:100%;height:100%;transform:translateX(100%);transition:transform .3s cubic-bezier(.33,1,.68,1);box-shadow:var(--shadow-lg)}
    .catdrawer.level2 .cd-panel{transform:translateX(0)}
    .cd-mback{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);font-family:inherit;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;margin-bottom:14px;padding:8px 12px;border-radius:9px}
    .cd-groups{grid-template-columns:1fr}
  }

  /* ============ CARROUSELS PRODUITS (images plus grandes) ============ */
  .pcar-wrap{position:relative}
  .pcar{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 2px 12px;-ms-overflow-style:none;scrollbar-width:none}
  .pcar::-webkit-scrollbar{display:none}
  .pcar .card{flex:0 0 234px;scroll-snap-align:start}
  .pcar .card .thumb{height:196px}
  .pcar .card .thumb svg{width:96px;height:96px}
  .pcar-nav{position:absolute;top:90px;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);display:grid;place-items:center;cursor:pointer;z-index:4;color:var(--ink)}
  .pcar-nav:hover{color:#0a66ff;border-color:#0a66ff}
  .pcar-nav.prev{left:-15px}.pcar-nav.next{right:-15px}

  /* ============ RESPONSIVE ============ */
  @media(max-width:1080px){
    .shell{grid-template-columns:minmax(0,1fr) 300px}
  }
  @media(max-width:900px){
    .shell{grid-template-columns:1fr}
    aside.right{position:static;order:-1}
    .hsearch{display:none}
    .prods{grid-template-columns:1fr 1fr}
    .catnav .quick{display:none}
    .phero .pin,.nexa .nin{grid-template-columns:1fr} .phero .visual,.nexa .phone{display:none}
    .hero h1{font-size:30px} .foot-grid{grid-template-columns:1fr 1fr} .trust{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){.prods{grid-template-columns:1fr 1fr} .trust{grid-template-columns:1fr} .hstats{gap:16px}}

  /* ============================================================
     ★★★  COUCHE HD — finition premium "waouh"  ★★★
     (overrides en fin de feuille : profondeur, lumière, micro-interactions)
     ============================================================ */
  html{scroll-behavior:smooth}
  body{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
  ::selection{background:rgba(31,111,235,.22)}

  /* — Boutons : dégradé glossy, halo coloré, élévation au survol — */
  .btn{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .2s,filter .2s;position:relative}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn-accent{background:linear-gradient(135deg,#3a86ff,#175cc9);box-shadow:0 7px 18px rgba(31,111,235,.38),inset 0 1px 0 rgba(255,255,255,.28)}
  .btn-accent:hover{background:linear-gradient(135deg,#4a90ff,#1a63d6);transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,111,235,.48),inset 0 1px 0 rgba(255,255,255,.32)}
  .btn-red{background:linear-gradient(135deg,#ff5249,#d4221c);box-shadow:0 7px 18px rgba(229,48,42,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  .btn-red:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 12px 26px rgba(229,48,42,.5)}
  .btn-dark{background:linear-gradient(135deg,#28384c,#10151e);box-shadow:0 7px 18px rgba(16,21,30,.32),inset 0 1px 0 rgba(255,255,255,.08)}
  .btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,21,30,.42)}
  .btn-soft:hover{transform:translateY(-2px)}
  .btn-out:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,111,235,.16)}

  /* — Header : fond dégradé, recherche qui s'illumine, logo qui pulse — */
  header{background:linear-gradient(180deg,#121826,#0b1018);box-shadow:0 2px 14px rgba(0,0,0,.28)}
  .hsearch{transition:box-shadow .22s,transform .22s}
  .hsearch:focus-within{box-shadow:0 0 0 3px rgba(58,134,255,.4),0 8px 22px rgba(0,0,0,.3)}
  .hsearch button{transition:filter .2s} .hsearch button:hover{filter:brightness(1.12)}
  .logo .mark{transition:transform .25s,box-shadow .25s}
  .logo:hover .mark{transform:rotate(-6deg) scale(1.06)}

  /* — Hero : angles droits (comme à l'origine), ombre discrète, voile lumineux léger — */
  .hero{border-radius:0;box-shadow:var(--shadow-md)}
  .hcar-cta:hover{box-shadow:0 12px 28px rgba(229,48,42,.55)}

  /* — Bloc recherche : ombre XXL, halo bleu quand on saisit — */
  .finderbar{border-radius:0;box-shadow:0 24px 54px -16px rgba(16,21,30,.22),0 2px 6px rgba(16,21,30,.06),inset 0 1px 0 #fff;transition:box-shadow .25s}
  .finderbar:focus-within{box-shadow:0 30px 64px -18px rgba(16,21,30,.28),0 2px 6px rgba(16,21,30,.06),inset 0 1px 0 #fff}

  /* — Confiance : icône colorée par atout (cf. --tc en base) ; fond de tuile uniforme — */

  /* — Cartes produit : angles droits (comme à l'origine), élévation discrète + zoom de la pièce — */
  .card{border-radius:0;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d6e0ef}
  .card .thumb{background:radial-gradient(circle at 50% 36%,#ffffff,#eaeff6 80%);overflow:hidden}
  .card .thumb svg{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
  .card:hover .thumb svg{transform:scale(1.14) rotate(-4deg)}
  .card .thumb .tag{box-shadow:0 4px 10px rgba(0,0,0,.14)}
  .card .add{transition:box-shadow .22s ease;box-shadow:0 3px 9px rgba(16,21,30,.16)}
  .card .fav{transition:transform .2s,background .2s,color .2s,border-color .2s}
  .card .fav:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.12)}

  /* — Carrousels : flèches plus vivantes — */
  .pcar-nav{transition:transform .2s,box-shadow .2s,color .2s,border-color .2s}
  .pcar-nav:hover{transform:scale(1.12);box-shadow:0 12px 26px rgba(16,21,30,.22)}

  /* — Ventes Flash : bandeau sombre qui décolle de la page (angles droits) — */
  .flash{border-radius:0;box-shadow:0 22px 50px -22px rgba(229,48,42,.4),0 14px 34px -18px rgba(16,21,30,.55)}
  .fh-bolt{transition:transform .25s}
  .flash:hover .fh-bolt{transform:rotate(-6deg) scale(1.07)}
  .fh-disc{animation:hdSlab 2.8s ease-in-out infinite}
  @keyframes hdSlab{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

  /* ★ Rupture de stock fournisseur (occasionnelle) : étiquette « tampon magasin » */
  .card.oos .thumb{filter:saturate(.7)}
  .card.oos .thumb svg{opacity:.5}
  .card.oos .thumb::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(247,249,252,.32)}
  .card .oos-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:3;
    display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center;white-space:nowrap;
    padding:7px 15px;border-radius:7px;color:#d2382e;background:rgba(255,255,255,.62);
    border:2px solid #d2382e;outline:1.5px solid #d2382e;outline-offset:3px;
    box-shadow:0 4px 12px rgba(16,21,30,.18);font-family:"Space Grotesk","Inter",sans-serif}
  .card .oos-badge b{font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .card .oos-badge span{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    margin-top:4px;padding-top:4px;border-top:1.5px solid rgba(210,56,46,.5)}
  .card.oos:hover{transform:none;box-shadow:none}
  .card.oos:hover .thumb svg{transform:none}
  .card.oos .add{background:#c6cdd6;color:#fff;cursor:not-allowed;pointer-events:none;box-shadow:none}
  .card.oos .price .now{color:var(--muted)}

  /* ============ ATELIER CARLYTO — carrousel vidéo (tutos & stories) ============ */
  .videos .vid-sub{margin:-6px 0 16px;color:var(--text);font-size:14px}
  .videos .pcar .vid-card{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
    display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
    transition:transform .25s,box-shadow .25s,border-color .25s}
  .videos .vid-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d6e0ef}
  .vthumb{position:relative;height:170px;display:grid;place-items:center;overflow:hidden}
  .vthumb .wm{position:absolute;color:#fff;opacity:.16;pointer-events:none;display:grid;place-items:center}
  .vthumb .wm svg{width:118px;height:118px}
  .vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.32))}
  .vplay{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.92);color:#10151e;display:grid;place-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.32);transition:transform .2s,background .2s}
  .vthumb:hover .vplay{transform:scale(1.12);background:#fff}
  .vplay svg{width:22px;height:22px;margin-left:3px;fill:currentColor;stroke:currentColor}
  .vcat{position:absolute;top:10px;left:10px;z-index:3;background:rgba(15,22,34,.62);color:#fff;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:999px}
  .vcat.story{background:rgba(229,48,42,.9)}
  .vdur{position:absolute;bottom:10px;right:10px;z-index:3;background:rgba(0,0,0,.72);color:#fff;
    font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:6px}
  .vbody{padding:12px 13px;display:flex;flex-direction:column;gap:8px}
  .vbody h3{font-size:14px;font-weight:600;line-height:1.32;color:var(--ink)}
  .vmeta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
  .vmeta svg{width:13px;height:13px}
  .videos .pcar-nav{top:88px}

  /* — Hero produit & NexaDiag : arrondis, profondeur, téléphone flottant — */
  .phero{border-radius:20px;box-shadow:0 12px 32px rgba(16,21,30,.1)}
  .nexa{border-radius:20px;box-shadow:0 24px 56px rgba(11,17,28,.34)}
  .nexa .phone{animation:hdFloat 4.5s ease-in-out infinite;transition:transform .3s}
  @keyframes hdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .nexa .ft{transition:transform .2s,background .2s,border-color .2s}
  .nexa .ft:hover{transform:translateY(-2px);background:rgba(127,176,255,.14);border-color:rgba(127,176,255,.35)}

  /* — Véhicule connecté & encarts : arrondis + élévation — */
  .vpop{border-radius:20px}
  .vmini{border-radius:14px;transition:transform .22s,box-shadow .22s} .vmini:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

  /* ★ Rappels d'entretien : mini-hero avec messages animés en boucle */
  .vmini.reminders .rem-count{margin-left:auto;background:linear-gradient(160deg,#ffb24d,#f4722b 55%,#e85a3a);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;line-height:1.5;
    box-shadow:0 2px 7px rgba(232,90,58,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(120,40,0,.25);text-shadow:0 1px 1px rgba(120,40,0,.3)}
  .vmini.reminders .rem-stage{position:relative;height:48px;margin-top:10px;overflow:hidden}
  .vmini.reminders .rem-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;
    opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none}
  .vmini.reminders .rem-item.active{opacity:1;transform:none}
  .vmini.reminders .rem-item .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
  .vmini.reminders .rem-item .ic svg{width:17px;height:17px}
  .vmini.reminders .rem-item .ic.warn{background:var(--amber-50);color:#b9791a}
  .vmini.reminders .rem-item .ic.bl{background:var(--accent-50);color:var(--accent)}
  .vmini.reminders .rem-item .ic.ok{background:var(--green-50);color:var(--green)}
  .vmini.reminders .rem-item .rt{flex:1;min-width:0}
  .vmini.reminders .rem-item .rt b{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vmini.reminders .rem-item .rt small{display:block;font-size:11.5px;color:var(--muted)}
  .vmini.reminders .rem-tag{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px}
  .vmini.reminders .rem-tag.warn{background:var(--amber-50);color:#b9791a}
  .vmini.reminders .rem-tag.bl{background:var(--accent-50);color:var(--accent)}
  .vmini.reminders .rem-tag.ok{background:var(--green-50);color:var(--green)}
  .vmini.reminders .rem-dots{display:flex;gap:5px;margin:10px 0 2px}
  .vmini.reminders .rem-dots i{width:6px;height:6px;border-radius:99px;background:#d6dde6;transition:.3s}
  .vmini.reminders .rem-dots i.active{background:var(--accent);width:16px;border-radius:4px}
  /* — touche HD — */
  .vmini.reminders{position:relative;overflow:hidden;background:linear-gradient(162deg,#e6f0fc,#cfe1f8);box-shadow:0 8px 24px rgba(16,21,30,.08)}
  .vmini.reminders .t > span:first-child{display:inline-block;transform-origin:50% 10%;animation:bellRing 3.2s ease-in-out infinite}
  @keyframes bellRing{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(13deg)}92%{transform:rotate(-10deg)}95%{transform:rotate(6deg)}98%{transform:rotate(-3deg)}}
  .vmini.reminders .rem-count{box-shadow:0 3px 9px rgba(232,90,58,.5),inset 0 1px 0 rgba(255,255,255,.35)}
  /* écran interne : petit "tableau de bord" */
  .vmini.reminders .rem-stage{height:54px;padding:0;background:linear-gradient(180deg,#fbfcfe,#f3f6fb);border:1px solid #e8edf4;border-radius:0;box-shadow:inset 0 1px 3px rgba(16,21,30,.05)}
  .vmini.reminders .rem-item{padding:0 12px}
  /* icônes en dégradé + relief */
  .vmini.reminders .rem-item .ic{box-shadow:0 4px 11px rgba(16,21,30,.13);color:#fff}
  .vmini.reminders .rem-item .ic.warn{background:linear-gradient(140deg,#ffc457,#ec9a16)}
  .vmini.reminders .rem-item .ic.bl{background:linear-gradient(140deg,#5b9dff,#1f6feb)}
  .vmini.reminders .rem-item .ic.ok{background:linear-gradient(140deg,#4bd089,#15a154)}
  .vmini.reminders .rem-dots i.active{box-shadow:0 0 6px rgba(31,111,235,.55)}

  /* — HD+ : lumière, profondeur, contour soigné — */
  .vmini.reminders{border:none;border-radius:0;
    box-shadow:0 16px 38px rgba(31,111,235,.13),0 3px 8px rgba(16,21,30,.06),inset 0 1px 0 rgba(255,255,255,.85)}
  /* titre en capitales, style « FICHE TECHNIQUE », bien visible sur le fond bleu */
  .vmini.reminders .t{text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;font-weight:700;color:#23477e}
  /* pastille compteur : identique à celle du panier, en bleu */
  .vmini.reminders .rem-count{margin-left:auto;background:linear-gradient(160deg,#ffb24d,#f4722b 55%,#e85a3a);color:#fff;font-size:12.5px;font-weight:600;
    border-radius:999px;padding:1px 7px;line-height:1.5;text-shadow:0 1px 1px rgba(120,40,0,.3);
    box-shadow:0 2px 7px rgba(232,90,58,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(120,40,0,.25)}
  .vmini.reminders::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.75),transparent 42%)}
  .vmini.reminders > *{position:relative;z-index:1}
  /* écran interne plus contrasté + barre de progression en haut */
  .vmini.reminders .rem-stage{box-shadow:inset 0 1px 4px rgba(16,21,30,.07),inset 0 0 0 1px rgba(255,255,255,.6)}
  /* halo coloré derrière l'icône du rappel affiché */
  .vmini.reminders .rem-item.active .ic.warn{box-shadow:0 4px 11px rgba(16,21,30,.13),0 0 16px rgba(240,154,22,.55)}
  .vmini.reminders .rem-item.active .ic.bl{box-shadow:0 4px 11px rgba(16,21,30,.13),0 0 16px rgba(31,111,235,.5)}
  .vmini.reminders .rem-item.active .ic.ok{box-shadow:0 4px 11px rgba(16,21,30,.13),0 0 16px rgba(22,163,90,.5)}
  /* texte plus net */
  .vmini.reminders .rem-item .rt b{letter-spacing:-.01em}
  .vmini.reminders .rem-tag{box-shadow:inset 0 0 0 1px rgba(16,21,30,.04)}

  /* ===== HD++ v2 : rappels d'entretien plus visibles (code couleur conservé) ===== */
  /* carte mieux détachée du fond blanc + halo bleu + liseré tricolore en tête */
  .vmini.reminders{border-radius:0;padding-top:15px;zoom:.85;
    border:none;
    background:linear-gradient(165deg,#eaf0f7,#d7e1ee 55%,#c3d0e2);
    box-shadow:0 18px 42px rgba(54,86,130,.18),0 4px 12px rgba(16,21,30,.10),inset 0 1px 0 rgba(255,255,255,.9)}
  /* en-tête : bandeau supérieur BLANC pleine largeur + filet bleu dégradé dessous */
  .vmini.reminders .t{font-size:17px;gap:9px;background:#fff;
    margin:-15px -15px 0;padding:13px 15px 11px;
    border-bottom:1px solid;border-image:linear-gradient(90deg,transparent,rgba(35,71,126,.42) 50%,transparent) 1}
  /* — finition premium du bandeau : fond blanc + filet centré qui s'estompe aux bords — */
  .vmini.reminders .t{background:#fff;
    box-shadow:0 2px 4px -2px rgba(35,71,126,.10);position:relative}
  /* cloche dans une pastille bleue ronde (icône de notification) */
  .vmini.reminders .t > span:first-child{display:inline-grid;place-items:center;flex:none;
    width:27px;height:27px;border-radius:50%;font-size:14px;line-height:1;
    background:radial-gradient(circle at 50% 32%,#eef5ff,#d6e6fb);
    box-shadow:inset 0 0 0 1px rgba(35,71,126,.15),0 1px 2px rgba(35,71,126,.16)}
  /* titre « Rappels d'entretien » centré ; cloche à gauche + badge compteur à droite (hors flux) */
  .vmini.reminders .t{justify-content:center;text-align:center}
  .vmini.reminders .t > span:first-child{position:absolute;left:15px;top:0;bottom:0;margin:auto 0}
  .vmini.reminders .rem-count{position:absolute;right:15px;top:50%;transform:translateY(-50%);margin-left:0}
  .vmini.reminders .t > span:first-child{font-size:19px}
  /* écran interne plus grand + barre de progression animée (rythme du défilement) */
  .vmini.reminders .rem-stage{height:64px;border-radius:12px;
    background:linear-gradient(180deg,#ffffff,#eef3fb);
    box-shadow:inset 0 1px 5px rgba(16,21,30,.09),inset 0 0 0 1px rgba(255,255,255,.7)}
  /* item actif : liseré gauche coloré selon le statut (vert/bleu/ambre) + icône agrandie */
  .vmini.reminders .rem-item{padding-left:15px}
  .vmini.reminders .rem-item::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:4px;
    border-radius:3px;opacity:0;transition:opacity .45s}
  .vmini.reminders .rem-item.active::before{opacity:1}
  .vmini.reminders .rem-item:has(.ic.warn)::before{background:linear-gradient(180deg,#ffc457,#ec9a16)}
  .vmini.reminders .rem-item:has(.ic.bl)::before{background:linear-gradient(180deg,#5b9dff,#1f6feb)}
  .vmini.reminders .rem-item:has(.ic.ok)::before{background:linear-gradient(180deg,#4bd089,#15a154)}
  .vmini.reminders .rem-item .ic{width:37px;height:37px;border-radius:10px}
  .vmini.reminders .rem-item .ic svg{width:18px;height:18px}
  .vmini.reminders .rem-item .rt b{font-size:13.5px}
  .vmini.reminders .rem-item .rt small{font-size:12px}
  /* — bouton « Voir tous les rappels » : surbrillance blanche douce au survol (sans animation) — */
  .vmini.reminders > a[href]{display:flex;width:fit-content;align-items:center;justify-content:center;
    margin:12px auto 0;padding:8px 20px;border-radius:999px;text-decoration:none;
    background:linear-gradient(180deg,#727a8a,#515867);background-size:100% 100%;
    border:1px solid transparent;color:#fff;
    box-shadow:0 2px 6px -2px rgba(16,21,30,.35);
    transition:box-shadow .25s ease}
  .vmini.reminders > a[href] span{font-size:13.5px;font-weight:600;letter-spacing:.02em}
  .vmini.reminders > a[href]:hover,.vmini.reminders > a[href]:focus-visible{
    box-shadow:inset 0 0 0 100px rgba(255,255,255,.14),0 0 16px rgba(255,255,255,.32),0 2px 6px -2px rgba(16,21,30,.3)}

  /* — badges de statut redessinés : pastille + contour teinté sur base claire (code couleur conservé) — */
  .vmini.reminders .rem-tag{display:inline-flex;align-items:center;gap:5px;
    font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:4px 10px 4px 8px;border-radius:999px;
    box-shadow:0 1px 3px rgba(16,21,30,.10),inset 0 0 0 1px color-mix(in srgb,currentColor 42%,transparent)}
  .vmini.reminders .rem-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
  .vmini.reminders .rem-tag.warn{color:#b9791a;background:#fff8ec}
  .vmini.reminders .rem-tag.bl{color:var(--accent);background:#eef5ff}
  .vmini.reminders .rem-tag.ok{color:var(--green);background:#eefbf3}

  /* compteur : strictement la pastille du panier (taille réelle compensée du zoom .85), en bleu */
  .vmini.reminders .rem-count{background:linear-gradient(160deg,#ffb24d,#f4722b 55%,#e85a3a);color:#fff;font-size:15px;font-weight:600;
    border-radius:999px;padding:1px 8px;line-height:1.5;text-shadow:0 1px 1px rgba(120,40,0,.3);
    box-shadow:0 2px 7px rgba(232,90,58,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(120,40,0,.25)}
  /* la pastille du badge actif respire doucement */
  .vmini.reminders .rem-item.active .rem-tag::before{animation:remDotPulse 1.8s ease-in-out infinite}
  @keyframes remDotPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
    50%{box-shadow:0 0 0 5px color-mix(in srgb,currentColor 8%,transparent)}}

  /* — pastilles d'icônes redessinées : rondes, fond clair teinté, icône colorée (fini les carrés pleins) — */
  .vmini.reminders .rem-item .ic{width:38px;height:38px;border-radius:50%;background:#fff;
    box-shadow:0 2px 7px rgba(16,21,30,.12),inset 0 0 0 1px color-mix(in srgb,currentColor 38%,transparent)}
  .vmini.reminders .rem-item .ic svg{width:18px;height:18px;stroke-width:2.1}
  .vmini.reminders .rem-item .ic.warn{color:#c9810f;background:#fff7e9}
  .vmini.reminders .rem-item .ic.bl{color:var(--accent);background:#edf4ff}
  .vmini.reminders .rem-item .ic.ok{color:var(--green);background:#ecfaf2}
  /* halo doux quand le rappel est affiché (remplace l'ancien gros glow) */
  .vmini.reminders .rem-item.active .ic.warn,
  .vmini.reminders .rem-item.active .ic.bl,
  .vmini.reminders .rem-item.active .ic.ok{
    box-shadow:0 2px 8px rgba(16,21,30,.13),inset 0 0 0 1px color-mix(in srgb,currentColor 52%,transparent),
      0 0 0 4px color-mix(in srgb,currentColor 14%,transparent)}

  /* ===== Grille de postes d'entretien : tuiles « boutons » non cliquables + pastille de niveau ===== */
  /* niveau porté par la tuile : vert = à jour · orange = à surveiller · rouge = à refaire */
  .vmini.reminders .rem-btn.ok{--st:var(--green)}
  .vmini.reminders .rem-btn.warn{--st:#e08a12}
  .vmini.reminders .rem-btn.due{--st:var(--red)}
  .vmini.reminders .rem-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;
    position:relative;padding:10px;border-radius:12px;
    background:linear-gradient(180deg,#d4dded,#c2cedf);
    box-shadow:inset 0 2px 7px rgba(16,21,30,.17),inset 0 0 0 1px rgba(255,255,255,.45),0 1px 0 rgba(255,255,255,.55)}
  /* fines lignes de balayage (effet afficheur / ordinateur de bord) */
  .vmini.reminders .rem-grid::before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(0deg,rgba(35,71,126,.05) 0 1px,transparent 1px 3px);opacity:.55}
  .vmini.reminders .rem-btn{z-index:1}
  .vmini.reminders .rem-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
    text-align:center;padding:14px 8px 12px;border-radius:13px;cursor:default;
    background:linear-gradient(180deg,#ffffff,#eff4fb);
    border:1px solid color-mix(in srgb,var(--st) 22%,#dce3ed);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(16,21,30,.10)}
  /* ★ pastille « popup » de statut, SANS chiffre (juste la couleur du niveau) */
  /* pastilles : point lumineux (style flash), animation selon l'urgence du statut */
  .vmini.reminders .rem-bdot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;
    background:var(--st);box-shadow:0 0 10px color-mix(in srgb,var(--st) 80%,transparent)}
  /* vert = tout va bien → stable (aucune animation) */
  /* orange = encore de la marge → pulse très lent */
  .vmini.reminders .rem-btn.warn .rem-bdot{animation:blink 3s ease-in-out infinite}
  /* rouge = urgent → clignotement vif (inchangé) */
  .vmini.reminders .rem-btn.due .rem-bdot{animation:blink 1.1s ease-in-out infinite}
  /* icône du poste : pastille ronde teintée + icône colorée */
  .vmini.reminders .rem-bic{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:var(--st);
    background:linear-gradient(180deg,color-mix(in srgb,var(--st) 17%,#fff),color-mix(in srgb,var(--st) 7%,#fff));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--st) 28%,transparent),0 1px 2px rgba(16,21,30,.08)}
  .vmini.reminders .rem-bic svg{width:19px;height:19px;stroke-width:2}
  .vmini.reminders .rem-bl{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2;letter-spacing:.005em}

  /* ===== Finition HD : netteté + anti-banding + bezel retina (AUCUNE animation) ===== */
  /* lissage du texte et des icônes */
  .vmini.reminders,.vmini.reminders .rem-bl,.vmini.reminders .t{
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  .vmini.reminders svg,.vmini.reminders i[data-lucide]{shape-rendering:geometricPrecision}
  /* fond de carte : dégradé fin (sans bandes) + ombre de contact nette + liseré interne retina */
  .vmini.reminders{background:linear-gradient(165deg,#eaf3fe,#d8e8fc 34%,#c4dbf8 66%,#aecdf4);
    box-shadow:0 18px 42px rgba(31,90,170,.22),0 6px 16px rgba(16,21,30,.10),0 1px 2px rgba(16,21,30,.12),
      inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4)}
  /* écran encastré + touches : dégradés plus fins */
  .vmini.reminders .rem-grid{background:linear-gradient(180deg,#d6dfee,#ccd7e7 50%,#c2cedf)}
  .vmini.reminders .rem-btn{background:linear-gradient(180deg,#ffffff,#f6f9fd 55%,#eef3fa)}

  @media (prefers-reduced-motion:reduce){
    .vmini.reminders .rem-bdot{animation:none}
    .vmini.reminders .rem-btn{transition:none}
    .vmini.reminders .rem-item.active .rem-tag::before{animation:none}
    .vmini.reminders .rem-item{transition:none}
    .vmini.reminders .t > span:first-child{animation:none}
    .vmini.reminders > a[href],.vmini.reminders > a[href] span,.vmini.reminders > a[href]::before,.vmini.reminders > a[href]::after{transition:none}
    .vmini.reminders > a[href]:hover{transform:none}
  }

  /* ★ MÉTÉO & SAISON — conseils saisonniers en messages animés (remplace « Mon Garage ») */
  .vmini.weather{position:relative;overflow:hidden;border:1.5px solid #bcd4f5;border-radius:0;
    background:linear-gradient(165deg,#fbfcfd,#f5f6f8);
    box-shadow:0 14px 34px rgba(31,111,235,.12),0 3px 8px rgba(16,21,30,.05),inset 0 1px 0 rgba(255,255,255,.85)}
  .vmini.weather .t{text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:700;color:#1f3f6e}
  .vmini.weather .wx-stage{position:relative;height:48px;margin-top:10px;overflow:hidden;
    background:linear-gradient(180deg,#fbfcfe,#f3f6fb);border:1px solid #e8edf4;border-radius:0;box-shadow:inset 0 1px 4px rgba(16,21,30,.06)}
  .vmini.weather .wx-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px;
    opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none}
  .vmini.weather .wx-item.active{opacity:1;transform:none}
  .vmini.weather .wx-i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;
    box-shadow:0 4px 11px rgba(16,21,30,.13)}
  .vmini.weather .wx-i svg{width:17px;height:17px}
  .vmini.weather .wx-i.blue{background:linear-gradient(140deg,#5b9dff,#1f6feb)}
  .vmini.weather .wx-i.amber{background:linear-gradient(140deg,#ffc457,#ec9a16)}
  .vmini.weather .wx-i.red{background:linear-gradient(140deg,#ff6a60,#e5302a)}
  .vmini.weather .wx-i.green{background:linear-gradient(140deg,#4bd089,#15a154)}
  .vmini.weather .wx-rt{flex:1;min-width:0}
  .vmini.weather .wx-rt b{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vmini.weather .wx-rt small{display:block;font-size:11.5px;color:var(--muted)}
  .vmini.weather .wx-dots{display:flex;gap:5px;margin:10px 0 2px}
  .vmini.weather .wx-dots i{width:6px;height:6px;border-radius:99px;background:#d6dde6;transition:.3s}
  .vmini.weather .wx-dots i.active{background:var(--accent);width:16px;border-radius:4px}
  @media (prefers-reduced-motion:reduce){.vmini.weather .wx-item{transition:none}}

  /* — Marques : pastilles qui s'animent — */
  .brandlist .b{border-radius:11px}

  /* — Footer : liens qui glissent — */
  footer ul a{transition:color .18s,padding-left .18s} footer ul a:hover{padding-left:4px}

  /* — Apparition en fondu au scroll (classe posée par JS → pas de JS = tout visible) — */
  .hd-reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
  .hd-reveal.in{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    .fh-disc,.nexa .phone,.fh-bolt:after,.fh-lbl .dot,.fh-clock .cell.live{animation:none}
    .hd-reveal{opacity:1;transform:none;transition:none}
    .btn,.card,.trust .it .ic,.brandlist .b{transition:none}
  }

  /* ============================================================
     ★ CARLYTO SCORE™ — indice de santé véhicule (élément signature)
     + meilleure lisibilité des sections du panneau « Mon véhicule »
     ============================================================ */
  .vscore{display:flex;align-items:center;gap:15px;padding:16px;
    background:linear-gradient(135deg,#0f1622,#18243a);border-bottom:1px solid rgba(255,255,255,.07)}
  .vscore-ring{position:relative;width:82px;height:82px;flex:none}
  .vscore-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .vs-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:9}
  .vs-prog{fill:none;stroke:url(#vsGrad);stroke-width:9;stroke-linecap:round;
    stroke-dasharray:326.7;stroke-dashoffset:26.1;
    filter:drop-shadow(0 0 4px rgba(52,210,123,.5));animation:vsFill 1.5s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes vsFill{from{stroke-dashoffset:326.7}to{stroke-dashoffset:26.1}}
  .vscore-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1}
  .vscore-val b{font-size:25px;font-weight:700;font-family:"Space Grotesk","Inter",sans-serif}
  .vscore-val span{font-size:10px;color:#7fe3ad;font-weight:600;margin-top:2px}
  .vscore-info{min-width:0;display:flex;flex-direction:column;gap:2px}
  .vscore-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7fb0ff}
  .vscore-info strong{color:#fff;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
  .vscore-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  .vsc{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid transparent}
  .vsc svg{width:12px;height:12px}
  .vsc.ok{background:rgba(52,210,123,.15);color:#5fe39b;border-color:rgba(52,210,123,.3)}
  .vsc.warn{background:rgba(244,168,35,.16);color:#ffce6a;border-color:rgba(244,168,35,.32)}
  /* le score se distingue du reste : léger liseré d'accent en haut du body blanc */
  .vscore + .vsec{padding-top:14px}

  /* ── Actions cockpit : 3 touches d'instrument sous le score (continue le panneau sombre) ── */
  .vpop .vcockpit-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
    padding:13px 16px 16px;background:linear-gradient(135deg,#0f1622,#18243a);
    border-bottom:1px solid rgba(255,255,255,.07)}
  .vpop .vca{--c:127,176,255;--ci:#9cc4ff;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:12px 6px 11px;border-radius:13px;text-decoration:none;cursor:pointer;
    background:linear-gradient(180deg,rgba(var(--c),.18),rgba(var(--c),.06));
    border:1px solid rgba(var(--c),.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 10px -4px rgba(var(--c),.45),0 2px 6px rgba(0,0,0,.30);
    transition:transform .16s,border-color .16s,box-shadow .16s,background .16s}
  /* couleur logique : Diagnostic=vert (santé) · Carnet=ambre (entretien) · Statut=bleu (info) */
  .vpop .vca.c-green{--c:52,210,123;--ci:#5fe39b}
  .vpop .vca.c-amber{--c:244,168,35;--ci:#ffce6a}
  .vpop .vca.c-blue{--c:127,176,255;--ci:#9cc4ff}
  .vpop .vca:hover{transform:translateY(-2px);border-color:rgba(var(--c),.55);
    background:linear-gradient(180deg,rgba(var(--c),.22),rgba(var(--c),.06));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 9px 20px -7px rgba(var(--c),.55)}
  .vpop .vca-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    color:#fff;background:linear-gradient(160deg,rgba(var(--c),1),rgba(var(--c),.72));
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 4px 10px -2px rgba(var(--c),.6),inset 0 1px 0 rgba(255,255,255,.45)}
  .vpop .vca-ic svg{width:19px;height:19px;stroke-width:2.2}
  .vpop .vca:hover .vca-ic{box-shadow:0 6px 14px -2px rgba(var(--c),.8),inset 0 1px 0 rgba(255,255,255,.5)}
  .vpop .vca-lbl{font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;text-align:center;line-height:1.1}

  /* ===== En-têtes de section : libellé net + filet séparateur + repli ===== */
  .vsec{margin:2px 16px 0;padding:14px 0 9px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#8a94a4;border-top:1px solid #eef1f6}
  .vsec[data-collapse]{cursor:pointer;user-select:none}
  .vsec .vsec-toggle{margin-left:auto;flex:none;width:24px;height:22px;padding:0;border-radius:7px;
    background:#f1f4f8;border:1px solid #e4e9f1;color:#7a8497;display:grid;place-items:center;cursor:pointer;transition:.18s}
  .vsec[data-collapse]:hover .vsec-toggle{background:#e7edf5;color:var(--accent);border-color:#cfdcee}
  .vsec .vsec-toggle svg{width:14px;height:14px;transition:transform .25s}
  .vsec.collapsed .vsec-toggle svg{transform:rotate(180deg)}
  .vsec.collapsed + .vspecs,.vsec.collapsed + .vbody{display:none}
  .vsec:first-of-type,.vscore + .vsec{border-top:none}
  .vsec:before{width:16px;height:2px;background:linear-gradient(90deg,var(--accent),#5b9dff)}

  /* ===== Fiche technique : carte « data-sheet » encadrée, arrondie, zébrée ===== */
  .vspecs{margin:0 16px 8px;border:1px solid #e4e9f1;border-radius:13px;overflow:hidden;background:#e4e9f1;gap:1px;
    box-shadow:0 3px 10px rgba(16,21,30,.05)}
  .vspecs .sp{background:#fff;padding:10px 14px}
  .vspecs .sp:nth-child(4n+3),.vspecs .sp:nth-child(4n){background:#f5f8fc}      /* zébrage doux par ligne */
  .vspecs .sp small{font-size:10px;letter-spacing:.06em;color:#98a3b3;font-weight:600;margin-bottom:3px}
  .vspecs .sp b{font-size:13px;color:var(--ink);font-weight:600}
  .vspecs .sp.full{background:#eef4fc;box-shadow:inset 3px 0 0 var(--accent)}    /* VIN mis en valeur */
  .vspecs .sp.full small{color:#6e84a3}

  /* ===== État & entretien : liste claire, valeurs alignées et démarquées ===== */
  .vbody .vstat{padding:10px 0}
  .vbody > .vstat:not(.hl){border-bottom:1px solid #eef1f6}
  .vstat .l .si{width:28px;height:28px;border-radius:8px}
  .vstat .l{font-size:12.5px;color:#5a6573}
  .vbody > .vstat:not(.hl) > b{font-size:13px;font-weight:700;background:#f4f7fb;border:1px solid #e7ecf3;border-radius:8px;padding:4px 10px}
  /* ===== Bannière « pièces compatibles » : catalogue filtré pour le véhicule (scan OBD2 / plaque-VIN) ===== */
  /* forme arrondie + noir diffusé dans tout le fond (dégradé noir → bleu), accents blancs */
  .vparts[hidden]{display:none}
  .vparts{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;margin:10px auto 0;
    width:60%;padding:12px 13px;border-radius:13px;text-decoration:none;color:#fff;
    background:linear-gradient(110deg,#0b0f17 0%,#13294f 42%,#1f6feb 100%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 9px 20px -10px rgba(8,12,20,.9),inset 0 1px 0 rgba(255,255,255,.16);
    transition:box-shadow .22s ease}
  /* léger motif « radar / scan » en fond pour évoquer la détection — statique, discret */
  .vparts::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.18),transparent 62%);pointer-events:none}
  /* contour blanc intérieur (liseré inset) */
  .vparts::after{content:"";position:absolute;inset:5px;border-radius:9px;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.30)}
  .vparts-ic{position:relative;width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  .vparts-ic svg{width:21px;height:21px;stroke-width:2.1}
  .vparts-txt{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
  .vparts-txt b{font-size:14.5px;font-weight:700;letter-spacing:.005em}
  .vparts-txt b strong{font-size:18px;font-weight:700;margin-right:2px}
  .vparts-txt small{font-size:11px;font-weight:600;color:rgba(255,255,255,.86);margin-top:1px}
  .vparts-go{position:relative;width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);
    transition:background .2s ease}
  .vparts-go svg{width:16px;height:16px;stroke-width:2.4}
  .vparts:hover{box-shadow:0 12px 24px -11px rgba(8,12,20,.95),inset 0 1px 0 rgba(255,255,255,.2)}
  .vparts:hover .vparts-go{background:rgba(255,255,255,.30)}

/* ── Câblage réel accueil (js/home.js) ───────────────────────── */
.vpop .dot.off{background:#9aa3b2 !important;box-shadow:none !important;animation:none !important}
.vpop .dot.off::after{display:none !important}
.card .add.added{transform:scale(.88);opacity:.55}
/* CTA de la carte « connecter véhicule » — vrais boutons d'accueil (bleu plein + ghost) */
.vconnect-cta{display:flex;flex-direction:column;gap:10px;padding:6px 16px 18px}
.vc-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:48px;
  border-radius:13px;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;box-sizing:border-box;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s,border-color .16s,color .16s}
.vc-cta svg{width:18px;height:18px;stroke-width:2.3;flex:none}
.vc-cta:active{transform:translateY(0) scale(.985)}
/* primaire : bleu électrique plein */
.vc-cta.primary{color:#fff;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#2f82ff,#0a52e6);
  box-shadow:0 8px 18px -6px rgba(13,82,230,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.vc-cta.primary:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,#4490ff,#0b59f5);
  box-shadow:0 14px 26px -8px rgba(13,82,230,.9),inset 0 1px 0 rgba(255,255,255,.34)}
/* secondaire : solide clair « verre blanc » (ressort net sur le panneau sombre) */
.vc-cta.ghost{color:#16202e;background:linear-gradient(180deg,#ffffff,#e7edf6);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 7px 16px -7px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.95)}
.vc-cta.ghost svg{color:#0a52e6}
.vc-cta.ghost:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffffff,#dbe5f3);
  box-shadow:0 13px 24px -9px rgba(0,0,0,.62),inset 0 1px 0 #fff}

/* ═══════════════════════════════════════════════════════════════
   CATALOGUE (carlyto-redesign-catalogue.html)
   ═══════════════════════════════════════════════════════════════ */
.cbreadcrumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:18px 0 4px;font-size:12.5px;color:var(--muted);font-weight:600}
.cbreadcrumb a{color:var(--muted)} .cbreadcrumb a:hover{color:var(--accent)}
.cbreadcrumb i{width:13px;height:13px;opacity:.6}
.cbreadcrumb .cur{color:var(--ink);font-weight:700}

.cat-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:6px 0 20px}
.cat-top h1.st{display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:27px;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.05;color:var(--ink)}
.cat-top h1.st .ac{color:#fff;background:linear-gradient(135deg,#2b7bff,#0a52e6);padding:3px 12px 4px;border-radius:9px;box-shadow:0 7px 16px -6px rgba(10,82,230,.75)}
.cat-sub{margin:8px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.cat-sub strong{color:var(--ink);font-weight:700}
/* chip « véhicule filtré » — carte premium (angles droits, accent à gauche) */
.cat-vehicle{display:inline-flex;align-items:stretch;gap:14px;padding:12px;border-radius:0;position:relative;overflow:hidden;
  background:linear-gradient(110deg,#141925 0%,#181f2c 18%,#1a3360 58%,#1f6feb 105%);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 30px -14px rgba(8,12,20,.85),inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff}
/* liseré blanc intérieur (comme la bannière pièces compatibles) */
.cat-vehicle::after{content:"";position:absolute;inset:5px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* photo voiture détourée, angles arrondis + ombre portée */
.cat-vehicle .cv-photo{width:162px;height:108px;flex:none;border-radius:11px;overflow:hidden;display:block;
  background:#fff;box-shadow:0 5px 14px -7px rgba(16,21,30,.32),inset 0 0 0 1px rgba(0,0,0,.05)}
.cat-vehicle .cv-photo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.cat-vehicle .cv-txt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.cat-vehicle .cv-txt small{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#8fb6ff;font-weight:700}
.cat-vehicle .cv-txt small svg{width:13px;height:13px}
.cat-vehicle .cv-txt b{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.1;margin-top:2px}
.cat-vehicle .cv-meta{font-size:12px;color:rgba(255,255,255,.8);font-weight:600;margin-top:1px}
.cat-vehicle .cv-ok{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:11px;font-weight:700;color:#7ce6a6;
  background:rgba(22,163,90,.22);border:1px solid rgba(124,230,166,.42);padding:2px 9px;border-radius:999px;width:fit-content}
.cat-vehicle .cv-ok svg{width:13px;height:13px}
.cat-vehicle .cv-act{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
.cat-vehicle .cv-x{width:27px;height:27px;flex:none;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.85);transition:.15s}
.cat-vehicle .cv-x svg{width:14px;height:14px}
.cat-vehicle .cv-x:hover{background:var(--red);border-color:var(--red);color:#fff}
.cat-vehicle .cv-change{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);padding:6px 11px;border-radius:999px;transition:.15s}
.cat-vehicle .cv-change svg{width:13px;height:13px}
.cat-vehicle .cv-change:hover{background:#fff;border-color:#fff;color:#0a52e6}

.cat-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:64px}

/* colonne filtres */
.cfilters{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px}
.cf-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px 16px 16px;box-shadow:var(--shadow-sm)}
.cf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cf-head h3{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cf-reset{background:none;border:none;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--accent);padding:3px 8px;border-radius:7px}
.cf-reset:hover{background:var(--accent-50)}
/* carte catégorie focalisée (famille courante issue du burger + sous-cat) */
.cf-cathead{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.cf-cathead .cf-fam-ic{width:34px;height:34px;border-radius:9px}
.cf-cathead .cf-fam-ic svg{width:17px;height:17px}
.cf-cattxt{display:flex;flex-direction:column;line-height:1.15}
.cf-cattxt small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.cf-cattxt b{font-size:15px;font-weight:700;color:var(--ink)}
.cf-catlist{display:flex;flex-direction:column;gap:1px}
.cf-allcats{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--ink);padding:9px;transition:.14s}
.cf-allcats i{width:14px;height:14px;color:var(--accent)}
.cf-allcats:hover{background:var(--accent-50);border-color:var(--accent);color:var(--accent)}

/* arbre categories */
.cf-tree{display:flex;flex-direction:column;gap:2px}
.cf-fam-btn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;cursor:pointer;
  font-family:inherit;padding:7px 8px;border-radius:10px;text-align:left;transition:.14s}
.cf-fam-btn:hover{background:var(--surface)}
.cf-fam-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--accent-50);color:var(--accent)}
.cf-fam-ic svg{width:15px;height:15px}
.cf-fam-nm{font-size:13px;font-weight:600;color:var(--ink);flex:1;min-width:0}
.cf-count{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);padding:2px 7px;border-radius:999px}
.cf-chev{width:15px;height:15px;color:var(--muted);transition:transform .22s;flex:none}
.cf-fam.open>.cf-fam-btn .cf-chev{transform:rotate(180deg)}
.cf-fam.open>.cf-fam-btn{background:var(--surface)}
.cf-subs{display:none;flex-direction:column;gap:1px;margin:3px 0 6px 11px;padding-left:13px;border-left:2px solid var(--surface-2)}
.cf-fam.open .cf-subs{display:flex}
/* liens rendus sans href (filtrage JS) : forcer le curseur main au survol */
.cf-sub{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;font-size:12.5px;color:var(--text);font-weight:600;transition:.13s;cursor:pointer}
.cf-sub .cf-count{margin-left:auto}
.cf-sub:hover{background:var(--accent-50);color:var(--accent)}
.cf-sub.active{background:rgba(31,111,235,.12);color:var(--accent);font-weight:700;box-shadow:inset 2.5px 0 0 var(--accent)}
.cf-sub.active .cf-count{background:rgba(31,111,235,.16);color:var(--accent)}

/* prix */
.cf-price{display:flex;flex-direction:column;gap:13px}
.cf-prow{display:flex;align-items:center;gap:9px}
.cf-pin{flex:1;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.cf-pin span{font-size:12px;color:var(--muted);font-weight:600}
.cf-pin input{width:100%;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);outline:none}
.cf-pin:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.cf-pdash{color:var(--muted);font-weight:600}
.cf-slider{--p:64%;-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;outline:none;cursor:pointer;margin:0;display:block}
/* Chrome/Edge/Safari : piste + curseur centré */
.cf-slider::-webkit-slider-runnable-track{height:5px;border-radius:999px;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--p),var(--surface-2) var(--p),var(--surface-2) 100%)}
.cf-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);box-shadow:0 2px 6px rgba(16,21,30,.25);cursor:pointer}
/* Firefox */
.cf-slider::-moz-range-track{height:5px;border-radius:999px;background:var(--surface-2)}
.cf-slider::-moz-range-progress{height:5px;border-radius:999px;background:var(--accent)}
.cf-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(16,21,30,.25);cursor:pointer}
.cf-pscale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:600}

/* cases a cocher custom */
.cf-checks{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto}
.cf-check{display:flex;align-items:center;gap:10px;padding:6px 7px;border-radius:9px;cursor:pointer;transition:.13s}
.cf-check:hover{background:var(--surface)}
.cf-check input{position:absolute;opacity:0;width:0;height:0}
.cf-box{width:18px;height:18px;flex:none;border-radius:6px;border:1.8px solid #cfd6e0;background:#fff;display:grid;place-items:center;transition:.14s}
.cf-box::after{content:"";width:9px;height:9px;border-radius:2px;transform:scale(0);transition:transform .14s;
  background:linear-gradient(135deg,#2b7bff,#0a52e6)}
.cf-check input:checked+.cf-box{border-color:var(--accent)}
.cf-check input:checked+.cf-box::after{transform:scale(1)}
.cf-lbl{font-size:12.5px;font-weight:600;color:var(--ink);flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.cf-check .cf-count{background:none;padding:0;color:var(--muted)}
.cf-dot{width:7px;height:7px;border-radius:50%;flex:none} .cf-dot.promo{background:var(--red)}
.cf-bsearch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-bottom:10px}
.cf-bsearch i{width:15px;height:15px;color:var(--muted)}
.cf-bsearch input{width:100%;border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--ink)}

/* colonne resultats */
.cmain{min-width:0}
.ctoolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:11px 14px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.cactive{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cactive-lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.cpill{display:inline-flex;align-items:center;gap:7px;background:none;color:#7e8896;
  border:none;box-shadow:none;
  font-family:inherit;font-size:12px;font-weight:600;padding:6px 10px;border-radius:0;cursor:pointer;transition:.14s}
.cpill i{width:13px;height:13px;color:var(--muted);transition:.14s}
.cpill:hover{background:rgba(16,21,30,.05)}
.cpill:hover i{color:var(--red)}
.cclear{background:none;border:none;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--red);padding:4px 6px;border-radius:7px}
.cclear:hover{background:none}
.ctools-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}
.csort{display:flex;align-items:center;gap:6px}
.csort-lbl{font-size:11.5px;font-weight:600;color:var(--muted);margin-right:2px}
.csort-btn{background:none;border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--text);padding:6px 11px;border-radius:0;transition:.14s}
.csort-btn:hover{background:var(--surface);color:var(--ink)}
.csort-btn.active{background:none;color:var(--accent);border-color:transparent;box-shadow:none}
.cview{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.cview-btn{width:32px;height:30px;border:none;background:none;cursor:pointer;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:.14s}
.cview-btn svg{width:16px;height:16px}
.cview-btn:hover{color:var(--ink)}
.cview-btn.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:18px}
.cgrid .card .thumb{height:172px}
.cmore{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:38px}
.cmore-line{display:flex;align-items:center;gap:20px;width:100%;max-width:540px}
.cmore-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,#dde3ec 35%,#dde3ec 65%,transparent)}
.cmore-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;
  font:700 13px var(--font);color:#7ba7e8;
  background:#fff;border:1px solid #dde3ec;border-radius:0;
  padding:8px 16px 8px 16px;box-shadow:0 1px 2px rgba(16,21,30,.05)}
.cmore-ic{width:18px;height:18px;flex:none;display:grid;place-items:center;color:#9cc0f0}
.cmore-ic svg{width:16px;height:16px;stroke-width:2.2}
.cmore-btn:hover{color:#fff;border-color:rgba(163,199,242,.78);background:rgba(163,199,242,.78)}
.cmore-btn:hover .cmore-ic{color:#eaf2fc}
.cmore-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.cmore-count b{color:var(--ink)}

@media(max-width:980px){
  .cat-layout{grid-template-columns:1fr;gap:18px}
  .cfilters{position:static;flex-direction:row;flex-wrap:wrap}
  .cfilters .cf-card{flex:1 1 230px}
}
@media(max-width:560px){
  .cat-top h1.st{font-size:22px}
  .ctools-r{width:100%}
  .csort{flex-wrap:wrap}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

/* ═══════════════════════════════════════════════════════════════
   FINITION HD — page catalogue (scopé .pg-cat) — aucune animation
   dégradés multi-paliers (anti-banding) · ombres en couches ·
   reflets internes · lissage typographique
   ═══════════════════════════════════════════════════════════════ */
.pg-cat{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* fond de page : voile clair très doux pour la profondeur */
.pg-cat{background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 38%,#f3f6fb 100%)}

/* cartes filtres + barre d'outils : surface vernie + ombres en couches */
.pg-cat .cf-card,.pg-cat .ctoolbar{
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}

/* cartes produits : ombres en couches + fin reflet interne + bord net */
.pg-cat .cgrid .card{
  border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 2px 5px rgba(16,21,30,.05),0 14px 26px -16px rgba(16,21,30,.18),inset 0 1px 0 rgba(255,255,255,.75)}
/* thumb : dégradé radial multi-paliers (anti-banding) */
.pg-cat .cgrid .card .thumb{
  background:radial-gradient(125% 100% at 50% 28%,#ffffff 0%,#f6f8fc 55%,#eef2f8 80%,#e9eef6 100%)}
.pg-cat .cgrid .card .name{letter-spacing:-.005em}

/* titre catégorie : pavé bleu multi-paliers + ombre douce (anti-banding) */
.pg-cat .cat-top h1.st .ac{
  background:linear-gradient(135deg,#3b88ff 0%,#1f6feb 45%,#0a52e6 100%);
  box-shadow:0 8px 18px -7px rgba(10,82,230,.6),0 2px 4px rgba(10,82,230,.3),inset 0 1px 0 rgba(255,255,255,.32)}

/* pills de tri actives + sous-cat active : reflets internes nets */
.pg-cat .csort-btn.active{
  background:none;color:var(--accent);border-color:transparent;box-shadow:none}
.pg-cat .cf-sub.active{box-shadow:inset 2.5px 0 0 var(--accent),inset 0 1px 0 rgba(255,255,255,.5)}

/* compteurs / pastilles : micro-liseré pour du croustillant */
.pg-cat .cf-count{box-shadow:inset 0 0 0 1px rgba(16,21,30,.025)}

/* champs (prix / recherche marque) : creux subtil + lissage */
.pg-cat .cf-pin,.pg-cat .cf-bsearch{
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);
  box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}

/* en-tête véhicule : le titre catalogue net sur fond clair */
.pg-cat .cat-sub{color:#7b8696}

/* ── Bouton « ajouter au panier » — refonte pastille ronde joaillerie ──
   cercle dégradé bleu radial · « + » fin · double reflet interne · ombre teintée
   (pas d'animation de mouvement) */
.card .add{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;padding:0;flex:none;
  display:grid;place-items:center;color:#fff;font:300 26px/1 var(--font);
  background:radial-gradient(125% 125% at 30% 18%,#4a93ff 0%,#1f6feb 46%,#0a52e6 100%);
  box-shadow:0 5px 12px -4px rgba(10,82,230,.6),0 1px 2px rgba(16,21,30,.18),
    inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 5px rgba(7,28,78,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
.card .add > *{pointer-events:none}
.card .add:hover{
  background:radial-gradient(125% 125% at 30% 18%,#5a9dff 0%,#2173ef 46%,#0a4fd6 100%);
  box-shadow:0 7px 16px -4px rgba(10,82,230,.72),0 1px 2px rgba(16,21,30,.2),
    inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 5px rgba(7,28,78,.45),inset 0 0 0 1px rgba(255,255,255,.1)}
.card .add svg{width:19px;height:19px;stroke-width:2.4}

/* ── Bouton « ajouter au panier » — proposition 2 : squircle noir->bleu + icône panier
   (raccord au jeu noir->bleu du conteneur véhicule), pas d'animation de mouvement ── */
.card .add{width:46px;height:40px;border-radius:12px;border:none;cursor:pointer;padding:0;flex:none;
  display:grid;place-items:center;color:#fff;font-size:0;
  background:linear-gradient(135deg,#0c1019 0%,#13294f 55%,#1f6feb 132%);
  box-shadow:0 6px 13px -5px rgba(8,12,20,.7),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.card .add > *{pointer-events:none}
.card .add svg{width:18px;height:18px;stroke-width:2.2}
.card .add:hover{box-shadow:inset 0 0 0 100px rgba(255,255,255,.16),0 6px 13px -5px rgba(8,12,20,.7),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.1)}

/* Sidebar filtres : angles droits sur tous les conteneurs */
.cfilters .cf-card,
.cfilters .cf-fam-btn,
.cfilters .cf-fam-ic,
.cfilters .cf-sub,
.cfilters .cf-check,
.cfilters .cf-pin,
.cfilters .cf-bsearch,
.cfilters .cf-allcats{border-radius:0}

/* Titres de filtres : bandeau d'en-tête doux pleine largeur */
.cfilters .cf-head{margin:-15px -16px 13px;padding:10px 14px;
  background:linear-gradient(180deg,#f6f9fd,#eaf1fa);border-bottom:1px solid #e4ebf4}
.cfilters .cf-head h3{display:inline-flex;align-items:center;gap:8px}
.cfilters .cf-head h3::before{content:"";width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#3b88ff,#0a52e6)}
.cfilters .cf-cathead{margin:-15px -16px 11px;padding:11px 14px;
  background:linear-gradient(180deg,#f6f9fd,#eaf1fa);border-bottom:1px solid #e4ebf4}

/* Typo des titres de filtres : petites capitales espacées, soignées */
.cfilters .cf-head h3{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b3340}
.cfilters .cf-cathead .cf-cattxt small{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.cfilters .cf-cathead .cf-cattxt b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* Bandeaux de filtres : petite touche de relief pour les démarquer */
.cfilters .cf-head,.cfilters .cf-cathead{
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}

/* Titres de filtres : +1.2px */
.cfilters .cf-head h3{font-size:12.7px}
.cfilters .cf-cathead .cf-cattxt b{font-size:17.7px}

/* Bandeaux de filtres : contour légèrement ressorti */
.cfilters .cf-head,.cfilters .cf-cathead{
  border-bottom-color:#d3deef;
  box-shadow:inset 0 0 0 1px rgba(31,111,235,.13),inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}

/* sous-catégorie active : surbrillance plus légère */
.cfilters .cf-sub.active{background:rgba(31,111,235,.08)}
.cfilters .cf-sub.active .cf-count{background:rgba(31,111,235,.12)}
/* en-tête catégorie : nom de famille en majuscules */
.cfilters .cf-cathead .cf-cattxt b{text-transform:uppercase}

/* Tuiles produits (catalogue) : aucune animation au survol */
.pg-cat .cgrid .card{transition:none}
.pg-cat .cgrid .card:hover{transform:none;border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 2px 5px rgba(16,21,30,.05),0 14px 26px -16px rgba(16,21,30,.18),inset 0 1px 0 rgba(255,255,255,.75)}
.pg-cat .cgrid .card:hover .thumb svg{transform:none}

/* ===== Burger menu + drawer familles (catalogue) =====
   angles droits cohérents + finition des accents familles (scopé .pg-cat,
   l'accueil garde son drawer arrondi) */
/* angles droits sur les conteneurs qui s'y prêtent */
.pg-cat .burger,
.pg-cat .catnav .quick a,
.pg-cat .catdrawer,
.pg-cat .cd-close,
.pg-cat .cd-fam,
.pg-cat .cd-fam .i,
.pg-cat .cd-sub .sh .i,
.pg-cat .cd-group,
.pg-cat .cd-mback,
.pg-cat .cd-glinks a{border-radius:0}
/* chips outils (Carnet connecté / Rappels) : garder l'arrondi même sur pages pg-cat */
.pg-cat .catnav .quick a.q-carnet{border-radius:8px}
/* bouton « Toutes les pièces » : meme style (angles droits) sur l'accueil que sur le catalogue */
.pg-home .burger{border-radius:0}

/* accent famille : barre verticale PLEINE hauteur, nette et carrée
   (remplace la petite pilule flottante → plus premium, type Autodoc) */
.pg-cat .cd-fam::before{
  top:0;left:0;height:100%;width:3px;border-radius:0;
  transform:scaleX(0);transform-origin:left center;transition:transform .16s}
.pg-cat .cd-fam:hover::before,
.pg-cat .cd-fam.active::before{transform:scaleX(1)}
/* tuile d'icône famille : coins droits + ombre teintée plus franche en actif */
.pg-cat .cd-fam.active .i{box-shadow:0 4px 9px -2px color-mix(in srgb,var(--fc) 62%,transparent)}

/* en-tête rail + puces de groupe : accents carrés (cohérence) */
.pg-cat .cd-head span::before,
.pg-cat .cd-group .gh::before{border-radius:0}

/* cartes de sous-catégories : fin liseré supérieur couleur famille au survol */
.pg-cat .cd-group{position:relative}
.pg-cat .cd-group::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--fc);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.pg-cat .cd-group:hover::before{transform:scaleX(1)}

/* ===== Amélioration globale du contenu du menu (familles + sous-cat) ===== */
/* RAIL : items plus aérés, survol/actif teintés dans la couleur de la famille */
.pg-cat .cd-fams{padding:10px 10px 14px}
.pg-cat .cd-fam{padding:11px 13px;gap:13px;font-size:13.5px;margin-bottom:2px}
/* survol des familles : pas d'animation (changement d'état instantané) */
.pg-cat .cd-fam,
.pg-cat .cd-fam .i,
.pg-cat .cd-fam .chev,
.pg-cat .cd-fam::before{transition:none}
.pg-cat .cd-fam:hover{background:color-mix(in srgb,var(--fc) 8%,#fff);
  box-shadow:0 4px 12px -5px color-mix(in srgb,var(--fc) 34%,transparent)}
.pg-cat .cd-fam:hover .i{background:color-mix(in srgb,var(--fc) 20%,#fff);transform:none}
.pg-cat .cd-fam .chev{opacity:.45}
.pg-cat .cd-fam:hover .chev,
.pg-cat .cd-fam.active .chev{opacity:1;transform:translateX(2px);color:var(--fc)}

/* PANNEAU : en-tête de famille COLLANT (reste visible quand on scrolle les sous-cat) */
.pg-cat .cd-panel{padding-top:0}
.pg-cat .cd-sub .sh{position:sticky;top:0;z-index:3;
  margin:0 -26px 18px;padding:20px 26px 13px;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:0 7px 11px -9px rgba(16,21,30,.28)}
.pg-cat .cd-sub .sh::after{content:"";position:absolute;left:26px;bottom:-1px;width:64px;height:2px;background:var(--fc)}

/* GROUPES : titre un peu plus présent */
.pg-cat .cd-group .gh{font-size:13px}

/* LIENS de sous-cat : chevron couleur famille qui apparaît au survol */
.pg-cat .cd-glinks a{position:relative;padding-left:10px}
.pg-cat .cd-glinks a::before{content:"›";position:absolute;left:2px;font-weight:700;color:var(--fc);
  opacity:0;transform:translateX(-3px)}
.pg-cat .cd-glinks a:hover{padding-left:17px}
.pg-cat .cd-glinks a:hover::before{opacity:1;transform:translateX(0)}

/* survol des sous-catégories : pas d'animation (changement d'état instantané) */
.pg-cat .cd-group,
.pg-cat .cd-group::before,
.pg-cat .cd-group .gh,
.pg-cat .cd-glinks a,
.pg-cat .cd-glinks a::before{transition:none}
.pg-cat .cd-group:hover{transform:none}

/* ===== Barre de réassurance (catalogue) — refonte « senior » =====
   fini le marquee qui défile : ligne STATIQUE, équilibrée, séparateurs fins,
   icônes sobres colorées. Scopée .pg-cat (l'accueil garde sa barre actuelle). */
:is(.pg-cat,.pg-home) .promo{background:#121826;color:#c7cfdb;
  font-family:var(--font);font-size:13px;letter-spacing:0;border-bottom:1px solid rgba(255,255,255,.06)}
/* les 3 bandeaux du haut (réassurance + header logo + nav catégories) = même teinte */
.pg-cat header{background:#121826}
.pg-cat .catnav{background:#121826}

/* ===== Boutons d'en-tête (Mon garage · Compte · Panier) — proposition senior =====
   retenue premium : pas de boîtes ; au survol, soulignement dégradé qui s'ouvre
   du centre + icône qui se soulève et s'éclaircit. Le Panier garde un point d'accent. */
.pg-cat .hactions,.pg-home .hactions{gap:6px}
.pg-cat .hact,.pg-home .hact{position:relative;padding:8px 13px;border-radius:0;background:none;transition:transform .16s}
.pg-cat .hact span,.pg-home .hact span{color:#aeb8c6;font-weight:600;transition:color .16s}
.pg-cat .hact svg,.pg-home .hact svg{color:#cfd7e2;transition:color .18s,transform .18s}
.pg-cat .hact:hover,.pg-home .hact:hover{background:none}
.pg-cat .hact:hover span,.pg-home .hact:hover span{color:#fff}
.pg-cat .hact:hover svg,.pg-home .hact:hover svg{color:#fff;transform:translateY(-2px)}
.pg-cat .hact[href="panier.html"] svg{color:#fff}
/* Actions header : texte + icône en blanc (Mon garage inclus — son icône chromée
   utilise des dégradés, donc color:#fff n'affecte que le texte). */
.pg-cat .hact span,.pg-home .hact span,
.pg-cat .hact svg,.pg-home .hact svg{color:#fff}
/* Mon garage : ouverture du rideau un peu plus lente */
:is(.pg-cat,.pg-home) .hact .grg .grg-door{transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .8s ease}
:is(.pg-cat,.pg-home) .promo .wrap{height:50px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* groupe d'atouts : centré, items séparés par un fin filet vertical */
:is(.pg-cat,.pg-home) .promo .ptrust{position:relative;display:flex;align-items:center;flex:1;min-width:0;justify-content:center;gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);overflow:hidden}
:is(.pg-cat,.pg-home) .promo .pt{display:inline-flex;align-items:center;gap:10px;padding:0 24px;
  font-size:14px;font-weight:600;color:#c7cfdb;white-space:nowrap}
:is(.pg-cat,.pg-home) .promo .pt + .pt{border-left:1px solid rgba(255,255,255,.10)}
:is(.pg-cat,.pg-home) .promo .pt svg{width:18px;height:18px;stroke-width:2.1;flex:none}
:is(.pg-cat,.pg-home) .promo .pt:nth-child(1) svg{color:#4ade80}  /* livraison — vert */
:is(.pg-cat,.pg-home) .promo .pt:nth-child(2) svg{color:#60a5fa}  /* retours — bleu */
:is(.pg-cat,.pg-home) .promo .pt:nth-child(3) svg{color:#fbbf24}  /* garantie — or */
:is(.pg-cat,.pg-home) .promo .pt:nth-child(4) svg{color:#fb923c}  /* expédition — orange */
/* pastille paiement à droite : sombre sur sombre, fin liseré clair */
:is(.pg-cat,.pg-home) .promo .right{flex:none}
:is(.pg-cat,.pg-home) .promo .rating{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:7px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .15s,background .15s}
:is(.pg-cat,.pg-home) .promo .rating:before{display:none}
:is(.pg-cat,.pg-home) .promo .rating:hover{transform:none;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09)}
:is(.pg-cat,.pg-home) .promo .rcnt{color:#dbe1ea;font-weight:600;font-size:13.5px;gap:8px}
:is(.pg-cat,.pg-home) .promo .rcnt svg{width:16px;height:16px;color:#4ade80;stroke-width:2.2}
/* responsive : on masque l'avant-dernier filet si ça serre, et on cache la barre sous 720px */
@media (max-width:820px){:is(.pg-cat,.pg-home) .promo .pt{padding:0 14px;font-size:12px}}
@media (max-width:640px){:is(.pg-cat,.pg-home) .promo .ptrust .pt:nth-child(n+3){display:none}}

/* animation : halo coloré DOUX sur les icônes, à tour de rôle (cascade lente).
   le texte ne bouge pas — discret, premium, non intrusif. */
:is(.pg-cat,.pg-home) .promo .pt svg{animation:ptGlow 7s ease-in-out infinite}
:is(.pg-cat,.pg-home) .promo .pt:nth-child(1) svg{animation-delay:0s}
:is(.pg-cat,.pg-home) .promo .pt:nth-child(2) svg{animation-delay:1.75s}
:is(.pg-cat,.pg-home) .promo .pt:nth-child(3) svg{animation-delay:3.5s}
:is(.pg-cat,.pg-home) .promo .pt:nth-child(4) svg{animation-delay:5.25s}
@keyframes ptGlow{
  0%,86%,100%{filter:drop-shadow(0 0 0 transparent)}
  43%        {filter:drop-shadow(0 0 6px currentColor)}
}
@media (prefers-reduced-motion:reduce){:is(.pg-cat,.pg-home) .promo .pt svg{animation:none}}

/* ============================================================
   FICHE PRODUIT (.pd-*) — aligne sur la maquette de reference :
   3 zones (galerie + infos + carte achat), onglets, sidebar.
   Langage du site : angles droits, finition HD, prix en rouge.
   ============================================================ */
.pd{padding:22px 0 56px}

/* fil d'Ariane */
.pd-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:18px}
.pd-crumb a{color:var(--muted)} .pd-crumb a:hover{color:var(--accent)}
.pd-crumb svg{width:13px;height:13px;opacity:.55}
.pd-crumb .cur{color:var(--ink);font-weight:600}

/* layout : colonne principale + sidebar achat */
.pd-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:30px;align-items:start}
.pd-main{min-width:0}

/* tete : galerie + infos */
.pd-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:28px;margin-bottom:22px}

/* ---- galerie ---- */
.pd-gallery{display:flex;gap:12px;align-items:flex-start}
.pd-thumbs{display:flex;flex-direction:column;gap:9px;flex:none}
.pd-th{width:58px;height:58px;border:1px solid var(--line);background:#fff;cursor:pointer;padding:8px;
  display:grid;place-items:center;transition:border-color .15s,box-shadow .15s}
.pd-th svg{width:100%;height:100%}
.pd-th:hover{border-color:#bcc7d8}
.pd-th.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pd-th-more{font-size:12px;font-weight:700;color:#586271}
.pd-stage{position:relative;flex:1;min-width:0;aspect-ratio:1/.86;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 22%,#ffffff,#eef2f7);display:grid;place-items:center;overflow:hidden}
.pd-disc{width:78%;max-width:340px;height:auto}
.pd-badge{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;color:#fff;text-transform:uppercase}
.pd-badge.red{background:linear-gradient(135deg,#ff5249,#d4221c)}
.pd-fav{position:absolute;top:10px;right:10px;width:36px;height:36px;border:1px solid var(--line);background:rgba(255,255,255,.92);
  cursor:pointer;display:grid;place-items:center;color:#8a93a1;transition:.15s}
.pd-fav:hover{color:var(--red);border-color:#e4b6b1}
.pd-fav svg{width:17px;height:17px}
.pd-zoom{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border:1px solid var(--line);
  background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;color:#586271;transition:.15s}
.pd-zoom:hover{color:var(--ink);border-color:#bcc7d8}
.pd-zoom svg{width:16px;height:16px}

/* ---- infos centre ---- */
.pd-info{min-width:0}
.pd-brand{font-size:15px;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.pd-brand.red{color:var(--red)}
.pd-brand-logo{height:24px;width:auto;display:block}
.pd-title{font-size:26px;font-weight:600;line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:0 0 9px}
.pd-refrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:11px}
.pd-refrow b{color:#414a59;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600}
.pd-dot{opacity:.5}
.pd-copy{border:1px solid var(--line);background:#fff;cursor:pointer;width:25px;height:25px;display:grid;place-items:center;color:#7e8896;transition:.15s}
.pd-copy:hover{color:var(--accent);border-color:#bcc7d8}
.pd-copy svg{width:13px;height:13px}

/* etoiles */
.pd-stars{position:relative;display:inline-block;font-size:15px;letter-spacing:1px;line-height:1}
.pd-stars.sm{font-size:13px}
.pd-stars .b{color:#d4dae3}
.pd-stars .f{position:absolute;top:0;left:0;width:var(--r,100%);overflow:hidden;white-space:nowrap;color:#f5a623}
.pd-rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin-bottom:15px}
.pd-rating b{font-weight:700}
.pd-rcount{color:var(--muted);font-weight:600}

/* compatibilite */
.pd-compat.ok{margin-bottom:16px}
.pd-compat-ic{width:18px;height:18px;color:#16a34a;vertical-align:-.2em;margin-right:6px}
.pd-compat-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#15803d}
.pd-compat-box{display:flex;align-items:center;gap:11px;margin-top:8px;padding:11px 13px;
  border:1px solid rgba(22,163,74,.28);background:rgba(22,163,74,.06)}
.pd-compat-veh{width:38px;height:38px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:#46566e}
.pd-compat-veh svg{width:20px;height:20px}
.pd-compat-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pd-compat-txt b{font-size:13.5px;font-weight:700;color:var(--ink)}
.pd-compat-txt span{font-size:11.5px;color:var(--muted);font-weight:600}
.pd-compat-change{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}

/* pictos atouts */
.pd-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-feat{display:flex;flex-direction:column;gap:7px;font-size:11.5px;font-weight:600;color:var(--text);line-height:1.3}
.pd-feat-ic{width:34px;height:34px;display:grid;place-items:center;background:var(--accent-50);color:var(--accent)}
.pd-feat-ic svg{width:18px;height:18px}

/* ---- bandeau reassurance ---- */
.pd-trustrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;margin-bottom:26px}
.pd-trust{display:flex;align-items:center;gap:11px;padding:14px 16px}
.pd-trust + .pd-trust{border-left:1px solid var(--line)}
.pd-trust-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:var(--accent)}
.pd-trust-ic svg{width:21px;height:21px}
.pd-trust b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.pd-trust span{font-size:11px;color:var(--muted)}

/* ---- onglets ---- */
.pd-tabs{border:1px solid var(--line);background:#fff}
.pd-tabnav{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);background:var(--surface)}
.pd-tab{border:none;background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:14px 18px;position:relative;transition:color .15s}
.pd-tab:hover{color:var(--ink)}
.pd-tab.active{color:var(--accent)}
.pd-tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent)}
.pd-panel{display:none;padding:22px}
.pd-panel.active{display:block}
.pd-descgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.pd-desc{font-size:13.5px;line-height:1.7;color:var(--text);margin:0 0 14px}
.pd-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-bullets li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}
.pd-bullets svg{width:16px;height:16px;color:#16a34a;flex:none}

/* tableaux specs */
.pd-specs{width:100%;border-collapse:collapse;font-size:13px}
.pd-specs td{padding:9px 0;border-bottom:1px solid var(--line)}
.pd-specs tr td:first-child{color:var(--muted);font-weight:600;width:52%}
.pd-specs tr td:last-child{color:var(--ink);font-weight:600;text-align:right}
.pd-specs-full td{padding:11px 14px;border:1px solid var(--line);text-align:left}
.pd-specs-full tr td:first-child{background:var(--surface);width:48%}
.pd-specs-full tr td:last-child{text-align:left}

/* vehicules */
.pd-veh{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column}
.pd-veh li{padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)}
.pd-veh li:last-child{border-bottom:none}
.pd-veh li b{color:var(--ink);font-weight:600}
.pd-veh-more{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent)}
.pd-veh-more svg{width:15px;height:15px}

/* avis */
.pd-revsum{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;
  border:1px solid var(--line);background:var(--surface);padding:18px 20px;margin-bottom:18px}
/* bloc note */
.pd-revscore{display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:26px;border-right:1px solid #dde3ec}
.pd-revnum{font-size:46px;font-weight:600;color:var(--ink);line-height:.85;letter-spacing:-.02em;display:flex;align-items:baseline;gap:2px}
.pd-revnum small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.pd-revstars{font-size:17px;letter-spacing:1.5px}
.pd-revcount{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#16a34a}
.pd-revcount svg{width:13px;height:13px}
/* repartition par etoiles (barres) */
.pd-revbars{display:flex;flex-direction:column;gap:6px;min-width:0}
.pd-revbar{display:grid;grid-template-columns:30px 1fr 36px;align-items:center;gap:10px}
.pd-rl{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--muted)}
.pd-rl svg{width:11px;height:11px;color:#f5a623;fill:#f5a623}
.pd-rt{height:8px;background:#e6ebf3;overflow:hidden;box-shadow:inset 0 1px 1px rgba(16,21,30,.06)}
.pd-rt i{display:block;height:100%;background:linear-gradient(90deg,#f7c14e,#f5a623);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pd-rp{text-align:right;font-size:11.5px;font-weight:600;color:var(--ink)}
/* CTA */
.pd-revcta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#ff5249,#d4221c);padding:10px 16px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(212,34,28,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.pd-revcta svg{width:15px;height:15px}
@media (max-width:620px){
  .pd-revsum{grid-template-columns:1fr;gap:16px;text-align:center}
  .pd-revscore{padding-right:0;border-right:none;padding-bottom:16px;border-bottom:1px solid #dde3ec}
  .pd-revcta{justify-content:center}
}

/* ===== Atouts produit : cartes douces qui ressortent (teinte pastel par couleur) ===== */
.pg-prod .pd-feats{gap:12px}
.pg-prod .pd-feat{position:relative;flex-direction:column;gap:11px;padding:15px 14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 8%,#fff),color-mix(in srgb,var(--c) 3%,#fff));
  border:1px solid color-mix(in srgb,var(--c) 24%,#fff);
  box-shadow:0 3px 9px -4px color-mix(in srgb,var(--c) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.85);
  font-size:12px;font-weight:600;color:#3a4250;line-height:1.35}
/* fin accent coloré en haut de la carte */
.pg-prod .pd-feat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c);opacity:.9}
/* tuile d'icône : dégradé doux de la couleur + reflet, icône pleine couleur */
.pg-prod .pd-feat-ic{width:40px;height:40px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 13%,#fff));
  color:var(--c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 6px -2px color-mix(in srgb,var(--c) 48%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--c) 16%,transparent)}
.pg-prod .pd-feat-ic svg{width:20px;height:20px}

/* ===== Conteneur vehicule « Compatible avec votre vehicule » — REGLES COMMUNES
   (s'appliquent au catalogue ET a la sidebar produit) =====
   - fond degrade bleu eclairci (noir->bleu ciel attenue)
   - photo calee en haut, texte aligne en haut
   - libelle bleu clair, nom avec fin contour noir
   - badge « Compatibilite verifiee » ancre en bas-gauche
   - « Changer » ancre en bas-droite (semi-gras), croix seule en haut-droite
   - bande basse reservee (padding-bottom) pour ne pas chevaucher le texte */
.pg-cat .cat-vehicle{padding:12px 12px 46px;align-items:stretch;gap:13px;
  background:linear-gradient(110deg,#33517c 0%,#3a5e8e 18%,#4488c2 58%,#8ccdf3 105%)}
.pg-cat .cat-vehicle .cv-photo{align-self:flex-start}
.pg-cat .cat-vehicle .cv-txt{justify-content:flex-start;gap:1px}
.pg-cat .cat-vehicle .cv-txt small{letter-spacing:.05em;margin-bottom:3px;color:#cfe2ff}
.pg-cat .cat-vehicle .cv-txt b{line-height:1.15;
  -webkit-text-stroke:.5px rgba(0,0,0,.55);text-stroke:.5px rgba(0,0,0,.55);paint-order:stroke fill}
.pg-cat .cat-vehicle .cv-meta{margin-top:1px;white-space:nowrap}
.pg-cat .cat-vehicle .cv-ok{position:absolute;left:12px;bottom:12px;z-index:3;margin:0}
.pg-cat .cat-vehicle .cv-change{position:absolute;right:12px;bottom:12px;z-index:3;margin:0;font-weight:600}
.pg-cat .cat-vehicle .cv-act{position:static}
/* adaptation sidebar produit : pleine largeur + photo plus petite + nom 16px */
.pg-prod .pd-side .cat-vehicle{display:flex;width:100%}
.pg-prod .pd-side .cv-photo{width:104px;height:78px}
.pg-prod .pd-side .cv-txt b{font-size:16px}

/* sceaux generiques sous la note (Qualite garantie · Compatibilite verifiee) */
.pg-prod .pd-qbadges{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.pg-prod .pd-qbadge{display:flex;align-items:center;gap:13px;width:100%;padding:11px 15px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#f9fbfe);
  box-shadow:0 2px 6px -3px rgba(16,21,30,.12),inset 0 1px 0 #ffffff}
.pg-prod .pd-qbadge-seal{width:42px;height:42px;flex:none;display:grid;place-items:center}
.pg-prod .pd-qbadge-seal svg{width:42px;height:42px;filter:drop-shadow(0 3px 6px rgba(224,160,32,.35))}
.pg-prod .pd-qbadge-txt b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.pg-prod .pd-qbadge-txt span{font-size:11.5px;color:var(--muted);line-height:1.35}
.pd-rev{padding:13px 0;border-bottom:1px solid var(--line)}
.pd-rev:last-child{border-bottom:none}
.pd-rev-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pd-rev-h b{font-size:13px;color:var(--ink);font-weight:700}
.pd-rev-ok{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#16a34a;margin-left:auto}
.pd-rev-ok svg{width:13px;height:13px}
.pd-rev p{margin:0;font-size:13px;line-height:1.6;color:var(--text)}

/* questions/reponses */
.pd-qa{padding:12px 0;border-bottom:1px solid var(--line)}
.pd-qa b{display:block;font-size:13px;color:var(--ink);margin-bottom:5px}
.pd-qa p{margin:0;font-size:13px;line-height:1.6;color:var(--text)}

/* ===== SIDEBAR ACHAT ===== */
.pd-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}

.pd-buybox{border:1px solid var(--line);background:#fff;padding:18px;box-shadow:0 10px 28px -18px rgba(16,21,30,.3)}
.pd-bb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pd-stock{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700}
.pd-stock.ok{color:#15803d}
.pd-sdot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.pd-deliv{font-size:11.5px;color:var(--muted);font-weight:600}
.pd-priceline{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pd-now{font-size:34px;font-weight:600;letter-spacing:-.02em;color:var(--red);line-height:1}
.pd-old{font-size:16px;color:var(--muted);text-decoration:line-through}
.pd-disc-pill{font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff5249,#d4221c);padding:3px 9px}
.pd-vat{font-size:11.5px;color:var(--muted);margin:6px 0 15px}

.pd-cartrow{margin-bottom:10px}
.pd-qty{display:flex;align-items:center;border:1px solid var(--line);background:#fff;width:100%}
.pd-qty button{width:48px;height:46px;border:none;background:none;cursor:pointer;font-size:20px;color:#586271;line-height:1}
.pd-qty button:hover{background:var(--surface);color:var(--ink)}
.pd-qty input{flex:1;min-width:0;height:46px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink)}
.pd-add{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#2b7bff,#0a66ff);box-shadow:0 8px 18px -7px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.28);transition:.16s}
.pd-add:hover{background:linear-gradient(180deg,#3b86ff,#1466e6);box-shadow:0 12px 24px -7px rgba(10,102,255,.72),inset 0 1px 0 rgba(255,255,255,.32)}
.pd-add svg{width:19px;height:19px}

.pd-bbassur{list-style:none;margin:16px 0 0;padding:15px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:13px}
.pd-bbassur li{display:flex;align-items:center;gap:11px}
.pd-bba-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--accent)}
.pd-bba-ic svg{width:17px;height:17px}
.pd-bbassur b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.pd-bbassur span{font-size:11px;color:var(--muted)}

/* carte aide */
.pd-help{border:1px solid var(--line);background:#fff;padding:16px}
.pd-help-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.pd-help-h svg{width:18px;height:18px;color:var(--accent)}
.pd-help p{margin:0 0 13px;font-size:12.5px;line-height:1.6;color:var(--text)}
.pd-help-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;font-size:13px;font-weight:700;
  color:var(--accent);background:none;border:1px solid rgba(31,111,235,.4);transition:.15s}
.pd-help-btn:hover{background:var(--accent-50)}
.pd-help-btn svg{width:15px;height:15px}

/* vous aimerez aussi (sidebar) */
.pd-also{border:1px solid var(--line);background:#fff;padding:16px}
.pd-also-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.pd-also-item{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.pd-also-item:last-child{border-bottom:none}
.pd-also-th{width:46px;height:46px;flex:none;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.pd-also-th svg{width:26px;height:26px}
.pd-also-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pd-also-brand{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.pd-also-name{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
.pd-also-price{font-size:13px;font-weight:600;color:var(--red);margin-top:2px}
/* meme bouton panier que les tuiles produit du catalogue (.card .add) : squircle noir->bleu */
.pd-also-add{width:42px;height:36px;flex:none;display:grid;place-items:center;color:#fff;border-radius:12px;
  background:linear-gradient(135deg,#0c1019 0%,#13294f 55%,#1f6feb 132%);transition:background .22s ease,box-shadow .22s ease;
  box-shadow:0 6px 13px -5px rgba(8,12,20,.7),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.pd-also-add svg{width:17px;height:17px;stroke-width:2.2}
.pd-also-add:hover{background:linear-gradient(135deg,#2f6fd6 0%,#4f97f0 55%,#8fd0ff 130%);
  box-shadow:0 6px 14px -5px rgba(31,111,235,.5),inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.14)}

/* responsive */
@media (max-width:1040px){
  .pd-layout{grid-template-columns:1fr}
  .pd-side{position:static}
}
@media (max-width:760px){
  .pd-head{grid-template-columns:1fr}
  .pd-trustrow{grid-template-columns:1fr 1fr}
  .pd-trust:nth-child(2n){border-left:none}
  .pd-descgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pd-gallery{flex-direction:column-reverse}
  .pd-thumbs{flex-direction:row;flex-wrap:wrap}
  .pd-feats{grid-template-columns:1fr}
  .pd-trustrow{grid-template-columns:1fr}
  .pd-trust + .pd-trust{border-left:none;border-top:1px solid var(--line)}
}

/* ============================================================
   FINITION PRODUIT — coherence avec le catalogue (.pg-prod)
   surfaces vernies, ombres en couches, degrades anti-banding,
   bandeaux de titres, micro-reflets. (le voile de fond + le
   lissage typo sont deja herites de .pg-cat)
   ============================================================ */
/* surfaces blanches : vernies + ombres en couches (comme .cf-card/.ctoolbar) */
.pg-prod .pd-tabs,
.pg-prod .pd-trustrow,
.pg-prod .pd-help,
.pg-prod .pd-also{
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
/* carte d'achat : un cran plus presente */
.pg-prod .pd-buybox{
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 2px 6px rgba(16,21,30,.06),0 22px 40px -22px rgba(16,21,30,.28),inset 0 1px 0 #ffffff}

/* scene galerie + vignettes : degrade radial multi-paliers (anti-banding) */
.pg-prod .pd-stage{
  background:radial-gradient(125% 110% at 38% 26%,#ffffff 0%,#f6f8fc 55%,#eef2f8 80%,#e7edf6 100%);
  border-color:#e6ebf3;box-shadow:inset 0 1px 0 #ffffff}
.pg-prod .pd-th,.pg-prod .pd-also-th{
  background:radial-gradient(120% 100% at 50% 30%,#ffffff,#f3f6fb);border-color:#e6ebf3}

/* bandeau d'onglets : traitement « bandeau de titre » du catalogue
   (degrade bleu-gris doux + reflet blanc + fin lisere bleu) */
.pg-prod .pd-tabnav{
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom-color:#d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}

/* recap avis + tableau specs : entetes de lignes vernies */
.pg-prod .pd-revsum{background:linear-gradient(180deg,#f7f9fc,#f1f4f9);border-color:#e6ebf3}
.pg-prod .pd-specs-full tr td:first-child{background:linear-gradient(180deg,#f7f9fc,#f1f4f9)}

/* pastilles d'icones : leger reflet interne (sans changer la teinte) */
.pg-prod .pd-feat-ic,.pg-prod .pd-bba-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}

/* petites pastilles colorees : micro-reflet interne (croustillant) */
.pg-prod .pd-disc-pill,.pg-prod .pd-revcta{box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
/* CTA panier : reflet + ombre teintee en couches */
.pg-prod .pd-add{box-shadow:0 1px 1px rgba(10,82,230,.2),0 10px 22px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.34)}
.pg-prod .pd-add:hover{box-shadow:0 1px 1px rgba(10,82,230,.24),0 14px 28px -8px rgba(10,102,255,.72),inset 0 1px 0 rgba(255,255,255,.4)}

/* titre « Vous aimerez aussi » : meme bandeau que la barre d'onglets
   (degrade bleu-gris + reflet blanc + fin lisere bleu), pleine largeur du panneau */
.pg-prod .pd-also-h{
  margin:-16px -16px 14px;padding:13px 16px;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);
  border-bottom:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2);
  font-size:12.7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b3340}

/* bouton « Ajouter au panier » : un peu reduit des deux cotes (centre) */
.pg-prod .pd-add{transition:none;display:flex;width:calc(100% - 76px);margin-left:auto;margin-right:auto;
  height:43px;font-size:13.5px}
.pg-prod .pd-add:hover{background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 1px 1px rgba(10,82,230,.2),0 10px 22px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.34)}

/* ===== Accueil : aucune animation au survol des tuiles produit (.pg-home) =====
   (meme parti pris que le catalogue : elevation statique, pas de mouvement/zoom) */
.pg-home .card{transition:none}
.pg-home .card:hover{transform:none;border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 2px 5px rgba(16,21,30,.05),0 14px 26px -16px rgba(16,21,30,.18),inset 0 1px 0 rgba(255,255,255,.75)}
.pg-home .card .thumb svg{transition:none}
.pg-home .card:hover .thumb svg{transform:none}

/* ===== Jeu de couleurs (repris du catalogue) sur les petites tuiles =====
   tuile = tint leger de la couleur + icone de la couleur (comme les tuiles
   familles du drawer / les icones de la barre de reassurance). */
.pg-prod .pd-feat-ic,
.pg-prod .pd-trust-ic,
.pg-prod .pd-bba-ic{
  background:color-mix(in srgb,var(--c,#1f6feb) 12%,#fff);color:var(--c,#1f6feb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--c,#1f6feb) 14%,transparent)}

/* atouts produit : or / bleu / rouge (la variable est sur la carte pour teinter tout le bloc) */
.pg-prod .pd-feat:nth-child(1){--c:#d29404}
.pg-prod .pd-feat:nth-child(2){--c:#2563eb}
.pg-prod .pd-feat:nth-child(3){--c:#e5302a}

/* reassurance (sous la galerie) : couleurs ACCUEIL — livraison vert · expedition orange · retours bleu · garantie or */
.pg-prod .pd-trust:nth-child(1){--c:#16a35a}
.pg-prod .pd-trust:nth-child(2){--c:#f4a823}
.pg-prod .pd-trust:nth-child(3){--c:#1f6feb}
.pg-prod .pd-trust:nth-child(4){--c:#fb923c}

/* === Barre de reassurance facon PAGE D'ACCUEIL ===
   cartes separees (gradient + ombre) + tuile d'icone PLEINE couleur + survol qui souleve */
.pg-prod .pd-trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  border:none;background:none;box-shadow:none;margin-bottom:26px}
.pg-prod .pd-trust{background:linear-gradient(180deg,#fff,#f7f9fc);border:1px solid #e3e8f0;
  box-shadow:0 2px 8px rgba(16,21,30,.06);padding:16px;gap:13px}
.pg-prod .pd-trust + .pd-trust{border-left:1px solid #e3e8f0}
/* survol : aucune animation */
.pg-prod .pd-trust:hover{transform:none;border-color:#e3e8f0;
  box-shadow:0 2px 8px rgba(16,21,30,.06)}
.pg-prod .pd-trust-ic{width:46px;height:46px;border-radius:13px;background:var(--c,#1f6feb);color:#fff;
  box-shadow:0 6px 13px -4px color-mix(in srgb,var(--c,#1f6feb) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.pg-prod .pd-trust-ic svg{width:23px;height:23px}

/* assurances carte d'achat : paiement vert · garantie or · retours bleu */
.pg-prod .pd-bbassur li:nth-child(1) .pd-bba-ic{--c:#16a34a}
.pg-prod .pd-bbassur li:nth-child(2) .pd-bba-ic{--c:#d29404}
.pg-prod .pd-bbassur li:nth-child(3) .pd-bba-ic{--c:#2563eb}

/* tuile vehicule (compat) : tint vert « compatible », coherent avec le bloc */
.pg-prod .pd-compat-veh{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.25);color:#15803d}


/* ============================================================
   PANIER (.cart-*) — langage du site (angles droits, finition HD, prix rouge)
   ============================================================ */
.cart{padding:24px 0 56px}
.cart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.cart-head h1{font-size:24px;font-weight:700;color:var(--ink);margin:0}
.cart-head h1 span{font-size:15px;font-weight:600;color:var(--muted)}
.cart-continue{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent)}
.cart-continue svg{width:15px;height:15px}

.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.cart-main{min-width:0}

/* barre livraison offerte */
.cart-free{border:1px solid var(--line);background:#fff;padding:13px 16px;margin-bottom:16px}
.cart-free-txt{font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cart-free-txt b{font-weight:700}
.cart-free.done .cart-free-txt{color:#15803d}
.cart-free.done .cart-free-txt svg{width:17px;height:17px;color:#16a34a}
.cart-free-bar{height:7px;background:#e6ebf3;overflow:hidden;box-shadow:inset 0 1px 1px rgba(16,21,30,.06)}
.cart-free-bar i{display:block;height:100%;background:linear-gradient(90deg,#45d98a,#16a35a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* liste articles */
.cart-items{display:flex;flex-direction:column;gap:12px}
.cart-item{display:grid;grid-template-columns:92px minmax(0,1fr) auto auto auto 34px;gap:16px;align-items:center;
  border:1px solid var(--line);background:#fff;padding:14px}
.ci-thumb{width:92px;height:84px;display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 30%,#fff,#eef2f8)}
.ci-thumb svg{width:46px;height:46px}
.ci-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.ci-brand{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.ci-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.ci-ref{font-size:11.5px;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace}
.ci-compat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#15803d;margin-top:5px}
.ci-compat svg{width:13px;height:13px}
.ci-veh{font-size:11.5px;color:var(--text)}
.ci-change{font-size:11.5px;font-weight:600;color:var(--accent);margin-top:2px}
.ci-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.ci-price .now{font-size:17px;font-weight:600;color:var(--red);line-height:1}
.ci-price .old{font-size:12px;color:var(--muted);text-decoration:line-through}
.ci-price .disc{font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff5249,#d4221c);padding:2px 6px;margin-top:1px}
.ci-qty{display:flex;align-items:center;border:1px solid var(--line);background:#fff}
.ci-qty button{width:32px;height:38px;border:none;background:none;cursor:pointer;font-size:17px;color:#586271;line-height:1}
.ci-qty button:hover{background:var(--surface);color:var(--ink)}
.ci-qty input{width:34px;height:38px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink)}
.ci-stock{font-size:12px;font-weight:600;color:#15803d;display:flex;flex-direction:column;gap:2px;white-space:nowrap;align-items:flex-start}
.ci-stock .ci-sdot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);display:inline-block}
.ci-stock small{font-size:11px;font-weight:600;color:var(--muted)}
.ci-del{width:34px;height:34px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:#8a93a1;transition:.15s}
.ci-del:hover{background:var(--red);border-color:var(--red);color:#fff}
.ci-del svg{width:16px;height:16px}

/* code promo */
.cart-promo{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;padding:13px 16px;margin-top:16px}
.cart-promo-lbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.cart-promo-lbl svg{width:17px;height:17px;color:var(--accent)}
.cart-promo input{flex:1;min-width:0;height:42px;border:1px solid var(--line);background:var(--surface);padding:0 13px;
  font-family:inherit;font-size:13px;color:var(--ink)}
.cart-promo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.cart-promo button{height:42px;padding:0 18px;border:1px solid #2a3650;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  color:#fff;background:linear-gradient(180deg,#28384c,#10151e)}
.cart-promo button:hover{filter:brightness(1.1)}

/* vous aimerez aussi */
.cart-also{margin-top:30px}
.cart-also-h{font-size:12.7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b3340;margin-bottom:13px}
.cart-also-grid{grid-template-columns:repeat(4,1fr)}

/* ===== RÉCAPITULATIF ===== */
.cart-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.cart-sum{border:1px solid var(--line);background:#fff;padding:18px}
.cart-sum-h{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.cs-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text);margin-bottom:10px}
.cs-row b{color:var(--ink);font-weight:600}
.cs-red{color:var(--red) !important}
.cs-green{color:#16a34a !important;font-weight:700 !important}
.cs-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:13px;margin-top:3px;border-top:1px solid var(--line)}
.cs-total span{font-size:15px;font-weight:700;color:var(--ink)}
.cs-total b{font-size:26px;font-weight:700;color:var(--red);letter-spacing:-.02em}
.cs-vat{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:4px}
.cs-checkout{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;margin-top:16px;
  font-size:15px;font-weight:700;color:#fff;background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 8px 18px -7px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.cs-checkout:hover{background:linear-gradient(180deg,#3b86ff,#1466e6)}
.cs-checkout svg{width:18px;height:18px}
.cs-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:11px;text-align:center}
.cs-secure svg{width:14px;height:14px;color:#16a34a}
.cs-pay{display:flex;justify-content:center;gap:8px;margin-top:11px}
.cs-pay img{height:24px;width:auto}

/* réassurance sidebar */
.cart-assur{border:1px solid var(--line);background:#fff;padding:15px 16px;display:flex;flex-direction:column;gap:13px}
.ca-row{display:flex;align-items:center;gap:11px}
.ca-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;background:var(--accent-50);color:var(--accent)}
.ca-ic svg{width:17px;height:17px}
.ca-row b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.ca-row span{font-size:11px;color:var(--muted)}

/* responsive */
@media (max-width:1040px){
  .cart-layout{grid-template-columns:1fr}
  .cart-side{position:static}
  .cart-also-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cart-item{grid-template-columns:72px 1fr;grid-auto-rows:auto}
  .ci-thumb{width:72px;height:64px}
  .ci-price,.ci-qty,.ci-stock,.ci-del{grid-column:2}
  .cart-also-grid{grid-template-columns:1fr}
  .cart-promo{flex-wrap:wrap}
}

/* ===== PANIER : heritage des regles des pages precedentes ===== */
/* reassurance sidebar = meme jeu de couleurs/tuiles que la fiche produit (.pd-bbassur) */
.pg-cart .ca-row:nth-child(1) .ca-ic{--c:#16a35a}   /* livraison : vert */
.pg-cart .ca-row:nth-child(2) .ca-ic{--c:#1f6feb}   /* retours : bleu */
.pg-cart .ca-row:nth-child(3) .ca-ic{--c:#f4a823}   /* garantie : or */
.pg-cart .ca-ic{background:color-mix(in srgb,var(--c,#1f6feb) 12%,#fff);color:var(--c,#1f6feb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--c,#1f6feb) 14%,transparent)}
.pg-cart .ca-row b{font-weight:600}
/* prix total : meme regle prix que le reste du site (700, pas 800) */
.pg-cart .cs-total b{font-weight:600}

/* ===== PANIER : finition HD heritee des pages produit/catalogue ===== */
/* surfaces blanches vernies + ombres en couches (comme .cf-card/.pd-tabs) */
.pg-cart .cart-item,.pg-cart .cart-free,.pg-cart .cart-promo,.pg-cart .cart-assur{
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
/* recap = carte un cran plus presente (comme la carte d'achat produit) */
.pg-cart .cart-sum{background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);border-color:#e6ebf3;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 2px 6px rgba(16,21,30,.06),0 22px 40px -22px rgba(16,21,30,.28),inset 0 1px 0 #ffffff}
/* vignettes articles : degrade radial multi-paliers (anti-banding) */
.pg-cart .ci-thumb{background:radial-gradient(125% 100% at 50% 28%,#ffffff,#f6f8fc 55%,#eef2f8 80%,#e9eef6 100%);border-color:#e6ebf3}
/* champ code promo : creux subtil */
.pg-cart .cart-promo input{background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
/* CTA commander : ombre teintee en couches + reflet (comme le bouton panier produit) */
.pg-cart .cs-checkout{box-shadow:0 1px 1px rgba(10,82,230,.2),0 10px 22px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.34)}
/* titre « Vous aimerez aussi » = meme bandeau que la fiche produit */
.pg-cart .cart-also-h{padding:12px 15px;background:linear-gradient(180deg,#f3f8fe,#e6eff8);border:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}

/* « Passer la commande » : meme regle que « Ajouter au panier » (reduit/centre + sans animation) */
.pg-cart .cs-checkout{transition:none;width:calc(100% - 76px);margin:16px auto 0;height:43px;font-size:13.5px}
.pg-cart .cs-checkout:hover{background:linear-gradient(180deg,#2b7bff,#0a66ff)}

/* boutons CTA achat (Ajouter au panier + Passer la commande) : sans ombre */
.pg-prod .pd-add,.pg-prod .pd-add:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.pg-cart .cs-checkout,.pg-cart .cs-checkout:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}

/* code promo deplace en sidebar : libelle au-dessus, champ + bouton dessous */
.pg-cart .cart-side .cart-promo{flex-wrap:wrap;gap:10px;padding:0 0 14px;overflow:hidden}
.pg-cart .cart-side .cart-promo-lbl{width:100%;margin:0;padding:11px 15px;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2);
  font-size:12.7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b3340}
.pg-cart .cart-side .cart-promo input{flex:1;min-width:0;margin-left:15px}
.pg-cart .cart-side .cart-promo button{margin-right:15px}

/* « Récapitulatif » : meme bandeau pleine largeur que les autres titres */
.pg-cart .cart-sum-h{margin:-18px -18px 14px;padding:12px 18px;color:#2b3340;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}

/* =========================================================
   CHECKOUT (.co-*) — meme langage : angles droits, finition HD,
   chrome sombre, prix rouge, accent bleu, pas d'animation
   ========================================================= */
.checkout{padding:24px 0 56px}

/* fil d'etapes */
.co-steps{display:flex;align-items:center;justify-content:center;margin:2px 0 26px}
.co-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:600;font-size:13px}
.co-step .n{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);
  color:var(--muted);font-size:12.5px;font-weight:700;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.co-step .n svg{width:14px;height:14px}
.co-step.done{color:var(--ink)}
.co-step.done .n{background:linear-gradient(180deg,#22b066,#15924f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.co-step.active{color:var(--ink)}
.co-step.active .n{background:linear-gradient(180deg,#2b7bff,#0a66ff);color:#fff;
  box-shadow:0 0 0 4px var(--accent-50),inset 0 1px 0 rgba(255,255,255,.35)}
.co-sep{width:54px;height:2px;background:var(--line);margin:0 14px}
.co-sep.done{background:var(--green)}

.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.co-main{min-width:0;display:flex;flex-direction:column;gap:16px}

/* cartes formulaire = finition HD heritee du panier */
.co-card{border:1px solid #e6ebf3;padding:18px 20px;
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
/* en-tete = bandeau pleine largeur (meme langage que .cart-sum-h / .cart-also-h) */
.co-card-h{display:flex;align-items:center;gap:11px;margin:-18px -20px 18px;padding:12px 18px;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b3340;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}
.co-card-h .cn{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#23303f,#10151e);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.co-card-h .edit{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--green);text-transform:none}

/* champs : grille 6 colonnes -> largeurs variables, fini les longues cases */
.co-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.co-field{display:flex;flex-direction:column;gap:6px;grid-column:span 3}   /* moitie par defaut */
.co-field.full{grid-column:1 / -1}
.co-field.third{grid-column:span 2}      /* code postal, etc. */
.co-field.twothird{grid-column:span 4}   /* ville, etc. */
.co-field label{font-size:12px;font-weight:600;color:var(--text)}
.co-field input,.co-field select{height:44px;border:1px solid var(--line);padding:0 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.co-field input::placeholder{color:#9aa3b1}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(31,111,235,.12)}

/* rappel connexion */
.co-signin{display:flex;align-items:center;gap:9px;font-size:13px;color:#2b3340;margin-bottom:16px;padding:11px 14px;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.co-signin svg{width:16px;height:16px;color:var(--accent);flex:none}
.co-signin a{font-weight:700;color:var(--accent);margin-left:auto;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid #cfe0fb;border-radius:8px;
  background:linear-gradient(180deg,#ffffff,#f0f6ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:.15s}
.co-signin a:hover{color:#fff;border-color:var(--accent);background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 4px 10px -4px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}

/* options radio (livraison + paiement) */
.co-opts{display:flex;flex-direction:column;gap:10px}
.co-opt{display:flex;align-items:center;gap:13px;border:1px solid #e6ebf3;padding:13px 15px;cursor:pointer;transition:none;
  background:linear-gradient(180deg,#ffffff,#fbfcfe)}
.co-opt:hover{border-color:#c7d2e2}
.co-opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.co-opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid #c2cedd;flex:none;display:grid;place-items:center}
.co-opt.sel .radio{border-color:var(--accent)}
.co-opt.sel .radio:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.co-opt .oic{width:36px;height:36px;flex:none;display:grid;place-items:center;color:var(--ink);
  background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.co-opt .oic svg{width:19px;height:19px}
.co-opt .oic img{height:21px;width:auto}
.co-opt .otxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.co-opt .otxt b{font-size:14px;font-weight:600;color:var(--ink)}
.co-opt .otxt small{font-size:12px;color:var(--muted)}
.co-opt .oprice{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.co-opt .oprice.free{color:var(--green)}
.co-opt .opay{margin-left:auto;display:flex;gap:7px;align-items:center}
.co-opt .opay img{height:22px;width:auto}

/* champs CB reveles */
.co-cardfields{margin-top:13px;padding-top:14px;border-top:1px dashed var(--line)}

/* ---- POINT RELAIS : panneau revele quand l'option est choisie ---- */
.co-relay[hidden]{display:none}
.co-relay{margin-top:11px;padding-top:13px;border-top:1px dashed var(--line)}

/* recherche par code postal / ville */
.co-relay-search{display:flex;align-items:center;border:1px solid var(--line);background:#fff;overflow:hidden;margin-bottom:12px;
  box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.co-relay-search > i{width:42px;display:grid;place-items:center;color:var(--muted);flex:none}
.co-relay-search > i svg{width:17px;height:17px}
.co-relay-search input{flex:1;min-width:0;height:44px;border:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink)}
.co-relay-search input:focus{outline:none}
.co-relay-go{height:44px;padding:0 18px;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;color:#fff;flex:none;
  background:linear-gradient(180deg,#23303f,#10151e)}
.co-relay-go:hover{filter:brightness(1.12)}

.co-relay-found{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px}
.co-relay-found b{color:var(--ink)}

/* mini-carte stylisee (maquette) */
.co-relay-map{position:relative;height:150px;border:1px solid #d9e0ea;margin-bottom:10px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,#e9eef5 0 1px,transparent 1px 38px),
    repeating-linear-gradient(0deg,#e9eef5 0 1px,transparent 1px 38px),
    radial-gradient(120% 120% at 70% 20%,#f3f7fc,#eaeff6)}
.co-relay-pin{position:absolute;width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:grid;place-items:center;box-shadow:0 3px 6px rgba(16,21,30,.3)}
.co-relay-pin:after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:rotate(45deg)}
.co-relay-pin.c{background:#10151e}.co-relay-pin.p{background:#E30613}.co-relay-pin.m{background:#FF6600}

/* legende transporteurs */
.co-relay-leg{display:flex;flex-wrap:wrap;gap:16px;font-size:11.5px;font-weight:600;color:var(--text);margin-bottom:11px}
.co-relay-leg span{display:inline-flex;align-items:center;gap:6px}
.co-relay-leg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.co-relay-leg .c{background:#10151e}.co-relay-leg .p{background:#E30613}.co-relay-leg .m{background:#FF6600}

/* liste des points relais */
.co-relay-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.co-relay-it{display:flex;align-items:center;gap:12px;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);
  padding:11px 13px;cursor:pointer;transition:none}
.co-relay-it:hover{border-color:#c7d2e2}
.co-relay-it.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.co-relay-it .rl-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.co-relay-it .rl-ic svg{width:18px;height:18px}
.co-relay-it .rl-ic.c{background:linear-gradient(180deg,#23303f,#10151e)}
.co-relay-it .rl-ic.p{background:#E30613}
.co-relay-it .rl-ic.m{background:#FF6600}
.co-relay-it .rl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.co-relay-it .rl-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-relay-it .rl-addr{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-relay-it .rl-hours{font-size:11px;font-weight:600;color:var(--green)}
.co-relay-it .rl-hours.closed{color:var(--red)}
.co-relay-it .rl-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.co-relay-it .rl-dist{font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap}
.co-relay-it .rl-radio{width:18px;height:18px;border-radius:50%;border:2px solid #c2cedd;display:grid;place-items:center}
.co-relay-it.sel .rl-radio{border-color:var(--accent)}
.co-relay-it.sel .rl-radio:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}

.co-relay-empty{display:none;font-size:12.5px;color:var(--muted);padding:16px;text-align:center;border:1px dashed var(--line)}

/* code promo (dans le recap) */
.co-promo{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.co-promo-lbl{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px}
.co-promo-lbl svg{width:15px;height:15px;color:var(--accent)}
.co-promo-row{display:flex;gap:8px}
.co-promo-row input{flex:1;min-width:0;height:40px;border:1px solid var(--line);padding:0 12px;font-family:inherit;font-size:13px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.co-promo-row input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.co-promo-row button{height:40px;padding:0 16px;border:1px solid #2a3650;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#23303f,#10151e)}
.co-promo-row button:hover{filter:brightness(1.12)}
.co-promo-row button:disabled{opacity:.55;cursor:default;filter:none}
.co-promo-msg{font-size:12px;font-weight:600;margin-top:8px}
.co-promo-msg:empty{margin-top:0}
.co-promo-msg.ok{color:var(--green)}
.co-promo-msg.err{color:var(--red)}

/* echeancier 3x sans frais (revele quand l'option est choisie) */
.co-3x[hidden]{display:none}
.co-3x{margin-top:11px;padding:13px 15px;border:1px dashed #c9d4e4;background:var(--surface)}
.co-3x-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text);margin-bottom:8px}
.co-3x-row span{display:inline-flex;align-items:center;gap:6px}
.co-3x-row svg{width:14px;height:14px;color:var(--green)}
.co-3x-row b{color:var(--ink);font-weight:700}
.co-3x small{display:block;font-size:11px;color:var(--muted);margin-top:3px}

/* CGV + confidentialite : deux consentements empiles, chacun sa case */
.co-consents{display:flex;flex-direction:column;gap:9px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.co-cgv{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--text);line-height:1.45;cursor:pointer}
.co-cgv input{margin-top:1px;width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.co-cgv a{color:var(--accent);font-weight:600}
.co-cgv a:hover{text-decoration:underline}

/* recap : mini-articles en tete */
.co-mini{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.co-mini-it{display:flex;align-items:center;gap:11px}
.co-mini-it .mth{width:48px;height:46px;border:1px solid #e6ebf3;display:grid;place-items:center;flex:none;position:relative;
  background:radial-gradient(125% 100% at 50% 28%,#ffffff,#f6f8fc 55%,#eef2f8 80%,#e9eef6 100%)}
.co-mini-it .mth svg{width:24px;height:24px}
.co-mini-it .mqty{position:absolute;top:-8px;right:-8px;background:linear-gradient(180deg,#23303f,#10151e);color:#fff;
  font-size:10.5px;font-weight:700;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;box-shadow:0 2px 4px rgba(16,21,30,.25)}
.co-mini-it .mnm{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;min-width:0}
.co-mini-it .mnm small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.co-mini-it .mpr{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}

@media (max-width:1040px){
  .co-layout{grid-template-columns:1fr}
  .co-main{order:2}
  .checkout .cart-side{order:1;position:static}
}
@media (max-width:680px){
  .co-grid{grid-template-columns:1fr}
  .co-field,.co-field.full,.co-field.third,.co-field.twothird{grid-column:1 / -1}
  .co-steps{font-size:0}
  .co-step .n{font-size:12.5px}
  .co-sep{width:24px;margin:0 7px}
}

/* =========================================================
   CONFIRMATION (.cnf-*) — fin du parcours, même langage
   ========================================================= */
.cnf-page{max-width:880px;margin:0 auto;padding:34px 22px 64px}

/* hero */
.cnf-hero{position:relative;text-align:center;margin-bottom:34px}
.cnf-hero::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:340px;height:210px;max-width:90%;
  background:radial-gradient(circle at 50% 38%,rgba(22,163,74,.16),transparent 62%);pointer-events:none}
.cnf-check{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 25%,#22c46e,#13924d);
  box-shadow:0 0 0 8px rgba(22,163,74,.10),0 0 0 16px rgba(22,163,74,.05),0 16px 32px -8px rgba(19,146,77,.6),inset 0 1px 0 rgba(255,255,255,.45);
  animation:cnfPop .5s cubic-bezier(.34,1.56,.64,1) both}
.cnf-check svg{width:40px;height:40px;color:#fff;stroke-width:3}
@keyframes cnfPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.cnf-check{animation:none}}
.cnf-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-bottom:13px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#15803d;
  background:var(--green-50);padding:6px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#16a35a 18%,transparent)}
.cnf-kicker svg{width:13px;height:13px}
.cnf-hero h1{position:relative;z-index:1;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:9px}
.cnf-hero p{position:relative;z-index:1;font-size:14px;color:var(--text);line-height:1.6;max-width:500px;margin:0 auto 16px}
.cnf-num{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;font-weight:600;color:var(--ink);padding:9px 16px;border:1px solid #d7dee8;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff,#f4f7fb);box-shadow:inset 0 1px 0 #fff,0 2px 5px -3px rgba(16,21,30,.3)}
.cnf-num svg{width:15px;height:15px;color:var(--accent)}
.cnf-num b{color:var(--accent)}
.cnf-email{position:relative;z-index:1;font-size:12.5px;color:var(--muted);margin-top:11px}
.cnf-email b{color:var(--ink)}
/* récépissé : n° de commande + e-mail regroupés dans une carte (type ticket) */
.cnf-ticket{position:relative;z-index:1;max-width:430px;margin:6px auto 0;text-align:left;
  background:linear-gradient(180deg,#ffffff,#fbfcfe);border:1px solid #e3e9f1;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 16px 32px -18px rgba(16,21,30,.26),inset 0 1px 0 #fff}
.cnf-tk-row{display:flex;align-items:center;gap:12px;padding:13px 16px}
.cnf-tk-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:color-mix(in srgb,var(--c,#1f6feb) 12%,#fff);color:var(--c,#1f6feb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--c,#1f6feb) 16%,transparent)}
.cnf-tk-ic svg{width:16px;height:16px}
.cnf-tk-l{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.cnf-tk-v{margin-left:auto;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnf-tk-v.mono{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.01em;color:var(--accent)}
.cnf-tk-sep{height:0;margin:0 16px;border-top:1px dashed #d7dee8}
.cnf-ticket .cnf-tk-row:nth-child(1){--c:#1f6feb}
.cnf-ticket .cnf-tk-row:nth-child(3){--c:#16a35a}

/* cartes */
.cnf-card{border:1px solid #e6ebf3;padding:0 0 18px;margin-bottom:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
.cnf-card-h{display:flex;align-items:center;gap:9px;padding:12px 18px;margin-bottom:16px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b3340;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 7px -4px rgba(23,72,160,.2)}
.cnf-card-h svg{width:15px;height:15px;color:var(--accent)}
.cnf-card-b{padding:0 18px}

/* timeline de suivi */
.cnf-tl{display:flex;flex-direction:column}
.cnf-tl-it{display:flex;gap:13px;padding-bottom:18px}
.cnf-tl-it:last-child{padding-bottom:0}
.cnf-tl-l{display:flex;flex-direction:column;align-items:center;width:28px;flex:none}
.cnf-tl-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.cnf-tl-dot svg{width:14px;height:14px;color:#fff}
.cnf-tl-dot.done{background:linear-gradient(180deg,#22b066,#13924d);box-shadow:0 2px 7px rgba(19,146,77,.35)}
.cnf-tl-dot.active{background:linear-gradient(180deg,#2b7bff,#0a66ff);animation:cnfPulse 2.4s ease-in-out infinite}
@keyframes cnfPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-50),0 0 0 4px rgba(31,111,235,.32)}50%{box-shadow:0 0 0 4px var(--accent-50),0 0 0 11px rgba(31,111,235,0)}}
.cnf-tl-dot.pending{background:var(--surface-2);border:1px solid var(--line)}
.cnf-tl-dot.pending svg{color:var(--muted)}
.cnf-tl-line{flex:1;width:2px;background:var(--line);margin:3px 0;min-height:22px}
.cnf-tl-line.done{background:var(--green)}
.cnf-tl-c{padding-top:2px;flex:1;min-width:0}
.cnf-tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cnf-tl-lbl{font-size:13.5px;font-weight:600;color:var(--ink)}
.cnf-tl-lbl.muted{color:var(--muted);font-weight:600}
.cnf-tl-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px}
.cnf-tl-tag.ok{background:var(--green-50);color:#15803d}
.cnf-tl-tag.now{background:var(--accent-50);color:var(--accent)}
.cnf-tl-d{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.cnf-tl-date{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--muted);margin-top:5px}
.cnf-tl-date svg{width:12px;height:12px}
/* l'étape en cours est légèrement mise en avant */
.cnf-tl-it.is-active .cnf-tl-c{background:linear-gradient(180deg,#f5f9ff,#eef4ff);border:1px solid #d8e6fb;
  padding:9px 13px 11px;box-shadow:inset 0 1px 0 #fff}
.cnf-tl-it.is-active .cnf-tl-date{color:var(--accent)}

/* bouton suivi */
.cnf-track{display:flex;align-items:center;justify-content:center;gap:9px;width:36%;margin:16px auto 0;min-height:46px;padding:8px 14px;text-align:center;line-height:1.25;
  color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.01em;
  background:linear-gradient(180deg,#2b7bff,#0a66ff);box-shadow:0 8px 18px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.cnf-track:hover{background:linear-gradient(180deg,#3b86ff,#1466e6)}
.cnf-track svg{width:17px;height:17px}

/* infos livraison : tuiles vernies, badge-icône coloré + liseré d'accent */
.cnf-di{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cnf-di-b{position:relative;border:1px solid #e6ebf3;padding:15px 16px;overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fbfcfe);transition:transform .18s,box-shadow .18s;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 8px 18px -14px rgba(16,21,30,.2),inset 0 1px 0 #fff}
.cnf-di-b:hover{transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 26px -14px rgba(16,21,30,.3),inset 0 1px 0 #fff}
.cnf-di-b:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--accent))}
.pg-cnf .cnf-di-b:nth-child(1){--c:#1f6feb}   /* adresse : bleu */
.pg-cnf .cnf-di-b:nth-child(2){--c:#16a35a}   /* livraison : vert */
.cnf-di-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.cnf-di-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#1f6feb) 12%,#fff);color:var(--c,#1f6feb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--c,#1f6feb) 16%,transparent)}
.cnf-di-ic svg{width:16px;height:16px}
.cnf-di-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cnf-di-v{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.cnf-di-s{font-size:12.5px;color:var(--text);margin-top:4px;line-height:1.5}
.cnf-di-eta{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:11.5px;font-weight:700;color:#15803d;
  background:var(--green-50);padding:5px 10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,#16a35a 16%,transparent)}
.cnf-di-eta svg{width:13px;height:13px}

/* bouton imprimer */
.cnf-print{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;margin-top:14px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
.cnf-print:hover{border-color:var(--accent);color:var(--accent)}
.cnf-print svg{width:15px;height:15px}

/* grille actions */
.cnf-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:2px 0 14px}
.cnf-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:17px 10px;text-align:center;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);color:var(--ink);font-weight:600;font-size:12.5px;
  box-shadow:0 1px 2px rgba(16,21,30,.04);transition:transform .15s,box-shadow .15s,border-color .15s}
.cnf-act:hover{transform:translateY(-2px);border-color:#c7d2e2;box-shadow:0 10px 20px -10px rgba(16,21,30,.32)}
.cnf-act svg{width:18px;height:18px;color:var(--accent);box-sizing:content-box;padding:8px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.cnf-act.primary{background:linear-gradient(180deg,#2b7bff,#0a66ff);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(10,102,255,.55)}
.cnf-act.primary svg{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.cnf-act.primary:hover{background:linear-gradient(180deg,#3b86ff,#1466e6);box-shadow:0 12px 24px -8px rgba(10,102,255,.6)}

/* CTA parrainage */
.cnf-ref{display:flex;align-items:center;gap:18px;padding:22px 24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#10151e,#1b2740);border:1px solid #20283a}
.cnf-ref:before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,168,35,.22),transparent 65%)}
.cnf-ref:after{content:"";position:absolute;left:-30px;bottom:-60px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,111,235,.20),transparent 65%)}
.cnf-ref-ic{position:relative;z-index:1;flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#3a2700;
  background:radial-gradient(120% 120% at 50% 25%,#ffce6b,#f4a823);
  box-shadow:0 8px 20px -6px rgba(244,168,35,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.cnf-ref-ic svg{width:26px;height:26px}
.cnf-ref-t{flex:1;position:relative;z-index:1}
.cnf-ref-t h3{font-size:16.5px;font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:-.01em}
.cnf-ref-amt{color:#ffd27a;font-weight:700}
.cnf-ref-t p{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;max-width:430px}
.cnf-ref-btn{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#fff,#eef2f7);color:var(--ink);font-weight:700;font-size:13px;padding:12px 18px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5),inset 0 1px 0 #fff}
.cnf-ref-btn svg{width:15px;height:15px;color:var(--accent)}
.cnf-ref-btn:hover{background:#fff;color:var(--accent)}

/* confettis (one-shot au chargement) */
.cnf-confetti{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.cnf-cp{position:absolute;width:10px;height:10px;top:-16px;animation:cnfFall linear forwards}
@keyframes cnfFall{0%{transform:translateY(-16px) rotate(0);opacity:1}100%{transform:translateY(102vh) rotate(720deg);opacity:0}}

@media (max-width:640px){
  .cnf-di{grid-template-columns:1fr}
  .cnf-acts{grid-template-columns:1fr 1fr}
}

/* =========================================================
   SUIVI DE COMMANDE (.trk-*) — réutilise .cnf-card / .cnf-tl /
   .co-mini / .cs-* ; même langage HD, angles droits, sans anim superflue
   ========================================================= */
.trk-page{max-width:880px;margin:0 auto;padding:26px 22px 64px}

/* fil d'ariane */
.trk-crumb{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:16px}
.trk-crumb a:hover{color:var(--accent)}
.trk-crumb svg{width:13px;height:13px;color:#c2cbd8}
.trk-crumb span{color:var(--ink);font-weight:600}

/* en-tête */
.trk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.trk-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:9px}
.trk-kicker svg{width:14px;height:14px;color:var(--accent)}
.trk-kicker b{color:var(--ink);letter-spacing:.02em}
.trk-kicker .mono{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--accent);font-weight:600}
.trk-head h1{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.trk-head p{font-size:13.5px;color:var(--text)}
.trk-head p b{color:var(--ink);font-weight:600}
.trk-eta-hl{color:var(--accent)!important}
/* badge statut */
.trk-badge{flex:none;display:flex;align-items:center;gap:11px;padding:12px 16px;
  background:linear-gradient(180deg,#f5f9ff,#eaf2ff);border:1px solid #d3e3fb;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -14px rgba(16,21,30,.3)}
.trk-badge-dot{width:11px;height:11px;border-radius:50%;flex:none;background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 0 0 4px rgba(31,111,235,.16);animation:trkPulse 2s ease-in-out infinite}
@keyframes trkPulse{0%,100%{box-shadow:0 0 0 4px rgba(31,111,235,.16)}50%{box-shadow:0 0 0 8px rgba(31,111,235,0)}}
.trk-badge-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.trk-badge-t b{font-size:15px;font-weight:700;color:var(--accent)}
.trk-badge.delivered{background:linear-gradient(180deg,#f1faf4,#e7f6ee);border-color:#c4e8d3}
.trk-badge.delivered .trk-badge-dot{background:linear-gradient(180deg,#22b066,#13924d);box-shadow:none;animation:none}
.trk-badge.delivered .trk-badge-t b{color:#15803d}
@media (prefers-reduced-motion:reduce){.trk-badge-dot{animation:none}}

/* stepper horizontal */
.trk-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 0 2px}
.trk-rail{position:absolute;left:0;right:0;top:20px;height:3px;margin:0 10%;background:var(--surface-2);overflow:hidden}
.trk-rail-fill{position:absolute;left:0;top:0;bottom:0;width:var(--prog,0%);
  background:linear-gradient(90deg,#22b066,#1f6feb);box-shadow:0 0 0 1px rgba(31,111,235,.06)}
.trk-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;z-index:1}
.trk-node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);
  border:2px solid var(--surface-2);color:var(--muted);box-shadow:inset 0 1px 0 #fff}
.trk-node svg{width:17px;height:17px}
.trk-step.done .trk-node{background:linear-gradient(180deg,#22b066,#13924d);border-color:transparent;color:#fff;
  box-shadow:0 3px 8px rgba(19,146,77,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.trk-step.active .trk-node{background:linear-gradient(180deg,#2b7bff,#0a66ff);border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(10,102,255,.4),inset 0 1px 0 rgba(255,255,255,.4);animation:trkPulse 2.2s ease-in-out infinite}
.trk-step-lbl{font-size:12px;font-weight:600;color:var(--ink)}
.trk-step:not(.done):not(.active) .trk-step-lbl{color:var(--muted)}
.trk-step-date{font-size:10.5px;font-weight:600;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:-.01em}

/* transporteur */
.trk-carrier{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px 16px;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);
  box-shadow:0 1px 1px rgba(16,21,30,.03),inset 0 1px 0 #fff}
.trk-carrier-l{display:flex;align-items:center;gap:13px;min-width:0}
.trk-carrier-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#eef4ff,#dbe8ff);color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(31,111,235,.16)}
.trk-carrier-ic svg{width:22px;height:22px}
.trk-carrier-nm{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;color:var(--ink)}
.trk-carrier-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-50);padding:2px 8px}
.trk-carrier-sub{font-size:12px;color:var(--muted);margin-top:2px}
.trk-tn{text-align:right}
.trk-tn-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.trk-tn-row{display:flex;align-items:center;gap:8px}
.trk-tn-v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.trk-copy{width:32px;height:32px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--muted);transition:.15s}
.trk-copy:hover{border-color:var(--accent);color:var(--accent)}
.trk-copy svg{width:14px;height:14px}
.trk-copy.ok{border-color:var(--green);color:var(--green);background:var(--green-50)}
/* eta */
.trk-eta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 16px;
  background:linear-gradient(180deg,#f5f9ff,#eef4ff);border:1px solid #d8e6fb;box-shadow:inset 0 1px 0 #fff}
.trk-eta-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(31,111,235,.16)}
.trk-eta-ic svg{width:17px;height:17px}
.trk-eta-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.trk-eta b{font-size:14px;font-weight:700;color:var(--ink)}
.trk-ext{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent);
  padding:7px 13px;background:#fff;border:1px solid #d3e3fb;transition:.15s}
.trk-ext:hover{background:var(--accent);color:#fff;border-color:transparent}
.trk-ext svg{width:14px;height:14px}

/* ---- charte appliquée intégralement sur suivi-commande ----
   type de bandeau aligné (13px/.05em comme checkout), couleurs par sens sur
   adresse/contact, AUCUN mouvement au survol (élévation statique conservée) */
.pg-trk .cnf-card-h{font-size:13px;letter-spacing:.05em}
.pg-trk .cnf-di-b:nth-child(1){--c:#1f6feb}   /* adresse : bleu */
.pg-trk .cnf-di-b:nth-child(2){--c:#16a35a}   /* contact / notifications : vert */
.pg-trk .cnf-di-b{transition:none}
.pg-trk .cnf-di-b:hover{transform:none;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 8px 18px -14px rgba(16,21,30,.2),inset 0 1px 0 #fff}
.pg-trk .cnf-acts .cnf-act{transition:none}
.pg-trk .cnf-acts .cnf-act:hover{transform:none}

@media (max-width:640px){
  .trk-head{flex-direction:column}
  .trk-badge{align-self:stretch}
  .trk-steps{grid-template-columns:1fr;gap:0}
  .trk-rail{left:18px;right:auto;top:20px;bottom:20px;width:3px;height:auto;margin:0}
  .trk-rail-fill{left:0;top:0;width:3px!important;height:var(--prog,0%)}
  .trk-step{flex-direction:row;gap:12px;text-align:left;padding:6px 0}
  .trk-step-date{margin-left:auto}
  .trk-carrier{flex-direction:column;align-items:flex-start}
  .trk-tn{text-align:left}
  .trk-ext{margin-left:0}
}

/* =========================================================
   PAIEMENT NON ABOUTI (.pf-*) — miroir « rouge » de la confirmation :
   réutilise .cnf-page / .cnf-hero / .cnf-ticket / .cnf-card / .co-mini / .cs-*
   ========================================================= */
/* bandeaux de conteneur = recette CHECKOUT (.co-card-h) : pastille sombre
   numérotée + titre 13px/.05em (au lieu de l'icône bleue de la confirmation) */
.pg-pf .cnf-card-h{gap:11px;font-size:13px;letter-spacing:.05em}
.pg-pf .cnf-card-h .cn{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:linear-gradient(180deg,#23303f,#10151e);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* hero rouge (halo + rond d'échec) */
.pf-hero::before{background:radial-gradient(circle at 50% 38%,rgba(229,48,42,.15),transparent 62%)}
.cnf-check.pf-x{background:radial-gradient(120% 120% at 50% 25%,#f0554e,#c9251e);
  box-shadow:0 0 0 8px rgba(229,48,42,.10),0 0 0 16px rgba(229,48,42,.05),0 16px 32px -8px rgba(201,37,30,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.cnf-check.pf-x svg{stroke-width:3.2}
.cnf-kicker.pf-kicker{color:#b42318;background:var(--red-50);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#e5302a 18%,transparent)}
.pf-ticket .cnf-tk-row:nth-child(1){--c:#e5302a}
.pf-ticket .cnf-tk-row:nth-child(3){--c:#10151e}

/* carte reprise = mise en avant */
.pf-retry-card{border-color:#d3e3fb}
.pf-retry{display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;min-width:300px;margin:2px auto 0;
  min-height:50px;padding:8px 34px;color:#fff;font-weight:700;font-size:14.5px;letter-spacing:.01em;
  background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 10px 22px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.pf-retry:hover{background:linear-gradient(180deg,#3b86ff,#1466e6)}
.pf-retry svg{width:18px;height:18px}
.pf-or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-or::before,.pf-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pf-alts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
/* moyens de paiement = logos officiels a droite (langage .opay du checkout),
   hover statique sans mouvement (charte) */
.pf-alt{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.pf-alt:hover{border-color:var(--accent);color:var(--accent)}
.pf-alt-txt{min-width:0}
.pf-alt-logos{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.pf-alt-logos img{height:21px;width:auto;display:block}

/* causes probables */
.pf-reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pf-reasons li{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:inset 0 1px 0 #fff}
.pf-r-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;color:#b42318;
  background:color-mix(in srgb,#e5302a 10%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,#e5302a 14%,transparent)}
.pf-r-ic svg{width:16px;height:16px}
.pf-reasons b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.pf-reasons small{font-size:12px;color:var(--muted);line-height:1.5}
.pf-tip{display:flex;align-items:center;gap:9px;margin-top:13px;padding:11px 14px;font-size:12.5px;font-weight:600;color:#8a5a00;
  background:var(--amber-50);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f4a823 22%,transparent)}
.pf-tip svg{width:16px;height:16px;flex:none;color:#e08a00}

/* réassurance */
.pf-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:2px 0 14px}
.pf-trust-it{display:flex;align-items:center;gap:11px;padding:14px 15px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.pf-t-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,var(--c,#16a35a) 16%,transparent);
  background:color-mix(in srgb,var(--c,#16a35a) 12%,#fff);color:var(--c,#16a35a)}
.pf-t-ic svg{width:18px;height:18px}
.pf-t-ic.ok{--c:#16a35a} .pf-t-ic.blue{--c:#1f6feb} .pf-t-ic.amber{--c:#f4a823}
.pf-trust-it b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.pf-trust-it small{font-size:11.5px;color:var(--muted)}
.pf-acts{grid-template-columns:repeat(3,1fr)}
/* charte : pas d'animation/mouvement au survol sur ces 3 boutons */
.pf-acts .cnf-act{transition:none}
.pf-acts .cnf-act:hover{transform:none}

@media (max-width:640px){
  .pf-alts{grid-template-columns:1fr}
  .pf-trust{grid-template-columns:1fr}
  .pf-acts{grid-template-columns:1fr}
}

/* =========================================================
   AUTH (.au-*) — gabarit connexion / inscription / mdp / vérif :
   panneau marque sombre + formulaire, même langage HD, angles droits
   ========================================================= */
.au-page{display:flex;justify-content:center;padding:40px 22px 60px}
.au-wrap{display:grid;grid-template-columns:minmax(0,410px) minmax(0,440px);width:100%;max-width:880px;
  border:1px solid #e6ebf3;overflow:hidden;background:#fff;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 30px 60px -28px rgba(16,21,30,.34),inset 0 1px 0 #fff}
/* variante colonne unique (mdp-oublié / vérif e-mail / reset) */
.au-wrap.solo{grid-template-columns:minmax(0,440px);max-width:440px}

/* ---- panneau marque (sombre) ---- */
.au-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:32px 30px;
  background:linear-gradient(160deg,#10151e 0%,#161d2a 45%,#1b2740 100%);color:#fff}
.au-aside::before{content:"";position:absolute;right:-60px;top:-50px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,111,235,.28),transparent 66%);pointer-events:none}
.au-aside::after{content:"";position:absolute;left:-50px;bottom:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,168,35,.14),transparent 66%);pointer-events:none}
.au-logo{position:relative;z-index:1}
.au-logo .lmono{height:34px}
.au-aside-mid{position:relative;z-index:1;margin-top:6px}
.au-aside-mid h2{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.au-aside-mid p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.66);max-width:330px}
.au-benes{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.au-benes li{display:flex;align-items:center;gap:12px}
.au-b-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#1f6feb) 26%,#10151e);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px color-mix(in srgb,var(--c,#1f6feb) 40%,transparent)}
.au-b-ic svg{width:18px;height:18px}
.au-b-ic.blue{--c:#1f6feb} .au-b-ic.green{--c:#16a35a} .au-b-ic.amber{--c:#f4a823}
.au-benes b{display:block;font-size:13.5px;font-weight:600;color:#fff}
.au-benes small{font-size:11.5px;color:rgba(255,255,255,.55)}
.au-aside-foot{position:relative;z-index:1;margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.5)}
.au-aside-foot svg{width:14px;height:14px;color:#3ecf8e}

/* ---- formulaire ---- */
.au-main{padding:34px 34px 30px;display:flex;flex-direction:column}
.au-head h1{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.au-head p{font-size:13px;color:var(--text)}

/* segment particulier / pro */
.au-seg{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 20px;border:1px solid var(--line);
  background:var(--surface);padding:3px}
.au-seg-b{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;font-size:12.5px;font-weight:600;
  color:var(--muted);letter-spacing:.01em}
.au-seg-b svg{width:15px;height:15px}
.au-seg-b.active{color:var(--ink);background:#fff;
  box-shadow:0 1px 2px rgba(16,21,30,.1),inset 0 1px 0 #fff;border:1px solid #e2e8f1}

/* champs */
.au-form{display:flex;flex-direction:column;gap:14px}
.au-field{display:flex;flex-direction:column;gap:6px}
.au-field label{font-size:12px;font-weight:600;color:var(--text)}
.au-label-row{display:flex;align-items:center;justify-content:space-between}
.au-forgot{font-size:11.5px;font-weight:600;color:var(--accent)}
.au-forgot:hover{text-decoration:underline}
.au-input{display:flex;align-items:center;border:1px solid var(--line);background:linear-gradient(180deg,#f7f9fc,#f1f4f9);
  box-shadow:inset 0 1px 2px rgba(16,21,30,.05);transition:border-color .15s,box-shadow .15s,background .15s}
.au-input > i{width:42px;flex:none;display:grid;place-items:center;color:var(--muted)}
.au-input > i svg{width:16px;height:16px}
.au-input input{flex:1;min-width:0;height:46px;border:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);padding:0 4px 0 0}
.au-input input:focus{outline:none}
.au-input:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.au-input input::placeholder{color:#9aa3b1}
.au-eye{width:44px;flex:none;border:none;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.au-eye:hover{color:var(--ink)}
.au-eye svg{width:16px;height:16px}

/* case à cocher */
.au-check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text);cursor:pointer;margin-top:2px}
.au-check input{width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.au-cgv{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--text);line-height:1.45;cursor:pointer}
.au-cgv input{margin-top:1px;width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.au-cgv a{color:var(--accent);font-weight:600}
.au-cgv a:hover{text-decoration:underline}

/* bouton principal */
.au-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin-top:6px;cursor:pointer;
  border:none;font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 8px 18px -7px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.au-submit:hover{background:linear-gradient(180deg,#3b86ff,#1466e6)}
.au-submit svg{width:18px;height:18px}

/* séparateur "ou" */
.au-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* connexions sociales */
.au-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.au-soc{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;cursor:pointer;
  border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcfe);font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);
  box-shadow:0 1px 2px rgba(16,21,30,.04)}
.au-soc:hover{border-color:#c7d2e2}
.au-soc svg{display:block}

/* lien bas de carte */
.au-alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--text)}
.au-alt a{font-weight:700;color:var(--accent)}
.au-alt a:hover{text-decoration:underline}

/* mot de passe : jauge de robustesse (inscription) */
.au-strength{display:flex;gap:5px;margin-top:2px}
.au-strength i{flex:1;height:4px;background:var(--surface-2);transition:background .2s}
.au-strength[data-lvl="1"] i:nth-child(-n+1){background:#e5302a}
.au-strength[data-lvl="2"] i:nth-child(-n+2){background:#f4a823}
.au-strength[data-lvl="3"] i:nth-child(-n+3){background:#3aa564}
.au-strength[data-lvl="4"] i{background:#16a35a}
.au-strength-txt{font-size:11px;font-weight:600;color:var(--muted);margin-top:5px}

/* grille prénom/nom */
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* état "e-mail envoyé" (mot de passe oublié) */
.au-sent{margin-top:6px;padding:26px 22px;text-align:center;border:1px solid var(--line);
  background:linear-gradient(180deg,#f4fbf6,#fff);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.au-sent-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:12px;
  color:#fff;background:linear-gradient(180deg,#1eb567,#16a35a);
  box-shadow:0 8px 18px -8px rgba(22,163,90,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.au-sent-ic svg{width:26px;height:26px}
.au-sent h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--ink)}
.au-sent p{margin:0 auto 16px;max-width:340px;font-size:13.5px;line-height:1.5;color:var(--text)}
.au-sent .au-resend{width:auto;padding:0 18px}
/* variantes couleur de l'état (vérif e-mail : en attente = bleu, erreur = rouge) */
.au-sent.is-blue{background:linear-gradient(180deg,#f5f9ff,#fff)}
.au-sent.is-blue .au-sent-ic{background:linear-gradient(180deg,#2b7bff,#0a66ff);box-shadow:0 8px 18px -8px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.au-sent.is-red{background:linear-gradient(180deg,#fef2f0,#fff)}
.au-sent.is-red .au-sent-ic{background:linear-gradient(180deg,#f0554e,#c9251e);box-shadow:0 8px 18px -8px rgba(201,37,30,.55),inset 0 1px 0 rgba(255,255,255,.35)}
/* sélecteur d'aperçu d'états (maquette) */
.ve-switch{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.ve-switch span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ve-switch button{font-family:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;padding:6px 12px;
  border:1px solid var(--line);background:#fff}
.ve-switch button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}

@media (max-width:820px){
  .au-wrap{grid-template-columns:1fr;max-width:440px}
  .au-aside{display:none}
  .au-wrap.solo{max-width:440px}
}
@media (max-width:480px){
  .au-social{grid-template-columns:1fr}
  .au-row{grid-template-columns:1fr}
}

/* =========================================================
   ÉTAT INVITÉ vs CONNECTÉ
   Carnet connecté / Rappels entretiens / sidebar « véhicule connecté »
   = actifs (live + animés) UNIQUEMENT quand body.is-connected (compte ouvert).
   Visiteur (défaut) => grisés, animations coupées, sidebar verrouillée.
   ========================================================= */
/* chips outils : grisés en invité, sans animation */
body:not(.is-connected) .catnav .quick a.q-carnet,
body:not(.is-connected) .catnav .quick .qdd-btn{opacity:.5;filter:grayscale(.5)}
body:not(.is-connected) .catnav .quick a.q-carnet svg,
body:not(.is-connected) .catnav .quick .qdd-bell{animation:none !important}
body:not(.is-connected) .qdd-cnt{display:none}
body:not(.is-connected) .qdd-caret{opacity:.5}

/* sidebar « véhicule connecté » : DÉSACTIVÉE + RÉTRACTÉE en invité
   (on ne garde que l'en-tête, replié et grisé — pas d'overlay) */
.pg-home:not(.is-connected) .vpop{opacity:.72;filter:grayscale(.7);pointer-events:none}
.pg-home:not(.is-connected) .vpop *{animation:none !important}
.pg-home:not(.is-connected) .vpop > :not(.vtop){display:none}
.pg-home:not(.is-connected) .vtop{padding:13px 16px;border-bottom:0}
.pg-home:not(.is-connected) .vtop .vid,
.pg-home:not(.is-connected) .vtop .plate-mini{display:none}
/* déconnecté : pastille FIGÉE (pas d'animation) ; elle ne pulse qu'en mode connecté */
.pg-home:not(.is-connected) .connrow .dot{background:#9aa3b1;box-shadow:none;animation:none !important}
.pg-home:not(.is-connected) .connrow .dot::after{display:none !important}
.pg-home:not(.is-connected) .connrow .conn::after{content:" — désactivé";color:rgba(255,255,255,.55);font-weight:600}

/* =========================================================
   RETOURS (.ret-*) — réutilise le layout CHECKOUT (.co-layout /
   .co-card / .co-card-h pastille numérotée / .co-opt / .cart-side / .co-mini)
   ; cartes numérotées = flux commande → articles → motif → mode, récap sticky
   ========================================================= */
/* bandeau droit de rétractation (note légale, teinte bleue sobre) */
.ret-legal{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:13px 16px;
  background:linear-gradient(180deg,#f5f9ff,#eef4ff);border:1px solid #d8e6fb;box-shadow:inset 0 1px 0 #fff}
.ret-legal-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(31,111,235,.16)}
.ret-legal-ic svg{width:17px;height:17px}
.ret-legal p{font-size:12.5px;line-height:1.6;color:var(--text)}
.ret-legal p b{color:var(--ink);font-weight:600}

/* motifs : grille 2 colonnes de .co-opt (l'icône fait office de repère) */
.ret-motifs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ret-motifs .co-opt{align-items:center}

/* articles à retourner : cases à cocher (angles droits) + vignette + qté + prix */
.ret-arts{display:flex;flex-direction:column;gap:10px}
.ret-art{display:flex;align-items:center;gap:13px;border:1px solid #e6ebf3;padding:12px 15px;cursor:pointer;
  background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04);transition:none}
.ret-art:hover{border-color:#c7d2e2}
.ret-art.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.ret-art .chk{width:20px;height:20px;flex:none;border:2px solid #c2cedd;display:grid;place-items:center;color:#fff}
.ret-art.sel .chk{border-color:var(--accent);background:var(--accent)}
.ret-art .chk svg{width:13px;height:13px;opacity:0}
.ret-art.sel .chk svg{opacity:1}
.ret-art .th{width:48px;height:46px;flex:none;position:relative;display:grid;place-items:center;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f4f7fb)}
.ret-art .th svg{width:24px;height:24px}
.ret-art .th .q{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;background:linear-gradient(180deg,#23303f,#10151e);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ret-art .nm{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;min-width:0}
.ret-art .nm small{display:block;color:var(--muted);font-weight:500;font-size:11px;margin-top:1px}
.ret-art .qty{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.ret-art .qty label{font-size:11px;font-weight:600;color:var(--muted)}
.ret-art .qty select{height:32px;border:1px solid var(--line);background:#fff;padding:0 8px;font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.ret-art .pr{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none;width:66px;text-align:right}

/* petit rappel sous une carte */
.ret-hint{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 13px;font-size:12px;font-weight:600;color:#8a5a00;
  background:var(--amber-50);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f4a823 22%,transparent)}
.ret-hint svg{width:15px;height:15px;flex:none;color:#e08a00}

/* champ commentaire / photos */
.ret-field{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.ret-field > label{font-size:12px;font-weight:600;color:var(--text)}
.ret-field > label span{font-weight:500;color:var(--muted)}
.ret-textarea{min-height:82px;resize:vertical;border:1px solid var(--line);padding:11px 13px;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.ret-textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.ret-textarea::placeholder{color:#9aa3b1}

/* zone d'upload photos */
.ret-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px;text-align:center;cursor:pointer;
  border:1.5px dashed #c2cedd;background:linear-gradient(180deg,#fff,#fbfcfe);transition:border-color .15s,background .15s}
.ret-drop:hover{border-color:var(--accent);background:var(--accent-50)}
.ret-drop-ic{width:40px;height:40px;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,#fff);box-shadow:inset 0 0 0 1px rgba(31,111,235,.14)}
.ret-drop-ic svg{width:20px;height:20px}
.ret-drop b{font-size:13px;font-weight:600;color:var(--ink)}
.ret-drop small{font-size:11.5px;color:var(--muted)}
.ret-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ret-thumb{width:60px;height:60px;flex:none;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.ret-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* badge « recommandé » dans le nom d'un mode */
.ret-badge{display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:2px 8px;font-size:10px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.ret-badge svg{width:11px;height:11px}
.ret-badge.reco{color:var(--accent);background:var(--accent-50);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}

/* bouton valider (miroir de .cs-checkout, bleu) */
.ret-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin-top:16px;cursor:pointer;
  border:none;font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(180deg,#2b7bff,#0a66ff);
  box-shadow:0 8px 18px -7px rgba(10,102,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.ret-submit:hover{background:linear-gradient(180deg,#3b86ff,#1466e6)}
.ret-submit svg{width:18px;height:18px}
.ret-submit.shake{animation:retShake .45s}
@keyframes retShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (max-width:900px){
  .ret-motifs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ret-art .qty label{display:none}
  .ret-art .pr{width:auto}
}

/* =========================================================
   RÉCLAMATION (.rec-*) — colonne centrée (form sans récap) ;
   réutilise .co-card / .co-card-h pastille / .co-opt / .ret-* (textarea/drop/thumbs)
   ========================================================= */
.rec-page{max-width:820px;margin:0 auto;padding:26px 22px 64px}
.rec-head{margin-bottom:18px}
.rec-head h1{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.rec-head p{font-size:13.5px;line-height:1.6;color:var(--text);max-width:640px}

/* bandeau promesse (vert, engagement 24h) */
.rec-promise{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding:15px 18px;
  background:linear-gradient(180deg,#f1faf4,#e7f6ee);border:1px solid #c4e8d3;box-shadow:inset 0 1px 0 #fff}
.rec-promise-ic{width:42px;height:42px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#1eb567,#16a35a);box-shadow:0 6px 14px -6px rgba(22,163,90,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.rec-promise-ic svg{width:20px;height:20px}
.rec-promise b{display:block;font-size:14px;font-weight:700;color:#14532d}
.rec-promise span{display:block;font-size:12px;color:#166534;line-height:1.5;margin-top:2px}

.rec-form{display:flex;flex-direction:column;gap:16px}

/* champ commande / date avec icône (langage .au-input, angles droits) */
.rec-order{display:flex;align-items:center;border:1px solid var(--line);background:linear-gradient(180deg,#f7f9fc,#f1f4f9);
  box-shadow:inset 0 1px 2px rgba(16,21,30,.05);transition:border-color .15s,box-shadow .15s,background .15s}
.rec-order > i{width:42px;flex:none;display:grid;place-items:center;color:var(--muted)}
.rec-order > i svg{width:16px;height:16px}
.rec-order input{flex:1;min-width:0;height:44px;border:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);padding:0 12px 0 0}
.rec-order input:focus{outline:none}
.rec-order:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.rec-order input::placeholder{color:#9aa3b1}

/* chips gravité (couleur par niveau, à la sélection) */
.rec-grav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rec-chip{display:flex;flex-direction:column;gap:2px;padding:12px 14px;cursor:pointer;text-align:left;font-family:inherit;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04);transition:none}
.rec-chip:hover{border-color:#c7d2e2}
.rec-chip b{font-size:13.5px;font-weight:700;color:var(--ink)}
.rec-chip small{font-size:11.5px;color:var(--muted)}
.rec-chip.sel.low{border-color:#eab308;background:#fefce8;box-shadow:0 0 0 3px rgba(234,179,8,.14)}
.rec-chip.sel.low b{color:#a16207}
.rec-chip.sel.med{border-color:#ea580c;background:#fff7ed;box-shadow:0 0 0 3px rgba(234,88,12,.14)}
.rec-chip.sel.med b{color:#c2410c}
.rec-chip.sel.high{border-color:var(--red);background:var(--red-50);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent)}
.rec-chip.sel.high b{color:#b42318}

/* alerte sécurité (urgent) */
.rec-warn[hidden]{display:none}
.rec-warn{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:13px 15px;
  background:linear-gradient(180deg,#fef2f0,#fee8e5);border:1px solid color-mix(in srgb,var(--red) 26%,transparent);box-shadow:inset 0 1px 0 #fff}
.rec-warn-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#b42318;
  background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 16%,transparent)}
.rec-warn-ic svg{width:17px;height:17px}
.rec-warn p{font-size:12.5px;line-height:1.55;color:#7c2d12}
.rec-warn p b{font-weight:700;color:#7c2d12}

/* solutions : liste 1 colonne (radios) */
.rec-sols{gap:9px}

/* engagements + barre d'envoi */
.rec-consents{display:flex;flex-direction:column;gap:11px;padding:16px 18px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.rec-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.rec-submit-bar p{font-size:12.5px;color:var(--text);line-height:1.5;flex:1;min-width:200px}
.rec-submit-bar p b{color:var(--ink);font-weight:600}
.rec-submit-bar a{color:var(--accent);font-weight:600}
.rec-submit-acts{display:flex;align-items:center;gap:10px}
.rec-cancel{display:inline-flex;align-items:center;height:50px;padding:0 20px;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:#fff}
.rec-cancel:hover{border-color:#c7d2e2}

@media (max-width:640px){
  .rec-grav{grid-template-columns:1fr}
  .rec-submit-bar{flex-direction:column;align-items:stretch}
  .rec-submit-acts{justify-content:space-between}
}

/* =========================================================
   RÈGLE GLOBALE — TITRES DE PAGE (05/07/2026)
   Tout titre de page (le « nom » de la page) : CAPITALES + bold réduit (600).
   Placé en fin de feuille pour l'emporter sur les définitions par page.
   ⇒ appliquer aux pages FUTURES via ces mêmes classes de titre partagées.
   (n'affecte PAS les titres de contenu : nom produit .pd-title, catégorie
    catalogue .st, hero marketing — traitements distincts.)
   ========================================================= */
.cart-head h1,
.trk-head h1,
.au-head h1,
.rec-head h1,
.ac-head h1,
.gr-head h1,
.ce-head h1,
.vl-head h1,
.dg-head h1,
.ia-head h1,
.rdv-head h1,
.ecr-head h1,
.tm-head h1,
.av-head h1,
.pr-head h1,
.qo-head h1,
.tc-head h1,
.cnf-hero h1{
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.03em;
}
/* mise en valeur : trait d'accent sous le titre pour le distinguer du reste */
.cart-head h1::after,
.trk-head h1::after,
.au-head h1::after,
.rec-head h1::after,
.ac-head h1::after,
.gr-head h1::after,
.ce-head h1::after,
.vl-head h1::after,
.dg-head h1::after,
.ia-head h1::after,
.rdv-head h1::after,
.ecr-head h1::after,
.tm-head h1::after,
.av-head h1::after,
.pr-head h1::after,
.qo-head h1::after,
.tc-head h1::after,
.cnf-hero h1::after{
  content:"";display:block;width:46px;height:3px;margin-top:10px;
  background:linear-gradient(90deg,var(--pg,#2b7bff),var(--pg2,#0a66ff))}
.cnf-hero h1::after{margin-left:auto;margin-right:auto}   /* confirmation = titre centré */

/* =========================================================
   SIGNATURE DE PAGE (08/07/2026) — médaillon d'icône + couleur
   propre à chaque page, pour distinguer et « habiller » chaque titre.
   Chaque page définit --pg / --pg2 (couleur signature) sur son <body>.
   Structure : .pgh > .pgh-ico (médaillon) + .pgh-txt (h1 + p).
   Le titre garde la règle CAPITALES ; le soulignement prend --pg.
   ========================================================= */
.pgh{display:flex;align-items:flex-start;gap:16px}
.pgh-ico{width:54px;height:54px;flex:none;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--pg,#2b7bff),var(--pg2,#0a52e6));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px rgba(16,21,30,.5)}
.pgh-ico:before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.32),transparent 60%);pointer-events:none}
.pgh-ico svg{width:26px;height:26px;position:relative;stroke-width:2}
.pgh-txt{min-width:0;padding-top:2px}
.pgh-txt h1{font-size:26px}
.pgh-txt p{margin-top:12px;font-size:13.5px;color:var(--text)}
/* couleurs signature par page */
.pg-acct{--pg:#2b7bff;--pg2:#0a52e6}       /* Compte — bleu accent */
.pg-garage{--pg:#64758c;--pg2:#37475b}     /* Mon Garage — acier/chrome sombre */
.pg-carnet{--pg:#1eb15f;--pg2:#0f7a41}     /* Carnet — vert entretien */
.pg-lookup{--pg:#2b7bff;--pg2:#0a52e6}     /* Recherche VIN/plaque — bleu accent (charte) */
.pg-diag{--pg:#2b3444;--pg2:#10151e}       /* Diagnostic OBD2 — charbon / chrome sombre (charte) */
.pg-ia{--pg:#2b7bff;--pg2:#0a52e6}         /* Assistant IA — bleu accent (pilier Intelligence, charte) */
.pg-ctscan{--pg:#0e8a8f;--pg2:#0a5a63}     /* Scan Contrôle Technique — teal instrument (scan/vision) */
.pg-rdv{--pg:#2b7bff;--pg2:#0a52e6}        /* Rendez-vous atelier — bleu de marque (charte) */
/* parcours d'achat / post-achat / auth (ordre = résolution des classes cumulées) */
.pg-cart{--pg:#2b7bff;--pg2:#0a52e6}       /* Panier — bleu */
.pg-co{--pg:#2b3444;--pg2:#10151e}         /* Checkout — charbon (paiement sécurisé) */
.pg-ret{--pg:#e0a021;--pg2:#a5670c}        /* Retours — ambre */
.pg-cnf{--pg:#1eb15f;--pg2:#0f7a41}        /* Confirmation — vert succès */
.pg-trk{--pg:#2b7bff;--pg2:#0a52e6}        /* Suivi commande — bleu */
.pg-pf{--pg:#ef4444;--pg2:#b42121}         /* Paiement échec — rouge */
.pg-rec{--pg:#f0682f;--pg2:#c23c12}        /* Réclamation — rouge-orange */
.pg-auth{--pg:#2b7bff;--pg2:#0a52e6}       /* Authentification — bleu */
.pg-ecr{--pg:#2b7bff;--pg2:#0a52e6}        /* Espace rendez-vous client — bleu (pôle RDV) */
.pg-tm{--pg:#2b7bff;--pg2:#0a52e6}         /* Trouver un mécano — bleu (pôle RDV) */
.pg-avis{--pg:#2b7bff;--pg2:#0a52e6}       /* Laisser un avis — bleu de marque (charte) ; nuance = étoiles dorées (notation) */
.pg-parr{--pg:#2b7bff;--pg2:#0a52e6}       /* Parrainage — bleu de marque (charte) ; nuance = chiffres récompense en accent */
.pg-qo{--pg:#2b7bff;--pg2:#0a52e6}         /* Commande rapide — bleu de marque (charte) */
.pg-tc{--pg:#2b7bff;--pg2:#0a52e6}         /* Transfert carnet — bleu de marque (charte) */
.pg-contact{--pg:#2b7bff;--pg2:#0a52e6}    /* Contact — bleu de marque (support) */
.pg-faq{--pg:#2b7bff;--pg2:#0a52e6}        /* FAQ — bleu de marque (charte) */
.pg-aide{--pg:#2b7bff;--pg2:#0a52e6}       /* Centre d'aide — bleu de marque (charte) */
.pg-about{--pg:#2b3444;--pg2:#10151e}      /* À propos — charbon / chrome (identité, charte) */

/* =========================================================
   COMPTE CLIENT (07/07/2026) — layout sidebar + sections
   Réutilise .cnf-card / .cnf-card-h / .cnf-card-b / .co-grid /
   .co-field / .btn / .pill — styles propres préfixés .ac-*
   ========================================================= */
.ac-page{max-width:1180px;margin:0 auto;padding:20px 22px 64px}
.ac-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:15px}
.ac-crumb a:hover{color:var(--accent)}
.ac-crumb svg{width:14px;height:14px;color:#c2ccd8}
.ac-crumb span{color:var(--ink);font-weight:600}
.ac-head{margin-bottom:22px}
.ac-head h1{font-size:26px}
.ac-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;align-items:start}

/* ---- SIDEBAR ---- */
.ac-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px}
.ac-profile{border:1px solid #e6ebf3;padding:20px 18px;text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
.ac-avatar{width:66px;height:66px;border-radius:50%;margin:0 auto 11px;display:grid;place-items:center;
  font-size:25px;font-weight:700;color:#fff;letter-spacing:.02em;
  background:linear-gradient(150deg,#2b7bff,#0a52e6);box-shadow:0 6px 16px -6px rgba(10,82,230,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.ac-pname{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ac-pmail{font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-word}
.ac-credit{display:inline-flex;align-items:center;gap:6px;margin-top:13px;padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:#15803d;background:var(--green-50);border:1px solid #bfe7cf}
.ac-credit svg{width:13px;height:13px}

.ac-nav{border:1px solid #e6ebf3;overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fbfcfe);box-shadow:var(--shadow-sm)}
.ac-nav-sec{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 16px 5px}
.ac-nav-it{display:flex;align-items:center;gap:11px;width:100%;padding:10px 16px;border:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;background:none;transition:.14s;border-left:3px solid transparent}
.ac-nav-it:hover{background:var(--surface)}
.ac-nav-it svg{width:16px;height:16px;color:var(--muted);flex:none}
.ac-nav-it.active{background:var(--accent-50);color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.ac-nav-it.active svg{color:var(--accent)}
.ac-nav-it .ac-badge{margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff}
.ac-nav-it .ac-badge.green{background:var(--green)}
.ac-nav-div{height:1px;background:var(--line);margin:5px 0}
.ac-nav-it.danger{color:var(--red)} .ac-nav-it.danger svg{color:var(--red)}
.ac-nav-it.danger:hover{background:var(--red-50)}

/* ---- SECTIONS ---- */
.ac-sec{display:none} .ac-sec.active{display:block}
.ac-cbody{padding:18px}

/* KPIs */
.ac-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.ac-kpi{border:1px solid #e6ebf3;padding:15px 16px;background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:var(--shadow-sm)}
.ac-kpi b{display:block;font-size:24px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
.ac-kpi span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ac-kpi.green b{color:var(--green)}

/* préférences comm — toggles */
.ac-prefs{display:flex;flex-direction:column;gap:2px}
.ac-pref{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.ac-pref:last-child{border-bottom:none;padding-bottom:2px}
.ac-pref-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ac-pref-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ac-tog{position:relative;width:44px;height:25px;flex:none}
.ac-tog input{position:absolute;opacity:0;width:0;height:0}
.ac-tog i{position:absolute;inset:0;border-radius:999px;background:#cdd5df;cursor:pointer;transition:.2s;box-shadow:inset 0 1px 2px rgba(16,21,30,.18)}
.ac-tog i:before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(16,21,30,.3)}
.ac-tog input:checked + i{background:linear-gradient(180deg,#2b7bff,#0a66ff)}
.ac-tog input:checked + i:before{transform:translateX(19px)}

/* bandeau danger (RGPD / clôture) */
.ac-danger{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ac-danger-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ac-danger-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px;max-width:440px}
.cnf-card.is-danger{border-color:#f3c9c4}
.cnf-card.is-danger .cnf-card-h{background:linear-gradient(180deg,#fdeceb,#f9ddd9);border-bottom-color:#f0c2bc;color:#a52318}
.cnf-card.is-danger .cnf-card-h svg{color:var(--red)}

/* ---- ADRESSES ---- */
.ac-addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ac-addr{position:relative;border:1px solid #e6ebf3;padding:15px 16px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ac-addr.def{border-color:#bcd4fb;background:linear-gradient(180deg,#f5f9ff,#eef4ff)}
.ac-addr-def{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff}
.ac-addr-nm{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.ac-addr-d{font-size:12.5px;color:var(--text);line-height:1.6}
.ac-addr-acts{display:flex;gap:8px;margin-top:12px}
.ac-addr-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:118px;cursor:pointer;
  border:2px dashed #cdd8e6;color:var(--muted);background:none;font-family:inherit;transition:.15s}
.ac-addr-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
.ac-addr-add svg{width:24px;height:24px}
.ac-addr-add span{font-size:13px;font-weight:700}

/* ---- TABLE COMMANDES ---- */
.ac-table-wrap{overflow-x:auto}
.ac-table{width:100%;border-collapse:collapse}
.ac-table th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.ac-table td{font-size:13px;color:var(--text);padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ac-table tr:last-child td{border-bottom:none}
.ac-table tbody tr{cursor:pointer;transition:.12s}
.ac-table tbody tr:hover{background:var(--surface)}
.ac-table .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--ink)}
.ac-table .tprice{font-weight:700;color:var(--ink)}
.ac-linkbtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent)}
.ac-linkbtn svg{width:13px;height:13px}

/* ---- RETOURS (liste) ---- */
.ac-return{display:flex;align-items:flex-start;gap:14px;border:1px solid #e6ebf3;padding:14px 16px;margin-bottom:10px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ac-return-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--muted);
  background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.ac-return-ic svg{width:20px;height:20px}
.ac-return-i{flex:1;min-width:0}
.ac-return-i b{font-size:13.5px;font-weight:600;color:var(--ink)}
.ac-return-i small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.ac-return-r{text-align:right;flex:none}

/* ---- SÉCURITÉ / RGPD rows ---- */
.ac-srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ac-srow:first-child{padding-top:0} .ac-srow:last-child{border-bottom:none;padding-bottom:0}
.ac-srow-t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ac-srow-t small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ---- info encart (aide retours) ---- */
.ac-note{border:1px solid #cfe0fb;background:linear-gradient(180deg,#f5f9ff,#eef4ff);padding:15px 18px}
.ac-note b{display:block;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
.ac-note ol{margin:0;padding-left:18px;font-size:12.5px;color:var(--text);line-height:1.85}

/* ---- parrainage encart ---- */
.ac-ref{text-align:center;padding:30px 22px}
.ac-ref-ic{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--accent-50)}
.ac-ref-ic svg{width:24px;height:24px;color:var(--accent)}
.ac-ref h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:7px}
.ac-ref p{font-size:13px;color:var(--text);max-width:430px;margin:0 auto 16px;line-height:1.55}
.ac-ref-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:20px;font-weight:600;letter-spacing:.14em;color:var(--ink);
  border:1.5px dashed #c2cedd;background:var(--surface);padding:13px;max-width:290px;margin:0 auto 15px}
.ac-ref-stats{display:flex;gap:28px;justify-content:center;margin-bottom:18px}
.ac-ref-stats b{display:block;font-size:22px;font-weight:700;color:var(--ink)}
.ac-ref-stats .green b{color:var(--green)}
.ac-ref-stats small{font-size:11.5px;color:var(--muted);font-weight:600}
.ac-ref-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* onglet Compte actif dans le header sombre */
.pg-acct .hact.active span,.pg-acct .hact.active svg{color:#fff}
.pg-acct .hact.active:after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--accent)}

/* toast maquette (bas-droite) */
.ac-toast{position:fixed;bottom:22px;right:22px;z-index:400;display:inline-flex;align-items:center;gap:9px;
  padding:12px 17px;font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#23303f,#10151e);box-shadow:0 14px 34px -10px rgba(16,21,30,.6);
  transform:translateY(140%);opacity:0;transition:transform .28s cubic-bezier(.34,1.4,.5,1),opacity .28s}
.ac-toast.show{transform:translateY(0);opacity:1}
.ac-toast svg{width:17px;height:17px;color:#4ade80}

@media (max-width:920px){
  .ac-layout{grid-template-columns:1fr}
  .ac-side{position:static;flex-direction:column}
  .ac-addr-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ac-kpis{grid-template-columns:1fr 1fr}
  .ac-page{padding:14px 14px 50px}
}

/* =========================================================
   MON GARAGE (07/07/2026) — liste véhicules + panneau OBD2
   Réutilise .cnf-card / .cnf-card-h / .btn / .pill — préfixe .gr-*
   ========================================================= */
.gr-page{max-width:1180px;margin:0 auto;padding:20px 22px 64px}
.gr-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:15px}
.gr-crumb a:hover{color:var(--accent)}
.gr-crumb svg{width:14px;height:14px;color:#c2ccd8}
.gr-crumb span{color:var(--ink);font-weight:600}
.gr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.gr-head h1{font-size:26px}
.gr-head p{margin-top:12px;font-size:13.5px;color:var(--text)}
.gr-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.gr-list{min-width:0;display:flex;flex-direction:column;gap:16px}

/* ---- CARTE VÉHICULE ---- */
.gr-veh{border:1px solid #e6ebf3;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#fdfdff 60%,#fbfcfe 100%);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 14px 28px -16px rgba(16,21,30,.16),inset 0 1px 0 #ffffff}
.gr-veh-top{display:flex;gap:18px;padding:18px}
.gr-veh-photo{width:196px;height:126px;flex:none;position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 15%,#1a2536,#0e1420);border:1px solid #10151e}
.gr-veh-photo svg{width:150px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.gr-veh-photo .gr-plate{position:absolute;left:9px;bottom:9px;display:inline-flex;align-items:center;gap:5px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.06em;color:#12233f;
  padding:3px 9px 3px 20px;background:#f4d33b;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.gr-veh-photo .gr-plate:before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:#0a3aa0;border-radius:3px 0 0 3px}
.gr-veh-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gr-veh-nmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.gr-veh-nm{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.gr-veh-sub{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.gr-veh-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto}
.gr-veh-sp small{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.gr-veh-sp b{font-size:13px;font-weight:600;color:var(--ink)}
.gr-connected{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:#15803d;background:var(--green-50);border:1px solid #bfe7cf}
.gr-connected .dot{width:7px;height:7px;border-radius:50%;background:#22b066;box-shadow:0 0 0 3px rgba(34,176,102,.2)}

/* bandeau rappels d'entretien sous la carte */
.gr-veh-rem{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff8ef,#fdeede)}
.gr-veh-rem i[data-lucide]{color:#e07a10}
.gr-veh-rem-t{flex:1;min-width:0;font-size:12.5px;color:#7a4a12}
.gr-veh-rem-t b{color:#9a3412;font-weight:700}
.gr-veh-rem a{flex:none;font-size:12px;font-weight:700;color:#b45309;display:inline-flex;align-items:center;gap:4px}
.gr-veh-rem a svg{width:14px;height:14px}

/* actions carte */
.gr-veh-acts{display:flex;gap:9px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid #e6ebf3}
.gr-veh-acts .btn{padding:9px 14px;font-size:12.5px}
.gr-veh-acts .gr-del{margin-left:auto;color:var(--muted);border-color:var(--line)}
.gr-veh-acts .gr-del:hover{color:var(--red);border-color:#f0c2bc}

/* carte "ajouter un véhicule" */
.gr-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:120px;cursor:pointer;
  border:2px dashed #cdd8e6;color:var(--muted);background:none;font-family:inherit;transition:.15s}
.gr-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
.gr-add svg{width:26px;height:26px}
.gr-add span{font-size:13.5px;font-weight:700}

/* ---- PANNEAU OBD2 ---- */
.gr-scan{position:sticky;top:18px}
.gr-scan-status{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid #cfe0fb;
  background:linear-gradient(180deg,#f5f9ff,#eef4ff);margin-bottom:14px}
.gr-scan-dot{width:11px;height:11px;border-radius:50%;flex:none;background:#22b066;box-shadow:0 0 0 4px rgba(34,176,102,.18)}
.gr-scan-status b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.gr-scan-status small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.gr-scan-btn{width:100%;justify-content:center;gap:9px;padding:14px;font-size:14px}
.gr-scan-steps{margin:16px 0 0;padding:14px 16px;border:1px solid #e6ebf3;background:var(--surface)}
.gr-scan-steps b{display:block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#2b3340;margin-bottom:9px}
.gr-scan-steps ol{margin:0;padding-left:17px;font-size:12.5px;color:var(--text);line-height:1.9}
.gr-scan-manual{display:block;text-align:center;margin-top:13px;font-size:12.5px;font-weight:600;color:var(--accent)}
.gr-adapter{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff,#fbfcfe);transition:.15s}
.gr-adapter:hover{border-color:#c7d2e2;box-shadow:var(--shadow-sm)}
.gr-adapter-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;color:var(--muted);background:var(--surface-2)}
.gr-adapter-ic svg{width:20px;height:20px}
.gr-adapter-i{flex:1;min-width:0}
.gr-adapter-i small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.gr-adapter-i b{font-size:13px;font-weight:600;color:var(--ink)}
.gr-adapter-pr{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.gr-scan-note{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.5}

@media (max-width:920px){
  .gr-layout{grid-template-columns:1fr}
  .gr-scan{position:static}
}
@media (max-width:560px){
  .gr-veh-top{flex-direction:column}
  .gr-veh-photo{width:100%;height:150px}
  .gr-veh-specs{grid-template-columns:1fr 1fr}
  .gr-page{padding:14px 14px 50px}
}

/* =========================================================
   CARNET D'ENTRETIEN (07/07/2026) — carnet connecté + rappels OBD2
   Réutilise .cnf-card / .cnf-card-h / .cnf-card-b / .cnf-tl / .btn / .pill
   Préfixe .ce-*
   ========================================================= */
.ce-page{max-width:1180px;margin:0 auto;padding:20px 22px 64px}
.ce-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:15px}
.ce-crumb a:hover{color:var(--accent)}
.ce-crumb svg{width:14px;height:14px;color:#c2ccd8}
.ce-crumb span{color:var(--ink);font-weight:600}
.ce-head{margin-bottom:18px}
.ce-head h1{font-size:26px}
.ce-head p{margin-top:12px;font-size:13.5px;color:var(--text)}

/* sélecteur véhicule (onglets) + kilométrage */
.ce-vbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.ce-vtabs{display:flex;gap:8px;flex-wrap:wrap}
.ce-vtab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);
  border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcfe);cursor:pointer;transition:.14s}
.ce-vtab:hover{border-color:#c7d2e2}
.ce-vtab i[data-lucide]{width:15px;height:15px}
.ce-vtab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-50);box-shadow:0 0 0 3px rgba(31,111,235,.1)}
.ce-vtab .dot{width:7px;height:7px;border-radius:50%;background:#22b066;box-shadow:0 0 0 3px rgba(34,176,102,.2)}
.ce-km{margin-left:auto;display:flex;align-items:center;gap:10px;padding:8px 15px;border:1px solid #10151e;
  background:radial-gradient(120% 120% at 50% 10%,#1a2536,#0e1420);color:#fff}
.ce-km i[data-lucide]{width:17px;height:17px;color:#7fb0ff}
.ce-km small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fa0b8}
.ce-km b{font-size:16px;font-weight:700;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:-.01em}

.ce-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.ce-main{min-width:0;display:flex;flex-direction:column;gap:16px}

/* carte alertes = en-tête orange (rappels) */
.cnf-card.is-alert{border-color:#f3d8b0}
.cnf-card.is-alert .cnf-card-h{background:linear-gradient(180deg,#fff5e6,#fdeacb);border-bottom-color:#f0d199;color:#9a3412}
.cnf-card.is-alert .cnf-card-h svg{color:#e07a10}
.cnf-card.is-alert .cnf-card-h .ce-cnt{margin-left:auto;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:#e07a10;color:#fff;text-transform:none;letter-spacing:0}

.ce-alerts{display:flex;flex-direction:column;gap:9px}
.ce-alert{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ce-alert-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%}
.ce-alert-ic svg{width:18px;height:18px}
.ce-alert-i{flex:1;min-width:0}
.ce-alert-i b{font-size:13.5px;font-weight:600;color:var(--ink)}
.ce-alert-i small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ce-alert-r{flex:none;display:flex;align-items:center;gap:10px}
.ce-alert .ce-order{font-size:12px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ce-alert .ce-order svg{width:14px;height:14px}
/* urgences */
.ce-alert.urgent{border-color:#f3c9c4}
.ce-alert.urgent .ce-alert-ic{background:var(--red-50);color:var(--red)}
.ce-alert.soon .ce-alert-ic{background:#fdf0d8;color:#c97a12}
.ce-alert.watch .ce-alert-ic{background:var(--accent-50);color:var(--accent)}

/* diagnostics OBD2 */
.ce-diag{display:flex;flex-direction:column;gap:10px}
.ce-diag-it{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ce-diag-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #eef1f6}
.ce-diag-h .d{font-size:12.5px;font-weight:600;color:var(--ink)}
.ce-diag-h .km{margin-left:auto;font-size:11.5px;font-weight:600;font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.ce-diag-b{padding:11px 14px;display:flex;flex-wrap:wrap;gap:8px}
.ce-dtc{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  padding:5px 10px;background:var(--red-50);color:#a52318;border:1px solid #f3c9c4}
.ce-dtc.ok{background:var(--green-50);color:#15803d;border-color:#bfe7cf;font-family:inherit;font-weight:600}

/* pièces référencées */
.ce-partform{display:flex;gap:9px;margin-bottom:14px}
.ce-partform input{flex:1;min-width:0;height:44px;border:1px solid var(--line);padding:0 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.ce-partform input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.ce-parts{display:flex;flex-direction:column;gap:8px}
.ce-part{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ce-part-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:var(--muted);background:var(--surface-2)}
.ce-part-ic svg{width:17px;height:17px}
.ce-part-i{flex:1;min-width:0}
.ce-part-i b{font-size:13px;font-weight:600;color:var(--ink)}
.ce-part-i small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.ce-part-ref{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap}

/* colonne latérale */
.ce-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
/* planning */
.ce-plan{display:flex;flex-direction:column;gap:14px}
.ce-plan-it{}
.ce-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ce-plan-top b{font-size:13px;font-weight:600;color:var(--ink)}
.ce-plan-top span{font-size:11.5px;font-weight:600;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace}
.ce-bar{height:7px;background:var(--surface-2);overflow:hidden}
.ce-bar i{display:block;height:100%;border-radius:0}
.ce-bar i.red{background:linear-gradient(90deg,#e5302a,#f0554f)}
.ce-bar i.amber{background:linear-gradient(90deg,#e07a10,#f4a823)}
.ce-bar i.green{background:linear-gradient(90deg,#13924d,#22b066)}
/* stats */
.ce-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ce-stat{border:1px solid #e6ebf3;padding:12px 13px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.ce-stat b{display:block;font-size:19px;font-weight:700;color:var(--ink);line-height:1}
.ce-stat small{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.3}
.ce-tip{display:flex;gap:9px;padding:12px 14px;border:1px solid #cfe0fb;background:linear-gradient(180deg,#f5f9ff,#eef4ff);font-size:12px;color:#1e477e;line-height:1.55}
.ce-tip svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}
.ce-tip b{color:#173a6b;font-weight:700}
/* actions */
.ce-acts{display:flex;flex-direction:column;gap:9px}
.ce-acts .btn{width:100%;justify-content:center}

@media (max-width:920px){
  .ce-layout{grid-template-columns:1fr}
  .ce-side{position:static}
}
@media (max-width:560px){
  .ce-km{margin-left:0;width:100%}
  .ce-stats{grid-template-columns:1fr 1fr}
  .ce-page{padding:14px 14px 50px}
}

/* =========================================================
   BOUTONS PLATS (08/07/2026) — demande utilisateur
   Pour TOUTES les pages : aucune animation au survol du curseur
   (lift/scale/brightness) + aucune ombre colorée sur les boutons.
   EXCLUSION EXPRESSE : les 4 actions du header (.hact = Mon garage,
   Compte, Favoris, Panier) ne sont PAS ciblées → survol conservé.
   Placé en fin de feuille pour l'emporter.
   ========================================================= */
.btn, .pd-add, .cs-checkout, .cnf-act, .au-submit, .au-soc,
.ret-submit, .rec-submit, .rec-cancel, .vc-cta, .burger,
.co-relay-go, .hsearch button, .cart-promo button,
.co-promo-row button, .ce-partform button{
  box-shadow:none !important;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.btn:hover, .pd-add:hover, .cs-checkout:hover, .cnf-act:hover,
.cnf-act.primary:hover, .au-submit:hover, .au-soc:hover,
.ret-submit:hover, .rec-submit:hover, .rec-cancel:hover,
.vc-cta:hover, .burger:hover, .co-relay-go:hover,
.hsearch button:hover, .cart-promo button:hover,
.co-promo-row button:hover, .ce-partform button:hover{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
/* boutons sombres : survol = dégradé sombre cohérent (pas de fond gris plat qui casse la profondeur) */
.btn-dark:hover{background:linear-gradient(135deg,#33465d,#161d29) !important}

/* =========================================================
   RECHERCHE VÉHICULE — VIN / PLAQUE (10/07/2026)
   Page d'identification : onglets plaque/VIN → décodage SIV/TecDoc →
   fiche résultat + CTA (ajouter au garage / pièces compatibles).
   Signature .pg-lookup (indigo). Réutilise .cnf-card, .gr-veh-specs,
   .gr-veh-sp, .btn, .pill. Styles propres préfixés .vl-*.
   ========================================================= */
.vl-page{max-width:1060px;margin:0 auto;padding:20px 22px 64px}
.vl-head{margin-bottom:24px}
.vl-head h1{font-size:26px}
.vl-layout{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:24px;align-items:start}

/* ---- CARTE DE RECHERCHE ---- */
.vl-card{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 2px 4px rgba(16,21,30,.04),0 16px 32px -20px rgba(16,21,30,.18);overflow:hidden}
.vl-tabs{display:flex;gap:4px;padding:8px;background:#f4f6fb;border-bottom:1px solid #e9edf5}
.vl-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--muted);border-radius:2px;user-select:none;transition:background .15s,color .15s}
.vl-tab svg{width:16px;height:16px}
.vl-tab:hover{color:var(--ink)}
.vl-tab.active{background:#fff;color:var(--ink);
  box-shadow:0 1px 1px rgba(16,21,30,.05),0 4px 10px -6px rgba(16,21,30,.22);
  border-bottom:2px solid var(--pg)}
.vl-pane{padding:26px 26px 24px}
.vl-pane[hidden]{display:none}
.vl-pane-lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}

/* champ plaque — style plaque d'immatriculation FR */
.vl-plate{display:flex;align-items:stretch;height:60px;border:2px solid #10131a;border-radius:8px;overflow:hidden;
  box-shadow:0 4px 14px -8px rgba(16,21,30,.4);max-width:420px}
.vl-plate-eu{width:44px;flex:none;background:linear-gradient(180deg,#0b3aa6,#062a86);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.vl-plate-eu .stars{font-size:13px;line-height:1;color:#ffd21e}
.vl-plate-eu .fr{font-size:12px;font-weight:700;letter-spacing:.02em}
.vl-plate input{flex:1;min-width:0;border:0;outline:0;background:#fff;text-align:center;
  font-size:26px;font-weight:700;letter-spacing:.10em;color:#10131a;text-transform:uppercase}
.vl-plate input::placeholder{color:#c2ccd8;letter-spacing:.06em}

/* champ VIN — mono */
.vl-vin{max-width:520px}
.vl-vin input{width:100%;height:54px;border:1.5px solid #d8e0ec;border-radius:8px;padding:0 16px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:#10131a;outline:0;transition:border-color .15s,box-shadow .15s}
.vl-vin input:focus{border-color:var(--pg);box-shadow:0 0 0 3px rgba(31,111,235,.16)}

.vl-go{margin-top:18px;height:50px;padding:0 26px;border:0;cursor:pointer;color:#fff;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:9px;border-radius:3px;
  background:linear-gradient(150deg,var(--pg),var(--pg2));
  box-shadow:0 8px 20px -10px rgba(10,82,230,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.vl-go svg{width:18px;height:18px}
.vl-hint{margin-top:13px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.vl-hint svg{width:14px;height:14px;color:var(--pg);flex:none}
.vl-hint b{color:var(--ink)}

/* ---- RÉSULTAT ---- */
.vl-result{margin-top:22px;border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 30px -20px rgba(16,21,30,.2);
  animation:vlIn .35s ease both}
.vl-result[hidden]{display:none}
@keyframes vlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vl-result-h{display:flex;align-items:center;gap:9px;padding:13px 20px;border-bottom:1px solid #eef1f7;
  background:linear-gradient(180deg,#f9fafd,#f3f6fb);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:#0f7a41}
.vl-result-h svg{width:17px;height:17px}
.vl-result-b{padding:22px 24px 24px}
.vl-veh-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.vl-veh-photo{width:180px;flex:none;border-radius:8px;padding:8px 10px;position:relative;
  background:radial-gradient(120% 120% at 50% 15%,#f4f7fb,#e9eef6)}
.vl-veh-photo svg{width:100%;height:auto;display:block}
.vl-veh-plate{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  background:#10131a;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:3px}
.vl-veh-id{min-width:0;flex:1}
.vl-veh-nm{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.vl-veh-sub{margin-top:4px;font-size:13px;color:var(--muted)}
.vl-veh-tec{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  background:#f4f6fb;border:1px solid #e6ebf3;border-radius:4px;padding:6px 11px}
.vl-veh-tec b{color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.vl-veh-tec svg{width:14px;height:14px;color:var(--pg)}
.vl-result .gr-veh-specs{margin-top:20px}
.vl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px dashed #e2e8f2}

/* ---- ASIDE ---- */
.vl-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:18px}
.vl-help{border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 12px 26px -20px rgba(16,21,30,.16)}
.vl-help-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid #eef1f7;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.vl-help-h svg{width:16px;height:16px;color:var(--pg)}
.vl-help-b{padding:16px}
.vl-steps{list-style:none;margin:0;padding:0;counter-reset:vl}
.vl-steps li{position:relative;padding:0 0 15px 34px;font-size:12.8px;color:var(--text);line-height:1.5}
.vl-steps li:last-child{padding-bottom:0}
.vl-steps li:before{counter-increment:vl;content:counter(vl);position:absolute;left:0;top:-1px;
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--pg),var(--pg2))}
.vl-steps li:not(:last-child):after{content:"";position:absolute;left:11px;top:24px;bottom:6px;width:1.5px;background:#e6ebf3}
.vl-steps b{color:var(--ink)}
/* alternative OBD2 */
.vl-obd{display:flex;align-items:center;gap:12px;text-decoration:none;padding:14px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fbfcfe,#f5f7fb);transition:border-color .15s}
.vl-obd:hover{border-color:#c9d3e2}
.vl-obd-ic{width:40px;height:40px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#64758c,#37475b)}
.vl-obd-ic svg{width:20px;height:20px}
.vl-obd-t{min-width:0}
.vl-obd-t b{display:block;font-size:13px;color:var(--ink)}
.vl-obd-t small{font-size:11.5px;color:var(--muted)}
.vl-obd svg.arr{width:16px;height:16px;color:var(--muted);flex:none;margin-left:auto}

@media (max-width:900px){
  .vl-layout{grid-template-columns:1fr}
  .vl-side{position:static}
}
@media (max-width:520px){
  .vl-veh-photo{width:100%}
  .vl-plate input{font-size:22px}
}

/* =========================================================
   DIAGNOSTIC OBD2 (11/07/2026) — couche universelle NexaDiag
   Connexion (BLE/USB/import) puis scan ELM327 puis codes DTC + live data
   puis rapport lisible + carnet. LECTURE SEULE (jamais d'effacement).
   Signature .pg-diag (charbon). Reutilise .cnf-card, .pill, .btn,
   .gr-veh-specs. Styles propres prefixes .dg-*.
   ========================================================= */
.dg-page{max-width:1180px;margin:0 auto;padding:20px 22px 64px}
.dg-head{margin-bottom:22px}
.dg-head h1{font-size:26px}
.dg-layout{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:24px;align-items:start}

/* ---- barre vehicule (contexte) ---- */
.dg-vbar{display:flex;align-items:center;gap:13px;padding:12px 16px;margin-bottom:18px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f8fafd);
  box-shadow:0 1px 2px rgba(16,21,30,.04)}
.dg-vbar-ic{width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#64758c,#37475b)}
.dg-vbar-ic svg{width:19px;height:19px}
.dg-vbar-nm{font-size:14px;font-weight:700;color:var(--ink)}
.dg-vbar-sub{font-size:12px;color:var(--muted);margin-top:1px}
.dg-vbar .pill{margin-left:auto}
.dg-vbar-plate{background:#10131a;color:#fff;font-size:11px;font-weight:700;letter-spacing:.07em;padding:4px 9px;border-radius:3px}

/* ---- carte scan (hero connexion) ---- */
.dg-scan{border:1px solid #e6ebf3;overflow:hidden;
  background:linear-gradient(160deg,#1a2230 0%,#10151e 100%);color:#eef2f7;
  box-shadow:0 1px 1px rgba(16,21,30,.05),0 20px 40px -24px rgba(16,21,30,.5)}
.dg-scan-in{padding:24px 24px 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.dg-radar{width:120px;height:120px;flex:none;border-radius:50%;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,rgba(43,123,255,.18),transparent 70%);
  border:1px solid rgba(255,255,255,.08)}
.dg-radar:before,.dg-radar:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(120,170,255,.25)}
.dg-radar:before{inset:16px}.dg-radar:after{inset:34px}
.dg-radar-dot{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(43,123,255,.55),transparent 55%);animation:dgSweep 2.4s linear infinite}
@keyframes dgSweep{to{transform:rotate(360deg)}}
.dg-radar i{position:relative;width:34px;height:34px;color:#8fb8ff}
.dg-scan-txt{min-width:0;flex:1}
.dg-scan-txt h2{color:#fff;font-size:18px;font-weight:700;letter-spacing:.01em}
.dg-scan-status{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:#aeb9c8}
.dg-scan-status .dot{width:9px;height:9px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 4px rgba(55,214,122,.18)}
.dg-scan-txt p{margin:10px 0 0;font-size:12.8px;color:#9aa6b6;line-height:1.55;max-width:440px}
.dg-scan-cta{display:flex;flex-direction:column;gap:10px;flex:none}
.dg-scan-btn{height:52px;padding:0 26px;border:0;cursor:pointer;color:#fff;font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:9px;border-radius:3px;
  background:linear-gradient(150deg,#2b7bff,#0a52e6);
  box-shadow:0 10px 24px -10px rgba(10,82,230,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.dg-scan-btn svg{width:19px;height:19px}
/* methodes de connexion */
.dg-methods{display:flex;gap:12px;padding:16px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.20)}
.dg-method{flex:1;display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;
  border-radius:11px;border:1px solid rgba(0,0,0,.14);
  background:linear-gradient(180deg,#e3e7ec 0%,#ccd1d8 100%);
  box-shadow:0 1px 2px rgba(8,12,20,.35),0 6px 14px -8px rgba(8,12,20,.5),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.dg-method:hover{transform:translateY(-2px);border-color:rgba(43,111,214,.45);
  box-shadow:0 2px 4px rgba(8,12,20,.35),0 14px 24px -10px rgba(8,12,20,.6),inset 0 1px 0 rgba(255,255,255,.85)}
.dg-method:active{transform:translateY(0);
  box-shadow:0 1px 2px rgba(8,12,20,.4),inset 0 1px 3px rgba(8,12,20,.25)}
.dg-method-ic{width:40px;height:40px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(43,64,102,.10);color:#2f4a86;
  border:1px solid rgba(8,12,20,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/* teintes travaillees par methode (sur fond gris clair) */
.dg-method-ic.m-ble{background:rgba(43,123,255,.14);color:#2b6fd6}
.dg-method-ic.m-usb{background:rgba(196,132,20,.16);color:#a5741a}
.dg-method-ic.m-wifi{background:rgba(20,170,150,.16);color:#0f8a78}
.dg-method-ic svg{width:22px;height:22px}
.dg-method-t{min-width:0}
.dg-method-t b{display:block;font-size:12.5px;color:#1e2733;font-weight:600}
.dg-method-t small{font-size:11px;color:#68717f}
.dg-method .tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:#2b6fd6;background:rgba(43,123,255,.16);padding:3px 7px;border-radius:3px}

/* ---- rapport / resultat ---- */
.dg-report{margin-top:22px;animation:vlIn .35s ease both}
.dg-report[hidden]{display:none}
.dg-report-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px}
.dg-report-h h2{font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.dg-report-h .when{font-size:12px;color:var(--muted)}
.dg-sev-sum{display:flex;gap:7px;margin-left:auto}
.dg-sev-sum .pill{font-size:11.5px}

/* live data tiles */
.dg-live{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.dg-live-t{border:1px solid #e6ebf3;background:#fff;padding:13px 14px;box-shadow:0 1px 2px rgba(16,21,30,.03)}
.dg-live-t small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.dg-live-t small svg{width:13px;height:13px}
.dg-live-t b{display:block;margin-top:7px;font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dg-live-t b span{font-size:12px;font-weight:600;color:var(--muted)}

/* liste des codes DTC */
.dg-codes{display:flex;flex-direction:column;gap:11px}
.dg-dtc{display:flex;gap:14px;align-items:flex-start;border:1px solid #e6ebf3;background:#fff;padding:15px 16px;
  border-left-width:4px;box-shadow:0 1px 2px rgba(16,21,30,.03)}
.dg-dtc.crit{border-left-color:var(--red)}
.dg-dtc.maj{border-left-color:var(--amber)}
.dg-dtc.min{border-left-color:var(--green)}
.dg-dtc-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:700;color:var(--ink);
  background:#f4f6fb;border:1px solid #e6ebf3;border-radius:4px;padding:5px 9px;flex:none}
.dg-dtc-main{min-width:0;flex:1}
.dg-dtc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dg-dtc-title{font-size:14px;font-weight:700;color:var(--ink)}
.dg-dtc-sys{margin-top:4px;font-size:12px;color:var(--muted)}
.dg-dtc-sys b{color:var(--text);font-weight:600}
.dg-dtc-part{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;font-weight:600;
  color:var(--accent);background:var(--accent-50);border-radius:4px;padding:6px 11px}
.dg-dtc-part svg{width:14px;height:14px}
.dg-dtc-part:hover{background:#e2edff}
.dg-report-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px dashed #e2e8f2}

/* ---- aside ---- */
.dg-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:18px}
.dg-cap{border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 12px 26px -20px rgba(16,21,30,.16)}
.dg-cap-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid #eef1f7;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.dg-cap-h svg{width:16px;height:16px;color:var(--pg)}
.dg-cap-b{padding:14px 16px}
.dg-caprow{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.8px;color:var(--text)}
.dg-caprow:not(:last-child){border-bottom:1px solid #f1f4f9}
.dg-caprow svg{width:15px;height:15px;flex:none}
.dg-caprow .ok{color:var(--green)}.dg-caprow .no{color:#c2ccd8}
.dg-caprow b{color:var(--ink);font-weight:600}
.dg-caprow small{margin-left:auto;font-size:11px;color:var(--muted)}
/* import rapport */
.dg-import{border:1.5px dashed #d3dced;background:#fbfcfe;padding:16px;text-align:center}
.dg-import svg.up{width:24px;height:24px;color:var(--muted);margin:0 auto 8px}
.dg-import b{display:block;font-size:13px;color:var(--ink)}
.dg-import small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.dg-import .btn{margin-top:12px}
/* lecture seule */
.dg-ro{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--green-50);
  background:var(--green-50)}
.dg-ro svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:1px}
.dg-ro p{margin:0;font-size:12px;color:#2f6b45;line-height:1.5}
.dg-ro b{color:#1c5a34}

@media (max-width:900px){
  .dg-layout{grid-template-columns:1fr}
  .dg-side{position:static}
  .dg-live{grid-template-columns:repeat(2,1fr)}
  .dg-methods{flex-direction:column}
  .dg-scan-in{flex-direction:column;text-align:center}
  .dg-scan-cta{width:100%}
}

/* =========================================================
   SCAN DU CONTRÔLE TECHNIQUE (12/07/2026) — outil photo du PV → défaillances
   → pièces à changer (module back ct-scan : Claude vision → nomenclature UTAC
   → catalogue réel). Réutilise .dg-* (hero/report/dtc/aside), .pill, .btn.
   Styles propres .ct-*. Signature .pg-ctscan (teal instrument).
   ========================================================= */
/* --- zone de capture du PV (remplace le radar dans le hero .dg-scan) --- */
.ct-preview{width:132px;height:150px;flex:none;position:relative;border-radius:10px;overflow:hidden;
  border:1.5px dashed rgba(150,210,215,.45);background:linear-gradient(160deg,rgba(14,138,143,.16),rgba(10,90,99,.10));
  display:grid;place-items:center;color:#8fded9}
.ct-preview svg{width:40px;height:40px;stroke-width:1.6}
.ct-preview .ct-scanline{position:absolute;left:8px;right:8px;top:12px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#5ee0d8,transparent);
  box-shadow:0 0 10px 2px rgba(94,224,216,.5);animation:ctSweep 2.6s ease-in-out infinite}
@keyframes ctSweep{0%{top:14px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:134px;opacity:0}}
.ct-preview .ct-corner{position:absolute;width:16px;height:16px;border:2px solid rgba(94,224,216,.55)}
.ct-preview .ct-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.ct-preview .ct-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.ct-preview .ct-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.ct-preview .ct-corner.br{bottom:8px;right:8px;border-left:0;border-top:0}

/* --- bandeau infos contrôle (entête du PV lu) --- */
.ct-ctrl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e6ebf3;border:1px solid #e6ebf3;
  margin-bottom:18px;box-shadow:0 1px 2px rgba(16,21,30,.03)}
.ct-ctrl-c{background:#fff;padding:12px 14px;min-width:0}
.ct-ctrl-c small{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ct-ctrl-c small svg{width:13px;height:13px}
.ct-ctrl-c b{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.ct-ctrl-c .res{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:4px}
.ct-ctrl-c .res.warn{color:#a15a00;background:#fff2df}
.ct-ctrl-c .res.ko{color:#b42318;background:#fdecea}
.ct-ctrl-c .res.ok{color:#1c5a34;background:var(--green-50)}

/* défaut non remplaçable (réglage/réparation, pas de pièce) */
.dg-dtc.info{border-left-color:#94a3b8}
.ct-noswap{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;font-weight:600;
  color:#5b6472;background:#f1f4f9;border-radius:4px;padding:6px 11px}
.ct-noswap svg{width:14px;height:14px}

/* --- recommandations de pièces par famille (catalogue réel) --- */
.ct-recos{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.ct-recos-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.02em}
.ct-recos-h svg{width:17px;height:17px;color:var(--pg)}
.ct-reco{border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,21,30,.03),0 14px 28px -22px rgba(16,21,30,.18)}
.ct-reco-h{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid #eef1f7;
  background:#fafbfe}
.ct-reco-h .fam{font-size:13.5px;font-weight:700;color:var(--ink)}
.ct-reco-h .codes{font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
.ct-reco-h .pill{margin-left:auto}
.ct-parts{display:flex;flex-direction:column}
.ct-part{display:flex;align-items:center;gap:13px;padding:12px 15px}
.ct-part:not(:last-child){border-bottom:1px solid #f1f4f9}
.ct-part-th{width:46px;height:46px;flex:none;border-radius:7px;border:1px solid #e6ebf3;background:#f7f9fc;
  display:grid;place-items:center;color:#9aa6b6}
.ct-part-th svg{width:22px;height:22px}
.ct-part-in{min-width:0;flex:1}
.ct-part-br{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pg)}
.ct-part-nm{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-part-meta{display:flex;align-items:center;gap:9px;margin-top:4px;font-size:11px;color:var(--muted)}
.ct-part-meta .ref{font-family:ui-monospace,Menlo,Consolas,monospace}
.ct-part-meta .stk{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-weight:600}
.ct-part-meta .stk svg{width:12px;height:12px}
.ct-part-pr{text-align:right;flex:none}
.ct-part-pr .price{font-size:16px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.ct-part-pr .old{display:block;font-size:11px;color:var(--muted);text-decoration:line-through}
.ct-part-add{flex:none;width:40px;height:40px;border-radius:9px;border:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:linear-gradient(180deg,#2f8f93,#0e6f74);
  box-shadow:0 1px 2px rgba(8,12,20,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.ct-part-add svg{width:18px;height:18px}
.ct-part-add:hover{filter:brightness(1.06)}

/* --- aside : lisibilité PV + confiance --- */
.ct-conf{padding:14px 16px}
.ct-conf-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text)}
.ct-conf-top b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ct-conf-bar{height:7px;border-radius:4px;background:#eef1f7;overflow:hidden;margin-top:9px}
.ct-conf-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#0e8a8f,#37d6c9)}
.ct-conf small{display:block;margin-top:9px;font-size:11.5px;color:var(--muted);line-height:1.5}
.ct-tips{list-style:none;margin:0;padding:0}
.ct-tips li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:12.5px;color:var(--text)}
.ct-tips li:not(:last-child){border-bottom:1px solid #f1f4f9}
.ct-tips svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--pg)}

@media (max-width:900px){
  .ct-ctrl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .ct-ctrl{grid-template-columns:1fr}
  .ct-part{flex-wrap:wrap}
}

/* =========================================================
   ASSISTANT IA — ia-conseil (11/07/2026) — chat Claude grounded
   catalogue : conversation + recommandations pieces reelles + codes OBD.
   Signature .pg-ia (bleu accent). Reutilise .pill, .btn. Prefixes .ia-*.
   ========================================================= */
.ia-page{max-width:1120px;margin:0 auto;padding:20px 22px 40px}
.ia-head{margin-bottom:20px}
.ia-head h1{font-size:26px}
.ia-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}

/* ---- fenetre de chat ---- */
.ia-chat{display:flex;flex-direction:column;height:min(72vh,720px);border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 1px rgba(16,21,30,.04),0 20px 44px -26px rgba(16,21,30,.24)}
.ia-bar{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid #eef1f7;
  background:linear-gradient(180deg,#fff,#f8fafd)}
.ia-bar-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--pg),var(--pg2));box-shadow:0 4px 12px -5px rgba(10,82,230,.6)}
.ia-bar-av svg{width:18px;height:18px}
.ia-bar-t b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.ia-bar-t small{font-size:11.5px;color:var(--green);display:inline-flex;align-items:center;gap:5px}
.ia-bar-t small:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,90,.18)}
.ia-bar .pill{margin-left:auto}

/* fil de messages */
.ia-thread{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:16px;background:#fbfcfe}
.ia-msg{display:flex;gap:11px;max-width:82%}
.ia-msg-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;margin-top:2px;
  background:linear-gradient(150deg,var(--pg),var(--pg2))}
.ia-msg-av svg{width:15px;height:15px}
.ia-bubble{padding:12px 15px;font-size:13.5px;line-height:1.55;color:var(--ink);
  background:#fff;border:1px solid #e6ebf3;border-radius:3px 14px 14px 14px;box-shadow:0 1px 2px rgba(16,21,30,.04)}
.ia-bubble p{margin:0 0 9px}.ia-bubble p:last-child{margin-bottom:0}
.ia-bubble b{font-weight:700}
.ia-msg.me{margin-left:auto;flex-direction:row-reverse}
.ia-msg.me .ia-bubble{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:14px 3px 14px 14px}
.ia-msg.me .ia-msg-av{background:#e7edf5;color:#5a6b83}

/* recommandations pieces (grounded catalogue) */
.ia-parts{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.ia-part{display:flex;align-items:center;gap:12px;border:1px solid #e6ebf3;background:#fff;padding:9px 11px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.ia-part:hover{border-color:#c9d7ee;box-shadow:0 6px 16px -10px rgba(16,21,30,.25)}
.ia-part-img{width:46px;height:46px;flex:none;border-radius:6px;display:grid;place-items:center;color:#8494a8;
  background:radial-gradient(120% 120% at 50% 20%,#f4f7fb,#e9eef6)}
.ia-part-img svg{width:22px;height:22px}
.ia-part-i{min-width:0;flex:1}
.ia-part-nm{display:block;font-size:12.8px;font-weight:700;color:var(--ink);line-height:1.3}
.ia-part-ref{display:block;font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px}
.ia-part-side{flex:none;text-align:right}
.ia-part-pr{display:block;font-size:14px;font-weight:800;color:var(--red)}
.ia-part-cta{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:600;color:var(--accent)}
.ia-part-cta svg{width:12px;height:12px}

/* indicateur de frappe */
.ia-typing{display:flex;gap:4px;padding:13px 15px}
.ia-typing i{width:7px;height:7px;border-radius:50%;background:#c2ccd8;animation:iaBlink 1.2s infinite}
.ia-typing i:nth-child(2){animation-delay:.2s}.ia-typing i:nth-child(3){animation-delay:.4s}
@keyframes iaBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* composer */
.ia-composer{border-top:1px solid #eef1f7;background:#fff;padding:12px 16px 14px}
.ia-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.ia-chip{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text);
  border:1px solid #e2e8f2;background:#f7f9fc;border-radius:999px;padding:6px 12px;cursor:pointer;transition:.15s}
.ia-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-50)}
.ia-chip svg{width:13px;height:13px}
.ia-chip.obd{color:var(--accent);border-color:#cfe0ff;background:var(--accent-50)}
.ia-inrow{display:flex;align-items:flex-end;gap:10px}
.ia-inrow textarea{flex:1;resize:none;border:1.5px solid #d8e0ec;border-radius:12px;padding:11px 14px;font-family:inherit;
  font-size:13.5px;line-height:1.4;color:var(--ink);outline:0;max-height:120px;transition:border-color .15s,box-shadow .15s}
.ia-inrow textarea:focus{border-color:var(--pg);box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.ia-send{width:46px;height:46px;flex:none;border:0;cursor:pointer;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--pg),var(--pg2));box-shadow:0 8px 18px -8px rgba(10,82,230,.6)}
.ia-send svg{width:19px;height:19px}
.ia-legal{margin-top:9px;font-size:10.5px;color:var(--muted);text-align:center}

/* ---- aside ---- */
.ia-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:18px}
.ia-card{border:1px solid #e6ebf3;background:#fff;overflow:hidden;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 12px 26px -20px rgba(16,21,30,.16)}
.ia-card-h{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #eef1f7;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.ia-card-h svg{width:16px;height:16px;color:var(--pg)}
.ia-card-b{padding:14px 15px}
/* contexte vehicule */
.ia-veh{display:flex;align-items:center;gap:11px}
.ia-veh-ic{width:36px;height:36px;flex:none;border-radius:8px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#64758c,#37475b)}
.ia-veh-ic svg{width:18px;height:18px}
.ia-veh b{display:block;font-size:13px;color:var(--ink)}
.ia-veh small{font-size:11.5px;color:var(--muted)}
/* capacites */
.ia-can{list-style:none;margin:0;padding:0}
.ia-can li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:12.6px;color:var(--text);line-height:1.45}
.ia-can li:not(:last-child){border-bottom:1px solid #f1f4f9}
.ia-can svg{width:16px;height:16px;color:var(--pg);flex:none;margin-top:1px}
.ia-can b{color:var(--ink);font-weight:600}
/* disclaimer */
.ia-note{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border:1px solid var(--amber-50);background:var(--amber-50)}
.ia-note svg{width:16px;height:16px;color:#b9791a;flex:none;margin-top:1px}
.ia-note p{margin:0;font-size:11.8px;color:#8a5e14;line-height:1.5}
.ia-note b{color:#6b480f}

@media (max-width:900px){
  .ia-layout{grid-template-columns:1fr}
  .ia-side{position:static}
  .ia-msg{max-width:92%}
}

/* =========================================================
   PRENDRE RENDEZ-VOUS (14/07/2026) — réservation atelier / mécano
   Signature .pg-rdv (bleu de marque, charte). Réutilise .co-card / .co-card-h
   (pastille numérotée), .co-opt (choix atelier), .dg-vbar (véhicule),
   .pill, .btn. Styles propres .rdv-* pour motifs / agenda / récap.
   ========================================================= */
.rdv-page{max-width:1120px;margin:0 auto;padding:20px 20px 60px}
.rdv-head{margin:16px 0 22px}
.rdv-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}

/* =========================================================
   HERO DE PAGE (14/07/2026) — bandeau chrome HD teinté par la
   signature de page (--pg/--pg2). Remplace le bandeau plat .pgh
   sur les pages internes (hors accueil / catalogue / produit).
   La teinte suit automatiquement --pg/--pg2 du <body> (color-mix) :
   diagnostic=charbon, carnet=vert, panier=bleu, retours=ambre…
   ========================================================= */
.pg-hero{position:relative;overflow:hidden;width:100%;box-sizing:border-box;display:flex;align-items:center;gap:24px;padding:26px 32px;color:#fff;
  --hero1:color-mix(in srgb,var(--pg2,#0a52e6) 84%,#0b1424);
  --hero2:color-mix(in srgb,var(--pg2,#0a52e6) 58%,#05080f);
  background:
    radial-gradient(135% 130% at 84% -30%,color-mix(in srgb,var(--pg,#2b7bff) 44%,transparent),transparent 55%),
    linear-gradient(135deg,var(--hero1) 0%,var(--hero2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(255,255,255,.05),
    0 20px 44px -24px rgba(6,14,30,.85)}
/* trame technique très discrète */
.pg-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px,38px 38px}
/* voile gauche pour garantir le contraste du texte */
.pg-hero:after{content:"";position:absolute;left:0;top:0;bottom:0;width:64%;pointer-events:none;
  background:linear-gradient(90deg,var(--hero1) 14%,transparent 100%)}
.pg-hero-ico{position:relative;z-index:1;width:58px;height:58px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2),0 8px 18px -8px rgba(0,0,0,.55)}
.pg-hero-ico svg{width:28px;height:28px;stroke-width:2}
.pg-hero-txt{position:relative;z-index:1;min-width:0}
.pg-hero-txt h1{font-size:27px;color:#fff}
.pg-hero h1::after{background:linear-gradient(90deg,color-mix(in srgb,var(--pg,#2b7bff) 55%,#ffffff),#eef4ff)}
.pg-hero-txt p{margin-top:11px;font-size:13.5px;color:rgba(255,255,255,.82);max-width:580px;line-height:1.5}
.pg-hero-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:15px}
.pg-hero-tags span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.pg-hero-tags svg{width:14px;height:14px;color:color-mix(in srgb,var(--pg,#2b7bff) 50%,#ffffff)}
.pg-hero-side{position:relative;z-index:1;margin-left:auto;flex:none}
/* éléments hérités replacés sur fond sombre du hero */
.pg-hero-txt p b{color:#fff}
.pg-hero-side .cart-continue{color:rgba(255,255,255,.85)}
.pg-hero-side .cart-continue:hover{color:#fff}
.pg-hero .trk-kicker{color:rgba(255,255,255,.8)}
.pg-hero .trk-kicker b,.pg-hero .trk-eta-hl{color:#fff}
/* mini calendrier flottant = signal « rendez-vous » (spécifique prendre-rdv) */
.rdv-hero-cal{width:100px;text-align:center;overflow:hidden;background:#fff;color:#10151e;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6)}
.rdv-hero-cal .m{display:block;padding:6px 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#2b7bff,#0a52e6);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}
.rdv-hero-cal .d{display:block;font-size:36px;font-weight:700;line-height:1;padding:11px 0 3px;color:#10151e}
.rdv-hero-cal .w{display:block;font-size:11px;color:var(--muted);padding-bottom:11px}
.rdv-main{display:flex;flex-direction:column;gap:18px}

/* rappel « issu de vos rappels » (pont carnet) */
.rdv-fromcarnet{display:flex;align-items:center;gap:11px;padding:12px 15px;
  border:1px solid #cfe0fb;background:linear-gradient(180deg,#f3f8fe,#e9f2fd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.rdv-fromcarnet .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--pg),var(--pg2))}
.rdv-fromcarnet .ic svg{width:18px;height:18px}
.rdv-fromcarnet .tx{font-size:13px;color:#274069;line-height:1.45}
.rdv-fromcarnet .tx b{color:#1b3057;font-weight:700}
.rdv-fromcarnet a{margin-left:auto;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--pg);
  display:inline-flex;align-items:center;gap:5px}
.rdv-fromcarnet a svg{width:14px;height:14px}

/* motifs (chips sélectionnables) */
.rdv-chips{display:flex;flex-wrap:wrap;gap:9px}
.rdv-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;
  border:1px solid #dfe4ec;background:linear-gradient(180deg,#ffffff,#f5f8fc);
  box-shadow:inset 0 1px 0 #fff,0 1px 1.5px rgba(16,21,30,.05);
  font-size:13px;font-weight:600;color:#3a4353;transition:border-color .14s,color .14s}
.rdv-chip svg{width:16px;height:16px;color:#8a93a3}
.rdv-chip:hover{border-color:#c7d2e2}
.rdv-chip.sel{border-color:var(--pg);color:var(--pg);background:linear-gradient(180deg,#f5f9ff,#eaf3ff);
  box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.rdv-chip.sel svg{color:var(--pg)}

/* zone commentaire */
.rdv-note{margin-top:14px}
.rdv-note label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.rdv-note textarea{width:100%;min-height:78px;resize:vertical;border:1px solid var(--line);padding:11px 13px;
  font-family:inherit;font-size:13.5px;color:var(--ink);background:linear-gradient(180deg,#f7f9fc,#f1f4f9);
  box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.rdv-note textarea:focus{outline:none;border-color:var(--pg);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.14)}

/* choix atelier : réutilise .co-opt ; on ajoute méta note/distance/dispo */
.rdv-g-meta{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.rdv-g-rate{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:#b9791a}
.rdv-g-rate svg{width:13px;height:13px;fill:#f2b21a;color:#f2b21a}
.rdv-g-dispo{font-size:11.5px;color:var(--green);font-weight:600}
.co-opt .oic.rdv-g-ic{background:linear-gradient(150deg,#eef1f6,#e2e7ef)}
.rdv-more{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--pg)}
.rdv-more svg{width:15px;height:15px}

/* agenda : jours + créneaux */
.rdv-days{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px}
.rdv-day{flex:none;width:66px;padding:10px 0;text-align:center;cursor:pointer;
  border:1px solid #dfe4ec;background:linear-gradient(180deg,#ffffff,#f5f8fc);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,21,30,.05);transition:border-color .14s}
.rdv-day:hover{border-color:#c7d2e2}
.rdv-day .dow{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rdv-day .dnum{display:block;font-size:20px;font-weight:700;color:var(--ink);line-height:1.1;margin:2px 0}
.rdv-day .dmon{display:block;font-size:10.5px;color:var(--muted)}
.rdv-day.off{opacity:.4;cursor:not-allowed}
.rdv-day.sel{border-color:var(--pg);background:linear-gradient(180deg,#f5f9ff,#eaf3ff);box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.rdv-day.sel .dnum,.rdv-day.sel .dow{color:var(--pg)}
.rdv-slots-h{margin:16px 0 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7585}
.rdv-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.rdv-slot{padding:10px 0;text-align:center;cursor:pointer;font-size:13.5px;font-weight:600;color:#3a4353;
  border:1px solid #dfe4ec;background:linear-gradient(180deg,#ffffff,#f5f8fc);
  box-shadow:inset 0 1px 0 #fff,0 1px 1.5px rgba(16,21,30,.05);transition:border-color .14s,color .14s}
.rdv-slot:hover{border-color:#c7d2e2}
.rdv-slot.off{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.rdv-slot.sel{border-color:var(--pg);color:var(--pg);background:linear-gradient(180deg,#f5f9ff,#eaf3ff);box-shadow:0 0 0 3px rgba(31,111,235,.14)}

/* barre de confirmation bas de colonne */
.rdv-submit{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f8fafd);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.rdv-submit .txt{font-size:12.5px;color:var(--muted);line-height:1.4}
.rdv-submit .txt b{color:var(--ink);font-weight:700}
.rdv-submit .btn{margin-left:auto}

/* ---- ASIDE : récapitulatif sticky ---- */
.rdv-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.rdv-recap{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 28px -18px rgba(16,21,30,.16)}
.rdv-recap-h{display:flex;align-items:center;gap:9px;padding:12px 16px;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b3340;
  background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef}
.rdv-recap-h svg{width:16px;height:16px;color:var(--pg)}
.rdv-recap-b{padding:6px 16px 4px}
.rdv-rc-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px dashed var(--line)}
.rdv-rc-row:last-child{border-bottom:none}
.rdv-rc-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;color:var(--pg);
  background:#eef4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.rdv-rc-ic svg{width:16px;height:16px}
.rdv-rc-txt{min-width:0}
.rdv-rc-lbl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rdv-rc-val{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px}
.rdv-rc-val.empty{color:#aab2c0;font-weight:500;font-style:italic}
.rdv-quote{display:flex;align-items:center;gap:8px;margin:4px 16px 16px;padding:11px 13px;
  background:var(--green-50);color:#0f7a41;font-size:12.5px;font-weight:600}
.rdv-quote svg{width:16px;height:16px;flex:none}

/* réassurance */
.rdv-reassure{border:1px solid #e6ebf3;background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.rdv-reassure li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--text);line-height:1.45;list-style:none}
.rdv-reassure svg{width:16px;height:16px;flex:none;color:var(--pg);margin-top:1px}
.rdv-reassure b{color:var(--ink);font-weight:700}

/* carte de confirmation (état démo révélé) */
.rdv-done{border:1px solid #cbe9d6;background:linear-gradient(180deg,#f4fcf7,#eafaf0);
  padding:26px 24px;text-align:center}
.rdv-done-ic{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#22b066,#15924f);box-shadow:0 8px 20px -8px rgba(21,146,79,.6)}
.rdv-done-ic svg{width:30px;height:30px}
.rdv-done h2{font-size:20px;font-weight:700;color:#0f7a41;margin:0 0 6px}
.rdv-done p{font-size:13.5px;color:#2b3340;margin:0 auto 16px;max-width:400px;line-height:1.5}
.rdv-done-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:900px){
  .rdv-layout{grid-template-columns:1fr}
  .rdv-side{position:static}
}
@media (max-width:760px){
  .pg-hero{padding:22px 20px}
  .pg-hero-side{display:none}
}

/* =========================================================
   ESPACE RENDEZ-VOUS CLIENT (14/07/2026) — liste & gestion des RDV
   Signature .pg-ecr (bleu). Hero .pg-hero + styles propres .ecr-*.
   Réutilise .pill / .btn / .rdv-reassure.
   ========================================================= */
.ecr-page{max-width:1120px;margin:0 auto;padding:20px 20px 60px}
.ecr-head{margin:16px 0 22px}
.ecr-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.ecr-main{display:flex;flex-direction:column;gap:16px}

/* onglets À venir / Passés / Annulés */
.ecr-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.ecr-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:none;font-family:inherit}
.ecr-tab .cnt{font-size:11px;font-weight:700;min-width:19px;height:19px;padding:0 5px;display:inline-grid;place-items:center;
  background:var(--surface-2);color:#6b7585}
.ecr-tab:hover{color:var(--ink)}
.ecr-tab.active{color:var(--pg)}
.ecr-tab.active .cnt{background:var(--pg);color:#fff}
.ecr-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pg)}

.ecr-panel{display:flex;flex-direction:column;gap:14px}
.ecr-panel[hidden]{display:none}

/* carte rendez-vous */
.ecr-appt{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff,#fbfcfe);
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 10px 22px -16px rgba(16,21,30,.14)}
.ecr-appt.past{opacity:.94}
.ecr-appt.canceled{opacity:.85}
/* tuile date */
.ecr-date{width:74px;flex:none;text-align:center;overflow:hidden;border:1px solid #e3e7ef;
  box-shadow:inset 0 0 0 1px #fff}
.ecr-date .m{display:block;padding:4px 0;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--pg),var(--pg2))}
.ecr-date.gray .m{background:linear-gradient(180deg,#8a95a5,#5f6a7a)}
.ecr-date .d{display:block;font-size:28px;font-weight:700;line-height:1;padding:9px 0 2px;color:var(--ink)}
.ecr-date .w{display:block;font-size:10.5px;color:var(--muted);padding-bottom:8px}
/* corps */
.ecr-appt-body{flex:1;min-width:0}
.ecr-appt-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ecr-appt-name{font-size:15px;font-weight:700;color:var(--ink)}
.ecr-mrows{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.ecr-mrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.ecr-mrow svg{width:15px;height:15px;color:#8a93a3;flex:none}
.ecr-mrow b{color:var(--ink);font-weight:600}
.ecr-appt-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.ecr-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--ink);border:1px solid #dfe4ec;
  background:linear-gradient(180deg,#fff,#f5f8fc);box-shadow:inset 0 1px 0 #fff;text-decoration:none;transition:border-color .14s,color .14s}
.ecr-act svg{width:14px;height:14px}
.ecr-act:hover{border-color:#c7d2e2}
.ecr-act.accent{color:var(--pg);border-color:#bcd7fb}
.ecr-act.danger{color:var(--red)}
.ecr-act.danger:hover{border-color:#f2b6b6}

/* pastille statut grise (passé) — complète .pill existants */
.pill-grey{background:#eceff3;color:#657084}

/* état vide */
.ecr-empty{text-align:center;padding:44px 24px;border:1px dashed #d7deea;background:#fbfcfe;color:var(--muted)}
.ecr-empty svg{width:34px;height:34px;color:#b8c2d0;margin-bottom:10px}
.ecr-empty h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 5px}
.ecr-empty p{font-size:13px;margin:0 auto 15px;max-width:340px;line-height:1.5}

/* aside */
.ecr-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.ecr-help{border:1px solid #e6ebf3;background:#fff;padding:16px}
.ecr-help h4{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#2b3340;margin:0 0 10px}
.ecr-help p{font-size:12.5px;color:var(--text);line-height:1.5;margin:0 0 12px}
.ecr-help .btn{width:100%;justify-content:center}

@media (max-width:900px){
  .ecr-layout{grid-template-columns:1fr}
  .ecr-side{position:static}
}

/* =========================================================
   TROUVER UN MÉCANO (14/07/2026) — localisateur d'ateliers partenaires
   Signature .pg-tm (bleu). Hero .pg-hero + styles propres .tm-*.
   Carte stylisée (pas de tuiles externes) + liste d'ateliers.
   ========================================================= */
.tm-page{max-width:1180px;margin:0 auto;padding:20px 20px 60px}
.tm-head{margin:16px 0 18px}

/* barre de recherche */
.tm-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f8fafd);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.tm-loc{display:flex;align-items:center;flex:1;min-width:220px;border:1px solid var(--line);overflow:hidden;
  background:#fff;box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.tm-loc > i{width:42px;display:grid;place-items:center;color:var(--pg);flex:none}
.tm-loc > i svg{width:17px;height:17px}
.tm-loc input{flex:1;min-width:0;height:44px;border:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink)}
.tm-loc input:focus{outline:none}
.tm-select{height:46px;min-width:160px;border:1px solid var(--line);padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.tm-geo{display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 15px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--pg);border:1px solid #bcd7fb;background:linear-gradient(180deg,#fff,#f0f6ff);
  box-shadow:inset 0 1px 0 #fff}
.tm-geo svg{width:16px;height:16px}

/* filtres services */
.tm-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tm-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:#3a4353;border:1px solid #dfe4ec;
  background:linear-gradient(180deg,#fff,#f5f8fc);box-shadow:inset 0 1px 0 #fff}
.tm-chip svg{width:14px;height:14px;color:#8a93a3}
.tm-chip:hover{border-color:#c7d2e2}
.tm-chip.sel{border-color:var(--pg);color:var(--pg);background:linear-gradient(180deg,#f5f9ff,#eaf3ff);box-shadow:0 0 0 3px rgba(31,111,235,.13)}
.tm-chip.sel svg{color:var(--pg)}
.tm-count{margin-left:auto;align-self:center;font-size:12.5px;color:var(--muted);font-weight:600}
.tm-count b{color:var(--ink)}

/* layout liste + carte */
.tm-layout{display:grid;grid-template-columns:1fr 430px;gap:20px;align-items:start}
.tm-list{display:flex;flex-direction:column;gap:13px}

/* carte atelier */
.tm-card{display:flex;gap:14px;padding:15px 17px;border:1px solid #e6ebf3;cursor:pointer;
  background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 1px rgba(16,21,30,.03),0 10px 22px -16px rgba(16,21,30,.14);
  transition:border-color .14s}
.tm-card:hover,.tm-card.sel{border-color:var(--pg);box-shadow:0 0 0 3px rgba(31,111,235,.1),0 10px 22px -16px rgba(16,21,30,.18)}
.tm-rank{width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;
  border-radius:50%;background:linear-gradient(150deg,var(--pg),var(--pg2));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.tm-body{flex:1;min-width:0}
.tm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm-name{font-size:15px;font-weight:700;color:var(--ink)}
.tm-rate{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:#b9791a}
.tm-rate svg{width:13px;height:13px;fill:#f2b21a;color:#f2b21a}
.tm-rate small{color:var(--muted);font-weight:500}
.tm-dist{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--pg);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.tm-dist svg{width:13px;height:13px}
.tm-addr{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);margin-top:6px}
.tm-addr svg{width:14px;height:14px;color:#8a93a3;flex:none}
.tm-svcs{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tm-svc{font-size:11px;font-weight:600;color:#4a5666;background:var(--surface-2);padding:3px 8px;box-shadow:inset 0 0 0 1px #fff}
.tm-foot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.tm-dispo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green)}
.tm-dispo svg{width:14px;height:14px}
.tm-acts{margin-left:auto;display:flex;gap:8px}
.tm-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;cursor:pointer;font-family:inherit;text-decoration:none;
  font-size:12.5px;font-weight:600;border:1px solid #dfe4ec;color:var(--ink);background:linear-gradient(180deg,#fff,#f5f8fc);box-shadow:inset 0 1px 0 #fff}
.tm-btn svg{width:14px;height:14px}
.tm-btn:hover{border-color:#c7d2e2}
.tm-btn.primary{color:#fff;border-color:transparent;background:linear-gradient(180deg,#2b7bff,#0a66ff)}

/* carte géographique stylisée (pas de tuiles externes) */
.tm-map{position:sticky;top:18px;height:620px;overflow:hidden;border:1px solid #dfe4ec;
  box-shadow:0 1px 2px rgba(16,21,30,.05),inset 0 0 0 1px #fff;
  background-color:#e7edf4;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(126,196,150,.42), transparent 15%),
    radial-gradient(circle at 82% 72%, rgba(130,175,235,.5), transparent 19%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.75) 47px 51px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.75) 47px 51px)}
.tm-map:before{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(56deg, transparent 43.5%, rgba(255,255,255,.9) 43.5% 47%, transparent 47%),
    linear-gradient(-34deg, transparent 61%, rgba(255,255,255,.85) 61% 63.6%, transparent 63.6%)}
.tm-map-bar{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px}
.tm-map-info{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;font-size:12px;font-weight:600;color:#2b3340;
  background:rgba(255,255,255,.94);box-shadow:0 4px 12px -4px rgba(16,21,30,.28),inset 0 0 0 1px rgba(255,255,255,.6)}
.tm-map-info svg{width:14px;height:14px;color:var(--pg)}
.tm-recenter{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 11px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.94);box-shadow:0 4px 12px -4px rgba(16,21,30,.28)}
.tm-recenter svg{width:14px;height:14px;color:var(--pg)}
.tm-pin{position:absolute;z-index:2;transform:translate(-50%,-100%);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;border:2px solid #fff;
  background:linear-gradient(150deg,var(--pg),var(--pg2));box-shadow:0 6px 13px -4px rgba(16,21,30,.55)}
.tm-pin:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--pg2)}
.tm-pin.me{width:20px;height:20px;background:radial-gradient(circle,#2b7bff 40%,#0a66ff);border-color:#fff;
  box-shadow:0 0 0 6px rgba(43,123,255,.25),0 6px 12px -4px rgba(16,21,30,.5)}
.tm-pin.me:after{display:none}

@media (max-width:900px){
  .tm-layout{grid-template-columns:1fr}
  .tm-map{position:static;height:340px;order:-1}
}

/* =========================================================
   LAISSER UN AVIS (14/07/2026) — notation produit / commande
   Signature .pg-avis (or/étoile). Hero .pg-hero + .co-card (pastille)
   + .co-field + .btn. Styles propres .av-*.
   ========================================================= */
.av-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.av-head{margin:16px 0 22px}
.av-layout{display:grid;grid-template-columns:1fr 312px;gap:22px;align-items:start}
.av-main{display:flex;flex-direction:column;gap:16px}

/* produit évalué */
.av-item{display:flex;gap:14px;align-items:center}
.av-item-thumb{width:58px;height:58px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.av-item-thumb svg{width:26px;height:26px;color:#8a93a3}
.av-item-info{flex:1;min-width:0}
.av-item-br{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.av-item-nm{font-size:14.5px;font-weight:700;color:var(--ink);margin:1px 0 2px}
.av-item-meta{font-size:12px;color:var(--muted)}
.av-item-chg{margin-left:auto;flex:none;font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.av-item-chg svg{width:14px;height:14px}

/* étoiles (base commune) */
.av-star{background:none;border:none;cursor:pointer;padding:2px;color:#d2d9e3;line-height:0;transition:color .1s}
.av-star svg{width:34px;height:34px;stroke-width:1.6}
.av-star.on svg{fill:#f5b301;color:#f5b301}
.av-star.hv svg{fill:#ffce53;color:#ffce53}

/* note globale */
.av-big{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.av-stars{display:flex;gap:5px}
.av-big-lbl{font-size:15px;font-weight:700;color:var(--ink)}
.av-big-lbl small{display:block;font-weight:500;color:var(--muted);font-size:12px;margin-top:2px}

/* sous-notes */
.av-subs{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:12px}
.av-sub{display:flex;align-items:center;gap:14px}
.av-sub-lbl{font-size:13px;color:var(--text);width:170px;flex:none}
.av-mini{display:flex;gap:3px}
.av-mini .av-star svg{width:21px;height:21px}

/* recommandation */
.av-reco{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.av-reco-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px;cursor:pointer;font-family:inherit;
  border:1px solid #dfe4ec;background:linear-gradient(180deg,#fff,#f5f8fc);box-shadow:inset 0 1px 0 #fff;
  font-weight:600;font-size:13.5px;color:#3a4353}
.av-reco-b svg{width:17px;height:17px}
.av-reco-b.sel.yes{border-color:var(--green);color:var(--green);background:var(--green-50)}
.av-reco-b.sel.no{border-color:var(--red);color:var(--red);background:#fdecec}

/* photos */
.av-photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.av-photo-add{width:84px;height:84px;display:grid;place-content:center;justify-items:center;gap:5px;cursor:pointer;
  border:1px dashed #c7d0dd;color:var(--muted);font-size:11px;font-weight:600;background:#fbfcfe;text-align:center}
.av-photo-add svg{width:20px;height:20px}
.av-photo-add:hover{border-color:var(--accent);color:var(--accent)}

/* barre d'envoi */
.av-submit{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f8fafd);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.av-submit .txt{font-size:12.5px;color:var(--muted);line-height:1.4}
.av-submit .btn{margin-left:auto}

/* aside */
.av-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.av-tip{border:1px solid #e6ebf3;background:#fff;padding:16px}
.av-tip h4{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b3340;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.av-tip h4 svg{width:16px;height:16px;color:var(--pg)}

/* état merci */
.av-done{border:1px solid #dbe4ef;background:linear-gradient(180deg,#f8fafd,#f2f6fb);padding:28px 24px;text-align:center}
.av-done-ic{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#2b7bff,#0a52e6);box-shadow:0 8px 20px -8px rgba(10,82,230,.55)}
.av-done-ic svg{width:30px;height:30px;fill:#ffd75e}
.av-done h2{font-size:20px;font-weight:700;color:#0f4bc0;margin:0 0 6px}
.av-done p{font-size:13.5px;color:var(--text);margin:0 auto 16px;max-width:400px;line-height:1.5}

@media (max-width:900px){
  .av-layout{grid-template-columns:1fr}
  .av-side{position:static}
}

/* =========================================================
   PARRAINAGE (14/07/2026) — invitez vos proches, gagnez du crédit
   Signature .pg-parr (émeraude). Hero .pg-hero + .co-card. Styles .pr-*.
   ========================================================= */
.pr-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.pr-head{margin:16px 0 22px}
.pr-layout{display:grid;grid-template-columns:1fr 312px;gap:22px;align-items:start}
.pr-main{display:flex;flex-direction:column;gap:16px}

/* offre : filleul reçoit / vous gagnez */
.pr-deal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:24px 22px;
  border:1px solid #e6ebf3;background:linear-gradient(180deg,#fbfcfe,#f4f7fb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.pr-deal-side{text-align:center}
.pr-deal-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7585}
.pr-deal-amt{font-size:34px;font-weight:700;color:#e11d2a;line-height:1.1;margin:4px 0 2px}
.pr-deal-sub{font-size:12px;color:#6b7585}
.pr-deal-mid{width:52px;height:52px;display:grid;place-items:center;color:#fff;border-radius:50%;
  background:linear-gradient(150deg,#3d4a5c,#222c3a);box-shadow:0 8px 18px -8px rgba(16,21,30,.5)}
.pr-deal-mid svg{width:24px;height:24px}

/* partage */
.pr-linkbox{display:flex;border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.pr-linkbox input{flex:1;min-width:0;border:none;height:48px;padding:0 14px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:#f7f9fc}
.pr-linkbox input:focus{outline:none}
.pr-copy{display:inline-flex;align-items:center;gap:7px;padding:0 18px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  color:#fff;border:none;background:linear-gradient(180deg,var(--pg),var(--pg2))}
.pr-copy svg{width:16px;height:16px}
.pr-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.pr-soc{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;cursor:pointer;font-family:inherit;text-decoration:none;
  font-size:13px;font-weight:600;color:#3a4353;border:1px solid #dfe4ec;background:linear-gradient(180deg,#fff,#f5f8fc);box-shadow:inset 0 1px 0 #fff}
.pr-soc svg{width:16px;height:16px}
.pr-soc:hover{border-color:#c7d2e2}
.pr-invite{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.pr-invite-row{display:flex;gap:10px}
.pr-invite-row input{flex:1;height:46px;border:1px solid var(--line);padding:0 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}

/* étapes */
.pr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pr-step{text-align:center;padding:6px 8px}
.pr-step-n{width:44px;height:44px;margin:0 auto 10px;display:grid;place-items:center;color:#fff;border-radius:50%;
  background:linear-gradient(150deg,#3d4a5c,#222c3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.pr-step-n svg{width:21px;height:21px}
.pr-step b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.pr-step small{font-size:12px;color:var(--muted);line-height:1.45}

/* stats */
.pr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.pr-stat{padding:14px 16px;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#f8fafd);text-align:center}
.pr-stat b{display:block;font-size:24px;font-weight:700;color:var(--ink);line-height:1.1}
.pr-stat small{font-size:11.5px;color:var(--muted);font-weight:600}
.pr-stat.hl b{color:#e11d2a}

/* liste des filleuls */
.pr-friend{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.pr-friend:last-child{border-bottom:none}
.pr-friend-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,#8a95a5,#5f6a7a)}
.pr-friend-info{flex:1;min-width:0}
.pr-friend-nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.pr-friend-dt{font-size:11.5px;color:var(--muted)}
.pr-friend .pill{margin-left:auto}

/* aside cagnotte */
.pr-wallet{border:1px solid #e6ebf3;overflow:hidden;background:#fff;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 28px -18px rgba(16,21,30,.18)}
.pr-wallet-h{padding:14px 16px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(150deg,#3d4a5c,#222c3a);display:flex;align-items:center;gap:8px}
.pr-wallet-h svg{width:16px;height:16px}
.pr-wallet-b{padding:16px;text-align:center;background:#fff}
.pr-wallet-amt{font-size:36px;font-weight:700;color:#e11d2a;line-height:1}
.pr-wallet-sub{font-size:12px;color:var(--muted);margin:4px 0 14px}
.pr-wallet-b .btn{width:100%;justify-content:center;background:linear-gradient(180deg,#3d4a5c,#222c3a);
  border-color:transparent;box-shadow:0 6px 16px -6px rgba(16,21,30,.4)}
.pr-terms{border:1px solid #e6ebf3;background:#fff;padding:14px 16px;font-size:11.8px;color:var(--muted);line-height:1.55}
.pr-terms h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2b3340;margin:0 0 8px}

@media (max-width:900px){
  .pr-layout{grid-template-columns:1fr}
  .pr-side{position:static}
}
@media (max-width:560px){
  .pr-deal{grid-template-columns:1fr}
  .pr-deal-mid{transform:rotate(90deg);margin:4px auto}
  .pr-steps{grid-template-columns:1fr}
  .pr-stats{grid-template-columns:1fr}
}

/* =========================================================
   COMMANDE RAPIDE (14/07/2026) — saisie/collage de références → panier
   Signature .pg-qo (charte bleu). Recette : hero bleu, prix ROUGE,
   icônes CHROME GRAPHITE. Hero .pg-hero + .co-card. Styles .qo-*.
   ========================================================= */
.qo-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.qo-head{margin:16px 0 22px}
.qo-layout{display:grid;grid-template-columns:1fr 312px;gap:22px;align-items:start}
.qo-main{display:flex;flex-direction:column;gap:16px}

/* onglets mode de saisie */
.qo-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.qo-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:none;font-family:inherit}
.qo-tab svg{width:16px;height:16px}
.qo-tab:hover{color:var(--ink)}
.qo-tab.active{color:var(--accent)}
.qo-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.qo-pane[hidden]{display:none}

/* saisie ligne par ligne */
.qo-rows{display:flex;flex-direction:column;gap:9px}
.qo-rowhd,.qo-row{display:grid;grid-template-columns:1fr 96px 38px;gap:10px;align-items:center}
.qo-rowhd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 2px}
.qo-row input{height:44px;border:1px solid var(--line);padding:0 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.qo-row input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.qo-row .qo-del{width:38px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--muted);
  border:1px solid #dfe4ec;background:linear-gradient(180deg,#fff,#f5f8fc)}
.qo-row .qo-del:hover{border-color:#f2b6b6;color:var(--red)}
.qo-row .qo-del svg{width:16px;height:16px}
.qo-addrow{margin-top:12px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--accent);border:1px dashed #bcd7fb;background:linear-gradient(180deg,#fff,#f0f6ff)}
.qo-addrow svg{width:15px;height:15px}

/* collage liste */
.qo-paste textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--line);padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;color:var(--ink);background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05)}
.qo-paste textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.qo-paste-hint{margin-top:8px;font-size:12px;color:var(--muted)}
.qo-paste-hint code{background:var(--surface-2);padding:1px 6px;font-size:11.5px;color:#3a4353}

/* article reconnu */
.qo-item{display:flex;gap:13px;align-items:center;padding:13px 15px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff,#fbfcfe)}
.qo-item + .qo-item{margin-top:9px}
.qo-item-th{width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.qo-item-th svg{width:22px;height:22px;color:#8a93a3}
.qo-item-info{flex:1;min-width:0}
.qo-item-br{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.qo-item-nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.qo-item-ref{font-size:11.5px;color:var(--muted)}
.qo-item-stock{font-size:11.5px;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:4px}
.qo-item-stock svg{width:12px;height:12px}
.qo-item-qty{display:flex;align-items:center;border:1px solid var(--line);background:#fff}
.qo-item-qty button{width:30px;height:34px;border:none;background:#f5f8fc;cursor:pointer;color:var(--ink);font-size:16px}
.qo-item-qty span{width:34px;text-align:center;font-size:13.5px;font-weight:600}
.qo-item-price{width:82px;text-align:right;font-size:15px;font-weight:700;color:#e11d2a}
.qo-item-price small{display:block;font-size:11px;font-weight:500;color:#9aa3b1;text-decoration:line-through}
.qo-item-x{width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer;color:#aab2c0}
.qo-item-x:hover{color:var(--red)}
.qo-item-x svg{width:16px;height:16px}
/* non reconnu */
.qo-item.unknown{border-color:#f0d8a8;background:linear-gradient(180deg,#fffdf5,#fdf6e6)}
.qo-item.unknown .qo-item-th{background:#fbeeca;border-color:#f0d8a8}
.qo-item.unknown .qo-item-th svg{color:#b9791a}

/* barre total */
.qo-submit{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff,#f8fafd);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.qo-submit[hidden]{display:none}
.qo-submit-tot{font-size:13px;color:var(--muted)}
.qo-submit-tot b{display:block;font-size:22px;font-weight:700;color:#e11d2a;margin-top:1px}
.qo-submit .btn{margin-left:auto}

/* aside */
.qo-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.qo-card{border:1px solid #e6ebf3;background:#fff;padding:16px}
.qo-card h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2b3340;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.qo-card h4 .qo-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;color:#fff;border-radius:6px;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.qo-card h4 .qo-ic svg{width:15px;height:15px}
.qo-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px;text-align:center;cursor:pointer;
  border:1px dashed #c7d0dd;background:#fbfcfe;color:var(--muted);font-size:12px}
.qo-drop svg{width:24px;height:24px;color:#8a93a3}
.qo-drop b{font-size:13px;color:var(--ink);font-weight:700}

@media (max-width:900px){
  .qo-layout{grid-template-columns:1fr}
  .qo-side{position:static}
}

/* =========================================================
   TRANSFERT DU CARNET (14/07/2026) — céder le carnet au nouveau proprio
   Signature .pg-tc (charte bleu). Icônes CHROME GRAPHITE. .pg-hero + .co-card.
   ========================================================= */
.tc-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.tc-head{margin:16px 0 22px}
.tc-layout{display:grid;grid-template-columns:1fr 312px;gap:22px;align-items:start}
.tc-main{display:flex;flex-direction:column;gap:16px}

/* véhicule + résumé carnet */
.tc-stats{display:flex;gap:0;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.tc-stat{flex:1;text-align:center;padding:0 8px;border-right:1px solid var(--line)}
.tc-stat:last-child{border-right:none}
.tc-stat b{display:block;font-size:20px;font-weight:700;color:var(--ink);line-height:1.1}
.tc-stat small{font-size:11px;color:var(--muted);font-weight:600}

/* options de transfert (cases à cocher) */
.tc-opts{display:flex;flex-direction:column;gap:10px}
.tc-opt{display:flex;align-items:center;gap:13px;border:1px solid #e6ebf3;padding:13px 15px;cursor:pointer;
  background:linear-gradient(180deg,#fff,#fbfcfe)}
.tc-opt:hover{border-color:#c7d2e2}
.tc-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.tc-opt .chk{width:22px;height:22px;flex:none;border:2px solid #c2cedd;display:grid;place-items:center;color:#fff}
.tc-opt.on .chk{background:var(--accent);border-color:var(--accent)}
.tc-opt .chk svg{width:14px;height:14px;opacity:0}
.tc-opt.on .chk svg{opacity:1}
.tc-opt .oic{width:36px;height:36px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.tc-opt .oic svg{width:18px;height:18px}
.tc-opt .otxt{min-width:0}
.tc-opt .otxt b{font-size:14px;font-weight:600;color:var(--ink)}
.tc-opt .otxt small{display:block;font-size:12px;color:var(--muted);margin-top:1px}

/* après transfert : garder copie / céder */
.tc-after{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:10px}

/* barre d'envoi */
.tc-submit{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid #e6ebf3;
  background:linear-gradient(180deg,#fff,#f8fafd);box-shadow:0 1px 2px rgba(16,21,30,.04)}
.tc-submit .txt{font-size:12.5px;color:var(--muted);line-height:1.4}
.tc-submit .txt b{color:var(--ink);font-weight:700}
.tc-submit .btn{margin-left:auto}

/* aside : flux + réassurance */
.tc-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.tc-flow{border:1px solid #e6ebf3;background:#fff;padding:16px}
.tc-flow h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2b3340;margin:0 0 14px}
.tc-step{display:flex;gap:12px;padding-bottom:14px;position:relative}
.tc-step:last-child{padding-bottom:0}
.tc-step-n{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,#3d4a5c,#222c3a);z-index:1}
.tc-step:not(:last-child):after{content:"";position:absolute;left:13.5px;top:30px;bottom:2px;width:1px;background:var(--line)}
.tc-step-t{min-width:0}
.tc-step-t b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.tc-step-t small{font-size:12px;color:var(--muted);line-height:1.45}

/* état confirmé */
.tc-done{border:1px solid #cbe9d6;background:linear-gradient(180deg,#f4fcf7,#eafaf0);padding:28px 24px;text-align:center}
.tc-done-ic{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#22b066,#15924f);box-shadow:0 8px 20px -8px rgba(21,146,79,.6)}
.tc-done-ic svg{width:30px;height:30px}
.tc-done h2{font-size:20px;font-weight:700;color:#0f7a41;margin:0 0 6px}
.tc-done p{font-size:13.5px;color:#2b3340;margin:0 auto 16px;max-width:420px;line-height:1.5}

@media (max-width:900px){
  .tc-layout{grid-template-columns:1fr}
  .tc-side{position:static}
}

/* commun aux 4 pages INFO : textarea de formulaire (contact) */
.co-field textarea{border:1px solid var(--line);padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:linear-gradient(180deg,#f7f9fc,#f1f4f9);box-shadow:inset 0 1px 2px rgba(16,21,30,.05);resize:vertical;min-height:130px;line-height:1.5}
.co-field textarea::placeholder{color:#9aa3b1}
.co-field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-50)}

/* =========================================================
   CONTACT (15/07/2026) — formulaire + canaux directs
   Signature .pg-contact (bleu). Icônes CHROME GRAPHITE.
   .pg-hero + .co-card + .co-grid/.co-field. Styles .cnt-*.
   ========================================================= */
.cnt-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.cnt-head{margin:16px 0 22px}
.cnt-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.cnt-main{display:flex;flex-direction:column;gap:16px}

/* accusé de réception (démo) */
.cnt-sent{border:1px solid #cbe9d6;background:linear-gradient(180deg,#f4fcf7,#eafaf0);padding:26px 24px;text-align:center}
.cnt-sent[hidden]{display:none}
.cnt-sent-ic{width:56px;height:56px;margin:0 auto 13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#22b066,#15924f);box-shadow:0 8px 20px -8px rgba(21,146,79,.6)}
.cnt-sent-ic svg{width:28px;height:28px}
.cnt-sent h2{font-size:19px;font-weight:700;color:#0f7a41;margin:0 0 6px}
.cnt-sent p{font-size:13.5px;color:#2b3340;margin:0 auto;max-width:400px;line-height:1.5}
.cnt-sent b{color:#0f7a41}

/* aside : canaux directs */
.cnt-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.cnt-ch{display:flex;align-items:center;gap:13px;border:1px solid #e6ebf3;padding:14px 15px;
  background:linear-gradient(180deg,#fff,#fbfcfe);box-shadow:0 1px 2px rgba(16,21,30,.03)}
.cnt-ch:hover{border-color:#c7d2e2}
.cnt-ch .cnt-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.cnt-ch .cnt-ic svg{width:19px;height:19px}
.cnt-ch-txt{min-width:0}
.cnt-ch-txt small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cnt-ch-txt b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.cnt-ch-txt span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.cnt-ch.hl{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.cnt-ch.hl .cnt-ic{background:linear-gradient(150deg,#2b7bff,#0a52e6)}

/* horaires */
.cnt-hours{border:1px solid #e6ebf3;background:#fff;padding:16px}
.cnt-hours h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2b3340;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cnt-hours h4 svg{width:15px;height:15px;color:#3d4a5c}
.cnt-hrow{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.cnt-hrow:last-child{border-bottom:none}
.cnt-hrow span{color:var(--text)}
.cnt-hrow b{color:var(--ink);font-weight:600}
.cnt-hrow.off b{color:var(--muted);font-weight:500}
.cnt-open{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green)}
.cnt-open .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-50)}

@media (max-width:900px){
  .cnt-layout{grid-template-columns:1fr}
  .cnt-side{position:static}
}

/* =========================================================
   FAQ (15/07/2026) — recherche + catégories + accordéon
   Signature .pg-faq (bleu). Icônes CHROME GRAPHITE. .pg-hero. Styles .faq-*.
   ========================================================= */
.faq-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.faq-head{margin:16px 0 22px}
.faq-layout{display:grid;grid-template-columns:1fr 312px;gap:22px;align-items:start}
.faq-main{display:flex;flex-direction:column;gap:16px}

/* barre de recherche questions */
.faq-search{position:relative}
.faq-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#8a93a3;pointer-events:none}
.faq-search input{width:100%;height:52px;border:1px solid var(--line);padding:0 16px 0 46px;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;box-shadow:0 1px 2px rgba(16,21,30,.05)}
.faq-search input::placeholder{color:#9aa3b1}
.faq-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}

/* chips catégories */
.faq-cats{display:flex;flex-wrap:wrap;gap:8px}
.faq-cat{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--text);border:1px solid var(--line);background:#fff}
.faq-cat svg{width:15px;height:15px;color:#8a93a3}
.faq-cat:hover{border-color:#c7d2e2}
.faq-cat.active{color:#fff;border-color:var(--accent);background:linear-gradient(150deg,#2b7bff,#0a52e6)}
.faq-cat.active svg{color:#fff}

/* groupe de questions */
.faq-group{border:1px solid #e6ebf3;background:#fff}
.faq-group + .faq-group{margin-top:0}
.faq-group[hidden]{display:none}
.faq-group-h{display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#2b3340;background:linear-gradient(180deg,#f3f8fe,#e6eff8);border-bottom:1px solid #d3deef}
.faq-group-h .faq-gic{width:26px;height:26px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.faq-group-h .faq-gic svg{width:14px;height:14px}

/* item accordéon */
.faq-q{border-bottom:1px solid var(--line)}
.faq-q:last-child{border-bottom:none}
.faq-q[hidden]{display:none}
.faq-q-btn{width:100%;display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;font-family:inherit;
  text-align:left;background:none;border:none;font-size:14px;font-weight:600;color:var(--ink)}
.faq-q-btn:hover{background:#f7fafd}
.faq-q-btn .faq-qm{flex:1;min-width:0}
.faq-q-btn .faq-chev{width:18px;height:18px;flex:none;color:#9aa3b1;transition:transform .18s ease}
.faq-q.open .faq-q-btn .faq-chev{transform:rotate(180deg);color:var(--accent)}
.faq-a{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .22s ease;color:var(--text);font-size:13.5px;line-height:1.6}
.faq-q.open .faq-a{max-height:420px;padding:0 18px 16px}
.faq-a a{color:var(--accent);font-weight:600}
.faq-a a:hover{text-decoration:underline}
.faq-a ul{margin:8px 0 0;padding-left:18px}
.faq-a li{margin:3px 0}

/* rien trouvé */
.faq-none{border:1px dashed #c7d0dd;background:#fbfcfe;padding:26px;text-align:center;color:var(--muted);font-size:13.5px}
.faq-none[hidden]{display:none}

/* aside : besoin d'aide */
.faq-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.faq-cta{border:1px solid #2a2c30;background:linear-gradient(150deg,#34373d,#1e2023);padding:20px;
  box-shadow:0 14px 28px -18px rgba(16,21,30,.5)}
.faq-cta .faq-cta-ic{width:44px;height:44px;display:grid;place-items:center;color:#fff;margin-bottom:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.faq-cta .faq-cta-ic svg{width:22px;height:22px}
.faq-cta h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px}
.faq-cta p{font-size:13px;color:rgba(255,255,255,.74);margin:0 0 14px;line-height:1.5}
.faq-cta .btn{background:#fff;color:#141a24}
.faq-cta .btn:hover{background:#eef2f7;color:#141a24}
.faq-links{border:1px solid #e6ebf3;background:#fff;padding:16px}
.faq-links h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2b3340;margin:0 0 8px}
.faq-links a{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13.5px;color:var(--text);border-bottom:1px dashed var(--line)}
.faq-links a:last-child{border-bottom:none}
.faq-links a:hover{color:var(--accent)}
.faq-links a svg{width:15px;height:15px;color:#8a93a3}
.faq-links a:hover svg{color:var(--accent)}

@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-side{position:static}
}

/* =========================================================
   CENTRE D'AIDE (15/07/2026) — grille de thèmes + articles + contact
   Signature .pg-aide (bleu). Icônes CHROME GRAPHITE. .pg-hero. Styles .hlp-*.
   ========================================================= */
.hlp-page{max-width:1120px;margin:0 auto;padding:20px 20px 60px}
.hlp-head{margin:16px 0 22px}
.hlp-sec-t{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b3340;margin:26px 0 14px}
.hlp-sec-t:first-child{margin-top:0}

/* grille de thèmes */
.hlp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hlp-card{display:block;border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);padding:20px;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 28px -18px rgba(16,21,30,.16)}
.hlp-card:hover{border-color:#c7d2e2}
.hlp-card .hlp-ic{width:46px;height:46px;display:grid;place-items:center;color:#fff;margin-bottom:14px;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.hlp-card .hlp-ic svg{width:23px;height:23px}
.hlp-card h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 5px}
.hlp-card p{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.hlp-card .hlp-more{font-size:12.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.hlp-card .hlp-more svg{width:14px;height:14px}

/* articles populaires */
.hlp-arts{border:1px solid #e6ebf3;background:#fff}
.hlp-art{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line)}
.hlp-art:last-child{border-bottom:none}
.hlp-art:hover{background:#f7fafd}
.hlp-art .hlp-art-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#3d4a5c;
  border:1px solid var(--line);background:var(--surface-2)}
.hlp-art .hlp-art-ic svg{width:17px;height:17px}
.hlp-art-txt{flex:1;min-width:0}
.hlp-art-txt b{font-size:14px;font-weight:600;color:var(--ink)}
.hlp-art-txt small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.hlp-art .hlp-art-go{width:18px;height:18px;flex:none;color:#c2ccd8}
.hlp-art:hover .hlp-art-go{color:var(--accent)}

/* bandeau contact bas de page */
.hlp-contact{margin-top:26px;display:flex;align-items:center;gap:20px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1b2534,#10151e)}
.hlp-contact .hlp-ct-ic{width:52px;height:52px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.hlp-contact .hlp-ct-ic svg{width:26px;height:26px}
.hlp-contact .hlp-ct-txt{flex:1;min-width:0}
.hlp-contact .hlp-ct-txt b{display:block;font-size:17px;font-weight:700;color:#fff}
.hlp-contact .hlp-ct-txt span{font-size:13px;color:rgba(255,255,255,.78)}
.hlp-contact .btn{flex:none}

@media (max-width:900px){
  .hlp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hlp-grid{grid-template-columns:1fr}
  .hlp-contact{flex-direction:column;text-align:center}
}

/* =========================================================
   À PROPOS (15/07/2026) — mission, chiffres, 3 piliers, valeurs
   Signature .pg-about (charbon). Icônes CHROME GRAPHITE. .pg-hero. Styles .ab-*.
   ========================================================= */
.ab-page{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
.ab-head{margin:16px 0 22px}

/* hero à-propos : gris neutre quasi-noir (pas de teinte bleue) */
.pg-about .pg-hero{
  --hero1:#45484f; --hero2:#292b30;
  background:
    radial-gradient(135% 130% at 84% -30%,rgba(255,255,255,.055),transparent 55%),
    linear-gradient(135deg,var(--hero1) 0%,var(--hero2) 100%);
}

/* mission */
.ab-mission{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);padding:26px 28px;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 28px -18px rgba(16,21,30,.16)}
.ab-mission .kick{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ab-mission h2{font-size:23px;font-weight:700;color:var(--ink);margin:0 0 14px;line-height:1.2;letter-spacing:-.01em}
.ab-mission p{font-size:14px;color:var(--text);line-height:1.65;margin:0 0 12px;max-width:760px}
.ab-mission p:last-child{margin-bottom:0}
.ab-mission b{color:var(--ink);font-weight:600}

/* chiffres clés */
.ab-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.ab-stat{border:1px solid #e6ebf3;background:#fff;padding:20px;text-align:center;box-shadow:0 1px 2px rgba(16,21,30,.03)}
.ab-stat .ab-stat-ic{width:40px;height:40px;margin:0 auto 12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.ab-stat .ab-stat-ic svg{width:20px;height:20px}
.ab-stat b{display:block;font-size:26px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
.ab-stat small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:6px}

/* 3 piliers (Pièces / Diagnostic / Intelligence) */
.ab-sec-t{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2b3340;margin:30px 0 14px}
.ab-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab-pillar{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);padding:22px;
  box-shadow:0 1px 1px rgba(16,21,30,.03),0 14px 28px -18px rgba(16,21,30,.16)}
.ab-pillar .ab-p-ic{width:48px;height:48px;display:grid;place-items:center;color:#fff;margin-bottom:14px}
.ab-pillar .ab-p-ic svg{width:24px;height:24px}
.ab-pillar:nth-child(1) .ab-p-ic{background:linear-gradient(150deg,#2b7bff,#0a52e6)}
.ab-pillar:nth-child(2) .ab-p-ic{background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.ab-pillar:nth-child(3) .ab-p-ic{background:linear-gradient(150deg,#1eb15f,#0f7a41)}
.ab-pillar h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px}
.ab-pillar p{font-size:13px;color:var(--text);line-height:1.6;margin:0}

/* valeurs */
.ab-values{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ab-value{display:flex;gap:14px;border:1px solid #e6ebf3;background:#fff;padding:18px 20px}
.ab-value .ab-v-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#3d4a5c;
  border:1px solid var(--line);background:var(--surface-2)}
.ab-value .ab-v-ic svg{width:19px;height:19px}
.ab-value b{font-size:14.5px;font-weight:600;color:var(--ink)}
.ab-value p{font-size:12.5px;color:var(--muted);margin:3px 0 0;line-height:1.55}

/* bandeau CTA final */
.ab-cta{margin-top:30px;display:flex;align-items:center;gap:20px;padding:24px 28px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1b2534,#10151e)}
.ab-cta .ab-cta-txt{flex:1;min-width:0}
.ab-cta .ab-cta-txt b{display:block;font-size:18px;font-weight:700;color:#fff}
.ab-cta .ab-cta-txt span{font-size:13.5px;color:rgba(255,255,255,.78)}
.ab-cta .btn{flex:none}

@media (max-width:900px){
  .ab-stats{grid-template-columns:1fr 1fr}
  .ab-pillars{grid-template-columns:1fr}
  .ab-values{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ab-cta{flex-direction:column;text-align:center}
}

/* =========================================================
   PAGES LÉGALES (18/07/2026) — mentions, confidentialité,
   cookies, CGV. Squelette commun .lg-* : hero + cartes de
   section + prose. Signature .pg-legal (bleu de marque).
   Icônes CHROME GRAPHITE. .pg-hero + .ac-crumb réutilisés.
   ========================================================= */
.pg-legal{--pg:#2b7bff;--pg2:#0a52e6}
.lg-page{max-width:860px;margin:0 auto;padding:20px 20px 60px}
.lg-head{margin:16px 0 22px}
.lg-date{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.lg-date b{color:var(--ink);font-weight:600}
.lg-body{display:flex;flex-direction:column;gap:14px}

/* carte de section */
.lg-section{border:1px solid #e6ebf3;background:#fff;padding:20px 24px;
  box-shadow:0 1px 2px rgba(16,21,30,.03)}
.lg-section > h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:15px;font-weight:700;color:var(--ink)}
.lg-section > h2 .lg-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;color:#fff;
  border-radius:7px;background:linear-gradient(150deg,#3d4a5c,#222c3a)}
.lg-section > h2 .lg-ic svg{width:16px;height:16px}
.lg-section h3{font-size:13.5px;font-weight:700;color:var(--ink);margin:16px 0 6px}
.lg-section p{font-size:13.5px;color:var(--text);line-height:1.7;margin:0 0 9px}
.lg-section p:last-child{margin-bottom:0}
.lg-section ul{margin:0 0 9px;padding-left:20px}
.lg-section li{font-size:13.5px;color:var(--text);line-height:1.7;margin-bottom:4px}
.lg-section a{color:var(--accent);font-weight:600;text-decoration:none}
.lg-section a:hover{text-decoration:underline}
.lg-section strong,.lg-section b{color:var(--ink);font-weight:700}

/* tableau de données */
.lg-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.lg-table th{background:var(--surface-2);font-weight:700;padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.lg-table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top}
.lg-table tr:last-child td{border-bottom:none}

/* flag « à renseigner avant lancement » (placeholder assumé) */
.lg-flag{background:#fef9c3;color:#92400e;padding:1px 7px;font-size:.85em;font-weight:600;white-space:nowrap}

/* encart mis en avant (CGV : rétractation, garanties) */
.lg-note{display:flex;gap:12px;padding:14px 16px;margin:4px 0 9px;
  border:1px solid #cfe0fb;background:linear-gradient(180deg,#f4f8ff,#eaf2ff)}
.lg-note .lg-note-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;color:#fff;
  border-radius:7px;background:linear-gradient(150deg,var(--pg),var(--pg2))}
.lg-note .lg-note-ic svg{width:17px;height:17px}
.lg-note p{margin:0;font-size:13px;line-height:1.6}

/* grille de droits RGPD (confidentialité) */
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.lg-card{border:1px solid #e6ebf3;background:linear-gradient(180deg,#fff,#fbfcfe);padding:14px 15px}
.lg-card h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 5px}
.lg-card h4 svg{width:16px;height:16px;color:var(--pg)}
.lg-card p{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}

/* panneau de consentement cookies */
.lg-consent{border:1px solid #e6ebf3;background:#fff;padding:20px 22px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(16,21,30,.03)}
.lg-consent h3{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 14px}
.lg-crow{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)}
.lg-crow:last-of-type{border-bottom:none}
.lg-crow-info{flex:1;min-width:0}
.lg-crow-nm{font-size:13.5px;font-weight:700;color:var(--ink)}
.lg-crow-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.lg-toggle{position:relative;width:44px;height:24px;flex:none;margin-top:2px}
.lg-toggle input{opacity:0;width:0;height:0;position:absolute}
.lg-toggle-sl{position:absolute;inset:0;background:#cbd3de;border-radius:12px;cursor:pointer;transition:.2s}
.lg-toggle-sl::before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(16,21,30,.25)}
.lg-toggle input:checked + .lg-toggle-sl{background:var(--accent)}
.lg-toggle input:checked + .lg-toggle-sl::before{transform:translateX(20px)}
.lg-toggle input:disabled + .lg-toggle-sl{opacity:.5;cursor:not-allowed}
.lg-consent-act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.lg-saved{display:none;align-items:center;gap:7px;margin-top:12px;padding:10px 14px;font-size:12.5px;
  color:#12693e;background:var(--green-50);border:1px solid #bfe3cd}
.lg-saved.show{display:flex}
.lg-saved svg{width:15px;height:15px}

@media (max-width:640px){
  .lg-grid{grid-template-columns:1fr}
  .lg-section{padding:18px 16px}
}

/* =========================================================
   PAGES D'ERREUR (18/07/2026) — 404 / 500. Légères et
   robustes (pas de dépendance JS/API). .err-* centré.
   ========================================================= */
.err-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 24px;text-align:center;min-height:52vh}
.err-code{font-size:112px;font-weight:800;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(150deg,#3d4a5c,#8a93a1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.err-title{font-size:25px;font-weight:700;color:var(--ink);margin:10px 0 8px}
.err-sub{font-size:14px;color:var(--muted);max-width:480px;line-height:1.65;margin:0 0 26px}
.err-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}