/* =========================================================
   WANANI EVENTS — Design system
   Charte : Ivory Silk / Sand / Light Brown / Red Velvet / Deep Burgundy
   ========================================================= */

:root {
  /* Palette (charte graphique) */
  --ivory: #faf6ef;
  --ivory-soft: #f3ecdf;
  --sand: #c9bca6;
  --sand-light: #ddd3c2;
  --light-brown: #786655;
  --red-velvet: #4e0c12;
  --deep-burgundy: #2f0506;
  --blush: #e9d9d4;

  /* Rôles */
  --bg: var(--ivory);
  --bg-alt: var(--ivory-soft);
  --ink: #241014;
  --ink-soft: #5c4a44;
  --line: rgba(120, 102, 85, 0.22);
  --accent: var(--red-velvet);
  --accent-dark: var(--deep-burgundy);

  /* Typo */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 8px 24px rgba(47, 5, 6, 0.08);
  --shadow-md: 0 18px 50px rgba(47, 5, 6, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 82px;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* --------------------------- Typography --------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; color: var(--deep-burgundy); }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: 0.3px; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
p { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--light-brown);
  display: inline-block;
  margin-bottom: 1.1rem;
}
.eyebrow--light { color: var(--sand); }
.lead { font-size: 1.12rem; color: var(--ink-soft); }
.text-center { text-align: center; }

/* ---------------------------- Layout ----------------------------- */
.container { width: min(var(--container), 92%); margin-inline: auto; }
.container--narrow { width: min(820px, 92%); margin-inline: auto; }
/* Fond opaque explicite : le hero est en position:fixed derrière la page
   (z-index négatif), or le fond du body est peint plus bas encore. Sans ce
   fond, la photo du hero resterait visible à travers les sections claires. */
.section { padding: clamp(2.6rem, 5.5vw, 4.6rem) 0; background: var(--bg); }
.section--tight { padding: clamp(2rem, 4vw, 3.2rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--deep-burgundy); color: var(--ivory); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ivory); }
.section--dark p { color: rgba(250, 246, 239, 0.78); }

/* ---------------------------- Buttons ---------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 2em;
  font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--red-velvet); outline-offset: 3px; }
.btn--primary { background: var(--red-velvet); color: var(--ivory); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--deep-burgundy); box-shadow: var(--shadow-md); }
.btn--outline { border-color: currentColor; color: var(--deep-burgundy); }
.btn--outline:hover { background: var(--deep-burgundy); color: var(--ivory); border-color: var(--deep-burgundy); }
.btn--light { border: 1px solid rgba(250, 246, 239, 0.6); color: var(--ivory); }
.btn--light:hover { background: var(--ivory); color: var(--deep-burgundy); border-color: var(--ivory); }
.btn--ghost { color: var(--red-velvet); padding-inline: 0; letter-spacing: 0.14em; }
.btn--ghost::after { content: "→"; transition: transform 0.3s var(--ease); }
.btn--ghost:hover { transform: none; }
.btn--ghost:hover::after { transform: translateX(5px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------- Header ----------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(47, 5, 6, 0.0);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease);
}
.site-header__inner { width: min(var(--container), 92%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
/* transparent-over-hero state */
.site-header.over-hero.is-transparent { height: 120px; }
.site-header.is-transparent { background: linear-gradient(to bottom, rgba(47,5,6,0.55), rgba(47,5,6,0)); }
.site-header.is-transparent .nav__link,
.site-header.is-transparent .brand__name,
.site-header.is-transparent .brand__tag,
.site-header.is-transparent .nav__social a,
.site-header.is-transparent .nav-toggle span { color: var(--ivory); }
.site-header.is-transparent .nav-toggle span { background: var(--ivory); }
/* scrolled / solid state */
.site-header.is-solid { background: var(--deep-burgundy); box-shadow: 0 6px 30px rgba(47,5,6,0.25); }
.site-header.is-solid .nav__link,
.site-header.is-solid .brand__name,
.site-header.is-solid .brand__tag,
.site-header.is-solid .nav__social a { color: var(--ivory); }
.site-header.is-solid .nav-toggle span { background: var(--ivory); }

/* flex-shrink: 0 — .brand est un élément flexible de .site-header__inner.
   Si le menu est trop large, le navigateur compense en rétrécissant le logo,
   qui tombait littéralement à 0 px de large. Le logo ne se comprime jamais. */
.brand { display: flex; flex-direction: column; line-height: 1; flex: 0 0 auto; }
/* Logo conservé au format carré d'origine, simplement agrandi.
   Les hauteurs restent sous celle du bandeau qui les contient pour garder
   une marge visuelle en haut et en bas. Le header n'a pas d'overflow:hidden :
   un logo plus haut que le bandeau déborderait sur le contenu de la page
   au lieu d'être rogné. */
.brand__logo {
  height: 76px; width: auto;
  display: block; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  transition: height 0.4s var(--ease);
}
/* Logo mis en valeur tout en haut de la page d'accueil (header transparent, 120 px) */
.site-header.over-hero.is-transparent .brand__logo { height: 114px; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.18em; color: var(--ivory); font-weight: 500; }
.brand__tag { font-size: 0.55rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sand); margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav__list { display: flex; gap: 2rem; align-items: center; }
.nav__link {
  position: relative; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); font-weight: 400; padding: 4px 0;
}
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width 0.35s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link.is-current::after { width: 100%; }
/* Quand on entre dans une section ancrée, c'est elle qui porte le trait :
   le lien de la page courante conserve son aria-current (sémantique) mais
   rend le soulignement. Le survol reste prioritaire. */
.nav__list.has-section-current .nav__link[aria-current="page"]:not(.is-current):not(:hover)::after { width: 0; }
.nav__link.nav__link--cta { border: 1px solid currentColor; padding: 0.6em 1.4em; border-radius: var(--radius); }
.nav__link.nav__link--cta::after { display: none; }
.nav__link.nav__link--cta:hover { background: var(--red-velvet); border-color: var(--red-velvet); color: var(--ivory) !important; }

.nav__social { display: flex; gap: 1rem; align-items: center; padding-left: 1.6rem; border-left: 1px solid rgba(255,255,255,0.22); }
.nav__social a { color: var(--ivory); display: inline-flex; opacity: 0.85; transition: opacity 0.3s, transform 0.3s; }
.nav__social a:hover { opacity: 1; transform: translateY(-2px); }
.nav__social svg { width: 18px; height: 18px; }
.nav__social:empty { display: none; }
.nav__logo { display: none; }

/* Palier intermédiaire : au-dessus de 860 px le menu burger disparaît, mais
   entre 861 px et 1140 px les 7 liens + les icônes réseaux ne tiennent pas
   confortablement sur une ligne — le menu sortait de l'en-tête et débordait
   même de l'écran. On resserre l'espacement et on retire les icônes de
   l'en-tête ; elles restent dans le pied de page et sur la page Contact.
   (Le cas le plus large est le haut de la page d'accueil, où le logo passe
   à 106 px.) */
@media (min-width: 861px) and (max-width: 1140px) {
  .nav { gap: 1.5rem; }
  .nav__list { gap: 1.4rem; }
  .nav__social { display: none; }
  .nav__link.nav__link--cta { padding: 0.6em 1.1em; }
}

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; z-index: 120; }
.nav-toggle span { width: 26px; height: 2px; background: var(--ivory); transition: transform 0.3s var(--ease), opacity 0.3s; display: block; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------- Hero -------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; text-align: center; color: var(--ivory); }
/* Photo du hero figée : le contenu du site défile par-dessus.
   On utilise position:fixed plutôt que background-attachment:fixed, qui est
   ignoré par iOS Safari et force un repaint à chaque frame sur les autres
   navigateurs. Ici la couche est composited : le défilement reste fluide.
   Hauteur en 100vh (et non 100svh) : sur mobile, 100vh ne change pas quand la
   barre d'adresse se rétracte, donc l'image ne se redimensionne jamais. */
.hero__bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -2; transform: translateZ(0); }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* En portrait, le cadre ne garde que ~31 % de la largeur d'une photo paysage :
   on décale le cadrage pour conserver l'enseigne entière plutôt que de centrer. */
@media (max-width: 720px) {
  .hero__bg img { object-position: 58% center; }
}
/* Respect du réglage système « réduire les animations » : la photo redevient
   solidaire du défilement, sans mouvement relatif. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { position: absolute; inset: 0; height: auto; transform: none; }
}
.hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(47,5,6,0.72) 0%, rgba(47,5,6,0.5) 55%, rgba(47,5,6,0.62) 100%),
    linear-gradient(to top, rgba(47,5,6,0.7), rgba(47,5,6,0.15));
}
.hero__inner { padding-top: calc(var(--header-h) + 2rem); padding-bottom: 4rem; max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hero h1 { color: var(--ivory); margin-bottom: 1.4rem; }
.hero__sub { font-size: 1.18rem; color: rgba(250,246,239,0.9); max-width: 60ch; margin-inline: auto; margin-bottom: 1.4rem; font-weight: 300; }
.hero__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--ivory); max-width: 46ch; margin: 0 auto 2.4rem; }
.hero .btn-row { margin-bottom: 0; justify-content: center; }

/* page hero (interior pages) */
.page-hero { position: relative; padding: calc(var(--header-h) + 5rem) 0 4.5rem; background: var(--deep-burgundy); color: var(--ivory); text-align: center; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% -10%, rgba(120,102,85,0.35), transparent 60%); }
.page-hero__inner { position: relative; }
.page-hero h1 { color: var(--ivory); margin-bottom: 1rem; }
.page-hero p { color: rgba(250,246,239,0.82); max-width: 62ch; margin-inline: auto; }
.page-hero .eyebrow { color: var(--sand); }

/* --------------------------- Grids ------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* Section À propos : contenu aligné en haut pour éviter le grand vide au-dessus du titre */
#a-propos .split { align-items: start; }
#a-propos .split__content { padding-top: 0.5rem; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }
.split__media--cutout { display: flex; justify-content: center; align-items: flex-end; }
.split__media--cutout::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  padding-bottom: 92%;
  transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(78, 12, 18, 0.28) 0%, rgba(78, 12, 18, 0.16) 34%, rgba(78, 12, 18, 0.06) 58%, rgba(78, 12, 18, 0) 82%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
}
.split__media--cutout img { position: relative; z-index: 1; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(47, 5, 6, 0.22)); transform: scale(1.14); transform-origin: center bottom; }
.split__media .badge {
  position: absolute; bottom: -22px; right: -18px; background: var(--red-velvet); color: var(--ivory);
  padding: 1.1rem 1.4rem; border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: center;
}
.split__media .badge strong { font-family: var(--font-display); font-size: 1.8rem; display: block; line-height: 1; }
.split__media .badge span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-light); }
.split__media .badge--logo { padding: 0; background: none; overflow: hidden; border-radius: var(--radius); width: clamp(120px, 15vw, 160px); }
.split__media .badge--logo img { display: block; width: 100%; height: auto; border-radius: inherit; }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head.text-center { margin-inline: auto; }

/* Intro — deux colonnes (titre / texte + citation) */
.intro-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.eyebrow--line { display: inline-flex; align-items: center; }
.eyebrow--line::before { content: ""; width: 42px; height: 1px; background: var(--red-velvet); margin-right: 1rem; }
.intro-split__title h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0; }
.intro-split__title h2 em { display: block; font-style: italic; color: var(--red-velvet); }
.intro-split__body p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; }
.intro-split__quote { border-left: 2px solid var(--red-velvet); padding-left: 1.5rem; margin: 2.2rem 0 0; font-family: var(--font-display); font-style: italic; color: var(--red-velvet); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; }
@media (max-width: 860px) {
  .intro-split { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* Prestations en arche (accueil) */
.services-arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3.2rem); }
.arch-card { display: block; text-align: center; text-decoration: none; color: inherit; }
.arch-card__media { border-radius: 50% 50% 0 0 / 38% 38% 0 0; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--shadow-md); }
.arch-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.arch-card:hover .arch-card__media img { transform: scale(1.05); }
.arch-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin: 1.7rem 0 0.7rem; }
.arch-card p { color: var(--ink-soft); max-width: 32ch; margin: 0 auto; line-height: 1.65; }
@media (max-width: 780px) {
  /* Encadrements des 3 services plus compacts sur mobile (moins hauts, moins larges) */
  .services-arch { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; gap: 2.4rem; }
  .arch-card__media { aspect-ratio: 4 / 5; }
}

/* Stats */
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: 2.2rem; }
.stat strong { font-family: var(--font-display); font-size: 2.4rem; color: var(--red-velvet); display: block; line-height: 1; }
.stat span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--light-brown); }

/* --------------------------- Values ------------------------------ */
.values { position: relative; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.value-card { padding: 2rem 1.6rem; border-top: 2px solid var(--red-velvet); background: rgba(250,246,239,0.04); transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.value-card:hover { transform: translateY(-8px); background: rgba(250,246,239,0.1); border-top-color: var(--sand); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
.value-card:hover .value-card__num { color: var(--ivory); }
.section--dark .value-card { background: rgba(250,246,239,0.05); }
.value-card__num { font-family: var(--font-display); font-size: 1.1rem; color: var(--sand); letter-spacing: 0.1em; }
.value-card h3 { margin: 0.6rem 0 0.8rem; }
.value-card p { font-size: 0.98rem; }

/* --------------------------- Services ---------------------------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.4rem); }
.service-card {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card__media { aspect-ratio: 4/3; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { padding: 1.8rem 1.6rem 2rem; display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { margin-bottom: 0.7rem; }
.service-card__body p { font-size: 0.98rem; flex: 1; margin-bottom: 1.2rem; }

/* Detailed service rows (services page) */
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(2.5rem,5vw,4rem) 0; border-bottom: 1px solid var(--line); }
.service-row:last-of-type { border-bottom: 0; }
.service-row--reverse .service-row__media { order: 2; }
.service-row__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 5/4; object-fit: cover; width: 100%; }
/* Photo « accompagnement » : l'image source est carrée, le cadre est en 5/4.
   Un recadrage centré couperait le logo Wanani Events en haut de l'écran ;
   on remonte la fenêtre de cadrage sans perdre le carnet ni les mains. */
.service-row__media img.is-framed-top { object-position: 50% 30%; }
.service-row__index { font-family: var(--font-display); font-size: 1rem; color: var(--sand); letter-spacing: 0.2em; }
.service-row h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0.4rem 0 1rem; }
.service-row .benefit { margin: 1.3rem 0; padding-left: 1.1rem; border-left: 2px solid var(--red-velvet); font-style: italic; font-family: var(--font-display); font-size: 1.2rem; color: var(--light-brown); }
.service-row ul.feature-list { margin: 1.2rem 0 1.6rem; display: grid; gap: 0.55rem; }
.service-row ul.feature-list li { position: relative; padding-left: 1.5rem; font-size: 0.98rem; color: var(--ink-soft); }
.service-row ul.feature-list li::before { content: "✦"; position: absolute; left: 0; color: var(--red-velvet); font-size: 0.8rem; top: 2px; }

/* --------------------------- Testimonials ------------------------ */
/* Carrousel avis */
.testi-carousel { position: relative; }
.testi-track { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.4rem 0.2rem 0.6rem; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-track:focus-visible { outline: 2px solid var(--red-velvet); outline-offset: 4px; border-radius: var(--radius-lg); }
.testi-track > .testi-card { flex: 0 0 calc((100% - 3.2rem) / 3); scroll-snap-align: start; }
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.8rem; }
.testi-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sand); background: #fff; color: var(--red-velvet); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.testi-arrow:hover { background: var(--red-velvet); color: #fff; border-color: var(--red-velvet); }
.testi-arrow:disabled { opacity: 0.35; cursor: default; }
.testi-arrow:disabled:hover { background: #fff; color: var(--red-velvet); border-color: var(--sand); }
.testi-dots { display: flex; align-items: center; gap: 0.55rem; }
.testi-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: var(--sand); opacity: 0.6; cursor: pointer; transition: opacity .25s ease, transform .25s ease, background .25s ease; }
.testi-dot:hover { opacity: 0.9; }
.testi-dot.is-active { background: var(--red-velvet); opacity: 1; transform: scale(1.35); }
.testi-card { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
.section--alt .testi-card { background: #fff; }
.testi-card__stars { color: #c9a227; letter-spacing: 3px; font-size: 0.9rem; }
.testi-card__text { font-family: var(--font-display); font-size: 1.14rem; line-height: 1.5; color: var(--deep-burgundy); font-style: italic; }
.testi-card__author { margin-top: auto; }
.testi-card__author strong { display: block; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); font-size: 0.95rem; }
.testi-card__author span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-brown); }

/* --------------------------- Gallery ----------------------------- */
/* Visible pour les lecteurs d'écran uniquement (annonces aria-live, etc.) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-bottom: 2.6rem; }
.filter-btn {
  background: transparent; border: 1px solid var(--line); color: var(--light-brown);
  padding: 0.62em 1.3em; border-radius: 40px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--red-velvet); color: var(--red-velvet); }
.filter-btn.is-active { background: var(--red-velvet); border-color: var(--red-velvet); color: var(--ivory); }

.filter-btn__n { display: inline-block; margin-left: 0.5em; opacity: 0.6; font-size: 0.92em; letter-spacing: 0.06em; }

/* Grille uniforme : tuiles portrait 4/5, comme la section « inspirations » de référence */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.gallery-item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; background: var(--sand-light); aspect-ratio: 4 / 5; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(47,5,6,0.55), transparent 50%); opacity: 0; transition: opacity 0.4s var(--ease); }
.gallery-item__cap { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; color: var(--ivory); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after, .gallery-item:hover .gallery-item__cap { opacity: 1; transform: none; }
.gallery-item:focus-visible { outline: 2px solid var(--red-velvet); outline-offset: 3px; }
.gallery-item.is-hidden, .gallery-item.is-over { display: none; }

.gallery-more { margin-top: 2.4rem; }
.gallery-more[hidden] { display: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(28,3,4,0.94); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.is-open { display: flex; animation: fade 0.3s var(--ease); }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(250,246,239,0.1); border: 1px solid rgba(250,246,239,0.3); color: var(--ivory); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; transition: background 0.3s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(250,246,239,0.25); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------- CTA band ---------------------------- */
.cta-band { position: relative; text-align: center; color: var(--ivory); padding: clamp(2.2rem, 4vw, 3.2rem) 0; overflow: hidden; }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(47,5,6,0.86), rgba(78,12,18,0.8)); }
.cta-band h2 { color: var(--ivory); max-width: min(92%, 36ch); margin: 0 auto 0.7rem; }
.cta-band p { color: rgba(250,246,239,0.85); max-width: 54ch; margin: 0 auto 1.4rem; }

/* --------------------------- Contact ----------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-aside h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; margin-bottom: 0.6rem; }
.form-card__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 1.6rem; }
.contact-info { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
.contact-info__item span { display: block; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-brown); margin-bottom: 0.3rem; }
.contact-info__item a, .contact-info__item p { font-size: 1.05rem; color: var(--deep-burgundy); }
.contact-socials { display: flex; gap: 1rem; margin-top: 2rem; }
.contact-socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--red-velvet); transition: all 0.3s var(--ease); }
.contact-socials a:hover { background: var(--red-velvet); color: var(--ivory); border-color: var(--red-velvet); transform: translateY(-3px); }
.contact-socials svg { width: 20px; height: 20px; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-sm); }
/* minmax(0, 1fr) et non 1fr : par défaut une colonne de grille ne peut pas
   devenir plus étroite que son contenu. Le <select> budget, dont l'option la
   plus longue est « Sélectionnez une fourchette (minimum 1 500 €)… », imposait
   donc sa largeur naturelle à la colonne de droite, et la carte débordait.
   Même raison pour min-width: 0 sur .field (contexte flex). */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--light-brown); font-weight: 400; }
.field label .req { color: var(--red-velvet); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.98rem; color: var(--ink); background: var(--ivory);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8em 0.9em; transition: border 0.25s, box-shadow 0.25s;
  /* Les champs remplissent leur colonne et ne la dépassent jamais, quelle que
     soit la longueur du texte des options. */
  width: 100%; max-width: 100%;
}
/* Un <select> tronque son texte au lieu de s'élargir. */
.field select { text-overflow: ellipsis; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red-velvet); box-shadow: 0 0 0 3px rgba(78,12,18,0.1); }
.field input:invalid:not(:placeholder-shown), .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b4402f; }
.field__error { font-size: 0.74rem; color: #b4402f; display: none; }
.field.has-error .field__error { display: block; }

.radio-row { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span { display: inline-flex; align-items: center; gap: 0.7em; font-size: 0.9rem; letter-spacing: 0.04em; transition: color 0.25s var(--ease); color: var(--ink-soft); cursor: pointer; }
/* petite bulle à sélectionner */
.radio-pill span::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--sand); background: #fff; box-shadow: inset 0 0 0 6px #fff; transition: all 0.25s var(--ease); }
.radio-pill span:hover::before { border-color: var(--red-velvet); }
.radio-pill input:checked + span { color: var(--red-velvet); }
.radio-pill input:checked + span::before { border-color: var(--red-velvet); background: var(--red-velvet); box-shadow: inset 0 0 0 4px #fff; }
.radio-pill input:focus-visible + span::before { outline: 2px solid var(--red-velvet); outline-offset: 2px; }

.checkbox-field { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); }
.checkbox-field input { margin-top: 3px; accent-color: var(--red-velvet); width: 17px; height: 17px; flex-shrink: 0; }
.checkbox-field a { color: var(--red-velvet); text-decoration: underline; }

.form-feedback { display: none; padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-size: 0.92rem; }
.form-feedback.is-success { display: block; background: rgba(88,120,70,0.12); color: #3f5a30; border: 1px solid rgba(88,120,70,0.35); }
.form-feedback.is-error { display: block; background: rgba(180,64,47,0.1); color: #8f2e20; border: 1px solid rgba(180,64,47,0.3); }

/* --------------------------- Footer ------------------------------ */
.site-footer { background: var(--deep-burgundy); color: var(--ivory); padding: clamp(2rem, 3.5vw, 3rem) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 1.8rem; }
.footer-col h4 { color: var(--sand); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; margin-bottom: 1.3rem; }
.footer-brand__name { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.16em; }
.footer-brand__tag { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sand); margin: 4px 0 1.1rem; }
.footer-logo { display: block; width: clamp(128px, 13vw, 160px); height: auto; border-radius: 12px; margin-bottom: 0.9rem; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.footer-brand p { color: rgba(250,246,239,0.7); font-size: 0.92rem; max-width: 34ch; }
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { color: rgba(250,246,239,0.8); font-size: 0.92rem; transition: color 0.25s, padding 0.25s; }
.footer-col a:hover { color: var(--ivory); padding-left: 4px; }
.footer-col address { font-style: normal; color: rgba(250,246,239,0.8); font-size: 0.92rem; display: grid; gap: 0.6rem; }
.footer-social { display: flex; gap: 0.9rem; margin-top: 1.2rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(250,246,239,0.25); border-radius: 50%; display: grid; place-items: center; transition: all 0.3s var(--ease); }
.footer-social a:hover { background: var(--red-velvet); border-color: var(--red-velvet); transform: translateY(-3px); padding-left: 0; }
.footer-social svg { width: 17px; height: 17px; }
/* Deux mentions seulement, toujours sur une seule ligne : copyright à gauche,
   signature à droite. nowrap + align-items:center évitent que la signature
   passe à la ligne dès que la place se réduit. */
.footer-bottom { border-top: 1px solid rgba(250,246,239,0.15); padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 1rem; font-size: 0.78rem; color: rgba(250,246,239,0.6); }
.footer-bottom > span { white-space: nowrap; }
.footer-bottom a { color: rgba(250,246,239,0.6); }
.footer-bottom a:hover { color: var(--ivory); }
/* Signature du créateur du site, discrète mais cliquable */
.footer-credit a { border-bottom: 1px solid rgba(250,246,239,0.35); padding-bottom: 1px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.footer-credit a:hover { border-bottom-color: var(--ivory); }

/* --------------------------- Cookie banner ----------------------- */
.cookie-banner { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%); z-index: 150; width: min(560px, 92%); background: var(--deep-burgundy); color: var(--ivory); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.6rem 1.6rem 1.4rem; transition: transform 0.5s var(--ease); }
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-banner h4 { color: var(--ivory); font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.4rem; }
.cookie-banner p { color: rgba(250,246,239,0.78); font-size: 0.86rem; margin-bottom: 1.1rem; }
.cookie-banner p a { color: var(--sand); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-actions .btn { padding: 0.72em 1.4em; font-size: 0.74rem; }
/* Fort contraste sur le fond bordeaux foncé du bandeau */
.cookie-actions .btn--primary { background: var(--ivory); color: var(--deep-burgundy); border: 1px solid var(--ivory); }
.cookie-actions .btn--primary:hover { background: #fff; color: var(--deep-burgundy); box-shadow: var(--shadow-md); }
.cookie-actions .btn--light { border: 1px solid var(--ivory); color: var(--ivory); background: rgba(250,246,239,0.06); }
.cookie-actions .btn--light:hover { background: var(--ivory); color: var(--deep-burgundy); border-color: var(--ivory); }
.cookie-prefs { display: none; margin: 0.4rem 0 1rem; border-top: 1px solid rgba(250,246,239,0.2); padding-top: 1rem; }
.cookie-prefs.is-open { display: grid; gap: 0.8rem; }
.cookie-pref { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 0.85rem; }
.cookie-pref small { display: block; color: rgba(250,246,239,0.6); font-size: 0.72rem; }
.switch input { accent-color: var(--sand); width: 18px; height: 18px; }

/* --------------------------- Legal pages ------------------------- */
.legal { padding: calc(var(--header-h) + 4rem) 0 5rem; }
.legal h1 { margin-bottom: 0.4rem; }
.legal .updated { font-size: 0.8rem; color: var(--light-brown); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.5rem; margin: 2.4rem 0 0.8rem; }
.legal h3 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; font-family: var(--font-body); font-weight: 500; color: var(--deep-burgundy); }
.legal p, .legal li { color: var(--ink-soft); margin-bottom: 0.8rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.legal a { color: var(--red-velvet); text-decoration: underline; }
.legal .placeholder { background: var(--ivory-soft); padding: 2px 6px; border-radius: 3px; color: var(--light-brown); }

/* --------------------------- Reveal anim ------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --------------------------- Responsive -------------------------- */
@media (max-width: 980px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .testi-track > .testi-card { flex-basis: calc((100% - 1.6rem) / 2); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 860px) {
  :root { --header-h: 76px; }
  /* Sur mobile, l'en-tête transparent de l'accueil reste à la même hauteur que --header-h
     pour que le logo ne recouvre pas le texte du hero */
  .site-header.over-hero.is-transparent { height: var(--header-h); }
  /* 68 px dans un bandeau de 76 px : 4 px de marge en haut et en bas, comme
     sur desktop. Le bandeau a dû grandir avec le logo, sans quoi celui-ci
     déborderait sur le contenu (pas d'overflow:hidden sur .site-header). */
  .brand__logo { height: 68px; }
  .site-header.over-hero.is-transparent .brand__logo { height: 68px; }
  /* Menu mobile plein écran, centré */
  .nav {
    position: fixed; inset: 0; width: 100%;
    background: var(--ivory);
    flex-direction: column; justify-content: flex-start; align-items: center;
    gap: 0; padding: 2.4rem 1.5rem 2.8rem;
    overflow-y: auto;
    transform: translateX(100%); transition: transform 0.45s var(--ease);
    box-shadow: none;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__logo { display: block; width: auto; height: 96px; margin: 0 auto; border-radius: 10px; flex: 0 0 auto; }
  /* La liste occupe l'espace central et répartit les entrées régulièrement */
  .nav__list { flex: 1 1 auto; width: 100%; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 0; padding: 1.5rem 0; }
  .nav__link { font-size: 1.05rem; letter-spacing: 0.22em; }
  .nav__link, .site-header.is-transparent .nav__link, .site-header.is-solid .nav__link { color: var(--deep-burgundy) !important; }
  /* CTA "Contact" en pilule pleine — texte clair bien visible */
  .nav__link.nav__link--cta,
  .site-header.is-transparent .nav__link.nav__link--cta,
  .site-header.is-solid .nav__link.nav__link--cta { background: var(--red-velvet); color: var(--ivory) !important; border-color: var(--red-velvet); border-radius: 999px; padding: 0.9em 3em; }
  /* Réseaux sociaux en cercles, centrés, en bas */
  .nav__social { border-left: 0; padding-left: 0; gap: 1.2rem; margin-top: 0.5rem; flex: 0 0 auto; }
  .nav__social a { color: var(--deep-burgundy) !important; opacity: 1; width: 46px; height: 46px; border: 1px solid rgba(47,5,6,0.28); border-radius: 50%; display: grid; place-items: center; }
  .nav__social a:hover { background: var(--red-velvet); border-color: var(--red-velvet); color: var(--ivory) !important; }
  .nav__social svg { width: 19px; height: 19px; }
  /* Croix du menu visible sur fond clair */
  .nav-toggle { display: flex; }
  .nav-toggle.is-open span { background: var(--deep-burgundy); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .service-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .service-row--reverse .service-row__media { order: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split__media .badge { right: 16px; bottom: -18px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Valeurs : 2 par ligne sur mobile */
  .values__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .value-card { padding: 1.3rem 1rem; }
  .value-card h3 { font-size: 1.15rem; }
  .value-card p { font-size: 0.9rem; }
  .services-grid { grid-template-columns: 1fr; }
  /* Avis : 2 visibles à la fois sur mobile */
  .testi-track { gap: 1rem; }
  /* Un seul avis visible à la fois sur mobile */
  .testi-track > .testi-card { flex: 0 0 100%; }
  .testi-card { padding: 1.4rem 1.2rem; gap: 0.7rem; }
  .testi-card__text { font-size: 0.98rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .gallery-filters { gap: 0.5rem; }
  /* Cible tactile confortable au pouce, sans grossir le texte */
  .filter-btn { padding: 0.55em 1em; font-size: 0.68rem; letter-spacing: 0.1em; min-height: 40px; display: inline-flex; align-items: center; }
  /* Footer mobile : marque pleine largeur, Navigation + Contact côte à côte,
     Informations légales sur une seule ligne */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; text-align: center; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { max-width: 34ch; margin-inline: auto; }
  .footer-col__title { margin-bottom: 1rem; }
  .footer-grid > .footer-col:nth-child(4) { grid-column: 1 / -1; }
  .footer-grid > .footer-col:nth-child(4) ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 1.6rem 1.3rem; }
  /* Boutons hero plus compacts sur mobile */
  .hero .btn-row { gap: 0.7rem; }
  .hero .btn-row .btn { width: auto; padding: 0.7em 1.3em; font-size: 0.72rem; letter-spacing: 0.12em; }
  /* Statistiques : les 3 infos sur une seule ligne, centrées */
  .stats { flex-wrap: nowrap; justify-content: center; text-align: center; gap: 0.8rem; }
  .stat { flex: 1 1 0; min-width: 0; }
  .stat strong { font-size: 1.7rem; }
  .stat span { font-size: 0.6rem; letter-spacing: 0.1em; }
  /* Bouton « Travaillons ensemble » centré */
  .stats-cta { text-align: center; }
  /* Particulier / professionnel sur la même ligne */
  .radio-row { flex-wrap: nowrap; gap: 0.8rem; }
  .radio-pill span { font-size: 0.8rem; gap: 0.5em; }
  .radio-pill span::before { width: 17px; height: 17px; box-shadow: inset 0 0 0 5px #fff; }
  /* Sur mobile on garde les deux mentions sur une ligne : on rétrécit un peu
     le texte et on masque « — Tous droits réservés. », le symbole © suffit. */
  .footer-bottom { font-size: 0.7rem; gap: 0.8rem; }
  .footer-bottom__rights { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   SEO overhaul — nouvelles sections & sémantique des titres
   ========================================================= */

/* Titres de colonnes de pied de page & bandeau cookies :
   stylés comme des titres mais sans balise Hn (sémantique correcte) */
.footer-col__title { color: var(--sand); font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; margin: 0 0 1.3rem; }
.cookie-banner__title { color: var(--ivory); font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.4rem; font-weight: 500; }

/* Fil d'Ariane discret (placé dans le page-hero) */
.breadcrumb { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.breadcrumb ol { list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; justify-content: center; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--sand); }
.breadcrumb li:not(:last-child)::after { content: "›"; opacity: 0.6; }
.breadcrumb a { color: var(--sand); text-decoration: none; opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: var(--ivory); }

/* Section "types d'événements" (accueil) */
.event-types__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.event-type { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; background: #fff; transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.event-type:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.event-type h3 { font-size: 1.3rem; margin: 0 0 0.6rem; }
.event-type p { margin: 0; font-size: 0.95rem; color: var(--light-brown); }

/* Aperçu des réalisations (accueil) — grille d'images liées vers /services/#realisations */
.realisation-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
/* Vignettes d'aperçu : volontairement non cliquables (ce sont des <figure>,
   plus des liens). margin:0 annule la marge par défaut du navigateur sur
   <figure>. Pas d'effet au survol : un zoom laisserait croire qu'on peut
   cliquer alors que rien ne se passe. */
.realisation-preview__item { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 1 / 1; box-shadow: var(--shadow-md); }
.realisation-preview__item img { width: 100%; height: 100%; object-fit: cover; }
/* right:14px pour que le libellé ne colle pas au bord quand il passe
   sur deux lignes sur mobile. */
.realisation-preview__item figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; color: var(--ivory); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.realisation-preview__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(47,5,6,0.55), transparent 55%); }
@media (max-width: 720px) { .realisation-preview { grid-template-columns: repeat(2, 1fr); } }

/* Processus / approche personnalisée */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 2.8rem; }
.process-step { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem 1.7rem 1.8rem; background: #fff; transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.process-step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.process-step__num { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--red-velvet); opacity: 0.55; margin-bottom: 0.6rem; }
.process-step h3 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.process-step p { margin: 0; font-size: 0.95rem; color: var(--light-brown); }

/* ------------------------------ FAQ ------------------------------
   Accordéon en HTML natif (<details>/<summary>) : aucun JavaScript,
   accessible au clavier et aux lecteurs d'écran. */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none; cursor: pointer; position: relative;
  display: block; padding: 1.25rem 3rem 1.25rem 0;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.35; color: var(--ink);
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--red-velvet); }
.faq__q:focus-visible { outline: 2px solid var(--red-velvet); outline-offset: 4px; border-radius: 2px; }
/* Signe + / − dessiné en CSS, aligné à droite */
.faq__q::before,
.faq__q::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 15px; height: 1.5px; background: var(--red-velvet);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq__q::before { transform: translateY(-50%); }
.faq__q::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__q { color: var(--red-velvet); }
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__a { padding: 0 3rem 1.4rem 0; animation: faq-in 0.4s var(--ease); }
.faq__a p { margin: 0; font-size: 0.97rem; line-height: 1.75; color: var(--light-brown); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq__a { animation: none; } }
/* Renvoi vers la FAQ depuis la page Contact */
.contact-faq-link { margin-top: 1.6rem; font-size: 0.92rem; color: var(--light-brown); }
.contact-faq-link a { color: var(--red-velvet); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.contact-faq-link a:hover { color: var(--deep-burgundy); }