/* =====================================================================
   Colma Bennes, design repris de location-benne-molsheim.fr (2026-10-01).
   Chargée après charte-8.css et molsheim-1.css (blocs et palette de Molsheim).
   Ici : les variables de l'ancienne charte basculent sur la palette de Molsheim,
   les blocs propres à l'accueil de Colmar, et la remise aux couleurs des pages
   intérieures (HTML à styles intégrés), sans toucher à leurs textes.
   ===================================================================== */

/* ---------- Variables de l'ancienne charte, sur la palette de Molsheim ---------- */
:root{
  --vert:#C96A00;
  --vert-clair:#E08A2E;
  --vert-fonce:#A85800;
  --pale:#F1F6FA;
  --encre:#12293D;
  --nuit-2:#1B3A55;
  --blanc:#FFFFFF;
  --texte-doux:rgba(18,41,61,.74);
  --clair-doux:rgba(255,255,255,.82);
  --titre:'Cabinet Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --corps:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --h2:var(--titre-h2);
  --rayon:28px;
  --creme:#FFFFFF;
  --creme-2:#F1F6FA;
  /* marges et largeur des pages intérieures alignées sur l'en-tête */
  --gutter:var(--gut);
  --content:var(--maxw);
}
body{background:#fff;color:var(--text);font-family:var(--f-texte)}
.colma-skip{background:var(--orange);color:#fff}

/* Titres : l'ancienne charte imposait un interlignage serré et un espacement positif */
.colma-content h1,.colma-content h2,.colma-content h3{letter-spacing:-.025em!important}
.colma-content h2{line-height:1.08!important}
.colma-content .mb-accueil h3{font-weight:700!important}
.colma-content .mb-hero__titre{font-weight:800!important;line-height:1.02!important}

/* ---------- En-tête : sous-menu « Zone d'intervention » dans la pastille ---------- */
.mb-nav .colma-groupe{position:relative}
.mb-nav .colma-groupe-btn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 clamp(10px,1.2vw,18px);border:0;border-radius:999px;background:transparent;font-family:var(--f-titre);font-weight:500;font-size:.98rem;color:var(--nuit);white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s}
.mb-nav .colma-groupe-btn:hover,.mb-nav .colma-groupe.est-courant .colma-groupe-btn,.mb-nav .colma-groupe.est-ouvert .colma-groupe-btn{background:#fff;color:var(--bleu)}
.mb-nav .colma-groupe-btn svg{transition:transform .2s}
.mb-nav .colma-groupe.est-ouvert .colma-groupe-btn svg{transform:rotate(180deg)}
.mb-nav .colma-tiroir{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:70;min-width:260px;padding:8px;border-radius:18px;background:#fff;border:1px solid var(--border)}
.mb-nav .colma-groupe.est-ouvert .colma-tiroir{display:grid;gap:2px}
.mb-nav .colma-tiroir a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-family:var(--f-titre);font-weight:500;color:var(--nuit);text-decoration:none}
.mb-nav .colma-tiroir a:hover,.mb-nav .colma-tiroir a[aria-current="page"]{background:var(--ciel);color:var(--bleu)}
.mb-logo img{height:clamp(40px,3.6vw,52px)}

/* ---------- Fil d'Ariane ---------- */
.colma-fil{background:#fff!important;border-top:0!important;border-bottom:1px solid var(--border);color:var(--muted)}
.colma-fil .colma-shell{max-width:var(--maxw);margin:0 auto;padding:13px var(--gut);font-size:.9rem}
.colma-fil a{color:var(--bleu)!important;font-weight:600;text-decoration:none}
.colma-fil a:hover{text-decoration:underline;text-underline-offset:3px}
.colma-fil [aria-current="page"]{color:var(--nuit)!important;font-weight:600}

/* ---------- Pied de page : carte Google et badge carbone ---------- */
.mb-pied__logo img{height:56px;padding:8px 12px;border-radius:14px;background:#fff}
.mb-pied__carte{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(32px,4vw,52px)}
.mb-pied__carte iframe{display:block;width:100%;height:260px;border:0;border-radius:var(--r-s)}
.mb-pied .colma-carbone{display:inline-flex;align-items:stretch;margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);text-decoration:none}
.mb-pied .colma-carbone-mesure{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:rgba(255,255,255,.06)}
.mb-pied .colma-carbone-chiffre{font-family:var(--f-titre);font-weight:700;color:#fff}
.mb-pied .colma-carbone-sous{font-size:.8rem;color:#9FB6C9}
.mb-pied .colma-carbone-marque{display:flex;align-items:center;padding:10px 14px;background:var(--orange);font-family:var(--f-titre);font-weight:700;font-size:.85rem;color:#fff}

/* ---------- Barre d'appel mobile (celle de l'ancienne charte, aux nouvelles couleurs) ---------- */
.cb-barre{background:var(--nuit)!important}
.cb-barre .cb-barre-tel{background:var(--orange)!important;color:#fff!important;font-family:var(--f-titre)}
.cb-barre .cb-barre-prix{border-color:rgba(255,255,255,.55)!important;color:#fff!important;font-family:var(--f-titre)}

/* ---------- Météo : températures lisibles sur les cartes bleues ---------- */
#meteo .colma-meteo-jour{background:var(--bleu-fonce)!important}
#meteo .colma-meteo-jour:not(.est-aujourdhui) .colma-meteo-temp strong{color:#fff!important}
#meteo .colma-meteo-jour:not(.est-aujourdhui) .colma-meteo-temp span{color:#BFD6E8!important}

/* =====================================================================
   Accueil de Colmar : blocs propres
   ===================================================================== */
.mb-hero__texte > .mb-hero__sous{margin-top:14px;font-family:var(--f-titre);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.25;color:var(--nuit)}
.mb-hero__texte > .mb-hero__coord{margin-top:16px;font-size:.95rem;line-height:1.55;color:var(--muted)}
.mb-hero__chiffres--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.mb-hero__chiffres--4 .mb-chiffre strong{white-space:normal}

/* Listes numérotées (puces orange) */
.mb-num{counter-reset:mb-num;display:grid;gap:12px;margin-top:16px}
.mb-num li{counter-increment:mb-num;position:relative;display:block;padding-left:46px;min-height:32px;line-height:1.6}
.mb-num li::before{content:counter(mb-num);position:absolute;left:0;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--f-titre);font-weight:700;font-size:.95rem}
.mb-num li a{color:var(--bleu);text-decoration:underline;text-underline-offset:3px}

/* Pour qui : deux grandes cartes */
.mb-public{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.mb-public__carte{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--ciel);border:1px solid var(--border);overflow:hidden}
.mb-public__carte .mb-type__img{aspect-ratio:16/9}
.mb-public__carte .mb-type__ic{border-color:var(--ciel)}
.mb-public__corps{padding:14px clamp(22px,2.6vw,34px) clamp(26px,2.8vw,36px)}
.mb-public__corps h3{font-size:clamp(1.4rem,1.8vw,1.7rem)}
.mb-public__corps > p{margin-top:12px;font-size:1.05rem;line-height:1.65}
.mb-public__corps > .mb-num + p{margin-top:16px}

/* Déroulé à 5 étapes : pas de titre, la phrase porte l'étape */
.mb-deroule--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mb-deroule--5 .mb-deroule__etape p{margin-top:0}
.mb-tete > p + .mb-tete{margin-top:0}

/* Formats */
.mb-formats{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,24px)}
.mb-format{position:relative}
.mb-format--vedette{border:2px solid var(--orange)}
.mb-format__ic{display:flex;align-items:center;height:34px;margin-top:6px}
.mb-format__ic i{display:block;width:calc(30px + 40px * var(--l,.5));aspect-ratio:200/112;background:var(--bleu);-webkit-mask:var(--m-benne) left center/contain no-repeat;mask:var(--m-benne) left center/contain no-repeat}
.mb-type__corps h3.mb-format__volume{margin-top:8px;font-size:clamp(1.8rem,2.4vw,2.3rem);font-weight:800;color:var(--nuit)}
.mb-note--centre{margin:clamp(24px,3vw,36px) auto 0;max-width:72ch;text-align:center}

/* Déchets interdits */
.mb-interdits{margin-top:clamp(40px,5vw,72px);padding:clamp(24px,3vw,40px);border-radius:var(--r);background:#fff;border:1px solid var(--border)}
.mb-interdits__tete{display:flex;gap:18px;align-items:flex-start}
.mb-interdits__ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#C0392B;color:#fff}
.mb-interdits__tete h3{font-size:clamp(1.4rem,2vw,1.8rem)}
.mb-interdits__tete p{margin-top:8px;max-width:70ch}
.mb-interdits__grille{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mb-interdits__grille article{padding:18px 20px;border-radius:18px;background:#FBE9E7}
.mb-interdits__grille h4{margin:0 0 6px;font-family:var(--f-titre);font-weight:700;font-size:1.15rem;color:#922B21}
.mb-interdits__grille p{font-size:1rem;line-height:1.55}
.mb-interdits__pied{margin-top:18px}
.mb-bon--large{max-width:none;margin:18px 0 0;background:var(--ciel)}
.mb-bon--ok{background:#E6F4EA}
.mb-bon--ok .mb-bon__ic{background:#fff;color:#1D5836}
.mb-bon--ok .mb-bon__label{color:#1D5836}
.mb-interdits__grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Le mot du fondateur */
.mb-citation{position:relative;margin:22px 0 0;padding:22px 26px 22px 30px;border-radius:22px;background:var(--ciel);font-family:var(--f-titre);font-weight:500;font-size:clamp(1.12rem,1.35vw,1.3rem);line-height:1.5;color:var(--nuit)}
.mb-split__texte > .mb-num + p{margin-top:18px}
.mb-split__texte > .mb-signature{margin-top:16px;font-size:1rem;color:var(--muted)}

/* Réalisations : quatre photos légendées */
.mb-reals{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.mb-reals__item{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--ciel-2)}
.mb-reals__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.mb-reals__item:hover img{transform:scale(1.07)}}

/* Autorisation : deux cartes */
.mb-autos{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.mb-auto{display:flex;flex-direction:column;border-radius:var(--r);background:var(--ciel);border:1px solid var(--border);overflow:hidden}
.mb-auto .mb-type__img{aspect-ratio:16/9}
.mb-auto__corps{padding:22px clamp(22px,2.6vw,34px) clamp(26px,2.8vw,36px)}
.mb-auto__corps h3{margin-top:12px;font-size:clamp(1.4rem,1.8vw,1.7rem)}
.mb-auto__corps > p{margin-top:12px;line-height:1.65}
.mb-etiquette{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-family:var(--f-titre);font-weight:700;font-size:.86rem}
.mb-etiquette::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.mb-etiquette--ok{background:#E6F4EA;color:#1D5836}
.mb-etiquette--attente{background:#FFF0DD;color:var(--orange-fonce)}

/* Zone : liens vers les pages de secteur */
.mb-liens-pastilles{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.mb-liens-pastilles a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;border:1px solid var(--border);font-family:var(--f-titre);font-weight:600;color:var(--nuit);text-decoration:none;transition:border-color .18s,color .18s}
.mb-liens-pastilles a svg{color:var(--orange)}
.mb-liens-pastilles a:hover{border-color:var(--bleu);color:var(--bleu)}
.mb-split__texte > .mb-checks + p{margin-top:20px}
.mb-carte .colma-carte{position:absolute;inset:0;width:100%;height:100%;border:0}
.mb-split__media--carte{display:flex;flex-direction:column}
.mb-carte__legende{position:absolute;left:16px;bottom:16px;z-index:2;max-width:calc(100% - 32px);padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.92);font-size:.86rem;color:var(--nuit)}

/* FAQ : photo et appel à gauche */
.mb-faq-cote{display:flex;flex-direction:column;gap:16px;min-width:0}
.mb-faq-cote .mb-split__media{flex:1}
.mb-faq-appel{display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:22px;background:var(--bleu);color:#EEF5FB}
.mb-faq-appel p{font-family:var(--f-titre);font-weight:600;font-size:1.12rem;line-height:1.4;color:#fff}
.mb-faq-appel .mb-btn{align-self:flex-start}

/* Contact : le formulaire de Colma Bennes devient la carte blanche */
.mb-contact__liste strong{color:var(--nuit)}
.mb-form-zone .form-card{padding:0;border:0;background:none}
.mb-form-zone .colma-form{border-radius:var(--r);border:1px solid var(--border);background:#fff;padding:clamp(24px,3vw,40px)}
.colma-form .colma-form-titre{font-family:var(--f-titre)!important;font-weight:800!important;color:var(--nuit)}
.colma-form input,.colma-form textarea,.colma-form select{border-radius:14px!important;border-color:var(--border)!important;font-family:var(--f-texte)!important}
.colma-form input:focus,.colma-form textarea:focus{outline:3px solid rgba(15,92,146,.18)!important;border-color:var(--bleu)!important}
.colma-form button{background:var(--orange)!important;color:#fff!important;font-family:var(--f-titre)!important;font-weight:700!important;border-radius:999px!important}
.colma-form button:hover{background:var(--orange-fonce)!important;transform:none}
.colma-form-rgpd a{color:var(--bleu)!important}

/* =====================================================================
   Simulateur, météo et pages intérieures (HTML à styles intégrés)
   ===================================================================== */
.colma-content [style*="background: #6BAB45"]{background:var(--orange)!important;color:#fff!important}
.colma-content [style*="color: #6BAB45"]{color:var(--orange)!important}
.colma-content a.t-lift{border-radius:999px!important;font-family:var(--f-titre)!important;font-weight:700!important}
.colma-content section[style*="background: #15191A"],#meteo{background:var(--bleu)!important}
.colma-content [style*="background: #1D2223"]{background:var(--bleu-fonce)!important}
.colma-content section[style*="background: #15191A"] [style*="color: #6BAB45"]{color:var(--ambre)!important}

/* Bandeau d'ouverture des pages intérieures : clair, comme les bannières de Molsheim */
.colma-content > section:first-child[style*="background-image"]{background-image:none!important;background-color:var(--sable)!important;color:var(--nuit)!important;overflow:hidden;isolation:isolate}
.colma-content > section:first-child[style*="background-image"] [style*="color: #FBF8F2"],
.colma-content > section:first-child[style*="background-image"] [style*="color: rgba(251,248,242"]{color:var(--text)!important}
.colma-content > section:first-child[style*="background-image"] h1{color:var(--nuit)!important}
.colma-content > section:first-child[style*="background-image"] strong{color:var(--nuit)!important}
.colma-content > section:first-child[style*="background-image"] [style*="border: 1px solid rgba(251,248,242"],
.colma-content > section:first-child[style*="background-image"] [style*="border: 2px solid rgba(251,248,242"]{border-color:var(--nuit)!important;color:var(--nuit)!important}

/* Mentions légales et politique de confidentialité */
.colma-simple{max-width:860px;margin:0 auto;padding:clamp(44px,5vw,84px) var(--gut)}
.colma-simple a{color:var(--bleu)}

/* ---------- Correctifs du 2026-10-01 (relecture) ---------- */
/* Météo : titre et textes blancs sur fond bleu, carte du jour blanche */
#meteo h2,#meteo h3{color:#fff!important}
#meteo .colma-meteo-jour.est-aujourdhui{background:#fff!important;border-color:#fff!important}
#meteo .colma-meteo-jour.est-aujourdhui .colma-meteo-temp strong{color:var(--nuit)!important}
#meteo .colma-meteo-jour.est-aujourdhui .colma-meteo-jour-nom{color:var(--orange-fonce)!important}
#meteo .colma-meteo-jour.est-aujourdhui :is(.colma-meteo-jour-date,.colma-meteo-ciel,.colma-meteo-pluie,.colma-meteo-temp span){color:var(--muted)!important}
#meteo .colma-meteo-jour.est-aujourdhui .colma-meteo-conseil{color:var(--orange-fonce)!important}
/* Simulateur : texte blanc sur les boutons orange */
#simulateur .colma-simu-cta{color:#fff!important;font-family:var(--f-titre)!important}

/* L'ancienne feuille poussait la bannière de 180 px (en-tête transparent) et la faisait monter à l'affichage */
body.home .colma-content #hero > div{padding-top:0!important;animation:none!important}

/* =====================================================================
   Surcharges responsive (en dernier)
   ===================================================================== */
@media (max-width:1180px){
  .mb-formats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-deroule--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mb-deroule--5 .mb-deroule__etape::after{display:none}
  .mb-reals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-interdits__grille{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .mb-nav .colma-groupe-btn{width:100%;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:14px;font-size:1.06rem}
  .mb-nav .colma-tiroir{position:static;min-width:0;padding:4px 0 4px 12px;border:0;background:transparent}
  .mb-public,.mb-autos{grid-template-columns:minmax(0,1fr)}
  .mb-faq-appel .mb-btn{align-self:stretch}
}
@media (max-width:600px){
  .mb-hero__chiffres--4{grid-template-columns:minmax(0,1fr)}
  .mb-formats,.mb-deroule--5,.mb-reals{grid-template-columns:minmax(0,1fr)}
  .mb-reals__item{aspect-ratio:4/3}
  .mb-interdits__tete{flex-direction:column}
}

/* Déroulé : des pointillés entre toutes les étapes, à toutes les tailles (2026-10-02).
   Tablette (3 colonnes, 5 étapes) : l'étape 3 rejoint l'étape 4 par un S en pointillés
   (moitié haute portée par l'étape 3, moitié basse par l'étape 4) ; 1-2, 2-3 et 4-5 gardent
   le trait horizontal. Téléphone (1 colonne) : un trait vertical sous chaque carte. */
@media(min-width:601px) and (max-width:1180px){
  .mb-deroule--5{row-gap:44px}
  .mb-deroule--5 .mb-deroule__etape:not(:nth-child(3n)):not(:last-child)::after{display:block}
  .mb-deroule--5 .mb-deroule__etape:nth-child(3n):not(:last-child)::after{display:block;top:100%;left:auto;right:calc(50% - 2px);width:calc(200% + 2 * var(--g));height:24px;background:radial-gradient(circle,var(--bleu) 1.8px,transparent 2.4px) right top/4px 10px repeat-y,radial-gradient(circle,var(--bleu) 1.8px,transparent 2.4px) left bottom/10px 4px repeat-x}
  .mb-deroule--5 .mb-deroule__etape:nth-child(3n+1):not(:first-child)::before{content:"";position:absolute;z-index:2;top:-22px;left:calc(50% - 2px);width:4px;height:22px;background:radial-gradient(circle,var(--bleu) 1.8px,transparent 2.4px) center top/4px 10px repeat-y}
}
@media(max-width:600px){
  .mb-deroule--5{row-gap:44px}
  .mb-deroule--5 .mb-deroule__etape:not(:last-child)::after{display:block;top:100%;left:49px;right:auto;width:4px;height:44px;background:radial-gradient(circle,var(--bleu) 1.8px,transparent 2.4px) center top/4px 10px repeat-y}
}