:root {
  /* ─── Couleurs ─── */
  --color-rouge:        #76111F;
  --color-rose:         #D998A8;
  --color-creme:        #F0E9E0;
  --color-creme-alt:    #FAF5F0;
  --color-or:           #B8863C;
  --color-or-light:     rgba(184, 134, 60, 0.25);
  --color-brun:         #2C1414;
  --color-brun-light:   rgba(44, 20, 20, 0.08);

  /* Les variables de couleur de texte et toute la typographie
     sont définies dans fonts.css */

  /* ─── Espacements ─── */
  --spacing-xs:   0.5rem;
  --spacing-sm:   1rem;
  --spacing-md:   2rem;
  --spacing-lg:   4rem;
  --spacing-xl:   6rem;
  --spacing-2xl:  10rem;

  /* ─── Effets ─── */
  --border-radius:     4px;
  --border-radius-sm:  2px;
  --shadow-soft:       0 4px 24px rgba(44, 20, 20, 0.10);
  --shadow-card:       0 2px 16px rgba(44, 20, 20, 0.08);
  --transition:        0.3s ease-in-out;
  --transition-slow:   0.5s ease-in-out;

  /* ─── Largeurs ─── */
  --max-width:         1200px;
  --max-width-text:    680px;
}
/* ═══════════════════════════════════════════════════════════
   FONTS.CSS — Source unique pour toute la typographie du site
   Modifier ce fichier pour changer les polices, tailles ou
   couleurs de texte sur l'ensemble du site.
   ═══════════════════════════════════════════════════════════ */

/* ─── Polices locales (woff2 auto-hébergées) ─── */

/* Cormorant Garamond — fichier variable (couvre 400–700) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cinzel Decorative */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-decorative-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cinzel-decorative-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Variables typographiques ─────────────────────────────
   Toutes les valeurs de police sont ici.
   Changer une variable = changer partout sur le site.
   ─────────────────────────────────────────────────────── */
:root {

  /* --- Familles de polices --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;   /* Titres élégants */
  --font-body:    'Lato', Helvetica, Arial, sans-serif;   /* Corps de texte */
  --font-titre-chanty: "Cinzel Decorative", serif;

  /* --- Tailles de texte générales --- */
  --font-size-titre: clamp(2rem, 6vw, 6rem);
  --font-size-h1:       clamp(2rem, 6vw, 4.5rem);
  --font-size-h2:       clamp(1.5rem, 3vw, 2rem);
  --font-size-h3:       1.25rem;
  --font-size-h4:       1.75rem;
  --font-size-base:     1rem;
  --font-size-sm:       0.875rem;
  --font-size-xs:       0.75rem;

  /* --- Tailles spécifiques aux composants --- */
  --font-size-btn:          0.875rem;   /* Boutons */
  --font-size-nav:          0.8125rem;  /* Navigation header */
  --font-size-logo:         1.4rem;     /* Nom dans le footer */
  --font-size-logo-sm:      1.1rem;     /* Nom dans le header */
  --font-size-citation:     1.05rem;    /* Citation de l'autrice */
  --font-size-card-titre:   1.3rem;     /* Titre carte CTA */
  --font-size-sceau:        0.85rem;    /* Badge décoratif CTA */

  /* --- Tailles spécifiques au hero --- */
  --font-size-hero-nom:     clamp(3rem, 9vw, 7rem);       /* Nom principal hero */
  --font-size-hero-titre:   clamp(2.4rem, 6vw, 5rem);     /* Titre alternatif hero */
  --font-size-hero-sous:    1rem;                          /* Sous-titre hero */

  /* --- Tailles sections --- */
  --font-size-section-titre:  clamp(1.6rem, 2.8vw, 2.4rem);
  --font-size-cta-titre:      clamp(1.8rem, 3vw, 2.8rem);

  /* --- Graisses --- */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Hauteurs de ligne --- */
  --line-height-base:   1.7;
  --line-height-tight:  1.2;

  /* --- Espacement des lettres --- */
  --letter-spacing-wide: 0.12em;
  --letter-spacing-xl:   0.2em;

  /* --- Couleurs de texte --- */
  --color-text:         #2C1414;
  --color-text-muted:   rgba(44, 20, 20, 0.55);
  --color-text-light:   #F0E9E0;
}


/* ─── Styles de base ─────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h4, h5, h6 {
  font-family: var(--font-body);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-light);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
}

p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);

}

/* ─── Hero Accueil ────────────────────────────────── */

.hero_accueil .hero__nom{
 font-family: var(--font-titre-chanty);
 
}

.header__logo-nom{
  font-family: var(--font-titre-chanty);
  font-size: var(--font-size-logo-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-creme);
}


/* ─── Classes utilitaires ────────────────────────────────── */

.text-muted  { color: var(--color-text-muted); }
.text-light  { color: var(--color-text-light); }
.text-or     { color: var(--color-or); }
.text-rouge  { color: var(--color-rouge); }

.label-surtitre {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

.separateur-or {
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--color-or);
  margin: var(--spacing-sm) auto;
}

.separateur-or--gauche {
  margin-left: 0;
}

.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;
}

caption,
.texte-caption {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-creme);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ─── Utilitaire wrapper ─── */
.wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

/* Bouton primaire — fond rouge */
.btn--primaire {
  background-color: var(--color-rouge);
  color: var(--color-creme);
  border: 1px solid var(--color-rouge);
}

.btn--primaire:hover {
  background-color: var(--color-brun);
  border-color: var(--color-brun);
}

/* Bouton secondaire — outline rouge */
.btn--secondaire {
  background-color: transparent;
  color: var(--color-rouge);
  border: 1px solid var(--color-rouge);
}

.btn--secondaire:hover {
  background-color: var(--color-rouge);
  color: var(--color-creme);
}

/* Bouton or — fond doré */
.btn--or {
  background-color: var(--color-or);
  color: var(--color-creme);
  border: 1px solid var(--color-or);
}

.btn--or:hover {
  background-color: var(--color-brun);
  border-color: var(--color-brun);
}

/* Bouton texte — lien discret avec flèche */
.btn--texte {
  background-color: transparent;
  color: var(--color-rouge);
  border: none;
  padding: 0;
  letter-spacing: var(--letter-spacing-wide);
}

.btn--texte:hover {
  color: var(--color-brun);
}

/* Bouton clair — pour sections sombres */
.btn--clair {
  background-color: var(--color-creme);
  color: var(--color-rouge);
  border: 1px solid var(--color-creme);
}

.btn--clair:hover {
  background-color: transparent;
  color: var(--color-creme);
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-brun);
  padding: 0 var(--spacing-md);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo */
.header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}



.header__logo-titre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

/* Navigation */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header__nav-link {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-creme);
  transition: color var(--transition);
}

.header__nav-link:hover,
.header__nav-link--active {
  color: var(--color-or);
}

.header__cta {
  margin-left: var(--spacing-sm);
}

/* Menu burger mobile */
.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.header__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-creme);
  transition: transform var(--transition);
}

@media (max-width: 850px) {
  .header__burger {
    display: flex;
  }

  .header__nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background-color: var(--color-brun);
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .header__nav.is-open {
    display: flex;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .header__cta {
    margin-left: 0;
  }
}
.site-footer {
  background-color: var(--color-brun);
  color: var(--color-creme);
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
}

/* .footer__inner — centrage géré par .wrapper */

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-or-light);
}

/* Colonne logo */
.footer__logo-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__logo-nom {
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-creme);
}

.footer__logo-titre {
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

.footer__citation {
  font-style: italic;
  color: rgba(240, 233, 224, 0.7);
  line-height: 1.6;
  margin-top: var(--spacing-sm);
}

/* Navigation footer */
.footer__nav-titre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__nav-link {
  color: rgba(240, 233, 224, 0.75);
  transition: color var(--transition);
}

.footer__nav-link:hover {
  color: var(--color-or);
}

/* Réseaux sociaux */
.footer__social-titre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.footer__social-list {
  display: flex;
  gap: var(--spacing-sm);
}

.footer__social-link {
  color: rgba(240, 233, 224, 0.75);
  transition: color var(--transition);
  
}

.footer__social-link:hover {
  color: var(--color-or);
}

.footer__social-svg {
  display: block;
  opacity: 0.75;
  transition: opacity var(--transition);
}

.footer__social-link:hover .footer__social-svg {
  opacity: 1;
  transform: scale(1.15);
  
}

/* Bas de footer */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-md);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer__copy {
  color: rgba(240, 233, 224, 0.45);
}

.footer__links {
  display: flex;
  gap: var(--spacing-md);
}

.footer__link-legale {
  color: rgba(240, 233, 224, 0.45);
  transition: color var(--transition);
}

.footer__link-legale:hover {
  color: var(--color-or);
}

.footer__credit {
  width: 100%;
  text-align: center;
  color: rgba(240, 233, 224, 0.30);
  padding-top: var(--spacing-xs);
  border-top: 1px solid rgba(240, 233, 224, 0.08);
}

.footer__credit-lien {
  color: rgba(240, 233, 224, 0.45);
  transition: color var(--transition);
}

.footer__credit-lien:hover {
  color: var(--color-or);
}

@media (max-width: 768px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: center;


  }
 .footer__logo-wrap {
    align-items: center;
     }

  .footer__align{
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
  }
}
/* ═══════════════════════════════════════════════════════════
   HERO — Deux styles disponibles :
   • Style 1 (défaut) : class="hero"          — Dramatique centré
   • Style 2 (alternatif) : class="hero hero--lateral" — Cinématique latéral
   ═══════════════════════════════════════════════════════════ */

/* ─── BASE COMMUNE ─── */
.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero .wrapper {
  position: relative;
  z-index: 2;
}

/* Ornements SVG coins */
.hero__ornement {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.45;
}

.hero__ornement path {
  stroke: var(--color-or);
  stroke-width: 0.8;
  fill: none;
}

.hero__ornement--tl { top: var(--spacing-md); left: var(--spacing-md); }
.hero__ornement--tr { top: var(--spacing-md); right: var(--spacing-md); transform: scaleX(-1); }
.hero__ornement--bl { bottom: var(--spacing-md); left: var(--spacing-md); transform: scaleY(-1); }
.hero__ornement--br { bottom: var(--spacing-md); right: var(--spacing-md); transform: scale(-1); }


/* ═══════════════════════════════════════════════════════════
   STYLE 1 — DRAMATIQUE CENTRÉ (défaut)
   Overlay rouge radial, contenu centré, nom en grand
   ═══════════════════════════════════════════════════════════ */

.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(118, 17, 31, 0.70) 45%, rgba(118, 17, 31, 0.15) 100%);
  z-index: 1;
}

.hero__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  max-width: 760px;
  margin: 0 auto;
}

.hero__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-md);
}

/* Nom de l'autrice — très grand */
.hero__nom {
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-size: var(--font-size-titre);
  color: var(--color-creme);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.hero__nom-titre {
  display: block;
  
  font-weight: var(--font-weight-medium);
  color: var(--color-or);
}

/* Titre alternatif (si pas de nom) */
.hero__titre {
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-creme);
  margin-bottom: var(--spacing-sm);
}

.hero__titre-accent {
  display: block;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-rose);
}

/* Séparateur ✦ */
.hero__separateur {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
}

.hero__separateur-ligne {
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--color-or);
}

.hero__separateur-etoile {
  color: var(--color-or);
}

.hero__soustitre {
 

  color: rgba(240, 233, 224, 0.80);

  margin-bottom: var(--spacing-lg);
  max-width: 480px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   STYLE 2 — CINÉMATIQUE LATÉRAL  (class="hero hero--lateral")
   Gradient sombre sur la gauche, contenu aligné à gauche,
   l'image reste visible sur la droite.
   ═══════════════════════════════════════════════════════════ */

.hero--lateral .hero__overlay {
  background: linear-gradient(
    105deg,
    rgba(44, 20, 20, 0.96) 0%,
    rgba(44, 20, 20, 0.82) 38%,
    rgba(44, 20, 20, 0.30) 65%,
    rgba(44, 20, 20, 0.00) 100%
  );
}

.hero--lateral .hero .wrapper,
.hero--lateral.hero .wrapper {
  width: 100%;
}

.hero--lateral .hero__contenu {
  align-items: flex-start;
  text-align: left;
  max-width: 580px;
  margin: 0;
  padding: var(--spacing-xl) var(--spacing-md);
  border-left: 2px solid var(--color-or);
  padding-left: var(--spacing-lg);
}

/* Séparateur adapté au style latéral */
.hero--lateral .hero__separateur {
  justify-content: flex-start;
}

/* Étiquette au-dessus du nom */
.hero--lateral .hero__nom-titre {
  display: inline-block;
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  color: var(--color-or);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
}

/* Nom légèrement plus petit dans le style latéral */
.hero--lateral .hero__nom {
  letter-spacing: 0.06em;
  text-transform: none;
  line-height: 1.05;
  margin-bottom: var(--spacing-sm);
}

/* Phrase en italique mise en avant */
.hero--lateral .hero__soustitre {
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: rgba(240, 233, 224, 0.85);
  line-height: 1.5;
  max-width: 420px;
  margin-bottom: var(--spacing-lg);
}

/* Boutons alignés à gauche */
.hero--lateral .hero__actions {
  justify-content: flex-start;
}

/* Ligne dorée décorative en bas */
.hero--lateral::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45%;
  height: 2px;
  background: linear-gradient(to right, var(--color-or), transparent);
  z-index: 2;
  pointer-events: none;
}




/* ─── Responsive ─── */
@media (max-width: 768px) {
  .hero__ornement {
    width: 64px;
    height: 64px;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

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

  /* Style latéral : reprendre centrage sur mobile */
  .hero--lateral .hero__contenu {
    align-items: center;
    text-align: center;
    margin: 0 auto;
    border-left: none;
    border-top: 1px solid var(--color-or);
    padding-left: var(--spacing-md);
    padding-top: var(--spacing-lg);
  }

  .hero--lateral .hero__separateur {
    justify-content: center;
  }

  .hero--lateral .hero__actions {
    justify-content: center;
  }

  .hero--lateral::after {
    width: 100%;
  }
}
.presentation {
  background-color: var(--color-creme-alt);
  padding: var(--spacing-xl) var(--spacing-md);
  overflow: hidden;
  position: relative;
}

/* Ornement de fond — courbe dorée discrète */
.presentation::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid var(--color-or-light);
  transform: translate(50%, -50%);
  pointer-events: none;
}

.presentation__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

/* ─── Colonne gauche — texte ─── */
.presentation__texte {
  flex: 0 0 42%;
  max-width: 42%;
}

.presentation__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.presentation__sep {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
  margin-bottom: var(--spacing-md);
}

.presentation__titre {
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-brun);
  margin-bottom: var(--spacing-md);
}

.presentation__texte p {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
}

.presentation__citation {
  border-left: 2px solid var(--color-rose);
  padding-left: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.presentation__citation p {
  font-style: italic;
  color: var(--color-brun);
  line-height: 1.7;
  margin-bottom: 0;
}

.presentation__citation-auteur {
  display: block;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
  margin-top: var(--spacing-xs);
}

/* ─── Colonne droite — collage ─── */
.presentation__collage {
  flex: 1;
  position: relative;
  min-height: 540px;
}

.presentation__collage-inner {
  position: relative;
  width: 100%;
  height: 540px;
}

/* Photo principale — portrait */
.collage__photo--1 {
  position: absolute;
  top: 5%;
  left: 5%;
  width:55%;
  z-index: 2;

  transform: rotate(-2.5deg);

  transition: transform var(--transition-slow);
}


.collage__photo--1:hover {
  transform: rotate(-1deg) scale(1.02);
}

/* Photo secondaire — atmosphérique */
.collage__photo--2 {
  position: absolute;
 bottom: 0;
  right: 2%;
  width: 52%;
  transform: rotate(3deg);
  z-index: 1;
  transition: transform var(--transition-slow);
}


.collage__photo--2:hover {
  transform: rotate(1.5deg) scale(1.02);
}

.collage__photo--1 img,
.collage__photo--2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Étoile ornementale entre les photos */
.collage__etoile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-or);
  z-index: 3;
  opacity: 0.7;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .presentation__inner {
    flex-direction: column-reverse;
    gap: var(--spacing-lg);
  }



  .presentation__texte {
    flex: none;
    max-width: 100%;
  }

  .presentation__collage {
    width: 100%;
    min-height: 400px;
    max-width: 600px;
    
  }

  .presentation__collage-inner {
    height: 400px;
  }

  
  .collage__photo--1 {
    width: 52%;
    
      
  }

  .collage__photo--2 {
    width: 46%;
    
  }
}

@media (max-width: 480px) {
  .presentation__collage-inner {
    height: 320px;
  }

  .collage__photo--1 {
    left: 0;
    width: 56%;
  }

  .collage__photo--2 {
    right: 0;
    width: 50%;
  }
}
.univers {
  background-color: var(--color-rouge);
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
  overflow: hidden;
}

/* Ornement cercle fond — discret */
.univers::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(184, 134, 60, 0.12);
  pointer-events: none;
}

.univers__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

/* ─── Colonne gauche — texte ─── */
.univers__texte {
  flex: 0 0 32%;
  max-width: 32%;
}

.univers__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.univers__sep {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.univers__sep-ligne {
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--color-or);
}

.univers__sep-etoile {
  color: var(--color-or);
}

.univers__titre {
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-creme);
  margin-bottom: var(--spacing-md);
}

.univers__desc {
  color: rgba(240, 233, 224, 0.65);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
}

/* ─── Colonne droite — livres ─── */
.univers__livres {
  flex: 1;
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  justify-content: center;
}

.livre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  text-decoration: none;
}

.livre__couverture {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.5);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.livre__couverture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

/* Effet survol — légère élévation */
.livre:hover .livre__couverture {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 12px 20px 48px rgba(0, 0, 0, 0.65);
}

.livre:hover .livre__couverture img {
  transform: scale(1.04);
}

/* Tranche du livre */
.livre__couverture::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.08)
  );
  z-index: 1;
}

.livre__infos {
  text-align: center;
  padding-top: var(--spacing-xs);
}

.livre__titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 4px;
}

.livre__genre {
  font-weight: var(--font-weight-regular);
  color: var(--color-or);
}

/* Décalage vertical alterné pour l'effet dynamique */
.livre:nth-child(2) .livre__couverture {
  transform: translateY(-16px);
}

.livre:nth-child(4) .livre__couverture {
  transform: translateY(-8px);
}

.livre:nth-child(2):hover .livre__couverture {
  transform: translateY(-24px) scale(1.02);
}

.livre:nth-child(4):hover .livre__couverture {
  transform: translateY(-16px) scale(1.02);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .univers__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
  }

  .univers__texte {
    flex: none;
    max-width: 100%;
  }

  .univers__livres {
    width: 100%;
    gap: var(--spacing-sm);
  }

  .livre:nth-child(2) .livre__couverture,
  .livre:nth-child(4) .livre__couverture {
    transform: none;
  }
}

@media (max-width: 600px) {
  .univers__livres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  .livre {
    flex: none;
  }
}
/* ════════════════════════════════════════
   INFOLETTRE — même style que le CTA
   ════════════════════════════════════════ */

.infolettre {
  background-color: var(--color-rouge);
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
  overflow: visible;
}

/* Image de fond subtile */
.infolettre__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.infolettre__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
  display: block;
}

/* Rose décorative */
.infolettre__rose {
  position: absolute;
  top: -145px;
  right: 6%;
  width: 420px;
  z-index: 2;
  pointer-events: none;
}

/* Ornement cercle */
.infolettre::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(184, 134, 60, 0.18);
  pointer-events: none;
  z-index: 1;
}

.infolettre__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-xl);
  position: relative;
  z-index: 2;
}

/* ─── Colonne gauche — texte ─── */
.infolettre__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.infolettre__sep {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.infolettre__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.infolettre__sep-etoile {
  color: var(--color-or);
}

.infolettre__titre {
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-creme);
  margin-bottom: var(--spacing-sm);
}

.infolettre__titre span {
  display: block;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: rgba(240, 233, 224, 0.80);
}

.infolettre__desc {
  color: rgba(240, 233, 224, 0.72);
  line-height: var(--line-height-base);
}

/* ─── Colonne droite — carte formulaire ─── */
.infolettre__carte {
  background-color: var(--color-brun);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
}

.infolettre__carte-surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

.infolettre__carte-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  line-height: 1.2;
}

.infolettre__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.infolettre__input {
  width: 100%;
  padding: 0.85rem var(--spacing-sm);
  background-color: rgba(240, 233, 224, 0.08);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  color: var(--color-creme);
  outline: none;
  transition: border-color var(--transition), background-color var(--transition);
  text-align: center;
}

.infolettre__input::placeholder {
  color: rgba(240, 233, 224, 0.40);
}

.infolettre__input:focus {
  border-color: var(--color-or);
  background-color: rgba(240, 233, 224, 0.12);
}

.infolettre__btn {
  width: 100%;
  padding: 0.9rem var(--spacing-sm);
  background-color: var(--color-or);
  color: var(--color-brun);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.infolettre__btn:hover {
  background-color: var(--color-creme);
  color: var(--color-brun);
}

.infolettre__mention {
  color: rgba(240, 233, 224, 0.38);
  line-height: 1.5;
}

/* ─── Confirmation envoi ─── */
@keyframes infolettre-apparition {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.infolettre__succes {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  animation: infolettre-apparition 0.5s ease both;
}

.infolettre__succes-icone {
  font-size: 2rem;
  color: var(--color-or);
  animation: infolettre-apparition 0.4s ease both;
}

.infolettre__succes-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  line-height: 1.2;
}

.infolettre__succes-texte {
  color: rgba(240, 233, 224, 0.72);
  line-height: var(--line-height-base);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .infolettre__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .infolettre__rose {
    width: 260px;
    bottom: -60px;
    right: -20px;
  }
}
/* ════════════════════════════════════════
   HERO — Split : image gauche / texte droite
   ════════════════════════════════════════ */

.romans-hero {
  position: relative;
  min-height: calc(100vh - 72px);
  margin-top: 72px;
  display: flex;
  align-items: center;
  background-color: var(--color-creme);
  overflow: hidden;
}

/* Image qui saigne jusqu'au bord gauche */
.romans-hero__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 46%;
  height: 100%;
  overflow: hidden;
}

.romans-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fondu de l'image vers le fond crème */
.romans-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--color-creme) 100%);
}

/* Wrapper pousse le texte à droite */
.romans-hero .wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.romans-hero__contenu {
  width: 52%;
  padding: var(--spacing-xl) 0 var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.romans-hero__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

.romans-hero__sep {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.romans-hero__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.romans-hero__sep-etoile {
  color: var(--color-or);
}

.romans-hero__titre {
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-brun);
}

.romans-hero__titre em {
  display: block;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-rouge);
}

.romans-hero__desc {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: 400px;
}

.romans-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding-top: var(--spacing-xs);
}

@media (max-width: 900px) {
  .romans-hero {
    flex-direction: column;
    min-height: auto;
  }

  .romans-hero__image {
    position: relative;
    width: 100%;
    height: 340px;
  }

  .romans-hero__image::after {
    background: linear-gradient(to bottom, transparent 55%, var(--color-creme) 100%);
  }

  .romans-hero .wrapper {
    justify-content: flex-start;
  }

  .romans-hero__contenu {
    width: 100%;
    padding: var(--spacing-md);
  }
}


/* ════════════════════════════════════════
   COLLECTION — Vedette + Grille
   ════════════════════════════════════════ */

.collection {
  background-color: var(--color-creme-alt);
  padding: var(--spacing-xl) var(--spacing-md);
}

/* ─── En-tête de section ─── */
.collection__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--spacing-xl);
}

.collection__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.collection__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.collection__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.collection__sep-etoile {
  color: var(--color-or);
}

.collection__titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
}

/* ─── Livre vedette ─── */
.roman-vedette {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
  overflow: visible;
}

/* Étiquette "Tome I" coin */


.roman-vedette__couverture {
  flex: 0 0 270px;
  max-width: 270px;
  perspective: 900px;
  perspective-origin: left center;
  display: flex;
  align-items: flex-start;
}

/* ─── Livre 3D ─── */
.livre3d {
  position: relative;
  width: 220px;
  height: 330px;
  transform-style: preserve-3d;
  transform: rotateY(-40deg);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.roman-vedette:hover .livre3d {
  transform: rotateY(-10deg);
}

.livre3d__avant {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px 0 0 2px;
  box-shadow: -6px 14px 40px rgba(0, 0, 0, 0.55);
}

.livre3d__avant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Jaspage — face droite du livre */
.livre3d__jaspage {
  position: absolute;
  top: 0;
  left: 100%;
  width: 38px;
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.livre3d__jaspage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.roman-vedette__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.roman-vedette__genre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-rouge);
}

.roman-vedette__titre {
  font-weight: var(--font-weight-bold);
  color: var(--color-brun);
  line-height: 1.15;
}

.roman-vedette__sep {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.roman-vedette__resume {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: 520px;
}

.roman-vedette__plateformes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.roman-vedette__plateformes-label {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
}

.roman-vedette__liens {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.roman-vedette__lien {
  font-weight: var(--font-weight-medium);
  color: var(--color-rouge);
  border-bottom: 1px solid var(--color-or-light);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.roman-vedette__lien:hover {
  color: var(--color-brun);
  border-color: var(--color-rouge);
}

.roman-vedette__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-xs);
}

/* ─── Grille des romans ─── */
.romans-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.roman-carte {
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  transform: scale(1);
}

.roman-carte:hover {
  box-shadow: var(--shadow-soft);
  transform: scale(1.005);
}

.roman-carte__couverture {
  position: relative;
  overflow: hidden;
}

.roman-carte__couverture img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: var(--transition-slow);
}

.roman-carte:hover .roman-carte__couverture img {
  transform: scale(1.025);
}

.roman-carte__tome {
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  background-color: var(--color-rouge);
  color: var(--color-creme);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
}

.roman-carte__corps {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.roman-carte__genre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
}

.roman-carte__titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
}

.roman-carte__extrait {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.roman-carte__actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.roman-carte__actions .btn {
  flex: 1;
  justify-content: center;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .roman-carte__actions{
    flex-direction: column;
    gap: var(--spacing-md);
  }
}


@media (max-width: 1024px) {
  .roman-vedette {
    flex-direction: column;
  }

  .roman-vedette__couverture {
    flex: none;
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .romans-grille {
    grid-template-columns: 1fr;
  }

  .roman-vedette__couverture {
    max-width: 160px;
  }
}


/* ════════════════════════════════════════
   OVERLAY — Fiche livre (extrait)
   ════════════════════════════════════════ */

.livre-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.livre-overlay[hidden] {
  display: none;
}

.livre-overlay__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(44, 20, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.livre-overlay__fiche {
  position: relative;
  z-index: 1;
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 20px 60px rgba(44, 20, 20, 0.35);
  max-width: 60vw;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);

  animation: overlay-entree 0.28s ease-out both;
}

@keyframes overlay-entree {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Bouton fermer */
.livre-overlay__fermer {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-or-light);
  border-radius: 50%;
  color: var(--color-brun);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  line-height: 1;
}

.livre-overlay__fermer:hover,
.livre-overlay__fermer:focus-visible {
  background-color: var(--color-rouge);
  color: var(--color-creme);
  border-color: var(--color-rouge);
  outline: none;
}

/* Couverture */
.livre-overlay__couverture {
  aspect-ratio: 2 / 3;
  perspective: 900px;
  perspective-origin: right center;
  display: flex;
  align-items: stretch;
}

/* 3D dans l'overlay */
.livre3d--overlay {
  width: 100%;
  height: 100%;
  transform: rotateY(-20deg);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.livre-overlay__fiche:hover .livre3d--overlay {
  transform: rotateY(-10deg);
}

.livre3d--overlay .livre3d__avant {
  border-radius: 2px 0 0 2px;
  box-shadow: -6px 14px 40px rgba(0, 0, 0, 0.55);
}

.livre3d--overlay .livre3d__jaspage {
  width: 34px;
}

.livre-overlay__couverture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Infos */
.livre-overlay__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

.livre-overlay__serie {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
}

.livre-overlay__genre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-rouge);
}

.livre-overlay__titre {
  font-weight: var(--font-weight-bold);
  color: var(--color-brun);
  line-height: 1.15;
}

.livre-overlay__sep {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
  margin: var(--spacing-xs) 0;
}

.livre-overlay__extrait-label {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
}

.livre-overlay__extrait {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  font-style: italic;
  border-left: 2px solid var(--color-or-light);
  padding-left: var(--spacing-sm);
  margin: 0;
}

.livre-overlay__achat {
  margin-top: var(--spacing-sm);
  align-self: flex-start;
}

/* ─── Responsive overlay ─── */
@media (max-width: 640px) {
  .livre-overlay {
    padding: var(--spacing-sm);
    align-items: flex-end;
  }

  .livre-overlay__fiche {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    max-height: 85vh;
    border-radius: var(--border-radius);
  }

  .livre-overlay__couverture {
    flex: none;
    max-width: 120px;
    align-self: center;
  }
}
.parcours {
  background-color: var(--color-creme);
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
  overflow: hidden;
}

/* ─── Intro de section ─── */
.parcours__intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
}

.parcours__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.parcours__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.parcours__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.parcours__sep-etoile {
  color: var(--color-or);
}

.parcours__titre-intro {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

.parcours__desc-intro {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* ─── Blocs alternés ─── */
.parcours__blocs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.parcours__bloc {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

/* Bloc inversé — image gauche, texte droite */
.parcours__bloc--inverse {
  flex-direction: row-reverse;
}

/* ─── Colonne image ─── */
.parcours__image {
  flex: 0 0 44%;
  max-width: 44%;
  position: relative;
}

.parcours__image-cadre {
  position: relative;
  overflow: visible;
  
}

.parcours__image-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.parcours__image-cadre:hover img {
  transform: scale(1.03) rotate(2deg);

}

/* Étiquette numéro de bloc */
.parcours__numero {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  width: 48px;
  height: 48px;
  background-color: var(--color-rouge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-creme);
  z-index: 1;
}

/* Ligne décorative dorée sur le bord */
.parcours__bloc:not(.parcours__bloc--inverse) .parcours__image-cadre::before {
  content: '';
  position: absolute;
  top: var(--spacing-sm);
  right: calc(-1 * var(--spacing-sm));
  width: 1px;
  height: 60%;
  background-color: var(--color-or);
  z-index: 1;
}

.parcours__bloc--inverse .parcours__image-cadre::before {
  content: '';
  position: absolute;
  top: var(--spacing-sm);
  left: calc(-1 * var(--spacing-sm));
  width: 1px;
  height: 60%;
  background-color: var(--color-or);
  z-index: 1;
}

/* ─── Colonne texte ─── */
.parcours__texte {
  flex: 1;
}

.parcours__texte-label {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-xs);
}

.parcours__texte-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

.parcours__texte-sep {
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-rouge);
  margin-bottom: var(--spacing-md);
}

.parcours__texte p {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
}

.parcours__texte p:last-of-type {
  margin-bottom: var(--spacing-md);
}

.parcours__citation {
  border-left: 2px solid var(--color-rose);
  padding-left: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.parcours__citation p {
  font-style: italic;
  color: var(--color-brun);
  margin-bottom: 0 !important;
}

/* ─── Séparateur entre blocs ─── */
.parcours__diviseur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  opacity: 0.35;
}

.parcours__diviseur-ligne {
  flex: 1;
  height: 1px;
  background-color: var(--color-or);
  max-width: 200px;
}

.parcours__diviseur-etoile {
  color: var(--color-or);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .parcours__bloc,
  .parcours__bloc--inverse {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .parcours__image {
    flex: none;
    display: flex;
    align-items: center;
    max-width: 100%;
    width: 100%;
  }

  .parcours__image-cadre {
    max-width: 560px;
  }

  .parcours__bloc:not(.parcours__bloc--inverse) .parcours__image-cadre::before,
  .parcours__bloc--inverse .parcours__image-cadre::before {
    display: none;
  }
}
/* ─── Styles spécifiques à la page À propos ─── */

/* ─── Fil d'or décoratif — commun ─── */
.fil-or {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 18%;
  height: 100%;
}

.fil-or img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

/* ─── Hero ─── */
/* Le fil entre par le haut-gauche et sort par le bas-gauche */
.hero .fil-or {
  z-index: 2;
  opacity: 0.55;
}

.hero .wrapper {
  z-index: 3;
}

/* ─── Parcours ─── */
/* Le fil entre par le haut-gauche (raccord avec hero) et s'arrête
   aux 3/4 de la section — à hauteur du bloc Les romans */
.parcours .fil-or {
  z-index: 0;
  opacity: 0.35;
  height: 78%;  /* s'arrête avant la fin de la section */
}

.parcours .wrapper {
  position: relative;
  z-index: 1;
}
/* ════════════════════════════════════════
   ÉVÉNEMENT VEDETTE — Split détails gauche / photo droite
   ════════════════════════════════════════ */

.evenement-vedette {
  background-color: var(--color-creme);
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
  overflow: hidden;
}

.evenement-vedette::before {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid var(--color-or-light);
  pointer-events: none;
}

.evenement-vedette__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

/* ─── Colonne gauche — détails ─── */
.evenement-vedette__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.evenement-vedette__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
}

.evenement-vedette__sep {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.evenement-vedette__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.evenement-vedette__sep-etoile {
  color: var(--color-or);
}

/* Badge date */
.evenement-vedette__date {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.evenement-vedette__date-bloc {
  background-color: var(--color-rouge);
  color: var(--color-creme);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  text-align: center;
  min-width: 80px;
}

.evenement-vedette__date-jour {
  font-weight: var(--font-weight-bold);
  line-height: 1;
  display: block;
}

.evenement-vedette__date-mois {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

.evenement-vedette__date-annee {
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.evenement-vedette__titre {
  font-weight: var(--font-weight-bold);
  color: var(--color-brun);
  line-height: 1.15;
}

.evenement-vedette__lieu {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-muted);
}

.evenement-vedette__lieu::before {
  content: '📍';
}

.evenement-vedette__desc {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: 460px;
}

.evenement-vedette__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-xs);
}

/* ─── Colonne droite — photo ─── */
.evenement-vedette__photo {
  flex: 0 0 44%;
  max-width: 44%;
  position: relative;
}

.evenement-vedette__photo-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius-sm);
}

.evenement-vedette__photo-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.evenement-vedette__photo-cadre:hover img {
  transform: scale(1.03);
}

/* Étiquette "Prochain événement" sur la photo */
.evenement-vedette__badge {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  background-color: var(--color-rouge);
  color: var(--color-creme);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--border-radius-sm);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .evenement-vedette__inner {
    flex-direction: column-reverse;
    gap: var(--spacing-lg);
  }

  .evenement-vedette__photo {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .evenement-vedette__photo-cadre {
    aspect-ratio: 16 / 9;
  }
}


/* ════════════════════════════════════════
   GRILLE D'ÉVÉNEMENTS
   ════════════════════════════════════════ */

.evenements {
  background-color: var(--color-brun);
  padding: var(--spacing-xl) var(--spacing-md);
}

/* ─── En-tête ─── */
.evenements__header {
  text-align: center;
  max-width: 520px;
  margin: 0 auto var(--spacing-xl);
}

.evenements__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.evenements__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.evenements__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.evenements__sep-etoile {
  color: var(--color-or);
}

.evenements__titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  line-height: 1.2;
}

/* ─── Grille de cartes ─── */
.evenements__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.evenement-carte {
  background-color: rgba(240, 233, 224, 0.05);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition);
}

.evenement-carte:hover {
  background-color: rgba(240, 233, 224, 0.09);
}

/* En-tête de la carte — date colorée */
.evenement-carte__entete {
  background-color: var(--color-rouge);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evenement-carte__titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  line-height: 1.25;
}

.evenement-carte__date {
  font-weight: var(--font-weight-bold);
  color: var(--color-creme);
  line-height: 1;
}

.evenement-carte__date span {
  display: block;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-top: 3px;
  color: rgba(240, 233, 224, 0.75);
}

.evenement-carte__type {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(240, 233, 224, 0.65);
  border: 1px solid rgba(240, 233, 224, 0.25);
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
}

/* Corps de la carte */
.evenement-carte__corps {
  flex: 1;
  overflow: hidden;
}

.evenement-carte__affiche {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.evenement-carte:hover .evenement-carte__affiche {
  transform: scale(1.03);
}

.evenement-carte__lien {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-or);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-xs);
  transition: color var(--transition);
}

.evenement-carte__lien:hover {
  color: var(--color-creme);
}

/* Bouton "Voir tous" en bas de grille */
.evenements__footer {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .evenements__grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .evenements__grille {
    grid-template-columns: 1fr;
  }
}
/* ════════════════════════════════════════
   BANDEAU PAGE — titre sans hero
   ════════════════════════════════════════ */

.contact-bandeau {
  background-color: var(--color-brun);
  padding: var(--spacing-lg) var(--spacing-md);
  margin-top: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-bandeau::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background-color: var(--color-or);
}

.contact-bandeau__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-xs);
}

.contact-bandeau__titre {
  font-weight: var(--font-weight-bold);
  color: var(--color-creme);
  line-height: 1.15;
}

.contact-bandeau__titre em {
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: var(--color-rose);
}

.contact-bandeau__sous {
  color: rgba(240, 233, 224, 0.65);
  margin-top: var(--spacing-xs);
}

/* ════════════════════════════════════════
   SECTION CONTACT — Split formulaire / réseaux
   ════════════════════════════════════════ */

.contact {
  background-color: var(--color-creme-alt);
  padding: var(--spacing-xl) var(--spacing-md);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--spacing-xl);
  align-items: start;
}

/* ─── Colonne gauche — formulaire ─── */
.contact__formulaire {
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
}

.contact__form-surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-xs);
}

.contact__form-sep {
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-or);
  margin-bottom: var(--spacing-md);
}

.contact__form-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

/* Champs du formulaire */
.contact__champs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact__ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.contact__groupe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact__label {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__input,
.contact__select,
.contact__textarea {
  width: 100%;
  padding: 0.85rem var(--spacing-sm);
  background-color: var(--color-creme-alt);
  border: 1px solid rgba(184, 134, 60, 0.25);
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition);
  outline: none;
  appearance: none;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: rgba(44, 20, 20, 0.35);
}

.contact__input:focus,
.contact__select:focus,
.contact__textarea:focus {
  border-color: var(--color-or);
  background-color: #fff;
}

.contact__textarea {
  min-height: 160px;
  resize: vertical;
  line-height: var(--line-height-base);
}

.contact__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8863C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ─── Infolettre opt-in ─── */
.contact__infolettre {
  margin-top: var(--spacing-xs);
}

.contact__infolettre-sep {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-or-light);
  margin-bottom: var(--spacing-sm);
}

.contact__infolettre-corps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background-color: var(--color-creme-alt);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.contact__infolettre-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  margin-bottom: 3px;
}

.contact__infolettre-desc {
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Toggle switch */
.contact__infolettre-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.contact__infolettre-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact__infolettre-slider {
  display: block;
  width: 48px;
  height: 26px;
  background-color: var(--color-or-light);
  border: 1px solid rgba(184, 134, 60, 0.4);
  border-radius: 13px;
  transition: background-color var(--transition), border-color var(--transition);
  position: relative;
}

.contact__infolettre-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--color-or);
  border-radius: 50%;
  transition: transform var(--transition);
}

.contact__infolettre-checkbox:checked + .contact__infolettre-slider {
  background-color: var(--color-rouge);
  border-color: var(--color-rouge);
}

.contact__infolettre-checkbox:checked + .contact__infolettre-slider::after {
  background-color: var(--color-creme);
  transform: translateX(22px);
}

.contact__infolettre-toggle:focus-within .contact__infolettre-slider {
  outline: 2px solid var(--color-or);
  outline-offset: 2px;
}

.contact__submit {
  width: 100%;
  padding: 0.9rem var(--spacing-sm);
  background-color: var(--color-rouge);
  color: var(--color-creme);
  border: none;
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition);
  margin-top: var(--spacing-xs);
}

.contact__submit:hover {
  background-color: var(--color-brun);
}

.contact__mention {
  color: rgba(44, 20, 20, 0.38);
  margin-top: var(--spacing-sm);
  line-height: 1.5;
}

/* ─── Colonne droite — réseaux & infos ─── */
.contact__infos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: sticky;
  top: calc(72px + var(--spacing-lg));
}

.contact__infos-surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-xs);
}

.contact__infos-sep {
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.contact__infos-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
}

.contact__infos-desc {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* Cartes réseaux sociaux */
.contact__reseau {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

.contact__reseau:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.contact__reseau--instagram:hover {
  border-color: #C13584;
}

.contact__reseau--facebook:hover {
  border-color: #1877F2;
}

.contact__reseau--tiktok:hover {
  border-color: #ff0050;
}

.contact__reseau-icone {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--font-weight-bold);
}

.contact__reseau--instagram .contact__reseau-icone {
  background: transparent;
}

.contact__reseau--facebook .contact__reseau-icone {
  background-color: #1877F2;
  color: #fff;
}

.contact__reseau-texte {
  flex: 1;
}

.contact__reseau-nom {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brun);
  display: block;
  margin-bottom: 2px;
}

.contact__reseau-handle {
  color: var(--color-text-muted);
}

.contact__reseau-fleche {
  color: var(--color-or);
}

/* ─── Portrait autrice ─── */
.contact__autrice {
  background-color: var(--color-creme);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.contact__autrice-photo {
  overflow: hidden;
}

.contact__autrice-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
 
  display: block;
  transition: transform var(--transition-slow);
}

.contact__autrice:hover .contact__autrice-photo img {
  transform: scale(1.04);
}

.contact__autrice-legende {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border-top: 1px solid var(--color-or-light);
}

.contact__autrice-etoile {
  color: var(--color-or);
}

.contact__autrice-citation {
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.contact__autrice-nom {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-or);
}

/* Note de réponse */
.contact__note {
  background-color: var(--color-creme);
  border-left: 2px solid var(--color-or);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.contact__note p {
  font-style: italic;
  color: var(--color-brun);
  line-height: 1.6;
}

.contact__note span {
  display: block;
  color: var(--color-or);
  letter-spacing: var(--letter-spacing-wide);
  margin-top: 4px;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .contact__infos {
    position: static;
  }

  .contact__ligne {
    grid-template-columns: 1fr;
  }
}
.cta {
  background-color: var(--color-rouge);
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
  overflow: visible;
}

/* Rose décorative débordante */
.cta__rose {
  position: absolute;
  top: -145px;
  right: 6%;
  width: 420px;
  z-index: 2;
  pointer-events: none;

}

/* Image de fond subtile */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
  display: block;
}

/* Ornements cercles fond */
/*.cta::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid rgba(184, 134, 60, 0.18);
  pointer-events: none;
  z-index: 1;
}*/

.cta::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(184, 134, 60, 0.18);
  pointer-events: none;
  z-index: 2;
}

.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--spacing-xl);
  position: relative;
  z-index: 2;
}

/* ─── Colonne gauche — texte ─── */
.cta__surtitre {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-or);
  margin-bottom: var(--spacing-sm);
}

.cta__sep {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.cta__sep-ligne {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-or);
}

.cta__sep-etoile {
  color: var(--color-or);
}

.cta__titre {
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-creme);
  margin-bottom: var(--spacing-sm);
}

.cta__titre span {
  display: block;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  color: rgba(240, 233, 224, 0.80);
}

.cta__desc {
  color: rgba(240, 233, 224, 0.72);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
}

/* ─── Colonne droite — carte livre ─── */
.cta__carte {
  background-color: var(--color-brun);
  border: 1px solid var(--color-or-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
  position: relative;
}



/* ─── Visuel livres — main de cartes ─── */
.cta__livre {
  position: relative;
  height: 200px;
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

.cta__livre a {
  position: absolute;
  width: 125px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  bottom: 0;
  left: calc(50% - 52px);
  box-shadow: 4px 10px 28px rgba(0, 0, 0, 0.60);
  transform-origin: bottom center;
  transition: transform var(--transition-slow), z-index 0s;
}

.cta__livre a:nth-child(1) {
  transform: rotate(-12deg) translateX(-80px);
  z-index: 1;
}
.cta__livre a:nth-child(2) {
  transform: rotate(-6deg) translateX(-25px);
  z-index: 2;
}
.cta__livre a:nth-child(3) {
  transform: rotate(6deg) translateX(25px);
  z-index: 3;
}
.cta__livre a:nth-child(4) {
  transform: rotate(12deg) translateX(80px);
  z-index: 4;
}

.cta__livre a:hover {
  transform: rotate(0deg) translateX(var(--tx, 0px)) translateY(-24px) scale(1.05);
  z-index: 10;
}

.cta__livre a:nth-child(1):hover { --tx: -58px; }
.cta__livre a:nth-child(2):hover { --tx: -20px; }
.cta__livre a:nth-child(3):hover { --tx:  20px; }
.cta__livre a:nth-child(4):hover { --tx:  58px; }

.cta__carte-titre {
  font-weight: var(--font-weight-semibold);
  color: var(--color-creme);
  line-height: 1.2;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .cta__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .cta__rose {
    width: 260px;
    bottom: -60px;
    right: -20px;
  }
}


/* ═══════════════════════════════════════════════════════════
   CONTACT FORM 7 — Intégration BEM
   ═══════════════════════════════════════════════════════════ */

/* ─── Conteneur CF7 : neutre ─── */
.infolettre__carte .wpcf7,
.contact__formulaire .wpcf7 {
  margin: 0;
  padding: 0;
}

.infolettre__carte .wpcf7-form,
.contact__formulaire .wpcf7-form {
  margin: 0;
}

/* ─── Spans de wrapping → block complet dans les groupes ─── */
.infolettre__form .wpcf7-form-control-wrap,
.contact__groupe .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ─── Champs invalides ─── */
.contact__input.wpcf7-not-valid,
.contact__textarea.wpcf7-not-valid,
.contact__select.wpcf7-not-valid,
.infolettre__input.wpcf7-not-valid {
  border-color: var(--color-rouge);
}

/* ─── Message d'erreur inline ─── */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-rouge);
  letter-spacing: 0.01em;
}

.infolettre__carte .wpcf7-not-valid-tip {
  color: #f4a0a9;
}

/* ─── Message de réponse global ─── */
.wpcf7-response-output {
  margin-top: var(--spacing-sm);
  padding: 0.75rem var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.contact__formulaire .wpcf7-form.sent .wpcf7-response-output {
  background: rgba(184, 134, 60, 0.08);
  border-color: var(--color-or);
  color: var(--color-or);
}

.contact__formulaire .wpcf7-form.invalid .wpcf7-response-output,
.contact__formulaire .wpcf7-form.failed .wpcf7-response-output,
.contact__formulaire .wpcf7-form.spam .wpcf7-response-output {
  background: rgba(118, 17, 31, 0.06);
  border-color: var(--color-rouge);
  color: var(--color-rouge);
}

.infolettre__carte .wpcf7-response-output {
  color: var(--color-creme);
  border-color: rgba(240, 233, 224, 0.25);
}

.infolettre__carte .wpcf7-form.sent .wpcf7-response-output {
  background: rgba(184, 134, 60, 0.15);
  border-color: var(--color-or);
  color: var(--color-or);
}

.infolettre__carte .wpcf7-form.invalid .wpcf7-response-output,
.infolettre__carte .wpcf7-form.failed .wpcf7-response-output {
  background: rgba(118, 17, 31, 0.25);
  border-color: #f4a0a9;
  color: #f4a0a9;
}

/* ─── Toggle CF7 (acceptance) dans le formulaire contact ─── */

/* Le wpcf7-form-control-wrap du toggle s'aligne dans le flex parent */
.contact__infolettre-corps > .wpcf7-form-control-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Neutraliser les spans intermédiaires de CF7 */
.contact__infolettre-corps .wpcf7-acceptance,
.contact__infolettre-corps .wpcf7-list-item {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Le label CF7 devient le widget visuel du toggle */
.contact__infolettre-corps .wpcf7-list-item label {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  background-color: var(--color-or-light);
  border: 1px solid rgba(184, 134, 60, 0.4);
  border-radius: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition), border-color var(--transition);
}

/* La checkbox native est masquée comme dans le design original */
.contact__infolettre-corps .wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Le texte CF7 est masqué (le texte est dans le HTML environnant) */
.contact__infolettre-corps .wpcf7-list-item-label {
  display: none;
}

/* Curseur / thumb du toggle via ::after sur le label */
.contact__infolettre-corps .wpcf7-list-item label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--color-or);
  border-radius: 50%;
  transition: transform var(--transition);
}

/* État coché — track */
.contact__infolettre-corps .wpcf7-list-item label:has(input:checked) {
  background-color: var(--color-rouge);
  border-color: var(--color-rouge);
}

/* État coché — thumb */
.contact__infolettre-corps .wpcf7-list-item label:has(input:checked)::after {
  background-color: var(--color-creme);
  transform: translateX(22px);
}

/* Focus visible */
.contact__infolettre-corps .wpcf7-list-item label:has(input:focus-visible) {
  outline: 2px solid var(--color-or);
  outline-offset: 2px;
}

/* ─── Submit CF7 = input[type=submit] → mêmes styles que button ─── */
input.infolettre__btn,
input.contact__submit {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
}