/* Rubrique Guides & conseils — JJAMILES (reprend la charte du site) */
:root{
  --vert:#123328; --vert-2:#1D4A3B; --laiton:#C2A15A; --laiton-2:#D6B874;
  --bg:#F4F5F2; --surface:#FFFFFF; --texte:#16201C; --texte-2:#56625C; --ligne:#D5D9D2; --doux:#E8EBE6;
  --sombre:#0D221B; --sur-sombre:#EEF1EC; --sur-sombre-2:#A9B8B0;
  --r-grand:22px; --r:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0F1714;--surface:#16211C;--texte:#E9ECE7;--texte-2:#A2AFA8;--ligne:#2A3732;--doux:#1B2722}
}
:root[data-theme="dark"]{--bg:#0F1714;--surface:#16211C;--texte:#E9ECE7;--texte-2:#A2AFA8;--ligne:#2A3732;--doux:#1B2722}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--texte);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--laiton);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px,100% - 2rem);margin-inline:auto}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.015em}
p{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.35rem;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s}
.btn-laiton{background:var(--laiton);color:#15201B}
.btn-laiton:hover{background:var(--laiton-2)}
.btn-ligne{border-color:currentColor;color:inherit}
.btn-ligne:hover{background:rgba(127,127,127,.12)}

/* En-tête */
header{position:sticky;top:0;z-index:30;background:rgba(13,34,27,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--sur-sombre);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem}
.logo{font-weight:900;font-variation-settings:"wdth" 125;font-size:1.3rem;letter-spacing:.03em;text-decoration:none}
.logo span{color:var(--laiton)}
.nav ul{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;color:var(--sur-sombre-2)}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--sur-sombre)}
.nav .btn{min-height:42px;padding:.55rem 1.1rem}
@media (max-width:900px){.nav ul{display:none}}

/* Bandeau de page */
.bandeau{background:var(--sombre);color:var(--sur-sombre);padding:3.5rem 0 3rem;position:relative;overflow:hidden}
.bandeau::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 85% 20%,rgba(194,161,90,.16),transparent 70%)}
.bandeau .wrap{position:relative}
.fil{font-size:.9rem;color:var(--sur-sombre-2);margin-bottom:1.4rem}
.fil a{text-decoration:none}
.fil a:hover{text-decoration:underline}
.bandeau h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;font-variation-settings:"wdth" 116;max-width:22ch}
.chapo{margin-top:1.2rem;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--sur-sombre-2);max-width:60ch}
.meta{margin-top:1.6rem;font-size:.92rem;color:var(--sur-sombre-2);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.meta b{color:var(--sur-sombre);font-weight:600}

/* Accueil de la rubrique */
.liste{padding:3.5rem 0 5rem}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-grand);padding:1.8rem;display:flex;flex-direction:column;gap:.9rem;text-decoration:none;transition:transform .25s,box-shadow .25s}
.carte:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(13,34,27,.45)}
.etiquette{align-self:flex-start;font-size:.8rem;font-weight:600;color:var(--sombre);background:var(--laiton);padding:.2rem .7rem;border-radius:999px}
.carte h2{font-size:1.35rem;font-weight:700;font-variation-settings:"wdth" 108}
.carte p{color:var(--texte-2)}
.carte .lire{margin-top:auto;font-weight:600;text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:5px;text-decoration-thickness:2px}

/* Article */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4rem;padding:3.5rem 0 4rem;align-items:start}
@media (max-width:980px){.article{grid-template-columns:1fr;gap:2.5rem}}
.texte{max-width:72ch;min-width:0}
.texte h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;font-variation-settings:"wdth" 112;margin:2.8rem 0 1rem}
.texte h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .6rem}
.texte p{margin:0 0 1.1rem}
.texte ul,.texte ol{margin:0 0 1.2rem;padding-left:1.3rem}
.texte li{margin-bottom:.5rem}
.texte li::marker{color:var(--laiton);font-weight:700}
.texte a{text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:4px;text-decoration-thickness:2px}
.texte strong{font-weight:700}
.resume{background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--laiton);border-radius:var(--r);padding:1.3rem 1.5rem;margin:0 0 2rem}
.resume p{margin:0}
.encadre{background:var(--doux);border-radius:var(--r);padding:1.3rem 1.5rem;margin:1.5rem 0}
.encadre p:last-child{margin:0}
.tableau{overflow-x:auto;margin:1.2rem 0 1.6rem;border:1px solid var(--ligne);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.97rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--ligne);vertical-align:top}
th{font-weight:700;background:var(--doux)}
tr:last-child td{border-bottom:0}
.etapes{counter-reset:pt;list-style:none;padding:0!important}
.etapes>li{counter-increment:pt;position:relative;padding:0 0 1.2rem 3.2rem;margin:0 0 1.2rem;border-bottom:1px solid var(--ligne)}
.etapes>li::before{content:counter(pt);position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--vert);color:var(--laiton);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.etapes>li:last-child{border-bottom:0}
.etapes h3{margin:.2rem 0 .4rem}
.etapes p{margin:0}

.faq{margin-top:2.8rem}
details{border-bottom:1px solid var(--ligne)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-weight:600;font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--laiton);font-size:1.5rem;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 1.2rem;color:var(--texte-2)}

/* Colonne d'appel */
.aside{position:sticky;top:96px;display:grid;gap:1rem}
@media (max-width:980px){.aside{position:static}}
.appel{background:var(--vert);color:var(--sur-sombre);border-radius:var(--r-grand);padding:1.7rem;display:grid;gap:.9rem}
.appel h2{font-size:1.3rem;font-weight:800;font-variation-settings:"wdth" 110}
.appel p{color:var(--sur-sombre-2);font-size:.97rem}
.appel .btn-ligne{color:var(--sur-sombre)}
.appel small{color:var(--sur-sombre-2);font-size:.82rem;line-height:1.45}
.sommaire{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-grand);padding:1.4rem 1.6rem}
.sommaire p{font-weight:700;margin-bottom:.6rem}
.sommaire ol{margin:0;padding-left:1.1rem;font-size:.95rem;color:var(--texte-2)}
.sommaire li{margin-bottom:.35rem}
.sommaire a{text-decoration:none}
.sommaire a:hover{color:var(--texte);text-decoration:underline}

/* Bas d'article */
.suite{background:var(--surface);border-top:1px solid var(--ligne);padding:3.5rem 0}
.suite h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;margin-bottom:1.5rem}

footer{background:#081611;color:var(--sur-sombre-2);padding:2.5rem 0 6rem;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer a{color:var(--sur-sombre)}
@media (min-width:901px){footer{padding-bottom:2.5rem}}

.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:.6rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(13,34,27,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.barre-mobile .btn{flex:1}
.barre-mobile .btn-ligne{color:var(--sur-sombre)}
@media (max-width:900px){.barre-mobile{display:flex}}

/* Véhicule en stock dans un article */
.stock-art{margin-top:2.6rem}
.vstock{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:1.2rem;align-items:center;background:var(--vert);color:var(--sur-sombre);border-radius:var(--r-grand);overflow:hidden;text-decoration:none!important;margin-top:1rem}
.vstock img{width:100%;height:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.vstock span{display:grid;gap:.3rem;padding:1rem 1.2rem 1rem 0}
.vstock small{color:var(--laiton);font-weight:600;font-size:.85rem}
.vstock b{font-size:1.2rem;font-weight:800;font-variation-settings:"wdth" 110;line-height:1.2}
.vstock em{font-style:normal;color:var(--sur-sombre-2);text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:4px}
.vstock:hover b{color:var(--laiton-2)}
@media (max-width:560px){.vstock{grid-template-columns:1fr}.vstock span{padding:0 1.2rem 1.2rem}}