/* ═══════════════════════════════════════════════
   THEME CLAIR - se charge APRES le <style> de chaque page
   et remplace les fonds sombres par des fonds clairs.
   Couleurs reprises du logo : blanc, rouge bordeaux, gris anthracite.
   Pour revenir au theme sombre : retirer le <link> vers ce fichier.
   ═══════════════════════════════════════════════ */

:root {
  --fond:       #FFFFFF;
  --fond-2:     #F7F3EF;   /* blanc chaud, alterne avec --fond */
  --encre:      #2B2422;   /* gris anthracite du slogan du logo */
  --encre-2:    rgba(43,36,34,.66);
  --encre-3:    rgba(43,36,34,.45);
  --trait:      rgba(43,36,34,.10);
  --blanc-casse:#F7F3EF;
}

body { background:var(--fond); color:var(--encre); }
::-webkit-scrollbar-track { background:var(--fond-2); }

/* ── NAV ── */
nav {
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(139,0,0,.12);
}
nav.scrolled {
  background:rgba(255,255,255,.98);
  border-bottom-color:rgba(139,0,0,.18);
  box-shadow:0 6px 24px rgba(43,36,34,.06);
}
.nav-links a { color:var(--encre-2); }
.nav-links a:hover, .nav-links a.active { color:var(--encre); }
.nav-toggle span { background:var(--encre); }
.mobile-menu { background:rgba(255,255,255,.98); border-bottom-color:rgba(139,0,0,.15); }
.mobile-menu a { color:var(--encre-2); border-bottom-color:var(--trait); }
.nav-logo-img, .footer-logo-img { filter:none; }

/* ── PAGE HERO (pages internes) : photo eclaircie, voile blanc a gauche ── */
.page-hero-bg { filter:brightness(1) saturate(.85); }
.page-hero-overlay {
  background:linear-gradient(to right,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.35) 75%, rgba(139,0,0,.12) 100%);
}
.page-title { color:var(--encre); }
.breadcrumb, .breadcrumb a { color:var(--encre-3); }
.breadcrumb a:hover { color:var(--encre); }

/* ── TEXTE & BOUTONS ── */
.lead { color:var(--encre-2); }
.btn-outline { border-color:rgba(43,36,34,.25); color:var(--encre); }
.btn-outline:hover { border-color:var(--rouge-vif); color:var(--rouge-vif); }

/* ── FOOTER ── */
footer { background:var(--fond-2); border-top:1px solid rgba(139,0,0,.14); }
.footer-name { color:var(--encre); }
.footer-slogan, .footer-desc, .footer-col .info-text { color:var(--encre-2); }
.footer-col ul li a { color:var(--encre-2); }
.footer-col ul li a:hover { color:var(--rouge-vif); }
.footer-bottom { border-top-color:var(--trait); }
.footer-copy { color:var(--encre-3); }
.footer-tag { border-color:var(--trait); color:var(--encre-3); }

/* ══ ACCUEIL ══ */
.hero-bg {
  background:
    radial-gradient(ellipse 55% 65% at 72% 50%, rgba(192,0,26,.07) 0%, transparent 60%),
    linear-gradient(155deg,#FFFFFF 0%,#FBF5F2 55%,#FFFFFF 100%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(139,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,0,0,.05) 1px,transparent 1px);
}
.hero-title { color:var(--encre); }
.hero-badge { color:var(--encre-2); border-color:rgba(139,0,0,.25); background:rgba(255,255,255,.7); }
.hero-pill { border-color:rgba(43,36,34,.16); color:var(--encre-2); background:rgba(255,255,255,.7); }
.hero-desc { color:var(--encre-2); }
.hero-desc em { color:var(--encre); }
.stats-bar { background:rgba(255,255,255,.82); border-top-color:rgba(139,0,0,.14); }
.stat-item { border-right-color:rgba(139,0,0,.10); }
.stat-lbl { color:var(--encre-3); }

#services-preview { background:var(--fond); }
.svc-card { background:var(--fond); }
.svc-card:hover { background:#FDF6F5; }
.svc-title { color:var(--encre); }
.svc-text { color:var(--encre-2); }

/* ══ A PROPOS ══ */
#valeurs { background:var(--fond); }
.val-card { background:var(--fond); }
.val-card:hover { background:#FDF6F5; }
.val-title { color:var(--encre); }
.val-text { color:var(--encre-2); }
#equipe { background:var(--fond-2); }
.membre-card { background:var(--fond); }
.membre-avatar { background:linear-gradient(135deg,var(--rouge-dark),var(--rouge-vif)); }

/* ══ CONTACT ══ */
#contact-main { background:var(--fond); }
.cinfo-title, .cform h3, .form-success h4 { color:var(--encre); }
.cinfo-sub, .wa-block p, .form-success p { color:var(--encre-2); }
.cinfo-item { border-bottom-color:var(--trait); }
.cinfo-lbl { color:var(--encre-3); }
.cinfo-val, .cinfo-val a { color:var(--encre); }
.cform { background:var(--fond-2); border-color:var(--trait); }
.cform-sub, .fg label { color:var(--encre-3); }
.fg input, .fg textarea, .fg select {
  background:var(--fond); border-color:rgba(43,36,34,.16); color:var(--encre);
}
.fg input:focus, .fg textarea:focus, .fg select:focus { background:var(--fond); border-color:var(--rouge-vif); }
.fg select option { background:var(--fond); color:var(--encre); }
#map-section { background:var(--fond); }
.map-embed, .map-embed:hover { filter:grayscale(.35) contrast(.95); }
.map-note { color:var(--encre-3); }

/* ══ REFERENCES ══ */
#temoignages { background:var(--fond); }
.temo-card { background:var(--fond-2); border-color:var(--trait); }
.temo-card:hover { background:#FDF6F5; border-color:rgba(139,0,0,.18); }
.temo-text { color:var(--encre-2); }
.temo-name { color:var(--encre); }
.temo-role { color:var(--encre-3); }

/* ══ SERVICES ══ */
.service-section.dark  { background:var(--fond); }
.service-section.white { background:var(--fond-2); }
.dark .feature-item { border-bottom-color:var(--trait); }
.dark .feat-text { color:var(--encre-2); }

/* ══ PAIEMENT ══ */
body:has(.paiement-carte) { background:var(--fond-2); }
.paiement-carte { box-shadow:0 18px 50px rgba(43,36,34,.08); }

/* ── PETITS ECRANS : bandeaux a texte integre ──
   Les images hero-apropos/contact/marches/references/services contiennent
   leur propre texte, qui passe sous le titre de la page sur telephone et
   tablette. On garde alors un bandeau ivoire uni. */
@media (max-width:900px) {
  .page-hero-bg[style*="hero-apropos"], .page-hero-bg[style*="hero-contact"],
  .page-hero-bg[style*="hero-marches"], .page-hero-bg[style*="hero-references"],
  .page-hero-bg[style*="hero-services"] { display:none; }
  .page-hero:has(.page-hero-bg[style*="hero-apropos"], .page-hero-bg[style*="hero-contact"], .page-hero-bg[style*="hero-marches"], .page-hero-bg[style*="hero-references"], .page-hero-bg[style*="hero-services"]) .page-hero-overlay {
    background:var(--fond-2);
  }
}