/* ============================================================
   BASE — reset, tokens & shared primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   OPT-BADGE — pastille ✨ qui identifie les options activables
   (alignée sur Maison Lou / La Belle Époque / Atelier de Brieuc)
   ============================================================ */
.opt-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent, #1F6FB2);
  color: #fff;
  font-size: .85em;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 0 0 0 var(--accent, #1F6FB2);
  animation: opt-badge-pulse 2.4s ease-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 5;
}
.opt-badge::before { content: "✨"; }
.opt-badge:hover { transform: scale(1.25); animation: none; box-shadow: 0 0 0 8px transparent; }
.opt-badge--inline { width: 18px; height: 18px; font-size: .72em; margin-left: 4px; animation: none; }
.opt-badge--corner {
  position: absolute;
  top: -8px; right: -8px;
}
@keyframes opt-badge-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #1F6FB2) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 10px transparent; }
}

/* Tooltip "Nom · +5 €/mois" via [data-opt-name] (CSS pur).
   Si [data-opt-price] est défini, on l'utilise à la place. */
.opt-badge[data-opt-name]::after {
  content: attr(data-opt-name) " · +5 €/mois";
}
.opt-badge[data-opt-name][data-opt-price]::after {
  content: attr(data-opt-name) " · " attr(data-opt-price);
}
.opt-badge[data-opt-name]::after {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 12px;
  background: #1F1B1E;
  color: #FAF6F1;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 220;
}
.opt-badge[data-opt-name]:hover::after,
.opt-badge[data-opt-name]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
/* Soulignement de la mention "+5 €/mois" via une couleur d'accent */
.opt-badge[data-opt-name]::after { background-image: linear-gradient(transparent, transparent); }

/* Élément qui héberge une option : permet de positionner la badge en coin */
[data-option] { position: relative; }
[data-option][data-opt-disabled="true"] { display: none !important; }

/* ============================================================
   TRIO-BADGE — pastille "Formule Trio · 59,97 €/mois"
   (à utiliser pour les fonctionnalités déjà incluses dans Trio,
    pas des options +5 €/mois supplémentaires)
   ============================================================ */
.trio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #C9A961 0%, #B8865B 100%);
  color: #1F1B1E;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 4px 12px rgba(184,134,91,.35);
  cursor: help;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: trio-badge-shine 4.5s ease-in-out infinite;
}
.trio-badge:hover,
.trio-badge:focus-visible {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 20px rgba(184,134,91,.5);
  outline: 0;
}
.trio-badge__icon { font-size: .85em; line-height: 1; }
.trio-badge__text { line-height: 1.1; }
@keyframes trio-badge-shine {
  0%, 92%, 100% { filter: brightness(1) saturate(1); }
  96%           { filter: brightness(1.18) saturate(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .trio-badge { animation: none; }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .6s ease, color .6s ease;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; color: inherit; }

:root {
  /* sizing */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 18px;
  --radius-lg: 28px;

  /* PAINTER PALETTE — pigments d'atelier (saturés, version coloriste) */
  --terracotta: #D86A47;       /* terracotta plus vif (était #C77B5B) */
  --terracotta-deep: #A8462A;  /* terracotta cuit (sépia) */
  --ocre:       #E8B854;        /* ocre jaune saturé (était #D4A574) */
  --ocre-deep:  #C68A2B;        /* moutarde profonde */
  --bleu-paon:  #15678C;        /* bleu paon plus vibrant (était #1E5570) */
  --bleu-deep:  #0D3F5A;        /* bleu nuit/Klein */
  --sauge:      #7DA67D;        /* sauge plus verte (était #9CAB91) */
  --vert-olive: #5A7A4A;        /* vert olive profond */
  --rose-brique: #C24E5E;       /* rose tomette/brique — accent chaud nouveau */
  --aubergine:  #5E3D5C;         /* aubergine/prune — accent profond nouveau */
  --jaune-vif:  #F5C542;         /* jaune naples — touche pop */
  --lin:        #2A1F1A;
  --craie:      #F5EFE6;
  --craie-rose: #FAEEE3;        /* craie tintée rose (sections) */
  --craie-sauge: #EFF2EA;       /* craie tintée sauge (sections) */
  --craie-paon: #E8EEF0;         /* craie tintée paon (sections) */
  --craie-ocre: #FAF1DC;         /* craie tintée ocre (sections) */
  --blanc-pur:  #FFFFFF;
  --ombre:      #6B5040;

  /* default fallbacks; theme files override */
  --bg: var(--craie);
  --text: var(--lin);
  --muted: var(--ombre);
  --line: rgba(42,31,26,.10);
  --accent: var(--terracotta);
  --accent-2: var(--bleu-paon);
  --accent-3: var(--ocre);
  --accent-4: var(--sauge);
  --accent-5: var(--rose-brique);
  --accent-6: var(--aubergine);
  --paper: var(--blanc-pur);
  --shadow: 0 30px 60px -30px rgba(216,106,71,.32);
}

.icon { width: 1em; height: 1em; }
.icon-r { transition: transform .35s cubic-bezier(.5,.1,.2,1); }

/* ───── BUTTONS ───── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .65em;
  padding: 1em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.5,.1,.2,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
  white-space: nowrap;
  isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon-r { transform: translateX(4px); }
.btn-primary {
  background: var(--accent);
  color: var(--paper);
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--text); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; justify-content: center; }
.btn-xl {
  padding: 1.3em 2.4em;
  font-size: 1.1rem;
  gap: .9em;
  letter-spacing: .015em;
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 6px rgba(0,0,0,.08);
}
.btn-xl:hover { box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--accent) 75%, transparent), 0 4px 10px rgba(0,0,0,.12); }
.btn-xl .icon-r { width: 1.2em; height: 1.2em; }

/* ───── LANG SWITCH (option) ───── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  position: relative;
  margin-left: 12px;
}
.lang-switch__btn {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .25s ease, background .25s ease;
}
.lang-switch__btn.is-active,
.lang-switch__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--paper);
}
.lang-switch__btn:hover:not(.is-active):not([aria-pressed="true"]) {
  color: var(--accent);
}

/* ───── GALERIE (option) ───── */
.gallery {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--bg);
  position: relative;
}
/* ───── GALLERY — mosaïque 4×3 sans trous ─────
   Layout cible (8 figures) :
     ┌─────────────┬─────┬─────┐
     │             │  2  │  3  │
     │   1 (BIG)   ├─────┼─────┤
     │             │  4  │  5  │
     ├─────────────┴─────┼─────┤
     │     6 (WIDE)      │  7  │ + ligne ajoutée par dense flow
     └───────────────────┴─────┘
   `grid-auto-flow: dense` repackage automatiquement pour ne laisser aucun
   trou si une dimension dépasse. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(160px, 18vw, 220px);
  grid-auto-flow: dense;
  gap: 14px;
  max-width: var(--container);
  margin: 0 auto;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
  cursor: zoom-in;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  z-index: 2;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
}
.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}
/* Voile permanent en bas pour rendre la légende lisible même sans hover */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .85) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px 18px;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: .01em;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-item figcaption strong {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
}
.gallery-item figcaption span {
  font-size: .76rem;
  font-weight: 400;
  opacity: .85;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Tailles : BIG (2×2), TALL (1×2), WIDE (2×1) */
.gallery-item--big  { grid-column: span 2; grid-row: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }

/* Petit ruban "Réalisation" pour la pièce maîtresse */
.gallery-item--big::before {
  content: '★ Réalisation phare';
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(15, 76, 117, .92);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(15, 76, 117, .35);
  pointer-events: none;
}

/* Mobile/tablette */
@media (max-width: 1080px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item--big  { grid-column: span 2; grid-row: span 2; }
  .gallery-item--wide { grid-column: span 2; }
  .gallery-item--tall { grid-row: span 1; }
}

/* ───── MAPS — section enrichie : stats + carte info + chips ───── */
.maps-section {
  padding: clamp(70px, 9vw, 120px) var(--gutter);
  background: var(--paper);
  position: relative;
}

/* Stats : 3 chiffres clés au-dessus de la map */
.maps-stats {
  list-style: none;
  margin: 0 auto clamp(28px, 4vw, 44px);
  padding: 0;
  max-width: var(--container);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
.maps-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  transition: transform .35s ease, box-shadow .35s ease, border-left-color .35s ease;
}
.maps-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
  border-left-color: var(--accent-2, var(--accent));
}
.maps-stat__icon {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 4px;
}
.maps-stat__icon svg { width: 100%; height: 100%; }
.maps-stat__num {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  line-height: 1;
}
.maps-stat__lab {
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .maps-stats { grid-template-columns: 1fr; }
}

/* Map frame avec carte info flottante */
.maps-frame {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  aspect-ratio: 21/9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
}
.maps-frame iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
/* Carte info en overlay top-left */
.maps-frame__card {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 5;
  width: clamp(240px, 30%, 320px);
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, .96);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22), 0 0 0 1px rgba(15, 76, 117, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maps-frame__pin {
  position: absolute;
  top: -16px; left: 22px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 6px 18px rgba(15, 76, 117, .42);
}
.maps-frame__pin svg { width: 18px; height: 18px; }
.maps-frame__eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}
.maps-frame__name {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.maps-frame__addr {
  margin: 4px 0 12px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}
.maps-frame__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--paper);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 76, 117, .35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.maps-frame__cta:hover {
  transform: translateY(-2px);
  background: var(--accent-2, var(--accent));
  box-shadow: 0 10px 26px rgba(15, 76, 117, .45);
}
.maps-frame__cta .icon-r { width: 14px; height: 14px; }

/* Chips communes desservies */
.maps-chips {
  max-width: var(--container);
  margin: clamp(28px, 4vw, 44px) auto 0;
  text-align: center;
}
.maps-chips__label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.maps-chips ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.maps-chips li {
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
  cursor: default;
}
.maps-chips li sup { font-size: .7em; font-weight: 600; margin-left: 1px; }
.maps-chips li:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  background: rgba(15, 76, 117, .04);
}
.maps-chips__more {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border-color: transparent !important;
  font-style: italic;
  font-weight: 600 !important;
}
.maps-chips__more:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(15, 76, 117, .35);
}

/* Mobile : la carte info passe en pleine largeur sous la map */
@media (max-width: 760px) {
  .maps-frame { aspect-ratio: 4/3; }
  .maps-frame__card {
    position: relative;
    top: auto; left: auto;
    width: auto;
    margin: -40px 16px 0;
  }
}

/* ───── SECTION HEAD ───── */
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .kicker {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 600;
}
.section-head .kicker-light { color: var(--accent-3); }
.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 600;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 1rem auto 0;
}

/* ───── REVEAL ANIMATION ───── */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Les rev-cards sont gérées par le marquee (clones JS) — pas de reveal sinon
   les copies dupliquées restent invisibles car non observées par l'IO. */
.rev-card[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ───── SOCIAL RAIL — adapte la couleur au thème via --accent ───── */
.social-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
}
.social-rail::before,
.social-rail::after {
  content: "";
  display: block;
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--accent) 50%, transparent);
  margin: 8px auto;
  opacity: .8;
}
.social-link {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s, color .25s, background .25s;
}
.social-link svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.social-link:hover {
  transform: translateX(2px) scale(1.08);
  border-color: transparent;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.social-divider {
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, transparent, var(--accent) 50%, transparent);
  opacity: .8;
  margin: 4px 0;
}
.social-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .65rem;
  letter-spacing: .35em;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}
@media (max-width: 900px) { .social-rail { display: none; } }

/* ── Mode sombre : boutons sociaux plus contrastés ── */
[data-mode="dark"] .social-link {
  color: #F4D8C7;
  border-color: rgba(244,216,199,.65);
  background: rgba(199,123,91,.10);
  box-shadow: 0 0 0 1px rgba(199,123,91,.25), 0 4px 12px rgba(0,0,0,.30);
}
[data-mode="dark"] .social-link:hover {
  color: #FFFFFF;
  border-color: transparent;
  background: var(--terracotta, #C77B5B);
  box-shadow: 0 0 0 1px rgba(244,216,199,.4), 0 8px 24px rgba(199,123,91,.55);
}
[data-mode="dark"] .social-rail::before,
[data-mode="dark"] .social-rail::after {
  background: linear-gradient(to bottom, transparent, rgba(244,216,199,.7) 50%, transparent);
}
[data-mode="dark"] .social-tag {
  color: #F4D8C7;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ───── FLOATING CONTROLS ─────
   Empilés AU-DESSUS du WhatsApp FAB. WhatsApp = 68px + bottom max(20,1.5vw)
   = ~88px. On laisse ~16px d'air entre les deux. */
.floating-controls {
  position: fixed;
  right: max(20px, 1.5vw);
  /* Démarre juste au-dessus du WhatsApp FAB (68px + ~21px bottom + 16px gap ≈ 105px) */
  bottom: calc(max(20px, 1.5vw) + 68px + 16px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 600px) {
  .floating-controls { right: 18px; }
}
.ctrl-btn {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.32);
  position: relative;
  transition: transform .35s, background .35s, color .35s, box-shadow .35s;
}
.ctrl-btn:hover {
  /* On a retiré le rotate(-6deg) — il faisait pivoter visuellement le badge
     ✨ et son tooltip, qui apparaissaient de travers. Lift + scale subtil
     suffisent pour signaler l'interaction sans perturber la pastille. */
  transform: translateY(-3px) scale(1.04);
  background: var(--accent);
  color: var(--paper);
}
.ctrl-btn .icon { width: 30px; height: 30px; }
.ctrl-btn.is-on { background: var(--accent); color: var(--paper); }

[data-mode="dark"] .ctrl-btn#btn-light .icon { filter: drop-shadow(0 0 6px gold); }

.music-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.ctrl-btn#btn-music.is-on .music-pulse {
  opacity: 1;
  animation: pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.8); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ───── HEADER ───── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: 18px clamp(28px, 4vw, 64px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .6s ease, border-color .6s ease;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--accent);
  transition: transform .8s cubic-bezier(.5,.1,.2,1);
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: block;
}
.brand-sub {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-self: center;
}
.site-nav a {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 0;
  transition: color .3s;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width .35s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { width: 100%; }
.site-nav a.nav-cta {
  padding: .6em 1.2em;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
}
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta:hover { background: var(--text); transform: translateY(-1px); }

/* ───── THEME SWITCH ───── */
.theme-switch {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.15);
}
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
  transition: background .35s, color .35s, transform .35s;
}
.theme-btn:hover { color: var(--text); transform: translateY(-1px); }
.theme-btn.is-active {
  background: var(--text);
  color: var(--paper);
}
.theme-icon {
  display: inline-block;
  font-size: .9em;
  opacity: .85;
}
@media (max-width: 1100px) {
  .theme-btn .theme-label { display: none; }
  .theme-btn { padding: 8px 12px; }
}
@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; gap: 14px; padding: 12px 18px; }
  .site-nav { display: none; }
}

/* ============================================================
   HERO THEMES — démo des 3 styles intégrée AU hero
   Une bande compacte au bas du hero avec un label + 3 mini-cards.
   ============================================================ */
.hero-themes {
  position: relative;
  z-index: 2;
  max-width: var(--container, 1280px);
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 0 var(--gutter, 32px);
  text-align: center;
}
.hero-themes__label {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--text);
  margin-bottom: 18px;
  font-weight: 500;
}
.hero-themes__label em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}
.hero-themes__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .hero-themes__cards { grid-template-columns: 1fr; max-width: 420px; }
}

/* === Card === */
.tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 14px 18px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease,
              border-color .35s ease,
              background .35s ease;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}
.tp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.tp-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 25%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Visuel preview de chaque thème (mini-représentation) */
.tp-card__visual {
  position: relative;
  display: block;
  height: 95px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

/* CLASSIQUE — bleu nuit + ivoire avec lignes éditoriales */
.tp-card__visual--c {
  background: linear-gradient(135deg, #0F4C75 0%, #1F6FB2 60%, #BBE1FA 100%);
}
.tp-card__visual--c .tp-card__visual-line {
  position: absolute;
  left: 16px; right: 16px;
  height: 3px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}
.tp-card__visual--c .tp-card__visual-line:nth-child(1) { top: 28px; width: 50%; }
.tp-card__visual--c .tp-card__visual-line:nth-child(2) { top: 50px; width: 75%; opacity: .6; }
.tp-card__visual--c .tp-card__visual-line:nth-child(3) { top: 72px; width: 40%; opacity: .4; }

/* RÉTRO 80s — soleil dégradé + grille perspective */
.tp-card__visual--r {
  background: linear-gradient(180deg, #1a0033 0%, #240046 30%, #5a189a 60%, #c9184a 100%);
}
.tp-card__visual--r .tp-card__visual-sun {
  position: absolute;
  left: 50%; top: 35%;
  width: 90px; height: 90px;
  margin-left: -45px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe600 0%, #ff5e00 50%, #ff006e 100%);
  filter: drop-shadow(0 0 20px rgba(255, 94, 0, .5));
  animation: tp-sun-pulse 4s ease-in-out infinite;
}
.tp-card__visual--r .tp-card__visual-grid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 10px, #ff00e4 11px, #ff00e4 12px),
    repeating-linear-gradient(90deg, transparent 0, transparent 10px, #00f5ff 11px, #00f5ff 12px);
  background-blend-mode: screen;
  transform: perspective(120px) rotateX(45deg);
  transform-origin: 50% 100%;
  opacity: .85;
}
@keyframes tp-sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* FUTURISTE — fond noir + orbes cyan/violet */
.tp-card__visual--f {
  background: linear-gradient(180deg, #03061a 0%, #0a0e2e 100%);
}
.tp-card__visual--f .tp-card__visual-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  mix-blend-mode: screen;
}
.tp-card__visual--f .tp-card__visual-orb--1 {
  top: 10%; left: 15%;
  width: 80px; height: 80px;
  background: radial-gradient(circle, #22D3EE, transparent 70%);
  animation: tp-orb-float 8s ease-in-out infinite;
}
.tp-card__visual--f .tp-card__visual-orb--2 {
  bottom: 5%; right: 10%;
  width: 70px; height: 70px;
  background: radial-gradient(circle, #A78BFA, transparent 70%);
  animation: tp-orb-float 10s ease-in-out infinite reverse;
}
@keyframes tp-orb-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(15px, -10px); }
}

/* Body de la card */
.tp-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.tp-card__desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
}

/* Check mark sur card active (coin haut droit) */
.tp-card__check {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .9rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.tp-card.is-active .tp-card__check {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tp-card__visual--r .tp-card__visual-sun,
  .tp-card__visual--f .tp-card__visual-orb { animation: none; }
}