/* ══════════════════════════════════════════════════════════════
   ATMO - Feuille des pages du site
   Complète style.css. Couleurs et typographie viennent de là :
   rien n'est redéfini ici sans raison.

   RÈGLE DE CONSTRUCTION
   Elementor 4 convertit les conteneurs importés et perd au passage
   leur champ « Classes CSS ». Les classes posées sur les WIDGETS,
   elles, survivent. Toutes les classes ci-dessous s'appliquent donc
   à des widgets - jamais à un conteneur. La mise en page (largeurs,
   écarts, bordures, fonds) est réglée dans Elementor, pas ici.
   ══════════════════════════════════════════════════════════════ */

:root{
  --atmo-fond:    #fbf8f4;
  --atmo-surface: #ffffff;
  --atmo-taupe:   #8a7166;
  --atmo-trait:   #e3d9cd;
  --atmo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body{ background:var(--atmo-fond); }

/* Aucun défilement latéral, jamais.

   Trois éléments sortent volontairement de la boîte de contenu pour
   toucher les deux bords de l'écran : le ruban de logos, le ruban de
   chantiers et le bandeau de carte. Ils se calent sur la largeur de
   la fenêtre, et selon le rembourrage de leur conteneur ils la
   dépassent de quelques pixels. Sur téléphone, ces quelques pixels
   suffisent : la page se laisse tirer de côté et paraît décentrée
   dès qu'on fait défiler un peu vite.

   « clip » plutôt que « hidden » : hidden crée une zone défilante
   qui casse les éléments épinglés - l'en-tête, en l'occurrence.
   clip se contente de couper ce qui dépasse, sans rien changer
   d'autre. */
/* On coupe sur le CONTENU, pas sur la fenêtre. Posée sur html ou
   body, la coupure rogne aussi les éléments collés au bord de
   l'écran - la pastille « Gérer le consentement » de Complianz en
   premier. Le contenu de la page, lui, peut être coupé sans
   conséquence : rien n'en sort légitimement. */
#content, .site-main{ overflow-x:clip; }

/* Échelle de titres du site : un cran sous celle des visuels sociaux,
   qui écrasaient tout sur une page longue. */
.atmo-page h1{ font-size:clamp(34px,4.4vw,58px); }
.atmo-page h2{ font-size:clamp(27px,3.3vw,44px); }
.atmo-page h3{ font-size:clamp(19px,1.7vw,24px); }

/* --- Chapô ---------------------------------------------------- */
.atmo-lead{ font-size:clamp(17px,1.3vw,20px); color:var(--atmo-taupe); max-width:62ch; }
.atmo-lead p{ margin-bottom:0; }

/* --- Lien fléché ---------------------------------------------- */
.atmo-lien a{
  font-weight:800; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--atmo-orange-texte); text-decoration:none;
}
.atmo-lien a:hover{ color:var(--atmo-bordeaux); }

/* --- Boutons --------------------------------------------------
   La classe habille un lien nu comme un widget Bouton. Sur un widget,
   elle atterrit sur l'enveloppe, large de 100 % : on la neutralise,
   et le lien à l'intérieur reçoit tout. Le !important tranche face à
   la couleur d'accentuation par défaut d'Elementor. */
.elementor-widget-button.atmo-btn,
.elementor-widget-button.atmo-btn > .elementor-widget-container{
  background:none; border:0; padding:0; border-radius:0;
  display:block; width:100%;
}
.atmo-btn .elementor-button{
  background-color:var(--atmo-orange)!important;
  color:#fff!important; border:0!important;
  border-radius:var(--atmo-pilule)!important;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:1.15em 2.4em;
}
.atmo-btn .elementor-button:hover{ background-color:var(--atmo-bordeaux)!important; }
.atmo-btn--ligne .elementor-button{
  background-color:transparent!important; border:2px solid currentColor!important;
}

/* ══════════════════════════════════════════════════════════════
   BANDEAU - widget Diaporama d'Elementor Pro
   ══════════════════════════════════════════════════════════════ */

/* Les réglages de typographie et de bouton saisis dans le JSON ne
   survivent pas à l'import : ils sont donc posés ici, sur la classe
   du widget - la seule chose qu'Elementor 4 conserve à coup sûr. */

/* Le contenu du volet s'aligne sur la largeur de contenu du site
   (1240 px centrés) au lieu de coller au bord de l'écran. Le fond,
   lui, reste plein cadre. */
.atmo-diaporama .swiper-slide-inner{
  align-items:center!important;          /* centré en hauteur */
  padding-left:clamp(24px,6vw,120px)!important;
  padding-right:clamp(24px,6vw,120px)!important;
  padding-block:clamp(70px,9vw,110px)!important;
}

/* Voile en dégradé, comme sur la maquette : transparent en haut pour
   laisser respirer la photo, sombre en bas pour que le texte tienne. */
.atmo-diaporama .swiper-slide .elementor-background-overlay{
  background-color:transparent!important;
  /* Deux couches : l'une pousse le sombre vers la gauche, là où se
     trouve le texte ; l'autre pose un pied plus dense en bas. La
     droite de la photo reste dégagée. */
  background-image:
    linear-gradient(100deg,
      rgba(58,12,12,.93)  0%,
      rgba(58,12,12,.78) 22%,
      rgba(58,12,12,.44) 46%,
      rgba(58,12,12,.12) 66%,
      rgba(58,12,12,0)   80%),
    linear-gradient(0deg,
      rgba(58,12,12,.55)  0%,
      rgba(58,12,12,.22) 26%,
      rgba(58,12,12,0)   55%)!important;
  opacity:1!important;
}

/* La pastille de catégorie, reconstituée devant le titre : le widget
   Diaporama n'a pas de champ pour elle.

   En mode boucle, Swiper duplique les volets en tête et en queue :
   viser par position (:nth-child) tombe à côté une fois sur deux.
   On vise donc data-swiper-slide-index, que Swiper pose aussi sur
   les clones - avec un repli par position si la boucle est coupée. */
.atmo-diaporama .elementor-slide-heading::before{
  content:"Cheminées";
  background-image:url(img/picto-cheminees-fonce.png);
  display:flex; width:fit-content; align-items:center;
  background-color:var(--atmo-creme); color:var(--atmo-bordeaux);
  font-family:var(--atmo-police); font-weight:800;
  font-size:clamp(11px,.95vw,14px); letter-spacing:.14em; line-height:1;
  text-transform:uppercase;
  padding:.9em 1.6em .9em 3.2em; border-radius:var(--atmo-pilule);
  margin-bottom:22px;
  background-repeat:no-repeat; background-position:1.2em center;
  /* Hauteur imposée, largeur libre : le picto pompe à chaleur est un
     thermomètre, bien plus haut que large. Le contraindre en largeur
     le faisait dépasser de la pastille. */
  background-size:auto 1.45em;
}
.atmo-diaporama .swiper-slide:nth-child(2) .elementor-slide-heading::before,
.atmo-diaporama .swiper-slide[data-swiper-slide-index="1"] .elementor-slide-heading::before{
  content:"Poêles";
  background-image:url(img/picto-bois-fonce.png);
}
.atmo-diaporama .swiper-slide:nth-child(3) .elementor-slide-heading::before,
.atmo-diaporama .swiper-slide[data-swiper-slide-index="2"] .elementor-slide-heading::before{
  content:"Pompes à chaleur";
  background-image:url(img/picto-pac-fonce.png);
}
.atmo-diaporama .swiper-slide[data-swiper-slide-index="0"] .elementor-slide-heading::before{
  content:"Cheminées";
  background-image:url(img/picto-cheminees-fonce.png);
}

.atmo-diaporama .elementor-slide-heading{
  font-family:var(--atmo-police)!important;
  font-weight:900!important;
  font-size:clamp(34px,4.6vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.005em!important;
  text-transform:uppercase!important;
  color:var(--atmo-creme)!important;
  text-wrap:balance;
  margin-bottom:16px!important;
}

.atmo-diaporama .elementor-slide-description{
  font-family:var(--atmo-police)!important;
  font-weight:300!important;
  font-size:clamp(16px,1.3vw,19px)!important;
  line-height:1.6!important;
  color:rgba(242,233,221,.82)!important;
  max-width:56ch;
  margin-bottom:26px!important;
}

/* Le bouton du Diaporama garde sinon le contour blanc à angles droits
   du style par défaut d'Elementor. */
.atmo-diaporama .elementor-slide-button,
.atmo-diaporama .elementor-button{
  background-color:var(--atmo-orange)!important;
  color:#fff!important;
  border:0!important;
  border-radius:var(--atmo-pilule)!important;
  padding:1.15em 2.4em!important;
  font-family:var(--atmo-police)!important;
  font-weight:800!important;
  font-size:clamp(13px,1.05vw,14px)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  transition:background-color .18s ease, transform .18s ease;
}
.atmo-diaporama .elementor-slide-button:hover,
.atmo-diaporama .elementor-button:hover{
  background-color:var(--atmo-bordeaux)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
.atmo-diaporama .elementor-swiper-button{
  width:38px!important; height:38px!important; border-radius:999px!important;
  border:1.5px solid rgba(242,233,221,.5)!important;
  display:flex!important; align-items:center; justify-content:center;
  margin:0!important;
  transition:background .18s ease, border-color .18s ease;
}
.atmo-diaporama .elementor-swiper-button i,
.atmo-diaporama .elementor-swiper-button svg{
  font-size:15px!important; width:15px; height:15px;
}
.atmo-diaporama .elementor-swiper-button:hover{
  background:rgba(242,233,221,.16)!important;
  border-color:rgba(242,233,221,.9)!important;
}

/* Les deux flèches se rangent ensemble dans le coin bas droit, alignées
   sur le bord du contenu, plutôt qu'à cheval sur les bords de l'écran.
   Elementor positionne les siennes dans une feuille plus spécifique :
   d'où les « !important ». */
@media (min-width:768px){
  .atmo-diaporama .elementor-swiper-button-prev,
  .atmo-diaporama .elementor-swiper-button-next{
    top:auto!important; bottom:34px!important; left:auto!important;
    transform:none!important;
  }
  .atmo-diaporama .elementor-swiper-button-prev{
    right:max(84px, calc(50% - 620px + 84px))!important;
  }
  .atmo-diaporama .elementor-swiper-button-next{
    right:max(32px, calc(50% - 620px + 32px))!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RÉASSURANCE
   ══════════════════════════════════════════════════════════════ */

.atmo-rea b, .atmo-rea strong{
  font-weight:900; font-size:14px; letter-spacing:.03em; text-transform:uppercase;
  display:block; margin-bottom:5px;
}
.atmo-rea p{ font-size:14px; color:#7c5f52; margin:0; }

/* ══════════════════════════════════════════════════════════════
   UNIVERS
   ══════════════════════════════════════════════════════════════ */

/* Les photos des trois univers passaient en 4/5 : trop hautes, elles
   écrasaient le texte de la carte. Le carré les calme sans leur faire
   perdre leur présence. Pour ajuster : changer le rapport ci-dessous. */
.atmo-univ-photo img{
  aspect-ratio:1/1; width:100%; object-fit:cover;
  border-radius:16px 16px 0 0; display:block;
}
@media (max-width:767px){
  .atmo-univ-photo img{ aspect-ratio:4/3; }
}
.atmo-univ-texte p{ font-size:15.5px; color:var(--atmo-taupe); margin:0; }

/* GALET DÉPOSÉ À LA MAIN
   Emplacement libre : un widget Image portant la classe atmo-galet-img
   se place tout seul en débord sur la photo. Tu y mets le PNG que tu
   veux - forme seule ou forme + picto - sans rien avoir à régler.
   La largeur se pilote depuis Elementor si besoin (Style → Largeur). */
.atmo-galet-img{
  position:absolute!important; top:-58px; right:20px; z-index:3;
  width:88px;
}
.atmo-galet-img .elementor-widget-container{ line-height:0; }
.atmo-galet-img img{ width:100%; height:auto; display:block; }

@media (max-width:767px){
  .atmo-galet-img{ width:70px; top:-46px; }
}

/* LE GALET
   C'est le PNG fourni par la designer, posé tel quel : ni redessiné,
   ni redécoupé, ni recoloré. Il a déjà sa transparence et sa couleur
   bordeaux. Le picto vient par-dessus, en version claire.
   Le tracé SVG resté dans le widget n'est plus utilisé. */
.atmo-galet{
  position:absolute; top:-58px; right:20px; z-index:3;
  width:88px; height:90px; display:block;
  background:url(img/galet.png) center/contain no-repeat;
}
.atmo-galet svg{ display:none; }
.atmo-galet::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:42%; height:42%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.atmo-galet--cheminees::after{ background-image:url(img/picto-cheminees-clair.png); }
.atmo-galet--bois::after{      background-image:url(img/picto-bois-clair.png); }
.atmo-galet--pac::after{       background-image:url(img/picto-pac-clair.png); }
.atmo-galet--neuf::after{      background-image:url(img/picto-neuf-clair.png); }

/* La classe « foncée » n'a plus de rôle - le galet fourni est déjà
   bordeaux - mais on la garde pour ne rien casser dans le modèle. */
.atmo-galet--fonce{ background-color:transparent; }

/* ══════════════════════════════════════════════════════════════
   CONCEPTION SUR MESURE
   ══════════════════════════════════════════════════════════════ */

/* PASTILLE DÉPOSÉE À LA MAIN
   Emplacement libre pour le médaillon « références » : un widget Image
   portant la classe atmo-pastille-img prend la bonne taille et reste
   centré. Le texte circulaire d'origine est abandonné - un tracé
   circulaire coupe les mots dès qu'on change la longueur de la phrase. */
.atmo-pastille-img{ width:200px; max-width:100%; }
.atmo-pastille-img .elementor-widget-container{ line-height:0; }
.atmo-pastille-img img{ width:100%; height:auto; display:block; }

@media (max-width:767px){
  .atmo-pastille-img{ width:150px; }
}

.atmo-pastille{ position:relative; width:190px; height:190px; }
.atmo-pastille svg{ width:100%; height:100%; animation:atmo-tourne 22s linear infinite; }
.atmo-pastille text{
  font-family:var(--atmo-police); font-weight:800;
  font-size:15px; letter-spacing:.13em; text-transform:uppercase;
  fill:var(--atmo-orange-texte);
}
.atmo-galet.atmo-pastille-galet{
  position:absolute; inset:0; margin:auto; top:0; right:0;
  width:86px; height:88px;
}
@keyframes atmo-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .atmo-pastille svg{ animation:none; } }

/* Les échantillons de matière filent vers le bas et glissent derrière
   l'iMac : ce qu'on en voit devient une bande verticale, plus lisible
   qu'une vignette carrée. Pour les rallonger ou les raccourcir, c'est
   la hauteur ci-dessous. */
.atmo-matiere img{
  width:100%; height:300px; object-fit:cover; border-radius:14px; display:block;
}
@media (max-width:1024px){ .atmo-matiere img{ height:210px; } }
@media (max-width:767px){  .atmo-matiere img{ height:150px; } }
/* L'écran est désormais un visuel d'iMac détouré, avec son propre pied :
   ni recadrage, ni coins arrondis, ni socle dessiné par le thème.
   Le petit socle beige d'avant a donc disparu. */
.atmo-ecran img{
  width:100%; height:auto; aspect-ratio:auto;
  object-fit:contain; border-radius:0; display:block;
}

/* L'iMac remonte sur la rangée de matières et passe devant elle.
   Le chevauchement se règle ici ; pour l'ajuster, c'est aussi
   possible dans Elementor, sur le widget image : Avancé > Marge haute. */
.atmo-ecran{ position:relative; z-index:3; margin-top:-170px; }
.atmo-matiere{ position:relative; z-index:1; }

@media (max-width:1024px){
  .atmo-ecran{ margin-top:-100px; }
}
@media (max-width:767px){
  .atmo-ecran{ margin-top:-40px; }
}

/* ══════════════════════════════════════════════════════════════
   HISTOIRE
   ══════════════════════════════════════════════════════════════ */

/* Les trois chiffres sont désormais de vrais widgets Titre, donc
   modifiables à la souris. Ces deux classes leur donnent l'allure de
   la maquette : le nombre en 900, le libellé en petites capitales. */
.atmo-chiffre-nb h1, .atmo-chiffre-nb h2, .atmo-chiffre-nb h3,
.atmo-chiffre-nb h4, .atmo-chiffre-nb div, .atmo-chiffre-nb span{
  font-weight:900!important; font-size:clamp(24px,2.6vw,34px)!important;
  line-height:1!important; color:var(--atmo-bordeaux);
  letter-spacing:-.01em; text-transform:none;
}
.atmo-chiffre-lb h1, .atmo-chiffre-lb h2, .atmo-chiffre-lb h3,
.atmo-chiffre-lb h4, .atmo-chiffre-lb div, .atmo-chiffre-lb span{
  font-weight:400!important; font-size:13px!important;
  letter-spacing:.06em!important; text-transform:uppercase!important;
  color:var(--atmo-taupe)!important; line-height:1.3!important;
}

/* Un conteneur Elementor prend 100 % de large par défaut : les trois
   chiffres se retrouvaient donc empilés. On rend leur largeur libre en
   ciblant le conteneur par ce qu'il contient. */
.e-con:has(> .atmo-chiffre-nb){
  width:auto!important; flex:0 0 auto!important; padding-right:38px;
}
.e-con:has(> .e-con > .atmo-chiffre-nb){
  flex-direction:row!important; flex-wrap:wrap!important;
}

/* Ancien bloc en HTML, conservé pour les pages pas encore reprises. */
.atmo-chiffres{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); }
.atmo-chiffres > div{ display:flex; flex-direction:column; }
.atmo-chiffres b{ font-weight:900; font-size:clamp(24px,2.6vw,34px); line-height:1; }
.atmo-chiffres span{ font-size:13px; letter-spacing:.06em; text-transform:uppercase;
                     color:var(--atmo-taupe); }
.atmo-histoire-photo img{
  width:100%; height:100%; min-height:440px; object-fit:cover; display:block;
}

/* ══════════════════════════════════════════════════════════════
   RÉALISATIONS
   ══════════════════════════════════════════════════════════════ */

.atmo-real img{ width:100%; object-fit:cover; border-radius:14px; display:block; }
.atmo-real-grand img{ height:386px; }
.atmo-real-petit img{ height:186px; }

/* ══════════════════════════════════════════════════════════════
   ÉTAPES
   ══════════════════════════════════════════════════════════════ */

.atmo-num{
  font-family:var(--atmo-mono); font-size:12.5px; letter-spacing:.14em;
  color:var(--atmo-orange-texte); font-weight:700;
}
.atmo-etape-texte p{ font-size:15px; color:var(--atmo-taupe); margin:0; }

/* ══════════════════════════════════════════════════════════════
   MARQUES - widget Carrousel d'images
   ══════════════════════════════════════════════════════════════ */

/* Fond sombre pour la bande des marques : les logos fournis sont
   blancs, ils disparaissaient sur le fond clair. La section n'a pas de
   classe - Elementor les perd à l'import - alors on la désigne par ce
   qu'elle contient. */
.elementor > .e-con:has(.atmo-logos-carrousel){
  background-color:var(--atmo-bordeaux)!important;
}
.elementor > .e-con:has(.atmo-logos-carrousel) .elementor-heading-title{
  color:var(--atmo-creme)!important;
}
.elementor > .e-con:has(.atmo-logos-carrousel) .atmo-kicker .elementor-heading-title{
  color:var(--atmo-orange-clair)!important;
}
.elementor > .e-con:has(.atmo-logos-carrousel) .atmo-lead,
.elementor > .e-con:has(.atmo-logos-carrousel) .atmo-lead p{
  color:rgba(242,233,221,.78)!important;
}

/* Sur fond sombre, le passage en gris n'a plus de sens : les logos
   blancs restent blancs. On joue seulement sur l'opacité. */
.elementor > .e-con:has(.atmo-logos-carrousel) .swiper-slide img{
  filter:none!important; opacity:.78;
}
.elementor > .e-con:has(.atmo-logos-carrousel):hover .swiper-slide img{
  opacity:1;
}

/* Le ruban de logos sort de la boîte de contenu et prend toute la
   largeur de la fenêtre : sinon il s'arrête net au bord du contenu et
   le dernier logo semble coupé. Les deux extrémités s'effacent en
   fondu, pour que les logos entrent et sortent au lieu de disparaître
   d'un coup. */
.atmo-logos-carrousel{
  width:100vw!important; max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* Le conteneur qui porte le ruban ne doit pas le rogner. */
.elementor > .e-con:has(.atmo-logos-carrousel){ overflow:hidden; }

.atmo-logos-carrousel .swiper-slide img{
  height:58px; width:auto; margin:0 auto; object-fit:contain;
  filter:grayscale(1); opacity:.62;
  transition:filter .2s ease, opacity .2s ease;
}
.atmo-logos-carrousel:hover .swiper-slide img{ filter:none; opacity:1; }

/* Le défilement doit être régulier : sans cette ligne, Swiper applique
   sa courbe d'accélération par défaut et le ruban avance par vagues. */
.atmo-logos-carrousel .swiper-wrapper{
  transition-timing-function:linear!important;
}

/* Ni flèches ni points : le ruban avance seul. */
.atmo-logos-carrousel .elementor-swiper-button,
.atmo-logos-carrousel .swiper-pagination{ display:none!important; }

/* ══════════════════════════════════════════════════════════════
   ACTUALITÉS
   ══════════════════════════════════════════════════════════════ */

.atmo-actu-photo img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:14px; display:block;
}
.atmo-meta{
  font-family:var(--atmo-mono); font-size:11.5px; color:#a08a7d; letter-spacing:.06em;
}
.atmo-actu-titre h3{ font-size:19px!important; }
.atmo-actu-texte p{ font-size:14.5px; color:var(--atmo-taupe); margin:0; }

/* ══════════════════════════════════════════════════════════════
   APPEL - coordonnées
   ══════════════════════════════════════════════════════════════ */

.atmo-coord b{ font-weight:900; font-size:14px; letter-spacing:.1em;
               text-transform:uppercase; display:block; }
.atmo-coord p{ margin:0 0 .9em; }

/* ══════════════════════════════════════════════════════════════
   EN-TÊTE ET PIED DE PAGE DU THEME BUILDER
   ══════════════════════════════════════════════════════════════ */

/* Le sélecteur vise toutes les balises de titre : le pied est passé de
   h3 à h4 en cours de route, et la règle ne mordait plus. */
.atmo-pied-titre h1, .atmo-pied-titre h2, .atmo-pied-titre h3,
.atmo-pied-titre h4, .atmo-pied-titre h5, .atmo-pied-titre h6{
  font-size:13px!important; letter-spacing:.12em!important;
  line-height:1.3!important; margin:0 0 4px!important;
}
.atmo-pied-liste{ list-style:none; margin:0; padding:0; }
.atmo-pied-liste li{ margin-bottom:.5em; font-size:14.5px; line-height:1.5; }
.atmo-pied-liste a{
  color:var(--atmo-taupe); text-decoration:none; font-size:14.5px;
  transition:color .18s ease;
}
.atmo-pied-liste a:hover{ color:var(--atmo-orange-texte); }
.atmo-pied-bas p{ font-size:13px; opacity:.75; margin:0; }
.atmo-pied-centre, .atmo-pied-centre p{ text-align:center; }

/* Téléphone et courriel de la colonne « Notre localisation » :
   cliquables, donc en orange, mais sans soulignement. */
.atmo-pied-joindre{ margin-top:.9em!important; }
.atmo-pied-joindre a{
  color:var(--atmo-orange-texte)!important; text-decoration:none;
}
.atmo-pied-joindre a:hover{ color:var(--atmo-bordeaux)!important; }
.atmo-pied-bas a{ color:var(--atmo-taupe); text-decoration:none; }
.atmo-pied-bas a:hover{ color:var(--atmo-orange-texte); }

/* ══════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width:767px){
  .atmo-univ-galet{ width:64px; height:64px; top:-54px; }
  .atmo-univ-galet img{ width:34px; }
  .atmo-histoire-photo img{ min-height:280px; }
  .atmo-real-grand img,.atmo-real-petit img{ height:210px; }
  .atmo-pastille{ width:150px; height:150px; }
}

/* ══════════════════════════════════════════════════════════════
   BANDEAU SUR MOBILE
   Les flèches chevauchaient le texte et le libellé du bouton
   partait sur trois lignes. Sur mobile on balaie du doigt :
   les flèches ne servent à rien.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:767px){
  .atmo-diaporama .swiper-slide-inner{
    padding-inline:24px!important;
    padding-block:64px!important;
  }
  .atmo-diaporama .elementor-slide-heading{
    font-size:30px!important; margin-bottom:12px!important;
  }
  .atmo-diaporama .elementor-slide-description{
    font-size:15px!important; line-height:1.5!important;
    margin-bottom:20px!important;
  }
  .atmo-diaporama .elementor-slide-button,
  .atmo-diaporama .elementor-button{
    font-size:11.5px!important; letter-spacing:.1em!important;
    padding:1em 1.6em!important;
  }
  .atmo-diaporama .elementor-slide-heading::before{
    padding:.8em 1.3em .8em 2.8em; margin-bottom:16px;
    background-size:auto 1.3em;
  }
}

/* ══════════════════════════════════════════════════════════════
   CADRAGE DES PHOTOS DU BANDEAU
   Sans consigne, le fond d'un volet est calé en haut à gauche :
   sur une photo large, on ne voit que le plafond. On le centre,
   une fois pour toutes et pour toutes les photos à venir.
   ══════════════════════════════════════════════════════════════ */

.atmo-diaporama .swiper-slide-bg,
.atmo-diaporama .swiper-slide{
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* ══════════════════════════════════════════════════════════════
   PIED DE PAGE - liste des métiers avec pictos
   Comme sur la maquette : un petit picto devant chaque métier.
   Les images viennent du CSS, donc en chemin relatif au thème.
   ══════════════════════════════════════════════════════════════ */

.atmo-pied-metiers{ list-style:none; margin:0; padding:0; }
.atmo-pied-metiers li{
  display:flex; align-items:center; gap:10px;
  margin-bottom:.5em; font-size:14.5px; line-height:1.5;
  color:var(--atmo-taupe);
}
.atmo-pied-metiers li::before{
  content:""; flex:0 0 auto; width:19px; height:19px;
  background-repeat:no-repeat; background-position:center;
  background-size:contain; opacity:.9;
}
.atmo-pied-metiers li:nth-child(1)::before{ background-image:url(img/picto-cheminees-fonce.png); }
.atmo-pied-metiers li:nth-child(2)::before{ background-image:url(img/picto-neuf-fonce.png); }
.atmo-pied-metiers li:nth-child(3)::before{ background-image:url(img/picto-bois-fonce.png); }
.atmo-pied-metiers li:nth-child(4)::before{ background-image:url(img/picto-pac-fonce.png); }
.atmo-pied-metiers a{ color:var(--atmo-taupe); text-decoration:none; }
.atmo-pied-metiers a:hover{ color:var(--atmo-orange-texte); }

.atmo-pied-baseline p{
  font-size:14.5px; color:var(--atmo-taupe); max-width:30ch; margin:0;
}

.atmo-pied-adresse p{
  font-size:14.5px; line-height:1.55; color:var(--atmo-taupe);
  max-width:30ch; margin:0;
}

/* ══════════════════════════════════════════════════════════════
   UNE SEULE POLICE SUR TOUT LE SITE
   Tant que les polices globales d'Elementor ne sont pas réglées,
   sa police par défaut (Roboto) s'applique aux titres et aux textes
   des widgets, alors que le bandeau est déjà forcé en Mulish. D'où
   deux typographies côte à côte. On tranche ici.

   Les balises d'icônes (i, svg, eicon, fa) sont volontairement
   exclues : elles ont leur propre police et deviendraient des
   carrés vides.
   ══════════════════════════════════════════════════════════════ */

.atmo-page,
.atmo-page h1, .atmo-page h2, .atmo-page h3,
.atmo-page h4, .atmo-page h5, .atmo-page h6,
.atmo-page p, .atmo-page li, .atmo-page a, .atmo-page blockquote,
.atmo-page .elementor-heading-title,
.atmo-page .elementor-widget-text-editor,
.atmo-page .elementor-button,
.atmo-page .elementor-slide-heading,
.atmo-page .elementor-slide-description,
.atmo-page input, .atmo-page textarea, .atmo-page select, .atmo-page label,
.elementor-location-header .elementor-heading-title,
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-button,
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer p,
.elementor-location-footer li,
.elementor-location-footer a{
  font-family:var(--atmo-police)!important;
}

/* Les titres gardent la graisse de la charte, quoi qu'Elementor propose. */
.atmo-page h1, .atmo-page h2, .atmo-page h3,
.atmo-page .elementor-widget-heading h1 .elementor-heading-title,
.atmo-page .elementor-widget-heading h2 .elementor-heading-title,
.atmo-page .elementor-widget-heading h3 .elementor-heading-title{
  font-weight:var(--atmo-titre-poids)!important;
  text-transform:uppercase;
  letter-spacing:-.005em;
}

/* ══════════════════════════════════════════════════════════════
   GABARIT D'ARTICLE (modèle « Article unique » du Theme Builder)

   Rien n'est écrit en dur : le titre, la catégorie, la date, la photo
   et le corps viennent de l'article WordPress. Cette feuille ne fait
   que les habiller. Les accroches sont toutes des classes de widgets,
   sauf le bandeau et deux boîtes, repérés par leur contenu - un
   conteneur importé n'ayant pas de classe à lui.
   ══════════════════════════════════════════════════════════════ */

/* --- Le bandeau ------------------------------------------------
   Pas de photo : les images mises en avant n'ont pas la définition
   nécessaire pour tenir sur toute la largeur d'un écran. Le fond est
   dessiné ici - dégradé bordeaux, trame diagonale et halo braise -
   donc net partout et sans un octet de plus. Les photos servent aux
   vignettes des cartes.

   Le conteneur du bandeau n'a pas de classe (Elementor 4 les perd à
   l'import) : on le reconnaît au titre d'article qu'il contient. Les
   trois écritures couvrent les structures qu'Elementor peut produire
   selon qu'il génère ou non un conteneur intérieur. */
.e-con:has(> .e-con > .e-con-inner > .atmo-art-titre),
.e-con:has(> .e-con > .atmo-art-titre),
.elementor-location-single > .e-con:has(.atmo-art-titre){
  position:relative; overflow:hidden;
  background-color:var(--atmo-bordeaux-nuit,#3A0C0C)!important;
  background-image:
    /* halo braise en bas à droite */
    radial-gradient(120% 150% at 88% 108%,
      rgba(215,98,39,.34) 0%, rgba(215,98,39,.10) 34%, rgba(215,98,39,0) 62%),
    /* dégradé de fond, sombre à gauche */
    linear-gradient(112deg,
      #300a0a 0%, #45100f 34%, #5E1515 68%, #6d1b18 100%)!important;
  background-repeat:no-repeat, no-repeat!important;
}
/* Le voile d'Elementor ferait doublon avec le dégradé ci-dessus. */
.e-con:has(> .e-con > .e-con-inner > .atmo-art-titre) > .elementor-background-overlay,
.e-con:has(> .e-con > .atmo-art-titre) > .elementor-background-overlay,
.elementor-location-single > .e-con:has(.atmo-art-titre) > .elementor-background-overlay{
  display:none!important;
}

/* La catégorie, en pastille crème comme sur la maquette.
   Le widget Infos sur l'article sort une vraie liste : sans cette
   remise à zéro, une puce apparaît devant la pastille. */
.atmo-art-cat ul, .atmo-art-meta ul{
  margin:0; padding:0; list-style:none;
}
.atmo-art-cat li::marker, .atmo-art-meta li::marker{ content:""; }

/* Les réglages du widget Infos sur l'article ne survivent pas toujours
   à l'import : il repart alors sur ses lignes par défaut (auteur,
   date, heure, commentaires). On n'affiche que ce qui nous intéresse -
   la catégorie dans la pastille, la date dans la ligne du dessous -
   et le reste disparaît sans rien casser. */
.atmo-art-cat .elementor-icon-list-item:not(:has(.elementor-post-info__item--type-terms)){
  display:none!important;
}
.atmo-art-meta .elementor-icon-list-item:not(:has(.elementor-post-info__item--type-date)){
  display:none!important;
}
.atmo-art-cat .elementor-icon-list-item{ margin:0; }
.atmo-art-cat .elementor-post-info__terms-list-item,
.atmo-art-cat .elementor-post-info__item{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--atmo-creme,#EDE1D2); color:var(--atmo-bordeaux)!important;
  border-radius:var(--atmo-pilule,999px);
  padding:.62em 1.25em .62em 1.05em;
  font-size:12.5px; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
}
.atmo-art-cat .elementor-post-info__terms-list-item::before{
  content:""; width:17px; height:17px; flex:0 0 auto;
  background:url(img/picto-cheminees-fonce.png) center/contain no-repeat;
}
.atmo-art-cat .elementor-post-info__item--type-terms{
  background:none; padding:0;
}

.atmo-art-titre h1{
  color:var(--atmo-creme,#EDE1D2)!important;
  max-width:16ch; margin:0; line-height:1.02;
}

.atmo-art-meta,
.atmo-art-meta .elementor-post-info__item{
  font-family:var(--atmo-mono); font-size:12.5px;
  letter-spacing:.05em; color:rgba(237,225,210,.88)!important;
}
.atmo-art-meta .elementor-icon-list-item{ margin:0; }

/* Les pictos du widget restaient bordeaux sur bordeaux : invisibles.
   On les passe en orange clair, la couleur prévue pour un fond foncé. */
.atmo-art-meta .elementor-icon-list-icon i,
.atmo-art-meta .elementor-icon-list-icon svg,
.atmo-art-meta .elementor-icon-list-icon{
  color:var(--atmo-orange-clair)!important;
  fill:var(--atmo-orange-clair)!important;
}
.atmo-art-meta .elementor-icon-list-icon svg{ width:13px; height:13px; }

/* Filet : si les lignes Heure et Commentaires n'ont pas été retirées
   dans le widget, seule la première - la date - reste affichée. */
.atmo-art-meta .elementor-icon-list-item:not(:first-child){ display:none!important; }

/* --- Le corps de l'article -------------------------------------
   Le texte est écrit dans l'éditeur de WordPress : les règles visent
   donc des balises, pas des widgets. */
.atmo-art-corps{ max-width:none; }
.atmo-art-corps h2{
  font-size:clamp(23px,2.4vw,31px)!important;
  color:var(--atmo-bordeaux); text-transform:uppercase;
  margin:2.2em 0 .55em; line-height:1.12;
}
.atmo-art-corps h2:first-child{ margin-top:0; }
.atmo-art-corps h3{
  font-size:clamp(17px,1.5vw,21px)!important;
  color:var(--atmo-bordeaux); margin:1.7em 0 .4em;
}
.atmo-art-corps p{
  font-size:16.5px; line-height:1.75; color:#6f5a50; margin:0 0 1.1em;
}
.atmo-art-corps p b, .atmo-art-corps p strong,
.atmo-art-corps li b, .atmo-art-corps li strong{
  color:var(--atmo-bordeaux); font-weight:800;
}
.atmo-art-corps a{ color:var(--atmo-orange-texte); }

/* Le chapô : premier paragraphe, filet orange à gauche. */
.atmo-art-corps .atmo-chapo,
.atmo-art-corps p.atmo-chapo{
  font-size:19px; line-height:1.6; color:#5a4740;
  border-left:3px solid var(--atmo-orange);
  padding-left:20px; margin-bottom:1.9em;
}

/* Listes à tirets orange. */
.atmo-art-corps ul{ list-style:none; margin:0 0 1.4em; padding:0; }
.atmo-art-corps ul li{
  position:relative; padding-left:26px; margin-bottom:.65em;
  font-size:16px; line-height:1.65; color:#6f5a50;
}
.atmo-art-corps ul li::before{
  content:"-"; position:absolute; left:2px; top:-1px;
  color:var(--atmo-orange); font-weight:900;
}
.atmo-art-corps ol{ margin:0 0 1.4em; padding-left:1.3em; }
.atmo-art-corps ol li{ font-size:16px; line-height:1.65; color:#6f5a50;
  margin-bottom:.65em; }

/* Encadré « à retenir » : fond crème, puces rondes. */
.atmo-art-corps .atmo-retenir{
  background:#F1E7DA; border-radius:16px;
  padding:26px 28px 22px; margin:2em 0;
}
.atmo-art-corps .atmo-retenir > b,
.atmo-art-corps .atmo-retenir > strong{
  display:block; color:var(--atmo-bordeaux); font-weight:900;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:14px;
}
.atmo-art-corps .atmo-retenir ul{ margin:0; }
.atmo-art-corps .atmo-retenir li::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--atmo-orange); left:4px; top:.62em; position:absolute;
}
.atmo-art-corps .atmo-retenir p:last-child{ margin-bottom:0; }

/* Petite fiche de repères, dans le fil du texte. */
.atmo-art-corps .atmo-fiche{
  background:var(--atmo-surface); border:1px solid var(--atmo-trait);
  border-radius:16px; padding:22px 24px; margin:2em 0;
}
.atmo-art-corps .atmo-fiche > b,
.atmo-art-corps .atmo-fiche > strong{
  display:block; color:var(--atmo-bordeaux); font-weight:900;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:12px;
}
.atmo-art-corps .atmo-fiche dl{ margin:0; }
.atmo-art-corps .atmo-fiche dt{
  font-family:var(--atmo-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#a08a7d; margin-top:12px;
}
.atmo-art-corps .atmo-fiche dd{
  margin:2px 0 0; padding-bottom:11px; font-size:15px; color:#6f5a50;
  border-bottom:1px solid var(--atmo-trait);
}
.atmo-art-corps .atmo-fiche dd:last-child{ border-bottom:0; padding-bottom:0; }

/* Citation de client. */
.atmo-art-corps blockquote{
  border:0; border-left:3px solid var(--atmo-orange);
  margin:2em 0; padding:2px 0 2px 22px;
  font-size:19px; line-height:1.55; color:var(--atmo-bordeaux);
}
.atmo-art-corps blockquote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:var(--atmo-mono); font-size:12px; letter-spacing:.05em;
  color:#a08a7d;
}

/* Images posées dans le texte. */
.atmo-art-corps img{ border-radius:16px; height:auto; }
.atmo-art-corps figure{ margin:2em 0; }
.atmo-art-corps figcaption{
  margin-top:9px; font-size:13px; font-style:italic; color:#a08a7d;
}

/* --- Les deux colonnes -----------------------------------------
   La rangée est reconnue au corps d'article qu'elle contient. Ces
   règles ne font que répéter ce que le modèle demande déjà : elles
   servent de filet si un réglage de conteneur s'est perdu à l'import. */
.e-con-inner:has(> .e-con > .atmo-art-corps),
.e-con:has(> .e-con > .atmo-art-corps){
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:flex-start; gap:40px;
}
.e-con:has(> .atmo-art-corps){ width:62%; }
.e-con:has(> .atmo-art-sommaire){ width:32%; }
@media (max-width:1024px){
  .e-con:has(> .atmo-art-corps),
  .e-con:has(> .atmo-art-sommaire){ width:100%; }
}

/* --- La colonne de droite --------------------------------------
   Elle suit la lecture : elle reste visible pendant qu'on descend. */
/* L'en-tête est collant : la colonne doit s'arrêter EN DESSOUS de lui,
   sinon le titre « Dans cet article » passe sous la barre blanche.
   120 px = hauteur de l'en-tête + une respiration. */
.e-con:has(> .atmo-art-sommaire),
.e-con:has(> .e-con-inner > .atmo-art-sommaire){
  position:sticky!important; top:120px!important; align-self:flex-start;
}
@media (max-width:1024px){
  .e-con:has(> .atmo-art-sommaire),
  .e-con:has(> .e-con-inner > .atmo-art-sommaire){ position:static; }
}

.atmo-art-sommaire .elementor-toc__header{
  background:transparent!important; border:0!important; padding:0 0 6px!important;
}
.atmo-art-sommaire .elementor-toc__header-title{
  color:var(--atmo-bordeaux)!important; font-weight:900!important;
  font-size:13px!important; letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.atmo-art-sommaire .elementor-toc__body{
  background:var(--atmo-surface); border:1px solid var(--atmo-trait);
  border-radius:16px; padding:16px 20px 18px!important;
}
.atmo-art-sommaire .elementor-widget-container{
  background:transparent!important; border:0!important; padding:0!important;
}
.atmo-art-sommaire .elementor-toc__list-item{ margin-bottom:9px; }
.atmo-art-sommaire .elementor-toc__list-item-text{
  color:var(--atmo-taupe)!important; font-size:14px; text-decoration:none;
}
.atmo-art-sommaire .elementor-toc__list-item-text:hover,
.atmo-art-sommaire .elementor-toc__list-item.elementor-item-active
  .elementor-toc__list-item-text{
  color:var(--atmo-orange-texte)!important;
}
.atmo-art-sommaire .elementor-toc__list-item::marker{
  color:var(--atmo-orange-texte); font-weight:900;
}
.atmo-art-sommaire .elementor-toc__toggle-button{ display:none; }

/* L'encart d'appel de la colonne : repéré par son titre, faute de
   pouvoir poser une classe sur le conteneur. */
.e-con:has(> .atmo-art-cta-titre),
.e-con:has(> .e-con-inner > .atmo-art-cta-titre){
  background-color:var(--atmo-bordeaux)!important;
  border-radius:16px!important;
}
.atmo-art-cta-titre div, .atmo-art-cta-titre h1, .atmo-art-cta-titre h2,
.atmo-art-cta-titre h3, .atmo-art-cta-titre h4{
  font-size:15px!important; font-weight:900!important; line-height:1.3!important;
  letter-spacing:.01em!important; text-transform:uppercase;
  color:var(--atmo-creme,#EDE1D2)!important; margin:0!important;
}
.e-con:has(> .atmo-art-cta-titre) p,
.e-con:has(> .e-con-inner > .atmo-art-cta-titre) p{
  font-size:14px; line-height:1.55; margin:0;
}
.e-con:has(> .atmo-art-cta-titre) .elementor-button,
.e-con:has(> .e-con-inner > .atmo-art-cta-titre) .elementor-button{
  font-size:11.5px!important; padding:1em 1.7em!important;
}

/* Les deux intertitres du gabarit sont posés en « div » pour rester
   hors du sommaire automatique : on leur rend l'allure d'un h2. */
.atmo-art-h2bis div, .atmo-art-h2bis h2, .atmo-art-h2bis h3{
  font-size:clamp(22px,2.2vw,30px)!important;
  font-weight:var(--atmo-titre-poids)!important;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1.1;
}
/* Sauf dans l'encart d'appel de la colonne, qui garde sa petite taille. */
.atmo-art-cta-titre.atmo-art-h2bis div{ font-size:15px!important; }

/* ══════════════════════════════════════════════════════════════
   WIDGET ARTICLES - les cartes d'actualités, alimentées par WordPress
   Même allure que les cartes de la maquette : photo arrondie en 16/10,
   pastille de catégorie crème, date en machine à écrire, titre bordeaux,
   chapô limité à trois lignes.

   Le « !important » n'est pas de la paresse : le widget Articles écrit
   ses propres couleurs et proportions dans une feuille générée par
   Elementor, plus spécifique que la nôtre. Sans lui, rien ne mord.
   ══════════════════════════════════════════════════════════════ */

.atmo-cartes .elementor-post__card{
  background:transparent!important; border:0!important;
  box-shadow:none!important; border-radius:0!important;
  display:flex; flex-direction:column;
}
/* La ligne de date remonte au-dessus du titre, comme sur la maquette :
   le widget la place en bas de carte par défaut. */
.atmo-cartes .elementor-post__thumbnail__link{ order:1; margin-bottom:12px!important; }
.atmo-cartes .elementor-post__meta-data{ order:2; }
.atmo-cartes .elementor-post__text{ order:3; }

/* Photo en 16/10, quelle que soit la taille de l'originale. */
.atmo-cartes .elementor-post__thumbnail{
  border-radius:14px!important; overflow:hidden!important;
  padding-bottom:62%!important; height:auto!important;
}
.atmo-cartes .elementor-post__thumbnail img{
  width:100%!important; height:100%!important; object-fit:cover!important;
}

.atmo-cartes .elementor-post__text{ padding:0!important; margin:0!important; }

.atmo-cartes .elementor-post__badge{
  top:12px!important; left:12px!important; right:auto!important;
  z-index:2; white-space:nowrap;
  background:var(--atmo-creme,#EDE1D2)!important;
  color:var(--atmo-bordeaux)!important;
  border-radius:var(--atmo-pilule,999px)!important;
  font-size:10.5px!important; font-weight:900!important;
  letter-spacing:.12em!important; text-transform:uppercase!important;
  padding:.5em 1em!important; margin:0!important;
  /* La pastille s'ajustait à la largeur de la photo : on la ramène à
     la largeur de son texte. */
  display:inline-block!important; width:auto!important;
  max-width:calc(100% - 24px);
}

.atmo-cartes .elementor-post__meta-data{
  border:0!important; padding:0!important; margin:0 0 4px!important;
  font-size:11.5px!important; letter-spacing:.06em!important;
  color:#a08a7d!important; text-transform:uppercase!important;
}

.atmo-cartes .elementor-post__title{
  margin:0 0 6px!important; font-size:19px!important; line-height:1.22!important;
}
.atmo-cartes .elementor-post__title a{
  color:var(--atmo-bordeaux)!important; text-decoration:none!important;
  text-transform:uppercase!important; font-weight:900!important;
}
.atmo-cartes .elementor-post__title a:hover{ color:var(--atmo-orange-texte)!important; }

/* Le chapô affiche l'extrait de l'article, en entier : c'est un texte
   court, écrit pour cet emplacement. Aucune coupe automatique. */
.atmo-cartes .elementor-post__excerpt{ margin:0!important; }
.atmo-cartes .elementor-post__excerpt p{
  font-size:14.5px!important; line-height:1.55!important;
  color:var(--atmo-taupe)!important; margin:0!important;
}

.atmo-cartes .elementor-post__read-more{
  font-weight:800!important; font-size:12px!important;
  letter-spacing:.12em!important; text-transform:uppercase!important;
  color:var(--atmo-orange-texte)!important; text-decoration:none!important;
}

/* Le corps d'article et les cartes gardent la police du site même
   quand Elementor propose la sienne. */
.atmo-art-corps, .atmo-art-corps *,
.atmo-cartes .elementor-post__title a,
.atmo-cartes .elementor-post__excerpt p{
  font-family:var(--atmo-police)!important;
}
.atmo-art-corps .atmo-fiche dt,
.atmo-art-corps blockquote cite,
.atmo-cartes .elementor-post__meta-data{
  font-family:var(--atmo-mono)!important;
}

@media (max-width:767px){
  .atmo-art-titre h1{ max-width:none; font-size:32px!important; }
  .atmo-art-corps h2{ font-size:24px!important; }
  .atmo-art-corps p{ font-size:16px; }
}

/* ══════════════════════════════════════════════════════════════
   EN-TÊTE - retouches de détail
   ══════════════════════════════════════════════════════════════ */

/* La flèche du sous-menu « Cheminées » en orange. Les trois écritures
   couvrent les versions du widget Menu : caractère, icône ou SVG. */
.elementor-location-header .elementor-nav-menu .sub-arrow,
.elementor-location-header .elementor-nav-menu .sub-arrow i,
.elementor-location-header .elementor-nav-menu .sub-arrow svg,
.elementor-location-header .elementor-nav-menu a .sub-arrow i:before{
  color:var(--atmo-orange)!important;
  fill:var(--atmo-orange)!important;
}
/* La flèche était décollée du mot : le widget lui ajoute son propre
   rembourrage. On le remet à zéro et on garde trois pixels d'air. */
.elementor-location-header .elementor-nav-menu .sub-arrow{
  margin-left:3px!important; padding:0!important;
  display:inline-flex; align-items:center;
}
.elementor-location-header .elementor-nav-menu .sub-arrow i,
.elementor-location-header .elementor-nav-menu .sub-arrow svg{
  margin:0!important; padding:0!important;
}
.elementor-location-header .elementor-nav-menu .sub-arrow i,
.elementor-location-header .elementor-nav-menu .sub-arrow svg{
  font-size:13px; width:13px; height:13px;
}

/* Le bouton Contact, un cran plus discret : il annonce, il ne crie pas. */
.elementor-location-header .atmo-btn .elementor-button{
  font-size:12.4px!important;
  letter-spacing:.135em!important;
  padding:1.06em 2.2em!important;
}

/* Pas de pastille de fond au survol : seule la typo change de couleur.
   Le widget Menu dessine ce fond avec un ::before ; on l'éteint. */
.elementor-location-header .elementor-nav-menu .elementor-item:before,
.elementor-location-header .elementor-nav-menu .elementor-item:after{
  content:none!important; background-color:transparent!important;
}
.elementor-location-header .elementor-nav-menu .elementor-item,
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:focus,
.elementor-location-header .elementor-nav-menu .elementor-item.highlighted,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active{
  background-color:transparent!important;
}

/* La page en cours ressort en orange, comme sur la maquette. Le
   réglage existe dans le widget mais ne survit pas à l'import. */
.elementor-location-header .elementor-nav-menu li.current-menu-item > a,
.elementor-location-header .elementor-nav-menu li.current-menu-ancestor > a,
.elementor-location-header .elementor-nav-menu li.current-menu-parent > a,
.elementor-location-header .elementor-nav-menu li.current_page_item > a,
.elementor-location-header .elementor-nav-menu a.elementor-item-active,
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu a:focus,
/* « highlighted » : la classe qu'Elementor pose sur l'entrée parente
   pendant que son sous-menu est ouvert. Sans elle, « Cheminées »
   reprenait la couleur claire prévue pour la pastille - donc du blanc
   sur blanc dès qu'on descendait vers le sous-menu. */
.elementor-location-header .elementor-nav-menu a.highlighted,
.elementor-location-header .elementor-nav-menu li:hover > a.elementor-item{
  color:var(--atmo-orange-texte)!important;
}

/* Le sous-menu garde ses propres couleurs : la règle ci-dessus ne doit
   pas déteindre dessus. */
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item{
  color:var(--atmo-bordeaux)!important;
}
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active{
  color:var(--atmo-orange-texte)!important;
  background-color:#F2E9DD!important;
}

/* ══════════════════════════════════════════════════════════════
   FIL D'ARIANE - bande blanche sous l'en-tête
   Posé par le raccourci [atmo_fil] du thème enfant.
   ══════════════════════════════════════════════════════════════ */

.atmo-fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:14.5px; line-height:1.4; color:var(--atmo-taupe);
}
.atmo-fil a{ color:var(--atmo-orange-texte); text-decoration:none; }
.atmo-fil a:hover{ color:var(--atmo-bordeaux); }
.atmo-fil i{ font-style:normal; color:#c9bcae; font-size:16px; }
.atmo-fil span{ color:var(--atmo-taupe); }

/* La bande qui le porte : blanche, sans filet en bas - le bandeau
   bordeaux qui suit trace déjà la séparation, deux traits font doublon.
   Le conteneur n'ayant pas de classe, on le reconnaît au raccourci. */
.e-con:has(> .e-con > .e-con-inner > .atmo-fil-w),
.e-con:has(> .e-con-inner > .atmo-fil-w),
.e-con:has(> .atmo-fil-w){
  background-color:var(--atmo-surface)!important;
  border-bottom:0!important;
}

@media (max-width:767px){
  .atmo-fil{ font-size:13px; gap:7px; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE ACTUALITÉS - chapô du bandeau et pagination de la grille
   ══════════════════════════════════════════════════════════════ */

.atmo-art-chapeau p{
  font-size:17px; line-height:1.6; max-width:46ch; margin:0;
}

.atmo-cartes .elementor-pagination{
  margin-top:46px; display:flex; gap:8px; align-items:center;
}
.atmo-cartes .elementor-pagination .page-numbers{
  min-width:38px; height:38px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:var(--atmo-pilule,999px);
  font-size:14px; font-weight:800; text-decoration:none;
  color:var(--atmo-bordeaux); background:var(--atmo-surface);
  border:1px solid var(--atmo-trait); padding:0 12px;
}
.atmo-cartes .elementor-pagination .page-numbers:hover{
  border-color:var(--atmo-orange); color:var(--atmo-orange-texte);
}
.atmo-cartes .elementor-pagination .page-numbers.current{
  background:var(--atmo-orange); border-color:var(--atmo-orange);
  color:#fff;
}

/* ══════════════════════════════════════════════════════════════
   RÉSEAUX SOCIAUX - pied de page
   Cercles au trait, dans la charte plutôt que dans les couleurs
   officielles des plateformes, qui jureraient avec le bordeaux.
   ══════════════════════════════════════════════════════════════ */

.atmo-rs .elementor-grid{
  gap:12px!important; justify-content:center!important;
}
.atmo-rs .elementor-social-icon{
  background-color:transparent!important;
  border:1.5px solid var(--atmo-trait)!important;
  color:var(--atmo-bordeaux)!important;
  width:38px!important; height:38px!important;
  font-size:15px!important;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.atmo-rs .elementor-social-icon i,
.atmo-rs .elementor-social-icon svg{
  color:inherit!important; fill:currentColor!important;
}
.atmo-rs .elementor-social-icon:hover{
  background-color:var(--atmo-orange)!important;
  border-color:var(--atmo-orange)!important;
  color:#fff!important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE - PASSE D'ENSEMBLE

   Note de méthode : les règles ne s'accrochent QUE sur « .e-con »,
   jamais sur la classe du conteneur de page. Celle-ci varie selon la
   version d'Elementor, et une règle qui commence par « .elementor »
   peut ne rien viser du tout - c'est ce qui avait fait tomber les
   marges et le centrage à l'essai précédent.

   Principe de la marge : TOUS les conteneurs reçoivent la même, puis
   ceux qui sont imbriqués dans un autre la reperdent. Résultat, seul
   le conteneur de plus haut niveau la porte, quelle que soit la
   profondeur de la structure.

   Le même traitement vaut jusqu'à 1024 px : sur tablette, les
   largeurs en pourcentage prévues pour l'ordinateur donnaient des
   colonnes trop étroites. Une seule colonne centrée, avec une marge
   plus généreuse - voir le bloc tablette juste après.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1024px){

  /* --- 1. La marge, une fois et une seule ----------------------- */
  .e-con{ padding-left:20px!important; padding-right:20px!important; }
  .e-con .e-con{ padding-left:0!important; padding-right:0!important; }
  .e-con-inner{ padding-left:0!important; padding-right:0!important; }
  .e-con .e-con{ width:100%!important; }

  /* Seul le bandeau va d'un bord à l'autre. La bande des marques garde
     sa marge : c'est le ruban de logos qui en sort tout seul, par ses
     marges négatives - la lui retirer décollait aussi son titre. */
  .e-con:has(.atmo-diaporama){
    padding-left:0!important; padding-right:0!important;
  }
  .atmo-logos-carrousel .swiper-slide img{ max-height:34px; }

  /* --- 2. Tout est centré ---------------------------------------
     Sauf le corps des articles : un texte long centré est illisible. */
  .e-con :is(h1, h2, h3, h4, p, li, b, strong, dl, dt, dd,
             .elementor-heading-title,
             .elementor-widget-text-editor,
             .elementor-widget-button,
             .elementor-button-wrapper,
             .atmo-rea, .atmo-coord){
    text-align:center!important;
  }
  .e-con .atmo-lead{ max-width:none; }
  .atmo-art-corps, .atmo-art-corps :is(h2,h3,p,li,dt,dd,blockquote){
    text-align:left!important;
  }
  .atmo-fil{ justify-content:center; }
  .atmo-pied-metiers li{ justify-content:center; }

  /* --- 3. Bandeau : texte pleine largeur, flèches centrées ------- */
  .atmo-diaporama .swiper-slide-inner{
    text-align:center!important; align-items:center!important;
  }
  .atmo-diaporama .swiper-slide-contents{ margin-inline:auto!important; }
  .atmo-diaporama :is(.elementor-slide-heading,
                      .elementor-slide-description){
    text-align:center!important;
  }
  .atmo-diaporama .elementor-slide-heading::before{ margin-inline:auto; }

  .atmo-diaporama .elementor-swiper-button{
    display:flex!important;
    width:34px!important; height:34px!important;
    top:auto!important; bottom:18px!important;
    right:auto!important; transform:none!important;
  }
  .atmo-diaporama .elementor-swiper-button-prev{ left:calc(50% - 42px)!important; }
  .atmo-diaporama .elementor-swiper-button-next{ left:calc(50% + 8px)!important; }
  .atmo-diaporama .elementor-swiper-button i,
  .atmo-diaporama .elementor-swiper-button svg{ font-size:13px!important; }

  /* --- 4. Réassurance : une grille de deux colonnes ------------- */
  .e-con:has(> .e-con > .atmo-rea){
    display:grid!important; grid-template-columns:1fr 1fr;
    gap:26px 18px!important;
    padding-top:30px!important; padding-bottom:30px!important;
  }
  .e-con:has(> .atmo-rea){ padding:0!important; width:auto!important; }
  .atmo-rea b, .atmo-rea strong{ font-size:12.5px; }
  .atmo-rea p{ font-size:13.5px; }

  /* --- 5. Conception : visuels d'abord, iMac par-dessus --------- */
  .e-con:has(> .e-con > .atmo-ecran){ order:-1; }
  .e-con:has(> .e-con > .atmo-matiere){
    display:grid!important; grid-template-columns:repeat(3,1fr);
    gap:10px!important; position:relative; z-index:1;
  }
  .e-con:has(> .atmo-matiere){ width:auto!important; }
  .atmo-pastille-img img{ max-width:150px; margin-inline:auto; }
  .e-con:has(> .atmo-ecran){ position:relative; z-index:3; }
  .atmo-ecran{ margin-top:-110px!important; z-index:3; }

  /* --- 6. Les chiffres : trois colonnes égales, centrées -------- */
  .e-con:has(> .e-con > .atmo-chiffre-nb){
    display:grid!important; grid-template-columns:repeat(3,1fr);
    gap:0 10px!important;
  }
  .e-con:has(> .atmo-chiffre-nb){ width:auto!important; padding:0!important; }
  .atmo-chiffre-nb, .atmo-chiffre-lb{ text-align:center!important; }
  .atmo-chiffre-nb :is(div,h1,h2,h3,h4){ font-size:26px!important; }
  .atmo-chiffre-lb div{
    font-size:9.5px!important; letter-spacing:.07em!important; line-height:1.3;
  }

  /* --- 7. Réalisations : un ruban qu'on fait défiler au doigt ---
     « display:contents » dissout le conteneur des quatre petites
     photos : ses enfants deviennent des vignettes du ruban. La
     suivante dépasse toujours un peu, pour montrer qu'il y a une
     suite. */
  .e-con:has(> .e-con > .atmo-real-grand){
    flex-wrap:nowrap!important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px!important;
    margin-left:-20px!important; margin-right:-20px!important;
    padding:0 20px 10px!important;
    scrollbar-width:none;
  }
  .e-con:has(> .e-con > .atmo-real-grand)::-webkit-scrollbar{ display:none; }
  .e-con:has(> .e-con > .atmo-real-petit){ display:contents!important; }
  .e-con:has(> .atmo-real-grand),
  .e-con:has(> .atmo-real-petit){
    flex:0 0 76%!important; width:76%!important;
    scroll-snap-align:center;
  }
  .atmo-real-grand img, .atmo-real-petit img{
    height:250px!important; width:100%; object-fit:cover;
  }

  /* --- 8. Titres de section ------------------------------------- */
  .atmo-page h2{ font-size:26px!important; }
  .atmo-lead{ font-size:15.5px; }

  /* --- 9. Pied de page centré ----------------------------------- */
  .elementor-location-footer{ text-align:center; }
  .elementor-location-footer :is(p, li, a, .elementor-heading-title){
    text-align:center!important;
  }
  .elementor-location-footer .e-con{ align-items:center!important; }
  .atmo-pied-baseline p, .atmo-pied-adresse p{ max-width:none; }
  .elementor-location-footer .elementor-widget-theme-site-logo img{
    margin-inline:auto;
  }
  .elementor-location-footer .e-con .e-con{ margin-bottom:26px; }
}

/* ══════════════════════════════════════════════════════════════
   TABLETTE - les mêmes règles, à une autre échelle
   ══════════════════════════════════════════════════════════════ */

@media (min-width:768px) and (max-width:1024px){
  .e-con{ padding-left:40px!important; padding-right:40px!important; }
  .e-con .e-con{ padding-left:0!important; padding-right:0!important; }

  /* Le contenu ne s'étire pas d'un bord à l'autre : une colonne de
     lecture centrée, plus confortable qu'une ligne de 900 px. */
  .e-con-inner{ max-width:680px!important; margin-inline:auto!important; }

  .atmo-page h2{ font-size:32px!important; }
  .atmo-lead, .e-con p{ font-size:16.5px; }

  /* Le ruban de chantiers laisse voir deux vignettes et demie. */
  .e-con:has(> .atmo-real-grand),
  .e-con:has(> .atmo-real-petit){
    flex:0 0 46%!important; width:46%!important;
  }
  .atmo-real-grand img, .atmo-real-petit img{ height:290px!important; }
  .e-con:has(> .e-con > .atmo-real-grand){
    margin-left:-40px!important; margin-right:-40px!important;
    padding:0 40px 10px!important;
  }

  .atmo-matiere img{ height:240px; }
  .atmo-ecran{ margin-top:-140px!important; }
  .atmo-chiffre-nb :is(div,h1,h2,h3,h4){ font-size:32px!important; }
  .atmo-chiffre-lb div{ font-size:11px!important; }
  .atmo-logos-carrousel .swiper-slide img{ max-height:42px; }
}

/* ══════════════════════════════════════════════════════════════
   PIED DE PAGE - une seule taille de texte
   L'adresse était restée à la taille du corps de page.
   ══════════════════════════════════════════════════════════════ */

.elementor-location-footer :is(p, li, a, dd){ font-size:14.5px!important; }
.elementor-location-footer .atmo-pied-bas p{ font-size:13px!important; }

/* ══════════════════════════════════════════════════════════════
   EN-TÊTE MOBILE
   Logo à gauche, hamburger dans le coin droit. Seules les COLONNES
   sont mises en largeur automatique - la barre elle-même garde sa
   pleine largeur, faute de quoi elle se réduit au logo.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .elementor-location-header .e-con-inner{
    flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:center!important; justify-content:space-between!important;
  }
  /* Les colonnes, et elles seules. */
  .elementor-location-header .e-con .e-con,
  .elementor-location-header .e-con-inner > .e-con{
    width:auto!important; flex:0 0 auto!important;
    padding-left:0!important; padding-right:0!important;
  }
  .elementor-location-header .elementor-widget-nav-menu{
    width:auto!important; margin-left:auto!important;
  }

  /* Le logo, un cran plus petit. */
  /* Toute image de l'en-tête est plafonnée, pas seulement celle du
     widget « Logo du site » : selon le widget employé, le logo peut
     être plus haut que la barre et se faire recouvrir par le panneau. */
  /* La taille du logo appartient au widget, pas à cette feuille.
     Les trois « !important » qui étaient ici - largeur, hauteur et
     plafonds - empêchaient tout réglage depuis Elementor : la
     largeur saisie dans le widget était écrasée par « width:auto ».
     Il ne reste qu'un garde-fou sans !important, pour qu'une image
     sans réglage ne déborde pas de la barre. */
  .elementor-location-header img{
    max-width:100%;
    height:auto;
    object-fit:contain;
  }

  /* Le bouton Contact rejoint le menu déroulant. */
  .elementor-location-header .atmo-btn{ display:none!important; }

  /* Le hamburger : trois traits fins, dans le coin droit. */
  /* Le bouton est placé en position fixe, aux mêmes coordonnées que la
     croix : ouvert ou fermé, il ne bouge pas d'un pixel. L'en-tête
     étant collant, il reste toujours posé sur la barre blanche. */
  .elementor-location-header .elementor-menu-toggle{
    display:flex!important;
    /* Centré sur la barre, quelle que soit sa hauteur : la moitié
       de --atmo-barre, puis on remonte de la moitié du bouton.
       --atmo-barre vaut 68 px par défaut et le script du thème la
       corrige si tu changes la hauteur dans Elementor. */
    position:fixed!important;
    top:calc(var(--atmo-barre) / 2)!important;
    transform:translateY(-50%)!important;
    right:20px!important;
    background:none!important; background-color:transparent!important;
    border:0!important; border-radius:0!important;
    padding:0!important; margin:0!important;
    width:28px; height:20px;
    color:var(--atmo-bordeaux)!important;
    z-index:9997!important;
  }
  .elementor-location-header .elementor-menu-toggle:hover{ background:none!important; }
  .elementor-location-header .elementor-menu-toggle:not(.elementor-active) i{
    font-size:0!important; position:relative;
    display:block; width:28px; height:20px;
  }
  .elementor-location-header .elementor-menu-toggle:not(.elementor-active) i::before{
    content:""!important;
    position:absolute; left:0; right:0; top:9px; height:1.6px;
    background:currentColor;
    box-shadow:0 -7px 0 currentColor, 0 7px 0 currentColor;
  }
  .elementor-location-header .elementor-menu-toggle.elementor-active i{
    font-size:22px!important; color:var(--atmo-bordeaux)!important;
  }

  /* Le panneau déroulant, en plein écran.

     Les deux tentatives précédentes le calaient en absolu, donc sur le
     premier ancêtre positionné - et cet ancêtre s'est avéré être la
     colonne du bouton, large de trente pixels, d'où la bande blanche
     verticale. En position « fixe », le panneau se cale sur la fenêtre
     elle-même : il n'y a plus rien à deviner. */
  /* La hauteur de la barre est écrite une seule fois : la barre et le
     panneau s'y réfèrent tous les deux, donc ils ne peuvent pas se
     désaccorder. 40 px de contenu + 2 × 9 px + 1 px de filet = 59. */
  /* La hauteur de la barre appartient à Elementor, pas à cette
     feuille. Plus aucun « !important » ici : le rembourrage que tu
     règles dans le conteneur est celui qui s'applique. Le script du
     thème mesure ensuite la barre et met --atmo-barre à jour, si
     bien que le burger et le panneau suivent tout seuls.
     Les valeurs d'origine - 10 px de rembourrage, 47 px de contenu -
     ne sont plus que des points de départ, modifiables. */
  .elementor-location-header .e-con{
    padding-top:10px; padding-bottom:10px;
  }
  /* Plus de hauteur minimale : elle empêchait de descendre en
     dessous de 47 px de contenu, donc de 68 px de barre. La barre
     fait désormais exactement la hauteur de ce qu'elle contient,
     plus le rembourrage que tu règles dans Elementor. */

  .elementor-location-header .elementor-nav-menu--dropdown{
    position:fixed!important;
    top:var(--atmo-barre)!important; left:0!important; right:0!important;
    width:100vw!important;
    height:calc(100vh - var(--atmo-barre))!important;
    height:calc(100dvh - var(--atmo-barre))!important;
    margin:0!important; border:0!important; border-radius:0!important;
    padding:34px 20px 44px!important;
    overflow-y:auto;
    background-color:var(--atmo-surface)!important;
    box-shadow:none!important;
    z-index:9998!important;
  }
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu{
    max-width:420px; margin-inline:auto;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a{
    font-size:15px!important; letter-spacing:.1em!important;
    padding:18px 12px!important;
    text-align:center!important; justify-content:center!important;
    border-bottom:1px solid var(--atmo-trait);
  }
  .elementor-location-header .elementor-nav-menu--dropdown
    .elementor-nav-menu--dropdown a{
    font-size:14px!important; opacity:.85;
  }

  /* Le bloc posé sous la liste par le thème : bouton Contact et
     réseaux. Il est HORS de la liste, donc rien de l'habillage des
     entrées de menu ne l'atteint. */
  .elementor-nav-menu--dropdown .atmo-menu-pied{
    display:flex; flex-direction:column; align-items:center;
    gap:24px; margin-top:34px;
  }
  .atmo-menu-contact{
    display:inline-block; text-decoration:none;
    background-color:var(--atmo-orange); color:#fff;
    border-radius:var(--atmo-pilule,999px);
    font-size:12.4px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; padding:1.05em 2.3em;
  }
  .atmo-menu-contact:hover{ background-color:var(--atmo-bordeaux); }

  .atmo-rs-rangee{
    display:flex; gap:14px; justify-content:center;
    width:100%; overflow:visible;
  }
  .atmo-rs-lien{
    flex:0 0 auto; width:40px; height:40px;
    border-radius:50%; border:1.5px solid var(--atmo-trait);
    display:flex; align-items:center; justify-content:center;
    color:var(--atmo-bordeaux); text-decoration:none; line-height:1;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .atmo-rs-lien svg{ width:19px; height:19px; display:block; }
  .atmo-rs-lien:hover{
    background-color:var(--atmo-orange); border-color:var(--atmo-orange);
    color:#fff;
  }

  /* La croix reste par-dessus le panneau, dans le coin. */
  .elementor-location-header .elementor-menu-toggle.elementor-active{
    z-index:9999!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ALIGNEMENT DE L'EN-TÊTE SUR LE TEXTE DES VOLETS

   Le menu était calé sur la boîte de contenu centrée (1340 px), le
   texte des volets sur un retrait fixe du bord : deux repères
   différents, donc un décalage visible. On leur donne le même, écrit
   une seule fois ci-dessous - changer cette valeur déplace les deux
   ensemble.
   ══════════════════════════════════════════════════════════════ */

:root{ --atmo-retrait:72px; --atmo-barre:68px; }

@media (min-width:1025px){
  .elementor-location-header .e-con{
    padding-left:var(--atmo-retrait)!important;
    padding-right:var(--atmo-retrait)!important;
  }
  .elementor-location-header .e-con .e-con{
    padding-left:0!important; padding-right:0!important;
  }
  .elementor-location-header .e-con-inner{
    max-width:none!important; width:100%!important;
  }
  /* Le logo colle au bord gauche du retrait, le bouton au bord droit. */
  .elementor-location-header .elementor-widget-theme-site-logo{
    text-align:left!important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo img{
    margin-left:0!important;
  }

  /* Le texte des volets prend exactement le même retrait. */
  .atmo-diaporama .swiper-slide-inner{
    padding-left:var(--atmo-retrait)!important;
    padding-right:var(--atmo-retrait)!important;
  }
  .atmo-diaporama .swiper-slide-contents{ margin-left:0!important; }

  /* La bande de réassurance s'aligne elle aussi. Ses quatre blocs ont
     22 px de rembourrage propre : on les retranche du retrait pour que
     le TEXTE tombe pile sur la même verticale que le logo et le titre
     du volet. */
  .e-con:has(> .e-con > .atmo-rea){
    padding-left:calc(var(--atmo-retrait) - 22px)!important;
    padding-right:calc(var(--atmo-retrait) - 22px)!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PASTILLES DE CATÉGORIE - une couleur par famille

   WordPress pose sur chaque carte une classe « category-<identifiant> ».
   On s'en sert pour distinguer les familles d'un coup d'œil :
     Conseils     crème  (le cas courant, discret)
     Réalisations orange (les chantiers, qu'on veut voir ressortir)
     Aides        bordeaux
   Une nouvelle catégorie prendra la couleur crème par défaut : il
   suffira d'ajouter trois lignes ici pour lui en donner une autre.
   ══════════════════════════════════════════════════════════════ */

.atmo-cartes .elementor-post.category-realisations .elementor-post__badge{
  background-color:var(--atmo-orange)!important;
  color:#fff!important;
}
.atmo-cartes .elementor-post.category-aides .elementor-post__badge{
  background-color:var(--atmo-bordeaux)!important;
  color:var(--atmo-creme,#EDE1D2)!important;
}

/* La pastille du bandeau d'article suit la même logique. */
.atmo-art-cat .elementor-post-info__terms-list-item{ transition:none; }

/* ══════════════════════════════════════════════════════════════
   RUBAN DES CHANTIERS - les deux flèches
   Posées par le script sous la bande. Invisibles sur ordinateur, où
   la mosaïque s'affiche en entier.
   ══════════════════════════════════════════════════════════════ */

.atmo-ruban-nav{ display:none; }

@media (max-width:1024px){
  .atmo-ruban-nav{
    display:flex; justify-content:center; gap:12px;
    margin-top:18px;
  }
  .atmo-ruban-fleche{
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid var(--atmo-trait);
    background:transparent; color:var(--atmo-bordeaux);
    font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:0 0 3px;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .atmo-ruban-fleche:hover, .atmo-ruban-fleche:active{
    background-color:var(--atmo-orange); border-color:var(--atmo-orange);
    color:#fff;
  }
}

/* Le bloc est ajouté à TOUS les rendus du menu, y compris la barre du
   haut : on ne le montre que dans le panneau déroulant. */
.atmo-menu-pied{ display:none; }
.elementor-nav-menu--dropdown .atmo-menu-pied{ display:flex; }

/* ══════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   Tout ce que les pages apportent et que l'accueil n'avait pas.
   Les sections elles-mêmes n'ont pas de classe - Elementor les perd
   à l'import - elles sont donc reconnues au widget qu'elles portent.
   ══════════════════════════════════════════════════════════════ */

/* --- Le bandeau des pages intérieures ---------------------------
   Même widget que sur l'accueil - le Diaporama d'Elementor Pro -
   réduit à un seul volet. La photo se dépose dans le volet, comme
   sur l'accueil : c'est le seul endroit du constructeur où l'image
   d'un bandeau se change en deux clics.

   Le widget n'ayant pas de champ pour la pastille de catégorie,
   celle-ci est dessinée ici. Les règles de l'accueil placent déjà un
   « ::before » sur le titre du volet ; on le réécrit page par page.
   Le « !important » suffit à passer devant elles, quelle que soit
   leur spécificité - inutile d'empiler les sélecteurs.
   --------------------------------------------------------------- */

.atmo-bandeau-page .swiper-slide{ min-height:420px!important; }

/* Un seul volet : rien à faire défiler, donc rien à afficher. */
.atmo-bandeau-page .elementor-swiper-button,
.atmo-bandeau-page .swiper-pagination{ display:none!important; }

.atmo-bandeau-page .elementor-slide-heading{
  font-size:clamp(30px,3.6vw,50px)!important;
  max-width:16ch;
}
.atmo-bandeau-page .elementor-slide-description{ max-width:50ch; }

.atmo-bp--cheminees  .elementor-slide-heading::before{
  content:"Cheminées"!important;
  background-image:url(img/picto-cheminees-fonce.png)!important;
}
.atmo-bp--sur-mesure .elementor-slide-heading::before{
  content:"Cheminées sur-mesure"!important;
  background-image:url(img/picto-cheminees-fonce.png)!important;
}
.atmo-bp--renovation .elementor-slide-heading::before{
  content:"Rénovation"!important;
  background-image:url(img/picto-neuf-fonce.png)!important;
}
.atmo-bp--poeles     .elementor-slide-heading::before{
  content:"Poêles"!important;
  background-image:url(img/picto-bois-fonce.png)!important;
}
.atmo-bp--pac        .elementor-slide-heading::before{
  content:"Pompes à chaleur"!important;
  background-image:url(img/picto-pac-fonce.png)!important;
}
.atmo-bp--entreprise .elementor-slide-heading::before{
  content:"L'entreprise"!important;
  background-image:url(img/picto-cheminees-fonce.png)!important;
}

/* Hauteur de la photo des grandes cartes, écrite une seule fois :
   le galet s'y accroche pour tomber pile sur la couture. */
:root{ --atmo-cp-hauteur:clamp(280px,30vw,420px); }

/* --- Le galet des grandes cartes illustrées ---------------------
   C'est un emplacement image, comme sur l'accueil : Faustine y dépose
   le PNG de son choix depuis la médiathèque. La feuille se contente de
   le poser à cheval sur la couture entre la photo et le pavé de texte.

   Il est le DERNIER enfant de la carte, et non un enfant du pavé de
   texte : il se cale ainsi sur la carte entière - le seul repère qui
   ne bouge pas - et, venant en dernier, il passe devant la photo sans
   avoir à négocier des plans de superposition. */
.atmo-cp-galet{
  position:absolute!important;
  top:var(--atmo-cp-hauteur); right:22px;
  transform:translateY(-50%);
  width:88px!important; margin:0!important; z-index:6;
}
.atmo-cp-galet .elementor-widget-container{ line-height:0; }
.atmo-cp-galet img{ width:100%; height:auto; display:block; }

/* --- La pastille de catégorie du bandeau ----------------------- */
.atmo-pastille-cat div,
.atmo-pastille-cat .elementor-heading-title{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--atmo-creme,#EDE1D2); color:var(--atmo-bordeaux)!important;
  border-radius:var(--atmo-pilule,999px);
  padding:.62em 1.35em .62em 1.1em;
  font-size:12.5px!important; font-weight:900!important;
  letter-spacing:.14em!important; text-transform:uppercase;
  line-height:1!important;
}
.atmo-pastille-cat .elementor-heading-title::before{
  content:""; width:19px; height:19px; flex:0 0 auto;
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.atmo-pc--cheminees .elementor-heading-title::before{ background-image:url(img/picto-cheminees-fonce.png); }
.atmo-pc--bois      .elementor-heading-title::before{ background-image:url(img/picto-bois-fonce.png); }
.atmo-pc--neuf      .elementor-heading-title::before{ background-image:url(img/picto-neuf-fonce.png); }
.atmo-pc--pac       .elementor-heading-title::before{ background-image:url(img/picto-pac-fonce.png); background-size:auto 100%; }

.atmo-hero-lead p{
  font-size:17.5px; line-height:1.65; max-width:56ch; margin:0;
  color:rgba(242,233,221,.84);
}

/* --- Les cartes ------------------------------------------------ */
.atmo-carte-galet img{
  width:74px; height:auto; display:block;
}
.atmo-carte-titre :is(h2,h3,h4,div){
  font-size:19px!important; line-height:1.2!important;
  color:var(--atmo-bordeaux); text-transform:uppercase;
  font-weight:var(--atmo-titre-poids)!important; margin:0!important;
}
.atmo-carte-texte p{
  font-size:15px; line-height:1.6; color:var(--atmo-taupe); margin:0;
}

/* Cartes illustrées : la photo occupe le haut, sans marge. Hauteur
   fixée plutôt qu'un rapport, pour que les deux cartes s'alignent
   même si les photos déposées n'ont pas le même format. */
.atmo-cp-photo img{
  width:100%; height:var(--atmo-cp-hauteur);
  object-fit:cover; display:block;
}

/* Le titre de section reprend la largeur de la maquette : deux ou
   trois lignes courtes plutôt qu'une ligne qui traverse l'écran. */
.atmo-sec-titre .elementor-heading-title{ max-width:11em; }

/* --- Texte et photo --------------------------------------------
   Comme sur la maquette : deux moitiés bord à bord, la photo remplit
   la sienne sur toute la hauteur du texte, sans arrondi ni gouttière. */
.e-con:has(> .atmo-tp-photo){ align-self:stretch; }
.atmo-tp-photo,
.atmo-tp-photo .elementor-widget-container{ height:100%; line-height:0; }
.atmo-tp-photo img{
  width:100%; height:100%; min-height:420px;
  object-fit:cover; border-radius:0; display:block;
}
.atmo-para p{
  font-size:16px; line-height:1.7; color:#6f5a50; margin:0;
}
.atmo-para b, .atmo-para strong{ color:var(--atmo-bordeaux); font-weight:800; }

/* --- Étapes ----------------------------------------------------- */
.atmo-etape-titre :is(h2,h3,h4){
  font-size:18px!important; line-height:1.25!important; margin:0!important;
}

/* --- Comparatif -------------------------------------------------- */
.atmo-compar-sous p{
  font-size:14.5px; line-height:1.5; color:var(--atmo-orange-texte);
  font-weight:600; margin:0;
}
.atmo-compar dl{ margin:6px 0 0; }
.atmo-compar dt{
  font-family:var(--atmo-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#a08a7d; margin-top:14px;
}
.atmo-compar dd{
  margin:3px 0 0; padding-bottom:12px; font-size:15px; line-height:1.45;
  color:#6f5a50; border-bottom:1px solid var(--atmo-trait);
}
.atmo-compar dd:last-child{ border-bottom:0; padding-bottom:0; }

/* --- Avis --------------------------------------------------------
   Comme sur la maquette : aligné à gauche, ouvert par un gros
   guillemet orange, la signature en petites capitales. */
.atmo-avis{ max-width:760px; margin-inline:auto; }
.atmo-avis::before{
  content:"“"; display:block; text-align:center;
  font-family:var(--atmo-police); font-weight:900;
  font-size:64px; line-height:.55; color:var(--atmo-orange);
  margin-bottom:16px;
}
.atmo-avis p{
  font-size:clamp(18px,1.7vw,24px); line-height:1.5; text-align:center;
  color:var(--atmo-bordeaux); margin:0 auto; max-width:44ch;
}
.atmo-avis-qui p{
  font-size:14px; color:var(--atmo-taupe); margin:0; text-align:center;
}
.atmo-avis-qui b{
  font-weight:900; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--atmo-bordeaux);
  margin-right:9px;
}

/* --- Encart ------------------------------------------------------ */
.atmo-encart-titre :is(h2,h3,h4){
  font-size:21px!important; color:var(--atmo-bordeaux);
  text-transform:uppercase; margin:0!important;
}
.atmo-encart-texte p{
  font-size:15.5px; line-height:1.65; color:#6f5a50; margin:0; max-width:66ch;
}

/* --- Questions fréquentes ----------------------------------------
   L'accordéon de la maquette : pas de boîte, un filet fin entre les
   questions, un « + » orange à droite qui devient « − » à l'ouverture.

   Le repli est confié à « site.js », qui pose la classe
   « atmo-faq-item ». Tant qu'il n'est pas passé, les réponses
   s'affichent normalement : une page sans script reste lisible. */

.e-con:has(> .atmo-faq-q){
  border-top:1px solid var(--atmo-trait);
}
.e-con:has(> .atmo-faq-q):last-child{
  border-bottom:1px solid var(--atmo-trait);
}

.atmo-faq-q{
  position:relative; cursor:pointer;
  padding:20px 46px 20px 0;
}
.atmo-faq-q :is(h2,h3,h4){
  font-size:16.5px!important; line-height:1.35!important;
  color:var(--atmo-bordeaux); margin:0!important;
  font-weight:900!important;
  text-transform:uppercase!important; letter-spacing:-.005em!important;
}
.atmo-faq-q:hover :is(h2,h3,h4){ color:var(--atmo-orange-texte); }

/* Les deux barres du « + ». La verticale s'efface à l'ouverture. */
.atmo-faq-q::before,
.atmo-faq-q::after{
  content:""; position:absolute; top:50%;
  background:var(--atmo-orange); border-radius:2px;
  transition:transform .2s ease;
}
.atmo-faq-q::before{ right:8px;    width:15px; height:2px;  margin-top:-1px; }
.atmo-faq-q::after { right:14.5px; width:2px;  height:15px; margin-top:-7.5px; }

.atmo-faq-r{ padding-bottom:22px; }
/* Les filets vont d'un bord à l'autre du contenu ; seule la RÉPONSE
   garde une largeur de lecture, sinon la ligne devient trop longue. */
.atmo-faq-r p{
  font-size:15px; line-height:1.65; color:var(--atmo-taupe); margin:0;
  max-width:78ch;
}

/* État replié, posé seulement une fois le script passé. */
.atmo-faq-item > .atmo-faq-r{
  max-height:0; padding-bottom:0; opacity:0; overflow:hidden;
  transition:max-height .3s ease, opacity .2s ease, padding-bottom .3s ease;
}
.atmo-faq-item.atmo-ouvert > .atmo-faq-r{
  max-height:520px; padding-bottom:22px; opacity:1;
}
.atmo-faq-item.atmo-ouvert > .atmo-faq-q::after{ transform:scaleY(0); }
.atmo-faq-q:focus-visible{
  outline:2px solid var(--atmo-orange); outline-offset:3px; border-radius:5px;
}

/* --- Page contact ------------------------------------------------ */
.atmo-form .elementor-field-group > label{
  font-family:var(--atmo-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#a08a7d; margin-bottom:6px;
}
.atmo-form :is(input[type=text], input[type=email], input[type=tel],
               select, textarea){
  border:1px solid var(--atmo-trait)!important;
  border-radius:12px!important;
  padding:.85em 1em!important;
  font-size:15px!important;
  background:var(--atmo-fond)!important;
  color:var(--atmo-bordeaux)!important;
}
.atmo-form :is(input, select, textarea):focus{
  border-color:var(--atmo-orange)!important; outline:none!important;
}
.atmo-form .elementor-button[type=submit]{
  background-color:var(--atmo-orange)!important; color:#fff!important;
  border:0!important; border-radius:var(--atmo-pilule,999px)!important;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:12.4px!important; padding:1.15em 2.4em!important;
}
.atmo-form .elementor-button[type=submit]:hover{
  background-color:var(--atmo-bordeaux)!important;
}
.atmo-form .elementor-field-option label{
  font-size:13.5px!important; line-height:1.5!important;
  color:var(--atmo-taupe)!important;
  font-family:var(--atmo-police)!important; font-weight:400!important;
  text-transform:none!important; letter-spacing:0!important;
}
.atmo-rgpd p{ font-size:12.5px; line-height:1.55; color:#a08a7d; margin:0; }

.atmo-aside-titre :is(h2,h3,h4){
  font-size:13px!important; letter-spacing:.12em!important;
  text-transform:uppercase; color:var(--atmo-bordeaux); margin:0!important;
}
.atmo-aside-texte p{ font-size:14.5px; line-height:1.6; color:var(--atmo-taupe); margin:0 0 .7em; }
.atmo-aside-texte p:last-child{ margin-bottom:0; }
.atmo-aside-texte b{ color:var(--atmo-bordeaux); font-weight:800; }
.atmo-aside-texte a{ color:var(--atmo-orange-texte); text-decoration:none; }
.atmo-aside-texte a:hover{ color:var(--atmo-bordeaux); }

.atmo-horaires dl{ margin:0; }
.atmo-horaires dt{
  font-size:14px; color:var(--atmo-taupe); margin-top:10px;
}
.atmo-horaires dd{
  margin:1px 0 0; padding-bottom:9px; font-size:14.5px; font-weight:800;
  color:var(--atmo-bordeaux); border-bottom:1px solid var(--atmo-trait);
}
.atmo-horaires dd:last-child{ border-bottom:0; padding-bottom:0; }

.atmo-plan img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:16px; display:block;
}

/* --- Mentions légales --------------------------------------------- */
.atmo-legal h2{
  font-size:19px!important; color:var(--atmo-bordeaux);
  text-transform:uppercase; margin:2em 0 .5em;
}
.atmo-legal h2:first-child{ margin-top:0; }
.atmo-legal p{ font-size:15.5px; line-height:1.7; color:#6f5a50; margin:0 0 1em; }
.atmo-legal i{ color:#a08a7d; }

/* ══════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES - MOBILE ET TABLETTE
   La remise à zéro des rembourrages intérieurs vaut pour la mise en
   page, pas pour les boîtes qui ont un fond ou un filet : sans ces
   exceptions, leur texte viendrait coller au bord.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .e-con:has(> .atmo-carte-titre),
  .e-con:has(> .atmo-carte-galet),
  .e-con:has(> .atmo-compar),
  .e-con:has(> .atmo-encart-titre),
  .e-con:has(> .atmo-aside-titre),
  .e-con:has(> .atmo-form){
    padding-left:24px!important; padding-right:24px!important;
  }
  .atmo-carte-galet img{ margin-inline:auto; }

  /* Le galet des cartes se centre avec le reste ; celui des grandes
     cartes illustrées reste accroché en haut à droite de la photo. */
  .atmo-carte-galet{ display:flex!important; justify-content:center!important; }

  .atmo-sec-titre .elementor-heading-title{ max-width:none; }

  /* Le bandeau de page : le titre respire, la pastille se recentre. */
  .atmo-bandeau-page .swiper-slide{ min-height:340px!important; }
  .atmo-bandeau-page .elementor-slide-heading{
    max-width:none; font-size:30px!important;
  }
  .atmo-bandeau-page .elementor-slide-description{ max-width:none; }

  /* L'avis se recentre comme le reste de la page. */
  .atmo-avis{ max-width:none; }
  .atmo-avis p{ font-size:19px; max-width:none; text-align:center!important; }
  .atmo-avis::before{ text-align:center; }
  .atmo-avis-qui p{ text-align:center!important; }

  /* L'accordéon : la question reste alignée à gauche du « + », sans
     quoi le texte passerait sous le signe.
     On vise « .elementor-heading-title » et non la balise : la règle
     de centrage général vise cette classe, et un sélecteur de balise
     ne ferait pas le poids devant elle. */
  .atmo-faq-q .elementor-heading-title{
    text-align:left!important; font-size:15.5px!important;
  }
  .atmo-faq-r p{ text-align:left!important; }
  .atmo-faq-q{ padding-right:40px; }

  /* Le galet des grandes cartes se recentre sur la couture, et le
     pavé de texte lui réserve sa place. */
  .atmo-cp-galet{
    right:auto!important; left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:76px!important;
  }
  .atmo-tp-photo img{ min-height:260px; height:auto; }

  /* La bande « texte + photo » retrouve ses bords : la section perd sa
     marge, et c'est le pavé de texte qui la reprend à son compte. Le
     crème et la photo repartent ainsi d'un bord à l'autre, comme avant
     le passage en pleine largeur. */
  .e-con:has(> .e-con > .atmo-tp-photo){
    padding-left:0!important; padding-right:0!important;
  }
  .e-con .e-con:has(> .atmo-para){
    padding-left:20px!important; padding-right:20px!important;
  }
  .e-con:has(> .atmo-cp-photo) > .e-con:has(> .atmo-carte-titre){
    padding-top:58px!important;
  }

  .atmo-hero-lead p{ font-size:16px; max-width:none; }
  .atmo-compar dd, .atmo-horaires dd{ text-align:center; }
  .atmo-compar dt, .atmo-horaires dt{ text-align:center; }
  .atmo-legal h2{ font-size:17px!important; }
}

/* ══════════════════════════════════════════════════════════════
   RETOUCHES MOBILE - v1.11.0
   Trois corrections relevées sur l'iPhone, une fois le site en ligne.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:767px){

  /* --- 1. Les logos des fabricants étaient illisibles -----------
     Le plafond de 34 px venait du bloc tablette, où le ruban montre
     cinq logos de front. Sur téléphone il n'en montre que deux : il y
     a largement la place de les agrandir. Le garde-fou en largeur
     évite qu'un logo très étiré ne déborde de sa diapositive. */
  .atmo-logos-carrousel .swiper-slide img{
    max-height:52px!important;
    max-width:90%!important;
    width:auto!important;
  }

  /* La bande paraissait vide sous les logos : on resserre le bas. */
  .elementor > .e-con:has(.atmo-logos-carrousel){
    padding-bottom:44px!important;
  }

  /* --- 2. Trois actualités suffisent sur un téléphone -----------
     Six cartes empilées font défiler l'écran sans fin avant d'arriver
     au bouton. On n'en garde que trois - uniquement sur l'accueil :
     la page Actualités, elle, doit toutes les afficher. */
  body.home .atmo-cartes .elementor-post:nth-child(n+4){
    display:none!important;
  }

  /* --- 3. Le ruban de chantiers repart d'un bord à l'autre ------
     Les marges négatives de -20 px ne suffisaient pas : selon le
     conteneur parent, il restait un liseré à droite. On sort du flux
     par la largeur de la fenêtre elle-même, comme le ruban de logos
     le fait déjà. Le rembourrage latéral disparaît : les vignettes
     doivent toucher les deux bords, c'est ce qui donne envie de
     faire défiler. */
  .e-con:has(> .e-con > .atmo-real-grand){
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:0 0 10px!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BANDEAUX DE PAGE PLUS HAUTS - v1.12.0
   Le bandeau des pages intérieures était réglé à 56 vh, contre 76 vh
   pour celui de l'accueil : d'une page à l'autre, il paraissait
   rétréci. On le rapproche de l'accueil sans l'égaler - une page
   intérieure n'a pas à occuper autant d'écran que la page d'entrée.

   Le « min-height » l'emporte sur la hauteur réglée dans le widget
   Diaporama, ce qui évite de réimporter les neuf fichiers de pages.
   ══════════════════════════════════════════════════════════════ */

.atmo-bandeau-page .elementor-slides,
.atmo-bandeau-page .swiper-slide{
  min-height:72vh!important;
}

/* Sur téléphone, un peu moins : l'écran est étroit, et le visiteur
   doit deviner qu'il y a du contenu sous le bandeau. */
@media (max-width:767px){
  .atmo-bandeau-page .elementor-slides,
  .atmo-bandeau-page .swiper-slide{
    min-height:64vh!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PAGE CONTACT - v1.16.0
   L'en-tête sombre, le choix du projet en pastilles, le plan.
   ══════════════════════════════════════════════════════════════ */

/* --- 1. L'en-tête sombre, comme les pages d'article -----------
   Même dégradé que le bandeau des articles : nuit à gauche, bordeaux
   à droite, halo braise en bas. On reconnaît la section au titre
   qu'elle contient - Elementor perd les classes de conteneur à
   l'import, celles des widgets survivent. Les trois écritures
   couvrent les structures qu'Elementor peut produire. */
.e-con:has(> .e-con > .e-con-inner > .atmo-ct-titre),
.e-con:has(> .e-con > .atmo-ct-titre),
.e-con:has(> .atmo-ct-titre){
  position:relative; overflow:hidden;
  background-color:var(--atmo-bordeaux-nuit,#3A0C0C)!important;
  background-image:
    radial-gradient(120% 150% at 88% 108%,
      rgba(215,98,39,.34) 0%, rgba(215,98,39,.10) 34%, rgba(215,98,39,0) 62%),
    linear-gradient(112deg,
      #300a0a 0%, #45100f 34%, #5E1515 68%, #6d1b18 100%)!important;
  background-repeat:no-repeat, no-repeat!important;
}
.atmo-ct-titre :is(h1,h2,h3,.elementor-heading-title){
  color:var(--atmo-creme,#EDE1D2)!important;
}
/* Le sur-titre et le chapô repassent en clair dans la foulée. */
.e-con:has(> .e-con > .atmo-ct-titre) .atmo-kicker .elementor-heading-title,
.e-con:has(> .atmo-ct-titre) .atmo-kicker .elementor-heading-title{
  color:var(--atmo-orange-clair,#F0A765)!important;
}
.e-con:has(> .e-con > .atmo-ct-titre) .atmo-lead,
.e-con:has(> .e-con > .atmo-ct-titre) .atmo-lead p,
.e-con:has(> .atmo-ct-titre) .atmo-lead,
.e-con:has(> .atmo-ct-titre) .atmo-lead p{
  color:rgba(242,233,221,.82)!important;
}

/* --- 2. « Votre projet » en pastilles -------------------------
   La liste déroulante native ne se met pas en forme : la liste qui
   s'ouvre est dessinée par le système, pas par la page. Cinq choix
   tiennent mieux en pastilles - tout est visible d'un coup d'œil,
   un seul clic au lieu de deux, et les pastilles s'alignent sur
   toute la largeur au lieu de laisser la colonne vide.

   Ce sont de vraies cases à cocher : plusieurs choix possibles,
   navigation au clavier et envoi du formulaire inchangés. La case
   d'acceptation, plus bas, est d'un autre type - elle garde son
   apparence de case. */
.atmo-form .elementor-field-type-checkbox .elementor-field-subgroup{
  display:flex!important; flex-wrap:wrap!important; gap:10px;
}
.atmo-form .elementor-field-type-checkbox .elementor-field-option{
  margin:0!important; padding:0!important;
}
.atmo-form .elementor-field-type-checkbox .elementor-field-option input{
  position:absolute!important; opacity:0!important;
  width:0!important; height:0!important; pointer-events:none;
}
.atmo-form .elementor-field-type-checkbox .elementor-field-option input + label{
  display:inline-block; cursor:pointer; margin:0!important;
  border:1px solid var(--atmo-trait); border-radius:var(--atmo-pilule,999px);
  padding:.62em 1.15em!important;
  background:var(--atmo-fond);
  font-family:var(--atmo-police)!important;
  font-size:14px!important; font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:0!important; text-transform:none!important;
  color:var(--atmo-taupe)!important;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.atmo-form .elementor-field-type-checkbox .elementor-field-option input + label:hover{
  border-color:var(--atmo-orange-clair);
  color:var(--atmo-bordeaux)!important;
}
.atmo-form .elementor-field-type-checkbox .elementor-field-option input:checked + label{
  background:var(--atmo-bordeaux)!important; border-color:var(--atmo-bordeaux);
  color:var(--atmo-creme)!important;
}
/* L'anneau de mise au point suit le clavier, pas la souris. */
.atmo-form .elementor-field-type-checkbox .elementor-field-option input:focus-visible + label{
  outline:2px solid var(--atmo-orange); outline-offset:2px;
}

/* --- 3. Le plan d'accès, en bandeau ---------------------------
   Il part d'un bord à l'autre : la section perd son rembourrage, y
   compris celui que la règle mobile applique à tous les conteneurs. */
.e-con:has(> .atmo-plan-bandeau){
  padding-left:0!important; padding-right:0!important;
  padding-top:0!important; padding-bottom:0!important;
}
.atmo-plan-bandeau{ line-height:0; border-top:1px solid var(--atmo-trait); }
.atmo-plan-bandeau iframe{
  display:block; width:100%; border:0;
  /* Une pointe de saturation en moins : les verts et les bleus de
     Google jurent avec le crème et le bordeaux. */
  filter:saturate(.88);
}

/* ══════════════════════════════════════════════════════════════
   FILET DE SÉCURITÉ - TYPOGRAPHIE DU MENU (v1.22.0)
   Ces valeurs sont recopiées À L'IDENTIQUE des réglages du widget
   dans ATMO-entete.json : Mulish 12,5 px, graisse 800, capitales,
   1,5 px d'interlettrage, 10 et 13 px de rembourrage.

   Pourquoi les écrire deux fois ? Parce qu'Elementor ne conserve
   pas toujours la typographie de ses widgets Pro à l'import. Si
   elle survit, ces règles disent la même chose et rien ne bouge.
   Si elle se perd, le menu garde malgré tout son allure au lieu de
   s'afficher au corps par défaut, de déborder et de passer à la
   ligne par-dessus le bouton Contact.

   Rien d'autre n'est écrit ici : l'épinglage, la mise en page en
   trois colonnes et le comportement mobile viennent du modèle et
   des règles d'origine, plus haut dans cette feuille.
   ══════════════════════════════════════════════════════════════ */

.elementor-location-header .elementor-nav-menu--main .elementor-item{
  font-family:var(--atmo-police);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:10px 13px;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════
   HAUTEUR DE LA BARRE MOBILE - v1.27.1
   ══════════════════════════════════════════════════════════════

   L'en-tête est fait de trois conteneurs imbriqués : la barre, la
   rangée, puis une colonne par élément. Chacun a son rembourrage,
   et les trois s'additionnent. Régler celui du milieu dans Elementor
   ne fait donc presque rien - d'où l'impression que la hauteur est
   bloquée. C'est la seule chose que le thème impose encore : les
   trois rembourrages verticaux sont remis à zéro.

   Tout le reste redevient réglable dans Elementor. La taille du logo
   se change dans son widget, onglet téléphone, et la barre suit.
   Le script du thème mesure la barre obtenue et écrit sa hauteur
   dans --atmo-barre : le burger se recentre dessus et le panneau
   déroulant s'ouvre juste en dessous, sans rien à recaler.

   Il ne reste qu'un nombre ici, et c'est un PLANCHER : la barre ne
   descend jamais en dessous, même avec un tout petit logo.
   ══════════════════════════════════════════════════════════════ */

:root{
  --atmo-barre-mobile: 56px;
}

@media (max-width:1024px){

  /* Les trois niveaux perdent leur rembourrage vertical : c'est leur
     addition qui gonflait la barre. */
  .elementor-location-header .e-con,
  .elementor-location-header .e-con-inner{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Un plancher, plus une hauteur figée. Au-delà, c'est le logo qui
     commande - donc vous, dans Elementor. */
  .elementor-location-header > .e-con{
    min-height:var(--atmo-barre-mobile);
  }
  .elementor-location-header .e-con-inner,
  .elementor-location-header .e-con-inner > .e-con{
    min-height:0!important;
    align-items:center!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LES RÉSEAUX SOCIAUX DANS L'EN-TÊTE - v1.27.1

   Une seule rangée existe : le widget « Icônes de réseaux sociaux »
   d'Elementor, posé dans la barre, à droite du bouton Contact. Sur
   téléphone la barre le masque, et site.js en dépose une copie sous
   le bouton Contact du panneau déroulant. Modifier le widget se voit
   donc aux deux endroits.

   CE BLOC NE FAIT QUE DONNER L'ALLURE PAR DÉFAUT : cercle vide,
   filet crème, picto bordeaux, orange au survol. Pas un seul
   !important - dès que vous touchez un réglage dans Elementor
   (taille, couleur, écart, survol), c'est le vôtre qui passe devant.
   Le thème ne reprend la main que sur ce que vous laissez vide, ce
   qui garde la rangée présentable même après un réimport, Elementor
   perdant souvent ses réglages de style en chemin.
   ══════════════════════════════════════════════════════════════ */

.elementor-location-header .atmo-rs-widget .elementor-social-icons-wrapper{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--grid-column-gap, 10px);
  margin:0; padding:0;
}
.elementor-location-header .atmo-rs-widget .elementor-grid-item{
  margin:0;
}

.elementor-location-header .atmo-rs-widget .elementor-social-icon{
  background-color:transparent;
  border:1.5px solid var(--atmo-trait);
  border-radius:50%;
  color:var(--atmo-bordeaux);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Le picto suit la couleur du cercle. Sans cette ligne, le blanc que
   le widget pose par défaut sur l'icône le rend invisible sur fond
   transparent. */
.elementor-location-header .atmo-rs-widget .elementor-social-icon i{
  color:inherit;
}
.elementor-location-header .atmo-rs-widget .elementor-social-icon svg{
  fill:currentColor;
}
.elementor-location-header .atmo-rs-widget .elementor-social-icon:hover,
.elementor-location-header .atmo-rs-widget .elementor-social-icon:focus{
  background-color:var(--atmo-orange);
  border-color:var(--atmo-orange);
  color:#fff;
}

/* Sur téléphone et tablette, seule la copie du panneau reste : la
   rangée de la barre disparaît, sinon elle serrerait le burger
   contre le logo. La taille des pictos dans le panneau se règle
   dans le widget, onglet téléphone - la copie en hérite. */
@media (max-width:1024px){
  .elementor-location-header .atmo-rs-widget:not(.atmo-rs-copie){
    display:none!important;
  }
  .elementor-location-header .atmo-rs-copie{
    width:100%;
  }
  .elementor-location-header .atmo-rs-copie .elementor-social-icons-wrapper{
    justify-content:center;
  }

  /* Le bouton Contact du panneau : le texte reste blanc, comme dans
     la barre. Sans ce rappel, la couleur des entrées du menu
     déroulant - écrite par Elementor dans une règle plus forte -
     déteint sur lui et le rend illisible sur l'orange. */
  .elementor-location-header .elementor-nav-menu--dropdown .atmo-menu-contact,
  .elementor-location-header .elementor-nav-menu--dropdown .atmo-menu-contact:hover,
  .elementor-location-header .elementor-nav-menu--dropdown .atmo-menu-contact:focus,
  .elementor-location-header .elementor-nav-menu--dropdown .atmo-menu-contact:visited{
    color:#fff!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   L'APERÇU DE LA CARTE BLOQUÉE - v1.27.4

   Tant que le visiteur n'a pas accepté la publicité, Complianz
   remplace l'iframe Google Maps par un aperçu cliquable. Cet
   aperçu est un élément à lui, qui ne reprend pas la hauteur
   réglée dans le widget Elementor : il s'affiche à la taille
   naturelle de son image et dévore la page.

   On lui réimpose les trois hauteurs du widget - 420, 340 et
   260 px - et on recadre l'image au lieu de l'étirer. Le bandeau
   garde donc exactement la même tenue, carte affichée ou non.

   Si vous changez la hauteur de la carte dans Elementor, changez
   aussi ces trois nombres, sinon le bandeau sautera au moment du
   consentement.
   ══════════════════════════════════════════════════════════════ */

.atmo-plan-bandeau .cmplz-placeholder-element,
.atmo-plan-bandeau .cmplz-blocked-content-container,
.atmo-plan-bandeau .cmplz-blocked-content-container iframe,
.atmo-plan-bandeau .cmplz-blocked-content-container img{
  height:420px!important;
  max-height:420px!important;
  width:100%!important;
  object-fit:cover!important;
  background-size:cover!important;
  background-position:center center!important;
}

@media (max-width:1024px){
  .atmo-plan-bandeau .cmplz-placeholder-element,
  .atmo-plan-bandeau .cmplz-blocked-content-container,
  .atmo-plan-bandeau .cmplz-blocked-content-container iframe,
  .atmo-plan-bandeau .cmplz-blocked-content-container img{
    height:340px!important; max-height:340px!important;
  }
}

@media (max-width:767px){
  .atmo-plan-bandeau .cmplz-placeholder-element,
  .atmo-plan-bandeau .cmplz-blocked-content-container,
  .atmo-plan-bandeau .cmplz-blocked-content-container iframe,
  .atmo-plan-bandeau .cmplz-blocked-content-container img{
    height:260px!important; max-height:260px!important;
  }
}

/* Le message « Cliquez pour accepter » reste au centre du bandeau,
   quelle que soit la hauteur. */
.atmo-plan-bandeau .cmplz-blocked-content-notice{
  line-height:1.4;
}