/* ==========================================================================
   La Chatterie des Sortilèges Coon — feuille de style principale
   Univers "Livre des Ombres" : violet nocturne, or ancien, parchemin.
   ========================================================================== */

/* ---- Polices auto-hébergées (variable fonts : un seul fichier par style) ---- */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cinzel-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Tangerine";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tangerine-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Tangerine";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tangerine-700-normal.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root {
  /* Palette */
  --void: #120a1a;
  --plum-900: #1b0f28;
  --plum-800: #261638;
  --plum-700: #33204a;
  --plum-600: #432b60;
  --amethyst: #7a4bb8;
  --amethyst-light: #b28ee0;
  --gold: #c9a24b;
  --gold-light: #e9d08c;
  --gold-dim: #8a6f34;
  --ember: #8e2f4d;
  --ember-light: #c15a76;
  --parchment: #f3ead2;
  --parchment-dark: #e4d5ab;
  --ink: #241433;
  --ink-soft: #4a3a5c;
  --white: #faf7f0;
  --success: #4f7a5a;

  /* Typography */
  --font-display: "Cinzel", "Georgia", serif;
  --font-body: "Cormorant Garamond", "Georgia", serif;
  --font-script: "Tangerine", cursive;

  /* Shape / motion */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --shadow-soft: 0 10px 40px rgba(6, 2, 12, 0.45);
  --shadow-gold: 0 0 0 1px rgba(201, 162, 75, 0.35), 0 12px 30px rgba(6, 2, 12, 0.5);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: hidden;
}
/* Filet de sécurité : quoi qu'il arrive, la page ne doit jamais pouvoir
   défiler horizontalement (un futur ajout de contenu trop large reste
   invisible plutôt que de casser la mise en page). */
body { overflow-x: hidden; width: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Base ---- */
body {
  background: var(--void);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(122, 75, 184, 0.28), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(142, 47, 77, 0.18), transparent 60%);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
}

section { padding-block: clamp(56px, 9vw, 108px); position: relative; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-light);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; letter-spacing: 0.06em; }

p { max-width: 68ch; }
p + p { margin-top: 1em; }

.lede {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: var(--amethyst-light);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before,
.eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--gold-dim); }

.script-accent {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--gold-light);
  line-height: 1;
  display: block;
}

/* Triquetra — symbole celtique du Livre des Ombres, utilisé comme séparateur */
.triquetra {
  width: 30px;
  height: 30px;
  color: var(--gold);
  opacity: 0.9;
}
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-block: 20px;
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 140px);
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* Texture parchemin pour les blocs de contenu */
.parchment {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    var(--parchment);
  color: var(--ink);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201, 162, 75, 0.4);
}
/* La plupart des .parchment fixent leur padding en ligne via clamp() ; sur
   mobile ce padding s'ajoute à celui du .container et rend le contenu (le
   formulaire de contact notamment) inutilement étroit. On resserre avec
   !important, seul moyen de primer sur un style en ligne. */
@media (max-width: 480px) {
  .parchment { padding: 22px !important; }
}
.parchment h2, .parchment h3, .parchment h4 { color: var(--ink); }
.parchment .eyebrow { color: var(--ember); }
.parchment .eyebrow::before, .parchment .eyebrow::after { background: var(--ember); opacity: 0.4; }
.parchment p { color: var(--ink-soft); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

/* Sur très petits écrans, un bouton au texte long (ex. "Je veux adopter mon
   chaton 😻") peut dépasser la largeur disponible dans un conteneur imbriqué
   (carte parchemin avec marges) et provoquer un débordement horizontal de
   toute la page. On resserre légèrement le bouton plutôt que d'autoriser ce
   débordement. */
@media (max-width: 420px) {
  .btn { font-size: 0.72rem; padding: 14px 18px; letter-spacing: 0.07em; gap: 8px; }
}

/* Boutons au contenu long (icône + plusieurs mots, ex. "Voir tous nos avis
   sur Google") : sur les très petits écrans, on autorise le retour à la
   ligne plutôt que de laisser déborder la page. */
@media (max-width: 360px) {
  .btn { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 4px; }
}

.btn-cta {
  background: linear-gradient(135deg, var(--ember) 0%, var(--amethyst) 100%);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(142, 47, 77, 0.45), inset 0 0 0 1px rgba(233, 208, 140, 0.35);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(142, 47, 77, 0.55), inset 0 0 0 1px rgba(233, 208, 140, 0.6); }

.btn-ghost {
  background: transparent;
  color: var(--gold-light);
  border-color: rgba(201, 162, 75, 0.55);
}
.btn-ghost:hover { background: rgba(201, 162, 75, 0.12); border-color: var(--gold); }

.btn-dark {
  background: var(--ink);
  color: var(--parchment);
}
.btn-dark:hover { background: #34204a; }

.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   Header flottant
   ========================================================================== */
.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 28px));
  z-index: 500;
  background: rgba(19, 10, 28, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand img { height: 46px; width: auto; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}
.brand__text span {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--amethyst-light);
}

.main-nav { display: flex; align-items: center; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav a, .main-nav button.nav-toggle-drop {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--parchment);
  padding: 12px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"], .main-nav button.nav-toggle-drop:hover {
  background: rgba(201, 162, 75, 0.14);
  color: var(--gold-light);
}
.main-nav a[aria-current="page"] { color: var(--gold); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--plum-900);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-gold);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
/* Affichage au survol/focus : comportement desktop uniquement. Sur mobile,
   l'ouverture est pilotée exclusivement par le clic (.is-open, voir plus
   bas) ; si cette règle s'appliquait aussi sur mobile, le vrai focus donné
   par le navigateur lors d'un tap réel (contrairement à un clic simulé en
   script) la déclencherait en plus de .is-open, et sa spécificité CSS plus
   élevée que la règle mobile ferait gagner son transform: translateX(-50%)
   — décalant le menu, pourtant en position statique sur mobile, de la
   moitié de sa largeur vers la gauche. */
@media (min-width: 981px) {
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
.dropdown a {
  display: block;
  width: 100%;
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-size: 0.7rem;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn-cta { padding: 13px 20px; font-size: 0.72rem; }
.header-actions .btn-cta .paw { font-size: 1rem; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.4);
  background: rgba(201, 162, 75, 0.08);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold-light);
  position: relative;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  /* .main-nav est positionné en absolute (et non fixed) par rapport à
     .site-header : .site-header a un transform (translateX, pour son
     centrage horizontal), et un transform sur un ancêtre change la
     référence de positionnement d'un descendant en position:fixed (il se
     positionne par rapport à cet ancêtre plutôt qu'au viewport) — un piège
     CSS classique, cohérent sur Chrome comme sur Safari. En absolute,
     .main-nav se positionne explicitement par rapport à .site-header,
     sans cette ambiguïté. */
  .main-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--plum-900);
    border: 1px solid rgba(201, 162, 75, 0.3);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    padding: 10px;
    max-height: calc(100vh - 120px);
    /* Sur Safari iOS, 100vh ne tient pas compte de la barre d'adresse qui
       se rétracte au scroll, ce qui peut faire déborder le panneau sous la
       zone réellement visible. 100dvh (hauteur dynamique) corrige ça sur
       les navigateurs qui la supportent, en ne remplaçant la ligne
       ci-dessus que s'ils la comprennent (dégradation silencieuse sinon). */
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    display: block;
    transform-origin: top center;
    transform: scaleY(0.9) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: scaleY(1) translateY(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a, .main-nav button.nav-toggle-drop { width: 100%; justify-content: space-between; }
  .has-dropdown .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.18);
    display: none;
    margin-top: 2px;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .header-actions .btn-label { display: none; }
  .header-actions .btn-cta { padding: 12px 14px; }
}
@media (min-width: 981px) {
  .dropdown-caret { transition: transform 0.25s var(--ease); }
  .has-dropdown:hover .dropdown-caret { transform: rotate(180deg); }
}

/* Écrans très étroits : la marque + le bouton d'action + le menu ne tiennent
   pas sur une seule ligne à pleine taille — on resserre chaque bloc. */
@media (max-width: 480px) {
  .site-header__bar { gap: 8px; padding: 8px 12px; }
  .brand { gap: 8px; }
  .brand img { height: 34px; }
  .brand__text span { display: none; }
  .brand__text strong { font-size: 0.72rem; letter-spacing: 0.02em; }
  .nav-toggle { width: 40px; height: 40px; }
  .header-actions .btn-cta { padding: 10px 12px; }
}

/* Spacer so fixed header doesn't cover the hero */
.header-spacer { height: calc(var(--header-h) + 30px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 40px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 5, 16, 0.55) 0%, rgba(14, 8, 20, 0.72) 55%, var(--void) 100%),
    linear-gradient(90deg, rgba(10, 5, 16, 0.75) 0%, rgba(10, 5, 16, 0.2) 55%);
}
.hero__content { max-width: 680px; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; align-items: center; }
.stars { color: var(--gold); letter-spacing: 2px; }
.rating-note { font-size: 1rem; color: var(--parchment-dark); margin-top: 14px; }

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.google-badge img { width: 20px; height: 20px; flex-shrink: 0; }
.google-badge .stars { font-size: 0.95rem; }
.google-badge span:last-child { color: var(--parchment-dark); font-size: 0.95rem; transition: color 0.3s var(--ease); }
.google-badge:hover span:last-child { color: var(--gold-light); }

.page-hero {
  min-height: 46vh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero__inner { max-width: 760px; margin-inline: auto; }
.page-hero p { margin-inline: auto; }

/* ==========================================================================
   Composants génériques
   ========================================================================== */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.grid-center-orphan .cat-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 360px;
  margin-inline: auto;
}

.card {
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-m);
  padding: 28px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(201, 162, 75, 0.55); box-shadow: var(--shadow-gold); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--parchment-dark); }

.cat-card {
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-gold); }
.cat-card__media { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.06); }
.cat-card__body { padding: 22px; }
.cat-card__body h3 { margin-bottom: 6px; }
.cat-card__meta { color: var(--amethyst-light); font-size: 0.95rem; margin-bottom: 10px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.badge--available { background: rgba(79, 122, 90, 0.22); color: #8fd6a3; border: 1px solid rgba(143, 214, 163, 0.4); }
.badge--reserved { background: rgba(142, 47, 77, 0.25); color: var(--ember-light); border: 1px solid rgba(193, 90, 118, 0.4); }

/* Section "chatterie" à l'accueil avec photos superposées */
.figure-stack { position: relative; }
.figure-stack img { border-radius: var(--radius-l); box-shadow: var(--shadow-soft); border: 1px solid rgba(201, 162, 75, 0.35); }

/* Témoignages */
.testimonial {
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-m);
  padding: 30px;
  position: relative;
}
.testimonial::before {
  content: "\201C";
  font-family: var(--font-script);
  font-size: 5rem;
  color: var(--gold-dim);
  position: absolute;
  top: -6px;
  left: 18px;
  line-height: 1;
}
.testimonial p { color: var(--parchment-dark); font-style: italic; }
.testimonial__author { margin-top: 16px; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase; }
.testimonial .stars { display: block; margin-bottom: 14px; font-size: 0.9rem; }

/* Carrousel d'avis — défilement natif (scroll-snap), pas de librairie JS */
.testimonial-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-inline: auto;
}
.testimonial-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 4px;
}
.carousel-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: var(--plum-800);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel-arrow:hover { background: rgba(201, 162, 75, 0.16); border-color: var(--gold); transform: scale(1.07); }
.carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.3);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel-dot.is-active { background: var(--gold); transform: scale(1.4); }
@media (max-width: 560px) {
  .testimonial-carousel { gap: 8px; }
  .carousel-arrow { width: 36px; height: 36px; }
}

/* Galerie */
.gallery-grid {
  columns: 4 240px;
  column-gap: 18px;
}
.gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 18px;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.25);
  position: relative;
}
.gallery-grid img { width: 100%; display: block; transition: transform 0.5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: linear-gradient(0deg, rgba(10,5,16,0.85), transparent);
}

/* Liste à puces façon grimoire */
.spell-list { display: grid; gap: 14px; }
.spell-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(201, 162, 75, 0.06);
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: var(--radius-s);
  padding: 16px 18px;
}
.spell-list li .num {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Table des conditions */
.price-table { display: grid; gap: 20px; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px dashed rgba(201, 162, 75, 0.35);
  padding-bottom: 14px;
}
.price-row .amount { font-family: var(--font-display); font-size: 1.6rem; color: var(--ember); white-space: nowrap; }

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */
.contact-section { position: relative; }
.contact-form {
  display: grid;
  gap: 18px;
}
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
}
.field input, .field textarea {
  background: #fffdf7;
  border: 1px solid rgba(36, 20, 51, 0.25);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  color: var(--ink);
  font-size: 1.05rem;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(142, 47, 77, 0.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: 0.9rem; color: var(--ink-soft); }
.form-feedback {
  border-radius: var(--radius-s);
  padding: 14px 16px;
  font-size: 1rem;
  display: none;
}
.form-feedback.is-visible { display: block; }
.form-feedback.success { background: rgba(79, 122, 90, 0.15); color: #2f5b3c; border: 1px solid rgba(79, 122, 90, 0.4); }
.form-feedback.error { background: rgba(142, 47, 77, 0.12); color: #7a2b41; border: 1px solid rgba(142, 47, 77, 0.35); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--plum-900);
  border-top: 1px solid rgba(201, 162, 75, 0.25);
  padding-top: 70px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.15);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col p { color: var(--parchment-dark); font-size: 0.98rem; }
.footer-col address { font-style: normal; color: var(--parchment-dark); font-size: 0.98rem; line-height: 1.7; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 44px; border-radius: 50%; }
.footer-col-title { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--gold-light); margin: 0 0 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--parchment-dark); transition: color 0.25s; }
.footer-col a:hover { color: var(--gold-light); }
.footer-socials { display: flex; gap: 12px; margin-top: 18px; }
.footer-socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.35);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s;
}
.footer-socials a:hover { background: rgba(201, 162, 75, 0.15); border-color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 22px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  color: rgba(243, 234, 210, 0.55);
}
.footer-bottom a { color: rgba(243, 234, 210, 0.75); }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom__copy { display: grid; gap: 4px; }
.footer-credit { color: rgba(243, 234, 210, 0.55); }
.footer-credit a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.footer-credit a:hover { color: var(--gold); }

/* ==========================================================================
   Bandeau cookies
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  max-width: 560px;
  margin-inline: auto;
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius-l);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  padding: 26px;
  transform: translateY(140%);
  transition: transform 0.5s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
/* Sur PC : ancré en bas à gauche plutôt que centré. Sur mobile (en dessous
   de 981px, même seuil que le menu) : reste centré en bas, contraint par
   les marges left/right ci-dessus. */
@media (min-width: 981px) {
  .cookie-banner {
    left: 24px;
    right: auto;
    bottom: 24px;
    margin-inline: 0;
  }
}
.cookie-banner p.cookie-banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.cookie-banner p { color: var(--ink-soft); font-size: 0.98rem; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cookie-banner .btn-cta { flex: 1 1 auto; justify-content: center; }
.cookie-banner .btn-ghost { border-color: rgba(36, 20, 51, 0.3); color: var(--ink); }
.cookie-banner .btn-ghost:hover { background: rgba(36, 20, 51, 0.06); }
.cookie-prefs {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(36, 20, 51, 0.2);
  gap: 12px;
}
.cookie-prefs.is-open { display: grid; }
.cookie-prefs label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.cookie-prefs small { display: block; color: var(--ink-soft); font-weight: 400; }

/* ==========================================================================
   Pop-up d'annonce (portée indisponible / réseaux sociaux)
   ========================================================================== */
.promo-modal { position: fixed; inset: 0; z-index: 980; }
.promo-modal[hidden] { display: none; }
.promo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 2, 12, 0.72);
  backdrop-filter: blur(3px);
  animation: promo-modal-fade 0.3s var(--ease);
}
.promo-modal__card {
  position: relative;
  margin: max(8vh, 24px) auto 0;
  width: min(420px, calc(100vw - 32px));
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius-l);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  padding: 36px 28px 28px;
  text-align: center;
  animation: promo-modal-pop 0.35s var(--ease);
}
@keyframes promo-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes promo-modal-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.promo-modal__close:hover { background: rgba(36, 20, 51, 0.08); }
.promo-modal__icon { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.promo-modal__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 12px;
}
.promo-modal__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.promo-modal__actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.promo-modal__social {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-m);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--white);
  background: var(--plum-800);
  transition: transform 0.2s, box-shadow 0.2s;
}
.promo-modal__social:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.promo-modal__social--facebook { background: #3a5a9c; }
.promo-modal__social--instagram { background: linear-gradient(135deg, #f0982f, #c4327a 55%, #6a4fc4); }
.promo-modal__dismiss {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: underline;
}
.promo-modal__dismiss:hover { color: var(--ink); }
@media (max-width: 480px) {
  .promo-modal__actions { flex-direction: column; }
}

/* ==========================================================================
   FAQ (accordéon natif details/summary, sans JS)
   ========================================================================== */
.faq { display: grid; gap: 14px; max-width: 800px; margin-inline: auto; }
.faq-item {
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.faq-item[open] { border-color: rgba(201, 162, 75, 0.5); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 24px 22px; color: var(--parchment-dark); }
.faq-item__answer p { max-width: none; }
.faq-item__answer a { color: var(--gold-light); text-decoration: underline; }

/* ==========================================================================
   Bouton retour en haut
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.4);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 400;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 641px) {
  .back-to-top { bottom: 92px; }
}

/* ==========================================================================
   Bulle de contact flottante
   ========================================================================== */
.contact-bubble {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.contact-bubble__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--plum-800);
  border: 1px solid rgba(201, 162, 75, 0.45);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  box-shadow: var(--shadow-soft);
  color: var(--parchment);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-bubble__toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); border-color: var(--gold); }
.contact-bubble__avatar { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.contact-bubble__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201, 162, 75, 0.5); }
.contact-bubble__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--plum-800);
}
.contact-bubble__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  white-space: nowrap;
}
.contact-bubble__panel {
  width: min(340px, calc(100vw - 32px));
  background: var(--parchment);
  color: var(--ink);
  border-radius: var(--radius-l);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  padding: 20px;
  transform-origin: bottom right;
  animation: contact-bubble-pop 0.25s var(--ease);
}
.contact-bubble__panel[hidden] { display: none; }
@keyframes contact-bubble-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-bubble__panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.contact-bubble__panel-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(36, 20, 51, 0.15); flex-shrink: 0; }
.contact-bubble__panel-heading { flex: 1; }
.contact-bubble__panel-title { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: 0.01em; color: var(--ink); line-height: 1.35; }
.contact-bubble__close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.contact-bubble__close:hover { background: rgba(36, 20, 51, 0.08); }
.contact-bubble__actions { display: grid; gap: 8px; }
.contact-bubble__action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(36, 20, 51, 0.12);
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.contact-bubble__action:hover { border-color: var(--gold); background: rgba(201, 162, 75, 0.12); transform: translateX(2px); }
.contact-bubble__action-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--plum-800);
  color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
}
.contact-bubble__action-text { display: flex; flex-direction: column; }
.contact-bubble__action-text strong { font-size: 0.95rem; color: var(--ink); }
.contact-bubble__action-text small { font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 400px) {
  .contact-bubble { right: 12px; bottom: 12px; }
  .contact-bubble__toggle { padding: 6px 14px 6px 6px; }
  .contact-bubble__label { font-size: 0.66rem; }
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--radius-s);
  z-index: 1000;
  transition: top 0.25s var(--ease);
  font-family: var(--font-display);
  font-size: 0.8rem;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.section-head { max-width: 700px; margin-bottom: 46px; }
.section-head.text-center { margin-inline: auto; }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 900px) { .two-col--media-last-mobile .figure-stack { order: 1; } }
.tone-plum { background: var(--plum-800); }
.tone-void { background: var(--void); }

/* ==========================================================================
   Effets "wow" — transform/opacity/filter uniquement (compositing GPU,
   aucun recalcul de mise en page), respectent prefers-reduced-motion via
   la règle globale déjà définie plus haut dans ce fichier.
   ========================================================================== */

/* Halo ambiant sur le blason du menu */
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(201, 162, 75, 0.35)); }
  50% { filter: drop-shadow(0 0 7px rgba(201, 162, 75, 0.8)); }
}
.brand img, .footer-brand img { animation: logo-glow 3.6s ease-in-out infinite; }

/* Brillance qui balaie les boutons d'appel à l'action */
.btn-cta { position: relative; overflow: hidden; }
.btn-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: btn-shimmer 5s ease-in-out infinite;
}
@keyframes btn-shimmer {
  0%, 35% { left: -60%; }
  65%, 100% { left: 130%; }
}

/* Étincelles flottantes dans le héro de l'accueil (générées par main.js) */
.hero__sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sparkle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 1px rgba(233, 208, 140, 0.75);
  opacity: 0;
  animation: sparkle-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0) scale(0.6); opacity: 0; }
  50% { transform: translateY(-26px) scale(1); opacity: 0.9; }
}

/* Révélation au scroll. La classe .reveal n'est ajoutée que par main.js :
   si JavaScript ne s'exécute pas, le contenu reste normalement visible
   (aucune dépendance au JS pour voir la page). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }