/* ===========================================================
   ClimPACTE — Mode sombre (nuances de gris) + bouton lune/soleil
   -----------------------------------------------------------
   Ce fichier est commun à toutes les pages du site.
   Le mode clair reste le mode par défaut : le mode sombre
   ne s'active que si l'attribut data-theme="sombre" est posé
   sur la balise <html> (c'est mode-sombre.js qui s'en charge).
   =========================================================== */

/* ---------- 1. Le bouton lune / soleil (visible dans les 2 modes) ---------- */

.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #1e5a32;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0.7;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s;
}
.theme-toggle:hover { opacity: 1; transform: translateY(-2px); color: #e8640a; }
.theme-toggle:focus-visible { outline: 2px solid #e8640a; outline-offset: 2px; opacity: 1; }
.theme-toggle svg { width: 21px; height: 21px; display: block; }

/* La page d'accueil possède une barre d'infos tout en haut :
   on lui réserve la place du bouton pour éviter le chevauchement. */
.topbar { padding-right: 68px; }

/* ---------- 2. Palette du mode sombre ---------- */

html[data-theme="sombre"] {
  color-scheme: dark;

  --fond:       #22252a;   /* fond de page       */
  --surface:    #2b2f35;   /* blocs principaux   */
  --surface-2:  #33383f;   /* encadrés, cartes   */
  --bordure:    #434950;
  --txt:        #d3d8de;
  --txt-doux:   #a3aab3;
  --titre:      #e9edf2;

  /* Variables déjà utilisées par les pages, réaffectées */
  --bleu:            #e9edf2;
  --bleu-clair:      #74b3f0;
  --orange:          #ff8a3d;
  --gris-clair:      #22252a;
  --gris-texte:      #d3d8de;
  --blanc:           #2b2f35;
  --vert-fonce:      #8ad6a5;
  --vert:            #7fd0a0;
  --vert-clair:      #4fae6a;
  --vert-pale:       #2b2f35;
  --vert-tres-pale:  #2b2f35;
}

/* ---------- 3. Structure générale ---------- */

html[data-theme="sombre"] body {
  background: var(--fond);
  color: var(--txt);
}
html[data-theme="sombre"] header { background: var(--surface); box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
html[data-theme="sombre"] main   { background: var(--surface); box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
html[data-theme="sombre"] footer { background: var(--surface-2); color: var(--titre); }
html[data-theme="sombre"] footer strong { color: var(--titre); }
html[data-theme="sombre"] .topbar { background: var(--surface-2); }

html[data-theme="sombre"] h1,
html[data-theme="sombre"] h2,
html[data-theme="sombre"] h3,
html[data-theme="sombre"] h4 { color: var(--titre); }

html[data-theme="sombre"] p.intro,
html[data-theme="sombre"] .page-head p,
html[data-theme="sombre"] .source-note,
html[data-theme="sombre"] .updated { color: var(--txt-doux); }

/* Traits de séparation (les pages utilisent --gris-clair comme bordure) */
html[data-theme="sombre"] h2 { border-bottom-color: var(--bordure); }
html[data-theme="sombre"] th,
html[data-theme="sombre"] td { border-bottom-color: var(--bordure); }

/* ---------- 4. Page d'accueil ---------- */

html[data-theme="sombre"] .hero {
  background: linear-gradient(135deg, #14321f 0%, #1d4a2c 100%);
}
html[data-theme="sombre"] #qui,
html[data-theme="sombre"] #contact { background: var(--fond); }
html[data-theme="sombre"] #clim { background: var(--surface); }
html[data-theme="sombre"] #engagements { background: var(--surface-2); }

html[data-theme="sombre"] .service-card {
  background: var(--surface-2);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
html[data-theme="sombre"] .service-card ul li,
html[data-theme="sombre"] .contact-ligne span { color: var(--txt-doux); }

html[data-theme="sombre"] .rappel {
  background: #2b2f35;
  border-color: var(--bordure);
  color: var(--txt);
}
html[data-theme="sombre"] .qui-img { background: var(--surface-2); border-color: var(--bordure); }
html[data-theme="sombre"] .note-contact { color: var(--txt-doux); }

/* Boutons pleins : on garde l'orange du logo, lisible avec du texte blanc */
html[data-theme="sombre"] .btn,
html[data-theme="sombre"] .btn-submit,
html[data-theme="sombre"] .cta a,
html[data-theme="sombre"] .devis-strip,
html[data-theme="sombre"] .faq-num { background: #e8640a; }
html[data-theme="sombre"] .btn-outline { background: transparent; }

html[data-theme="sombre"] .form-group input,
html[data-theme="sombre"] .form-group select,
html[data-theme="sombre"] .form-group textarea {
  background: var(--surface-2);
  color: var(--txt);
  border-color: var(--bordure);
}
html[data-theme="sombre"] .form-group input::placeholder,
html[data-theme="sombre"] .form-group textarea::placeholder { color: #8b929b; }

html[data-theme="sombre"] .specimen {
  color: rgba(222, 230, 240, 0.30);
  border-color: rgba(222, 230, 240, 0.12);
}

/* ---------- 5. Blog, articles et pages légales ---------- */

html[data-theme="sombre"] .theme-card {
  background: var(--surface-2);
  border-color: var(--bordure);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
html[data-theme="sombre"] .theme-card.soon { background: #292d33; color: var(--txt-doux); }
html[data-theme="sombre"] .theme-card.soon h3 { color: var(--txt-doux); }

html[data-theme="sombre"] .fiche,
html[data-theme="sombre"] .encadre,
html[data-theme="sombre"] .cta { background: var(--surface-2); }

html[data-theme="sombre"] .faq-item { border-bottom-color: var(--bordure); }
html[data-theme="sombre"] .faq-a { color: var(--txt); }

html[data-theme="sombre"] table { background: transparent; }
html[data-theme="sombre"] table th { background: #3b424a; color: var(--titre); }
html[data-theme="sombre"] .comparatif th { background: #1f5c37; color: #eaf6ee; }
html[data-theme="sombre"] .tarifs tbody tr { background: var(--surface-2); }

html[data-theme="sombre"] .article strong,
html[data-theme="sombre"] .legal strong { color: var(--vert-fonce); }

/* ---------- 6. Boutons flottants ---------- */

html[data-theme="sombre"] .back-to-top,
html[data-theme="sombre"] .home-fab {
  background: rgba(255, 255, 255, 0.14);
  color: #dfe5ec;
}
html[data-theme="sombre"] .back-to-top:hover,
html[data-theme="sombre"] .home-fab:hover { color: #ff8a3d; }

html[data-theme="sombre"] .theme-toggle {
  background: rgba(255, 255, 255, 0.14);
  color: #ffd166;
}
html[data-theme="sombre"] .theme-toggle:hover { color: #ffe09a; }

/* ===========================================================
   7. Réglages communs à toutes les pages
   (ce fichier étant chargé partout, il sert aussi à ça)
   =========================================================== */

/* Liens du pied de page lisibles en mode sombre (page d'accueil comprise) */
html[data-theme="sombre"] footer a { color: #74b3f0; }
html[data-theme="sombre"] footer a:hover { color: #ff8a3d; }

/* Flèche « retour en haut » : n'apparaît qu'après avoir fait défiler la page */
.back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
html.a-defile .back-to-top { opacity: 0.7; visibility: visible; pointer-events: auto; }
html.a-defile .back-to-top:hover { opacity: 1; }

/* Smartphone : pied de page aéré, liens plus faciles à toucher du doigt,
   et marge en bas pour que les boutons flottants ne cachent rien */
@media (max-width: 768px) {
  footer { padding-bottom: 90px; line-height: 1.9; }
  footer p a { display: inline-block; padding: 3px 2px; }
}

/* Icônes téléphone en mode sombre : sur ordinateur (Windows notamment),
   l'émoji 📞 est un combiné foncé, peu visible sur fond gris foncé.
   On lui ajoute une pastille claire derrière. */
html[data-theme="sombre"] .ico-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;          /* rond 1,2 fois plus grand qu'avant */
  height: 1.5em;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  line-height: 1;
  vertical-align: middle;
}
/* Bouton d'appel vert : liseré clair pour qu'il ressorte sur les fonds sombres */
html[data-theme="sombre"] .call-fab {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 16px rgba(0, 0, 0, 0.5);
}