/* epaviste-seine-et-marne.fr — feuille unique, mobile d'abord */
:root{
  --encre:#16202a;--texte:#2c3a47;--doux:#5b6b7a;--fond:#ffffff;--fond2:#f3f5f2;
  --vert:#1f6b4a;--vert-fonce:#164d36;--jaune:#f2c230;--bord:#dfe4de;
  --rayon:10px;--max:72rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:var(--texte);background:var(--fond);padding-bottom:4.5rem}
h1,h2,h3{color:var(--encre);line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:clamp(1.75rem,5vw,2.6rem);margin-top:.3em;letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,3.5vw,1.75rem)}
h3{font-size:1.15rem}
p,ul,ol{margin:0 0 1em}
a{color:var(--vert)}
a:hover{color:var(--vert-fonce)}
img{max-width:100%;height:auto}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 1.15rem}
.etroit{max-width:46rem}

/* En-tête */
.entete{border-bottom:1px solid var(--bord);background:#fff}
.entete .conteneur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.logo{font-weight:800;color:var(--encre);text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.logo span{color:var(--vert)}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-size:.95rem}
.nav a{text-decoration:none;color:var(--texte);padding:.35rem 0}
.nav a[aria-current]{color:var(--vert);font-weight:700}

/* Fil d'Ariane */
.ariane{font-size:.85rem;color:var(--doux);padding:.8rem 0 0}
.ariane ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.3rem}
.ariane li+li::before{content:"›";margin-right:.3rem}
.ariane a{color:var(--doux)}

/* Bandeau d'accroche */
.accroche{background:var(--fond2);border-bottom:1px solid var(--bord);padding:1.5rem 0 2.2rem}
.accroche .chapo{font-size:1.15rem;max-width:44rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.3rem}
.bouton{display:inline-block;background:var(--vert);color:#fff;font-weight:700;text-decoration:none;padding:.85rem 1.3rem;border-radius:var(--rayon);border:2px solid var(--vert)}
.bouton:hover{background:var(--vert-fonce);color:#fff}
.bouton.secondaire{background:#fff;color:var(--vert)}
.points{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.45rem}
.points li::before{content:"✓";color:var(--vert);font-weight:800;margin-right:.5rem}

/* Sections et cartes */
section{padding:.5rem 0 1rem}
.grille{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.carte{border:1px solid var(--bord);border-radius:var(--rayon);padding:1.1rem 1.2rem;background:#fff}
.carte h3{margin-top:0}
.etapes{counter-reset:e;list-style:none;padding:0}
.etapes li{counter-increment:e;position:relative;padding-left:2.8rem;margin-bottom:1.1rem}
.etapes li::before{content:counter(e);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;background:var(--vert);color:#fff;font-weight:800;display:grid;place-items:center}
.encadre{border-left:4px solid var(--vert);background:var(--fond2);padding:.9rem 1.1rem;border-radius:0 var(--rayon) var(--rayon) 0;margin:1.2rem 0}
.villes{columns:2 11rem;padding-left:1.1rem}
table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:.97rem}
th,td{border:1px solid var(--bord);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{background:var(--fond2)}
details{border:1px solid var(--bord);border-radius:var(--rayon);padding:.75rem 1rem;margin-bottom:.6rem}
summary{font-weight:700;color:var(--encre);cursor:pointer}
details[open] summary{margin-bottom:.5rem}
.source{font-size:.88rem;color:var(--doux)}

/* Informations à compléter par le propriétaire : volontairement visibles */
.a-completer{background:var(--jaune);color:#000;font-weight:700;padding:0 .3em;border-radius:3px}

/* Pied de page */
.pied{background:var(--encre);color:#cfd8df;margin-top:3rem;padding:2rem 0;font-size:.93rem}
.pied a{color:#fff}
.pied h2{color:#fff;font-size:1rem;margin:0 0 .6rem}
.pied ul{list-style:none;padding:0}

/* Barre d'appel fixe sur mobile */
.barre-appel{position:fixed;left:0;right:0;bottom:0;display:flex;gap:.5rem;padding:.6rem;background:#fff;border-top:1px solid var(--bord);box-shadow:0 -4px 14px rgba(0,0,0,.06);z-index:10}
.barre-appel .bouton{flex:1;text-align:center;padding:.75rem .5rem}
@media (min-width:48rem){
  body{padding-bottom:0}
  .barre-appel{display:none}
}

/* Téléphone dans l'en-tête */
.tel-entete{display:none;font-weight:800;color:#fff;background:var(--vert);text-decoration:none;padding:.45rem .9rem;border-radius:var(--rayon);white-space:nowrap}
.tel-entete::before{content:"☎ ";}
.tel-entete:hover{background:var(--vert-fonce);color:#fff}
.bouton.appel::before{content:"☎ ";}
.barre-appel .bouton::before{content:"☎ ";}
.pied a[href^="tel:"]{font-weight:700;white-space:nowrap}
@media (min-width:48rem){.tel-entete{display:inline-block}}

/* Photo de la dépanneuse et bandeau téléphone */
.visuel{margin:1.5rem 0 0}
.visuel-cadre{position:relative;border-radius:var(--rayon);overflow:hidden;box-shadow:0 10px 30px rgba(22,32,42,.18)}
.visuel img{display:block;width:100%;height:auto}
.visuel figcaption{font-size:.85rem;color:var(--doux);margin-top:.45rem;line-height:1.4}
.visuel figcaption a{color:var(--doux)}
@media (min-width:60rem){
  .accroche-grille{display:grid;grid-template-columns:minmax(0,1fr) 27rem;column-gap:2.5rem;align-items:start}
  .accroche-grille>*{grid-column:1}
  .accroche-grille>.visuel{grid-column:2;grid-row:1 / span 4;margin-top:.6rem}
}