/* =========================================================================
   Isabelle Beaugrand — Moteur de thèmes (4 variantes par section)
   Tokens sémantiques surchargés par .theme-white / -cream / -dark / -image.
   Les sections consomment --bg/--surface/--text/--border/--accent/--primary…
   et s'adaptent automatiquement. Chargé APRÈS system.css.
   ========================================================================= */

:root {
  /* défauts = thème Crème (rend identique hors contexte .theme) */
  --bg:#FDF9F2;  --surface:#FEFDFB;  --surface-2:#F6F1EA;
  --text:#3E3A36;  --text-muted:rgba(62,58,54,.70);  --heading:#3E3A36;
  --border:rgba(129,139,105,.35);  --border-soft:rgba(129,139,105,.18);
  --accent:#818B69;  --accent-2:#646B51;
  --primary-bg:#818B69;  --primary-fg:#FDF9F2;  --primary-bg-h:#646B51;
  --secondary-bg:transparent;  --secondary-fg:#646B51;
  --secondary-bd:rgba(129,139,105,.5);  --secondary-bg-h:rgba(129,139,105,.10);
}

/* ----------------------------------------------------- définitions thèmes */
.theme-white {
  --bg:#FEFDFB; --surface:#FDF9F2; --surface-2:#F6F1EA;
  --text:#3E3A36; --text-muted:rgba(62,58,54,.70); --heading:#3E3A36;
  --border:rgba(129,139,105,.32); --border-soft:rgba(129,139,105,.16);
  --accent:#818B69; --accent-2:#646B51;
  --primary-bg:#818B69; --primary-fg:#FDF9F2; --primary-bg-h:#646B51;
  --secondary-bg:transparent; --secondary-fg:#646B51;
  --secondary-bd:rgba(129,139,105,.5); --secondary-bg-h:rgba(129,139,105,.10);
}
.theme-cream {
  --bg:#FDF9F2; --surface:#F6F1EA; --surface-2:#FEFDFB;
  --text:#3E3A36; --text-muted:rgba(62,58,54,.70); --heading:#3E3A36;
  --border:rgba(129,139,105,.35); --border-soft:rgba(129,139,105,.18);
  --accent:#818B69; --accent-2:#646B51;
  --primary-bg:#818B69; --primary-fg:#FDF9F2; --primary-bg-h:#646B51;
  --secondary-bg:transparent; --secondary-fg:#646B51;
  --secondary-bd:rgba(129,139,105,.5); --secondary-bg-h:rgba(129,139,105,.10);
}
.theme-dark {
  --bg:#646B51; --surface:rgba(253,249,242,.08); --surface-2:rgba(253,249,242,.14);
  --text:#FDF9F2; --text-muted:rgba(253,249,242,.78); --heading:#FDF9F2;
  --border:rgba(253,249,242,.24); --border-soft:rgba(253,249,242,.14);
  --accent:#D9D3C3; --accent-2:#FDF9F2;
  --primary-bg:#FDF9F2; --primary-fg:#646B51; --primary-bg-h:#FFFFFF;
  --secondary-bg:transparent; --secondary-fg:#FDF9F2;
  --secondary-bd:rgba(253,249,242,.42); --secondary-bg-h:rgba(253,249,242,.12);
}
.theme-image {
  --bg:#3E3A36; --surface:rgba(253,249,242,.10); --surface-2:rgba(253,249,242,.16);
  --text:#FDF9F2; --text-muted:rgba(253,249,242,.86); --heading:#FDF9F2;
  --border:rgba(255,255,255,.34); --border-soft:rgba(255,255,255,.20);
  --accent:#E9E1CF; --accent-2:#FDF9F2;
  --primary-bg:#FDF9F2; --primary-fg:#3E3A36; --primary-bg-h:#FFFFFF;
  --secondary-bg:rgba(255,255,255,.14); --secondary-fg:#FDF9F2;
  --secondary-bd:rgba(255,255,255,.5); --secondary-bg-h:rgba(255,255,255,.26);
}

/* ------------------------------------------------------------ bande .theme */
.theme { position:relative; background:var(--bg); color:var(--text); overflow:hidden; }
.theme > .theme-bg { display:none; position:absolute; inset:0; z-index:0; }
.theme > .theme-bg img { width:100%; height:100%; object-fit:cover; }
.theme-image > .theme-bg { display:block; }
.theme-image > .theme-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,20,20,.62), rgba(62,58,54,.72));
}
/* lift le contenu au-dessus du fond — SANS toucher aux décorations absolues
   (.rings/.leaf), sinon elles repassent dans le flux et gonflent la section */
.theme > :not(.theme-bg):not(.rings):not(.leaf) { position:relative; z-index:1; }

/* cercles décoratifs nettement plus discrets sur fonds sombres */
.theme-dark :is(.rings, .card__circles),
.theme-image :is(.rings, .card__circles) { opacity:.3 !important; }

/* surcharges des primitives DANS un contexte themé (sinon, valeurs literales V1) */
.theme .eyebrow,
.theme .tag,
.theme .accent,
.theme .arrow-link { color:var(--accent); }
.theme .tag--box { border-color:var(--border); }
.theme .muted,
.theme .text-muted { color:var(--text-muted); }
.theme .h2, .theme .h2-lg, .theme .h3, .theme .display,
.theme h1, .theme h2, .theme h3 { color:var(--heading); }
.theme .pullquote { color:var(--text); border-color:var(--border); }
.theme .rule, .theme hr.rule { background:var(--border); }
.theme .arrow-link img { /* flèche olive → recolorée en clair sur fonds sombres */ }
.theme-dark .arrow-link img,
.theme-image .arrow-link img {
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(420%) hue-rotate(10deg);
}
/* icône carte filaire (stroke olive) → claire sur fonds sombres */
.theme-dark .ink-icon, .theme-image .ink-icon { filter: brightness(0) invert(1); opacity:.92; }

/* surfaces utilitaires pilotées par tokens */
.surface { background:var(--surface); border:1px solid var(--border-soft); }
.surface-2 { background:var(--surface-2); }

/* ------------------------------------------------------- boutons thémés */
.btn--primary { background:var(--primary-bg); color:var(--primary-fg); border-color:transparent; }
.btn--primary:hover { background:var(--primary-bg-h); box-shadow:0 12px 28px -16px rgba(0,0,0,.4); }
.btn--secondary { background:var(--secondary-bg); color:var(--secondary-fg); border:1px solid var(--secondary-bd); }
.btn--secondary:hover { background:var(--secondary-bg-h); }
.theme-image .btn--secondary { -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* champ de formulaire thémé — toujours blanc en thèmes clairs */
.theme .field { border-color:var(--border); color:var(--text); }
.theme .field::placeholder { color:var(--text-muted); }
.theme-white .field, .theme-cream .field { background:#fff; color:var(--ink); }
.theme-dark .field, .theme-image .field { background:rgba(253,249,242,.14); }

/* cartes sur fond image : effet verre dépoli */
.theme-image :is(.card,.tile,.plan,.offer,.testi,.quote,.rating,.news__panel,.next-card,.surface) {
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}

/* ======================================================= SÉLECTEUR THÈME */
/* bandeau global de page */
.theme-toolbar {
  position:sticky; top:0; z-index:55;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px var(--gutter);
  background:rgba(253,249,242,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-green-soft);
}
.theme-toolbar__label { font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--green); }
.theme-toolbar__btns { display:inline-flex; gap:8px; flex-wrap:wrap; }
.tbtn {
  font-family:inherit; font-size:13px; color:var(--ink-70);
  background:none; border:1px solid var(--line-green-soft); padding:7px 14px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.tbtn:hover { border-color:var(--green); color:var(--green-deep); }
.tbtn.is-active { background:var(--green-deep); border-color:var(--green-deep); color:var(--cream); }

/* sélecteur par section (dans la barre de variante) */
.variant__bar { align-items:center; }
.variant__name { flex:1; min-width:0; }
.theme-switch { display:inline-flex; gap:6px; flex:none; }
.ts { width:22px; height:22px; padding:0; border:1px solid var(--line-green-soft); background:none; cursor:pointer; position:relative; transition:outline .15s; }
.ts > span { position:absolute; inset:2px; display:block; }
.ts__img-sw { background:linear-gradient(135deg,#8b8676,#3e3a36); }
.ts.is-active { outline:2px solid var(--green-deep); outline-offset:1px; }
.ts:hover { outline:2px solid var(--line-green); outline-offset:1px; }