/* Footer partagé (style fiches produit) — inclus sur toutes les pages du site via site-chrome.js */

/* Bloc "Prêt à démarrer votre projet ?" au-dessus du footer (même partout).
   Photo dans public/images (référencée seulement depuis le JS/CSS partagé → piège Vite). */
.site-cta { box-sizing: border-box; position: relative; width: 100%; max-width: 2560px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap; padding: 4.5rem var(--edg-gutter); text-align: left; font-family: 'Plus Jakarta Sans', sans-serif; background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--footer-bg, #192538) 70%, transparent) 80%, var(--footer-bg, #192538) 100%), /* bas du bloc fondu dans la couleur du footer */ radial-gradient(ellipse 60% 90% at 0% 100%, color-mix(in srgb, var(--footer-bg, #192538) 75%, transparent), transparent 70%), /* coin bas-gauche encore plus foncé */ linear-gradient(to right, var(--footer-bg, #192538) 0%, color-mix(in srgb, var(--footer-bg, #192538) 82%, transparent) 22%, color-mix(in srgb, var(--footer-bg, #192538) 55%, transparent) 50%, color-mix(in srgb, var(--footer-bg, #192538) 35%, transparent) 100%), /* couleur du footer (voile allégé : les montagnes se voient aussi sous les textes) */ url('/images/accueil/footer-montagne.jpg') center 20%/cover no-repeat #000; /* photo montagne : pages sans photo partagée avec le bloc */ }
.site-cta-title { max-width: 650px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: #fff; margin: 0 0 1rem; }
.site-cta-text { max-width: 650px; font-size: 1.15rem; color: rgba(255,255,255,.6); margin: 0 0 2rem; }
.site-cta-btn { display: inline-flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 700; padding: 1.15rem 2.4rem; border-radius: 999px; background: #fff; color: #000; text-decoration: none; transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .2s ease; }
.site-cta-btn:hover { transform: translateY(-3px); background: #f1f1f4; }
/* Bureau : photo décalée pour amener les montagnes vers la gauche (sous les textes), un peu moins de ciel */
@media (min-width: 901px) {
  .site-cta { background-size: 100% 100%, 100% 100%, 100% 100%, cover; background-position: 0 0, 0 0, 0 0, 85% 32%; }
  /* Titre sur une seule ligne, sans retour */
  .site-cta-title { max-width: none; }
}
@media (min-width: 1500px) {
  .site-cta-title { white-space: nowrap; }
}
.site-footer { box-sizing: border-box; position: relative; width: 100%; max-width: 2560px; left: 50%; transform: translateX(-50%); background: var(--footer-bg, #192538); padding: 4rem var(--edg-gutter) 2rem; /* bleu nuit (wallbox.com) ; une page peut changer la teinte : <div id="site-footer" data-color="#…"> */ font-family: 'Plus Jakarta Sans', sans-serif; }
.site-footer-back-to-top { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.6); font-size: .875rem; font-weight: 400; transition: color .2s ease; }
.site-footer-inner { max-width: 2560px; margin: 0 auto; }
.site-footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; margin-bottom: 2rem; align-items: start; }
/* Colonne logo + téléphone + bouton : largeur du plus large élément, tout centré dessus */
.site-footer-brand { display: flex; flex-direction: column; align-items: center; justify-self: start; }
.site-footer-logo { display: inline-block; margin-bottom: 0; }
.site-footer-logo img { display: block; height: 52px; width: auto; filter: brightness(0) invert(1); }
.site-footer-tabs { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.site-footer-tab { background: none; border: none; cursor: pointer; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .2s ease; }
.site-footer-tab.site-footer-tab-active { color: #178bff; }
.site-footer-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.site-footer-slider::-webkit-scrollbar { display: none; }
.site-footer-slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; }
.site-footer-slide-title { display: none; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #178bff; margin-bottom: 1rem; }
.site-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer-links a { color: #fff; text-decoration: none; font-size: .9rem; transition: color .2s ease; }
/* Petits textes cliquables du footer : bleu du site au survol */
.site-footer-links a:hover, .site-footer-back-to-top:hover, .site-footer-bottom a:hover { color: #178bff; }
.site-footer-dots { display: none; gap: .4rem; margin-top: 1.25rem; }
.site-footer-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }
.site-footer-dot.site-footer-dot-active { background: #fff; }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; font-size: .875rem; color: rgba(255,255,255,.6); flex-wrap: wrap; gap: .5rem; }
.site-footer-bottom p { margin: 0; }

@media (max-width: 900px) {
  /* Bloc "Prêt à démarrer" : marges et tailles adaptées à l'écran étroit */
  .site-cta { padding: 3.5rem 1.25rem; text-align: center; } /* titre et texte centrés, comme le bouton */
  .site-cta-title { font-size: 2rem; }
  .site-cta-text { font-size: 1rem; margin-bottom: 1.5rem; }
  .site-cta-btn { font-size: 1rem; padding: 1.1rem 2.2rem; }
  .site-footer { padding: 2.5rem 1.25rem 2rem; }
  /* Bas du footer : copyright et « Haut de page » centrés l'un sous l'autre */
  .site-footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: .75rem; }
  /* Mobile : les 3 listes (Services / Zones / Entreprise) d'abord, une à la fois avec les onglets pour passer de l'une à l'autre ;
     puis en bas le logo à gauche, le numéro et le bouton « Nous contacter » centrés l'un sur l'autre à droite */
  .site-footer-top { grid-template-columns: 1fr !important; gap: 2.25rem !important; }
  .site-footer-top > div { min-width: 0; }
  .site-footer-top > .site-footer-brand { order: 2; }
  .site-footer-tabs { gap: 1.5rem; margin-bottom: 1.1rem; justify-content: center; }
  .site-footer-dots { justify-content: center; }
  .site-footer-tab { font-size: .875rem; }
  .site-footer-dots { display: flex !important; }
  .site-footer-links { gap: .65rem; align-items: center; text-align: center; }
  .site-footer-links a { font-size: 1rem; }
  /* Bouton « Estimer mon projet » centré */
  .site-cta > div { width: 100%; }
  .site-cta-btn { display: flex; width: fit-content; margin: 0 auto; }
  /* Logo centré */
  .site-footer-brand { display: flex; justify-content: center; align-items: center; justify-self: stretch; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.15); }
  .site-footer-logo { margin: 0; }
  .site-footer-logo img { height: 33.264px; }
}

@media (min-width: 901px) {
  .site-footer-tabs { display: none !important; }
  .site-footer-slider { overflow: visible !important; scroll-snap-type: none !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2rem; }
  .site-footer-slide { flex: none !important; text-align: center; }
  /* Liens centrés sous leur titre de colonne (Services / Zones / Entreprise) */
  .site-footer-links { align-items: center; }
  .site-footer-slide-title { display: block !important; color: #fff !important; }
}

/* Pas de filet blanc entre « Prêt à démarrer » et le footer (demi-pixel dû au centrage translateX(-50%)) :
   le footer remonte d'1px sous le bloc */
.site-cta + .site-footer { margin-top: -1px; }

/* Option de page <div id="site-footer" data-cta-transparent> : le bloc « Estimez vos travaux » n'a pas sa propre photo,
   il laisse voir le fond de la page (ex. accueil : une seule photo derrière les avis et ce bloc) */
/* …sans voile sombre par-dessus (on voit la photo à travers), seulement un fondu vers le bas dans la couleur
   du footer, pour s'intégrer au footer juste en dessous */
.site-cta.site-cta-transparent { background: linear-gradient(to bottom, transparent 55%, var(--footer-bg, #192538) 100%); }

/* Option de page <div id="site-footer" data-cta-photo="/images/..."> : le bloc « Estimez vos travaux » reprend la
   même photo que le héro de la page (pages service), assombrie en dégradé jusqu'à la couleur du footer juste
   en dessous — la photo « descend » visuellement jusqu'au bouton, sans avoir à modifier la structure de la page. */
.site-cta.site-cta-photo { background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, var(--footer-bg, #192538) 100%), var(--cta-photo) center 30% / cover no-repeat, var(--footer-bg, #192538); }

/* Bureau : la vraie photo du héro (.svc-hero, voir site-service.css) s'étire déjà vers le bas — le bloc CTA vient
   la recouvrir (marge négative) au lieu d'afficher sa propre image, pour une seule photo continue, pas une 2e copie. */
@media (min-width: 901px) {
  /* -256px (pas -320px) : laisse respirer ~64px de la photo/dégradé du héro entre les cartes et le bloc CTA
     au lieu de les coller pile l'un sur l'autre. */
  .svc-hero + .site-cta.site-cta-photo, .packs-hero + .site-cta.site-cta-photo { margin-top: -256px; background: none; }
}

/* Footer « dévoilé » au scroll (initFooterReveal dans site-chrome.js) : la page (.site-page-cover, opaque) glisse
   vers le haut et découvre le footer foncé resté collé en bas de l'écran ; en remontant, elle le recouvre */
.has-footer-reveal .site-page-cover { position: relative; z-index: 1; background: #fff; }
.has-footer-reveal body > .site-footer { position: sticky; bottom: 0; z-index: 0; left: auto; transform: none; margin: 0 auto; }

/* Le fond blanc par défaut de la coque ci-dessus transparaît sur 1-2px sous le bloc CTA transparent
   (.site-cta-photo) : sa hauteur réelle dépasse légèrement la marge négative fixe qui le fait chevaucher le
   bas du héro, d'où un fin trait blanc entre le CTA et le footer. On aligne ce fond sur la couleur du footer
   de la page (déjà posée en --footer-bg par data-color) au lieu du blanc par défaut. */
html.has-footer-reveal .site-page-cover:has(.site-cta-photo) { background: var(--footer-bg, #1a1a1a); }

/* Footer clair — option de page <div id="site-footer" data-light data-color="#f1f1f4"> : fond gris du site, logo et textes sombres. */
.site-footer-light .site-footer-logo img { filter: none; }
.site-footer-light .site-footer-links a { color: #1d1d1f; }
.site-footer-light .site-footer-links a:hover, .site-footer-light .site-footer-back-to-top:hover, .site-footer-light .site-footer-bottom a:hover { color: #178bff; }
.site-footer-light .site-footer-tab { color: rgba(29,29,31,.5); }
.site-footer-light .site-footer-slide-title { color: #1d1d1f !important; } /* titres Services / Zones / Entreprise (ordinateur : forcés en blanc ailleurs avec !important) */
.site-footer-light .site-footer-tab.site-footer-tab-active { color: #178bff; }
.site-footer-light .site-footer-dot { background: rgba(29,29,31,.2); }
.site-footer-light .site-footer-dot.site-footer-dot-active { background: #1d1d1f; }
.site-footer-light .site-footer-bottom, .site-footer-light .site-footer-back-to-top { color: rgba(29,29,31,.6); }
.site-footer-light .site-footer-bottom { border-top-color: rgba(0,0,0,.12); }

/* Pages à fond blanc (data-cta-solid) : footer et bloc d'appel à l'action dans le bleu nuit du footer, avec la photo de montagne du bloc par défaut (le fondu vers la couleur du footer est déjà dans .site-cta) — pas d'aplat uni : la photo apporte du relief (demande explicite) */

/* Mobile : le bloc d'appel à l'action recouvre 1 px du footer — évite le trait blanc (arrondi de pixel) entre les deux sur les écrans étroits */
@media (max-width: 900px) {
  .site-cta { margin-bottom: -1px; }
  /* la coque reste blanche (sinon le bleu du footer transparaît dans les trous entre sections) ; le CTA déborde de 1 px en bleu pour fermer la jointure */
  html.has-footer-reveal .site-page-cover { background: #fff; }
  .site-cta { box-shadow: 0 1px 0 var(--footer-bg, #192538); }
}

/* Bandeau d'appel « à plat » (data-cta-flat) : couleur du footer, sans photo ni dégradé */
.site-cta.site-cta-flat { background: var(--footer-bg, #192538); }