/* Verikar — pages publiques des fiches voitures et moteurs */
:root{
  /* page claire, comme l'application */
  --nuit:#F3F2EE; --nuit2:#FFFFFF; --nuit3:#EFEDE7; --trait:#E3E1DA; --texte:#14161A; --mut:#5A616B; --doux:#2A2E35;
  --orange:#E07F0C; --vert:#11804D; --rouge:#C42227; --bleu:#2550B8;
  --f:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nuit);-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font-family:var(--f);color:var(--texte);background:var(--nuit);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cadre{max-width:1080px;margin:0 auto;padding-inline:32px}
@media (max-width:600px){.cadre{padding-inline:18px}}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* en-tête */
.tete{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:rgba(243,242,238,.92);border-bottom:1px solid var(--trait)}
@supports (backdrop-filter:blur(8px)){@media (hover:hover){.tete{background:rgba(243,242,238,.78);backdrop-filter:blur(14px)}}}
.tete-in{height:64px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo i{width:10px;height:10px;border-radius:5px;background:var(--orange);box-shadow:0 0 12px var(--orange)}
.logo b{font-stretch:120%;font-weight:800;font-size:20px;letter-spacing:-.025em}
.tete nav{display:flex;gap:4px;flex:1}
.tete nav a{color:var(--mut);text-decoration:none;font-weight:650;font-size:15px;padding:8px 10px;border-radius:9px}
.tete nav a:hover{color:var(--texte)}
.btn{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:12px;font-weight:750;font-size:15px;text-decoration:none;white-space:nowrap}
.btn-clair{background:#1EEBFF;color:#04161A;box-shadow:0 0 0 1px rgba(30,235,255,.6),0 8px 24px -8px rgba(30,235,255,.7)}
@media (max-width:720px){.tete nav{display:none}.tete-in{justify-content:space-between}}

/* fil d'Ariane et en-tête de page */
.fil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:26px 0 0;font-size:14px;color:var(--mut)}
.fil a{text-decoration:none}.fil a:hover{color:var(--texte)}
.fil i{font-style:normal;opacity:.6}
.entete{padding:28px 0 8px;max-width:820px}
.surtitre{margin:0 0 10px;color:var(--orange);font-weight:750;font-size:14px;letter-spacing:.02em}
h1{margin:0;font-stretch:115%;font-weight:850;letter-spacing:-.04em;line-height:1.02;font-size:clamp(34px,5.4vw,60px);text-wrap:balance}
.chapo{margin:16px 0 0;font-size:clamp(17px,2vw,20px);color:var(--doux);line-height:1.5}
.maj{margin:14px 0 0;font-size:14px;color:var(--mut)}

/* blocs */
.bloc{margin-top:56px}
h2{margin:0 0 16px;font-stretch:112%;font-weight:820;letter-spacing:-.03em;line-height:1.1;font-size:clamp(25px,3.2vw,34px);text-wrap:balance}
h3{margin:0;font-stretch:108%;font-weight:780;letter-spacing:-.015em;font-size:19px;line-height:1.25}
.bloc > h3{margin:26px 0 10px}
p{margin:0 0 12px}
.intro{font-size:clamp(17px,1.9vw,19px);color:#2A2E35;max-width:780px;line-height:1.65}
.mut{color:var(--mut)}
.note{margin-top:14px;font-size:14px;color:var(--mut)}
.aparte{color:var(--mut);font-size:.92em}
strong{color:var(--texte)}
.ref{font-size:.68em;line-height:1;margin-left:2px;white-space:normal}
.ref a{margin-top:2px}
.ref a{display:inline-block;min-width:1.5em;padding:1px 4px;margin-left:2px;border-radius:5px;background:var(--nuit3);color:var(--mut);text-decoration:none;text-align:center;font-weight:700}
.ref a:hover{color:var(--orange)}

/* cartes */
.cartes{display:grid;gap:12px}
.cartes.deux{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.cartes.trois{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.carte{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:var(--nuit2);border:1px solid var(--trait)}
.carte p{margin:0}
.carte-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.carte.lien{text-decoration:none;transition:border-color .2s,transform .2s}
.carte.lien:hover{border-color:#C9C5BA;transform:translateY(-2px)}
.suite{margin-top:auto;padding-top:6px;color:var(--orange);font-weight:700;font-size:14px}
.k{font-size:13px;font-weight:700;color:var(--mut)}
.essentiel b{font-stretch:108%;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.essentiel p{color:var(--doux);font-size:15px}
.chiffre b{font-stretch:110%;font-weight:820;font-size:24px;letter-spacing:-.02em;line-height:1.15}
.chiffre .mut{font-size:13.5px;line-height:1.5}
.chiffre.alerte{border-color:rgba(255,92,92,.45)}
.etoiles{color:var(--orange);letter-spacing:2px}.etoiles span{color:var(--trait)}
.pastille{flex:none;padding:4px 10px;border-radius:12px;background:rgba(255,165,61,.12);color:var(--orange);font-size:12.5px;font-weight:750;line-height:1.35;max-width:100%}
@media (max-width:560px){.carte-tete{flex-wrap:wrap}}
.puces{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--doux)}
.puces li::marker{color:var(--orange)}
.encadre{margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--nuit3);border-left:3px solid var(--orange)}
.encadre b{display:block;margin-bottom:4px}
.encadre p{margin:0;color:var(--doux)}

/* plis (défauts, rappels) */
.liste{display:grid;gap:8px}
.pli{border-radius:16px;background:var(--nuit2);border:1px solid var(--trait)}
.pli summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) 18px;grid-template-areas:"g t c" "g m c";gap:2px 12px;align-items:center;padding:16px 18px}
.pli summary::-webkit-details-marker{display:none}
.pli summary::after{content:"";grid-area:c;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s;justify-self:center}
.pli[open] summary::after{transform:rotate(-135deg)}
.pli .g{grid-area:g;align-self:start;margin-top:2px}
.pli-titre{grid-area:t;font-weight:750;font-size:16.5px;line-height:1.3}
.pli-meta{grid-area:m;font-size:13.5px;color:var(--mut)}
.pli-corps{padding:0 18px 16px;color:var(--doux)}
.pli-corps p:last-child{margin:0}
.cout{font-size:15px}
@media (max-width:560px){.pli summary{grid-template-columns:minmax(0,1fr) 18px;grid-template-areas:"g c" "t c" "m c";gap:6px 12px}.pli .g{justify-self:start}}
.g{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:750;white-space:nowrap}
.g::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.g-rouge{color:var(--rouge);background:rgba(255,92,92,.12)}
.g-orange{color:var(--orange);background:rgba(255,165,61,.12)}
.g-vert{color:var(--vert);background:rgba(47,213,132,.12)}
.g-gris{color:#5A616B;background:#EFEDE7}

/* statuts, lignes, étapes, coches */
.statuts{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.statuts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.statuts small{display:block;color:var(--mut);font-size:14px;line-height:1.45}
.lignes{display:grid;gap:8px}
.ligne{display:grid;gap:2px;padding:14px 18px;border-radius:14px;background:var(--nuit2);border:1px solid var(--trait)}
.ligne small{color:var(--mut)}
.etapes{margin:0;padding:0;list-style:none;counter-reset:e;display:grid;gap:10px}
.etapes li{counter-increment:e;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;color:var(--doux)}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,165,61,.12);color:var(--orange);font-weight:800}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.coches li{position:relative;padding:14px 18px 14px 50px;border-radius:14px;background:var(--nuit2);border:1px solid var(--trait);color:var(--doux)}
.coches li::before{content:"";position:absolute;left:18px;top:16px;width:18px;height:18px;border-radius:6px;border:2px solid #C9C5BA}

/* appel à l'analyse */
.colle-bloc{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:24px;border-radius:22px;background:linear-gradient(135deg,rgba(255,165,61,.13),rgba(255,165,61,.03) 60%),var(--nuit2);border:1px solid rgba(255,165,61,.3)}
.colle-titre{margin:0;font-stretch:112%;font-weight:830;font-size:24px;letter-spacing:-.025em;line-height:1.15}
.colle-sous{margin:6px 0 0;color:var(--doux);font-size:15.5px;line-height:1.5}
.colle{display:flex;gap:8px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--trait)}
.colle input{flex:1;min-width:0;min-height:50px;border:0;outline:0;background:transparent;color:#0E1013;font:inherit;font-size:16px;padding:0 12px}
.colle button{flex:none;min-height:50px;padding:0 22px;border:0;border-radius:12px;background:#FF9F2E;color:#0E1013;font:inherit;font-stretch:110%;font-weight:800;font-size:16px;cursor:pointer}
@media (max-width:760px){.colle-bloc{grid-template-columns:1fr;padding:20px}.colle-titre{font-size:21px}}
@media (max-width:420px){.colle{flex-direction:column}.colle button{width:100%}}

/* sources */
.sources ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--mut)}
.sources li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:baseline;scroll-margin-top:90px}
.sources li:target{color:var(--texte)}
.src-n{font-weight:800;color:var(--doux)}
.sources b{color:var(--doux)}
.sources a{color:var(--mut);overflow-wrap:anywhere}
.sources a:hover{color:var(--orange)}

/* pied */
.pied{margin-top:80px;padding:44px 0 56px;border-top:1px solid var(--trait);color:var(--mut)}
.pied-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.pied h4{margin:0 0 12px;color:var(--texte);font-size:15px}
.pied a{display:block;text-decoration:none;font-size:15px;padding:4px 0}
.pied a:hover{color:var(--texte)}
.pied p{margin:12px 0 0;font-size:15px;max-width:24em}
@media (max-width:760px){.pied-in{grid-template-columns:1fr 1fr}.pied-in > div:first-child{grid-column:1/-1}}
.cartes + p, .lignes + p, .cartes + .encadre{margin-top:14px}

/* page d'entrée des fiches : deux colonnes (voitures | moteurs), interrupteur sur téléphone */
.tete nav a.actif{color:var(--orange)}
.deux-colonnes{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.colonne{padding:24px;border-radius:22px;background:var(--nuit2);border:1px solid var(--trait)}
.colonne-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.colonne-tete h2{margin:0}
.colonne > .mut{margin:8px 0 0}
.groupe{margin:24px 0 8px;font-size:13px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.liens{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.liens a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n i" "s i";gap:1px 12px;align-items:center;padding:11px 12px;margin:0 -12px;border-radius:12px;text-decoration:none}
.liens a:hover{background:var(--nuit3)}
.liens b{grid-area:n;font-size:16px;font-weight:720}
.liens small{grid-area:s;color:var(--mut);font-size:13.5px;line-height:1.4}
.liens i{grid-area:i;font-style:normal;color:var(--orange);font-weight:800}
.bascule-fiches{display:none}
@media (max-width:820px){
  .bascule-fiches{position:sticky;top:72px;z-index:5;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--nuit3);border:1px solid var(--trait)}
  .bascule-fiches button{min-height:46px;border:0;border-radius:11px;background:transparent;color:var(--mut);font:inherit;font-weight:750;font-size:15px;cursor:pointer}
  .bascule-fiches button span{opacity:.7;font-weight:600}
  .bascule-fiches button[aria-selected="true"]{background:#14161A;color:#fff}
  .deux-colonnes{grid-template-columns:1fr;margin-top:14px}
  .deux-colonnes[data-vue="voitures"] #col-moteurs,.deux-colonnes[data-vue="moteurs"] #col-voitures{display:none}
  .colonne{padding:20px}
}
.fiches-mob{display:none;color:var(--orange);font-weight:750;font-size:15px;text-decoration:none;padding:8px 10px;margin-left:auto}
@media (max-width:720px){.fiches-mob{display:inline-flex}.tete-in{gap:8px}}
@media (max-width:420px){.btn-long{display:none}}

/* pages d'information (méthode, contact, légal) et 404 */
.info{max-width:860px}
.info .bloc{margin-top:40px}
.prose p,.prose li{color:var(--doux);font-size:16.5px}
.legal h2{font-size:20px;margin:30px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 10px}
.info a:not(.btn):not(.carte){color:var(--orange)}
.a-completer{display:inline-block;padding:0 8px;border-radius:6px;background:rgba(255,92,92,.14);color:var(--rouge);font-weight:700;font-size:.92em}
.poids{display:grid;gap:10px;margin:16px 0}
.poids div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 52px;gap:12px;align-items:center;color:var(--doux)}
.poids i{height:10px;border-radius:99px;background:var(--nuit3);position:relative;overflow:hidden}
.poids i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:99px;background:var(--orange)}
.poids b{text-align:right}
@media (max-width:560px){.poids div{grid-template-columns:minmax(0,1fr) 52px}.poids i{grid-column:1/-1;grid-row:2}}
.echelle{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.echelle li{display:grid;gap:8px;justify-items:start;padding:14px;border-radius:14px;background:var(--nuit2);border:1px solid var(--trait)}
@media (max-width:640px){.echelle{grid-template-columns:1fr 1fr}}
.carte .pastille{align-self:flex-start;margin-top:auto}
.contact{display:grid;gap:14px;margin-top:28px;max-width:640px}
.contact .deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.contact .deux{grid-template-columns:1fr}}
.contact label{display:grid;gap:6px;font-weight:700;font-size:14.5px}
.contact input,.contact select,.contact textarea{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:12px;border:1px solid var(--trait);background:var(--nuit2);color:var(--texte);font:inherit;font-weight:500;font-size:16px}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.contact .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:750}
.contact .btn:disabled{opacity:.6}
.contact .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.etat{margin:0;min-height:1.5em;color:var(--doux)}
.etat.ok{color:var(--vert)}.etat.err{color:var(--rouge)}
.introuvable .cartes{margin-top:28px}

/* lisibilité : texte plus grand et moins dense */
.bloc p,.pli-corps p,.puces li{font-size:16.5px;line-height:1.65}
.carte,.pli,.colonne,.coches li{box-shadow:0 1px 2px rgba(20,22,26,.04)}
.logo b{color:var(--texte)}
