/* =========================================================================
   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(.doodle) { 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; }

/* =====================================================================
   THÈME TERRACOTTA — couleur secondaire (section pleine, chaude)
   Reproduit la section du brief : dégradé terre + anneaux + texte crème.
   Placé en fin de fichier pour primer sur la règle générique .theme.
   ===================================================================== */
.theme-terracotta {
  --bg:#a8582e; --surface:rgba(253,249,242,.12); --surface-2:rgba(253,249,242,.18);
  --text:#FDF9F2; --text-muted:rgba(253,249,242,.86); --heading:#FDF9F2;
  --border:rgba(253,249,242,.30); --border-soft:rgba(253,249,242,.18);
  --accent:#F4DECC; --accent-2:#FDF9F2;
  --primary-bg:#FDF9F2; --primary-fg:#a8582e; --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);
  background:#a8582e;   /* aplat plein (plus de dégradé) */
}
.theme-terracotta :is(.rings, .card__circles) { opacity:.34 !important; }
.theme-terracotta .arrow-link img,
.theme-terracotta .leaf {
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(420%) hue-rotate(10deg);
}
.theme-terracotta .ink-icon { filter: brightness(0) invert(1); opacity:.92; }
.theme-terracotta .btn--secondary { -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.theme-terracotta .field { background:rgba(253,249,242,.16); border-color:rgba(253,249,242,.45); color:var(--cream); }
.theme-terracotta .field::placeholder { color:rgba(253,249,242,.6); }
.theme-terracotta :is(.card,.tile,.plan,.offer,.testi,.quote,.rating,.news__panel,.next-card,.surface) {
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}

/* ACCENT CHAUD sur fond clair — éyebrows, liens fléchés, boutons primaires et
   bordures passent en terracotta, le fond reste crème/blanc. Disponible via la
   valeur de variante "cream-warm" (listée dans l'éditeur) ou la classe .warm. */
.theme-cream-warm, .theme-white-warm, .warm {
  --accent:var(--terracotta-deep); --accent-2:var(--terracotta);
  --primary-bg:var(--terracotta); --primary-bg-h:var(--terracotta-deep); --primary-fg:#fdf9f2;
  --secondary-fg:var(--terracotta-deep); --secondary-bd:var(--line-terra); --secondary-bg-h:var(--terracotta-tint);
  --border:rgba(168,88,46,.32); --border-soft:rgba(168,88,46,.16);
}
.theme-cream-warm { --bg:#FDF9F2; --surface:#F6F1EA; --surface-2:#FEFDFB; --text:#3E3A36; --text-muted:rgba(62,58,54,.70); --heading:#3E3A36; background:var(--bg); color:var(--text); }
.theme-white-warm { --bg:#FEFDFB; --surface:#FDF9F2; --surface-2:#F6F1EA; --text:#3E3A36; --text-muted:rgba(62,58,54,.70); --heading:#3E3A36; background:var(--bg); color:var(--text); }
.theme-cream-warm .eyebrow, .theme-white-warm .eyebrow,
.theme-cream-warm .tag, .theme-white-warm .tag,
.theme-cream-warm .accent, .theme-white-warm .accent { color:var(--accent); }

/* =====================================================================
   INVERSION DES RÔLES — terracotta = couleur PRINCIPALE, olive = secondaire.
   Le terracotta porte l'accent principal (sur-titres, liens, boutons
   primaires, prix, marques) ; l'olive ne subsiste que sur des accents
   secondaires (boutons secondaires, numéros, filets). Placé en fin de
   fichier pour primer sur les définitions de variantes ci-dessus.
   ===================================================================== */
:root, .theme-white, .theme-cream {
  --accent: var(--terracotta);
  --accent-2: var(--green);                 /* olive = accent secondaire */
  --primary-bg: var(--terracotta);
  --primary-bg-h: var(--terracotta-deep);
  --primary-fg: var(--cream);
  /* boutons secondaires en olive (présence ponctuelle de la couleur secondaire) */
  --secondary-fg: var(--green-deep);
  --secondary-bd: var(--line-green);
  --secondary-bg-h: rgba(129,139,105,.10);
}
/* fonds sombres / image : l'accent principal reste terracotta, éclairci.
   Le fond sombre est OLIVE (#646B51) : terracotta-soft (#d89a7b) y tombait à
   ~2.3:1 (illisible) → terracotta-pale (#f4decc) remonte à ~4.3:1. */
.theme-dark  { --accent: var(--terracotta-pale); }
.theme-image { --accent: #e7c8b0; }