/* Colma Bennes — feuille de style du site */

:root{
  --ink:#15191A;
  --ink-soft:#1D2223;
  --creme:#FBF8F2;
  --creme-2:#F2EEE5;
  --vert:#6BAB45;
  --bleu:#0D8A9C;
  /* --shell = largeur EXTERIEURE (gouttiere comprise) de l'en-tete et du pied de page.
     Les conteneurs de section ont deja leur padding lateral, d'ou --content = --shell moins
     deux gouttieres. Les deux doivent rester coherents, sinon en-tete et pied de page se
     decalent du contenu. Reglage commun a toutes les integrations Claude Design. */
  --shell:1640px;
  --content:1560px;
  --gutter:clamp(18px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--ink);
  font-family:var(--corps);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%}
a{color:var(--bleu);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{text-wrap:pretty}

/* ---------- accessibilite ---------- */
.colma-skip{position:absolute;left:-9999px;top:0;background:var(--vert);color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:200}
.colma-skip:focus{left:0}
.colma-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--vert);outline-offset:2px}

/* ---------- en-tete ---------- */
.colma-header{
  position:sticky;top:0;z-index:60;
  background:var(--ink);color:var(--creme);
  transition:background .28s ease,color .28s ease;
}
/* bandeau d'informations, tout en haut du site : raison sociale, adresse, telephone.
   Il vit DANS l'en-tete pour rester visible aussi sur l'accueil, ou l'en-tete est fixe. */
.colma-bandeau{
  background:var(--ink);color:rgba(251,248,242,.86);
  border-bottom:1px solid rgba(107,171,69,.38);
}
.colma-bandeau-in{
  max-width:var(--shell);margin:0 auto;padding:7px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:4px clamp(14px,2.2vw,30px);
  font-size:13.5px;line-height:1.35;
}
.colma-bandeau-nom{
  font-family:var(--titre);font-weight:700;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--vert);
}
.colma-bandeau-item{
  display:inline-flex;align-items:center;gap:8px;
  color:inherit!important;text-decoration:none;
}
.colma-bandeau-item svg{flex:0 0 auto;color:var(--vert)}
.colma-bandeau-item:hover,.colma-bandeau-item:focus-visible{color:var(--vert)!important}
.colma-bandeau-tel{font-weight:700}

.colma-header .colma-shell{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:stretch;gap:clamp(8px,2vw,28px);justify-content:space-between;
}
.colma-logo{display:flex;align-items:center;padding:10px 0;text-decoration:none;flex:0 0 auto}
/* le logo est deja transparent : pas de plaque blanche autour, juste plus grand */
.colma-logo img{height:clamp(44px,4.6vw,62px);width:auto;display:block}
.colma-nav{display:flex;align-items:stretch;gap:0}
.colma-nav a{
  display:flex;align-items:center;padding:0 clamp(8px,1vw,15px);
  color:inherit;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;
}
.colma-nav a:hover,.colma-nav a:focus-visible{color:var(--vert)}
.colma-nav a[aria-current="page"]{color:var(--vert);font-weight:600}

/* sous-menu « Zone d'intervention » */
.colma-groupe{position:relative;display:flex;align-items:stretch}
.colma-groupe-btn{
  display:flex;align-items:center;gap:7px;
  padding:0 clamp(8px,1vw,15px);background:none;border:0;cursor:pointer;
  color:inherit;font-family:inherit;font-size:15px;font-weight:500;white-space:nowrap;
}
.colma-groupe-btn:hover,.colma-groupe-btn:focus-visible{color:var(--vert)}
.colma-groupe.est-courant>.colma-groupe-btn{color:var(--vert);font-weight:600}
.colma-groupe-btn svg{transition:transform .25s ease}
.colma-groupe.est-ouvert>.colma-groupe-btn svg{transform:rotate(180deg)}
.colma-tiroir{
  position:absolute;top:100%;left:0;min-width:250px;z-index:70;
  background:var(--ink);border:1px solid rgba(251,248,242,.14);border-radius:0 0 14px 14px;
  padding:8px;flex-direction:column;display:none;
}
.colma-groupe:hover>.colma-tiroir,
.colma-groupe:focus-within>.colma-tiroir,
.colma-groupe.est-ouvert>.colma-tiroir{display:flex}
.colma-tiroir a{padding:11px 14px;border-radius:9px;font-size:15.5px;color:var(--creme)}
.colma-tiroir a:hover,.colma-tiroir a:focus-visible{background:rgba(107,171,69,.16);color:var(--vert)}
body.home .colma-header.is-scrolled .colma-tiroir{background:var(--creme);border-color:rgba(21,25,26,.14)}
body.home .colma-header.is-scrolled .colma-tiroir a{color:var(--ink)}
.colma-tel{
  display:flex;align-items:center;margin:10px 0;border-radius:10px;
  background:var(--vert);color:var(--ink)!important;
  font-family:var(--titre);font-weight:700;font-size:clamp(15px,1.4vw,17px);
  padding:0 clamp(14px,2vw,22px);text-decoration:none;min-height:44px;
  transition:transform .2s ease;
}
.colma-tel:hover{transform:translateY(-2px)}
.colma-burger{display:none;background:none;border:0;color:inherit;padding:0 10px;cursor:pointer;align-items:center}
/* appel a l'action visible seulement quand le menu est replie */
.colma-cta-mobile{display:none}
.colma-burger svg{display:block}

/* accueil : en-tete transparent puis creme au defilement */
body.home .colma-header{position:fixed;top:0;left:0;right:0;background:transparent}
body.home .colma-header.is-scrolled{background:var(--creme);color:var(--ink);border-bottom:1px solid rgba(21,25,26,.12)}
body.home .colma-header.is-scrolled .colma-nav a[aria-current="page"]{color:var(--bleu)}

/* ---------- fil d'Ariane ---------- */
.colma-fil{background:var(--ink);color:rgba(251,248,242,.66);border-top:1px solid rgba(251,248,242,.10)}
.colma-fil .colma-shell{
  max-width:var(--shell);margin:0 auto;padding:13px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;font-size:14.5px;
}
.colma-fil a{color:var(--vert);text-decoration:none}
.colma-fil a:hover{text-decoration:underline}
.colma-fil-sep{margin:0 9px;opacity:.5}
.colma-fil [aria-current="page"]{color:rgba(251,248,242,.9)}

/* ---------- contenu ---------- */
.colma-content section{position:relative}
.colma-content>section:first-child{margin-top:0}

/* cartes : design plat, un liser fin remplace les ombres */
.t-card{border:1px solid rgba(21,25,26,.10)}
.t-card-dark{border:1px solid rgba(251,248,242,.10)}
img.t-card{border:0}

/* survols repris du design */
.t-lift{transition:transform .25s ease}
.t-lift:hover{transform:translateY(-6px)}
a.t-lift:hover,button.t-lift:hover{transform:translateY(-3px)}
.t-slide{transition:transform .2s ease}
.t-slide:hover{transform:translateX(6px)}
.t-hovacc:hover{color:var(--vert)}

/* accordeons FAQ : pas de trait de focus noir */
.colma-content summary{list-style:none;cursor:pointer}
.colma-content summary::-webkit-details-marker{display:none}
.colma-content summary{outline:none!important;border:0!important;box-shadow:none!important}
.colma-content summary:focus,.colma-content summary:focus-visible{outline:none!important}
.colma-content summary:focus-visible{text-decoration:underline;text-decoration-color:var(--vert)}
.colma-content details[open] summary span[data-plus]{transform:rotate(45deg)}

/* ---------- formulaire ---------- */
.colma-form{
  background:var(--creme);color:var(--ink);border-radius:18px;
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;
  border:1px solid rgba(21,25,26,.12);
}
.colma-form .colma-form-titre{font-family:var(--titre);font-weight:700;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.colma-form .colma-form-chapo{font-size:15px;line-height:1.5;color:rgba(21,25,26,.7)}
.colma-form label{font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(21,25,26,.72);display:block;margin-bottom:6px}
.colma-form input,.colma-form select,.colma-form textarea{
  font-family:var(--corps);font-size:16px;width:100%;
  padding:14px 16px;border:1px solid rgba(21,25,26,.18);border-radius:10px;
  background:#fff;min-height:44px;color:var(--ink);
}
.colma-form textarea{resize:vertical}
.colma-form .colma-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.colma-form button{
  font-family:var(--titre);font-weight:700;font-size:18px;
  background:var(--vert);color:var(--ink);border:none;border-radius:12px;
  padding:16px 20px;min-height:44px;cursor:pointer;transition:transform .2s ease;
}
.colma-form button:hover{transform:translateY(-3px)}
.colma-form .colma-form-pied{font-size:13.5px;line-height:1.5;color:rgba(21,25,26,.6)}
.colma-pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.colma-msg{border-radius:10px;padding:14px 16px;font-size:15.5px;line-height:1.5}
.colma-msg-ok{background:#e8f4e0;border:1px solid var(--vert);color:#24401a}
.colma-msg-ko{background:#fdeceb;border:1px solid #c0392b;color:#7c241a}

/* ---------- pied de page ---------- */
.colma-footer{background:var(--ink-soft);color:var(--creme);border-top:1px solid rgba(251,248,242,.14)}
.colma-footer a{color:var(--vert)}
.colma-footer a:hover{color:var(--creme)}
.colma-footer .colma-shell{max-width:var(--shell);margin:0 auto;padding:60px var(--gutter) 28px}
.colma-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px}
.colma-footer img{height:72px;width:auto;display:block;margin-bottom:18px}
.colma-footer .colma-ftitre{font-family:var(--titre);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--vert)}
.colma-footer p{font-size:16px;line-height:1.6;margin:0 0 10px;color:rgba(251,248,242,.82)}
.colma-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:16px}
/* badge Website Carbon */
.colma-carbone{
  display:inline-flex;align-items:stretch;margin-top:22px;max-width:100%;
  border:1px solid rgba(107,171,69,.5);border-radius:10px;overflow:hidden;
  font-size:12.5px;font-weight:700;line-height:1.2;text-decoration:none;
}
.colma-carbone .colma-carbone-mesure{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:9px 15px;background:var(--ink);color:var(--creme);
}
.colma-carbone .colma-carbone-sous{font-weight:600;font-size:11.5px;color:rgba(251,248,242,.62)}
.colma-carbone .colma-carbone-marque{
  display:flex;align-items:center;padding:10px 15px;
  background:var(--vert);color:var(--ink);white-space:nowrap;transition:background .2s ease;
}
.colma-carbone:hover .colma-carbone-marque{background:#7cc251}
.colma-carbone sub{font-size:.75em;line-height:0}

/* bande carte pleine largeur, alignee sur la grille des quatre colonnes */
.colma-footer-carte{
  margin-top:36px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(251,248,242,.14);background:#101314;
}
.colma-footer-carte iframe{
  display:block;width:100%;height:clamp(230px,26vh,300px);border:0;
}
.colma-footer-sep{margin:0 8px;opacity:.45}
.colma-footer-bas{
  max-width:var(--shell);margin:0 auto;padding:20px var(--gutter) 34px;
  border-top:1px solid rgba(251,248,242,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:15px;color:rgba(251,248,242,.66);
}

/* ---------- page simple (mentions legales) ---------- */
.colma-simple{max-width:920px;margin:0 auto;padding:clamp(48px,7vw,86px) 28px}
.colma-simple h1{font-family:var(--titre);font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 26px}
.colma-simple h2{font-family:var(--titre);font-weight:700;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;margin:38px 0 12px}
.colma-simple p,.colma-simple li{font-size:17px;line-height:1.7}
.colma-simple ul{padding-left:20px}

/* ---------- largeur du contenu issu du design ----------
   Le design bride ses conteneurs a 1360px (1000px pour les sections etroites),
   trop juste sur un ecran d'ordinateur portable. On elargit sans toucher au
   markup, par selecteur d'attribut. */
.colma-content [style*="max-width: 1360px"]{
  max-width:var(--content)!important;
  padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;
}
.colma-content [style*="max-width: 1000px"]{
  max-width:1180px!important;
  padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;
}
/* les titres ne doivent plus etre brides en ch : sinon ils cassent en deux
   lignes alors que la place ne manque pas (« ... : pour qui ? » sur 2 lignes). */
.colma-content h1[style*="ch"],
.colma-content h2[style*="ch"],
.colma-content h3[style*="ch"]{max-width:none!important}

/* ---------- carte de la zone ---------- */
.colma-carte{
  width:100%;height:clamp(400px,56vh,600px);border:0;display:block;
  border-radius:18px;background:#101314;
}
/* la carte prend toute la hauteur de la colonne de texte en face */
.colma-carte-plein{height:100%;display:flex;flex-direction:column}
.colma-carte-plein .colma-carte{flex:1 1 auto;height:auto;min-height:380px}

/* ---------- sur-titre de section ---------- */
.colma-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--titre);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vert);
  margin:0 0 14px;
}
.colma-eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--vert)}

/* ---------- bandeau d'avis ---------- */
.colma-avis-tete{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:0 0 26px}
.colma-avis-tete img{height:30px;width:auto;display:block}
.colma-avis-note{display:flex;align-items:center;gap:8px;font-size:16px}
.colma-avis-etoiles{color:#F5A623;letter-spacing:2px;font-size:19px;line-height:1}

/* ---------- listes a icones ---------- */
.colma-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.colma-liste li{
  display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  background:var(--creme-2);border-radius:12px;padding:14px 16px;
  font-size:16.5px;line-height:1.55;
}
.colma-liste svg{width:22px;height:22px;margin-top:2px;justify-self:center}
.colma-liste.oui svg{color:var(--vert)}
.colma-liste.non svg{color:#C0392B}

/* ---------- pastilles de communes ---------- */
.colma-puce{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(107,171,69,.16);border:1px solid rgba(107,171,69,.55);
  color:var(--vert)!important;text-decoration:none;
  font-family:var(--titre);font-weight:700;font-size:15.5px;
  padding:10px 16px;border-radius:999px;min-height:44px;
  transition:background .2s ease,transform .2s ease;
}
.colma-puce::after{content:"→"}
.colma-puce:hover{background:var(--vert);color:var(--ink)!important;transform:translateY(-2px)}

/* ---------- citation ---------- */
.colma-cite{
  margin:26px 0 0;padding:22px 24px;border-radius:16px;
  background:var(--creme-2);border:1px solid rgba(21,25,26,.10);
  display:flex;flex-direction:column;gap:12px;
}
.colma-cite p{margin:0;font-size:18px;line-height:1.6;font-style:italic}
.colma-cite span{font-size:15px;color:rgba(21,25,26,.7)}
.colma-cite.sombre{background:var(--ink-soft);border-color:rgba(251,248,242,.12)}
.colma-cite.sombre span{color:rgba(251,248,242,.72)}

/* ---------- section devis de fin de page ---------- */
.colma-devis{background:var(--creme-2)}
.colma-devis>div{
  max-width:var(--content);margin:0 auto;padding:clamp(52px,6vw,86px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;
}
.colma-devis h2{
  font-family:var(--titre);font-weight:700;
  font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 16px;
}
.colma-devis p{font-size:18px;line-height:1.6;margin:0 0 14px;max-width:56ch}

/* ---------- formulaire compact (banniere d'accueil) ---------- */
.colma-form--compact{padding:clamp(18px,1.9vw,24px);gap:9px}
.colma-form--compact .colma-form-titre{font-size:clamp(19px,1.7vw,24px)}
.colma-form--compact .colma-form-chapo{font-size:14px}
.colma-form--compact label{font-size:12px;margin-bottom:3px}
.colma-form--compact input,.colma-form--compact textarea{padding:10px 13px;min-height:42px;font-size:15.5px}
.colma-form--compact textarea{min-height:72px}
.colma-form--compact .colma-duo{gap:10px}
.colma-form--compact button{padding:13px 18px;font-size:16.5px}
.colma-form--compact .colma-form-pied{font-size:12.5px}

/* ---------- encart meteo ---------- */
.colma-meteo{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(26px,3.4vw,52px);align-items:center}
.colma-meteo-intro p{margin:0 0 16px}
.colma-meteo-source{font-size:14.5px;line-height:1.5;color:rgba(251,248,242,.55)}
.colma-meteo-jours{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.colma-meteo-jour{
  background:var(--ink-soft);border:1px solid rgba(251,248,242,.10);border-radius:18px;
  padding:20px 14px 18px;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;
}
.colma-meteo-jour.est-aujourdhui{background:#232829;border-color:rgba(107,171,69,.55)}
.colma-meteo-tete{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.colma-meteo-jour-nom{
  font-family:var(--titre);font-weight:700;font-size:15px;
  letter-spacing:.02em;text-transform:capitalize;
}
.colma-meteo-jour.est-aujourdhui .colma-meteo-jour-nom{color:var(--vert)}
.colma-meteo-jour-date{font-size:13px;color:rgba(251,248,242,.55)}
.colma-meteo-icone{display:block;color:var(--vert);margin-bottom:10px}
.colma-meteo-icone svg{width:46px;height:46px;display:block}
.colma-meteo-jour.est-humide .colma-meteo-icone{color:#8FC7E8}
.colma-meteo-ciel{font-size:14px;line-height:1.35;color:rgba(251,248,242,.78);margin:0 0 8px}
.colma-meteo-temp{
  font-family:var(--titre);letter-spacing:-.02em;margin:0 0 10px;
  display:flex;align-items:baseline;gap:7px;
}
.colma-meteo-temp strong{font-size:27px;font-weight:700}
.colma-meteo-temp span{font-size:16px;font-weight:500;color:rgba(251,248,242,.55)}
.colma-meteo-pluie{font-size:13px;line-height:1.4;color:rgba(251,248,242,.62);margin:0 0 12px}
.colma-meteo-conseil{
  margin:auto 0 0;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--vert);border-top:1px solid rgba(251,248,242,.12);padding-top:12px;width:100%;
}
.colma-meteo-jour.est-humide .colma-meteo-conseil{color:#8FC7E8}
.colma-meteo-attente{font-size:16px;color:rgba(251,248,242,.7);margin:0}

/* ---------- simulateur de prix ---------- */
.colma-simu{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3vw,44px);align-items:start}
.colma-simu-champs{display:flex;flex-direction:column;gap:26px;background:#FFFFFF;border:1px solid rgba(21,25,26,.10);border-radius:18px;padding:clamp(22px,2.6vw,34px)}
.colma-simu-label{font-family:var(--titre);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:rgba(21,25,26,.7);margin:0 0 12px}
.colma-simu-tete{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between}
.colma-simu-valeur{font-family:var(--titre);font-weight:700;font-size:19px;color:var(--vert)}
.colma-simu-choix{display:flex;flex-wrap:wrap;gap:10px}
.colma-simu-opt{
  font-family:var(--corps);font-size:16px;font-weight:500;
  background:var(--creme-2);color:var(--ink);border:1px solid rgba(21,25,26,.12);
  border-radius:999px;padding:11px 18px;min-height:44px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.colma-simu-opt:hover{transform:translateY(-2px)}
.colma-simu-opt.est-actif{background:var(--vert);border-color:var(--vert);color:var(--ink);font-weight:700}
.colma-simu-note{font-size:15.5px;line-height:1.5;color:rgba(21,25,26,.66);margin:12px 0 0}
.colma-simu-bornes{display:flex;justify-content:space-between;font-size:14px;color:rgba(21,25,26,.6);margin-top:8px}
.colma-simu input[type="range"]{width:100%;accent-color:var(--vert);height:28px;cursor:pointer}
.colma-simu-resultat{
  background:var(--ink);color:var(--creme);border-radius:18px;
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;
  position:sticky;top:104px;
}
.colma-simu-chapeau{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,248,242,.6);margin:0}
.colma-simu-prix{font-family:var(--titre);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;color:var(--vert);margin:0}
.colma-simu-detail{font-size:16.5px;line-height:1.55;margin:0}
.colma-simu-mention{font-size:14.5px;line-height:1.55;color:rgba(251,248,242,.66);margin:0}
.colma-simu-cta{
  display:inline-flex;align-items:center;justify-content:center;margin-top:6px;
  background:var(--vert);color:var(--ink)!important;text-decoration:none;
  font-family:var(--titre);font-weight:700;font-size:18px;
  padding:16px 22px;border-radius:12px;min-height:44px;transition:transform .2s ease;
}
.colma-simu-cta:hover{transform:translateY(-3px)}
.colma-simu-tel{font-size:16px;color:var(--vert);text-align:center}

/* ============ MOUVEMENTS ============
   2026-10-02 au soir (« retire les animations ça alourdit trop le site ») : plus d'apparition au
   défilement, plus d'arrivée animée de la bannière, plus de trait vert sous les titres de section.
   Restent le zoom des visuels de cartes au survol de la souris et l'éclaircissement des boutons. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .colma-content article[style*="overflow: hidden"] img,
  .colma-content a[style*="overflow: hidden"] img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
  .colma-content article[style*="overflow: hidden"]:hover img,
  .colma-content a[style*="overflow: hidden"]:hover img{transform:scale(1.06)}
  .colma-tel:hover,.colma-form button:hover{filter:brightness(1.05)}
}

/* ============ RESPONSIVE (toujours en dernier) ============ */

/* grilles de sections : on plafonne le nombre de colonnes */
@media (max-width:1100px){
  .colma-content [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:980px){
  .colma-content [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .colma-content [style*="grid-template-columns: 1fr 1fr"],
  .colma-content [style*="grid-template-columns: 1.25fr 0.75fr"],
  .colma-content [style*="grid-template-columns: 0.85fr 1.15fr"],
  .colma-content [style*="grid-template-columns: 1.15fr 0.85fr"],
  .colma-content [style*="grid-template-columns: 0.8fr 1.2fr"],
  .colma-content [style*="grid-template-columns: 1.2fr 0.8fr"],
  .colma-content [style*="grid-template-columns: 0.95fr 1.05fr"],
  .colma-content [style*="grid-template-columns: 1.05fr 0.95fr"],
  .colma-content [style*="grid-template-columns: 1.1fr 0.9fr"],
  .colma-content [style*="grid-template-columns: 0.9fr 1.1fr"],
  .colma-content [style*="grid-template-columns: 0.62fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}

  /* l'image passe toujours au-dessus du texte */
  .colma-content [style*="display: grid"]>img,
  .colma-content [style*="display: grid"]>div:has(>img:only-child),
  .colma-content [style*="display: grid"]>div:has(>svg){order:-1}

  /* plus de colonne collante quand tout est empile */
  .colma-content [style*="position: sticky"]{position:static!important}
  .colma-content [style*="min-height: 720px"]{min-height:0!important}
  .colma-content [style*="min-height: 520px"],
  .colma-content [style*="min-height: 480px"],
  .colma-content [style*="min-height: 460px"],
  .colma-content [style*="min-height: 420px"],
  .colma-content [style*="min-height: 400px"]{min-height:240px!important}
  .colma-content img[style*="height: 420px"],
  .colma-content img[style*="height: 340px"]{height:240px!important}
  .colma-content [style*="height: 500px"]{height:260px!important}
  .colma-footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .colma-devis>div{grid-template-columns:minmax(0,1fr)}
  .colma-simu{grid-template-columns:minmax(0,1fr)}
  .colma-simu-resultat{position:static}
  .colma-meteo{grid-template-columns:minmax(0,1fr)}
  .colma-meteo-jours{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* borne basse pour ne pas ecraser la regle 640px ecrite plus haut */
@media (max-width:900px) and (min-width:641px){
  .colma-meteo{grid-template-columns:minmax(0,1fr)}
  .colma-meteo-jours{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .colma-burger{display:flex}
  .colma-cta-mobile{
    display:inline-flex;align-items:center;margin:10px 0 10px auto;
    background:var(--vert);color:var(--ink)!important;text-decoration:none;
    font-family:var(--titre);font-weight:700;font-size:15px;
    padding:0 16px;min-height:44px;border-radius:10px;white-space:nowrap;
  }
  .colma-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--ink);border-top:1px solid rgba(251,248,242,.14);
    padding:8px 20px 18px;display:none;
  }
  body.home .colma-header.is-scrolled .colma-nav{background:var(--creme);border-top-color:rgba(21,25,26,.12)}
  .colma-header.is-open .colma-nav{display:flex}
  .colma-nav a{padding:14px 0;min-height:44px;font-size:17px}
  .colma-tel{margin:10px 0 0;justify-content:center}
  /* sous-menu : en accordeon, ouvert au clic seulement */
  .colma-groupe{display:block}
  .colma-groupe-btn{width:100%;justify-content:space-between;padding:14px 0;min-height:44px;font-size:17px}
  .colma-tiroir{position:static;min-width:0;border:0;border-radius:0;padding:0 0 8px 14px;background:none}
  .colma-groupe:hover>.colma-tiroir,.colma-groupe:focus-within>.colma-tiroir{display:none}
  .colma-groupe.est-ouvert>.colma-tiroir{display:flex}
  .colma-tiroir a{padding:11px 0;font-size:16px}
  body.home .colma-header.is-scrolled .colma-tiroir{background:none}
}
@media (max-width:640px){
  .colma-content [style*="grid-template-columns: repeat(4, 1fr)"],
  .colma-content [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .colma-content section>div{padding-top:52px!important;padding-bottom:52px!important}
  /* l'en-tete de l'accueil est fixe : la banniere doit passer dessous.
     Le bandeau d'informations s'ajoute a la hauteur de l'en-tete. */
  body.home .colma-content #hero>div{padding-top:180px!important}
  /* adresse et telephone doivent tenir sur une meme ligne : sans cela le bandeau
     passe a trois lignes et l'en-tete fixe mange un quart de l'ecran. */
  .colma-bandeau-in{justify-content:center;text-align:center;padding:6px 14px;font-size:12.5px;gap:2px 12px}
  .colma-bandeau-nom{font-size:12.5px;letter-spacing:.06em}
  .colma-bandeau-item{gap:6px}
  .colma-bandeau-item svg{width:14px;height:14px}
  .colma-devis>div{grid-template-columns:minmax(0,1fr)}
  .colma-content [style*="gap: 48px"],
  .colma-content [style*="gap: 52px"],
  .colma-content [style*="gap: 56px"],
  .colma-content [style*="gap: 40px"]{gap:26px!important}
  .colma-content [style*="padding: 32px"],
  .colma-content [style*="padding: 34px 32px 36px"],
  .colma-content [style*="padding: 30px"]{padding:22px!important}
  .colma-form .colma-duo{grid-template-columns:minmax(0,1fr)}
  .colma-footer .colma-shell{padding:44px 20px 24px}
  .colma-footer-carte{margin-top:26px}
  .colma-footer-carte iframe{height:220px}
  .colma-footer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .colma-footer-bas{padding:18px 20px 30px}
  .colma-header .colma-shell{padding:0 18px}
  .colma-nav{padding:8px 18px 18px}
}

/* les grilles ne doivent jamais forcer une piste plus large que l'ecran */
.colma-content [style*="display: grid"]>*{min-width:0}

/* ============ HIERARCHIE DES TITRES SUR PETIT ECRAN ============
   Le design fige les tailles en style inline : converties en clamp() seulement
   au-dessus de 32px, les H3 de 24 a 30px restaient a leur taille de bureau et
   finissaient plus gros que les H2. On impose donc une echelle nette.
   A garder en dernier dans la feuille. */
@media (max-width:900px){
  .colma-content h1{font-size:clamp(34px,7.2vw,46px)!important;line-height:1.05!important}
  .colma-content h2{font-size:clamp(28px,5.8vw,36px)!important;line-height:1.1!important}
  .colma-content h3{font-size:clamp(20px,3.4vw,25px)!important;line-height:1.22!important}
  /* titres de cartes rendus en <span> par le design */
  .colma-content article>div>span[style*="font-family: 'Archivo'"],
  .colma-content article>span[style*="font-family: 'Archivo'"]{font-size:clamp(19px,3.2vw,22px)!important}
  .colma-simple h1{font-size:clamp(30px,6.4vw,42px)!important}
  .colma-simple h2{font-size:clamp(23px,4.6vw,28px)!important}
}