/* Design "urgence" : percutant, gros boutons, contraste fort. CSS pur, ultra-léger, mobile-first. */
:root{
  --vert:#1f5132;--vert-fonce:#0f2e1b;--orange:#e8530e;--orange-fonce:#c4400a;
  --gris:#2b2b2b;--gris-clair:#f5f4f0;--blanc:#fff;--jaune:#ffd23f;
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--gris);line-height:1.6;font-size:17px;background:var(--blanc)}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert)}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1rem}

/* Barre d'appel : très visible, pulsation douce */
.barre-appel{position:sticky;top:0;z-index:100;background:var(--orange);color:#fff;text-align:center;padding:.45rem .7rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:.8rem;line-height:1.3}
.barre-appel a{color:#fff;text-decoration:none;font-size:.9rem;display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .barre-appel{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{background:var(--orange)}50%{background:var(--orange-fonce)}}
}

header{background:var(--vert-fonce);color:#fff;padding:.6rem 0}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.3rem}
header .logo{font-size:1rem;font-weight:900;color:#fff;text-decoration:none}
header .logo span{color:var(--jaune)}
nav{width:100%;display:flex;flex-wrap:wrap;gap:.35rem .8rem;margin-top:.4rem}
nav a{color:#fff;font-size:.8rem;text-decoration:none}
nav a:hover{color:var(--jaune)}

/* Réassurance : barre jaune contrastée, repère de confiance */
.reassurance{background:var(--jaune);color:var(--vert-fonce);padding:.5rem 0;font-weight:700}
.reassurance .wrap{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;text-align:left}
.reassurance .item{font-size:.72rem;line-height:1.2}
.reassurance .item b{display:block;font-size:.78rem}

/* HERO percutant */
.hero{background:linear-gradient(rgba(15,46,27,.86),rgba(15,46,27,.92)),url('../img/hero.jpg') center/cover;color:#fff;padding:1.8rem 1rem;text-align:center}
.hero h1{font-size:1.4rem;line-height:1.2;margin-bottom:.7rem;max-width:820px;margin-inline:auto;font-weight:900}
.hero p{font-size:.95rem;max-width:660px;margin:0 auto 1.2rem;opacity:.95}
.hero-btns{display:flex;flex-direction:column;gap:.6rem;max-width:420px;margin:0 auto}

/* GROS boutons */
.btn{display:block;background:var(--orange);color:#fff!important;padding:.85rem 1.2rem;border-radius:8px;font-weight:800;font-size:1rem;text-decoration:none!important;text-align:center;box-shadow:0 4px 0 var(--orange-fonce);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-fonce)}
.btn-tel{background:var(--jaune);color:var(--vert-fonce)!important;box-shadow:0 4px 0 #d9ad1f}
.btn-tel:active{box-shadow:0 1px 0 #d9ad1f}

section{padding:1.8rem 0}
section h2{color:var(--vert-fonce);font-size:1.3rem;margin-bottom:1rem;font-weight:800;line-height:1.3}
section h3{color:var(--vert);font-size:1.05rem;margin:1.1rem 0 .5rem;font-weight:700}
section p{margin-bottom:1rem}
.alt{background:var(--gris-clair)}

.grille{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.5rem}
.carte{background:#fff;border:1px solid #e4e2db;border-left:5px solid var(--orange);border-radius:8px;padding:1.4rem;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.carte h3{margin-top:0}
.carte a{font-weight:700;text-decoration:none}

ul.liste{margin:1rem 0 1rem 1.3rem}
ul.liste li{margin-bottom:.5rem}

.urgence{background:#fff2e8;border-left:5px solid var(--orange);padding:1.1rem 1.3rem;margin:1.6rem 0;border-radius:0 8px 8px 0;font-size:1.05rem}
.urgence a{font-weight:800}

.faq dt{font-weight:800;color:var(--vert-fonce);margin-top:1.3rem;font-size:1.05rem}
.faq dd{margin:.4rem 0 0}

.zones-liste{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}
.zones-liste a{background:#fff;border:2px solid var(--vert);color:var(--vert)!important;padding:.85rem;border-radius:8px;text-align:center;font-weight:800;text-decoration:none}
.zones-liste a:hover{background:var(--vert);color:#fff!important}

/* CTA final + formulaire */
.cta-final{background:var(--vert-fonce);color:#fff;text-align:center;padding:3.2rem 1rem}
.cta-final h2{color:#fff;font-size:1.9rem}
.cta-final p{margin-bottom:1.6rem;opacity:.95;font-size:1.1rem}
.cta-final a{color:var(--jaune)}

.form-contact{max-width:540px;margin:1.5rem auto 0;text-align:left;background:#fff;padding:1.6rem;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.form-contact label{display:block;font-weight:700;color:var(--vert-fonce);margin:.9rem 0 .35rem}
.form-contact input,.form-contact select,.form-contact textarea{width:100%;padding:.85rem;border:2px solid #ccc;border-radius:6px;font-size:1rem;font-family:inherit;background:#fff;color:var(--gris)}
.form-contact input:focus,.form-contact select:focus,.form-contact textarea:focus{outline:none;border-color:var(--orange)}
.form-contact textarea{min-height:110px;resize:vertical}
.form-contact .btn{width:100%;border:none;cursor:pointer;margin-top:1.3rem}
.form-note{font-size:.85rem;color:#666;margin-top:.7rem;text-align:center}

footer{background:#0a1d12;color:#cfd8d0;padding:2.2rem 1rem;font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:1fr;gap:1.3rem}
footer h4{color:#fff;margin-bottom:.5rem}
footer a{color:var(--jaune)}
.fil{font-size:.85rem;color:#7a8a7f;padding:.9rem 0}
.fil a{color:#7a8a7f}

/* fil d'Ariane interne aux pages */
section .fil{color:#888;margin-bottom:.5rem;padding:0}
section .fil a{color:#888}

@media(min-width:700px){
  .barre-appel{padding:.7rem 1rem;font-size:1.05rem}
  .barre-appel a{font-size:1.2rem}
  header{padding:.9rem 0}
  header .logo{font-size:1.3rem}
  nav{width:auto;margin-top:0;gap:0}
  nav a{margin-left:1rem;font-size:.95rem}
  .reassurance .wrap{grid-template-columns:repeat(4,1fr);text-align:center}
  .reassurance .item{font-size:.9rem}
  .reassurance .item b{font-size:1rem}
  .hero{padding:3.5rem 1rem}
  .hero h1{font-size:2.9rem;margin-bottom:1rem}
  .hero p{font-size:1.2rem;margin-bottom:2rem}
  .hero-btns{flex-direction:row;max-width:none;justify-content:center;gap:.8rem}
  .hero-btns .btn{min-width:260px}
  .btn{padding:1.15rem 1.5rem;font-size:1.25rem}
  section{padding:2.8rem 0}
  section h2{font-size:1.7rem}
  section h3{font-size:1.2rem}
  .grille{grid-template-columns:1fr 1fr}
  .zones-liste{grid-template-columns:repeat(4,1fr)}
  footer .wrap{grid-template-columns:repeat(3,1fr)}
}