/* ==========================================================================
   Système de design Rétroviz : graphite et ambre (documenté dans DESIGN.md).
   Toute nouvelle couleur, taille, marge ou arrondi passe par ces variables.
   ========================================================================== */
/* Polices : public/css/polices.css (chargé avant ce fichier). */
:root{
  /* Couleurs : graphite et ambre (contrastes vérifiés par test/design.test.js) */
  --bg:#F4F2EE;          /* fond de page : gris chaud, comme le sol d'un atelier */
  --surface:#FFFFFF;     /* cartes : blanches, cernées d'un filet (--shadow) */
  --surface-haute:#FFFFFF; /* ce qui flotte au-dessus : fenêtres, bulles, barre du bas */
  --champ:#FFFFFF;       /* champs de saisie */
  --soft:#FCEBD2;        /* ambre très clair : éléments actifs, encarts, étiquettes */
  --soft-hover:#F8DDB5;
  --line:#E2DED6;        /* filets et séparateurs */
  --field-line:#857E70;  /* bordure des champs : contraste 3:1 minimum */
  --ink:#14181F;         /* texte principal : graphite */
  --muted:#555C6A;       /* texte secondaire */
  --primary:#8A4B00;     /* ambre foncé : liens, entrée active, focus (lisible en petit texte) */
  --primary-hover:#6B3A00;
  --on-primary:#FFFFFF;  /* texte sur ambre foncé */
  --accent:#F2A33A;      /* ambre vif : bouton principal (texte graphite dessus), repères */
  --accent-hover:#E08A12;
  --on-accent:#14181F;
  --bronze:#14181F;      /* grands titres (24 px et plus) : graphite, gras */
  --bronze-ink:#7A4300;  /* ambre des petits textes et des détails */
  --hero-1:#0F1318; --hero-2:#161B22; --hero-3:#1E242E; /* bandeau graphite (texte blanc lisible partout) */
  --ic-1:#2A3240; --ic-2:#8A4B00; --ic-3:#3C5A96; --ic-4:#6E4C7E; /* petites icônes carrées : ni vert, ni orange, ni rouge */
  /* Couleurs de sens, jamais décoratives : gravité et alertes */
  --green:#1E8449; --green-ink:#176A3A;
  --amber:#C77700; --amber-ink:#8A4F00;
  --red:#C8372D;   --red-ink:#A92C23; --on-red:#FFFFFF; --red-bg:#FBEDEC;
  --grey:#768A8C;        /* niveau « inconnu » */
  --overlay:rgb(10 12 16 / .62);
  --shadow:0 0 0 1px var(--line); /* cartes : un filet fin, sans ombre portée */
  --shadow-haute:0 2px 6px rgb(20 24 31 / .06), 0 14px 40px rgb(20 24 31 / .16); /* fenêtres, bulles */
  /* Scène 3D : un studio sombre, le même en clair et en sombre */
  --scene-fond:#07090C; --scene-encre:#E8ECF1; --scene-discret:#A1ABB8; --scene-ligne:#343D4B; --scene-panneau:rgb(10 12 16 / .88);

  /* Typographie : Barlow pour les titres et la navigation, Inter pour le reste */
  --font:"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-titre:"Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:13px; --fs-sm:14px; --fs-md:16px; --fs-lg:19px; --fs-xl:24px; --fs-2xl:32px; --fs-brand:26px;
  --lh:1.6; --lh-tight:1.2;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --espace-titre:.16em;  /* majuscules espacées (navigation, sur-titres) */

  /* Espacements (multiples de 4 px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Arrondis */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;

  /* Mise en page */
  --page-max:1040px; --gutter:16px; --tap:44px; /* hauteur minimale d'une cible tactile */

  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Mode sombre : graphite nuit */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1218; --surface:#161C25; --surface-haute:#1C232E; --champ:#1C232E; --soft:#2E2414; --soft-hover:#3A2D18; --line:#262D38; --field-line:#6E7787;
    --ink:#E8ECF1; --muted:#A1ABB8; --primary:#F2A33A; --primary-hover:#FFC46B; --on-primary:#14181F; --accent:#F2A33A; --accent-hover:#FFC46B; --on-accent:#14181F;
    --bronze:#E8ECF1; --bronze-ink:#F2B35A; --hero-1:#06080B; --hero-2:#0E1218; --hero-3:#161C25;
    --ic-1:#3A4352; --ic-2:#9A6A2A; --ic-3:#4A69A8; --ic-4:#80598F;
    --green:#4CC27C; --green-ink:#6ED597; --amber:#F0B03E; --amber-ink:#F4C468; --red:#F06A5E; --red-ink:#F48E84; --on-red:#0A1517; --red-bg:#2A1A1D;
    --grey:#7F9799; --overlay:rgb(0 0 0 / .66); --shadow:0 0 0 1px var(--line); --shadow-haute:0 2px 6px rgb(0 0 0 / .3), 0 14px 40px rgb(0 0 0 / .45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1218; --surface:#161C25; --surface-haute:#1C232E; --champ:#1C232E; --soft:#2E2414; --soft-hover:#3A2D18; --line:#262D38; --field-line:#6E7787;
  --ink:#E8ECF1; --muted:#A1ABB8; --primary:#F2A33A; --primary-hover:#FFC46B; --on-primary:#14181F; --accent:#F2A33A; --accent-hover:#FFC46B; --on-accent:#14181F;
  --bronze:#E8ECF1; --bronze-ink:#F2B35A; --hero-1:#06080B; --hero-2:#0E1218; --hero-3:#161C25;
  --ic-1:#3A4352; --ic-2:#9A6A2A; --ic-3:#4A69A8; --ic-4:#80598F;
  --green:#4CC27C; --green-ink:#6ED597; --amber:#F0B03E; --amber-ink:#F4C468; --red:#F06A5E; --red-ink:#F48E84; --on-red:#0A1517; --red-bg:#2A1A1D;
  --grey:#7F9799; --overlay:rgb(0 0 0 / .66); --shadow:0 0 0 1px var(--line); --shadow-haute:0 2px 6px rgb(0 0 0 / .3), 0 14px 40px rgb(0 0 0 / .45);
  color-scheme:dark;
}

/* ---------- base ---------- */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2{font-family:var(--font-titre)}
a{color:var(--primary);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.wrap{max-width:var(--page-max);margin:0 auto;padding:var(--sp-4) var(--gutter) var(--sp-7)}
@media (min-width:600px){.wrap{padding-top:var(--sp-5);--gutter:24px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- en-tête et navigation principale ---------- */
/* 5 entrées : dans l'en-tête sur ordinateur, en barre fixe en bas de l'écran sur mobile et tablette. */
/* Barre du haut : logo à gauche, les 5 entrées au centre (ordinateur), recherche et compte à droite.
   Fixe en haut ; une fois la page défilée, elle devient plus basse, légèrement transparente et soulignée. */
/* Le fond de la barre est un pseudo-élément de toute la largeur : un effet (flou, découpe) posé sur la barre elle-même
   emporterait aussi la barre des onglets, fixée en bas de l'écran sur mobile. */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:76px;margin:calc(-1 * var(--sp-4)) 0 var(--sp-5);transition:height .2s ease}
header::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--bg);transition:background-color .2s ease, box-shadow .2s ease}
header.allege{height:58px}
header.allege::before{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
body{overflow-x:clip} /* le fond de la barre déborde de 100vw (barre de défilement comprise) sans créer de défilement horizontal */
header.allege .logo-symbole{width:30px;height:30px}
@media (min-width:600px){header{margin-top:calc(-1 * var(--sp-5))}}
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
.logo{display:flex;align-items:center;gap:var(--sp-3);min-width:0;min-height:var(--tap);background:none;border:0;padding:0;cursor:pointer}
/* Logo : le rétroviseur dans un carré au trait fin, et le nom en majuscules espacées. */
.logo-symbole{flex:none;width:36px;height:36px;color:var(--primary-hover);transition:width .2s ease, height .2s ease}
.brand{font-family:var(--font-titre);font-size:15px;font-weight:var(--fw-medium);line-height:1;letter-spacing:.26em;text-transform:uppercase;margin:0;color:var(--ink)}
@media (max-width:420px){.logo-symbole{width:32px;height:32px}.brand{font-size:13px;letter-spacing:.22em}}
@media (prefers-reduced-motion: reduce){header, header::before, .logo-symbole{transition:none}}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hautdroite{display:flex;align-items:center;gap:var(--sp-2)}
.rond{width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);background:var(--surface-haute);cursor:pointer;padding:0;position:relative}
.rond:hover{border-color:var(--primary);color:var(--primary)}
.rond .ic{width:22px;height:22px}
.rond.connecte::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid var(--surface-haute)}
.navlink{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);background:transparent;border:0;border-radius:var(--r-pill);padding:0 var(--sp-3);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--primary);cursor:pointer}
.navlink .ic{width:22px;height:22px}
.navlink:hover{background:var(--soft)}
.navlink[aria-current="page"]{background:var(--soft)}
.acct{display:flex}
/* Ordinateur : les 5 entrées en majuscules espacées, sans icône ; l'entrée active soulignée de bronze. */
.onglets{display:flex;gap:var(--sp-1)}
.onglet{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:13px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap}
.onglet .ic{display:none}
.onglet:hover{color:var(--primary)}
.onglet[aria-current="page"]{color:var(--primary);border-bottom-color:var(--accent)}
@media (max-width:899px){
  /* La page s'arrête au-dessus de la barre : rien (bandeau de sécurité, bouton Envoyer…) ne reste caché dessous. */
  body{padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px))}
  /* Défilement automatique (focus, invitation…) : jamais jusque sous la barre. */
  html{scroll-padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px) + 8px)}
  .onglets{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:var(--surface-haute);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 12px rgb(19 42 45 / .08)}
  /* Mobile : barre du bas avec icône et libellé (sans majuscules : plus lisible en petit). */
  .onglet{flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:4px 2px;border:0;border-radius:var(--r-md);font-family:var(--font);font-size:11.5px;font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;line-height:1.1}
  .onglet .ic{display:block;width:24px;height:24px}
  .onglet[aria-current="page"]{background:var(--soft)}
  header{height:62px}
  header.allege{height:52px}
  html{scroll-padding-top:calc(62px + env(safe-area-inset-top,0px))}
  /* La zone de saisie de l'assistant reste collée juste au-dessus de la barre, pas dessous. */
  #chatPanel .composer{bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px))}
}
:root{--barre:72px}
@media (max-width:420px){.navlink{padding:0 var(--sp-2)}}

/* ---------- accueil, écrans d'orientation ---------- */
.titre{font-family:var(--font-titre);font-weight:var(--fw-bold);font-size:30px;line-height:var(--lh-tight);margin:0 0 var(--sp-2);color:var(--bronze);letter-spacing:-.015em}
@media (min-width:600px){.titre{font-size:36px}}
.sous{color:var(--muted);margin:0 0 var(--sp-5);max-width:60ch}
.sect2{font-size:var(--fs-lg);margin:0 0 var(--sp-3)}
.fil{background:none;border:0;padding:0;min-height:var(--tap);color:var(--primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.choix{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-5)}
@media (min-width:700px){.choix{grid-template-columns:1fr 1fr}.choix.choix-un{grid-template-columns:repeat(3,1fr)}}
.carte{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-3);align-items:center;width:100%;background:var(--surface);border:2px solid transparent;border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow);text-align:left;color:var(--ink);cursor:pointer}
.carte:hover{border-color:var(--soft-hover)}
.carte .rond{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--primary)}
.carte .rond .ic{width:28px;height:28px}
.carte strong{display:block;font-size:var(--fs-lg);line-height:var(--lh-tight);margin-bottom:2px}
.carte > span:last-child > span{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.4}
.carte.urgent .rond{background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--red-ink)}
.carte.secondaire{background:transparent;box-shadow:none;border:1.5px solid var(--line);padding:var(--sp-3) var(--sp-4);grid-template-columns:40px minmax(0,1fr);margin:0 0 var(--sp-5)}
.carte.secondaire .rond{width:40px;height:40px;border-radius:12px}
.carte.secondaire .rond .ic{width:24px;height:24px}
.carte.secondaire strong{font-size:var(--fs-md);color:var(--primary)}
/* Bandeau d'accueil : dégradé sarcelle, titre blanc très gras, bouton blanc en pilule ; à droite (ordinateur), la place de la future voiture 3D. */
.bandeau{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-5);background:linear-gradient(120deg,var(--hero-1) 0%,var(--hero-2) 62%,var(--hero-3) 100%);color:#FFFFFF;border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-7);margin:0 0 var(--sp-8)}
.bandeau-logo{display:flex;align-items:center;gap:var(--sp-3);margin:0;color:#FFFFFF}
.bandeau-logo .logo-symbole{width:44px;height:44px;color:#FFFFFF}
.bandeau-logo .brand{color:#FFFFFF}
.bandeau h1{font-family:var(--font-titre);font-weight:var(--fw-bold);font-size:46px;line-height:1.08;letter-spacing:-.01em;margin:var(--sp-5) 0 var(--sp-3);color:#FFFFFF}
.bandeau-phrase{color:#B9C0CB;font-size:18px;margin:0 0 var(--sp-6);max-width:44ch}
.bandeau-boutons{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.pilule{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:50px;padding:0 26px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-md);cursor:pointer;border:0}
.pilule.blanche{background:#FFFFFF;color:#14181F;box-shadow:0 10px 28px rgb(0 0 0 / .22)}
.pilule.blanche:hover{background:#FCEBD2}
.pilule.trait{background:transparent;color:#FFFFFF;border:1.5px solid rgb(255 255 255 / .7)}
.pilule.trait:hover{background:rgb(255 255 255 / .1)}
.bandeau :focus-visible{outline-color:#FFFFFF}
.place3d{display:grid;place-items:center;min-height:260px;border-radius:var(--r-lg);color:rgb(255 255 255 / .45);background:radial-gradient(circle at 50% 60%,rgb(255 255 255 / .10),transparent 65%)}
.place3d svg{width:200px;height:auto}
@media (max-width:760px){
  .bandeau{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-5) var(--sp-5);border-radius:22px;margin-bottom:var(--sp-7)}
  .bandeau h1{font-size:31px;margin:var(--sp-4) 0 var(--sp-3)}
  .bandeau-phrase{font-size:var(--fs-md);margin-bottom:var(--sp-5)}
  .bandeau-boutons{flex-direction:column}
  .place3d{display:none} /* pas de 3D sur mobile pour l'instant : les cartes restent proches */
}
/* Quatre entrées : cartes gris très clair, petite icône carrée colorée, étiquette en pastille. */
.cartes-accueil{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.carte-accueil{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-4);align-items:start;width:100%;height:100%;background:var(--surface);border:2px solid transparent;border-radius:var(--r-lg);padding:var(--sp-5);text-align:left;color:var(--ink);cursor:pointer}
.carte-accueil:hover{border-color:var(--soft-hover)}
.carre{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#FFFFFF}
.carre .ic{width:24px;height:24px}
.carte-accueil strong{display:block;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-tight);margin:2px 0 var(--sp-1)}
.carte-accueil .t{display:block;color:var(--muted);font-size:15px;line-height:1.5}
.pastille{display:inline-block;margin-top:var(--sp-3);background:var(--soft);color:var(--primary-hover);font-size:12.5px;font-weight:var(--fw-semibold);border-radius:var(--r-pill);padding:3px 11px}
@media (max-width:640px){.cartes-accueil{grid-template-columns:1fr;gap:var(--sp-3)}.carte-accueil{padding:18px;grid-template-columns:44px minmax(0,1fr);gap:14px}.carre{width:44px;height:44px}.carte-accueil strong{font-size:17px}}
#accueilPanel .titre{margin-top:0}
#accueilPanel .etapes, #accueilPanel .alerte{margin-bottom:var(--sp-8)}
.alerte{display:flex;gap:var(--sp-3);align-items:center;border-left:4px solid var(--red);background:var(--red-bg);border-radius:var(--r-sm);padding:14px 18px;font-size:15px;margin:0 0 var(--sp-5)}
.alerte .ic{color:var(--red-ink)}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);margin:0 0 var(--sp-5);padding:0;list-style:none;counter-reset:e}
.etapes li{counter-increment:e}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-family:var(--font-titre);font-weight:var(--fw-bold);font-size:18px;margin-bottom:var(--sp-3)}
.etapes strong{display:block;font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.etapes span{color:var(--muted);font-size:15px}
@media (max-width:640px){.etapes{grid-template-columns:1fr;gap:18px}.etapes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px}.etapes li::before{grid-row:span 2;margin:0}}
.confiance{list-style:none;display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:var(--sp-6) 0 0;margin:0;color:var(--muted);font-size:var(--fs-sm)}
.confiance li{display:inline-flex;gap:var(--sp-2);align-items:center}
.confiance .ic{color:var(--bronze-ink);width:20px;height:20px}
@media (max-width:640px){.confiance{flex-direction:column;gap:var(--sp-3);align-items:flex-start}}
.modepro{margin:0 0 var(--sp-4)}
/* Pièces : choix de la voiture */
.voit{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-4)}
.voit button{min-height:var(--tap);border:2px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-weight:var(--fw-semibold);color:var(--ink);cursor:pointer}
.voit button[aria-pressed="true"]{border-color:var(--primary);background:var(--soft);color:var(--primary)}
.pcform{margin:0 0 var(--sp-4)}
.ou{display:flex;gap:var(--sp-2);align-items:flex-end}
.ou > div{flex:1;min-width:0}
.pcprecis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
@media (max-width:420px){.pcprecis{grid-template-columns:1fr}}
.pcplus summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;color:var(--primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.pcplus summary:hover{color:var(--primary-hover)}
.pcplus .pcprecis{margin-top:var(--sp-1)}
.encart{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-sm);color:var(--ink);margin:var(--sp-3) 0 0}
.encart p{margin:0 0 var(--sp-2)}
.quota{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-2) 0 0}
.invite{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-4);margin:var(--sp-3) 0}
.invite h3{margin:0 0 var(--sp-1);font-size:var(--fs-md)}
.invite p{margin:0 0 var(--sp-3);font-size:var(--fs-sm)}

/* ---------- panneaux, textes, champs ---------- */
.intro{margin:0 0 var(--sp-5);max-width:60ch;color:var(--muted)}
label.f{display:block;font-weight:var(--fw-semibold);font-size:var(--fs-sm);margin-bottom:var(--sp-1)}
.field{width:100%;min-height:var(--tap);background:var(--champ);border:1px solid var(--field-line);border-radius:var(--r-sm);padding:10px var(--sp-3)}
.field::placeholder{color:var(--muted);opacity:.85}
.field:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
.hint{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0 0}
.veh{margin-bottom:var(--sp-4)}
/* Retours sous les réponses */
.fb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.fb .btn{min-height:36px}
.fb form{flex-basis:100%;display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.fb textarea{min-height:64px;resize:vertical}

/* Relecture (administrateur) */
.tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);border-bottom:1px solid var(--line);margin:0 0 var(--sp-5)}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:var(--sp-2) var(--sp-3);min-height:var(--tap);font-weight:var(--fw-semibold);color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-5)}
.kpi{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow)}
.kpi strong{display:block;font-size:var(--fs-2xl);line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:var(--fs-sm)}
.rfilters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.rfilters .field{flex:1 1 160px;width:auto}
.rlist{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.rlist li+li{border-top:1px solid var(--line)}
.rlist button{width:100%;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;justify-content:space-between;text-align:left;background:none;border:0;padding:var(--sp-3) var(--sp-4);cursor:pointer;font-size:var(--fs-sm)}
.rlist button:hover{background:var(--soft)}
.rlist .meta{color:var(--muted);font-size:var(--fs-xs)}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.45;min-height:360px;resize:vertical}
.redit{display:grid;gap:var(--sp-3)}
.redit > .back{justify-self:start}
.rsrc{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.rsrc .field{flex:1 1 260px;width:auto}
.rmsg{margin:0;font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.prop{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);display:grid;gap:var(--sp-2)}
.props{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.prop .meta{color:var(--muted);font-size:var(--fs-xs)}
.prop ul{margin:0;padding-left:20px;font-size:var(--fs-sm)}
.prop textarea{min-height:110px}
.prop .rejet{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.prop .rejet .field{flex:1 1 220px;width:auto}
.qsf{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.qsf th,.qsf td{text-align:left;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line)}
.qsf th{color:var(--muted);font-weight:var(--fw-semibold);border-top:0}
.rmsg.ok{color:var(--green-ink)}.rmsg.ko{color:var(--red-ink)}

/* Voyants */
.vic{width:40px;height:40px;flex:none}
.vtools{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;margin:0 0 var(--sp-4)}
.vtools .field{flex:1 1 220px}
.vfilters{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.vfilters button{min-height:36px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:0 var(--sp-3);font-size:var(--fs-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vfilters button[aria-pressed="true"]{background:var(--soft);border-color:var(--primary);color:var(--primary);font-weight:var(--fw-semibold)}
.vfilters i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.vgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2)}
@media (max-width:420px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vtile{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);padding:var(--sp-4) var(--sp-2);cursor:pointer;box-shadow:var(--shadow);font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.vtile:hover{border-color:var(--primary)}
.vfiche-head{display:flex;gap:var(--sp-4);align-items:center;margin:0 0 var(--sp-4)}
.vfiche-head .vic{width:72px;height:72px;padding:var(--sp-2);background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow)}
.vfiche-head h2{font-size:var(--fs-2xl);margin:0;line-height:var(--lh-tight)}
.vfiche-head p{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.vfiche .sect h3{margin-bottom:var(--sp-2)}
.vfiche ol,.vfiche ul{margin:0;padding-left:22px}
.vfiche li{margin:var(--sp-1) 0}
.verif{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0 0}
.chip .vic{width:20px;height:20px}
.vlink{margin:var(--sp-3) 0 0}

.vehrow{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.vehrow .field{flex:1 1 260px}
.vehrow select.field{flex:0 1 200px}
.notice{background:var(--soft);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-sm);padding:0 var(--sp-5);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.5;cursor:default}
/* bouton secondaire : bleu clair */
.btn.soft{background:var(--soft);color:var(--primary)}
.btn.soft:hover{background:var(--soft-hover)}
/* bouton discret : texte seul */
.btn.ghost{background:transparent;color:var(--primary);padding:0 var(--sp-3)}
.btn.ghost:hover{background:var(--soft)}
.btn.stop,.btn.red{background:var(--red);color:var(--on-red)}
.btn.stop:hover,.btn.red:hover{background:var(--red-ink)}
.btn.small{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-sm)}
.rowbtns{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.link{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:inherit;font-weight:var(--fw-medium)}

/* ---------- discussion ---------- */
.examples{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5)}
.ex{min-height:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);font-size:var(--fs-sm);cursor:pointer;color:var(--ink)}
.ex:hover{background:var(--soft);border-color:var(--soft-hover)}
.thread{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.thread:empty{display:none}
.msg-user{align-self:flex-end;max-width:85%;background:var(--primary);color:var(--on-primary);padding:10px var(--sp-4);border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);white-space:pre-wrap}
.msg-ai{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow)}
.msg-ai .note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-3);font-style:italic}
.src{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.thinking{color:var(--muted);font-style:italic;margin:0}
.copy{margin-top:var(--sp-2);margin-left:calc(-1 * var(--sp-3))}

.level{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:color-mix(in srgb,var(--c) 12%,var(--surface));font-weight:var(--fw-bold)}
.lamp{width:20px;height:20px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.level small{display:block;font-weight:var(--fw-regular);color:var(--muted);font-size:var(--fs-sm)}

.md h3,.md h4{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--primary);margin:var(--sp-5) 0 var(--sp-2);line-height:var(--lh-tight)}
.md h3:first-child,.md h4:first-child{margin-top:0}
.md p{margin:0 0 var(--sp-3)}
.md ul,.md ol{margin:0 0 var(--sp-3);padding-left:22px}
.md li{margin:var(--sp-1) 0}
.md code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:.92em}
.md > :last-child{margin-bottom:0}

.composer{display:flex;gap:var(--sp-2);align-items:flex-end;position:sticky;bottom:0;background:var(--bg);padding:var(--sp-3) 0;margin-top:var(--sp-2)}
/* Avant la première question (choix, fiche rapide pro) : la saisie suit la page au lieu de flotter par-dessus. */
#chatPanel.avec-choix .composer{position:static}
.composer textarea{flex:1;resize:vertical;min-height:52px;max-height:220px}
@media (max-width:420px){.composer .btn{padding:0 var(--sp-4)}}

/* aide débutants : pastilles de symptômes */
.help{background:var(--soft);border-radius:var(--r-md);margin:0 0 var(--sp-3)}
.help summary{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:var(--fw-semibold);color:var(--primary);border-radius:var(--r-md);min-height:var(--tap);display:flex;align-items:center}
.help .cats{padding:0 var(--sp-4) var(--sp-4)}
.cat-t{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin:var(--sp-4) 0 var(--sp-2);line-height:var(--lh-tight)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;background:var(--surface);border:1px solid transparent;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);cursor:pointer;text-align:left}
.chip:hover{border-color:var(--primary)}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.warn{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--red);color:var(--on-red);font-size:12px;font-weight:var(--fw-bold);flex:none}
.chip.danger[aria-pressed="true"]{background:var(--red);color:var(--on-red)}
.chip.danger[aria-pressed="true"] .warn{background:var(--on-red);color:var(--red)}
.help .legend-d{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-4) 0 0}
.danger-box{background:color-mix(in srgb,var(--red) 10%,var(--surface));border-left:4px solid var(--red);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);font-weight:var(--fw-bold);color:var(--red-ink);margin:0 0 var(--sp-3)}

/* fiche rapide pro */
.proform{display:grid;gap:var(--sp-3);background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);margin:0 0 var(--sp-3);box-shadow:var(--shadow)}
.proform h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0;line-height:var(--lh-tight)}
.proform textarea{resize:vertical;min-height:52px}

/* ---------- formulaires en grille (achat, garage) ---------- */
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-6);box-shadow:var(--shadow)}
.form .s2{grid-column:span 2}
.form .full{grid-column:1/-1}
.form .formbtns{grid-column:1/-1;display:flex;gap:var(--sp-2);flex-wrap:wrap}
@media (max-width:700px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}.form .s2{grid-column:1/-1}}
@media (max-width:420px){.form{padding:var(--sp-4);gap:var(--sp-3)}.form > div:has(> select){grid-column:1/-1}}

/* ---------- « Une erreur ? Une idée ? » ---------- */
.ct-types{border:0;margin:0 0 var(--sp-3);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ct-types legend{padding:0;margin-bottom:var(--sp-2)}
.ct-types label{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);border:1px solid var(--field-line);border-radius:var(--r-pill);cursor:pointer;font-size:var(--fs-sm)}
.ct-types input{position:absolute;opacity:0;width:1px;height:1px}
.ct-types label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:var(--fw-semibold)}
.ct-types label:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
#contactForm{display:grid;gap:var(--sp-3)}
.ct-merci{margin:0;padding:var(--sp-4);border-radius:var(--r-md);background:color-mix(in srgb, var(--green) 14%, transparent);color:var(--green-ink);font-weight:var(--fw-semibold)}
#contactForm textarea{resize:vertical;min-height:120px}
.rcontact{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);margin:0 0 var(--sp-3)}
.audience{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.audience caption{text-align:left;font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:0 0 var(--sp-2)}
@media (min-width:900px){.audience{grid-template-columns:repeat(3,1fr)}}
.rcontact p{margin:var(--sp-2) 0;white-space:pre-wrap}

/* ---------- J'achète : listes marque › modèle › motorisation ---------- */
.choix-autre{margin-top:var(--sp-2)}
select.field:disabled{opacity:.6;cursor:not-allowed}

/* ---------- J'achète › Vérifier le kilométrage ---------- */
.km-etapes{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4);margin-bottom:var(--sp-6)}
@media (max-width:860px){.km-etapes{grid-template-columns:minmax(0,1fr)}}
.km-etape{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow);min-width:0}
.km-etape h2{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0 0 var(--sp-3);line-height:var(--lh-tight)}
.km-etape p{margin:0 0 var(--sp-3)}
.km-num{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-sm)}
.km-doc label.btn{cursor:pointer}
.km-doc:focus-within label.btn{outline:3px solid var(--primary);outline-offset:2px}
.km-mec{max-width:260px;margin-bottom:var(--sp-4)}
.km-ligne{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,9fr) minmax(0,11fr) 44px;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.km-entete{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.km-ligne .field{min-width:0}
.km-ligne.lu .field{border-color:var(--accent)}
.km-retirer{width:44px;height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;font-size:22px;line-height:1}
.km-retirer:hover{background:var(--soft);color:var(--ink)}
@media (max-width:520px){
  .km-entete{display:none}
  .km-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
  .km-ligne [data-k=date]{grid-column:1/3;grid-row:1}
  .km-ligne .km-retirer{grid-column:3;grid-row:1}
  .km-ligne [data-k=km]{grid-column:1;grid-row:2}
  .km-ligne select{grid-column:2/4;grid-row:2}
}
.km-etape-large{grid-column:1/-1}
.km-usure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-5)}
@media (max-width:860px){.km-usure{grid-template-columns:minmax(0,1fr)}}
.km-usure fieldset{border:0;margin:0;padding:0;min-width:0}
.km-usure legend{font-weight:var(--fw-semibold);padding:0}
.km-usure .hint{margin:2px 0 var(--sp-2)}
.km-choix{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.km-choix label{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);border:1px solid var(--field-line);border-radius:var(--r-pill);font-size:var(--fs-sm);cursor:pointer;background:var(--surface)}
.km-choix input{position:absolute;opacity:0;width:1px;height:1px}
.km-choix input:checked + span{font-weight:var(--fw-semibold)}
.km-choix label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.km-choix label:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
.km-boutons{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.km-verdict{border-left:6px solid var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface));border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.km-verdict .vtitle{color:var(--ink)}
.km-verdict p{margin:var(--sp-1) 0 0}
.km-chiffres{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.km-chiffres strong{color:var(--ink)}
.val-chart.km-courbe .bad{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:5 4}
.val-chart.km-courbe .pt{fill:var(--c,var(--primary))}
.val-chart.km-courbe .origine{fill:var(--surface);stroke:var(--muted);stroke-width:2}
.km-mentions{font-size:var(--fs-sm)}
.km-mentions q{font-style:italic}
.km-note{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- rapport d'achat ---------- */
.verdict{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-5);align-items:center;margin-bottom:var(--sp-6)}
.verdict .md{grid-column:1/-1}
.score{font-size:64px;font-weight:var(--fw-bold);line-height:.9;color:var(--primary)}
.score small{font-size:var(--fs-xl);color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-2);justify-self:start;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--ink);background:color-mix(in srgb,var(--c) 14%,var(--surface))}
.tag::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.vtitle{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0 0 var(--sp-1);line-height:var(--lh-tight)}
.sect{margin:0 0 var(--sp-6)}
.sect h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--primary);margin:0 0 var(--sp-3);line-height:var(--lh-tight)}

.odo{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5) var(--sp-4);box-shadow:var(--shadow)}
.track{position:relative;height:56px;margin:var(--sp-2) 6px var(--sp-6)}
.track .rail{position:absolute;left:0;right:0;top:26px;height:6px;border-radius:3px;background:var(--soft)}
.track .done{position:absolute;left:0;top:26px;height:6px;border-radius:3px;background:var(--primary)}
.track .dot{position:absolute;top:21px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--c);border:2px solid var(--surface);cursor:pointer;padding:0}
.track .dot.maint{border-radius:3px}
.track .now{position:absolute;top:0;bottom:-6px;width:3px;margin-left:-1.5px;background:var(--primary)}
.track .now span{position:absolute;top:-4px;left:8px;white-space:nowrap;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.track .now.flip span{left:auto;right:8px}
.track .tick{position:absolute;top:40px;font-size:var(--fs-xs);color:var(--muted);transform:translateX(-50%);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px var(--sp-4);font-size:var(--fs-xs);color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:0}
.legend i.sq{border-radius:2px}
@media (max-width:480px){.track .tick:nth-of-type(even){display:none}}

.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.item{background:var(--surface);border-left:4px solid var(--c);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow)}
.item.flash{animation:flash 1.2s ease}
@keyframes flash{0%{box-shadow:0 0 0 4px var(--primary)}100%{box-shadow:var(--shadow)}}
.item .top{display:flex;justify-content:space-between;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;font-weight:var(--fw-bold)}
.item .km{font-weight:var(--fw-medium);color:var(--muted);font-size:var(--fs-sm)}
.item p{margin:var(--sp-1) 0 0}
.item .cost{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.group-label{font-weight:var(--fw-bold);margin:var(--sp-5) 0 var(--sp-2)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.box{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.box ul{margin:0;padding-left:20px}
.box li{margin:var(--sp-1) 0}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--primary)}
.checks label{cursor:pointer}
.checks input:checked + label{color:var(--muted);text-decoration:line-through}
.caveat{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- mon garage ---------- */
.cars{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:var(--sp-3)}
.car{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow)}
.car h3{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0;line-height:var(--lh-tight)}
.car .sub{color:var(--muted);margin:var(--sp-1) 0 var(--sp-3)}
.car .fiche{font-size:var(--fs-sm);margin:0 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--soft)}
.car .rowbtns{margin-left:calc(-1 * var(--sp-1))}
@media (max-width:420px){.car{padding:var(--sp-4)}}
.kmbox{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-4)}
.kmbox p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.kmbox strong{font-size:var(--fs-lg);color:var(--ink);margin-right:var(--sp-1)}
.kmpanel{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-4);margin:0 0 var(--sp-4)}
.kmpanel h4{font-size:var(--fs-md);font-weight:var(--fw-bold);margin:0 0 var(--sp-3)}
.kmform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--sp-3);align-items:end}
.kmform .err{grid-column:1/-1;margin:0;color:var(--red-ink);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.kmform .err:empty{display:none}
@media (max-width:480px){.kmform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kmform .btn{grid-column:1/-1}}
.kmlist{list-style:none;margin:var(--sp-4) 0 0;padding:0}
.kmlist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);padding:var(--sp-1) 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.kmlist li > span{white-space:nowrap}
.kmlist li > span:last-of-type{margin-left:auto;font-weight:var(--fw-semibold)}
.kmlist .kmtags{display:flex;flex-wrap:wrap;gap:var(--sp-1);width:100%}
.kmlist .kmtags:empty{display:none}
.kmlist .notes{width:100%;margin:0}
.kmlist .btn{padding:0 var(--sp-2)}
/* valeur indicative */
.val-hero{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-5);margin:var(--sp-5) 0 var(--sp-4)}
.val-hero .lbl{margin:0;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.val-range{margin:var(--sp-1) 0;font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--primary);font-variant-numeric:tabular-nums}
.val-prob{margin:0;font-size:var(--fs-lg)}
.val-hero .hint{margin-top:var(--sp-2)}
.val-expl{margin:0 0 var(--sp-5);max-width:65ch}
.val-f,.box .val-f{list-style:none;margin:0;padding:0}
.val-f li{display:flex;gap:var(--sp-2);align-items:baseline;padding:var(--sp-1) 0}
.val-f .sym{flex:none;width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);background:var(--soft);color:var(--primary)}
.val-chart{position:relative;margin:var(--sp-3) 0 var(--sp-2)}
.val-chart svg{display:block;width:100%;height:auto;overflow:visible}
.val-chart .grid{stroke:var(--line);stroke-width:1}
.val-chart .axis{fill:var(--muted);font-size:12px;font-family:var(--font)}
.val-chart .band{fill:var(--soft)}
.val-chart .line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.val-chart .pt{fill:var(--primary);stroke:var(--surface);stroke-width:2}
.val-chart .hit{fill:transparent;cursor:pointer}
.val-chart .hit:focus-visible{outline:none;stroke:var(--primary);stroke-width:2}
.val-tip{position:absolute;pointer-events:none;background:var(--surface-haute);color:var(--ink);border-radius:var(--r-sm);box-shadow:var(--shadow-haute);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);white-space:nowrap;transform:translate(-50%,calc(-100% - 12px))}
.val-hist{list-style:none;margin:var(--sp-3) 0 0;padding:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.val-hist li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.val-hist li span:last-child{font-weight:var(--fw-semibold)}

/* à venir : statuts (le rouge et l'orange gardent leur sens : en retard, bientôt) */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--soft);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--grey))}
.pill[data-s="alerte"]{--c:var(--red);background:var(--red);color:var(--on-red)}
.av[data-s="alerte"]{--c:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--surface))}
.pill[data-s="retard"]{--c:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red-ink)}
.pill[data-s="bientot"]{--c:var(--amber);background:color-mix(in srgb,var(--amber) 14%,var(--surface));color:var(--amber-ink)}
.pill[data-s="plus_tard"]{--c:var(--green)}
.pill[data-s="verifier"],.pill[data-s="surveiller"]{--c:var(--primary)}
.badge{display:inline-block;vertical-align:middle;margin-left:var(--sp-2);padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--red);color:var(--on-red);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.4}
.avl{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.av{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);border-left:4px solid var(--c,transparent)}
.av[data-s="retard"]{--c:var(--red)}
.av[data-s="bientot"]{--c:var(--amber)}
.av-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.av-cat{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-semibold)}
.av-t{display:block;font-size:var(--fs-lg);line-height:var(--lh-tight)}
.av-when{margin:var(--sp-1) 0 0;font-weight:var(--fw-semibold)}
.av-txt{margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.av .hint{margin-top:var(--sp-2)}
.av .rowbtns{margin:var(--sp-3) 0 0 calc(-1 * var(--sp-1))}
.formsec{grid-column:1/-1;font-size:var(--fs-md);font-weight:var(--fw-bold);margin:var(--sp-3) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line)}
@media (max-width:420px){.av{padding:var(--sp-4)}}

/* badge « Voiture bien suivie » */
.bsuivi{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);margin:0 0 var(--sp-5)}
.bsuivi.ok{background:var(--soft)}
.bsuivi h3{margin:0 0 var(--sp-1);font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.bsuivi .etoile{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:18px;flex:none}
.bsuivi .etoile.vide{background:var(--soft);color:var(--primary)}
.kmsuivi .etoile{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.02em}
.bsuivi .perdu{border-left:4px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,var(--surface));border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
.crit{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.crit li{display:grid;grid-template-columns:24px 1fr;gap:var(--sp-2);align-items:start}
.crit .coche{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;font-weight:var(--fw-bold);background:var(--soft);color:var(--muted)}
.crit .coche.ok{background:var(--primary);color:var(--on-primary)}
.crit strong{display:block}
.crit .d{color:var(--muted);font-size:var(--fs-sm)}
.crit .a{font-size:var(--fs-sm);color:var(--primary);font-weight:var(--fw-semibold)}
.pill.suivi{--c:var(--primary);color:var(--primary)}

/* page de vie d'une voiture */
.vhead{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin:0 0 var(--sp-4)}
.vphoto{width:168px;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--soft);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.vphoto img{width:100%;height:100%;object-fit:cover;display:block}
.vphoto svg{width:56%;height:auto;color:var(--primary);opacity:.7}
.vhead h2{font-size:var(--fs-2xl);margin:0;line-height:var(--lh-tight)}
.vhead h2:focus{outline:none}
.vhead .sub{color:var(--muted);margin:var(--sp-1) 0 var(--sp-2)}
.vhead .rowbtns{margin-left:calc(-1 * var(--sp-1))}
@media (max-width:480px){.vphoto{width:100%}}
.car .thumb{float:right;width:84px;aspect-ratio:4/3;border-radius:var(--r-md);object-fit:cover;margin:0 0 var(--sp-2) var(--sp-3)}
.car h3 .open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.car h3 .open:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
#garageIn.envoiture :is(#carnetView,#avenirView,#valeurView) > .back,
#garageIn.envoiture :is(#carnetView,#avenirView,#valeurView) .carnet-head h2,
#garageIn.envoiture :is(#carnetView,#valeurView) .carnet-head .sub{display:none}
.jalons{list-style:none;margin:0 0 var(--sp-5);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.jalons li{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--soft);color:var(--primary);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.jalons small{color:var(--muted);font-weight:var(--fw-regular)}
.frise{list-style:none;margin:0;padding:0 0 0 var(--sp-5);border-left:2px solid var(--line)}
.frise .annee{margin:var(--sp-5) 0 var(--sp-2) calc(-1 * var(--sp-5) - 1px);font-weight:var(--fw-bold);color:var(--primary);background:var(--bg);padding:2px 0}
.frise .annee:first-child{margin-top:0}
.ev{position:relative;padding:var(--sp-2) 0 var(--sp-3)}
.ev::before{content:"";position:absolute;left:calc(-1 * var(--sp-5) - 7px);top:15px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--field-line)}
.ev[data-t="entretien"]::before{border-color:var(--primary)}
.ev[data-t="jalon"]::before{background:var(--primary);border-color:var(--primary)}
.ev[data-t="achat"]::before,.ev[data-t="ajout"]::before{background:var(--soft);border-color:var(--primary)}
.ev .quand{color:var(--muted);font-size:var(--fs-xs)}
.ev .quoi{font-weight:var(--fw-semibold)}
.ev[data-t="jalon"] .quoi{color:var(--primary)}
.ev .det{color:var(--muted);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center}

/* carnet d'entretien */
.back{margin:0 0 var(--sp-3) calc(-1 * var(--sp-3))}
.carnet-head h2{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin:0;line-height:var(--lh-tight)}
.carnet-head h2:focus{outline:none}
.carnet-head .sub{color:var(--muted);margin:var(--sp-1) 0 var(--sp-2)}
.carnet-head .sum{margin:0 0 var(--sp-5);font-weight:var(--fw-semibold)}
.ents{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.ent{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.ent-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.ent-top strong{font-size:var(--fs-lg)}
.ent-top .cost{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.ent-meta{color:var(--muted);font-size:var(--fs-sm);margin:var(--sp-1) 0 0}
.ent-desc{margin:var(--sp-2) 0 0;white-space:pre-wrap}
.ent .rowbtns{margin:var(--sp-3) 0 0 calc(-1 * var(--sp-1))}
.check{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm)}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--primary)}
.file-now{font-size:var(--fs-sm);margin:var(--sp-1) 0 0}
input[type=file].field{padding:8px var(--sp-3)}
.empty{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-5);margin:0 0 var(--sp-4);color:var(--muted)}

/* ---------- compte (fenêtre) ---------- */
dialog.dlg{border:0;border-radius:var(--r-lg);background:var(--surface-haute);color:var(--ink);padding:var(--sp-6) var(--sp-5) var(--sp-5);width:min(440px,calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - 32px);box-shadow:0 12px 48px rgb(0 0 0 / .25)}
dialog.dlg::backdrop{background:var(--overlay)}
.dlg h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0 0 var(--sp-4);line-height:var(--lh-tight)}
.dlg form{display:grid;gap:var(--sp-3)}
.dlg .close{position:absolute;top:var(--sp-2);right:var(--sp-2);width:var(--tap);height:var(--tap);background:transparent;border:0;border-radius:var(--r-pill);font-size:24px;line-height:1;cursor:pointer;color:var(--muted)}
.dlg .close:hover{background:var(--soft)}
.dlg .err{color:var(--red-ink);font-weight:var(--fw-semibold);margin:0;font-size:var(--fs-sm)}
.dlg .err:empty{display:none}
.dlg .meta{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-4)}
.dlg .danger{border-top:1px solid var(--line);margin-top:var(--sp-5);padding-top:var(--sp-4)}
.dlg .danger summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--muted);font-size:var(--fs-sm)}
.dlg .danger form{margin-top:var(--sp-3)}

footer{margin-top:var(--sp-7);font-size:var(--fs-xs);color:var(--muted);padding-top:var(--sp-4);border-top:1px solid var(--line)}
@media (prefers-reduced-motion: reduce){.item.flash{animation:none}}
/* glossaire */
.gloss{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline dotted var(--primary);text-decoration-thickness:2px;text-underline-offset:3px;cursor:help;border-radius:2px}
.gloss:hover{color:var(--primary)}
.gloss[aria-expanded="true"]{background:var(--soft)}
.glosspop{position:absolute;z-index:60;background:var(--surface-haute);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-haute);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh)}
.glosspop strong{color:var(--primary);font-size:var(--fs-md)}
.glosspop p{margin:var(--sp-1) 0 var(--sp-2)}
.glosspop small{display:block;color:var(--muted);margin-top:var(--sp-1)}
.glosspied{display:flex;justify-content:space-between;gap:var(--sp-3)}
.glossliste{margin:0;display:grid;gap:var(--sp-3)}
.glossliste > div{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow)}
.glossliste dt{font-weight:var(--fw-bold);color:var(--primary)}
.glossliste dd{margin:var(--sp-1) 0 0}
.glossliste .var{color:var(--muted);font-size:var(--fs-xs)}
.glossliste > div:target, .glossliste > div.cible{outline:3px solid var(--primary)}
/* guide des prix */
.prixl{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:var(--sp-2)}
.prixl li{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-1) var(--sp-4);align-items:baseline}
.prixl .nom{font-weight:var(--fw-semibold)}
.prixl .nom small{display:block;font-weight:var(--fw-regular);color:var(--muted);font-size:var(--fs-xs)}
.prixl .val{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.prixl .val span{display:block;color:var(--muted);font-size:var(--fs-xs)}
.prixl .plus{grid-column:1/-1;font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:520px){.prixl li{grid-template-columns:1fr 1fr}.prixl .nom{grid-column:1/-1}.prixl .val{text-align:left}}
/* comparateur */
.cmpchoix{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-3)}
.cmpslot{display:flex;flex-direction:column;gap:var(--sp-2)}
.cmpactions{margin:0 0 var(--sp-4)}
#cmpOut .rowbtns .btn{max-width:100%;white-space:normal;text-align:left;height:auto;min-height:36px}
.cmpcartes{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--sp-3)}
.cmpcarte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.cmpcarte h3{margin:0;font-size:var(--fs-md);color:var(--primary)}.cmpcarte .hint{margin:0}
.cmpcarte dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3);margin:0}
.cmpcarte dl div{display:flex;flex-direction:column}.cmpcarte dt{font-size:var(--fs-xs,12px);color:var(--muted)}.cmpcarte dd{margin:0;font-weight:var(--fw-semibold);font-size:var(--fs-md)}
.cmpcarte .cmpsrc{margin:auto 0 0;font-size:var(--fs-sm);color:var(--muted)}.cmpcarte .btn{align-self:flex-start}
.cmpwrap .cmp{table-layout:fixed}.cmpwrap .cmp thead th:first-child{width:160px}
.cmp tr.cmp-rappels td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
@media (max-width:640px){
  .cmpcartes{grid-template-columns:1fr}
  .cmpwrap .cmp{min-width:0}.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmpwrap .cmp tbody th{position:static;width:auto;background:var(--soft);color:var(--primary);padding:var(--sp-2) var(--sp-3)}
  .cmpwrap .cmp td{border-bottom:1px solid var(--line)}.cmpwrap .cmp td::before{content:attr(data-label);display:block;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--muted);margin-bottom:2px}
  .cmpwrap{overflow:visible}
}
.tablewrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--surface)}
.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-sm)}
.cmp th,.cmp td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp thead th{font-size:var(--fs-md);color:var(--primary);background:var(--soft)}
.cmp tbody th{position:sticky;left:0;background:var(--surface);width:130px;color:var(--muted);font-weight:var(--fw-semibold)}
.cmp ul{margin:0;padding-left:var(--sp-4)}
/* marques et modèles */
.mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.mcarte{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.mcarte h3{margin:0;font-size:var(--fs-lg)}
.mcarte .pays{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-2)}
.mcarte ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.mcarte li button{background:var(--soft);border:0;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);min-height:36px;color:var(--primary);font-weight:var(--fw-semibold);cursor:pointer}
.mcarte li button:hover{background:var(--soft-hover)}
.mfiche h2{font-size:var(--fs-2xl);margin:0;line-height:var(--lh-tight)}
.mfiche h2:focus{outline:none}
.mfiche .sous{color:var(--muted);margin:var(--sp-1) 0 var(--sp-4)}
.mfiche .deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)}
.mfiche .bloc{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.mfiche .bloc h3{margin:0 0 var(--sp-2);font-size:var(--fs-md);color:var(--primary)}
.mfiche .bloc ul{margin:0;padding-left:var(--sp-5)}
.mfiche .gen{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-xl);color:var(--primary)}
.moto{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);margin:0 0 var(--sp-3)}
.moto summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;font-weight:var(--fw-bold);list-style:none}
.moto summary::-webkit-details-marker{display:none}
.moto summary::after{content:"▾";margin-left:auto;color:var(--muted)}
.moto[open] summary::after{content:"▴"}
.moto h4{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-sm);color:var(--primary)}
.moto ul{margin:0;padding-left:var(--sp-5);font-size:var(--fs-sm)}
.conseil{display:inline-flex;align-items:center;gap:6px;padding:2px var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--soft);color:var(--muted)}
.conseil.a_privilegier{background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green-ink)}
.conseil.a_eviter{background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red-ink)}
.panneli{margin:0 0 var(--sp-1)}
.rappels{border-left:4px solid var(--amber);background:color-mix(in srgb,var(--amber) 9%,var(--surface));border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0}
.rappels h4{margin-top:0}
.rappels ul{margin:0 0 var(--sp-2);padding-left:1.1em}
.rappels li{margin:0 0 var(--sp-2)}
.pill-rappel{display:inline-flex;align-items:center;margin-left:var(--sp-2);padding:2px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 14%,var(--surface))}
/* schéma interactif */
.sch{width:100%;height:auto;display:block;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.sch .sch-zone > *, .sch .sch-piece > :not(.sch-repere){fill:var(--soft);stroke:var(--primary);stroke-width:2;transition:fill .15s}
.sch .sch-zone{cursor:pointer;outline:none}
.sch .sch-zone:hover > *, .sch .sch-zone:focus-visible > *, .sch .sch-zone.survol > *{fill:color-mix(in srgb,var(--primary) 28%,var(--surface))}
.sch .sch-zone:focus-visible > *{stroke-width:4}
.sch .sch-vitre{fill:var(--surface) !important;opacity:.7}
.sch .sch-trait{fill:none !important;stroke:var(--primary);stroke-width:2}
.sch .sch-tube{fill:none !important;stroke-width:8 !important;stroke-linecap:round}
.sch .sch-tube-fin{fill:none !important;stroke-width:3 !important;stroke-dasharray:6 4}
.sch .sch-ressort, .sch .sch-ressort-fort{fill:none !important;stroke-width:4 !important;stroke-linejoin:round}
.sch .sch-ressort-fort{stroke-width:5 !important}
.sch .sch-pneu{fill:none !important;stroke:var(--ink) !important;stroke-width:12 !important}
.sch .sch-pneu-fort{fill:none !important;stroke:var(--ink) !important;stroke-width:26 !important;stroke-dasharray:4 2}
.sch .sch-zone:hover .sch-pneu, .sch .sch-zone:focus-visible .sch-pneu{stroke:var(--primary) !important}
.sch .sch-courroie{fill:none !important;stroke-width:6 !important}
.sch .sch-epais{fill:none !important;stroke-width:6 !important;stroke-linecap:round}
.sch .sch-epais-large{fill:none !important;stroke-width:12 !important;stroke-linecap:round}
.sch .sch-pointille{fill:none !important;stroke-dasharray:5 5}
.sch .sch-sol{stroke:var(--line);stroke-width:2}
.sch .sch-fantome{fill:none;stroke:var(--field-line);stroke-width:2;stroke-dasharray:6 5}
.sch .sch-fantome-trait{stroke:var(--field-line);stroke-width:3}
.sch .sch-tube-fond{stroke:var(--field-line);stroke-width:14;stroke-linecap:round}
.sch .sch-tube-fond-fin{fill:none;stroke:var(--field-line);stroke-width:3;stroke-dasharray:6 4}
.trouver{margin-top:var(--sp-4)}
.trouver > summary{list-style:none;display:inline-flex}
.trouver > summary::-webkit-details-marker{display:none}
.syslist{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 0;padding:0;list-style:none}
.syslist button{background:var(--soft);border:1px solid transparent;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);min-height:40px;color:var(--primary);font-weight:var(--fw-semibold);cursor:pointer}
.syslist button:hover{border-color:var(--primary)}
.sch .sch-legende{fill:var(--muted);font-size:13px;font-family:var(--font)}
.sch .sch-piece{cursor:pointer;outline:none}
.sch .sch-piece:hover > :not(.sch-repere), .sch .sch-piece:focus-visible > :not(.sch-repere), .sch .sch-piece.choisie > :not(.sch-repere){fill:color-mix(in srgb,var(--primary) 30%,var(--surface))}
.sch .sch-repere circle{fill:var(--primary);stroke:var(--surface);stroke-width:2}
.sch .sch-repere text, .sch .sch-badge text{fill:var(--on-primary);font:700 14px var(--font)}
.sch .sch-piece.alerte .sch-repere circle, .sch .sch-badge circle{fill:var(--amber)}
.sch .sch-piece.grave .sch-repere circle, .sch .sch-badge.grave circle{fill:var(--red)}
.sch .sch-badge text{fill:var(--on-red)}
.sch .sch-piece:focus-visible .sch-repere circle, .sch .sch-piece.choisie .sch-repere circle{stroke:var(--ink);stroke-width:3}
.sch .sch-piece:focus-visible .sch-repere circle{stroke-width:4}
.zliste{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-2)}
.zliste button, .pliste button{width:100%;text-align:left;display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);min-height:var(--tap);cursor:pointer;color:var(--ink)}
.zliste button:hover, .pliste button:hover, .pliste button[aria-current="true"]{background:var(--soft);border-color:var(--primary)}
.zliste small, .pliste small{color:var(--muted)}
.pliste{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-2)}
.pliste .num{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:var(--fw-bold);font-size:var(--fs-sm);flex:none}
.pliste .num.alerte{background:var(--amber);color:var(--on-red)}
.pliste .num.grave{background:var(--red);color:var(--on-red)}
.pliste .nom{flex:1}
.pfiche{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow);margin:var(--sp-4) 0 0}
.pfiche h4{margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-md);color:var(--primary)}
.pfiche h3{margin:0;font-size:var(--fs-xl)}
.pfiche h3:focus{outline:none}
.pfiche ul{margin:0;padding-left:var(--sp-5)}
.pfiche .pourvous{border-left:4px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,var(--surface));border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 0}
.pfiche .pourvous.grave{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.pfiche .vlies{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pfiche .vlies button{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--soft);border:0;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);min-height:36px;cursor:pointer;color:var(--ink);font-size:var(--fs-sm)}
.pfiche .vlies .vic{width:22px;height:22px}
/* avis de propriétaires */
.notesf{display:grid;gap:var(--sp-3)}
.notesf fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3)}
.notesf legend{float:left;min-width:170px;font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:0}
.etoiles{display:inline-flex;gap:2px}
.etoiles input{position:absolute;opacity:0;width:1px;height:1px}
.etoiles label{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--soft);color:var(--primary);font-weight:var(--fw-bold);cursor:pointer}
.etoiles input:checked + label{background:var(--primary);color:var(--on-primary)}
.etoiles input:focus-visible + label{outline:3px solid var(--primary);outline-offset:2px}
.pannesf{display:grid;gap:var(--sp-2)}
.pannesf .ligne{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--sp-2);align-items:end}
@media (max-width:520px){.pannesf .ligne{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pannesf .ligne > :first-child{grid-column:1/-1}}
.avl2{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.avcarte{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.avcarte .verif{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--green-ink);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.avcarte .ctx{color:var(--muted);font-size:var(--fs-sm);margin:var(--sp-1) 0 var(--sp-2)}
.avnotes{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);margin:0 0 var(--sp-2);padding:0;list-style:none}
.avnotes strong{color:var(--primary)}
.avcarte h4{margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}
.avcarte p{margin:var(--sp-1) 0 0;white-space:pre-wrap}
.synth{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-4)}
.synth .barres{display:grid;gap:var(--sp-1);margin:var(--sp-2) 0}
.synth .barre{display:grid;grid-template-columns:150px 1fr 36px;gap:var(--sp-2);align-items:center;font-size:var(--fs-sm)}
.synth .barre i{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.synth .barre i b{display:block;height:100%;background:var(--primary);border-radius:var(--r-pill)}
.sigform{display:grid;gap:var(--sp-2);background:var(--soft);border-radius:var(--r-md);padding:var(--sp-3);margin-top:var(--sp-2)}
/* identification par plaque ou carte grise */
.ident{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);margin:var(--sp-4) 0;display:grid;gap:var(--sp-3)}
.ident h3{margin:0;font-size:var(--fs-lg)}
.ident .ligne{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:end}
.ident .ligne > div{flex:1 1 200px}
.prerempli{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
/* pièces posées */
.posees{border:0;margin:0;padding:0}
.posees legend{font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:0;margin-bottom:var(--sp-1)}
.posee{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:var(--sp-2);align-items:end;margin:0 0 var(--sp-2)}
@media (max-width:620px){.posee{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.posee > :first-child{grid-column:1/-1}}
.posee-sug{grid-column:1/-1;margin:-4px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.posee-sug .link{margin-left:var(--sp-2)}
.ent .posees-l{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);font-size:var(--fs-sm)}
.prixreels{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}
/* partager ou vendre */
.tsec{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow);margin:0 0 var(--sp-5)}
.tsec > h3{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--primary);margin:0 0 var(--sp-2);line-height:var(--lh-tight)}
.tsec > h3:focus{outline:none}
.tsec > p{margin:0 0 var(--sp-3)}
.topts{border:0;margin:0 0 var(--sp-4);padding:0}
.topts legend{font-weight:var(--fw-bold);padding:0;margin:0 0 var(--sp-1)}
.topts ul{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.topts li{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.topts li:first-child{border-top:0;padding-top:0}
.topts .fstate{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;margin:var(--sp-1) 0 0 28px;font-size:var(--fs-sm)}
.topts q{color:var(--muted)}
.topts .pourquoi{background:var(--soft);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);margin:var(--sp-2) 0 0}
.avert{border-left:4px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,var(--surface));border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4)}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-4)}
.recap > div{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.recap h4{margin:0 0 var(--sp-1);font-size:var(--fs-md)}
.recap ul{margin:0;padding-left:var(--sp-5);font-size:var(--fs-sm)}
.lien{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;background:var(--soft);border-radius:var(--r-md);padding:var(--sp-3);margin:var(--sp-3) 0}
.lien input{flex:1 1 220px;min-width:0}
.code{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:.08em;color:var(--primary);font-variant-numeric:tabular-nums}
.plist{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.plist li{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--sp-2);font-size:var(--fs-sm)}
.noteform{display:grid;gap:var(--sp-2);background:var(--soft);border-radius:var(--r-md);padding:var(--sp-3);margin:var(--sp-2) 0}
.noteform .err{color:var(--red-ink);font-weight:var(--fw-semibold);margin:0;font-size:var(--fs-sm)}
.noteform .err:empty{display:none}
.ent .tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-2) 0 0}
.ent .modif{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-1) 0 0}
.recu{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-2) 0 0}
dialog.dlg.large{width:min(920px,calc(100vw - 2 * var(--gutter)));padding:var(--sp-6) var(--sp-4) var(--sp-4)}
.masque-zone{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-2);display:flex;justify-content:center;overflow:auto;max-height:62dvh}
.masque-zone canvas{max-width:100%;height:auto;touch-action:none;cursor:crosshair;background:#fff}
.masque-zone canvas:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.apercu-bandeau{background:var(--soft);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4);font-size:var(--fs-sm)}

/* ---------- recherche globale ---------- */
dialog.recherche{width:min(640px,calc(100vw - 2 * var(--gutter)));padding:var(--sp-4);align-self:start;margin-top:10vh}
dialog .rech-champ{display:flex;align-items:center;gap:var(--sp-3);border:1.5px solid var(--primary);border-radius:var(--r-pill);padding:0 var(--sp-4);min-height:52px;background:var(--champ)}
.rech-champ input{flex:1;min-width:0;border:0;background:transparent;font-size:17px;min-height:48px;outline:none}
.rech-champ input::-webkit-search-cancel-button{display:none}
.rech-champ .ic{color:var(--muted)}
#rechInfo{margin:var(--sp-3) var(--sp-2) 0}
.rech-groupe{margin-top:var(--sp-4)}
.rech-groupe h3{font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:12px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-2) var(--sp-1)}
.rech-groupe ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.rech-res{display:flex;gap:var(--sp-3);align-items:center;width:100%;background:var(--surface);border:2px solid transparent;border-radius:var(--r-md);padding:10px var(--sp-3);text-align:left;color:var(--ink);cursor:pointer}
.rech-res:hover{border-color:var(--soft-hover)}
.rech-res small{display:block;color:var(--muted);font-size:13px}
.rech-res .carre{width:36px;height:36px;border-radius:10px;flex:none}
.rech-res .carre .ic{width:20px;height:20px}
.rech-res .vic{width:36px;height:36px;flex:none}
.rech-res mark{background:color-mix(in srgb,var(--bronze) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:640px){dialog.recherche{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:var(--sp-3) var(--gutter)}}

/* ---------- tutoriel : bienvenue, visite guidée, bulles d'aide ---------- */
dialog.bienvenue{text-align:center;width:min(420px,calc(100vw - 2 * var(--gutter)))}
.bienvenue-logo{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin:0;color:var(--primary-hover)}
.bienvenue h2{font-weight:var(--fw-light);font-size:32px;color:var(--bronze);margin:var(--sp-4) 0 var(--sp-2)}
.bienvenue p{color:var(--muted);margin:0 0 var(--sp-5)}
.bienvenue .pilule{width:100%;margin-bottom:var(--sp-3)}
.bienvenue .hint{margin:var(--sp-1) 0 0}
/* Téléphone en paysage : tout tient sans défiler (logo retiré, espacements resserrés, boutons côte à côte) */
@media (max-height:520px){
  dialog.bienvenue{width:min(560px,calc(100vw - 2 * var(--gutter)));padding:var(--sp-4) var(--sp-5)}
  .bienvenue-logo{display:none}
  .bienvenue h2{font-size:var(--fs-xl);margin:0 0 var(--sp-1)}
  .bienvenue p{margin:0 0 var(--sp-3)}
  .bienvenue .pilule{width:calc(50% - var(--sp-2));margin:0 var(--sp-1) var(--sp-2)}
}
.pilule.pleine{background:var(--primary);color:var(--on-primary)}
.pilule.pleine:hover{background:var(--primary-hover)}
.pilule.contour{background:transparent;color:var(--primary);border:1.5px solid var(--line)}
.pilule.contour:hover{border-color:var(--primary)}
.revoir{margin:var(--sp-5) 0 0;text-align:center}
/* Visite : la fenêtre couvre l'écran sans fond ; le « trou » éclaire l'élément, son ombre géante assombrit le reste. */
dialog.visite{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
dialog.visite::backdrop{background:transparent}
.visite-trou{position:absolute;border-radius:var(--r-lg);box-shadow:0 0 0 200vmax var(--overlay);outline:3px solid var(--bronze);outline-offset:0;transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;pointer-events:none}
.visite-bulle{position:absolute;background:var(--surface-haute);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5) var(--sp-4);box-shadow:var(--shadow-haute);transition:left .25s ease, top .25s ease}
.visite-num{font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:12px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--bronze-ink);margin:0}
.visite-bulle h2{font-weight:var(--fw-bold);font-size:21px;line-height:var(--lh-tight);margin:var(--sp-1) 0 var(--sp-2)}
.visite-bulle p:not(.visite-num){margin:0 0 var(--sp-4);color:var(--muted);font-size:15px}
.points{display:flex;gap:6px;margin:0 0 var(--sp-4)}
.points i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.points i.on{width:22px;border-radius:4px;background:var(--primary)}
.visite-bt{display:flex;align-items:center;gap:var(--sp-2)}
.visite-bt .link{margin-left:auto;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.visite-trou, .visite-bulle{transition:none}}
/* Bulle d'aide : une seule fois par écran, dans le fil de la page (rien n'est caché dessous). */
.bulle-aide{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--soft);border-left:4px solid var(--bronze);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:15px}
.bulle-aide p{margin:0;flex:1 1 220px}
.bulle-aide strong{display:block;font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:12px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--bronze-ink)}

/* ---------- vue 3D des pièces ---------- */
.v3-entete{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.v3-entete h3{margin:0}
.v3-scene{position:relative;width:100%;aspect-ratio:16/10;max-height:64vh;border-radius:var(--r-lg);overflow:hidden;background:var(--scene-fond)}
@media (max-width:640px){.v3-scene{aspect-ratio:4/3}}
.v3-canvas{display:block;width:100%;height:100%;cursor:grab}
.v3-canvas:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:var(--r-lg)}
/* Chargement : une petite barre de progression (préparation, puis la voiture en %). */
.v3-attente{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);margin:0;color:var(--scene-discret);font-size:var(--fs-sm)}
/* Rayons X : un repère numéroté par zone, en losange de la couleur de la zone ; son nom au survol. */
.v3-reperes{position:absolute;inset:0;pointer-events:none}
.v3-repere{position:absolute;left:0;top:0;width:var(--tap);height:var(--tap);margin:-22px 0 0 -22px;border:0;padding:0;background:transparent;pointer-events:auto;cursor:pointer;display:grid;place-items:center}
.v3-repere i{position:absolute;inset:10px;transform:rotate(45deg);border:1.5px solid var(--c);background:var(--scene-panneau);border-radius:4px;transition:transform .15s}
.v3-repere span{position:relative;font-size:11px;font-weight:var(--fw-semibold);line-height:1;color:var(--scene-encre)}
.v3-repere:hover i,.v3-repere.on i{transform:rotate(45deg) scale(1.2);background:var(--c)}
.v3-repere:hover span,.v3-repere.on span{color:var(--scene-fond)}
.v3-repere::after{content:attr(data-nom);position:absolute;left:38px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:var(--fs-xs);color:var(--scene-encre);background:var(--scene-panneau);border:1px solid var(--scene-ligne);border-radius:var(--r-sm);padding:4px 8px;opacity:0;pointer-events:none;transition:opacity .15s}
.v3-repere:hover::after,.v3-repere:focus-visible::after{opacity:1}
@media (prefers-reduced-motion: reduce){.v3-repere i,.v3-repere::after{transition:none}}
.v3-attente progress{width:min(220px,60%);height:6px;border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--line);accent-color:var(--primary)}
.v3-attente progress::-webkit-progress-bar{background:var(--line);border-radius:var(--r-pill)}
.v3-attente progress::-webkit-progress-value{background:var(--primary);border-radius:var(--r-pill)}
.v3-attente progress::-moz-progress-bar{background:var(--primary);border-radius:var(--r-pill)}
/* Aperçu (mobile) : la page défile par-dessus ; un toucher ouvre le plein écran. */
.v3-ouvrir{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:var(--sp-3)}
.v3-ouvrir span{background:var(--surface-haute);color:var(--primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);box-shadow:var(--shadow-haute)}
.v3-plein-haut, .v3-choix{display:none}
.v3-scene.plein{position:fixed;inset:0;z-index:100;aspect-ratio:auto;max-height:none;width:100vw;height:100dvh;border-radius:0}
.v3-scene.plein .v3-ouvrir{display:none}
.v3-scene.plein .v3-plein-haut{display:flex;position:absolute;top:calc(var(--sp-3) + env(safe-area-inset-top,0px));left:var(--sp-3);right:var(--sp-3);gap:var(--sp-2);flex-wrap:wrap}
.v3-scene.plein #v3Fermer{box-shadow:var(--shadow-haute)}
.v3-scene.plein #v3Fermer .ic{width:18px;height:18px}
.v3-scene.plein .v3-choix{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));margin:0;background:var(--surface-haute);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);box-shadow:var(--shadow-haute);font-size:var(--fs-sm)}
html.v3-verrou, html.v3-verrou body{overflow:hidden}
/* Outils sous la vue (et non par-dessus) : la voiture reste entièrement visible, même sur un petit écran. */
.v3-outils{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.v3-outils .btn[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.v3-couleurs{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center;margin:var(--sp-3) 0}
.v3-couleurs button, .v3-autre{width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.v3-couleurs button::before{content:"";width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .2)}
.v3-couleurs button[aria-pressed="true"]::before{box-shadow:0 0 0 3px var(--surface-haute),0 0 0 5px var(--primary)}
.v3-autre input{width:30px;height:30px;border:0;padding:0;background:none;cursor:pointer}
.v3-visite{margin:0 0 var(--sp-4)}
.v3-sous{margin:var(--sp-4) 0 var(--sp-2)}
.v3-bascule{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-2)}
#v3Zones button[aria-pressed="true"]{border-color:var(--primary);background:var(--soft)}

/* ---------- documentation de la base (avec ou sans réponse de l'IA) ---------- */
.doc-alerte{background:color-mix(in srgb,var(--amber) 12%,var(--surface-haute));border-left:4px solid var(--amber);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-3);font-weight:var(--fw-medium)}
.doc-titre{font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:12px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--bronze-ink);margin:0 0 var(--sp-2)}
.doc-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.doc-liste > li > details{background:var(--surface-haute);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3)}
.doc-liste summary{cursor:pointer;font-weight:var(--fw-semibold);min-height:var(--tap);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}
.doc-liste details p, .doc-liste details ul{font-size:15px;margin:var(--sp-1) 0}
.doc-type{font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.doc-statut{font-size:12px;font-weight:var(--fw-semibold);border-radius:var(--r-pill);padding:1px 9px;background:var(--soft);color:var(--primary-hover)}
.doc-statut[data-s="verifie"]{background:color-mix(in srgb,var(--green) 14%,var(--surface-haute));color:var(--green-ink)}
.doc-rouler[data-r="non"]{color:var(--red-ink)} .doc-rouler[data-r="prudemment"]{color:var(--amber-ink)} .doc-rouler[data-r="oui"]{color:var(--green-ink)}
.rech-code{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-2)}
.rech-code h3{font-size:var(--fs-lg);margin:0 0 var(--sp-1)} .rech-code h4{margin:var(--sp-3) 0 var(--sp-1)}

/* ---------- accueil : présentation ---------- */
.ia-accueil{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-8);font-size:15px}
.ia-accueil .ic{color:var(--primary);width:28px;height:28px;margin-top:2px}
.ia-accueil strong{display:block;font-family:var(--font-titre);font-weight:var(--fw-medium);letter-spacing:var(--espace-titre);text-transform:uppercase;font-size:13px;color:var(--primary-hover);margin-bottom:var(--sp-1)}
.presentation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:center;margin:0 0 var(--sp-8)}
.presentation:nth-child(even) .presentation-ill{order:-1}
.presentation h3{font-family:var(--font-titre);font-weight:var(--fw-light);font-size:30px;line-height:1.15;color:var(--bronze);margin:0 0 var(--sp-2)}
.presentation p{color:var(--muted);margin:0 0 var(--sp-3)}
.presentation ul{margin:0 0 var(--sp-3);padding-left:1.1em;font-size:15px}
.presentation-ill{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);aspect-ratio:8/5;box-shadow:var(--shadow-haute)}
.presentation-ill img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.lien-fleche{background:none;border:0;padding:0;min-height:var(--tap);font-weight:var(--fw-semibold);color:var(--primary);cursor:pointer;font-size:var(--fs-md)}
.lien-fleche:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.presentation{grid-template-columns:1fr;gap:var(--sp-3);margin-bottom:var(--sp-7)}.presentation:nth-child(even) .presentation-ill{order:0}.presentation h3{font-size:26px}}
#accueilPanel .alerte{margin:0 0 var(--sp-6)}
/* Diaporama « Ce que fait Rétroviz » : 6 diapositives, onglets, flèches, glisser au doigt (défilement à aimantation). */
.diaporama{margin:0 0 var(--sp-7)}
.diapo-onglets{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;margin:0 0 var(--sp-4);padding:2px}
.diapo-onglets::-webkit-scrollbar{display:none}
.diapo-onglet{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm);cursor:pointer}
.diapo-onglet .ic{width:18px;height:18px}
.diapo-onglet:hover{color:var(--ink);border-color:var(--field-line)}
.diapo-onglet[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.diapo-cadre{position:relative;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.diapo-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-xl);overscroll-behavior-x:contain}
.diapo-piste::-webkit-scrollbar{display:none}
.diapo-piste .diapo{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:var(--sp-6) calc(var(--sp-6) + 28px);min-height:340px}
.diapo-piste .diapo:nth-child(even) .presentation-ill{order:0}
.diapo h3{font-size:34px}
.diapo p{font-size:var(--fs-md)}
.diapo .btn{margin-top:var(--sp-2)}
.diapo-num{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;color:var(--muted);margin:0 0 var(--sp-2) !important}
.diapo-fleche{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px;box-shadow:var(--shadow-haute)}
.diapo-fleche:hover{border-color:var(--field-line)}
.diapo-fleche:disabled{opacity:.35;cursor:default}
.diapo-fleche.prec{left:-22px} .diapo-fleche.suiv{right:-22px}
@media (max-width:1100px){.diapo-fleche.prec{left:6px} .diapo-fleche.suiv{right:6px}}
@media (max-width:760px){
  .diapo-piste .diapo{padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + 52px);min-height:0}
  .diapo h3{font-size:26px}
  .diapo-fleche{top:auto;bottom:var(--sp-4);transform:none}
  .diapo-fleche.prec{left:auto;right:64px} .diapo-fleche.suiv{right:var(--sp-4)}
}
@media (prefers-reduced-motion: reduce){.diapo-piste{scroll-behavior:auto}}


/* ---------- page de résultats ---------- */
.resultats{counter-reset:res;margin:0 0 var(--sp-3)}
.res-question{font-size:30px;margin-top:var(--sp-2)}
.res-bloc{margin:0 0 var(--sp-6)}
.res-titre{counter-increment:res;font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:13px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--bronze-ink);margin:0 0 var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.res-titre::before{content:counter(res);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:12px;letter-spacing:0}
.res-compte{font-family:var(--font);text-transform:none;letter-spacing:0;color:var(--muted);font-weight:var(--fw-regular)}
.essentiel{border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);background:var(--soft);border-left:6px solid var(--primary)}
.essentiel[data-n="ORANGE"]{background:color-mix(in srgb,var(--amber) 12%,var(--surface-haute));border-left-color:var(--amber)}
.essentiel[data-n="ROUGE"]{background:color-mix(in srgb,var(--red) 10%,var(--surface-haute));border-left-color:var(--red)}
.essentiel[data-n="VERT"]{background:color-mix(in srgb,var(--green) 10%,var(--surface-haute));border-left-color:var(--green)}
.essentiel .niv{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-lg);font-weight:var(--fw-semibold);margin:0 0 var(--sp-2)}
.essentiel .lampe{flex:none;width:16px;height:16px;border-radius:50%;background:var(--primary)}
.essentiel[data-n="ORANGE"] .lampe{background:var(--amber)} .essentiel[data-n="ROUGE"] .lampe{background:var(--red)} .essentiel[data-n="VERT"] .lampe{background:var(--green)}
.essentiel ol{margin:0;padding-left:1.2em}
.essentiel .src{font-size:13px;color:var(--muted);margin:var(--sp-2) 0 0}
.essentiel-vide{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:0;font-size:15px}
.bouton3d{display:flex;align-items:center;gap:var(--sp-4);width:100%;background:var(--surface);border:2px solid transparent;border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);text-align:left;cursor:pointer;color:var(--ink)}
.bouton3d:hover{border-color:var(--soft-hover)}
.bouton3d-ill{flex:none;width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--ic-3);color:#fff}
.bouton3d-ill .ic{width:30px;height:30px}
.bouton3d strong{display:block;color:var(--primary)}
.ia-etiquette{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--fw-semibold);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;background:var(--surface-haute);margin-bottom:var(--sp-2)}
.ia-etiquette .ic{width:15px;height:15px}
.ia-avert{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin:var(--sp-3) 0 0;padding-top:var(--sp-2)}
.rech-page{width:100%;margin-top:var(--sp-3)}

/* ---------- espace pro ---------- */
.lien-pro{font-family:var(--font-titre);font-weight:var(--fw-medium);font-size:12px;letter-spacing:var(--espace-titre);text-transform:uppercase;color:var(--primary-hover);background:none;border:1.5px solid var(--primary);border-radius:var(--r-pill);padding:0 14px;min-height:40px;white-space:nowrap;cursor:pointer}
.lien-pro:hover,.lien-pro[aria-current="page"]{background:var(--soft)}
@media (max-width:899px){.lien-pro{display:none}}
.lien-pro-bas{margin:var(--sp-6) 0 0;border-top:1px solid var(--line);padding-top:var(--sp-3)}
.compte-liens{display:grid;gap:var(--sp-2);margin:var(--sp-4) 0 0}
.compte-liens .btn{justify-content:flex-start;text-decoration:none}
.pro-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:var(--sp-5);align-items:start}
@media (max-width:899px){.pro-grille{grid-template-columns:minmax(0,1fr)}}
.pro-saisie{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);display:grid;gap:var(--sp-3)}
.pro-saisie .err:empty{display:none}
.pro-h{font-size:var(--fs-lg);margin:0}
.pro-veh{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--sp-2)}
.pro-veh .hint:empty{display:none}
.pro-veh .hint{margin:0}
.pro-veh-champ{display:flex;gap:var(--sp-2);min-width:0}
.pro-veh-champ .field{flex:1;min-width:0}
.seg{display:inline-flex;border:1px solid var(--field-line);border-radius:var(--r-sm);overflow:hidden;justify-self:start;max-width:100%}
.seg button{background:var(--champ);border:0;border-left:1px solid var(--line);padding:0 var(--sp-3);min-height:40px;font-size:14px;font-weight:var(--fw-semibold);color:var(--muted);cursor:pointer}
.seg button:first-child{border-left:0}
.seg button[aria-checked="true"]{background:var(--soft);color:var(--primary)}
.pro-vide{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.pro-vide ul{margin:var(--sp-2) 0 0;padding-left:1.1em;color:var(--muted)}
.pro-res .res-question{font-size:28px;margin-top:var(--sp-1)}
.pro-h3{font-size:var(--fs-md);margin:var(--sp-4) 0 var(--sp-2);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.estim{font-size:12px;font-weight:var(--fw-semibold);color:var(--bronze-ink);background:color-mix(in srgb,var(--bronze) 14%,var(--surface-haute));border-radius:var(--r-pill);padding:1px 8px}
.codes-interp{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.codes-interp .sens{font-size:15px;color:var(--muted)}
.essentiel .interp{margin:var(--sp-3) 0 0;padding-top:var(--sp-2);border-top:1px solid var(--line)}
.code-obd{font-family:ui-monospace,Consolas,monospace;color:var(--primary);font-weight:700}
.tableau{overflow-x:auto;border-radius:var(--r-md)}
.causes{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface-haute)}
.causes th,.causes td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.causes th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.valeurs td:nth-child(2){font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.connue{font-size:11px;font-weight:600;color:var(--primary-hover);background:var(--soft);border-radius:var(--r-pill);padding:1px 7px;white-space:nowrap}
.freq{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.freq-pts{display:inline-flex;gap:3px}
.freq-pts i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.freq[data-n="3"] .freq-pts i,.freq[data-n="2"] .freq-pts i:nth-child(-n+2),.freq[data-n="1"] .freq-pts i:first-child{background:var(--primary)}
.etapes-diag{counter-reset:d;list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2)}
.etapes-diag li{counter-increment:d;display:grid;grid-template-columns:28px 1fr;gap:var(--sp-3);background:var(--surface-haute);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:15px}
.etapes-diag li::before{content:counter(d);display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ic-1);color:#fff;font-weight:700;font-size:13px}
.liste-simple{margin:0;padding-left:1.1em}
.pro-suite{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.pro-suite .field{flex:1;min-width:0}
.sous-onglets{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.sous-onglets button{background:var(--surface);border:1px solid transparent;border-radius:var(--r-pill);min-height:40px;padding:0 var(--sp-3);font-weight:var(--fw-semibold);color:var(--muted);cursor:pointer}
.sous-onglets button[aria-selected="true"]{background:var(--soft);color:var(--primary);border-color:var(--primary)}
#biblioQ{margin:0 0 var(--sp-3)}
.biblio-filtres{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-2)}
.codes-l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--sp-2)}
.codes-l > li{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:14px}
.codes-l summary{cursor:pointer}
.codes-l ul{margin:var(--sp-1) 0;padding-left:1.1em}
.hist{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2)}
.hist li{display:flex;justify-content:space-between;gap:var(--sp-3);background:var(--surface);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:14px;align-items:center;flex-wrap:wrap}
.hist .rowbtns{margin:0}

/* Rapport de diagnostic : seul imprimé quand on le demande depuis l'espace pro */
#rapportImpression{display:none}
.a4{color:#14181F;background:#fff;font-family:var(--font);font-size:12.5px;line-height:1.45}
.a4-tete{display:flex;justify-content:space-between;align-items:center;color:#14181F;font-family:var(--font-titre);letter-spacing:.26em;font-weight:500;font-size:12px}
.a4-tete .logo-symbole{width:36px;height:36px}
.a4 h1{font-family:var(--font-titre);font-weight:300;font-size:26px;color:#8A4B00;margin:16px 0 2px}
.a4-sous{color:#555C6A;margin:0}
.a4 h2{font-family:var(--font-titre);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#7A4300;margin:18px 0 6px;break-after:avoid}
.a4 table{width:100%;border-collapse:collapse}
.a4 th,.a4 td{border-bottom:1px solid #E2DED6;padding:5px 4px;text-align:left;vertical-align:top}
.a4 th[scope="row"]{width:28%;font-weight:600}
.a4 tr{break-inside:avoid}
.a4 .pied{margin-top:26px;font-size:10.5px;color:#555C6A;border-top:1px solid #E2DED6;padding-top:8px}
@media print{
  body.impression-rapport > *:not(#rapportImpression){display:none !important}
  body.impression-rapport{background:#fff !important;margin:0 !important;padding:0 !important}
  body.impression-rapport #rapportImpression{display:block}
  @page{size:A4;margin:16mm 16mm}
}
.pro-veh legend{padding:0;font-weight:var(--fw-semibold);font-size:var(--fs-sm);margin-bottom:0}
/* Mobile : Modèle / Plaque / VIN sur toute la largeur, cibles tactiles de 44 px */
@media (max-width:599px){.pro-veh .seg{display:flex;justify-self:stretch}.pro-veh .seg button{flex:1;min-height:var(--tap)}}
#proTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
/* Petit écran : les trois onglets tiennent entiers (texte resserré) ; le défilement reste en secours si le texte est agrandi */
@media (max-width:420px){#proTabs{gap:0}#proTabs button{flex:1 1 auto;padding:var(--sp-2) var(--sp-1);font-size:var(--fs-sm)}}
/* En-tête chargé (Espace pro, et Relecture pour un administrateur) : le logo garde sa place, les entrées se resserrent. */
@media (min-width:900px){.logo{flex:none}}
@media (min-width:900px) and (max-width:1340px){.onglet{padding:0 8px}.hautdroite{gap:6px}}
@media (min-width:900px) and (max-width:1120px){.onglet{font-size:12px;letter-spacing:.12em;padding:0 6px}.lien-pro{padding:0 10px;letter-spacing:.12em}}

/* Relecture › Évaluation */
.eval-cas{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.eval-cas h4{margin:0 0 var(--sp-1)}
.eval-rep{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
.eval-rep summary{cursor:pointer}
.eval-texte{white-space:pre-wrap;font-family:var(--font);font-size:14px;background:var(--surface-haute);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);max-height:420px;overflow:auto}
.eval-note{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.eval-note .field{flex:1;min-width:200px}
.ia-mention{margin:0 0 var(--sp-3);font-size:13px}

/* ---------- Étoiles (note globale des avis) et profils publics ---------- */
.etoiles-note{display:inline-flex;color:var(--amber);font-size:20px;letter-spacing:1px;line-height:1}
.etoiles-note.petit{font-size:14px;margin-left:var(--sp-1)}
.etoiles-note .vide{color:var(--line)}
.avtete{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.avauteur{font-weight:var(--fw-semibold)}
button.avauteur{font-size:inherit}
.avmoyenne{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.badge-pro{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--bronze-ink);font-size:12px;font-weight:var(--fw-semibold);vertical-align:middle}
/* Choix de la note : cinq étoiles cliquables, au clavier avec les flèches (groupe de boutons radio). */
.note-globale{border:0;padding:0;margin:0}
.note-globale legend{font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.choix-etoiles{display:inline-flex;gap:2px;vertical-align:middle}
.choix-etoiles input{position:absolute;opacity:0;width:1px;height:1px}
.choix-etoiles label{display:inline-grid;place-items:center;width:44px;height:44px;font-size:32px;line-height:1;color:var(--line);cursor:pointer;border-radius:var(--r-sm);transition:color .12s, transform .12s}
.choix-etoiles label:hover{transform:scale(1.1)}
.choix-etoiles:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1),
.choix-etoiles:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2),
.choix-etoiles:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3),
.choix-etoiles:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4),
.choix-etoiles:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5){color:var(--amber)}
@media (hover:hover){
  .choix-etoiles:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
  .choix-etoiles:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
  .choix-etoiles:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
  .choix-etoiles:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
  .choix-etoiles:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5){color:var(--amber)}
}
.choix-etoiles input:focus-visible + label{outline:3px solid var(--primary);outline-offset:1px}
#n_globaleTxt{margin:0 0 0 var(--sp-2);font-weight:var(--fw-semibold)}
@media (prefers-reduced-motion:reduce){.choix-etoiles label{transition:none}.choix-etoiles label:hover{transform:none}}
/* Profil */
#au_profil{display:grid;gap:var(--sp-3)}
.me-profil{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0}
.me-profil summary{cursor:pointer;font-weight:var(--fw-semibold);min-height:32px;display:flex;align-items:center;gap:var(--sp-2)}
.me-profil summary .hint{margin:0;font-weight:var(--fw-regular, 400)}
.me-profil form{margin-top:var(--sp-3)}
.profil-tete{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.profil-tete h2{margin:0}
.profil-avatar{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--soft);color:var(--bronze-ink);font-size:28px;font-weight:var(--fw-bold)}
.profil-meta{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.profil-chiffres{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.profil-chiffres > div{flex:1 1 140px;background:var(--surface-haute, var(--surface));border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.profil-chiffres strong{display:block;font-size:24px;color:var(--bronze-ink)}
.profil-chiffres > div > span{font-size:var(--fs-sm);color:var(--muted)}



/* Fiche modèle : l'essentiel et les modèles du même type */
.essentiel{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5)}
.essentiel h3{margin:0 0 var(--sp-3);font-size:var(--fs-md);color:var(--primary)}
.essentiel dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-3)}
.essentiel dt{font-size:var(--fs-xs);color:var(--muted)}.essentiel dd{margin:0;font-weight:var(--fw-semibold)}
.essentiel p{margin:var(--sp-2) 0 0}
.similaires{list-style:none;padding:0;margin:0 0 var(--sp-5);display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-2)}
.similaires li{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* Guide d'occasion (L'argus) : avis de la génération, défauts de série par motorisation */
.avisguide{border-left:4px solid var(--primary);background:var(--surface);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3)}
.avisguide p{margin:0}.avisguide p+p{margin-top:var(--sp-1)}
.guideocc{margin:var(--sp-3) 0}.guideocc ul{margin:var(--sp-2) 0}.guideocc li{margin-bottom:var(--sp-2)}

/* Rapport d'achat : défauts de série selon l'année */
.defserie{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.defserie h3{margin-top:0}
h4.defg{margin:var(--sp-4) 0 var(--sp-2);padding-left:var(--sp-3);border-left:4px solid var(--c)}
details.defg{margin:var(--sp-3) 0}details.defg summary{cursor:pointer;font-weight:var(--fw-semibold);min-height:32px}
.defl{margin:0;padding-left:var(--sp-5)}.defl li{margin-bottom:var(--sp-2)}

/* Analyser une annonce : description collée par l'acheteur */
.desc-annonce textarea{min-height:8rem;resize:vertical;width:100%}
.desc-annonce #a_descBloc{margin-top:var(--sp-2)}

/* Origine du moteur (fiche d'une motorisation) */
.moto .origine{border-left:3px solid var(--accent, var(--amber));padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);margin:var(--sp-3) 0}
.moto .origine p{margin:var(--sp-1) 0}
.moto .origine ul.aussi{margin:var(--sp-1) 0;padding-left:1.1rem}
.moto .origine ul.aussi li{margin:4px 0;line-height:1.5}
.moto .origine ul.aussi .link{font-size:inherit}
.moto .origine details summary{cursor:pointer;font-size:var(--fs-sm)}

/* Voiture jumelle ou de même base (data/jumelles.json) */
.jumelle{border:1px solid var(--line, #d9d4c7);border-left:4px solid var(--accent);border-radius:10px;padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0 var(--sp-3)}
.jumelle p{margin:var(--sp-1) 0}
.achat-liste .src-ok{white-space:normal}

/* Accueil : recherche dans le bandeau et quatre tuiles d'action */
.recherche-accueil{justify-content:flex-start;gap:var(--sp-2);min-width:min(100%,420px);font-weight:var(--fw-regular, 400);color:var(--muted, #5B6472)}
.actions-accueil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin:0 0 var(--sp-3)}
.tuile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);text-align:left;background:var(--surface, #fff);border:1px solid var(--line);border-radius:var(--r-lg, 16px);padding:var(--sp-4);font:inherit;color:var(--ink);cursor:pointer;min-height:120px}
.tuile .ic{width:28px;height:28px;color:var(--accent-hover, #E08A12)}
.tuile strong{font-family:var(--font-titre);font-size:18px;line-height:1.2}
.tuile span{color:var(--muted, #5B6472);font-size:var(--fs-sm, 14px);line-height:1.35}
.tuile:hover{border-color:var(--accent)}
.lien-modeles{margin:0 0 var(--sp-7)}
@media (max-width: 820px){ .actions-accueil{grid-template-columns:repeat(2,minmax(0,1fr))} .tuile{min-height:0;padding:var(--sp-3)} .tuile strong{font-size:16px} }

/* « Ma voiture » sans compte */
.carte-vl{background:var(--surface, #fff);border:1px solid var(--line);border-radius:var(--r-lg, 16px);padding:var(--sp-4);margin:0 0 var(--sp-4)}
.carte-vl h3{margin:0}
.carte-vl .sub{margin:var(--sp-1) 0 var(--sp-3);color:var(--muted, #5B6472)}
.carte-vl h4{margin:var(--sp-4) 0 var(--sp-2)}
#garageOut .encart{margin-top:var(--sp-4)}

/* Index A-Z (marques, glossaire) : barre collée sous l'en-tête, défilable au doigt */
.az{position:sticky;top:52px;z-index:5;display:flex;gap:2px;overflow-x:auto;background:var(--bg);padding:var(--sp-2) 0;margin:0 0 var(--sp-3);scrollbar-width:none}
.az::-webkit-scrollbar{display:none}
.az a{flex:0 0 auto;min-width:32px;min-height:32px;display:grid;place-items:center;border-radius:8px;font-weight:var(--fw-medium, 500);color:var(--ink);text-decoration:none;background:var(--surface, #fff);border:1px solid var(--line)}
.az a:hover{border-color:var(--accent)}
.az-ancre{display:block;scroll-margin-top:120px}
.mcarte{scroll-margin-top:120px}

/* « Problème › Prendre une photo » (photo.js) */
.carte-photo{margin-top:var(--sp-3);width:100%;border-style:dashed}
.composer .icone{padding-inline:var(--sp-3);min-width:44px}
.composer .icone .ic{width:22px;height:22px}
.photo-res{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
@media (min-width:700px){.photo-res{grid-template-columns:200px minmax(0,1fr)}}
.photo-apercu{width:100%;max-height:320px;object-fit:contain;border-radius:var(--r-lg);background:var(--soft)}
.photo-res .essentiel{margin:var(--sp-3) 0}
.photo-sous{margin:var(--sp-4) 0 var(--sp-1);font-weight:var(--fw-semibold)}
.photo-res ul{margin:0;padding-left:1.2em}
.photo-res li{margin:var(--sp-1) 0}
.photo-garage{margin:0;font-style:italic}
.photo-pro{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:color-mix(in srgb,var(--amber) 12%,var(--surface-haute))}
.photo-pro .ic{flex:none;width:22px;height:22px;color:var(--amber)}
/* « Voir la pièce en 3D » */
.piece3d-scene{width:100%;aspect-ratio:1;max-height:60dvh;border-radius:var(--r-lg);background:radial-gradient(circle at 50% 40%,#2a2f38,#0e1218);display:grid;place-items:center;overflow:hidden;touch-action:none}
.piece3d-scene canvas{width:100%!important;height:100%!important;display:block}
.piece3d-scene .hint{color:#c9ced6}