/* ==========================================================================
   Activation CarPlay — couche « Banc d'essai » (v9)
   --------------------------------------------------------------------------
   Chargée APRÈS style.css et core.css. Le thème est piloté par variables :
   redéfinir les jetons ici suffit à propager la nouvelle identité partout,
   sans réécrire les 80 Ko de CSS historique.

   Direction : le site vend une VÉRIFICATION avant un achat. Il doit donc
   ressembler à un instrument de mesure, pas à une page d'atterrissage.
   Fond minéral froid (verre antireflet d'écran), accent ambre sodium
   (voyant de tableau de bord), vert réservé au seul sens « compatible ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons — thème sombre (habitacle de nuit)
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --void:#0A1214;          /* fond de page */
  --ink:#0D1719;           /* surface encastrée */
  --carbon:#101C1F;
  --panel:#152528;         /* carte */
  --panel-hi:#1C3236;
  --paper:#152528;
  --paper-2:#101C1F;

  /* Traits */
  --line:rgba(226,238,233,.11);
  --line-hi:rgba(226,238,233,.22);

  /* Texte (--white = couleur d'encre principale, inversée en thème clair) */
  --white:#EDF2EF;
  --soft:#CBD5D0;
  --muted:#A7B3AD;
  --paper-ink:#EDF2EF;
  --paper-muted:#A7B3AD;

  /* Accents */
  --electric:#F5892F;      /* ambre sodium — action, attention */
  --electric-hi:#FFA75B;
  /* Encre posée SUR l'ambre. L'ambre du thème sombre est trop lumineux pour
     porter du blanc : var(--on-electric) sur #F5892F ne donne que 2,5:1. */
  --on-electric:#271006;
  /* Ambre lisible en petit corps sur fond clair (liens, légendes). */
  --electric-ink:#FFA75B;
  --cyan:#5EC3B8;          /* pétrole — information technique */
  --success:#4FD196;       /* strictement : configuration confirmée */
  --on-success:#06110E;    /* encre posée SUR le vert */
  --warm:#E7F0EC;

  /* Géométrie — commutateur automobile, pas pilule SaaS */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --r-btn:9px;
  --container:1200px;

  /* Ombres : discrètes. La hiérarchie passe par les filets, pas par le flou. */
  --shadow-1:0 10px 30px rgba(0,0,0,.30);
  --shadow-2:0 26px 70px rgba(0,0,0,.45);

  /* Typographie */
  --font-display:"Familjen Grotesk","Manrope",system-ui,sans-serif;
  --font-body:"Instrument Sans","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Rythme vertical unique — supprime les écarts de padding incohérents */
  --pad-section:clamp(72px,9vw,132px);
}

/* --------------------------------------------------------------------------
   2. Jetons — thème clair (par défaut du site) : verre antireflet
   -------------------------------------------------------------------------- */
html[data-theme="light"]{
  --void:#EBEEEC;
  --ink:#FFFFFF;
  --carbon:#E2E7E4;
  --panel:#FAFBFA;
  --panel-hi:#FFFFFF;
  --paper:#FFFFFF;
  --paper-2:#F1F4F2;

  --line:rgba(14,32,28,.14);
  --line-hi:rgba(14,32,28,.26);

  --white:#0F1A18;         /* encre */
  --soft:#33423D;
  --muted:#52625C;
  --paper-ink:#0F1A18;
  --paper-muted:#52625C;

  --electric:#B84E08;      /* ambre assombri : ≥ 4.5:1 sur fond clair */
  --electric-hi:#963E05;
  --on-electric:var(--on-electric);
  --electric-ink:#7D2F00;
  --cyan:#0E4B54;
  --success:#136F4C;
  --on-success:#FFFFFF;

  --shadow-1:0 8px 24px rgba(16,42,36,.08);
  --shadow-2:0 22px 60px rgba(16,42,36,.12);
}

/* --------------------------------------------------------------------------
   3. Typographie
   Familjen Grotesk (titres, resserrée) / Instrument Sans (texte) /
   JetBrains Mono (références techniques : versions, immatriculations, codes).
   -------------------------------------------------------------------------- */
body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.005em;
}
/* Le grain plein écran brouillait le texte sur mobile : on l'atténue. */
body:before{opacity:.014}

h1,h2,h3,h4,.acp-display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,5.6vw,5.1rem);line-height:.98;letter-spacing:-.038em}
h2{font-size:clamp(2rem,3.9vw,3.5rem);letter-spacing:-.034em}
h3{font-size:clamp(1.12rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.022em;line-height:1.2}
.lead{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--soft);max-width:62ch;letter-spacing:-.008em;line-height:1.6}
p{max-width:72ch}

/* Le dégradé sur le texte est le tic visuel n°1 des pages générées. Il a été
   retiré de style.css : cette classe n'est plus qu'une mise en évidence pleine
   sur une portion de titre. Le nom reste, il est écrit dans le contenu des
   pages en base — mais plus rien ici ne fabrique de dégradé. */
.gradient-text{color:var(--electric-ink)}

/* Surtitre : une référence d'atelier, pas une pastille décorative.
   Le filet horizontal remplace la puce ronde. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.665rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  background:none!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
  gap:12px;
}
.eyebrow i{
  width:26px;height:1px;flex:0 0 26px;
  background:var(--electric);
  border-radius:0!important;
  animation:none!important;
  box-shadow:none!important;
}

/* Toute donnée technique passe en mono : c'est la voix de l'outil. */
.acp-mono,.acp-vp__specs dd,.woocommerce-result-count{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* --------------------------------------------------------------------------
   4. En-tête — filet net, pas de verre dépoli laiteux
   -------------------------------------------------------------------------- */
.site-header{
  background:color-mix(in srgb,var(--void) 88%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.header-inner{height:70px;gap:26px}

.logo{gap:11px}
.logo-symbol{width:34px;height:34px;border-radius:9px}
/* Le mot-symbole est composé en HTML : il profite de la vraie fonte. */
.logo span:last-child{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.03em;
  color:var(--white);
}

.site-nav{gap:4px}
/* wp_nav_menu rend <nav> > <ul> > <li> > <a> : l'espacement doit être porté
   par la liste, pas par le <nav> dont l'unique enfant est le <ul>. */
.site-nav ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.site-nav li{display:flex}
.site-nav a{
  padding:0 12px;
  min-height:44px;
  border-radius:var(--r-sm);
  font-family:var(--font-body);
  font-size:.845rem;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--soft);
  transition:color .18s,background .18s;
}
.site-nav a:hover{color:var(--white);background:color-mix(in srgb,var(--white) 7%,transparent)}

/* Repère de page courante.
   L'ancien thème en dessinait DEUX : une pastille de 4px au-dessus du lien
   (.current-menu-item>a:before) et un filet en dessous. Avec le filet ambre
   ajouté ici, l'onglet actif portait trois marques superposées — d'où le
   point qui flottait au-dessus de « Rendez-vous ». On garde le filet, qui
   s'anime déjà au survol, et on supprime la pastille. */
.site-nav .current-menu-item>a:before{content:none!important}
.site-nav .current-menu-item>a,
.site-nav a[aria-current="page"]{color:var(--white);box-shadow:none}
/* Le filet du thème ne visait que .current-menu-item : on l'étend à
   aria-current, seul repère présent sur les entrées injectées par le thème. */
.site-nav a[aria-current="page"]:after{right:0}
.site-nav a:focus-visible{outline:2px solid var(--electric);outline-offset:2px}

/* --------------------------------------------------------------------------
   5. Boutons — commutateur, pas pilule
   -------------------------------------------------------------------------- */
.button{
  --button-bg:var(--electric);
  border-radius:var(--r-btn)!important;
  border:1px solid transparent!important;
  min-height:48px;
  padding:0 22px;
  font-family:var(--font-body)!important;
  font-size:.865rem!important;
  font-weight:600!important;
  letter-spacing:-.012em;
  color:var(--on-electric)!important;
  box-shadow:none;
  transition:background .18s,transform .18s,box-shadow .18s;
}
.button:hover{background:var(--electric-hi)!important;transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--electric) 32%,transparent)}
.button:active{transform:translateY(0)}
.button:focus-visible{outline:2px solid var(--electric);outline-offset:3px}

.button--ghost{
  --button-bg:transparent;
  border-color:var(--line-hi)!important;
  color:var(--white)!important;
  box-shadow:none!important;
}
.button--ghost:hover{
  background:color-mix(in srgb,var(--white) 7%,transparent)!important;
  border-color:var(--white)!important;
}
.button--light{--button-bg:var(--white);color:var(--void)!important;box-shadow:none}
.button--light:hover{background:var(--white)!important;opacity:.88}
.button--card{--button-bg:transparent;border-color:var(--line-hi)!important;color:var(--white)!important}
.button--card:hover{background:color-mix(in srgb,var(--white) 7%,transparent)!important}
.button--small{min-height:44px;padding:0 15px;font-size:.79rem!important}

html[data-theme="light"] .button--ghost{background:var(--paper)!important;color:var(--white)!important;border-color:var(--line-hi)!important}
html[data-theme="light"] .button--light{--button-bg:var(--white);color:#FFF!important}

.text-link{
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  /* Composé en .7rem capitales : c'est du petit texte, il lui faut 4.5:1.
     L'ambre d'action n'atteint que 4.35:1 sur le fond clair — d'où le jeton
     d'ambre lisible, pensé pour ce cas. */
  color:var(--electric-ink);
  border-bottom:1px solid color-mix(in srgb,var(--electric) 40%,transparent);
  padding-bottom:2px;
}
.text-link:hover{color:var(--electric);border-bottom-color:var(--electric)}

/* Bascule de thème alignée sur la nouvelle géométrie */
.theme-toggle{border-radius:var(--r-sm)!important;width:44px;height:44px;border:1px solid var(--line)!important}

/* --------------------------------------------------------------------------
   6. Surfaces — le filet porte la hiérarchie, l'ombre ne fait qu'assister
   -------------------------------------------------------------------------- */
.section{padding-block:var(--pad-section)}

.product-card,.keeps-item,.reassurance-stack article,.showroom-tile,
.acp-vp__card,.acp-result,.acp-guides article,.installation-shot{
  border-radius:var(--r-lg)!important;
}
.product-card,.keeps-item,.reassurance-stack article{
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  background:var(--panel)!important;
  transition:border-color .2s,transform .2s;
}
.product-card:hover,.keeps-item:hover,.reassurance-stack article:hover{
  border-color:var(--line-hi)!important;
  transform:translateY(-2px);
}

/* Tête de section : filet de mesure au-dessus du titre. Il indique le début
   d'un relevé, comme la graduation d'un instrument. */
.section-head{position:relative;padding-top:26px}
.section-head:before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--electric) 0 44px,var(--line) 44px 100%);
}

/* Panneau d'appel final : plaque, pas bulle */
.cta-panel{border-radius:var(--r-xl)!important;border:1px solid var(--line)!important}
.cta-orbit{display:none} /* halo décoratif sans rapport avec le sujet */
.config-glow{opacity:.35}

/* FAQ */
.faq details{border-radius:var(--r-md)!important;border:1px solid var(--line)!important}
.faq summary{font-family:var(--font-body);font-weight:600;letter-spacing:-.018em}
.faq summary span{font-family:var(--font-mono);color:var(--electric);font-size:.72rem}
.faq summary:focus-visible{outline:2px solid var(--electric);outline-offset:-2px}

/* --------------------------------------------------------------------------
   7. SIGNATURE — la plaque de conformité
   Reprend la plaque constructeur rivetée dans le montant de porte : c'est
   l'endroit où une voiture déclare son identité. On y affiche le résultat
   de compatibilité. Bande d'état ambre pendant la vérification, verte une
   fois la configuration confirmée.
   -------------------------------------------------------------------------- */
.acp-plate{
  position:relative;
  border:1px solid var(--line-hi);
  border-radius:var(--r-md);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--panel-hi) 70%,transparent),transparent 42%),
    var(--panel);
  padding:22px 24px 20px;
  font-family:var(--font-mono);
  overflow:hidden;
}
/* Rivets : quatre points aux angles, dessinés en dégradés radiaux. */
.acp-plate:before{
  content:"";position:absolute;inset:7px;border-radius:6px;pointer-events:none;
  background:
    radial-gradient(circle 2.5px at 0 0,var(--line-hi) 96%,transparent 100%),
    radial-gradient(circle 2.5px at 100% 0,var(--line-hi) 96%,transparent 100%),
    radial-gradient(circle 2.5px at 0 100%,var(--line-hi) 96%,transparent 100%),
    radial-gradient(circle 2.5px at 100% 100%,var(--line-hi) 96%,transparent 100%);
}
.acp-plate__band{
  display:flex;align-items:center;gap:9px;
  margin:-22px -24px 18px;padding:9px 24px;
  background:color-mix(in srgb,var(--electric) 15%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--electric) 34%,transparent);
  color:var(--electric);
  font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.acp-plate__band:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.acp-plate[data-state="ok"] .acp-plate__band{
  background:color-mix(in srgb,var(--success) 15%,transparent);
  border-bottom-color:color-mix(in srgb,var(--success) 34%,transparent);
  color:var(--success);
}
.acp-plate__rows{display:grid;gap:0;margin:0}
.acp-plate__rows>div{
  display:grid;grid-template-columns:minmax(96px,32%) 1fr;gap:14px;
  padding:9px 0;border-top:1px dashed var(--line);
  font-size:.79rem;align-items:baseline;
}
.acp-plate__rows>div:first-child{border-top:0}
.acp-plate__rows dt,.acp-plate__rows b{
  color:var(--muted);font-weight:500;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;
}
.acp-plate__rows dd,.acp-plate__rows span{margin:0;color:var(--white);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   8. Formulaires — champs d'instrument : nets, tactiles, lisibles
   -------------------------------------------------------------------------- */
.acp-field,
.acp-checker label,
.acp-support-form label,
.acp-form label{display:flex;flex-direction:column;gap:7px}

.acp-checker label,.acp-support-form label,.acp-form label,.acp-field>span:first-child,.acp-field>label{
  font-family:var(--font-mono);
  font-size:.665rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}

input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=search],input[type=url],select,textarea,
/* Les champs rendus sans attribut type= sont des champs texte pour le
   navigateur, mais input[type=text] ne les sélectionne pas. Le formulaire
   support en compte trois : ils resteraient aux styles par défaut. */
.acp-checker input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]),
.acp-support-form input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]),
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;
  min-height:50px;
  padding:13px 15px;
  border:1px solid var(--line-hi);
  border-radius:var(--r-sm);
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-size:1rem;             /* 16px minimum : évite le zoom auto iOS */
  line-height:1.4;
  letter-spacing:-.008em;
  transition:border-color .16s,box-shadow .16s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:140px;resize:vertical}
select{
  padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--electric);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--electric) 22%,transparent);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input[type=file]{
  padding:12px;border:1px dashed var(--line-hi);border-radius:var(--r-sm);
  background:var(--ink);color:var(--muted);font-family:var(--font-body);
  font-size:1rem;          /* sous 16px, iOS zoome la page au tap */
  min-height:50px;width:100%;
}
input[type=checkbox],input[type=radio]{
  width:24px;height:24px;min-height:0;accent-color:var(--electric);flex:0 0 24px;margin:0;
}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin:0 0 20px}
legend{
  font-family:var(--font-mono);font-size:.665rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--electric-ink);padding:0 8px;
}

/* --------------------------------------------------------------------------
   9. Pied de page
   -------------------------------------------------------------------------- */
/* Le pied de page est la plaque sombre du site dans les DEUX thèmes : son
   fond est posé une seule fois, dans style.css. */
.site-footer{border-top:1px solid var(--line)}
.site-footer h3{
  font-family:var(--font-mono);font-size:.665rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.site-footer nav a{
  display:block;padding:6px 0;color:var(--soft);font-size:.88rem;
  border-bottom:1px solid transparent;width:fit-content;
}
.site-footer nav a:hover{color:var(--white);border-bottom-color:var(--electric)}
.footer-bottom{border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   10. Accessibilité — plancher de qualité
   -------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
a:focus-visible{border-radius:3px}

.acp-skip-link{
  position:absolute;left:12px;top:-60px;z-index:2000;
  padding:11px 18px;border-radius:var(--r-sm);
  background:var(--electric);color:var(--on-electric);
  font-weight:600;font-size:.86rem;
  transition:top .16s;
}
.acp-skip-link:focus{top:12px}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------------------
   11a. Fil d'Ariane — le seul élément sous l'en-tête, sur TOUTES les pages
   --------------------------------------------------------------------------
   Défaut corrigé : cet emplacement contenait trois choses différentes selon
   l'onglet — une barre de douze catégories sur la boutique, un fil d'Ariane
   sur les pages véhicule, rien ailleurs. En naviguant, une rangée de
   « catégories » apparaissait puis disparaissait.

   Un seul élément l'occupe désormais partout. Ce qui change d'une page à
   l'autre, c'est le chemin — ce qu'un fil d'Ariane est censé faire.
   -------------------------------------------------------------------------- */
.acp-trail{border-bottom:1px solid var(--line);background:var(--void)}
.acp-trail ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;
  margin:0;padding:11px 0;list-style:none;
  font-family:var(--font-mono);font-size:.665rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
}
.acp-trail li{display:inline-flex;align-items:center;gap:6px;color:var(--muted);min-width:0}
.acp-trail li+li:before{content:"›";color:var(--line-hi);font-size:.85rem;line-height:1}
.acp-trail a{
  color:var(--muted);padding:3px 0;
  border-bottom:1px solid transparent;
  transition:color .16s,border-color .16s;
}
.acp-trail a:hover{color:var(--white);border-bottom-color:var(--electric)}
.acp-trail a:focus-visible{outline:2px solid var(--electric);outline-offset:2px;border-radius:2px}
.acp-trail [aria-current="page"]{
  color:var(--white);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch;
}

/* --------------------------------------------------------------------------
   11b. Filtre du catalogue — dans la page, pas sous l'en-tête
   --------------------------------------------------------------------------
   Les catégories produit mélangent des rayons (activations, modules…) et des
   marques (BMW, Audi…). Le filtre les sépare en deux lignes étiquetées et
   fixe l'ordre. Il vit au-dessus de la grille, jamais en position de
   navigation : c'est un outil de tri de liste, et il doit le montrer.
   -------------------------------------------------------------------------- */
.acp-filter{
  display:flex;flex-direction:column;gap:2px;
  margin:0 0 26px;padding:6px 4px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper-2);
}
.acp-filter__row{
  display:flex;align-items:center;gap:6px;
  padding:6px;overflow-x:auto;scrollbar-width:none;
}
.acp-filter__row::-webkit-scrollbar{display:none}
.acp-filter__row+.acp-filter__row{border-top:1px solid var(--line)}
.acp-filter__label{
  flex:0 0 68px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.acp-filter a{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 14px;
  border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--soft);
  font-size:.82rem;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
.acp-filter a:hover{background:var(--panel);border-color:var(--line);color:var(--white)}
.acp-filter a[aria-current="true"]{
  background:var(--electric);border-color:var(--electric);
  color:var(--on-electric);font-weight:600;
}
.acp-filter a small{
  font-family:var(--font-mono);font-size:.66rem;opacity:.6;font-variant-numeric:tabular-nums;
}
.acp-filter a[aria-current="true"] small{opacity:.8}

/* --------------------------------------------------------------------------
   12. WooCommerce — grille, fiche produit, panier
   -------------------------------------------------------------------------- */
.woocommerce ul.products{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;
  gap:20px!important;
  margin:0!important;padding:0!important;list-style:none;
}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:16px;
  transition:border-color .2s,transform .2s;
}
.woocommerce ul.products li.product:hover{border-color:var(--line-hi);transform:translateY(-2px)}
.woocommerce ul.products li.product img{border-radius:var(--r-md);margin-bottom:14px;aspect-ratio:4/3;object-fit:cover;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:1.02rem!important;font-weight:600;
  letter-spacing:-.024em;line-height:1.22;color:var(--white);padding:0!important;margin:0 0 10px!important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-mono)!important;font-size:1.04rem!important;font-weight:600;
  color:var(--white)!important;margin:0 0 14px!important;font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .price del{font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--electric)!important}
.woocommerce ul.products li.product .button{margin-top:auto!important;width:100%}
.woocommerce ul.products li.product .onsale{
  border-radius:var(--r-sm)!important;background:var(--electric)!important;color:var(--on-electric)!important;
  font-family:var(--font-mono);font-size:.66rem!important;font-weight:700;letter-spacing:.08em;
  min-height:0!important;min-width:0!important;padding:5px 9px!important;line-height:1!important;top:22px!important;right:22px!important;
}

.woocommerce-ordering select,select.orderby{min-height:44px;max-width:260px;font-size:1rem}
.woocommerce-result-count{color:var(--muted);font-size:.78rem}

.woocommerce div.product .product_title{font-family:var(--font-display);letter-spacing:-.032em}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--font-mono);color:var(--white);font-variant-numeric:tabular-nums;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--line);padding:0!important;margin:0 0 24px!important}
.woocommerce div.product .woocommerce-tabs ul.tabs:before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent!important;border:0!important;border-radius:0!important;
  margin:0 4px 0 0!important;padding:0!important;box-shadow:none!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:12px 14px!important;color:var(--muted)!important;
  font-family:var(--font-body);font-size:.86rem;font-weight:600;letter-spacing:-.012em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--white)!important;box-shadow:inset 0 -2px 0 var(--electric);
}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  border-radius:var(--r-md)!important;border:1px solid var(--line-hi)!important;
  background:var(--panel)!important;color:var(--white)!important;
  border-top:0!important;padding:16px 20px!important;
}
.woocommerce-message:before,.woocommerce-info:before,.woocommerce-error:before{display:none!important}
.woocommerce-message{border-left:3px solid var(--success)!important}
.woocommerce-info{border-left:3px solid var(--cyan)!important}
.woocommerce-error{border-left:3px solid var(--electric)!important}

.woocommerce table.shop_table{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;border-collapse:separate!important;overflow:hidden}
.woocommerce table.shop_table th{
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.woocommerce table.shop_table td{border-top:1px solid var(--line)!important;color:var(--soft)}

/* --------------------------------------------------------------------------
   13. Passe mobile
   --------------------------------------------------------------------------
   Trois défauts traités : cibles tactiles sous 44px, titres qui débordaient
   à la césure, et tableaux WooCommerce qui forçaient un défilement horizontal
   de la page entière.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Menu replié — déclenché à 1150px, pas à 960px
   --------------------------------------------------------------------------
   La navigation compte huit entrées depuis l'ajout de Devis et Rendez-vous.
   Entre 961 et 1200px elles chevauchaient le logo et l'action d'en-tête : le
   menu plein écran démarre donc plus tôt.

   Toutes les règles portent le préfixe `.js`, car style.css pilote ce menu via
   `.js .site-nav` (0,2,0). Une règle `.site-nav` (0,1,0) écrite ici perdrait
   quelle que soit sa position dans la cascade — c'est ce qui rendait la passe
   mobile précédente inopérante.
   -------------------------------------------------------------------------- */
@media(max-width:1150px){
  .js .header-inner{flex-wrap:nowrap;gap:14px}
  /* Le <nav> sort du flux : les enfants restants sont le logo, le bouton menu
     et les actions. On repousse le groupe à droite et on place le bouton en
     dernier — dans le balisage il précède les actions. */
  .js .header-actions{margin-left:auto}
  .js .menu-toggle{
    order:9;margin-left:8px;
    display:inline-flex!important;align-items:center;justify-content:center;
    width:44px;height:44px;min-height:44px;padding:0;
    border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;
    background:var(--panel)!important;color:var(--white)!important;font-size:1.05rem;
  }
  .js .site-nav{
    position:fixed;inset:70px 0 auto;
    display:none;width:auto;margin-left:auto;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 20px 22px;
    background:var(--void);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-2);
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .js .site-nav.is-open{display:flex}
  /* Verrou de défilement pendant que le panneau est ouvert : theme.js pose
     .acp-menu-open sur <body>. Sans lui la page glissait sous le menu. */
  body.acp-menu-open{overflow:hidden}
  .js .site-nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .js .site-nav li{width:100%}
  .js .site-nav a{
    width:100%;min-height:52px;padding:0 14px;
    font-size:1rem;font-weight:500;
    border-bottom:1px solid var(--line);border-radius:0;
  }
  .js .site-nav li:last-child a{border-bottom:0}
  /* En liste verticale, le filet de soulignement du thème (bottom:-9px)
     flotterait entre deux entrées : on le coupe et l'entrée active se marque
     par sa tranche gauche. */
  .js .site-nav a:after{display:none}
  .js .site-nav .current-menu-item>a,
  .js .site-nav a[aria-current="page"]{
    box-shadow:inset 3px 0 0 var(--electric);background:var(--panel);
  }
}

/* Tablette / petit portable — la tranche 641-960px n'était pas couverte. */
@media(max-width:960px){
  :root{--pad-section:clamp(60px,8vw,88px)}
  .header-inner{height:64px;gap:16px}
  /* L'en-tête perd 6px : le menu doit descendre d'autant, sinon un filet de
     fond de page apparaît entre les deux. */
  .js .site-nav{inset:64px 0 auto;max-height:calc(100dvh - 64px)}
  .woocommerce ul.products{gap:14px!important}
}

@media(max-width:640px){
  body{font-size:16px;line-height:1.58}
  .container{width:min(calc(100% - 32px),var(--container))}

  /* --------------------------------------------------------------------
     Rythme vertical
     --------------------------------------------------------------------
     L'accueil compte dix sections. À 60px de retrait de part et d'autre,
     plus 44px sous chaque tête de section, cela faisait 1420px de blanc
     — deux écrans entiers de téléphone sans contenu, à faire défiler.

     92px entre deux sections séparent encore franchement ; on récupère
     un demi-écran. La respiration reste généreuse en grand écran, où
     elle sert la composition au lieu de la subir.
     -------------------------------------------------------------------- */
  :root{--pad-section:46px}
  .section-head{margin-bottom:32px;gap:26px}

  /* Les titres fluides gardaient un plancher de 3,1rem : « intelligente. »
     débordait sur un écran de 360px. Plancher ramené à la largeur réelle. */
  h1{font-size:clamp(2.15rem,10.4vw,3.3rem);letter-spacing:-.036em;line-height:1.03}
  h2{font-size:clamp(1.85rem,8.2vw,2.7rem);letter-spacing:-.032em;line-height:1.06}
  h3{font-size:1.08rem}
  .lead{font-size:1rem}
  /* Les <br> des titres créaient des lignes orphelines sur mobile. */
  h1 br,h2 br{display:none}
  h1,h2,h3,p,.lead{overflow-wrap:break-word;hyphens:auto}

  .section-head{padding-top:20px}
  .section-head:before{background:linear-gradient(90deg,var(--electric) 0 34px,var(--line) 34px 100%)}

  /* Toute action principale devient pleine largeur et atteint 48px. */
  .button{width:100%;min-height:48px}
  .hero-ctas{display:grid;gap:10px}

  /* --------------------------------------------------------------------
     En-tête mobile : garder l'action, sacrifier le mot-symbole
     --------------------------------------------------------------------
     Le bouton « Vérifier mon véhicule » était masqué sous 960px. Or tout
     le site existe pour cette vérification : sur téléphone, l'action
     disparaissait et ne restait qu'une entrée de menu parmi huit,
     impossible à distinguer de « Mentions légales ».

     La place se prend sur le mot-symbole, pas sur l'action. Le logo garde
     sa marque et son aria-label : le lien vers l'accueil reste nommé pour
     les lecteurs d'écran.

     Budget mesuré à 360px (328px utiles) :
       marque 32 + gap 10 + bouton 162 + gap 8 + bascule 40 + gap 8
       + menu 44 = 304px.
     -------------------------------------------------------------------- */
  .logo span:last-child{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .js .header-actions{gap:8px}
  .js .header-actions .button--small{
    display:inline-flex!important;
    width:auto;min-height:44px;padding:0 13px;
    font-size:.75rem!important;white-space:nowrap;
  }
  .js .theme-toggle{flex:0 0 44px}
  .js .menu-toggle{margin-left:4px}
  .logo-symbol{width:32px;height:32px;flex-basis:32px}

  .acp-plate{padding:18px 16px 16px;border-radius:var(--r-sm)}
  .acp-plate__band{margin:-18px -16px 15px;padding:9px 16px;font-size:.6rem;letter-spacing:.11em}
  .acp-plate__rows>div{grid-template-columns:1fr;gap:3px;padding:11px 0}

  .woocommerce ul.products li.product img{aspect-ratio:16/10}
  /* Les tableaux poussaient la page entière en débordement horizontal. */
  .woocommerce table.shop_table{display:block;overflow-x:auto;white-space:nowrap}
  .woocommerce-ordering,.woocommerce-ordering select{width:100%;max-width:none}

  /* Le filtre garde ses deux lignes mais l'étiquette passe au-dessus. */
  .acp-filter__row{flex-wrap:nowrap}
  .acp-filter__label{flex-basis:auto;padding-right:2px}
  .acp-trail ol{padding:9px 0;font-size:.62rem}
  /* Sur mobile on ne garde que le maillon parent et la page : le reste
     déborderait sur deux lignes sans rien apprendre. */
  .acp-trail li:not(:nth-last-child(-n+2)){display:none}
  .acp-trail li:nth-last-child(2):before{content:"‹";margin-right:2px}
  .acp-trail [aria-current="page"]{max-width:24ch}

  .site-footer nav a{padding:9px 0;min-height:44px;margin:0}
  .footer-grid{gap:32px}
}

@media(max-width:400px){
  /* Budget mesuré : à 400px et en dessous, l'en-tête devient serré. On
     resserre l'action plutôt que de la sacrifier. */
  .js .header-actions .button--small{padding:0 11px;font-size:.72rem!important}
  .js .header-actions{gap:6px}
}

/* Sous 340px (iPhone SE de première génération), le libellé se réduit à son
   verbe. L'aria-label du lien reste complet : rien n'est perdu pour les
   lecteurs d'écran, et l'action reste à l'écran — c'est elle qui compte. */
@media(max-width:340px){
  .acp-cta-tail{display:none}
}

@media(max-width:420px){
  h1{font-size:clamp(1.95rem,10.8vw,2.6rem)}
  h2{font-size:clamp(1.7rem,8.6vw,2.2rem)}
  .eyebrow{font-size:.6rem;letter-spacing:.13em}
  .eyebrow i{width:18px;flex-basis:18px}
}

/* --------------------------------------------------------------------------
   Encoches et coins arrondis
   --------------------------------------------------------------------------
   Avec viewport-fit=cover la page occupe tout l'écran, encoche comprise : le
   CSS doit reculer lui-même. Les marges sont ajoutées AU retrait existant,
   donc nulles sur un écran sans encoche.

   Tout le contenu vit dans .container, et les deux seuls éléments qui en
   sortent sont l'en-tête collant et le panneau de menu.
   -------------------------------------------------------------------------- */
.container{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
.site-header{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
.site-footer{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
@media(max-width:1150px){
  .js .site-nav{
    padding-left:calc(20px + env(safe-area-inset-left,0px));
    padding-right:calc(20px + env(safe-area-inset-right,0px));
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
  }
}

/* Écrans très larges : on ne laisse pas la ligne de texte s'étirer. */
@media(min-width:1400px){:root{--container:1240px}}

/* La fiche produit n'a plus de héros : elle a besoin de sa propre respiration. */
.content-page--product{padding-top:clamp(28px,4vw,52px)}

/* ==========================================================================
   V9.2 — Passe de cohérence complète
   ========================================================================== */

/* Cibles et focus : 44px minimum pour les contrôles récurrents. */
.site-footer nav a{min-width:44px;min-height:44px}
.acp-trail a{display:inline-flex;align-items:center;min-height:44px}
.brand-marquee:focus-visible,.showroom-grid:focus-visible,.installation-gallery:focus-visible{
  outline:2px solid var(--electric);outline-offset:4px;
}

/* Le récit conserve son changement d'état, mais ne monopolise plus quatre
   hauteurs d'écran. L'instrument reste visible pendant la lecture. */
.story-layout{
  grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);
  align-items:start;gap:clamp(42px,7vw,92px);padding-block:var(--pad-section);
}
.story-copy{display:block;padding:0}
.story-copy>header{padding:0;margin:0 0 30px}
.story-step{
  min-height:0;padding:23px 0;
  grid-template-columns:42px minmax(0,1fr);gap:18px;align-content:start;
  border-top:1px solid var(--line);opacity:.72;transform:none;
}
.story-step:last-child{border-bottom:1px solid var(--line)}
.story-step.is-active{opacity:1}
.story-step h3{font-size:clamp(1.35rem,2.2vw,2rem);margin:9px 0 10px}
.story-step p{margin:0;font-size:.92rem;line-height:1.58}
.story-stage{
  grid-column:2;grid-row:1;position:sticky;top:94px;
  height:auto;min-height:0;overflow:visible;align-self:start;
}
.story-proof__head small{color:var(--muted)}
html[data-theme="dark"] .story-proof__head small{color:var(--soft)}
html[data-theme="light"] .story-proof__rail span{color:var(--muted)}
html[data-theme="dark"] .story-proof__head b,
html[data-theme="dark"] .story-proof__copy small{color:var(--electric-hi)}

/* Les deux galeries deviennent des rubans inspectables. Elles montrent les
   formats sans produire une seconde page entière de photographies. */
.installation-gallery{
  display:grid;grid-template-columns:none;grid-template-rows:360px;
  grid-auto-flow:column;grid-auto-columns:minmax(300px,38%);grid-auto-rows:360px;
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 0 14px;scrollbar-width:thin;
}
.installation-shot,.installation-shot--lead,.installation-shot--portrait,
.installation-shot--tall,.installation-shot--wide,.installation-shot--compact{
  grid-column:auto;grid-row:auto;height:360px;scroll-snap-align:start;
}

/* Diagrammes des guides : chaque carte montre les vrais noms de systèmes,
   jamais une automobile d'une autre marque. */
.guide-diagram{
  --guide-accent:var(--electric);
  aspect-ratio:4/3;padding:18px;background:var(--ink);border-bottom:1px solid var(--line);
}
.guide-diagram--vag,.guide-diagram--mercedes,.guide-diagram--preparation{--guide-accent:var(--cyan)}
.guide-diagram:after{content:none}
.guide-diagram__panel{
  display:grid;grid-template-rows:auto 1fr auto;gap:14px;height:100%;padding:14px;
  border:1px solid var(--line-hi);border-radius:var(--r-md);
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--panel);
  background-size:22px 22px;
}
.guide-diagram__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-diagram__top span,.guide-diagram__top b{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
}
.guide-diagram__top span{color:var(--muted)}
.guide-diagram__top b{color:var(--guide-accent)}
.guide-diagram__screen{
  position:relative;display:grid;place-content:center;text-align:center;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--guide-accent) 42%,var(--line));border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--guide-accent) 7%,var(--ink));
}
.guide-diagram__screen:before,.guide-diagram__screen:after{
  content:"";position:absolute;background:color-mix(in srgb,var(--guide-accent) 34%,transparent);
}
.guide-diagram__screen:before{left:50%;top:0;bottom:0;width:1px}
.guide-diagram__screen:after{top:50%;left:0;right:0;height:1px}
.guide-diagram__screen strong{position:relative;z-index:1;color:var(--white);font:600 clamp(1rem,2vw,1.35rem) var(--font-display)}
.guide-diagram__screen small{position:relative;z-index:1;margin-top:5px;color:var(--guide-accent);font:600 .5rem var(--font-mono);letter-spacing:.1em}
.guide-diagram__rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.guide-diagram__rail span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 5px;
  border:1px solid var(--line);border-radius:4px;background:var(--ink);
  color:var(--soft);font:600 .56rem var(--font-mono);text-align:center;
}

/* Visuel produit de repli : une fiche de diagnostic, pas une image cassée. */
.acp-product-visual{
  --visual-accent:var(--electric);
  position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:14px;
  width:100%;min-height:230px;aspect-ratio:4/3;padding:16px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:
    radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--visual-accent) 16%,transparent),transparent 32%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--ink);
  background-size:auto,24px 24px,24px 24px,auto;
  color:var(--white);
}
.acp-product-visual--modules,.acp-product-visual--autoradios{--visual-accent:var(--cyan)}
.acp-product-visual__top,.acp-product-visual__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acp-product-visual__top span,.acp-product-visual__top b,.acp-product-visual__meta small{
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;
}
.acp-product-visual__top span,.acp-product-visual__meta small{color:var(--muted)}
.acp-product-visual__top b{color:var(--visual-accent)}
.acp-product-visual__diagram{
  display:grid;grid-template-columns:54px minmax(28px,1fr) 88px;align-items:center;gap:10px;
}
.acp-product-visual__diagram span{
  display:grid;place-items:center;min-height:48px;padding:8px;
  border:1px solid color-mix(in srgb,var(--visual-accent) 48%,var(--line));
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--visual-accent) 8%,var(--panel));
  color:var(--white);font:650 .6rem var(--font-mono);letter-spacing:.08em;
}
.acp-product-visual__diagram i{
  position:relative;height:1px;background:var(--visual-accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--visual-accent) 55%,transparent);
}
.acp-product-visual__diagram i:before,.acp-product-visual__diagram i:after{
  content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--visual-accent);transform:translateY(-50%);
}
.acp-product-visual__diagram i:before{left:0}.acp-product-visual__diagram i:after{right:0}
.acp-product-visual__meta strong{font-size:.82rem;letter-spacing:-.012em}
.woocommerce ul.products li.product .acp-product-visual{margin-bottom:15px}
.woocommerce div.product .acp-product-visual--single{min-height:460px;aspect-ratio:1/1;padding:24px}
.woocommerce div.product .acp-product-visual--single .acp-product-visual__diagram{grid-template-columns:74px minmax(44px,1fr) 128px}
.woocommerce div.product .acp-product-visual--single .acp-product-visual__diagram span{min-height:74px}
.acp-product-visual--cart{
  width:64px;min-width:64px;height:64px;min-height:64px;aspect-ratio:1;padding:7px;gap:0;border-radius:var(--r-sm);
}
.acp-product-visual--cart .acp-product-visual__top,
.acp-product-visual--cart .acp-product-visual__meta{display:none}
.acp-product-visual--cart .acp-product-visual__diagram{grid-template-columns:15px 1fr 22px;gap:3px}
.acp-product-visual--cart .acp-product-visual__diagram span{min-height:22px;padding:2px;font-size:0}

/* Le Cart Block ne passe pas par le filtre PHP des miniatures classiques.
   On transforme donc son image WooCommerce générique en repère technique
   compact, cohérent avec le catalogue, sans prétendre montrer un produit. */
.wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]){
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:64px;min-width:64px;height:64px;min-height:64px;overflow:hidden;
  border:1px solid var(--line-hi);border-radius:var(--r-sm);
  background:
    radial-gradient(circle at 78% 14%,color-mix(in srgb,var(--electric) 20%,transparent),transparent 34%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--ink);
  background-size:auto,12px 12px,12px 12px,auto;
}
.wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]) img{opacity:0}
.wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]):before{
  content:"ACP";position:absolute;inset:12px 8px;z-index:1;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--electric) 58%,var(--line));border-radius:4px;
  background:color-mix(in srgb,var(--electric) 8%,var(--panel));color:var(--electric-hi);
  font:750 .62rem var(--font-mono);letter-spacing:.1em;
}
.wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]):after{
  content:"";position:absolute;left:5px;right:5px;bottom:6px;z-index:2;height:1px;
  background:var(--electric);box-shadow:0 0 8px color-mix(in srgb,var(--electric) 65%,transparent);
}

/* WooCommerce partage désormais les mêmes surfaces dans les deux thèmes. */
.woocommerce{color:var(--paper-ink)}
.woocommerce ul.products{clear:both;width:100%}
.woocommerce ul.products:before,.woocommerce ul.products:after{content:none!important;display:none!important}
.woocommerce .page-description{max-width:68ch;margin-bottom:28px;color:var(--paper-muted)}
.woocommerce div.product{color:var(--paper-ink)}
.woocommerce div.product .product_title,.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related.products{color:var(--paper-ink)}
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .product_meta{color:var(--paper-muted)}
.woocommerce div.product .product_meta a{color:var(--electric-ink);text-decoration:underline;text-underline-offset:3px}
.woocommerce div.product .related.products{clear:both;width:100%;margin-top:64px;padding-top:38px;border-top:1px solid var(--line)}
.woocommerce div.product section.related.products{display:block!important}
.woocommerce div.product .related.products>h2{max-width:none;margin-bottom:26px;font-size:clamp(1.8rem,3vw,2.7rem)}
.woocommerce div.product .related.products ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.woocommerce ul.products li.product .price del{opacity:1;color:var(--muted)!important}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount{color:inherit!important}
select.orderby{background-color:var(--ink);border-color:var(--line-hi);color:var(--white)}
.acp-aside__note a{color:var(--electric-ink)}

html[data-theme="dark"] .content-page,
html[data-theme="dark"] .woocommerce-cart .content-page,
html[data-theme="dark"] .woocommerce-checkout .content-page,
html[data-theme="dark"] .woocommerce-account .content-page{background:var(--void);color:var(--white)}
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .page-hero h2{color:var(--white)!important}
html[data-theme="dark"] .page-hero p{color:var(--soft)!important}
html[data-theme="dark"] .acp-product-vehicles li a,
html[data-theme="dark"] .woocommerce-checkout .woocommerce-checkout-review-order,
html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation,
html[data-theme="dark"] .woocommerce-cart .cart_totals,
html[data-theme="dark"] .woocommerce form.login,
html[data-theme="dark"] .woocommerce form.checkout_coupon{
  background:var(--panel);border-color:var(--line);color:var(--white);box-shadow:none;
}
html[data-theme="dark"] .acp-product-vehicles{border-color:var(--line)}
html[data-theme="dark"] .acp-product-vehicles>p,
html[data-theme="dark"] .acp-product-vehicles__note{color:var(--soft)}
html[data-theme="dark"] .acp-product-vehicles strong{color:var(--white)}
html[data-theme="dark"] .acp-product-vehicles span{color:var(--soft)}
html[data-theme="dark"] .woocommerce table.shop_table td,
html[data-theme="dark"] .woocommerce table.shop_table th{color:var(--soft);background:var(--panel)}
html[data-theme="light"] .acp-vp__grid span,
html[data-theme="light"] .acp-vp__grid b,
html[data-theme="light"] .acp-product-vehicles span{color:var(--muted)}

/* Champs React de WooCommerce Blocks : leur fond blanc était resté figé en
   mode sombre alors que les libellés suivaient les jetons sombres. */
html[data-theme="dark"] .wc-block-components-text-input input,
html[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control input,
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select{
  background:var(--ink)!important;color:var(--white)!important;border-color:var(--line-hi)!important;
}
html[data-theme="dark"] .wc-block-components-text-input label,
html[data-theme="dark"] .wc-block-components-combobox .wc-block-components-combobox-control label,
html[data-theme="dark"] .wc-blocks-components-select__label{color:var(--muted)!important}
.wc-block-components-button,.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{min-height:48px!important}
/* Les boutons de bloc WordPress ne portent pas .button : sans cette règle,
   l'action de l'état vide du panier restait une cible de 24px. */
.wp-block-button__link,.wc-block-grid__product-add-to-cart .add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.wc-block-cart-item__remove-link{
  display:inline-grid!important;place-items:center;min-width:44px!important;min-height:44px!important;padding:0!important;
}
.woocommerce-LostPassword a{display:inline-flex;align-items:center;min-height:44px}

/* Compte et états vides : largeur de lecture et invitation à agir. */
.woocommerce-account:not(.logged-in) .woocommerce{max-width:660px;margin-inline:auto}
.woocommerce form.login{
  margin:0;padding:clamp(24px,4vw,38px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--shadow-1);
}
.woocommerce form.login .form-row{margin-bottom:18px}
.woocommerce form.login .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.woocommerce .show-password-input{display:grid!important;place-items:center;min-width:44px;min-height:44px;right:2px!important;top:50%!important;transform:translateY(-50%)}
.wc-block-cart__empty-cart__title,.cart-empty.woocommerce-info{text-align:center}
.wc-block-cart__empty-cart__title+*{margin-inline:auto}

/* Le configurateur mobile n'a plus besoin d'une bande horizontale. */
@media(max-width:760px){
  .acp-progress{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important;gap:12px 0}
  .acp-progress span{min-width:0!important;white-space:normal!important;line-height:1.35}
}

/* Mode sombre continu sur les deux sections historiquement figées en blanc. */
html[data-theme="dark"] .reassurance-section,
html[data-theme="dark"] .faq-section{background:var(--void);color:var(--white)}
html[data-theme="dark"] .reassurance-copy p,
html[data-theme="dark"] .reassurance-stack p,
html[data-theme="dark"] .faq p{color:var(--soft)}
html[data-theme="dark"] .reassurance-section .eyebrow{color:var(--muted)}
html[data-theme="dark"] .reassurance-stack,
html[data-theme="dark"] .reassurance-stack article,
html[data-theme="dark"] .faq details{border-color:var(--line)!important}
html[data-theme="dark"] .reassurance-copy .button--ghost{color:var(--white)!important;border-color:var(--line-hi)!important}
html[data-theme="dark"] .reassurance-stack b{color:var(--success);border-color:color-mix(in srgb,var(--success) 42%,transparent)}
html[data-theme="dark"] .faq summary:after{border-color:var(--line-hi);background:var(--panel);color:var(--white)}

/* Formulaires : l'optionnel et les légendes restent lisibles en clair. */
.acp-opt{opacity:1;color:var(--muted)}
.guide-card__body>small{color:var(--electric-ink)}
html[data-theme="light"] .guide-card__body p{color:var(--soft)}
html[data-theme="light"] .reassurance-stack article>span{color:var(--muted)}
.acp-product-vehicles__note a{color:var(--electric-ink)}

/* Page 404 — l'adresse cassée devient un diagnostic avec une sortie claire. */
.acp-404{padding-block:clamp(72px,9vw,128px);background:var(--void);color:var(--white)}
.acp-404__layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(44px,8vw,110px);align-items:center}
.acp-404__copy h1{margin-bottom:24px;font-size:clamp(2.7rem,5.5vw,5.4rem)}
.acp-404__actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 40px}
.acp-404__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.acp-404__links a{display:grid;gap:4px;min-height:72px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.acp-404__links a:hover{border-color:var(--electric)}
.acp-404__links span{font-weight:600}.acp-404__links small{color:var(--muted)}
.acp-404__instrument{
  display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-height:430px;padding:24px;
  border:1px solid var(--line-hi);border-radius:var(--r-xl);background:
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--panel);
  background-size:32px 32px;box-shadow:var(--shadow-2);
}
.acp-404__instrument-top{display:flex;justify-content:space-between;color:var(--muted);font:600 .65rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.acp-404__instrument-top b{color:var(--electric);font-size:1.2rem}
.acp-404__route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.acp-404__route span,.acp-404__route strong{font:650 .68rem var(--font-mono);letter-spacing:.1em}
.acp-404__route span{color:var(--muted)}.acp-404__route strong{color:var(--electric)}
.acp-404__route i{height:1px;background:repeating-linear-gradient(90deg,var(--line-hi) 0 8px,transparent 8px 14px)}
.acp-404__status{display:flex;align-items:center;gap:9px;padding-top:18px;border-top:1px solid var(--line);color:var(--soft);font-size:.84rem}
/* Le vert ne signifie qu'une chose sur ce site : « configuration confirmée ».
   Une adresse introuvable n'est pas une confirmation — le voyant passe en ambre. */
.acp-404__status i{width:8px;height:8px;border-radius:50%;background:var(--electric);box-shadow:0 0 12px color-mix(in srgb,var(--electric) 60%,transparent)}

@media(max-width:960px){
  .story-layout{display:grid;grid-template-columns:1fr;padding-block:clamp(64px,9vw,88px)}
  .story-copy,.story-stage{grid-column:1}
  .story-stage{grid-row:auto;position:relative;top:auto;margin:26px 0 0;padding:0;background:transparent!important;backdrop-filter:none}
  .woocommerce div.product .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .installation-gallery{grid-auto-columns:minmax(300px,62%)}
  .acp-404__layout{grid-template-columns:1fr}.acp-404__instrument{min-height:330px}
}

@media(max-width:640px){
  .story-step{padding:19px 0;grid-template-columns:34px minmax(0,1fr)}
  .story-proof__rail span{font-size:.54rem}
  .installation-gallery{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px}
  .installation-shot,.installation-shot--lead,.installation-shot--portrait,
  .installation-shot--tall,.installation-shot--wide,.installation-shot--compact{flex:0 0 84vw;height:310px}
  .woocommerce div.product .related.products ul.products{grid-template-columns:1fr!important}
  .woocommerce div.product .acp-product-visual--single{min-height:300px}
  .woocommerce div.product .acp-product-visual--single .acp-product-visual__diagram{grid-template-columns:58px minmax(30px,1fr) 92px}
  .woocommerce div.product .acp-product-visual--single .acp-product-visual__diagram span{min-height:56px}
  .acp-404{padding-block:58px}.acp-404__actions{display:grid}.acp-404__links{grid-template-columns:1fr}
  .acp-404__instrument{min-height:280px;padding:18px;border-radius:var(--r-lg)}
}

@media(prefers-reduced-motion:reduce){
  .installation-shot img,.guide-card,.acp-product-visual,.story-step{transition:none!important;transform:none!important}
}

/* ========================================================================== 
   V9.3 — Boutique lisible et accès direct au devis PDF
   ========================================================================== */
.acp-shop-quote{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  margin:0 0 28px;padding:22px 24px;
  border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--r-md);
  background:linear-gradient(110deg,color-mix(in srgb,var(--cyan) 7%,var(--panel)),var(--paper-2));
}
.acp-shop-quote span{color:var(--cyan);font:650 .6rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.acp-shop-quote h2{margin:5px 0 7px;color:var(--white);font-size:clamp(1.3rem,2.3vw,1.8rem);letter-spacing:-.035em}
.acp-shop-quote p{max-width:72ch;margin:0;color:var(--soft);font-size:.86rem;line-height:1.55}
.acp-shop-quote .button{white-space:nowrap}

.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{
  display:flex;flex:1;min-width:0;flex-direction:column;color:inherit;
}
.acp-product-quote-link{
  display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px;
  border:1px solid var(--line-hi);border-radius:999px;background:transparent;color:var(--paper-ink)!important;
  font-size:.78rem;font-weight:650;letter-spacing:-.01em;text-align:center;
  transition:border-color .16s,background .16s,color .16s;
}
.acp-product-quote-link:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent);color:var(--cyan)!important}
.acp-product-quote-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media(max-width:960px){
  /* Trois cartes de 228px rendaient titres et tarifs trop serrés sur tablette. */
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* Toutes les valeurs restent visibles : aucun dernier filtre masqué à droite. */
  .acp-filter__row{flex-wrap:wrap;overflow:visible;gap:8px;padding:10px}
  .acp-filter__label{flex:0 0 100%;padding:2px 4px 0}
}

@media(max-width:640px){
  .acp-shop-quote{grid-template-columns:1fr;gap:16px;padding:18px;border-left-width:3px}
  .acp-shop-quote .button{width:100%}

  .acp-filter{padding:3px;margin-bottom:20px}
  .acp-filter__row{align-items:stretch;gap:7px;padding:10px}
  .acp-filter__row a{flex:1 1 calc(50% - 4px);justify-content:center;padding-inline:10px;text-align:center}

  /* Une carte horizontale compacte remplace les douze grands panneaux empilés. */
  .woocommerce ul.products{grid-template-columns:1fr!important}
  .woocommerce ul.products li.product{
    display:grid!important;grid-template-columns:108px minmax(0,1fr);gap:8px 12px;
    padding:12px;border-radius:var(--r-md);
  }
  .woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{
    grid-column:1/-1;display:grid;grid-template-columns:108px minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:12px;align-content:start;
  }
  .woocommerce ul.products li.product .acp-product-visual,
  .woocommerce ul.products li.product>a.woocommerce-LoopProduct-link>img{
    grid-column:1;grid-row:1/span 2;width:108px;height:108px;min-height:108px;aspect-ratio:1;
    margin:0;padding:9px;gap:5px;border-radius:var(--r-sm);align-self:start;
  }
  .woocommerce ul.products li.product>a.woocommerce-LoopProduct-link>img{padding:0;object-fit:cover}
  .woocommerce ul.products li.product .acp-product-visual__top{display:none}
  .woocommerce ul.products li.product .acp-product-visual__diagram{grid-template-columns:28px minmax(12px,1fr) 43px;gap:4px}
  .woocommerce ul.products li.product .acp-product-visual__diagram span{min-height:34px;padding:3px;font-size:.43rem;letter-spacing:.04em}
  .woocommerce ul.products li.product .acp-product-visual__diagram i:before,
  .woocommerce ul.products li.product .acp-product-visual__diagram i:after{width:4px;height:4px}
  .woocommerce ul.products li.product .acp-product-visual__meta{align-self:end}
  .woocommerce ul.products li.product .acp-product-visual__meta strong{font-size:.62rem;line-height:1.15}
  .woocommerce ul.products li.product .acp-product-visual__meta small{display:none}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    grid-column:2;grid-row:1;margin:0 0 7px!important;font-size:.94rem!important;line-height:1.2;
  }
  .woocommerce ul.products li.product .price{
    grid-column:2;grid-row:2;align-self:end;margin:0!important;font-size:.93rem!important;
  }
  .woocommerce ul.products li.product>.button,
  .woocommerce ul.products li.product>.acp-product-quote-link{grid-column:2;width:100%;margin:0!important;min-height:44px}
  .woocommerce ul.products li.product>.button{font-size:.72rem!important;padding-inline:10px!important}
  .woocommerce ul.products li.product .onsale{top:17px!important;right:17px!important}
}

@media(max-width:360px){
  .woocommerce ul.products li.product{grid-template-columns:96px minmax(0,1fr);column-gap:10px}
  .woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{grid-template-columns:96px minmax(0,1fr);column-gap:10px}
  .woocommerce ul.products li.product .acp-product-visual,
  .woocommerce ul.products li.product>a.woocommerce-LoopProduct-link>img{width:96px;height:96px;min-height:96px}
}