/*
Theme Name: Climatisation
Theme URI: http://climatisation-01.fr
Author: Climatisation
Description: Thème unique du réseau Multisite climatisation-XX.fr (départements métropole hors Corse).
Version: 0.2.0
Text Domain: climatisation
*/

/* ==========================================================================
   SOMMAIRE
   --------------------------------------------------------------------------
   01. Tokens de design (:root)
   02. Reset et base
   03. Accessibilité (skip link, focus, sr-only)
   04. Icônes
   05. Gabarit général (bandeaux pleine largeur, sections)
   06. Header - bandeau clair (template-parts/header-topbar.php)
   07. Header - bandeau sombre et menu (template-parts/nav.php)
   08. Barre d'appel mobile (template-parts/barre-appel-mobile.php)
   09. Breadcrumb (template-parts/breadcrumb.php)
   10. Hero (template-parts/hero.php)
   11. Boutons
   12. Grille bento (composant de mise en page réutilisable)
   13. Bandeau de confiance (template-parts/bandeau-confiance.php)
   14. Cartes et tarifs (template-parts/services-teaser.php, tarifs.php)
   15. Listes compactes (template-parts/services-secondaires.php)
   16. Note avis (template-parts/note-avis.php)
   17. Zone climatique (front-page.php, page-entreprise.php)
   18. Formulaire de devis (template-parts/formulaire-devis.php)
   19. Villes et plan du site (template-parts/villes-liens.php, page-plan-du-site.php)
   20. Tableau de prix (template-parts/tarifs-marche.php)
   21. Marques (template-parts/marques.php)
   22. FAQ (template-parts/faq.php)
   23. CTA final (template-parts/cta-final.php)
   24. Signature auteur (template-parts/auteur-signature.php)
   25. Checklists
   26. Contact et infos entreprise
   27. Aides et primes (page-aides-primes.php)
   28. Footer et départements voisins (footer.php, departements-voisins.php)
   29. Divers
   --------------------------------------------------------------------------
   CONVENTIONS
   - Un bloc de ce fichier = un composant, nommé comme le template-part
     correspondant et placé dans l'ordre d'apparition dans la page.
   - Toutes les classes sont préfixées .clim- (sauf .site-* héritées du
     gabarit de base) ; les variantes s'écrivent en suffixe -- (ex.
     .clim-bento-cell--accent).
   - Rayons, ombres, bordures et espacements passent par les tokens du bloc
     01 : ne pas recoder de valeur en dur dans un composant.
   - Aucun sélecteur d'élément nu hors reset et accessibilité : un composant
     ne style que ses propres classes, pour rester déplaçable d'un gabarit
     à l'autre sans effet de bord.
   ========================================================================== */

/* ==========================================================================
   01. Tokens de design
   ========================================================================== */

:root {
  /* Couleurs */
  --clim-ink: #12202b;
  --clim-muted: #4a5d6a;
  --clim-bg: #f4f7f8;
  --clim-card: #ffffff;
  --clim-accent: #0b6e6a;
  --clim-accent-dark: #094f4c;
  --clim-accent-soft: #e8f1f0;
  --clim-border: #e2e8eb;
  --clim-border-strong: #d5dee3;
  --clim-footer-text: #cfe0df;

  /* Rayons, ombres et rythme : à utiliser systématiquement dans les composants plutôt que
     de recoder des valeurs en dur (le thème mélangeait 8/12/16/20px et trois ombres rgba
     différentes, ce qui rendait le style hétérogène de section en section). */
  --clim-radius-sm: 8px;
  --clim-radius-md: 12px;
  --clim-radius-lg: 16px;
  --clim-radius-xl: 20px;
  --clim-radius-pill: 999px;
  --clim-shadow-sm: 0 2px 8px rgba(18, 32, 43, 0.05);
  --clim-shadow-md: 0 10px 24px rgba(18, 32, 43, 0.08);
  --clim-shadow-lg: 0 12px 32px rgba(18, 32, 43, 0.1);
  --clim-gap: 1.25rem;

  /* Largeur de cadrage commune à tous les conteneurs internes (voir bloc 05). */
  --clim-largeur: min(1100px, calc(100% - 2rem));
}

/* ==========================================================================
   02. Reset et base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--clim-ink);
  background: var(--clim-bg);
  line-height: 1.6;
}

a { color: var(--clim-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   03. Accessibilité
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Lien d'évitement ("Aller au contenu principal", voir header.php) : hors-écran par défaut,
   ramené visible au focus clavier (première tabulation) pour sauter la navigation répétée
   sur chacune des ~4700 pages du réseau. */
.clim-skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 200;
  background: var(--clim-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  border-radius: 0 0 6px 0;
}
.clim-skip-link:focus { left: 0; }

/* Focus clavier visible et cohérent (WCAG 2.4.7) sur tous les éléments interactifs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--clim-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.clim-cta-final a:focus-visible { outline-color: #fff; }

/* ==========================================================================
   04. Icônes
   ========================================================================== */

.clim-icon { width: 1.5em; height: 1.5em; display: inline-block; vertical-align: -0.3em; }
.clim-icon-xs { width: 0.95em; height: 0.95em; }
.clim-icon-sm { width: 1.1em; height: 1.1em; }
.clim-icon-lg { width: 2.4rem; height: 2.4rem; color: var(--clim-accent); }
.clim-icon-xl { width: 2.75rem; height: 2.75rem; }
/* fill: currentColor surcharge l'attribut de présentation fill="none" posé par
   climatisation_icon() (voulu pour les icônes trait) : seule l'étoile doit apparaître pleine. */
.clim-star { color: #e8a33d; fill: currentColor; }

/* ==========================================================================
   05. Gabarit général
   --------------------------------------------------------------------------
   site-header / site-main / site-footer sont des bandeaux PLEINE LARGEUR
   (leur fond doit toucher les bords de l'écran) : c'est chaque conteneur
   interne (.clim-header-topbar, .clim-nav, .clim-hero,
   .clim-page-sections > section, .clim-footer-grid...) qui se limite lui-même
   à var(--clim-largeur) et se centre. Ne jamais remettre de max-width sur les
   bandeaux sous peine de faire calculer ces conteneurs internes par rapport à
   une largeur déjà réduite au lieu de la largeur réelle de l'écran (bug
   historique corrigé).
   ========================================================================== */

.site-header {
  background: var(--clim-card);
  border-bottom: 1px solid var(--clim-border-strong);
}

.site-main { padding: 2rem 0 4rem; }

/* Gabarit de repli du site racine du réseau (voir index.php). */
.site-card {
  width: var(--clim-largeur);
  margin-inline: auto;
  background: var(--clim-card);
  padding: 1.5rem 1.75rem;
  border-radius: var(--clim-radius-sm);
  box-shadow: var(--clim-shadow-md);
}

.site-footer {
  padding: 2.5rem 0 1.5rem;
  color: var(--clim-footer-text);
  background: var(--clim-ink);
  font-size: 0.95rem;
}
.site-footer h3 { color: #fff; }
.site-footer a { color: var(--clim-footer-text); }
.site-footer a:hover { color: #fff; }

/* Sections génériques.
   Volontairement PAS de fond alterné via :nth-child(even) (ancienne approche) : sa
   spécificité CSS (0,2,1) est plus forte que les classes de composant comme .clim-cta-final
   ou .clim-devis (0,1,0), donc elle écrasait leur propre fond dès qu'ils tombaient sur une
   position paire (ex. bouton "ghost" invisible du CTA final sur fond blanc au lieu du
   dégradé prévu). Elle produisait aussi des rectangles blancs à bords carrés sur des
   sections de simple contenu (ex. "Autres solutions"), avec un padding/rayon différent des
   cards. Séparation visuelle assurée à la place par une fine bordure entre sections, sauf
   pour celles qui gèrent déjà leur propre fond/carte (.clim-devis, .clim-cta-final). */
.clim-page-sections > section { padding: 3rem 1.5rem; width: var(--clim-largeur); margin: 0 auto 2rem; }
.clim-page-sections > section:last-child { margin-bottom: 0; }
.clim-page-sections > section + section:not(.clim-devis):not(.clim-cta-final) { border-top: 1px solid var(--clim-border); }
.clim-page-sections h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }

/* ==========================================================================
   06. Header - bandeau clair
   --------------------------------------------------------------------------
   Logo (icône carrée + code du département), secteur d'intervention,
   téléphone et note avis. Voir template-parts/header-topbar.php.
   ========================================================================== */

.clim-header-topbar {
  width: var(--clim-largeur);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  padding: 1rem 1.5rem;
}
.clim-logo { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--clim-ink); }
.clim-logo:hover, .clim-logo:focus-visible { text-decoration: none; }
.clim-logo-icon { display: inline-flex; flex-shrink: 0; }
.clim-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.clim-logo-marque { font-size: 0.85rem; font-weight: bold; letter-spacing: 0.03em; text-transform: uppercase; }
.clim-logo-code { font-size: 1.5rem; font-weight: bold; color: var(--clim-accent); }

.clim-topbar-infos { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.clim-topbar-info { display: flex; align-items: center; gap: 0.5rem; }
.clim-topbar-info .clim-icon { color: var(--clim-accent); flex-shrink: 0; }
.clim-topbar-info strong { display: block; font-size: 0.95rem; color: var(--clim-ink); }
.clim-topbar-info a { color: var(--clim-ink); }
.clim-topbar-info a:hover, .clim-topbar-info a:focus-visible { color: var(--clim-accent); }
/* Légende discrète sous chaque bloc d'info ("Secteur d'intervention", "Nous appeler"). */
.clim-topbar-caption { display: block; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clim-muted); }

/* Note avis compacte : réservée aux écrans assez larges pour accueillir logo + secteur +
   téléphone + avis sur une seule ligne sans surcharge. */
@media (max-width: 900px) {
  .clim-note-avis-compact { display: none; }
}

@media (max-width: 780px) {
  .clim-header-topbar { padding: 0.85rem 1.5rem; }
  .clim-topbar-infos { gap: 0.85rem 1.25rem; }
}

@media (max-width: 560px) {
  .clim-logo-marque { font-size: 0.75rem; }
  .clim-logo-code { font-size: 1.2rem; }
  .clim-topbar-info strong { font-size: 0.85rem; }
}

/* ==========================================================================
   07. Header - bandeau sombre et menu
   --------------------------------------------------------------------------
   Menu court : 4 prestations coeur de métier + Contact (le reste est au
   footer). Pas de téléphone ici, il est dans le bandeau clair.
   Voir template-parts/nav.php.
   ========================================================================== */

.clim-header-nav { background: var(--clim-ink); }
.clim-nav {
  width: var(--clim-largeur);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.25rem 1.5rem;
}
.clim-nav-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; margin: 0; padding: 0.85rem 0; flex: 1; }
.clim-nav-menu a { display: inline-block; padding: 0.25rem 0; color: #fff; font-weight: 500; }
.clim-nav-menu a:hover, .clim-nav-menu a:focus-visible { text-decoration: underline; }

/* Zone tactile 44x44px minimum (WCAG 2.5.5/2.5.8) : les 24px de trait du hamburger seuls
   n'atteignaient pas ce minimum une fois le padding pris en compte. */
.clim-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.clim-nav-toggle-bar, .clim-nav-toggle-bar::before, .clim-nav-toggle-bar::after {
  content: ""; display: block; width: 24px; height: 2px; background: #fff; position: relative;
}
.clim-nav-toggle-bar::before { position: absolute; top: -7px; }
.clim-nav-toggle-bar::after { position: absolute; top: 7px; }

@media (max-width: 780px) {
  .clim-nav-toggle { display: flex; }
  .clim-nav { flex-wrap: wrap; padding: 0.6rem 1.5rem; }
  .clim-nav-menu {
    display: none; flex-direction: column; gap: 0; width: 100%;
    order: 3; padding: 0; margin-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .clim-nav-open .clim-nav-menu { display: flex; padding-top: 0.5rem; }
  .clim-nav-menu > li { width: 100%; }
  .clim-nav-menu a { display: block; padding: 0.6rem 0; }
}

/* ==========================================================================
   08. Barre d'appel mobile
   --------------------------------------------------------------------------
   Voir template-parts/barre-appel-mobile.php, inclus juste avant wp_footer()
   dans footer.php : masquée par défaut, affichée uniquement sous 640px. CSS
   pur (pas de JS) : deux boutons pleine largeur "Appeler" / "Devis gratuit",
   fixés en bas de l'écran pour rester joignables sans remonter la page.
   ========================================================================== */

.clim-barre-appel-mobile { display: none; }

@media (max-width: 640px) {
  .clim-barre-appel-mobile {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--clim-card);
    border-top: 1px solid var(--clim-border-strong);
    box-shadow: 0 -4px 16px rgba(18, 32, 43, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .clim-barre-appel-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0.5rem;
    font-weight: bold;
    font-size: 0.95rem;
  }
  .clim-barre-appel-btn:hover,
  .clim-barre-appel-btn:focus-visible { text-decoration: none; }
  .clim-barre-appel-tel { color: #fff; background: var(--clim-accent); }
  .clim-barre-appel-devis { color: var(--clim-ink); background: var(--clim-card); border-left: 1px solid var(--clim-border-strong); }

  /* Évite que la barre fixe ne recouvre durablement le bas de la page (ex. footer, CTA final). */
  body { padding-bottom: 60px; }
}

/* ==========================================================================
   09. Breadcrumb
   ========================================================================== */

.clim-breadcrumb { font-size: 0.85rem; color: var(--clim-muted); margin-bottom: 1rem; }
.clim-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; }
.clim-breadcrumb a { color: var(--clim-muted); }

/* ==========================================================================
   10. Hero
   ========================================================================== */

.clim-hero {
  display: flex; gap: 2.5rem; align-items: center;
  width: var(--clim-largeur); margin-inline: auto;
  padding: 2.5rem 1.5rem;
}
.clim-hero-simple { padding-bottom: 1.5rem; }
.clim-hero-text { flex: 1.1; }
.clim-hero-image { flex: 1; }
.clim-hero-image img { width: 100%; height: auto; border-radius: var(--clim-radius-md); display: block; }
.clim-hero h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 1rem; line-height: 1.25; }
.clim-hero-intro { color: var(--clim-muted); font-size: 1.05rem; }
.clim-hero-note { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0; }
.clim-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

@media (max-width: 780px) {
  .clim-hero { flex-direction: column; }
}

/* ==========================================================================
   11. Boutons
   ========================================================================== */

.clim-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: var(--clim-radius-pill); font-weight: 600;
  border: 2px solid transparent;
}
.clim-btn:hover { text-decoration: none; }
.clim-btn-primary { background: var(--clim-accent); color: #fff; }
.clim-btn-primary:hover { background: #085552; }
.clim-btn-ghost { border-color: var(--clim-accent); color: var(--clim-accent); }
.clim-btn-large { padding: 0.95rem 1.8rem; font-size: 1.05rem; box-shadow: 0 8px 20px rgba(11, 110, 106, 0.18); }

/* ==========================================================================
   12. Grille bento
   --------------------------------------------------------------------------
   Composant de mise en page réutilisable, indépendant des gabarits : une
   grille de 6 colonnes dont chaque enfant occupe par défaut la moitié, et
   dont on module la portée avec les utilitaires .clim-bento-w* / .clim-bento-h*.
   Les modificateurs sont posés sur les enfants directs (spécificité (0,2,0)
   via .clim-bento > .clim-bento-w2), ce qui évite tout !important et permet
   de les combiner avec un composant de surface existant comme .clim-card.
   .clim-bento-cell fournit la surface (fond, bordure, rayon, ombre) pour les
   blocs qui n'en ont pas déjà une.
   ========================================================================== */

.clim-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--clim-gap); }
.clim-bento > * { grid-column: span 3; }
.clim-bento > .clim-bento-w2 { grid-column: span 2; }
.clim-bento > .clim-bento-w3 { grid-column: span 3; }
.clim-bento > .clim-bento-w4 { grid-column: span 4; }
.clim-bento > .clim-bento-w6 { grid-column: span 6; }
.clim-bento > .clim-bento-h2 { grid-row: span 2; }

/* Variante à 4 colonnes égales, pour les rangées d'éléments courts (badges de confiance,
   solutions annexes) où l'asymétrie n'apporte rien. */
.clim-bento--quatre { grid-template-columns: repeat(4, 1fr); }
.clim-bento--quatre > * { grid-column: span 1; }

.clim-bento-cell {
  background: var(--clim-card);
  border: 1px solid var(--clim-border);
  border-radius: var(--clim-radius-lg);
  box-shadow: var(--clim-shadow-sm);
  padding: 1.25rem 1.35rem;
}
.clim-bento-cell--accent { background: var(--clim-accent-soft); border-color: transparent; box-shadow: none; }
.clim-bento-cell--plein { background: var(--clim-accent); border-color: transparent; color: #fff; }
.clim-bento-cell--plein a { color: #fff; }
/* Cellule "donnée mise en avant" : chiffre ou libellé court centré verticalement. */
.clim-bento-cell--donnee { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; }
.clim-bento-donnee-valeur { font-size: 1.5rem; font-weight: bold; color: var(--clim-accent); line-height: 1.2; }
.clim-bento-donnee-libelle { font-size: 0.8rem; color: var(--clim-muted); }
.clim-bento-cell h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.clim-bento-cell p:last-child { margin-bottom: 0; }

/* Sous 900px la grille tombe à 2 colonnes et tous les modificateurs de largeur sont
   neutralisés (une cellule = une colonne), sauf .clim-bento-w6 qui reste pleine largeur.
   Sous 560px, une seule colonne. */
@media (max-width: 900px) {
  .clim-bento { grid-template-columns: repeat(2, 1fr); }
  .clim-bento > *,
  .clim-bento > .clim-bento-w2,
  .clim-bento > .clim-bento-w3,
  .clim-bento > .clim-bento-w4 { grid-column: span 1; }
  .clim-bento > .clim-bento-w6 { grid-column: span 2; }
  .clim-bento > .clim-bento-h2 { grid-row: span 1; }
  .clim-bento--quatre { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .clim-bento,
  .clim-bento--quatre { grid-template-columns: 1fr; }
  .clim-bento > *,
  .clim-bento > .clim-bento-w2,
  .clim-bento > .clim-bento-w3,
  .clim-bento > .clim-bento-w4,
  .clim-bento > .clim-bento-w6 { grid-column: span 1; }
}

/* ==========================================================================
   13. Bandeau de confiance
   --------------------------------------------------------------------------
   4 badges en cellules bento juste sous le hero (voir
   template-parts/bandeau-confiance.php). Padding réduit par rapport aux
   autres sections : c'est une bande de réassurance, pas une section de
   contenu. Le sélecteur passe par .clim-page-sections > pour dépasser la
   spécificité (0,1,1) de la règle générique de section.
   ========================================================================== */

.clim-page-sections > .clim-bandeau-confiance { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.clim-badges { list-style: none; margin: 0; padding: 0; }
.clim-badges li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }

/* ==========================================================================
   14. Cartes et tarifs
   ========================================================================== */

/* Grilles de cartes "classiques", toujours utilisées par les tarifs et les avantages
   (voir template-parts/tarifs.php et avantages.php). Les prestations principales, elles,
   sont passées sur la grille bento du bloc 12 (voir services-teaser.php). */
.clim-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.clim-cards-compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.clim-card {
  background: var(--clim-card); border: 1px solid var(--clim-border); border-radius: var(--clim-radius-lg);
  padding: 1.5rem; display: block; color: var(--clim-ink);
  box-shadow: var(--clim-shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.clim-card:hover { box-shadow: var(--clim-shadow-md); transform: translateY(-2px); text-decoration: none; }
.clim-card h3 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; }
.clim-card p { color: var(--clim-muted); font-size: 0.95rem; }
.clim-card-link { color: var(--clim-accent); font-weight: 600; font-size: 0.9rem; }
.clim-card-static:hover { transform: none; box-shadow: var(--clim-shadow-sm); }
/* Carte principale d'une grille bento (ex. Installation sur l'accueil) : même surface, plus
   d'air et une icône plus présente pour créer la hiérarchie attendue en bento. */
.clim-card--large { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.clim-card--large h3 { font-size: 1.35rem; }
.clim-card-tarif { text-align: center; }
.clim-tarif-prix { font-size: 1.6rem; font-weight: bold; color: var(--clim-accent); }
.clim-tarif-prix span { font-size: 0.9rem; color: var(--clim-muted); font-weight: normal; }
.clim-card-tarif ul { list-style: none; padding: 0; text-align: left; margin: 1rem 0; }
.clim-card-tarif li { display: flex; gap: 0.4rem; align-items: flex-start; margin-bottom: 0.5rem; }

/* ==========================================================================
   15. Listes compactes
   ========================================================================== */

.clim-list-compact { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.clim-list-compact a { display: flex; align-items: center; gap: 0.5rem; color: var(--clim-ink); font-weight: 500; }
/* Variante en cellules bento (voir template-parts/services-secondaires.php) : le lien occupe
   toute la cellule pour offrir une cible de clic confortable. */
.clim-bento-lien { display: flex; align-items: center; gap: 0.6rem; color: var(--clim-ink); font-weight: 600; height: 100%; }
.clim-bento-lien:hover, .clim-bento-lien:focus-visible { color: var(--clim-accent); text-decoration: none; }
.clim-bento-lien .clim-icon { color: var(--clim-accent); flex-shrink: 0; }

/* ==========================================================================
   16. Note avis
   ========================================================================== */

.clim-note-avis { text-align: left; }
.clim-note-avis-stars { display: flex; gap: 0.15rem; margin-bottom: 0.4rem; }
.clim-note-avis-precision { font-size: 0.8rem; color: var(--clim-muted); }
.clim-note-avis-compact { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.85rem; color: var(--clim-muted); white-space: nowrap; }
.clim-note-avis-compact strong { color: var(--clim-ink); }
.clim-note-avis-compact .clim-icon { width: 1em; height: 1em; }

/* ==========================================================================
   17. Zone climatique
   ========================================================================== */

.clim-zone-climatique-texte { margin-top: 0; }
.clim-zone-climatique-precision { font-size: 0.8rem; color: var(--clim-muted); margin-top: 0.75rem; }

/* ==========================================================================
   18. Formulaire de devis
   --------------------------------------------------------------------------
   2 colonnes (panneau de réassurance + formulaire), une seule colonne
   (panneau au-dessus) sous 900px.
   ========================================================================== */

.clim-devis { background: var(--clim-card); border-radius: var(--clim-radius-lg); padding: 0; overflow: hidden; box-shadow: var(--clim-shadow-lg); }
.clim-devis-layout { display: grid; grid-template-columns: minmax(240px, 0.9fr) 1.4fr; }
.clim-devis-panel {
  background: linear-gradient(160deg, var(--clim-accent), var(--clim-accent-dark));
  color: #fff; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem;
}
.clim-devis-panel h3 { margin: 0; font-size: 1.05rem; }
.clim-devis-panel .clim-note-avis { color: #fff; }
.clim-devis-panel .clim-note-avis-precision { color: rgba(255, 255, 255, 0.85); }
.clim-devis-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.9rem; }
.clim-devis-panel-list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.clim-devis-form-wrap { padding: 2rem; }
.clim-devis-form-wrap h2 { margin-top: 0; }
/* Tous les champs étant obligatoires, on l'annonce une fois en tête plutôt que de répéter un
   astérisque sur chaque libellé. */
.clim-form-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--clim-muted); }
.clim-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
.clim-field-full { grid-column: 1 / -1; }
.clim-field label { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.clim-field input, .clim-field select, .clim-field textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid #cdd7dc; border-radius: var(--clim-radius-sm); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.clim-field input:focus, .clim-field select:focus, .clim-field textarea:focus {
  outline: none; border-color: var(--clim-accent); box-shadow: 0 0 0 3px rgba(11, 110, 106, 0.15);
}
/* :user-invalid et non :invalid : le champ ne devient rouge qu'après une saisie ou une
   tentative d'envoi, jamais sur un formulaire vierge où tout est encore à remplir. */
.clim-field input:user-invalid, .clim-field select:user-invalid, .clim-field textarea:user-invalid {
  border-color: #c0392b;
}
.clim-field input:user-invalid:focus, .clim-field select:user-invalid:focus, .clim-field textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.clim-field-checkbox label { display: flex; gap: 0.6rem; font-weight: normal; align-items: flex-start; font-size: 0.85rem; color: var(--clim-muted); }
.clim-field-checkbox input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem; accent-color: var(--clim-accent); }
.clim-field-honeypot { position: absolute; left: -9999px; top: -9999px; }
.clim-devis-feedback { padding: 0.75rem 1rem; border-radius: var(--clim-radius-sm); margin-bottom: 1rem; font-weight: 600; }
.clim-feedback-ok { background: #e3f5e1; color: #1f6a2a; }
.clim-feedback-erreur { background: #fbe4e1; color: #9a2f22; }

@media (max-width: 900px) {
  .clim-devis-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .clim-form-grid { grid-template-columns: 1fr; }
  .clim-devis-panel, .clim-devis-form-wrap { padding: 1.5rem; }
}

/* ==========================================================================
   19. Villes et plan du site
   ========================================================================== */

.clim-villes-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem 1.5rem; margin: 0 0 1.5rem; }
.clim-lien-plan { font-weight: 600; }

/* Plan du site : lien "Devis" compact à côté de chaque ville (voir page-plan-du-site.php). */
.clim-villes-grid-plan li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.clim-lien-devis-compact {
  font-size: 0.75rem; font-weight: 600; color: var(--clim-accent);
  border: 1px solid var(--clim-accent); border-radius: var(--clim-radius-pill); padding: 0.1rem 0.6rem;
  white-space: nowrap;
}
.clim-lien-devis-compact:hover, .clim-lien-devis-compact:focus-visible { background: var(--clim-accent); color: #fff; text-decoration: none; }

/* Lien réciproque vers la fiche devis (voir single-ville.php). */
.clim-lien-devis-ville { margin-top: 1.5rem; }

/* ==========================================================================
   20. Tableau de prix
   ========================================================================== */

.clim-table-scroll { overflow-x: auto; }
.clim-table-prix { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.clim-table-prix th, .clim-table-prix td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--clim-border); }
.clim-table-prix thead th { color: var(--clim-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--clim-border-strong); }
.clim-table-prix tbody th { font-weight: 600; }
.clim-table-prix tbody th a { color: var(--clim-ink); }
.clim-table-prix tbody tr:last-child th, .clim-table-prix tbody tr:last-child td { border-bottom: none; }
.clim-tarifs-marche-avertissement { font-size: 0.85rem; color: var(--clim-muted); margin-top: 1.25rem; }

/* ==========================================================================
   21. Marques
   ========================================================================== */

.clim-marques-list { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.clim-marques-list img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .75; }

/* ==========================================================================
   22. FAQ
   ========================================================================== */

.clim-faq-item { border-bottom: 1px solid var(--clim-border); padding: 1rem 0; }
.clim-faq-item summary { font-weight: 600; cursor: pointer; }
.clim-faq-item p { margin: 0.75rem 0 0; color: var(--clim-muted); }

/* ==========================================================================
   23. CTA final
   ========================================================================== */

.clim-cta-final {
  text-align: center;
  background: linear-gradient(135deg, var(--clim-accent), var(--clim-accent-dark));
  color: #fff; border-radius: var(--clim-radius-xl);
}
/* Padding plus généreux que les autres sections : passe par .clim-page-sections > pour
   dépasser la spécificité de la règle générique, au lieu de l'ancien !important. */
.clim-page-sections > .clim-cta-final { padding: 3.5rem 2rem; }
.clim-cta-final-icon { color: #fff; opacity: 0.9; margin-bottom: 1rem; }
.clim-cta-final h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 0.6rem; }
.clim-cta-final p { color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; margin: 0 0 0.5rem; }
.clim-cta-final .clim-hero-cta { justify-content: center; }
.clim-cta-final .clim-btn-primary { background: #fff; color: var(--clim-accent); }
.clim-cta-final .clim-btn-primary:hover { background: #e6f2f1; }
.clim-cta-final .clim-btn-ghost { border-color: #fff; color: #fff; }
.clim-cta-final .clim-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.clim-cta-final-reassurance {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.9rem;
}
.clim-cta-final-reassurance li { display: flex; align-items: center; gap: 0.4rem; opacity: 0.95; }

/* ==========================================================================
   24. Signature auteur
   --------------------------------------------------------------------------
   Toujours utilisée à l'intérieur d'une <section> déjà cadrée par
   .clim-page-sections > section (voir single-prestation.php / single-ville.php) :
   pas de cadrage propre ici, elle suit la largeur du contenu qui l'entoure.
   ========================================================================== */

.clim-auteur-signature {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  color: var(--clim-muted); font-size: 0.9rem;
  padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--clim-border);
}
.clim-auteur-signature a { font-weight: 600; }

/* ==========================================================================
   25. Checklists
   ========================================================================== */

.clim-checklist { list-style: none; padding: 0; }
.clim-checklist-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; }
.clim-checklist li { display: flex; gap: 0.5rem; align-items: flex-start; }
@media (max-width: 640px) { .clim-checklist-2col { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. Contact et infos entreprise
   ========================================================================== */

.clim-contact-infos ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.05rem; }
.clim-infos-entreprise { list-style: none; padding: 0; margin-top: 1.5rem; color: var(--clim-muted); }

/* ==========================================================================
   27. Aides et primes
   ========================================================================== */

/* Avertissement "non contractuel" (voir inc/content-pools.php). */
.clim-aides-avertissement {
  font-size: 0.85rem;
  color: var(--clim-muted);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--clim-border);
}

/* ==========================================================================
   28. Footer et départements voisins
   ========================================================================== */

.clim-footer-grid { width: var(--clim-largeur); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 1rem 1.5rem 0; }
.clim-footer-grid h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.clim-footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
/* Corrige un défaut de contraste WCAG : var(--clim-muted) (#4a5d6a) sur le fond sombre du
   footer (--clim-ink) ne fait qu'environ 2.4:1, bien sous le seuil AA de 4.5:1, ce qui
   rendait ces liens presque invisibles. --clim-footer-text (#cfe0df) donne un contraste
   d'environ 12:1 sur ce même fond. */
.clim-footer-grid a { color: var(--clim-footer-text); }
.clim-footer-grid a:hover, .clim-footer-grid a:focus-visible { color: #fff; text-decoration: underline; }
.clim-footer-bas { width: var(--clim-largeur); margin: 2rem auto 0; padding: 1.5rem 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; }
/* .clim-note-avis-precision est aussi utilisée dans une colonne du footer (fond sombre) :
   même correctif de contraste que .clim-footer-grid a ci-dessus. */
.clim-footer-grid .clim-note-avis-precision { color: var(--clim-footer-text); opacity: 0.85; }

/* Maillage inter-sites vers les départements voisins (footer + plan du site). */
.clim-departements-voisins h3 { font-size: 0.95rem; margin-bottom: 0.6rem; }
.clim-departements-voisins ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.clim-footer-departements-voisins {
  width: var(--clim-largeur);
  margin: 1.5rem auto 0;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.clim-footer-departements-voisins a { color: var(--clim-footer-text); font-size: 0.85rem; }
.clim-footer-departements-voisins a:hover, .clim-footer-departements-voisins a:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .clim-footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   29. Divers
   ========================================================================== */

.clim-img-placeholder { background: var(--clim-border); }