/* assurancevoiture.org — feuille de style unique (~9 Ko, aucune dépendance externe) */
:root{
  --encre:#10202F; --papier:#F5F4EE; --blanc:#fff;
  --vert:#0B7A55; --vert-nuit:#0A4A36; --jaune:#EFB63B;
  --gris:#59616C; --ligne:#E2DFD3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:72rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--encre);background:var(--papier)}
img,svg{max-width:100%;height:auto}
a{color:var(--vert-nuit);text-underline-offset:3px}
a:hover{color:var(--vert)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* ---- En-tête ---- */
.site-head{background:var(--blanc);border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:3.75rem}
.logo{font-family:var(--serif);font-size:1.3rem;font-weight:700;text-decoration:none;color:var(--encre);letter-spacing:-.01em}
.logo b{color:var(--vert)}
.logo .dot{display:inline-block;width:.55em;height:.55em;background:var(--vert);border-radius:50%;margin-right:.4em;vertical-align:baseline}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:1.35rem;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--encre);font-size:.95rem;font-weight:500;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--vert);color:var(--vert-nuit)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--ligne);border-radius:.4rem;padding:.5rem .65rem;font-size:1.1rem;cursor:pointer;color:var(--encre)}
@media(max-width:56rem){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--ligne);margin:0}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem}
  .nav a{display:block;padding:.6rem 0;border-bottom:1px solid var(--ligne)}
}

/* ---- Héros ---- */
.hero{padding:3.5rem 0 2.75rem}
.hero .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
@media(max-width:56rem){.hero .wrap{grid-template-columns:1fr;gap:2rem}}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}
h1{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.12;letter-spacing:-.015em;margin:.5rem 0 1rem}
.souligne{background:linear-gradient(transparent 68%,var(--jaune) 68%,var(--jaune) 92%,transparent 92%)}
.chapo{font-size:1.15rem;color:var(--gris);max-width:38rem;margin:0 0 1.5rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:.5rem;padding:.75rem 1.3rem;border:2px solid var(--vert-nuit)}
.btn-plein{background:var(--vert-nuit);color:var(--blanc)}
.btn-plein:hover{background:var(--vert);border-color:var(--vert);color:var(--blanc)}
.btn-ligne{color:var(--vert-nuit);background:transparent}
.btn-ligne:hover{background:var(--blanc)}

/* ---- Signature : la vignette (carte verte) ---- */
.vignette{background:var(--blanc);border:2px dashed var(--vert);border-radius:.75rem;padding:1.5rem 1.5rem 1.25rem;position:relative}
.vignette .tampon{position:absolute;top:-0.85rem;left:1.25rem;background:var(--vert);color:var(--blanc);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:.25rem;transform:rotate(-2deg)}
.vignette h2,.vignette h3{margin-top:.25rem}
.vignette ul{margin:.5rem 0 0;padding-left:1.1rem}
.vignette li{margin:.45rem 0}
.vignette li::marker{color:var(--vert)}
.vignette .note{font-size:.85rem;color:var(--gris);margin:.9rem 0 0;border-top:1px solid var(--ligne);padding-top:.7rem}

/* ---- Sections ---- */
.section{padding:2.75rem 0;border-top:1px solid var(--ligne)}
.section.blanc{background:var(--blanc)}
h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 1rem}
h3{font-family:var(--serif);font-size:1.25rem;margin:1.75rem 0 .5rem}
.section p{max-width:46rem}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media(max-width:56rem){.deux-col{grid-template-columns:1fr}}

/* ---- Grilles de liens ---- */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none}
@media(max-width:56rem){.grille{grid-template-columns:1fr 1fr}}
@media(max-width:38rem){.grille{grid-template-columns:1fr}}
.grille a{display:block;background:var(--blanc);border:1px solid var(--ligne);border-left:4px solid var(--vert);border-radius:.5rem;padding:1rem 1.1rem;text-decoration:none;color:var(--encre);height:100%}
.grille a:hover{border-left-color:var(--jaune);background:#FDFCF8}
.grille strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.25rem}
.grille span{font-size:.9rem;color:var(--gris)}
.liste-liens{columns:3;column-gap:2.5rem;padding-left:1.1rem;margin:1rem 0 0}
@media(max-width:56rem){.liste-liens{columns:2}}
@media(max-width:38rem){.liste-liens{columns:1}}
.liste-liens li{margin:.4rem 0;break-inside:avoid}

/* ---- Tableaux ---- */
.tbl{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--ligne);border-radius:.5rem;overflow:hidden;font-size:.95rem;margin:1.25rem 0}
.tbl th{background:var(--encre);color:var(--blanc);text-align:left;padding:.7rem .9rem;font-weight:600}
.tbl td{padding:.7rem .9rem;border-top:1px solid var(--ligne);vertical-align:top}
.tbl tr:nth-child(even) td{background:#FAF9F4}
.tbl .oui{color:var(--vert-nuit);font-weight:700}
.tbl .non{color:#A33;font-weight:700}
.tbl-scroll{overflow-x:auto}

/* ---- Étapes ---- */
.etapes{list-style:none;counter-reset:e;padding:0;margin:1.5rem 0 0;max-width:46rem}
.etapes li{counter-increment:e;position:relative;padding:0 0 1.4rem 3.2rem}
.etapes li::before{content:counter(e);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;background:var(--vert-nuit);color:var(--blanc);font-weight:700;border-radius:50%;display:grid;place-items:center;font-size:.95rem}
.etapes li:not(:last-child)::after{content:"";position:absolute;left:1rem;top:2.4rem;bottom:.2rem;width:2px;background:var(--ligne)}
.etapes strong{font-family:var(--serif);font-size:1.05rem}

/* ---- FAQ ---- */
.faq details{background:var(--blanc);border:1px solid var(--ligne);border-radius:.5rem;margin:.6rem 0;max-width:46rem}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 1.1rem;list-style:none;position:relative;padding-right:2.5rem}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.75rem;font-size:1.3rem;color:var(--vert)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.1rem 1rem;margin:0;color:var(--gris)}

/* ---- Fil d'Ariane ---- */
.ariane{font-size:.85rem;color:var(--gris);padding:1rem 0 0}
.ariane a{color:var(--gris)}
.ariane .sep{margin:0 .4rem;color:var(--ligne)}

/* ---- Encadré conseil ---- */
.conseil{border-left:4px solid var(--jaune);background:var(--blanc);padding:1rem 1.25rem;border-radius:0 .5rem .5rem 0;max-width:46rem;margin:1.5rem 0}
.conseil strong{font-family:var(--serif)}

/* ---- Pied de page ---- */
.site-foot{background:var(--encre);color:#C7CDD4;margin-top:3rem;padding:3rem 0 2rem;font-size:.92rem}
.site-foot h3{color:var(--blanc);font-family:var(--serif);font-size:1rem;margin:0 0 .75rem}
.site-foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:56rem){.site-foot .cols{grid-template-columns:1fr 1fr}}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4rem 0}
.site-foot a{color:#C7CDD4;text-decoration:none}
.site-foot a:hover{color:var(--jaune)}
.site-foot .legal{border-top:1px solid #2A3A4A;margin-top:2.25rem;padding-top:1.25rem;font-size:.82rem;color:#8A94A0}
.site-foot .legal p{max-width:none}