/* ============================================================
   Accueil - thème clair (crème). Chargé UNIQUEMENT par pages/shop/accueil.html,
   après accueil.css. Le hero (photo + voile sombre) et la navbar restent sombres.
   Même DA : Bebas Neue, or #C9A96E (fonds/boutons), or foncé #8A6A30 pour le texte
   (l'or clair sur crème n'est pas lisible : contraste ~2:1).
   Retour au thème sombre : retirer le <link> de ce fichier.
   ============================================================ */

body.page-accueil {
  --l-bg:     #F7F5F0;
  --l-alt:    #EFEBE3;
  --l-card:   #FFFFFF;
  --l-ink:    #111111;
  --l-muted:  rgba(17,17,17,0.76);
  --l-faint:  rgba(17,17,17,0.60);
  --l-line:   rgba(17,17,17,0.09);
  --l-gold:   #8A6A30;
  background: var(--l-bg);
  color: var(--l-ink);
}

/* ── Fonds de sections (alternance crème / crème foncé) ───── */
.page-accueil .ec-services,
.page-accueil .ec-process,
.page-accueil .ec-atelier,
.page-accueil .ec-avis          { background: var(--l-bg); }
.page-accueil .ec-stats,
.page-accueil .ec-social,
.page-accueil .ec-adresse       { background: var(--l-alt); }
.page-accueil .ec-social-right  { background: var(--l-alt); }

.page-accueil .ec-services-hd,
.page-accueil .ec-row,
.page-accueil .ec-stats,
.page-accueil .ec-stat,
.page-accueil .ec-process,
.page-accueil .ec-social,
.page-accueil .ec-social-left,
.page-accueil .ec-atelier,
.page-accueil .ec-atelier-head,
.page-accueil .ec-atelier-metrics,
.page-accueil .ec-atel-m,
.page-accueil .ec-adresse,
.page-accueil .ec-adresse-info,
.page-accueil .ec-avis,
.page-accueil .ec-avis-hd,
.page-accueil .ec-avis-grid,
.page-accueil .ec-avis-card,
.page-accueil .ec-row-foot,
.page-accueil .ec-process-cta   { border-color: var(--l-line); }
.page-accueil .ec-stat-div,
.page-accueil .ec-metric-sep,
.page-accueil .ec-badge-sep     { background: var(--l-line); }

/* ── Titres & textes communs ──────────────────────────────── */
.page-accueil .ec-eyebrow       { color: var(--l-gold); }
.page-accueil .ec-services .ec-title,
.page-accueil .ec-process .ec-title,
.page-accueil .ec-social .ec-title,
.page-accueil .ec-adresse .ec-title,
.page-accueil .ec-avis .ec-title,
.page-accueil .ec-atelier-title { color: var(--l-ink); }
.page-accueil .ec-services .ec-title em,
.page-accueil .ec-process .ec-title em,
.page-accueil .ec-social .ec-title em,
.page-accueil .ec-adresse .ec-title em,
.page-accueil .ec-avis .ec-title em,
.page-accueil .ec-atelier-title em { color: var(--l-gold); }

/* Bouton secondaire hors hero : contour sombre */
.page-accueil section:not(.ec-hero-solo) .ec-btn-ghost {
  color: var(--l-ink);
  border-color: rgba(17,17,17,0.25);
}
.page-accueil section:not(.ec-hero-solo) .ec-btn-ghost:hover {
  border-color: var(--l-ink);
  background: rgba(17,17,17,0.04);
}

/* ── Prestations ──────────────────────────────────────────── */
.page-accueil .ec-services-desc { color: var(--l-muted); }
.page-accueil .ec-row-content   { background: var(--l-card); }
.page-accueil .ec-row:hover .ec-row-content { background: #FBFAF7; }
.page-accueil .ec-row-ghost     { color: rgba(17,17,17,0.04); }
.page-accueil .ec-row-tag       { color: var(--l-gold); }
.page-accueil .ec-row-name      { color: var(--l-ink); }
.page-accueil .ec-row-desc      { color: var(--l-muted); }
.page-accueil .ec-row-list li   { color: var(--l-muted); }
.page-accueil .ec-row-list li::before { background: rgba(138,106,48,0.5); }
.page-accueil .ec-row-price     { color: var(--l-faint); }
.page-accueil .ec-row-price strong { color: var(--l-gold); }
.page-accueil .ec-row-cta       { color: var(--l-faint); }
.page-accueil .ec-row:hover .ec-row-cta { color: var(--l-ink); }

/* ── Chiffres ─────────────────────────────────────────────── */
.page-accueil .ec-stat:hover    { background: rgba(17,17,17,0.03); }
.page-accueil .ec-stat-num      { color: var(--l-ink); }
.page-accueil .ec-stat-sup      { color: var(--l-gold); }
.page-accueil .ec-stat-lbl      { color: var(--l-faint); }

/* ── Process ──────────────────────────────────────────────── */
.page-accueil .ec-process-sub   { color: var(--l-muted); }
.page-accueil .ec-process-video { box-shadow: 0 24px 48px rgba(17,17,17,0.18); }
.page-accueil .ec-step-num      { color: var(--l-gold); }
.page-accueil .ec-step-dot      { border-color: rgba(138,106,48,0.5); }
.page-accueil .ec-step-line     { background: linear-gradient(to bottom, rgba(138,106,48,0.35), rgba(138,106,48,0.05)); }
.page-accueil .ec-step-title    { color: var(--l-ink); }
.page-accueil .ec-step-desc     { color: var(--l-muted); }
.page-accueil .ec-step-tag      { color: var(--l-faint); border-color: rgba(17,17,17,0.14); }

/* ── Réseaux sociaux ──────────────────────────────────────── */
.page-accueil .ec-metric-icon   { color: rgba(17,17,17,0.35); }
.page-accueil .ec-metric-num    { color: var(--l-ink); }
.page-accueil .ec-metric-lbl    { color: var(--l-faint); }
.page-accueil .ec-social-quote  { color: var(--l-muted); }
.page-accueil .ec-social-btn    { color: var(--l-muted); border-color: rgba(17,17,17,0.18); }
.page-accueil .ec-social-btn:hover { color: var(--l-ink); border-color: var(--l-ink); }

/* ── L'atelier ────────────────────────────────────────────── */
.page-accueil .ec-atelier-desc  { color: var(--l-muted); }
.page-accueil .ec-atel-m:hover  { background: rgba(17,17,17,0.03); }
.page-accueil .ec-atel-num      { color: var(--l-ink); }
.page-accueil .ec-atel-plus     { color: var(--l-gold); }
.page-accueil .ec-atel-lbl      { color: var(--l-faint); }

/* ── Adresse & horaires ───────────────────────────────────── */
.page-accueil .ec-addr-icon     { background: rgba(138,106,48,0.08); border-color: rgba(138,106,48,0.22); color: var(--l-gold); }
.page-accueil .ec-addr-label    { color: var(--l-gold); }
.page-accueil .ec-addr-val      { color: var(--l-ink); }
.page-accueil .ec-addr-link:hover { color: var(--l-gold); }
.page-accueil .ec-hor-day       { color: var(--l-faint); }
.page-accueil .ec-hor-val       { color: var(--l-ink); }
.page-accueil .ec-hor-closed    { color: rgba(17,17,17,0.35); }
.page-accueil .ec-transp-txt    { color: var(--l-muted); }

/* ── Avis ─────────────────────────────────────────────────── */
.page-accueil .ec-google-badge  { border-color: var(--l-line); background: var(--l-card); }
.page-accueil .ec-badge-num     { color: var(--l-ink); }
.page-accueil .ec-badge-lbl     { color: var(--l-faint); }
.page-accueil .ec-avis-card     { background: var(--l-card); }
.page-accueil .ec-avis-card:hover { background: #FBFAF7; }
.page-accueil .ec-avis-name     { color: var(--l-ink); }
.page-accueil .ec-avis-meta     { color: var(--l-faint); }
.page-accueil .ec-av-gold       { background: rgba(138,106,48,0.14); color: var(--l-gold); }
.page-accueil .ec-avis-txt      { color: var(--l-muted); }
.page-accueil .ec-avis-footer-txt { color: var(--l-faint); }

/* Le CTA final (fond or) et le hero gardent leurs couleurs d'origine. */

/* ── Navbar ─────────────────────────────────────────────────
   Transparente et fondue dans le hero en haut de page ; noire dès que le hero
   est dépassé (.scrolled, posée par accueil.js via IntersectionObserver). */
body.page-accueil .acc-navbar:not(.scrolled) .acc-nav-inner {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Glassmorphism : verre fumé translucide + flou, texte blanc lisible sur le crème */
body.page-accueil .acc-navbar.scrolled .acc-nav-inner {
  background: rgba(20,20,22,0.55) !important;
  border-color: rgba(255,255,255,0.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 8px 32px rgba(17,17,17,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* Navigateurs sans backdrop-filter : un peu plus opaque pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.page-accueil .acc-navbar.scrolled .acc-nav-inner { background: rgba(20,20,22,0.88) !important; }
}

/* ── Grain léger sur les fonds crème (bruit SVG en tuile, ~1 Ko, aucun fichier) ── */
body.page-accueil {
  --l-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
body.page-accueil,
.page-accueil .ec-services,
.page-accueil .ec-process,
.page-accueil .ec-atelier,
.page-accueil .ec-avis,
.page-accueil .ec-stats,
.page-accueil .ec-social,
.page-accueil .ec-adresse,
.page-accueil .ec-social-right { background-image: var(--l-grain); background-size: 160px 160px; }