:root{
  --bg:#ffffff; --bg-cream:#faf6f2; --ink:#24262b;
  --text:#303137; --muted:#6f7178; --brand:#b1432e; --brand-600:#7e2c1d;
  --blue:#2b2e34; --blue-700:#1c1e22; --yellow:#b1432e; --border:#e0d8d1;
  --line-dark:#3a3d44; --sp:clamp(56px,7vw,112px); --maxw:1520px; --img-radius:0px; --bg-sand:#f4eee9;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.62;font-size:clamp(16px,1.05vw,19px);-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Baloo 2','Bricolage Grotesque',sans-serif;line-height:1.12;margin:0;color:var(--ink);letter-spacing:-0.01em;font-weight:800;}
p{margin:0;}
img{display:block;max-width:100%;}
a{color:inherit;}
strong{font-weight:700;}
ul{margin:0;padding:0;list-style:none;}
summary{outline:none!important;border:0!important;cursor:pointer;list-style:none;}
summary::-webkit-details-marker{display:none;}
summary:focus,summary:focus-visible{outline:none!important;}

/* CTA — un style central reutilise partout (hover bake), pas 5 variantes */
.cta{transition:background .18s,transform .18s,border-color .18s;color:#fff!important;}
.cta:hover{background:var(--brand-600)!important;border-color:var(--brand-600)!important;}
.cta--lift:hover{transform:translateY(-2px);}
.cta-ghost{transition:background .18s,border-color .18s;}
.cta-ghost:hover{background:rgba(255,255,255,.14)!important;border-color:#fff!important;}

@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* Animations au defilement (reveal) — classe ajoutee par JS, donc sans JS le contenu reste visible */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}

/* Hero : photo en fond plein cadre + texte par-dessus */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,76vh,820px);background:var(--ink);border-bottom:4px solid var(--brand);overflow:hidden;}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,17,23,.72) 0%,rgba(11,17,23,.44) 46%,rgba(11,17,23,.1) 100%);}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,104px) clamp(20px,5vw,72px);animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.hero__col{max-width:640px;display:flex;flex-direction:column;}
.hero__badge{position:absolute;right:clamp(16px,4vw,40px);top:clamp(16px,4vw,32px);background:var(--brand);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.04em;padding:9px 14px;text-transform:uppercase;}
@media(max-width:760px){
  .hero__veil{background:linear-gradient(180deg,rgba(11,17,23,.58) 0%,rgba(11,17,23,.72) 100%);}
}

/* Images laterales : contenues, alignees sur le cadre du site (bord exterieur = clamp(20px,5vw,72px), petit gap cote interieur) */
[data-media]{position:relative!important;padding:0!important;background:transparent!important;min-height:0!important;}
[data-media] img{position:absolute!important;top:var(--sp)!important;bottom:auto!important;right:auto!important;height:calc(100% - 2*var(--sp))!important;width:calc(100% - clamp(20px,5vw,72px) - clamp(14px,2.4vw,38px))!important;object-fit:cover!important;border-radius:18px!important;}
[data-split] > [data-media]:last-child img{left:clamp(14px,2.4vw,38px)!important;}   /* image a droite : gap cote interieur (gauche), bord exterieur (droite) cale a 72px */
[data-split] > [data-media]:first-child img{left:clamp(20px,5vw,72px)!important;} /* image a gauche : bord exterieur cale a 72px, gap cote interieur (droite) */
/* Anti-debordement : les colonnes grid ont min-width:auto par defaut -> une piste peut depasser l'ecran. On les autorise a retrecir. */
[data-split] > *{min-width:0;}
[data-split] img{max-width:100%;}

/* Types de bennes — cartes separees, arrondies, ombrees (demande client) */
.types-head{max-width:none;margin:0 auto;text-align:center;}
.types-head p{max-width:68ch;margin-left:auto;margin-right:auto;}
.types-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.type-card{background:#fff;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .2s,border-color .2s;}
.type-card:hover{transform:translateY(-4px);border-color:var(--brand);}
.type-card .type-img{aspect-ratio:16/10;overflow:hidden;}
.type-card .type-img img{width:100%;height:100%;object-fit:cover;}
.type-card .type-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.type-card .type-body h3{font-size:1.35rem;}
.type-card .type-body p{margin-top:12px;margin-bottom:20px;color:var(--text);font-size:1rem;line-height:1.55;}
.type-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--brand);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;padding:11px 18px;text-decoration:none;border:2px solid var(--brand);}

/* Processus — timeline verticale numerotee (pastilles + ligne de liaison) */
.proc{display:flex;flex-direction:column;}
.proc-step{position:relative;display:flex;gap:20px;padding-bottom:30px;}
.proc-step:last-child{padding-bottom:0;}
.proc-step::before{content:"";position:absolute;left:23px;top:54px;bottom:-2px;width:2px;background:var(--brand);opacity:.3;}
.proc-step:last-child::before{display:none;}
.proc-num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;}
.proc-txt h3{font-size:1.2rem;font-weight:800;color:var(--ink);}
.proc-txt p{margin-top:8px;color:var(--text);font-size:1rem;line-height:1.55;}

/* Formulaire de contact (honeypot anti-spam) */
.form-card{background:#fff;border-radius:16px;padding:clamp(24px,3vw,40px);}
.form-field{margin-bottom:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-card label{display:block;font-weight:600;color:var(--ink);font-size:.9rem;margin-bottom:6px;}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:9px;font:inherit;color:var(--text);background:#fff;}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(177,67,46,.25);}
.form-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}
.form-ok{background:#e8f6ec;border:1px solid #2e7d4f;color:#1d5836;padding:14px 16px;border-radius:9px;margin-bottom:18px;font-weight:600;}
.form-err{background:#fdecec;border:1px solid #c0392b;color:#922b21;padding:14px 16px;border-radius:9px;margin-bottom:18px;font-weight:600;}

/* Infos pratiques + meteo automatisee */
/* Realisations — galerie "en situation" */
.real-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.real-card{margin:0;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s,border-color .2s;}
.real-card:hover{transform:translateY(-4px);border-color:var(--brand);}
.real-card img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;}
.real-card figcaption{padding:18px 20px;display:flex;flex-direction:column;gap:4px;}
.real-card figcaption strong{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--ink);font-size:1.08rem;}
.real-card figcaption span{color:var(--muted);font-size:.95rem;}
@media(max-width:920px){.real-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.real-grid{grid-template-columns:1fr;}}

.infos-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;}
.info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;}
.info-card .info-ic{width:46px;height:46px;background:#f6e1da;color:var(--brand-600);display:flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:16px;}
.info-card h3{font-size:1.2rem;margin-bottom:12px;}
.info-card p{color:var(--text);margin-bottom:6px;font-size:.98rem;}
.info-card a{color:var(--brand-600);font-weight:600;text-decoration:none;}
.wx-head{margin-top:var(--sp);}
/* Meteo — bandeau unique sombre (sort du look "rangee de cartes blanches" generique) */
.wx-strip{margin-top:26px;display:flex;align-items:stretch;background:linear-gradient(135deg,#2f3239 0%,#1c1e22 100%);border:1px solid var(--line-dark);border-radius:20px;overflow:hidden;}
.wx-strip .wx-loading{color:#cdd6df;padding:30px;margin:0;}
.wx-day{flex:1 1 0;min-width:0;position:relative;padding:22px 12px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.08);transition:background .25s;}
.wx-day:first-child{border-left:0;}
.wx-day:hover{background:rgba(255,255,255,.05);}
.wx-day.is-today{background:rgba(177,67,46,.18);}
.wx-day.is-today::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand);}
.wx-day .wx-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#fff;font-size:.72rem;}
.wx-day .wx-name span{display:block;margin-top:4px;font-family:'Baloo 2',sans-serif;font-size:1.18rem;letter-spacing:0;color:#aeb8c4;font-weight:700;}
.wx-day.is-today .wx-name,.wx-day.is-today .wx-name span{color:var(--brand);}
.wx-day .wx-ic{display:flex;justify-content:center;margin:14px 0 12px;color:#f0c9bd;}
.wx-bar{height:5px;width:76%;margin:0 auto 12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.wx-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#edb79c,#b1432e);}
.wx-day .wx-t{font-family:'Baloo 2',sans-serif;font-weight:800;color:#fff;font-size:1.16rem;}
.wx-day .wx-t span{color:#8b97a5;font-weight:700;font-size:.9rem;margin-left:4px;}
.wx-loading{color:var(--muted);margin-top:18px;}
@media(max-width:760px){
  .wx-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .wx-day{flex:0 0 122px;}
}

/* Grand ecran : on agrandit le conteneur + l'air, on n'etire pas les lignes de texte */
@media(min-width:1700px){
  :root{--maxw:1680px;--sp:clamp(96px,7vw,148px);}
  body{font-size:20px;}
}

@media(max-width:920px){
  [data-split]{grid-template-columns:1fr!important;}
  /* Images laterales : en flux normal sur mobile/tablette (plus de position:absolute du desktop) = positionnement fiable */
  [data-media]{order:-1;position:static!important;aspect-ratio:auto!important;margin:clamp(28px,6vw,44px) clamp(20px,5vw,40px) 0!important;padding:0!important;min-height:0!important;background:transparent!important;}
  [data-media] img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important;border-radius:14px!important;}
  /* gap image -> texte raisonnable sur mobile (sinon le padding-haut var(--sp) de la colonne texte fait un trou) */
  [data-split] > div:not([data-media]){padding-top:clamp(22px,5vw,32px)!important;}
  #topnav{display:none!important;}
  #burger{display:inline-flex!important;}
  .types-grid{grid-template-columns:repeat(2,1fr);}
}

/* Header CTA telephone : numero insecable + bouton compact sur mobile (icone seule en tres petit) */
.mol-hdr-cta{white-space:nowrap;}
@media(max-width:600px){
  .mol-hdr-inner{gap:12px!important;}
  .mol-hdr-cta{font-size:.9rem!important;padding:10px 13px!important;gap:7px!important;}
}
@media(max-width:430px){
  .mol-hdr-cta .mol-hdr-num{display:none;}
  .mol-hdr-cta{padding:11px!important;gap:0!important;}
}

@media(max-width:560px){
  /* Stats hero : empilees verticalement (sinon "3 -> 30 m³" se casse sur plusieurs lignes) */
  [data-stats]{flex-direction:column!important;}
  [data-stats] > div{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.28);}
  [data-stats] > div:last-child{border-bottom:0!important;}
  .form-row{grid-template-columns:1fr;}
  .types-grid{grid-template-columns:1fr;}
}