/* =====================================================================
   Colma Bennes : identité propre (2026-10-02).
   Demande : « t'inspirer du site de Molsheim sans le copier ». Les blocs de Molsheim restent
   (molsheim-1.css, colmar-7.css), Colmar prend ici sa propre allure :
   - couleurs du logo Colma : pétrole #047DA3 (assombri en #04708F pour le contraste) et
     vert #469C32, orange brique #C2511A pour les boutons (couleur chaude) ;
   - titres en Excon, géométrique et franche comme les lettres du logo, texte en Satoshi
     (Fontshare, hébergées ; Chillax et Ranade refusées le 2026-10-02 : « j'aime pas la font ») ;
   - boutons à angles doux au lieu des pilules, sur-titres verts encadrés de deux traits
     comme « — BENNES — » sur le logo ;
   - sections teintées sur toute la largeur de l'écran ;
   - décor : depuis le 2026-10-02 au soir, seulement des ronds pâles façon Tigmi (fin de feuille) ;
   - bannière : photo ronde, garanties en bandeau dessous (flèches et vignette retirées le 2026-10-02) ;
   - pied de page clair (menthe) au lieu du bleu nuit de Molsheim.
   Chargée après colmar-7.css. Changer le NOM du fichier à chaque modification.
   ===================================================================== */

@font-face{font-family:'Excon';src:url('../polices/excon-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Excon';src:url('../polices/excon-700.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../polices/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../polices/satoshi-500.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../polices/satoshi-700.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --f-titre:'Excon',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texte:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --titre:var(--f-titre);
  --corps:var(--f-texte);
  /* les noms « bleu » restent ceux des blocs de Molsheim, la couleur devient le pétrole du logo */
  --bleu:#04708F;
  --bleu-fonce:#035A6E;
  --bleu-vif:#0A8DB3;
  --nuit:#0D2C34;
  --vert-logo:#469C32;
  --vert-texte:#2F7522;
  --orange:#C2511A;
  --orange-fonce:#A3420F;
  --ambre:#FFD3B0;
  --ciel:#EEF6F3;
  --ciel-2:#DBEDE7;
  --ciel-3:#BCDCD3;
  --sable:#F8F5EE;
  --ink:var(--nuit);
  --text:#22393F;
  --muted:#4B6268;
  --border:#D3E5DF;
  --r:20px;
  --r-s:14px;
  --titre-h2:clamp(2.2rem,3.5vw,3.25rem);
  /* fonds de section pleine largeur : les panneaux détachés des bords (retrait et arrondi) ont été
     refusés le 2026-10-02 (« j'aime pas trop les background qui laissent une marge sur les côtés ») */
  --pan:0px;
  --pan-r:0px;
  /* variables de l'ancienne charte (pages intérieures) */
  --vert:#C2511A;
  --vert-clair:#D96A30;
  --vert-fonce:#A3420F;
  --pale:#EEF6F3;
  --encre:#0D2C34;
  --nuit-2:#174652;
  --texte-doux:rgba(13,44,52,.74);
  --creme-2:#EEF6F3;
}

/* ---------- Base et titres ---------- */
body{font-family:var(--f-texte);font-weight:500}
h1,h2,h3,h4{font-family:var(--f-titre)}
main h2,.mb-h2{font-weight:700;letter-spacing:-.012em;line-height:1.1}
.colma-content h1,.colma-content h2,.colma-content h3{letter-spacing:-.012em!important}
.colma-content .mb-hero__titre{font-weight:700!important;line-height:1.04!important}
.colma-content .mb-accueil h3{font-weight:600!important}
::selection{background:var(--ciel-3);color:var(--nuit)}
.mb-accueil strong{color:var(--nuit)}

/* Mot-clé du titre : même couleur que le titre, sans surligneur (2026-10-02, « ça fait trop IA ») */
.mb-surl{color:inherit;padding:0;background:none}

/* Sur-titre vert entre deux traits pétrole, comme « — BENNES — » sur le logo */
.mb-surtitre{gap:12px;font-weight:600;font-size:.82rem;letter-spacing:.2em;color:var(--vert-texte)}
.mb-surtitre::before{width:28px;height:3px;border-radius:2px;background:var(--bleu)}
.mb-tete--centre .mb-surtitre::after{content:"";flex:none;width:28px;height:3px;border-radius:2px;background:var(--bleu)}

/* ---------- Boutons à angles doux ---------- */
.mb-btn{border-radius:14px;font-weight:600;letter-spacing:0}
.mb-btn--contour{border-color:var(--bleu);color:var(--bleu)}
.mb-btn--contour:hover{background:var(--bleu);border-color:var(--bleu);color:#fff}
.colma-form button,.colma-content a.t-lift,#simulateur .colma-simu-cta{border-radius:14px!important}
.mb-lien{color:var(--bleu)}

/* ---------- En-tête : trait pétrole et vert, liens sans pastille ---------- */
.mb-entete::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--bleu) 0 50%,var(--vert-logo) 50% 100%)}
.mb-entete__in{padding-top:16px}
.mb-burger{border-radius:12px}
@media(min-width:901px){
  .mb-nav{gap:2px;padding:0;border:0;border-radius:0;background:none}
  .mb-nav > a,.mb-nav .colma-groupe-btn{position:relative;border-radius:10px}
  .mb-nav > a:hover,.mb-nav .colma-groupe-btn:hover,.mb-nav .colma-groupe.est-ouvert .colma-groupe-btn{background:var(--ciel);color:var(--bleu)}
  .mb-nav > a[aria-current="page"],.mb-nav .colma-groupe.est-courant .colma-groupe-btn{background:none;color:var(--bleu)}
  .mb-nav > a[aria-current="page"]::after,.mb-nav .colma-groupe.est-courant .colma-groupe-btn::after{content:"";position:absolute;left:50%;bottom:3px;width:20px;height:3px;margin-left:-10px;border-radius:2px;background:var(--vert-logo)}
}

/* ---------- Sections teintées : grands panneaux arrondis ---------- */
.mb-sec--ciel,.mb-sec--sable,.cm-hero,#simulateur,#meteo{position:relative;isolation:isolate;background:transparent!important}
.mb-sec--ciel::before,.mb-sec--sable::before,.cm-hero::before,#simulateur::before,#meteo::before{content:"";position:absolute;z-index:-1;inset:calc(var(--pan) / 2) var(--pan);border-radius:var(--pan-r);background:var(--ciel)}
.mb-sec--sable::before{background:var(--sable)}
#meteo::before{background:var(--bleu)}
/* Ordre de l'accueil revu le 2026-10-02 (« remonte le déroulement, le prix, les types de bennes ») :
   le simulateur passe sur fond blanc entre deux panneaux, « Pour qui » sur panneau lin */
#simulateur::before{content:none}
#simulateur .colma-simu-champs{background:var(--ciel);border-color:var(--border)}
#simulateur .colma-simu-opt:not(.est-actif){background:#fff}
.mb-sec--sable .mb-public__carte{background:#fff}


/* ---------- Bannière : photo ronde dans les flèches du logo ---------- */
.cm-hero__grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,100px);align-items:center;padding-bottom:clamp(28px,3vw,44px)}
/* le haut se règle sur la section : colmar-7 force padding-top:0 sur #hero > div */
.cm-hero{padding-top:clamp(44px,5vw,84px)}
.cm-hero__visuel{position:relative;justify-self:center;width:100%;max-width:620px;aspect-ratio:1;min-width:0}
.cm-hero__photo{position:absolute;inset:9.5%;border-radius:50%;overflow:hidden;background:var(--ciel-2);border:clamp(6px,.7vw,10px) solid #fff}
.cm-hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center}
.cm-hero .mb-hero__texte{padding-block:0}
.cm-hero .mb-hero__titre{font-size:clamp(2.9rem,4.6vw,4.5rem)}
.mb-pastille{border-radius:10px}
.mb-pastille i{background:var(--vert-logo);outline-color:rgba(70,156,50,.2)}
.cm-hero .mb-hero__texte > .mb-hero__sous{font-weight:600;color:var(--bleu-fonce)}

/* Garanties : un bandeau blanc à quatre cases sous la bannière */
.cm-garanties{position:relative;z-index:1;margin:0 0 clamp(40px,4.4vw,68px);padding:6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;border-radius:var(--r);background:#fff;border:1px solid var(--border)}
.cm-garanties li{display:flex;align-items:center;gap:14px;min-width:0;padding:16px clamp(14px,1.6vw,24px)}
.cm-garanties li + li{border-left:1px solid var(--border)}
.cm-garanties__ic{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--ciel);color:var(--bleu)}
.cm-garanties li:nth-child(2n) .cm-garanties__ic{background:#EAF4E4;color:var(--vert-texte)}
.cm-garanties strong{display:block;font-family:var(--f-titre);font-weight:600;font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.2;color:var(--nuit)}
.cm-garanties small{display:block;margin-top:3px;font-size:.9rem;line-height:1.35;color:var(--muted)}

/* ---------- Cartes : photo à fleur, pastille ronde posée sur la photo ---------- */
.mb-type,.mb-public__carte,.mb-auto,.mb-deroule__etape{border-radius:var(--r)}
.mb-type__img{margin:0;border-radius:0}
.mb-type__ic{position:absolute;z-index:2;top:14px;left:14px;width:52px;height:52px;margin:0;border:0;border-radius:50%;background:#fff;color:var(--bleu)}
.mb-type:hover{border-color:var(--ciel-3)}
.mb-type:hover .mb-type__ic{background:var(--bleu);color:#fff}
.mb-type__corps{padding:24px 28px 28px}
.mb-public__corps{padding-top:24px}
.mb-format--vedette{border-color:var(--bleu)}

/* Listes numérotées : carrés pétrole */
.mb-num li::before{border-radius:10px;background:var(--bleu)}
.mb-public__carte .mb-num li:nth-child(2n)::before{background:var(--vert-texte)}


/* Déroulé : étiquette blanche sur la photo, numéro en carré pétrole */
.mb-deroule__photo{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.mb-deroule__photo figcaption{border-radius:10px;background:#fff;color:var(--nuit)}
.mb-deroule__photo figcaption::before{background:var(--vert-logo)}
.mb-deroule__n{width:52px;height:52px;margin:-26px 0 14px 22px;border-radius:14px;background:var(--bleu)}

/* Cartes « Faut-il une autorisation » : fond blanc et filet (le fond vert d'eau a été refusé le 2026-10-02 : « pas beau ce background ») */
.mb-auto{background:#fff;border-color:var(--border)}

/* Grand titre de chaque étape (demandé le 2026-10-02), à la place des étiquettes sur les photos */
.mb-deroule__etape h3.mb-deroule__titre{margin:0 24px;font-size:clamp(1.3rem,1.45vw,1.5rem);font-weight:700;line-height:1.2;color:var(--nuit)}
.mb-deroule--5 .mb-deroule__etape .mb-deroule__titre + p{margin-top:10px}

/* Encadrés « Bon à savoir » et citation */
.mb-bon,.mb-citation{border-radius:var(--r)}
.mb-bon__ic{background:var(--ciel)}
.mb-bon__label{color:var(--vert-texte)}
.mb-citation{font-family:var(--f-texte);font-weight:500;font-size:clamp(1.08rem,1.25vw,1.2rem);line-height:1.6}
.mb-coche{background:var(--vert-logo)}
/* « Pour qui » simplifié le 2026-10-02 (« c'est trop compliqué ») : une phrase et quatre puces cochées courtes */
.mb-public__corps .mb-checks--court{margin-top:18px;gap:12px}
.mb-checks--court li{align-items:center;font-size:1.08rem}


/* Étiquettes et pastilles de liens */
.mb-etiquette,.mb-liens-pastilles a{border-radius:10px}
.mb-liens-pastilles a svg{color:var(--vert-logo)}

/* ---------- FAQ : liste à filets, signe + dans un carré ---------- */
.mb-faq{gap:0;border-top:1px solid var(--border)}
.mb-faq__item,.mb-sec--blanc .mb-faq__item{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
.mb-faq__item[open]{border-color:var(--border)}
.mb-faq__item summary{padding:20px 4px}
.mb-faq__item[open] summary h3{color:var(--bleu)}
.mb-faq__icone{border-radius:10px;background:transparent;border:2px solid var(--bleu);color:var(--bleu)}
.mb-faq__item[open] .mb-faq__icone{background:var(--bleu);color:#fff}
.mb-faq__item.se-ferme .mb-faq__icone{background:transparent;color:var(--bleu)}
.mb-faq__corps > div > div{padding:0 56px 22px 4px}
.mb-faq-appel{border-radius:var(--r)}

/* ---------- Contact ---------- */
.mb-contact__ic{border-radius:50%;background:var(--ciel);color:var(--bleu)}
.mb-contact__item a:hover{color:var(--bleu)}
.mb-form-zone{border-radius:var(--r)}
.mb-form-zone__photo::after{background:linear-gradient(160deg,rgba(4,112,143,.08) 0%,rgba(13,44,52,.42) 100%)}
.colma-form input:focus,.colma-form textarea:focus{outline-color:rgba(4,112,143,.2)!important}

/* ---------- Simulateur et météo ---------- */
#simulateur .colma-simu-resultat{background:var(--bleu)}
#simulateur .colma-simu-opt{border-radius:12px}
#simulateur .colma-simu-opt.est-actif{background:var(--bleu-fonce);border-color:var(--bleu-fonce)}
#simulateur .colma-simu-chapeau,#simulateur .colma-simu-tel{color:#D5ECEA}
#meteo .colma-meteo-jour:not(.est-aujourdhui) .colma-meteo-temp span{color:#C9E4E2!important}
#meteo .colma-meteo-jour:not(.est-aujourdhui) .colma-meteo-conseil{color:var(--ambre)!important}
#meteo .colma-meteo-jour.est-humide:not(.est-aujourdhui) .colma-meteo-conseil{color:#CDEBF2!important}
/* Sur-titres de l'ancienne charte (simulateur, pages intérieures) au style des sur-titres de l'accueil */
.colma-eyebrow{gap:12px;padding:0!important;border-radius:0!important;background:none!important;font-family:var(--f-titre)!important;font-size:.82rem!important;font-weight:600!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--vert-texte)!important}
.colma-eyebrow::before{width:28px!important;height:3px!important;border-radius:2px!important;background:var(--bleu)!important}
.colma-content [style*="background: #15191A"] .colma-eyebrow,.colma-content [style*="background: #1D2223"] .colma-eyebrow{color:#fff!important}
.colma-content [style*="background: #15191A"] .colma-eyebrow::before,.colma-content [style*="background: #1D2223"] .colma-eyebrow::before{background:var(--ambre)!important}

/* ---------- Pied de page clair, en panneau menthe ---------- */
.mb-pied{margin:0 var(--pan) var(--pan);border-radius:var(--pan-r);background:var(--ciel);color:var(--text)}
.mb-pied__logo img{padding:0;border-radius:0;background:none}
.mb-pied__marque p{color:var(--muted)}
.mb-pied__titre{color:var(--nuit)}
.mb-pied a:hover{color:var(--bleu)}
.mb-pied strong{color:var(--nuit)}
.mb-pied__tel{color:var(--orange-fonce)!important}
.mb-pied__tel:hover{color:var(--bleu)!important}
.mb-pied__bas{border-top-color:var(--border)}
.mb-pied__bas > div{color:var(--muted)}
.mb-pied__bas a{color:var(--text)}
.mb-pied .colma-carbone{border-color:var(--border)}
.mb-pied .colma-carbone-mesure{background:#fff}
.mb-pied .colma-carbone-chiffre{color:var(--nuit)}
.mb-pied .colma-carbone-sous{color:var(--muted)}
.cb-barre{background:var(--nuit)!important}

/* ---------- Pages intérieures : bannière menthe (flèches et points retirés le 2026-10-02) ---------- */
.colma-content > section:first-child[style*="background-image"]{background-color:var(--ciel)!important}
.colma-fil a{color:var(--bleu)!important}

/* =====================================================================
   Responsive (en dernier)
   ===================================================================== */
@media (max-width:1180px){
  .cm-garanties{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-garanties li:nth-child(3){border-left:0}
  .cm-garanties li:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:900px){
  .cm-hero__grille{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:28px}
  .cm-hero{padding-top:32px}
  .cm-hero__visuel{max-width:min(440px,100%)}
  .mb-faq__corps > div > div{padding:0 4px 20px}
  .colma-content .mb-faq__item summary h3{font-size:1.08rem!important;line-height:1.35}
}
@media (max-width:600px){
  .cm-hero{padding-top:24px}
  .cm-garanties{grid-template-columns:minmax(0,1fr)}
  .cm-garanties li{padding:14px 12px}
  .cm-garanties li + li{border-left:0;border-top:1px solid var(--border)}
  .mb-surtitre{letter-spacing:.14em}
  .mb-surtitre::before,.mb-tete--centre .mb-surtitre::after{width:18px}
  /* sur-titre centré sur deux lignes : les traits partiraient aux bords, on les retire */
  .mb-tete--centre .mb-surtitre::before,.mb-tete--centre .mb-surtitre::after{display:none}
  .mb-bon{flex-direction:column;align-items:flex-start;gap:10px;padding:18px}
  /* lignes de prix des pages intérieures : le prix passe à la ligne au lieu de déborder de l'écran */
  .colma-content [style*="background: #1D2223"][style*="space-between"]{flex-wrap:wrap!important;row-gap:6px}
}

/* =====================================================================
   2026-10-02 au soir : plus rien qui « fait IA ». Fond : uniquement des ronds pâles à bord net,
   façon Tigmi, une section sur deux (déroulement, nos bennes, pour qui, à propos, autorisation,
   FAQ) : un grand rond coupé dans un coin, un petit coupé sur le bord opposé, coins alternés.
   Rien dans la bannière. Sur les sections teintées, la teinte passe du ::before au fond de la
   section elle-même, sous les ronds, comme sur Tigmi (aucun pseudo-élément de décor).
   ===================================================================== */
:root{--rond-lin:#EFE8DA;--rond-menthe:#DDEEE7;--rond-brique:#F6E6DC}
#deroulement::before,#pour-qui::before,#dechets::before{content:none}
#deroulement,#pour-qui{background:
  radial-gradient(circle 300px at right -90px top -110px,var(--rond-lin) 99.4%,transparent 100%) no-repeat,
  radial-gradient(circle 120px at left 6% bottom -70px,var(--rond-menthe) 99%,transparent 100%) no-repeat,
  var(--sable)!important}
#dechets{background:
  radial-gradient(circle 320px at left -120px bottom -140px,var(--rond-menthe) 99.4%,transparent 100%) no-repeat,
  radial-gradient(circle 110px at right 7% top -50px,var(--rond-brique) 99%,transparent 100%) no-repeat,
  var(--ciel)!important}
#a-propos,#faq{background-repeat:no-repeat;background-image:
  radial-gradient(circle 320px at left -120px bottom -140px,var(--ciel) 99.4%,transparent 100%),
  radial-gradient(circle 110px at right 7% top -50px,var(--rond-brique) 99%,transparent 100%)}
#autorisation{background-repeat:no-repeat;background-image:
  radial-gradient(circle 300px at right -90px top -110px,var(--ciel) 99.4%,transparent 100%),
  radial-gradient(circle 120px at left 6% bottom -70px,var(--rond-brique) 99%,transparent 100%)}
@media (max-width:760px){
  #deroulement,#pour-qui{background:
    radial-gradient(circle 170px at right -70px top -80px,var(--rond-lin) 99.2%,transparent 100%) no-repeat,
    radial-gradient(circle 80px at left 6% bottom -46px,var(--rond-menthe) 99%,transparent 100%) no-repeat,
    var(--sable)!important}
  #dechets{background:
    radial-gradient(circle 180px at left -80px bottom -90px,var(--rond-menthe) 99.2%,transparent 100%) no-repeat,
    radial-gradient(circle 70px at right 7% top -34px,var(--rond-brique) 99%,transparent 100%) no-repeat,
    var(--ciel)!important}
  #a-propos,#faq{background-image:
    radial-gradient(circle 180px at left -80px bottom -90px,var(--ciel) 99.2%,transparent 100%),
    radial-gradient(circle 70px at right 7% top -34px,var(--rond-brique) 99%,transparent 100%)}
  #autorisation{background-image:
    radial-gradient(circle 170px at right -70px top -80px,var(--ciel) 99.2%,transparent 100%),
    radial-gradient(circle 80px at left 6% bottom -46px,var(--rond-brique) 99%,transparent 100%)}
}