/*
Theme Name:   ATMO - Feu et Confort
Theme URI:    https://atmo-feu.com
Description:  Thème enfant de Hello Elementor portant la charte graphique ATMO : couleurs, typographie Mulish auto-hébergée, formes organiques et bibliothèque de classes prêtes à l'emploi dans Elementor.
Author:       Atelier graphique
Template:     hello-elementor
Version:      1.27.8
Text Domain:  atmo-child
License:      GNU General Public License v3 or later
*/

/* ══════════════════════════════════════════════════════════════
   1. TYPOGRAPHIE - Mulish servie depuis ce serveur (conforme RGPD)
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-300.woff2') format('woff2');
           font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-400.woff2') format('woff2');
           font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-600.woff2') format('woff2');
           font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-800.woff2') format('woff2');
           font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Mulish';src:url('assets/fonts/mulish-900.woff2') format('woff2');
           font-weight:900;font-style:normal;font-display:swap;}

/* ══════════════════════════════════════════════════════════════
   2. LA CHARTE, EN UN SEUL ENDROIT
   Pour changer une couleur sur tout le site, c'est ici et nulle part ailleurs.
   ══════════════════════════════════════════════════════════════ */

:root{
  --atmo-creme:        #ede1d2;
  --atmo-bordeaux:     #5e1515;
  --atmo-orange:       #d76227;

  /* variantes calculées pour rester lisibles selon le fond */
  --atmo-orange-texte: #bd4d1a;   /* orange sur fond crème  */
  --atmo-orange-clair: #f0a765;   /* orange sur fond bordeaux */
  --atmo-bordeaux-nuit:#3a0c0c;   /* voiles et ombres */

  --atmo-flamme: linear-gradient(180deg,#f4dcbb 0%,#e9974a 48%,#d76227 100%);

  /* typographie */
  --atmo-police: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --atmo-titre-poids: 900;   /* équivalent Avenir Black */
  --atmo-corps-poids: 300;   /* équivalent Avenir Light */

  /* formes */
  --atmo-galet:  70% 30% 52% 48% / 40% 62% 38% 60%;
  --atmo-pilule: 999px;
  --atmo-carte:  34px;
  --atmo-socle:  120px 120px 0 0;

  /* rythme */
  --atmo-marge:   clamp(20px, 5vw, 80px);
  --atmo-section: clamp(56px, 8vw, 120px);
}

/* ══════════════════════════════════════════════════════════════
   3. BASES
   ══════════════════════════════════════════════════════════════ */

body{
  font-family:var(--atmo-police);
  font-weight:var(--atmo-corps-poids);
  color:var(--atmo-bordeaux);
  background:var(--atmo-creme);
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--atmo-police);
  font-weight:var(--atmo-titre-poids);
  color:var(--atmo-bordeaux);
  line-height:1.04;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
h1{font-size:clamp(38px,5.4vw,72px);}
h2{font-size:clamp(30px,3.8vw,52px);}
h3{font-size:clamp(24px,2.6vw,36px);}
h4{font-size:clamp(20px,2vw,27px);}

p{margin:0 0 1.1em;}
strong,b{font-weight:800;}
a{color:var(--atmo-orange-texte);text-underline-offset:3px;}
a:hover{color:var(--atmo-bordeaux);}

/* Les fonds sombres inversent tout le contenu d'un coup. */
.atmo-sur-bordeaux,
.atmo-sur-bordeaux h1,.atmo-sur-bordeaux h2,.atmo-sur-bordeaux h3,
.atmo-sur-bordeaux h4,.atmo-sur-bordeaux p,.atmo-sur-bordeaux li{color:var(--atmo-creme);}
.atmo-sur-bordeaux a{color:var(--atmo-orange-clair);}

/* ══════════════════════════════════════════════════════════════
   4. BIBLIOTHÈQUE ATMO
   À taper dans Elementor : onglet Avancé → CSS classes.
   ══════════════════════════════════════════════════════════════ */

/* --- Sur-titre ------------------------------------------------ */
.atmo-kicker{
  font-weight:800;font-size:clamp(13px,1.1vw,16px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--atmo-orange-texte);line-height:1;
}
.atmo-sur-bordeaux .atmo-kicker{color:var(--atmo-orange-clair);}

/* --- Boutons -------------------------------------------------- */
.atmo-btn,
.atmo-btn .elementor-button,
a.atmo-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--atmo-orange);color:#fff!important;
  font-weight:800;font-size:clamp(13px,1.05vw,16px);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1.15em 2.4em;border-radius:var(--atmo-pilule);border:0;
  transition:background .18s ease,transform .18s ease;
}
.atmo-btn:hover,.atmo-btn .elementor-button:hover{
  background:var(--atmo-bordeaux);transform:translateY(-1px);
}

/* Les variantes doublent la classe (.atmo-btn.atmo-btn--x) pour passer devant
   a.atmo-btn : sans cela, la couleur de base l'emporterait sur la variante
   dès que la classe est posée directement sur un lien. */
.atmo-btn.atmo-btn--fonce,
.atmo-btn--fonce .elementor-button{
  background:var(--atmo-bordeaux);color:var(--atmo-creme)!important;
}
.atmo-btn.atmo-btn--fonce:hover,
.atmo-btn--fonce .elementor-button:hover{background:var(--atmo-orange);color:#fff!important;}

.atmo-btn.atmo-btn--ligne,
.atmo-btn--ligne .elementor-button{
  background:transparent;border:2px solid currentColor;
  color:var(--atmo-bordeaux)!important;
}
.atmo-sur-bordeaux .atmo-btn.atmo-btn--ligne,
.atmo-sur-bordeaux .atmo-btn--ligne .elementor-button{color:var(--atmo-creme)!important;}
.atmo-btn.atmo-btn--ligne:hover,
.atmo-btn--ligne .elementor-button:hover{
  background:var(--atmo-orange);border-color:var(--atmo-orange);color:#fff!important;
}

/* --- Pastille de catégorie ------------------------------------ */
.atmo-badge{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--atmo-creme);color:var(--atmo-bordeaux);
  font-weight:800;font-size:clamp(12px,.95vw,15px);
  letter-spacing:.14em;text-transform:uppercase;
  padding:.75em 1.5em;border-radius:var(--atmo-pilule);
}
.atmo-badge img{height:1.9em;width:auto;display:block;}
.atmo-badge--fonce{background:var(--atmo-bordeaux);color:var(--atmo-creme);}

/* --- Formes de la charte -------------------------------------- */
.atmo-galet, .atmo-galet .elementor-widget-container,
.atmo-galet img{border-radius:var(--atmo-galet);overflow:hidden;}
.atmo-carte, .atmo-carte img{border-radius:var(--atmo-carte);overflow:hidden;}
.atmo-pilule, .atmo-pilule img{border-radius:var(--atmo-pilule);overflow:hidden;}

/* Socle crème à coins hauts arrondis, comme sur les visuels sociaux */
.atmo-socle{
  background:var(--atmo-creme);
  border-radius:var(--atmo-socle);
  padding:var(--atmo-section) var(--atmo-marge);
}

/* --- Fonds ---------------------------------------------------- */
.atmo-fond-bordeaux{background:var(--atmo-bordeaux);}
.atmo-fond-creme{background:var(--atmo-creme);}
.atmo-fond-flamme{background:var(--atmo-flamme);}

/* Voile de lisibilité sur une section à image de fond */
.atmo-voile{position:relative;}
.atmo-voile > *{position:relative;z-index:2;}
.atmo-voile::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(58,12,12,0) 0%, rgba(58,12,12,.72) 58%, rgba(58,12,12,.96) 100%);
}
.atmo-voile--haut::before{
  background:linear-gradient(180deg,
    rgba(58,12,12,.78) 0%, rgba(58,12,12,.25) 55%, rgba(58,12,12,0) 100%);
}

/* --- Chiffre d'offre en dégradé flamme ------------------------ */
.atmo-chiffre{
  font-weight:900;font-size:clamp(64px,11vw,180px);line-height:.9;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#f7e2c4 0%,#efa257 55%,#e07b34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- Liste de conseils numérotés ------------------------------ */
.atmo-conseils{list-style:none;margin:0;padding:0;counter-reset:atmo;}
.atmo-conseils li{
  counter-increment:atmo;position:relative;
  padding-left:3.4em;margin-bottom:1.5em;
}
.atmo-conseils li::before{
  content:counter(atmo,decimal-leading-zero);
  position:absolute;left:0;top:-.1em;
  font-weight:900;font-size:1.5em;line-height:1;
  color:var(--atmo-orange-texte);
}
.atmo-sur-bordeaux .atmo-conseils li::before{color:var(--atmo-orange-clair);}

/* --- Filet ---------------------------------------------------- */
.atmo-filet{height:3px;background:currentColor;opacity:.25;border:0;margin:2em 0;}

/* ══════════════════════════════════════════════════════════════
   5. EN-TÊTE ET PIED DE PAGE PAR DÉFAUT DE HELLO ELEMENTOR
   Ces règles ne servent que tant que les modèles du Theme Builder
   ne sont pas publiés. Elles reprennent l'en-tête clair de la
   maquette : blanc, filet discret, menu bordeaux - et non le
   bandeau bordeaux des visuels sociaux, qui écrasait la page.
   ══════════════════════════════════════════════════════════════ */

.site-header{
  background:var(--atmo-surface, #fff);
  border-bottom:1px solid var(--atmo-trait, #e3d9cd);
  padding:.85rem var(--atmo-marge);
}
.site-header .site-branding img{max-height:44px;width:auto;}
.site-header .site-navigation ul li a{
  color:var(--atmo-bordeaux);font-weight:800;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:.75em .8em;border-radius:8px;
  transition:color .18s ease,background .18s ease;
}
.site-header .site-navigation ul li a:hover,
.site-header .site-navigation ul li.current-menu-item a{
  color:var(--atmo-orange-texte);background:var(--atmo-creme);
}

.site-footer{
  background:var(--atmo-surface, #fff);
  border-top:1px solid var(--atmo-trait, #e3d9cd);
  color:var(--atmo-taupe, #8a7166);
  padding:44px var(--atmo-marge);
}
.site-footer a{color:var(--atmo-orange-texte);}

/* Hello affiche le logo du site à sa taille d'origine dans le pied :
   sans plafond, un PNG de 1500 px occupe tout l'écran. */
.site-header .site-branding img,
.site-footer .site-branding img,
.site-footer img{
  max-height:46px;width:auto;height:auto;display:block;
}
.site-header .site-branding img{max-height:44px;}
.site-footer .site-description,
.site-header .site-description{
  font-size:14px;color:var(--atmo-taupe, #8a7166);letter-spacing:.02em;
}

/* ══════════════════════════════════════════════════════════════
   6. FORMULAIRES
   ══════════════════════════════════════════════════════════════ */

input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],textarea,select{
  font-family:var(--atmo-police);font-weight:400;font-size:17px;
  color:var(--atmo-bordeaux);background:#fff;
  border:2px solid rgba(94,21,21,.18);border-radius:16px;
  padding:.9em 1.1em;width:100%;
  transition:border-color .18s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--atmo-orange);
}
::placeholder{color:rgba(94,21,21,.45);}

label{font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;}

/* ══════════════════════════════════════════════════════════════
   7. MOBILE
   Les titres restent lisibles, les socles perdent leur arrondi excessif.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:767px){
  :root{--atmo-socle:64px 64px 0 0;}
  .atmo-badge{font-size:12px;padding:.7em 1.2em;}

  /* Le bouton pleine largeur convient dans le corps d'une page, jamais
     dans l'en-tête : il y poussait le logo sur sa propre ligne. */
  .atmo-btn .elementor-button{width:100%;justify-content:center;}
  header .atmo-btn .elementor-button,
  .elementor-location-header .atmo-btn .elementor-button{
    width:auto;font-size:12px;padding:.9em 1.5em;letter-spacing:.1em;
  }
}

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}