/**
 * components.css
 * En-tête / navigation, boutons éditoriaux, pastilles, footer,
 * tuiles "univers", carte témoignage, formulaire.
 */

/* =========================================================
   EN-TÊTE / NAVIGATION
   ========================================================= */

site-header {
  display: block;
}

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--dur-fast) var(--ease-editorial),
              background-color var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial);
  border-bottom: 1px solid transparent;
}

.header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 2026-09-16 : réduit de 2rem à 1.5rem quand la nav est passée de 5 à
     6 entrées (remplacement de "Animations" par "Bar à Vinyles" +
     "Photobooth", voir .header__nav ci-dessous) — un peu d'air repris
     entre les 4 grands groupes (loupe+Accueil / nav / actions) plutôt
     que de toucher la taille de police des liens. */
  gap: 1.5rem;
}

.header.is-scrolled {
  height: var(--header-h-scrolled);
  background-color: rgba(14, 13, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--color-line);
}

/* Lien texte "Accueil" (remplace le petit logo signature du header,
   2026-09-11, voir PROJET-NOTES.md "suite 22") — même style que les
   liens de navigation, pour rester discret : le grand logo du Hero est
   désormais la seule signature visuelle de la page. */
.header__logo {
  display: block;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.86;
  transition: opacity var(--dur-fast) ease;
}

.header__logo:hover,
.header__logo:focus-visible {
  opacity: 1;
}

/* Navigation desktop visible directement dans le header à partir de
   1040px (2026-09-11, voir PROJET-NOTES.md "suite 22" — retour du
   sondage client : la nav ne doit plus être cachée uniquement derrière
   le hamburger sur ordinateur ; seuil relevé de 860px à 1040px le
   2026-09-16 quand la nav est passée de 5 à 6 entrées — "Animations"
   remplacé par "Bar à Vinyles" + "Photobooth", voir data/content.js —
   pour garder un espacement confortable sur les largeurs "laptop"
   plutôt que de tasser les onglets ; en dessous de 1040px, la nav reste
   repliée dans le menu plein écran ouvert par le burger, comme avant). */
.header__nav {
  display: none;
}

@media (min-width: 1040px) {
  .header__nav {
    display: flex;
    align-items: center;
    /* Resserré (1.4–2.2rem → 1–1.8rem) le même jour, pour la même
       raison que ci-dessus : garder la taille de police des onglets
       inchangée tout en libérant de la place pour les 2 entrées en
       plus. */
    gap: clamp(1rem, 1.7vw, 1.8rem);
  }
}

.header__nav a {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.86;
  position: relative;
  padding-block: 0.4rem;
  /* 2026-09-16 (signalé par Laurent après l'ajout de la loupe) : sans
     nowrap, un flex-item peut réduire sa largeur "auto-min" jusqu'à la
     largeur du mot le plus long qu'il contient — le moindre ajout de
     largeur ailleurs dans .header__inner (ici le bouton loupe) suffisait
     donc à faire passer "SOIRÉE PRIVÉE" / "À PROPOS" sur deux lignes.
     nowrap fixe la largeur minimale du lien à sa largeur sur une seule
     ligne : les onglets ne se cassent plus jamais, quoi qu'il arrive
     ailleurs dans le header. */
  white-space: nowrap;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-editorial);
}

.header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transition: right var(--dur-fast) var(--ease-editorial);
}

.header__nav a:hover,
.header__nav a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.header__nav a:hover::after,
.header__nav a:focus-visible::after {
  right: 0;
}

/* ---- Sous-menu de navigation (Corporate, Expériences…) ---- */
.header__nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1.1rem;
  min-width: 280px;
  background: rgba(14, 13, 12, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-line);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial),
              visibility var(--dur-fast);
  z-index: 50;
}

.header__nav-item:hover .nav-dropdown,
.header__nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__item {
  display: block;
  padding: 0.85rem 1rem;
  transition: background-color var(--dur-fast) ease;
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: rgba(245, 240, 230, 0.06);
}

.nav-dropdown__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 1;
  margin-bottom: 0.35rem;
}

.nav-dropdown__desc {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-beige-soft);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown { transition: none; }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Sélecteur .header__actions .header__contact (et non .header__contact
   seul) : nécessaire pour battre la spécificité de .btn-line
   (color/display définis plus bas dans ce fichier) — sans ce niveau de
   spécificité supplémentaire, le bouton Contact hérite du noir/encre
   du corps de page (2026-08-26) et, surtout, le `display: none` prévu
   ci-dessous perd la bataille de cascade contre `.btn-line { display:
   inline-flex }` (même spécificité, .btn-line déclaré après → il gagne).
   Bug réel trouvé le 2026-09-07 en testant le site en vue mobile (voir
   PROJET-NOTES.md) : le bouton Contact restait visible et poussait le
   bouton burger hors de l'écran, rendant le menu mobile inaccessible.
   Contact rejoint la liste de liens repliée dans le burger (déjà
   présent dans .mobile-menu__foot) — plus besoin de sa propre place
   dans le header. Demander un devis reste seul, visible en permanence :
   c'est le bouton qui rapporte (2026-08-26). */
.header__actions .header__contact {
  display: none;
  color: var(--color-ivory);
}

.header__devis {
  display: inline-flex;
}

/* Sélecteur de langue FR/EN (2026-09-07, voir PROJET-NOTES.md "Phase 1 —
   version anglaise du site") : discret, aligné avec les autres liens du
   header. Même règle de spécificité que .header__contact ci-dessus
   (nécessaire sur un header transparent/sombre). */
.header__actions .header__lang-switch {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-ivory);
  opacity: 0.75;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.3em 0.75em;
  transition: opacity 0.2s ease;
}
.header__actions .header__lang-switch:hover,
.header__actions .header__lang-switch:focus-visible {
  opacity: 1;
}
.mobile-menu__lang-switch {
  display: inline-block;
  margin-top: 0.6rem;
  opacity: 0.75;
}

/* Sur mobile, ce bouton se superpose à des photos de hero très variables
   en luminosité — le doré .btn-line--gold devient parfois illisible
   ("ça se voit pas du tout" — retour Laurent, 2026-09-07, voir
   PROJET-NOTES.md). Passage en blanc/ivoire sur mobile uniquement. */
@media (max-width: 719px) {
  .header__devis.btn-line--gold {
    color: var(--color-ivory);
    border-color: var(--color-ivory);
    background: rgba(245, 240, 230, 0.14);
  }
}

.header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  flex-shrink: 0;
}

.header__burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-ivory);
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) ease;
}

.header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Doit rester APRÈS la règle .header__burger { display: inline-flex }
   ci-dessus (même spécificité — sinon la règle de base, plus bas dans
   la cascade, l'emporterait et le burger resterait visible sur
   ordinateur malgré la media query, 2026-09-11). Seuil aligné sur celui
   de .header__nav ci-dessus (860px → 1040px le 2026-09-16) : les deux
   DOIVENT rester synchronisés, sinon soit le burger ET la nav desktop
   s'affichent en même temps, soit ni l'un ni l'autre, sur une plage de
   largeurs intermédiaire. */
@media (min-width: 1040px) {
  .header__burger {
    display: none;
  }
}

/* ---- Recherche interne (2026-09-16, demande de Laurent : "une loupe
   pour les recherches") — bouton loupe dans .header__actions + panneau
   plein écran listant les résultats filtrés depuis
   data/search-index.js. ---- */
.header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--color-ivory);
  opacity: 0.86;
  transition: opacity var(--dur-fast) ease;
}
.header__search-btn:hover,
.header__search-btn:focus-visible {
  opacity: 1;
}
.header__search-btn svg {
  width: 19px;
  height: 19px;
}

.site-search {
  position: fixed;
  inset: 0;
  /* Doit rester au-dessus du header (100) et du menu mobile (90) : les
     deux peuvent techniquement coexister dans le DOM au moment de
     l'ouverture (on referme le menu mobile en JS, mais la transition
     de fermeture n'est pas instantanée). */
  z-index: 110;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-editorial), visibility 0.35s;
}

.site-search.is-open {
  visibility: visible;
  opacity: 1;
}

.site-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 12, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-search__panel {
  position: relative;
  width: min(640px, 100%);
  margin-inline: auto;
  padding: var(--gutter);
  padding-block-start: calc(var(--header-h) + 1.5rem);
  max-height: 100vh;
  overflow-y: auto;
}

.site-search__bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-bottom: 1px solid var(--color-line);
  padding-block-end: 0.85rem;
}

.site-search__bar-icon {
  width: 20px;
  height: 20px;
  color: var(--color-ivory);
  opacity: 0.6;
  flex-shrink: 0;
}

.site-search__input {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--color-ivory);
}
.site-search__input::placeholder {
  color: var(--color-ivory);
  opacity: 0.45;
}
.site-search__input:focus {
  outline: none;
}

.site-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-ivory);
  opacity: 0.7;
  transition: opacity var(--dur-fast) ease;
}
.site-search__close:hover,
.site-search__close:focus-visible {
  opacity: 1;
}
.site-search__close svg {
  width: 17px;
  height: 17px;
}

.site-search__hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--color-beige-soft);
  opacity: 0.75;
  margin-top: 1.2rem;
}

.site-search__results {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

.site-search__result {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--color-line);
}

.site-search__result-title {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ivory);
}

.site-search__result-desc {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-beige-soft);
  opacity: 0.85;
}

.site-search__empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-beige-soft);
  opacity: 0.75;
  padding-block: 0.9rem;
}

/* ---- Menu — panneau qui glisse depuis la droite (façon
   whisper-note.com), le contenu de la page reste visible à gauche ---- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(420px, 100%);
  /* Panneau en verre dépoli plutôt qu'en beige plein (2026-09-01, retour de
     Laurent — "plus chic et moderne") : même principe que .header.is-scrolled
     et .nav-dropdown ci-dessus (fond translucide + flou), pour laisser
     deviner le contenu de la page derrière tout en gardant le texte du menu
     parfaitement lisible. */
  background: rgba(205, 187, 156, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--color-line-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--gutter);
  padding-block: calc(var(--header-h) + 2.5rem) 2rem;
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-editorial),
              visibility 0.6s;
}

.mobile-menu.is-open {
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-menu__item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Taille et graisse réduites sur retour de Laurent (2026-08-26) — les
   liens paraissaient trop imposants dans ce panneau plus étroit que
   l'ancien menu plein écran. */
.mobile-menu__list a {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.6vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 400;
  display: inline-block;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.9s var(--ease-editorial), transform 0.9s var(--ease-editorial);
}

.mobile-menu.is-open .mobile-menu__list a {
  opacity: 1;
  transform: translateX(0);
}

/* Déploiement ralenti et espacé sur retour de Laurent (2026-08-26) —
   les liens apparaissaient trop vite les uns après les autres. */
.mobile-menu__item:nth-child(1) > a { transition-delay: 0.15s; }
.mobile-menu__item:nth-child(2) > a { transition-delay: 0.3s; }
.mobile-menu__item:nth-child(3) > a { transition-delay: 0.45s; }
.mobile-menu__item:nth-child(4) > a { transition-delay: 0.6s; }
.mobile-menu__item:nth-child(5) > a { transition-delay: 0.75s; }

.mobile-menu__submenu {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-left: 0.15rem;
}

.mobile-menu__list .mobile-menu__submenu a {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 1;
  transform: none;
  transition-delay: 0s !important;
}

.mobile-menu__foot {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.mobile-menu__foot a {
  font-size: 0.85rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Le bouton "Demander un devis" reprend .btn-line--gold ailleurs sur le
   site, mais or sur beige (fonds de couleurs trop proches) manque de
   contraste ici — recoloré en ink pour rester lisible sur ce panneau. */
.mobile-menu__foot .btn-line--gold {
  color: var(--color-ink);
  border-color: var(--color-ink);
  background: rgba(32, 29, 24, 0.06);
}

/* Panneau latéral (et non plein écran) qui glisse depuis la droite,
   inspiré de whisper-note.com (2026-08-26, voir PROJET-NOTES.md) —
   fonctionne à toutes les tailles d'écran depuis le passage en
   "Version B" du header : le contenu de la page reste visible derrière,
   à gauche du panneau. Le nom de classe "mobile-menu" est resté tel
   quel pour limiter le diff ; il s'ouvre désormais aussi bien sur
   desktop. */

/* =========================================================
   BOUTONS ÉDITORIAUX (pas de gros CTA)
   ========================================================= */

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: 0.5em;
  border-bottom: 1.5px solid currentColor;
  color: inherit;
  position: relative;
  transition: gap var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-editorial);
}

/* Trait doré qui se déploie sous le bouton au survol — renforce la
   perception "cliquable" sans alourdir le style éditorial (2026-08-10). */
.btn-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1.5px;
  height: 1.5px;
  background: var(--color-gold);
  transition: right var(--dur-fast) var(--ease-editorial);
}

.btn-line:hover,
.btn-line:focus-visible {
  gap: 1.15rem;
  opacity: 0.82;
  transform: translateY(-1px);
}

.btn-line:hover::after,
.btn-line:focus-visible::after {
  right: 0;
}

.btn-line svg {
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-editorial);
}

.btn-line:hover svg,
.btn-line:focus-visible svg {
  transform: translateX(3px);
}

/* Bouton principal (call-to-action doré) — volontairement plus visible
   qu'un simple lien souligné, pour qu'on identifie tout de suite
   l'action principale de chaque page (2026-08-10). */
.btn-line--gold {
  color: var(--color-gold);
  border: 1.5px solid var(--color-gold);
  background: rgba(183, 154, 104, 0.12);
  padding: 0.65em 1.15em;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(14, 13, 12, 0.06);
}

.btn-line--gold::after {
  display: none;
}

.btn-line--gold:hover,
.btn-line--gold:focus-visible {
  background: rgba(183, 154, 104, 0.24);
  box-shadow: 0 8px 20px rgba(183, 154, 104, 0.28);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-line,
  .btn-line--gold,
  .btn-line svg {
    transition: none;
  }
  .btn-line:hover,
  .btn-line--gold:hover {
    transform: none;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  background: var(--color-charcoal);
  color: var(--color-beige);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.4rem;
}

/* Logo retiré du footer (2026-08-27, sur demande de Laurent) : la nav
   est maintenant seule sur cette ligne, centrée (elle occupait un côté
   par défaut avec `justify-content: space-between` quand le logo
   occupait l'autre). Voir PROJET-NOTES.md. */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2.2rem;
}

.footer__nav a {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.86;
  transition: opacity var(--dur-fast) ease;
}

.footer__nav a:hover,
.footer__nav a:focus-visible { opacity: 1; color: var(--color-ivory); }

.footer__social {
  display: flex;
  gap: 1.4rem;
}

.footer__social a {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.86;
}

.footer__social a:hover,
.footer__social a:focus-visible { opacity: 1; color: var(--color-ivory); }

.footer__bottom {
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(245, 240, 230, 0.55);
}

.footer__bottom a {
  color: rgba(245, 240, 230, 0.55);
  transition: color var(--dur-fast) ease;
}

.footer__bottom a:hover,
.footer__bottom a:focus-visible {
  color: var(--color-ivory);
}

.footer__legal-links {
  display: flex;
  gap: 1.4rem;
}

/* =========================================================
   TUILES UNIVERS
   ========================================================= */

.universe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-line-dark);
}

@media (min-width: 860px) {
  .universe-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
  }
}

.universe-tile {
  position: relative;
  background: var(--color-ivory);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-editorial);
}

.universe-tile:hover,
.universe-tile:focus-visible {
  transform: translateY(-4px);
}

.universe-tile:hover .universe-tile__link,
.universe-tile:focus-visible .universe-tile__link {
  gap: 1.15rem;
}

.universe-tile--vinyles {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  min-height: 360px;
}

/* Tuile de clôture pleine largeur (5e univers, page d'accueil) — même
   pattern que .tile--sceno (corporate.html), déjà vérifié responsive. */
.universe-tile--soiree {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  min-height: 300px;
}

/* Les grid-column: span N ci-dessous supposent la grille 12 colonnes de
   .universe-grid, qui n'existe qu'à partir de 860px (voir plus haut,
   grid-template-columns: 1fr en dessous) — appliquées sans condition,
   elles cassaient la largeur des tuiles sur mobile (grille implicite à
   colonnes "auto" quasi nulles, texte compressé sur une largeur de
   ~20px et photo qui semble étirée en hauteur — bug remonté par Laurent
   le 2026-09-07, voir PROJET-NOTES.md). Cantonnées au desktop. */
@media (min-width: 860px) {
  .universe-tile--mariages { grid-column: span 7; }
  .universe-tile--corporate { grid-column: span 5; }
  .universe-tile--vinyles { grid-column: span 5; }
  .universe-tile--modja { grid-column: span 7; }
  .universe-tile--soiree { grid-column: span 12; }
}

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

.universe-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-editorial);
}

.universe-tile:hover .universe-tile__media img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .universe-tile:hover .universe-tile__media img { transform: none; }
}

/* Assombri le 2026-08-24 (BRIEF — meilleure lisibilité des écritures) :
   dégradé un peu plus sombre et qui démarre plus tôt, sans devenir un
   aplat opaque. */
.universe-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,13,12,0) 28%, rgba(14,13,12,0.82) 100%);
}

.universe-tile__body {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  color: var(--color-ivory);
}

.universe-tile--vinyles .universe-tile__body {
  padding: clamp(1.5rem, 3vw, 2.6rem);
}

.universe-tile__title {
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  margin-bottom: 0.55rem;
  color: var(--color-ivory);
}

.universe-tile__price {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.7rem;
}

.universe-tile__text {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  max-width: 30ch;
  color: var(--color-beige-soft);
  margin-bottom: 1.2rem;
  /* 2026-09-16 (signalé par Laurent) : .universe-tile aligne son contenu
     en bas (justify-content: flex-end) — sans hauteur réservée ici, une
     description tenant sur une seule ligne (ex. "Plus qu'un photobooth.")
     donne un bloc plus court, donc un titre affiché plus bas que sur les
     tuiles à description longue (2 lignes). min-height réserve toujours
     la place de 2 lignes (line-height hérité 1.6 × 2) pour que le titre
     démarre à la même hauteur sur toutes les tuiles, quelle que soit la
     longueur du texte. */
  min-height: 3.2em;
}

.universe-tile__link {
  font-size: 0.7rem;
}

/* Encadré retiré (2026-08-27, voir PROJET-NOTES.md) — même correction
   que .tag-row__item / .distinction-row__item. */
.universe-tile--vinyles .universe-tile__soon {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-style: italic;
  color: var(--color-gold);
  margin-bottom: 1.1rem;
}

.universe-tile--vinyles .universe-tile__mark {
  position: absolute;
  right: clamp(1.5rem, 3vw, 2.6rem);
  top: clamp(1.5rem, 3vw, 2.6rem);
  width: 34px;
  height: 34px;
  opacity: 0.55;
}

/* Page Mariages — "Prolongez l'expérience" : 2 tuiles supplémentaires
   (Cérémonie / Musiciens). Proportions adaptées à la photo réelle de
   chaque tuile : Cérémonie (photo large, arche extérieure) prend la
   tuile large 7/12 ; Musiciens (photo verticale, saxophoniste) prend
   la tuile étroite 5/12, avec une hauteur augmentée pour bien montrer
   le cadrage portrait plutôt que de le comprimer. */
.universe-tile--musiciens {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* grid-column: span N ci-dessous : la grille 12 colonnes de .universe-grid
   n'existe qu'à partir de 860px — sans cette condition, ces 2 tuiles
   s'écrasaient sur mobile (largeur quasi nulle, photo qui semblait
   étirée/mal cadrée — bug remonté par Laurent le 2026-09-07, voir
   PROJET-NOTES.md). Cantonnées au desktop. */
@media (min-width: 860px) {
  .universe-tile--ceremonie { grid-column: span 7; }
  .universe-tile--musiciens { grid-column: span 5; }
  .universe-tile--musiciens { min-height: 560px; }
}

.universe-tile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}

/* =========================================================
   TUILES UNIVERS — VARIANTE SANS PHOTO (2026-08-26)
   Alternative demandée à "Cinq univers" (accueil) : plus de photo,
   mais mise en scène dans le même esprit que le reste du site —
   panneaux alternant ivoire/charbon (comme les tuiles photo),
   tailles variées (mosaïque, mêmes proportions que .universe-tile),
   chiffre serif géant en filigrane doré, mot-clé .eyebrow, titre
   serif, "Découvrir" en .btn-line standard. Si validé, même
   traitement à prévoir sur corporate.html.
   ========================================================= */

.univers-flat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--color-line-dark);
}

@media (min-width: 860px) {
  .univers-flat {
    grid-template-columns: repeat(12, 1fr);
  }
}

.univers-flat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 28vw, 300px);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  text-decoration: none;
  transition: transform 0.5s var(--ease-editorial);
}

.univers-flat-card:hover,
.univers-flat-card:focus-visible {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .univers-flat-card:hover { transform: none; }
}

.univers-flat-card--light {
  background: var(--color-ivory);
  color: var(--color-ink);
}

.univers-flat-card--dark {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* Passé en ivoire le 2026-09-04 (retour d'usage, voir layout.css
   .bg-charcoal .eyebrow et PROJET-NOTES.md). */
.univers-flat-card--dark .eyebrow {
  color: var(--color-ivory);
}

/* Les grid-column: span N ci-dessous supposent la grille 12 colonnes de
   .univers-flat, qui n'existe qu'à partir de 860px (grid-template-columns:
   1fr en dessous) — même bug/même correction que .universe-tile--* plus
   haut (2026-09-07, voir PROJET-NOTES.md). Cantonnées au desktop. */
@media (min-width: 860px) {
  .univers-flat-card--mariages { grid-column: span 7; }
  .univers-flat-card--corporate { grid-column: span 5; }
  .univers-flat-card--soiree { grid-column: span 12; }
  .univers-flat-card--vinyles { grid-column: span 5; }
  .univers-flat-card--photobooth { grid-column: span 7; }

  /* Variante 2x2 uniforme (ex. "Quatre contextes" corporate.html). */
  .univers-flat-card--half { grid-column: span 6; }
}

.univers-flat-card__num {
  position: absolute;
  top: 0.15em;
  right: 0.1em;
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: rgba(183, 154, 104, 0.16);
  pointer-events: none;
}

.univers-flat-card--dark .univers-flat-card__num {
  color: rgba(183, 154, 104, 0.14);
}

.univers-flat-card__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 0.6rem;
}

.univers-flat-card__title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  margin-bottom: 0.5rem;
}

/* .base.css force color: var(--color-ink) sur h1-h4 : ré-affirmer la
   couleur ici pour que le titre reste lisible sur fond charbon
   (bug 2026-08-26 — titres "gris" invisibles sur les cartes sombres). */
.univers-flat-card--light .univers-flat-card__title {
  color: var(--color-ink);
}

.univers-flat-card--dark .univers-flat-card__title {
  color: var(--color-ivory);
}

.univers-flat-card__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  max-width: 30ch;
  margin-bottom: 1.4rem;
}

.univers-flat-card--light .univers-flat-card__text {
  color: var(--color-text-muted);
}

.univers-flat-card--dark .univers-flat-card__text {
  color: var(--color-beige-soft);
}

.univers-flat-card__link {
  position: relative;
  z-index: 1;
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.7rem;
}

/* Photo de fond optionnelle pour un pavé .univers-flat-card (ajoutée le
   2026-09-06 pour le pavé Mariages de l'accueil — voir PROJET-NOTES.md).
   Même principe que .universe-tile__media/__scrim ailleurs sur le site :
   la photo et le voile sont en position absolute (inset:0) sous le
   contenu texte, qui garde déjà z-index:1 (règles ci-dessus) — il suffit
   que .univers-flat-card__scrim vienne AVANT le texte dans le HTML pour
   rester dessous (même z-index, l'ordre du DOM tranche). Combiner avec le
   modificateur --dark (texte ivoire) plutôt que --light pour rester
   lisible sur la photo assombrie. */
.univers-flat-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.univers-flat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-editorial);
}

/* Pavé Photobooth (accueil) : la photo PHOTO PHOTOBOOTH ACCEUIL.jpg
   (portrait) ne tenait pas dans ce pavé large sans couper le tapis
   rouge ou laisser des bandes — 2 correctifs CSS tentés le 2026-09-16
   (object-fit: contain, puis object-position décalé) avant que Laurent
   ne fournisse directement une version cadrée au format paysage
   (PHOTBOOTH PAYSAGE ACCEUIL.jpg, voir index.html/en/index.html) : le
   cover par défaut ci-dessus suffit désormais, plus besoin de règle
   spécifique à ce pavé. Voir PROJET-NOTES.md pour l'historique complet. */

.univers-flat-card:hover .univers-flat-card__media img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .univers-flat-card:hover .univers-flat-card__media img { transform: none; }
}

.univers-flat-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Voile fortement accentué le 2026-09-07 (retour de Laurent : les
     écritures ne se lisaient pas) — le texte (eyebrow/titre/texte) est
     positionné en haut de la carte (flex-column, le lien "Découvrir"
     est seul poussé en bas via margin-top:auto), or le dégradé
     précédent était presque transparent en haut (0.05) : c'est
     justement là qu'il fallait le plus de voile. Assombri sur toute
     la hauteur, pas seulement en bas. */
  background: linear-gradient(180deg, rgba(14,13,12,0.58) 0%, rgba(14,13,12,0.62) 45%, rgba(14,13,12,0.9) 100%);
}

/* =========================================================
   PLACEHOLDER PHOTO — en attente des photos fournies par
   Laurent (ne jamais générer/choisir une photo à sa place).
   Variante par défaut pensée pour fond charbon, `--light` pour
   fond ivoire.
   ========================================================= */

.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(183, 154, 104, 0.09) 0px, rgba(183, 154, 104, 0.09) 10px, transparent 10px, transparent 20px),
    var(--color-charcoal-soft);
  border: 1px dashed rgba(183, 154, 104, 0.4);
}

.photo-placeholder__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-quiet);
  line-height: 1.8;
  padding: 1.5rem;
}

.photo-placeholder--light {
  background:
    repeating-linear-gradient(135deg, rgba(125, 101, 56, 0.06) 0px, rgba(125, 101, 56, 0.06) 10px, transparent 10px, transparent 20px),
    var(--color-ivory-dim);
  border-color: rgba(125, 101, 56, 0.35);
}

.photo-placeholder--light .photo-placeholder__label {
  color: var(--color-gold-ink);
}

/* Légende simple sous une photo avant/après (ex. transformation IA MODJA,
   2026-08-27) — pas de superposition sur l'image (voir PROJET-NOTES.md :
   le voile sombre de .venues-grid__caption masquait le contenu de
   l'affiche "après"), juste un texte discret en dessous. */
.avant-apres-legend {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-quiet);
}

/* =========================================================
   CARTES EFFET — "Imaginez votre expérience" (page Mariages) :
   effets difficiles à se représenter par leur seul nom, donc
   présentés avec une grande carte visuelle (photo à venir).
   ========================================================= */

.effect-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(2.5rem, 5vw, 3rem);
}

@media (min-width: 760px) {
  .effect-grid { grid-template-columns: 1fr 1fr; }
}

/* Carte en colonne flex plutôt qu'en simple bloc : évite un bug de
   calcul de hauteur observé (Safari) quand une grille CSS contient
   un enfant avec `aspect-ratio` suivi de texte de longueur variable —
   la grille sous-évaluait la hauteur de la carte et le bloc suivant
   (mini-options) venait chevaucher le texte/prix/CTA. */
.effect-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-editorial), box-shadow var(--dur-fast) var(--ease-editorial);
}

.effect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14, 13, 12, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .effect-card:hover { transform: none; }
}

.effect-card__body {
  display: flex;
  flex-direction: column;
}

.effect-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
}

/* Photo réelle remplaçant .photo-placeholder à l'intérieur de
   .effect-card__media (2026-09-03) — même principe que
   .universe-tile__media img : l'image remplit tout le cadre 4/3 défini
   ci-dessus, recadrée proprement quel que soit son ratio d'origine. */
.effect-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante "sans recadrage" (2026-09-03, page Corporate — Production
   technique) : certaines photos fournies sont au format portrait et ne
   doivent surtout pas être rognées (consigne explicite de Laurent) —
   l'image est donc affichée en entier (object-fit: contain) sur un fond
   charbon qui se fond avec les photos sombres du set. */
.effect-card__media--contain {
  background: var(--color-charcoal);
}

.effect-card__media--contain img {
  object-fit: contain;
}

.effect-card__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

/* =========================================================
   EN-TÊTE UNIFIÉ TITRE + PRIX (2026-09-10, retour wedding
   planner : le prix apparaissait tantôt à gauche, tantôt à
   droite, tantôt en haut, tantôt en bas selon les cartes —
   "Étincelles froides", "Fumée lourde" et les 2 cartes
   Coordination n'avaient pas la même logique). Un seul système
   désormais, partout dans "Imaginez votre expérience" : le prix
   (chiffré, "Dès X €" ou "Nous consulter") s'affiche toujours à
   droite du titre, sur la même ligne — même position que
   .mini-option__row (label à gauche, prix à droite) juste en
   dessous, pour une lecture cohérente de haut en bas de la
   section. ========================================================= */
.effect-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.7rem;
}

.effect-card__header .effect-card__title {
  margin-bottom: 0;
}

.effect-card__price {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.effect-card__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-bottom: 0.9rem;
}

/* =========================================================
   PETITES OPTIONS — présentation discrète, en simple liste
   (page Mariages, bas de "Imaginez votre expérience").
   ========================================================= */

.mini-options {
  display: flex;
  flex-direction: column;
}

/* Version imbriquée dans une .effect-card (variantes de prix d'un même
   effet, ex. Étincelles froides "2 machines" / "4 machines") : un peu
   d'espace au-dessus, pas de bordure supérieure sur le premier élément
   (déjà séparé visuellement par le texte de la carte). */
.mini-options--nested {
  margin-top: 1.1rem;
}

.mini-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-block: 1rem;
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
  border-top: 1px solid var(--color-line-dark);
  transition: background var(--dur-fast) ease;
}

.mini-option:hover {
  background: rgba(183, 154, 104, 0.06);
}

.mini-option:last-child {
  border-bottom: 1px solid var(--color-line-dark);
}

.mini-option__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.mini-option__label {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text-muted);
}

.mini-option__price {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-gold-ink);
  white-space: nowrap;
}

.mini-option__desc {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-faint);
  max-width: 52ch;
}

.mini-option__add {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  text-decoration: underline;
  white-space: nowrap;
  align-self: flex-start;
}

.mini-option__add:hover {
  color: var(--color-charcoal);
}

/* =========================================================
   QUESTIONS FRÉQUENTES — présentation sobre, sans accordéon
   (toutes les réponses visibles ; voir mariages.html).
   ========================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding-block: 1.8rem;
  border-top: 1px solid var(--color-line-dark);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-line-dark);
}

.faq-item__q {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

.faq-item__a {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 64ch;
}

/* =========================================================
   PHILOSOPHIE — étapes sobres, sans cartes
   ========================================================= */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 5vw, 3rem);
}

@media (min-width: 780px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
  }
}

.step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-gold-ink);
  display: block;
  margin-bottom: 1.1rem;
}

.step__title {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.step__text {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 34ch;
}

/* =========================================================
   RÉFÉRENCES & DISTINCTIONS (fond noir)
   ========================================================= */

/* Bande unique claire (inspirée whisper-note.com) : tous les logos
   flottent directement sur un même fond, sans chip individuel — évite
   l'effet "rectangles de tailles différentes" d'un chip par logo, et
   garantit la lisibilité de n'importe quelle palette de logo sur la
   section à fond charcoal qui l'entoure (2026-08-24). Fond blanc pur
   (et non ivoire) : plusieurs logos fournis (Novotel...) sont livrés
   sur fond blanc opaque, non détouré — le blanc pur se fond avec eux
   sans laisser de rectangle visible (2026-08-24). */
/* Structure en 2 niveaux (2026-09-08, ajout du titre "Ils nous font
   confiance" à la demande de Laurent) : .reference-row reste la carte/
   bande ivoire (fond, bordure, marges), mais devient un conteneur en
   colonne pouvant accueillir un titre optionnel (.reference-row__title)
   au-dessus de la rangée de logos elle-même (.reference-row__logos, qui
   porte désormais le flex-wrap/gap horizontal précédemment sur
   .reference-row). Sans titre (mariages.html, corporate.html), le rendu
   est identique à avant : un seul enfant (.reference-row__logos) dans
   une carte en column ne change rien visuellement. */
.reference-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-ivory);
  border: 1px solid var(--color-line-dark);
  border-radius: 4px;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(2rem, 4.5vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
}

.reference-row__title {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.reference-row__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.2rem, 4.5vw, 3.6rem);
  width: 100%;
}

.reference-row__item {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--color-ink);
  text-align: center;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.reference-row__name {
  display: block;
}

.reference-row__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reference-row__logo img {
  display: block;
  max-height: 42px;
  width: auto;
  opacity: 0.72;
  transform: scale(1);
  transition: opacity var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
}

.reference-row__item:hover .reference-row__logo img,
.reference-row__item:focus-within .reference-row__logo img {
  opacity: 1;
  transform: scale(1.06);
}

.reference-row__note {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--color-ink);
  opacity: 0.55;
}

/* Bande "Ils m'ont fait confiance" pleine largeur sur la page d'accueil
   (2026-08-26, sur demande de Laurent) et bande équivalente sur
   corporate.html (2026-08-27, même traitement demandé par Laurent) :
   la carte centrée à largeur max habituelle (920px, coins arrondis,
   bordure sur les 4 côtés) laisse place à une bande qui va jusqu'au
   bord de l'écran de part et d'autre — le <references-block>
   correspondant est placé hors de .container dans index.html et
   corporate.html. Les autres pages (mariages.html…) gardent le format
   "carte" par défaut de .reference-row, inchangé. */
#references .reference-row,
#references-corporate .reference-row {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* justify-content: space-evenly ciblait .reference-row directement avant
   la structure en 2 niveaux ci-dessus (2026-09-08) — .reference-row est
   maintenant en colonne (titre + rangée), donc cette règle se déplace
   sur .reference-row__logos, la rangée horizontale elle-même. */
#references .reference-row__logos,
#references-corporate .reference-row__logos {
  justify-content: space-evenly;
}

/* La bande touche directement la section qui suit (Positionnement sur
   l'accueil, Les 4 univers Corporate sur corporate.html) — pas
   d'espace charbon vide entre les logos et le début de la section
   suivante. Padding du haut retiré aussi : depuis la suppression du
   titre ("Ils m'ont fait confiance" / "Ils nous font confiance"), ce
   padding ne faisait plus que créer un bandeau charbon vide entre le
   Hero et les logos — voir PROJET-NOTES.md. */
#references,
#references-corporate {
  padding-block: 0;
}

/* Version mobile plus compacte (2026-09-12, suite à l'audit UX du
   nouveau parcours accueil — voir PROJET-NOTES.md) : le gap généreux
   (jusqu'à 3.6rem) et le padding de la carte faisaient du bandeau de
   logos clients une section plus haute que nécessaire sur mobile, juste
   avant les témoignages — cumulé, cela allongeait la séquence de preuve
   sociale que le brief demandait de garder courte. Desktop inchangé. */
@media (max-width: 759px) {
  .reference-row {
    padding: 1.6rem 1.2rem;
  }

  .reference-row__logos {
    gap: 1.4rem 1.6rem;
  }

  .reference-row__logo img {
    max-height: 34px;
  }
}

.distinction-row,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
}

.distinction-row {
  justify-content: center;
}

/* Retravaillé (2026-08-27, voir PROJET-NOTES.md) : même correction que
   .tag-row__item — plus d'encadré, juste une capitale espacée dans le
   même registre que .eyebrow, le gap de .distinction-row suffit à
   séparer les entrées. */
.distinction-row__item {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* .tag-row__item — retravaillé (2026-08-27, voir PROJET-NOTES.md) :
   Laurent trouvait les petites capitales dorées en encadré peu lisibles
   sur "Ce qui est inclus" (MODJA) et n'aime pas les encadrés en général.
   Remplacé par du texte pleine casse, plus grand, sans bordure — un
   simple point doré en repère visuel au lieu d'une pastille. */
.tag-row__item {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6em;
  max-width: 34ch;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-beige-soft);
}

.tag-row__item::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-gold-quiet);
}

/* Badge officiel Mariages.net (image 125×125 fournie par leur widget) —
   ramené à la même hauteur que les pastilles texte voisines, avec un
   filet identique pour rester dans le même registre discret. Réduit une
   nouvelle fois le 2026-09-08 (retour de Laurent : trop présents) — de
   84px à 64px (et 112px à 84px pour la variante --lg), tout en restant
   nettement lisibles. */
.distinction-row__badge {
  display: flex;
  align-items: center;
  border: 1px solid rgba(183, 154, 104, 0.4);
  padding: 0.3em;
}

.distinction-row__badge img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Variante agrandie — badges Mariages.net sous le premier pavé
   d'écriture de mariages.html (2026-08-24). */
.distinction-row__badge--lg img {
  width: 84px;
  height: 84px;
}

/* Variante tag-row sur fond ivoire (pages intérieures) */
.bg-ivory .tag-row__item {
  color: var(--color-text-muted);
}

.bg-ivory .tag-row__item::before {
  background: var(--color-gold-ink);
}

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 760px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  border: 1px solid rgba(245, 240, 230, 0.15);
  padding: clamp(1.75rem, 3vw, 2.35rem);
}

.testimonial-card__rating {
  margin-bottom: 1.1rem;
  color: var(--color-gold);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
}

.testimonial-card__quote {
  flex-grow: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-ivory);
}

.testimonial-card__quote::before { content: "“"; }
.testimonial-card__quote::after { content: "”"; }

.testimonial-card__meta {
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.75;
}

/* Version mobile plus compacte (2026-09-12, suite à l'audit UX du
   nouveau parcours accueil — voir PROJET-NOTES.md) : chaque carte
   occupait quasiment un écran entier sur mobile (texte en 1rem/1.6 de
   hauteur de ligne + padding généreux), ce qui allongeait beaucoup la
   séquence de preuve sociale alors que le brief demandait explicitement
   qu'elle reste courte sur mobile. Texte, interligne et padding réduits
   uniquement en dessous de 760px (desktop inchangé). */
@media (max-width: 759px) {
  .testimonial-grid {
    gap: 1.1rem;
  }

  .testimonial-card {
    padding: 1.3rem 1.4rem;
  }

  .testimonial-card__rating {
    margin-bottom: 0.7rem;
    font-size: 0.72rem;
  }

  .testimonial-card__quote {
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .testimonial-card__meta {
    margin-top: 0.9rem;
  }
}

.testimonial-placeholder {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  border: 1px dashed rgba(245, 240, 230, 0.3);
  padding: clamp(2rem, 4vw, 3rem);
}

.testimonial-placeholder__label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.9rem;
}

.testimonial-placeholder__text {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--color-beige);
  line-height: 1.7;
}

/* =========================================================
   LISTE ÉDITORIALE (« ce que comprend… ») — pas de coches,
   pas de tableau comparatif : une simple liste sobre, à la
   manière d'une carte de maison plutôt que d'une fiche technique.
   ========================================================= */

.feature-list {
  columns: 1;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 640px) {
  .feature-list--split { columns: 2; }
}

.feature-list li {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  line-height: 1.5;
  padding-block: 0.75em;
  border-top: 1px solid var(--color-line-dark);
  break-inside: avoid;
}

.feature-list li:first-child {
  border-top: 1px solid var(--color-line-dark);
}

/* Repère visuel pour distinguer, au sein d'une liste .feature-list,
   les éléments propres à une formule enrichie (ex. Photobooth/impressions/
   livre d'or dans "Ce que comprend Instants") de ceux hérités d'une
   formule de base — sans casser le flux en colonnes CSS. Renforcé
   (2026-09-03) : le simple gras/doré passait inaperçu ; ajout d'un fond
   teinté, d'un liseré gauche et d'un badge "EN PLUS" pour un repérage
   immédiat, même en lecture rapide. */
.feature-list__item--plus {
  position: relative;
  margin-block: 0.3em;
  padding: 0.7em 0.9em 0.7em 1.1em !important;
  border-top: none !important;
  background: rgba(166, 141, 99, 0.14);
  border-left: 3px solid var(--color-gold-ink);
  border-radius: 0 4px 4px 0;
  font-weight: 700;
  color: var(--color-gold-ink);
}

.feature-list__item--plus .inline-text-link {
  color: inherit;
  text-decoration-color: currentColor;
}

.bg-charcoal .feature-list li {
  border-top-color: var(--color-line);
  color: var(--color-beige-soft);
}

/* =========================================================
   CALLOUT — citation / précision éditoriale (pas d'icône,
   pas d'alerte) : Épure ou Épure+, disponibilité Vintage…
   ========================================================= */

.callout {
  border-left: 1px solid var(--color-gold);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  max-width: 52ch;
}

.callout__title {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-bottom: 0.7rem;
  display: block;
}

.callout__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: inherit;
}

/* Variante fond sombre (2026-08-27, voir PROJET-NOTES.md) — première
   utilisation de .callout sur .bg-charcoal (mention Corporate sous les
   formules Photobooth IA, MODJA) : .callout__title utilise par défaut
   --color-gold-ink, pensé pour un fond clair, illisible sur charbon. */
.bg-charcoal .callout {
  border-left-color: var(--color-gold-quiet);
}

.bg-charcoal .callout__title {
  color: var(--color-gold-quiet);
}

/* =========================================================
   CARTES FORMULES — grille de prix à 3 colonnes (ex. formules
   MODJA Essentiel / Signature / Illimité). Distinct de
   .effect-card (pas de prix/badge) et de .exp-price (pensé pour
   une grande mise en page éditoriale, pas une petite carte).
   ========================================================= */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.25rem);
}

@media (min-width: 760px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.9rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2rem);
  border: 1px solid var(--color-line-dark);
  background: var(--color-ivory);
  transition: transform var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) ease, box-shadow var(--dur-fast) var(--ease-editorial);
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold-ink);
  box-shadow: 0 14px 30px rgba(14, 13, 12, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .plan-card:hover { transform: none; }
}

/* Signature légèrement mise en avant — une bordure plus marquée et un
   badge, jamais de survalorisation agressive (pas d'agrandissement, pas
   de couleur criarde). */
.plan-card--featured {
  border-color: var(--color-gold-ink);
}

.plan-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ivory);
  background: var(--color-gold-ink);
  white-space: nowrap;
}

.plan-card__name {
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}

.plan-card__desc {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--color-text-faint);
}

/* Agrandi le 2026-08-24 (BRIEF — rendre les prix plus visibles),
   cohérent avec .exp-price : serif, plus grand, couleur or. */
.plan-card__price {
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--color-line-dark);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1vw + 1.2rem, 1.85rem);
  color: var(--color-gold-ink);
}

/* Variante sombre (2026-08-27, voir PROJET-NOTES.md) — formules
   Photobooth IA (MODJA), sur fond charbon : rend la famille IA
   immédiatement distincte de la famille Classique (fond clair) sans
   texte explicatif, juste par contraste — voir brief "Refonte
   Photobooth & Photobooth IA", point 5. .feature-list li se recolore
   déjà tout seul via la règle existante .bg-charcoal .feature-list li
   (héritée de la section ancêtre), seuls le fond, la bordure, le nom
   et le prix de la carte ont besoin d'un override ici. */
.plan-card--dark {
  background: var(--color-charcoal-soft);
  border-color: var(--color-line);
}

.plan-card--dark:hover {
  border-color: var(--color-gold-quiet);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.plan-card--dark .plan-card__name {
  color: var(--color-ivory);
}

.plan-card--dark .plan-card__price {
  border-top-color: var(--color-line);
  color: var(--color-gold-quiet);
}

.plan-card--dark.plan-card--featured {
  border-color: var(--color-gold-quiet);
}

/* =========================================================
   BLOC EXPÉRIENCE IA — présentation dédiée, plus importante que
   les autres options (voir brief). Emplacement avant/après en
   .photo-placeholder en attendant de vrais visuels.
   ========================================================= */

.ia-block__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--color-beige-soft);
  max-width: 60ch;
  margin-inline: auto;
}

.ia-block__intro + .ia-block__intro {
  margin-top: 1.1rem;
}

/* =========================================================
   OPTIONS SANS PHOTO — petites cartes texte (ex. "Personnalisez
   votre expérience" MODJA) : réutilise la typographie de
   .effect-card__title/.effect-card__text, sans le bloc média.
   ========================================================= */

.addon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.5rem);
}

@media (min-width: 760px) {
  .addon-grid { grid-template-columns: repeat(3, 1fr); }
  .addon-grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; }
}

.addon-card__price {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

/* =========================================================
   BADGE "NOUVEAU" — signaler discrètement une nouveauté à côté
   d'un eyebrow ou d'un titre (ex. Expérience Photo IA). Retravaillé
   (2026-08-27, voir PROJET-NOTES.md) : l'ancien fond plein/coins
   arrondis faisait "pastille générée" — remplacé par un simple mot
   accentué, dans le prolongement typographique de l'eyebrow voisin.
   ========================================================= */

.badge-new {
  display: inline;
  margin-left: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-style: italic;
  color: var(--color-gold-quiet);
}

/* =========================================================
   ADAPTATION — module compact (Épure+ : déclinaison technique
   d'Épure, volontairement moins spectaculaire que les deux
   expériences principales)
   ========================================================= */

.adaptation {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  max-width: 980px;
}

@media (min-width: 760px) {
  .adaptation {
    grid-template-columns: 0.7fr 1.3fr;
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }
}

.adaptation__media .media {
  width: min(320px, 60vw);
}

@media (min-width: 760px) {
  .adaptation__media .media {
    width: 100%;
    /* aligne optiquement le haut de la photo avec l'eyebrow du texte */
    margin-top: 0.3rem;
  }
}

/* =========================================================
   DUALITÉ — récapitulatif final « univers », sans tableau ni
   coches : une colonne par ambiance. Modifiante .duality--three
   (2026-09-03, voir BRIEF CLAUDE — Remplacement d'Épure+ par Instants) :
   Instants devient un troisième univers à part entière (et non plus une
   simple déclinaison technique d'Épure), la récapitulation passe donc de
   deux à trois colonnes.
   ========================================================= */

.duality {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 760px) {
  .duality {
    grid-template-columns: 1fr 1fr;
  }
  .duality > *:first-child {
    border-right: 1px solid var(--color-line-dark);
    padding-right: clamp(2rem, 4vw, 3rem);
  }
}

@media (min-width: 760px) {
  .duality--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .duality--three > *:first-child,
  .duality--three > *:nth-child(2) {
    border-right: 1px solid var(--color-line-dark);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
  }
  .duality--three > *:nth-child(2) {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.duality__title {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  margin-bottom: 1rem;
}

.duality__words {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* =========================================================
   REPÈRES — bloc de crédibilité très épuré (page À propos) :
   3 colonnes, typographie seule, sans carte ni icône.
   ========================================================= */

.reperes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 760px) {
  .reperes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reperes-grid__label {
  display: block;
  margin-bottom: 0.9rem;
}

.reperes-grid__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* Bloc Email/Téléphone/Instagram/LinkedIn de contact.html — 4 colonnes
   au lieu des 3 habituelles de .reperes-grid (2026-08-26). */
/* Passé de 4 à 3 icônes (2026-09-07 : retrait du lien LinkedIn, qui
   pointait vers une mauvaise URL — voir PROJET-NOTES.md) : 1 colonne
   sur mobile (3 items en 2 colonnes laissait le 3e isolé, mal centré),
   3 colonnes à partir de 640px. */
.reperes-grid--contact {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reperes-grid--contact {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bloc réseaux sociaux en bas de la page d'accueil (2026-08-27, même
   style que contact.html) — passé à 1 seule icône (Instagram) le
   2026-09-07 suite au retrait du lien LinkedIn (mauvaise URL, voir
   PROJET-NOTES.md) : 1 colonne, largeur réduite et centrée. */
.reperes-grid--social {
  grid-template-columns: 1fr;
  max-width: 160px;
}

/* Lien Email/Téléphone/Instagram/LinkedIn de contact.html — l'icône EST
   le lien (2026-08-26) : le texte cliquable qui apparaissait en dessous
   a été retiré, tout est intégré à l'icône (voir PROJET-NOTES.md).
   Sur demande de Laurent (même jour), l'adresse email et le numéro de
   téléphone doivent malgré tout apparaître en toutes lettres — ajout de
   `.reperes-grid__value`, sous le libellé, pour ces deux-là uniquement. */
.reperes-grid__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: inherit;
}

.reperes-grid__link .reperes-grid__label {
  margin-bottom: 0;
  transition: color var(--dur-fast) var(--ease-editorial);
}

.reperes-grid__value {
  display: block;
  margin-top: -0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-faint);
  overflow-wrap: break-word;
}

/* Icône ronde, ligne fine — même format pour les 3 (taille, épaisseur de
   trait, couleur) pour une intégration cohérente, dans le style
   éditorial du site plutôt que les couleurs de marque habituelles.
   Agrandie + animée au survol/focus pour signaler qu'elle est cliquable
   (2026-08-26). */
.reperes-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--color-line-dark);
  border-radius: 999px;
  color: var(--color-gold-ink);
  transition: transform var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              background-color var(--dur-fast) var(--ease-editorial),
              color var(--dur-fast) var(--ease-editorial);
}

.reperes-grid__icon svg {
  width: 24px;
  height: 24px;
}

.reperes-grid__link:hover .reperes-grid__icon,
.reperes-grid__link:focus-visible .reperes-grid__icon {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--color-gold);
  background: rgba(183, 154, 104, 0.1);
  color: var(--color-gold);
}

.reperes-grid__link:hover .reperes-grid__label,
.reperes-grid__link:focus-visible .reperes-grid__label {
  color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .reperes-grid__icon { transition: none; }
  .reperes-grid__link:hover .reperes-grid__icon,
  .reperes-grid__link:focus-visible .reperes-grid__icon {
    transform: none;
  }
}

/* =========================================================
   ÉQUIPE — cartes DJ (page À propos, section "L'équipe").
   `auto-fit` + `justify-content: center` : le rendu reste centré
   et équilibré même avec une seule carte (Laurent, pour l'instant),
   et accueillera naturellement d'autres cartes plus tard sans
   retouche CSS. Volontairement épuré — typographie et une photo,
   jamais de cadre ni de fond de carte façon fiche/catalogue.
   ========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.team-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: 1.3rem;
  overflow: hidden;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-size: var(--fs-h3);
  color: var(--color-ivory);
  margin-bottom: 0.4rem;
}

.team-card__role {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.9rem;
}

.team-card__text {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-beige-soft);
  margin-bottom: 0.9rem;
}

.team-card__events {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-quiet);
}

/* =========================================================
   INTRODUCTION DE PAGE (fond charbon) — réutilisable sur les
   futures pages intérieures du site.
   ========================================================= */

/* Introduction centrée — inspirée de whisper-note.com : texte resserré
   sur une colonne centrale plutôt qu'aligné à gauche (2026-08-24). */
.page-intro {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.page-intro__title {
  font-size: var(--fs-h1);
  color: var(--color-ivory);
  margin-top: 1rem;
  margin-bottom: 1.8rem;
}

.page-intro__text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--color-beige-soft);
  max-width: 62ch;
  margin-inline: auto;
}

.page-intro__text p + p {
  margin-top: 1.1rem;
}

/* Indicateur discret "la page continue plus bas" — variante de
   .hero__scroll-cue adaptée aux sections .page-intro, qui n'occupent
   pas toute la hauteur de l'écran (donc pas de positionnement absolu
   ancré au viewport, ce serait mal placé selon la longueur du texte). */
.page-intro__scroll-cue {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige-soft);
}

@media (min-width: 720px) {
  .page-intro__scroll-cue { display: flex; }
}

.page-intro__scroll-cue .cue-line {
  width: 1px;
  height: 34px;
  background: var(--color-beige-soft);
  position: relative;
  overflow: hidden;
}

.page-intro__scroll-cue .cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--color-gold);
  animation: cueDrop 2.6s var(--ease-editorial) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-intro__scroll-cue .cue-line::after { animation: none; top: 0; }
}

/* =========================================================
   FORMULAIRE DE CONTACT (utilisé sur page contact, prévu ici)
   ========================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}

.field label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-beige);
}

.field input,
.field select,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ivory);
  padding-block: 0.6rem;
  font-size: 1rem;
  transition: border-color var(--dur-fast) ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-gold);
  outline: none;
}

/* Flèche de menu déroulant (2026-09-16, signalé par Laurent : sur mobile,
   sans flèche ni cadre visible — juste un soulignement, comme les champs
   texte — on ne comprend pas que .field select est cliquable/déroulant).
   Le style natif du navigateur n'est pas fiable d'un appareil à l'autre
   (souvent trop discret, parfois absent) : on le désactive et on dessine
   nous-mêmes un chevron, dans le même beige que les libellés de champ,
   visible sur le fond sombre du formulaire. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  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 1L6 6L11 1' stroke='%23cdbb9c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  background-size: 11px 7px;
  padding-right: 1.5rem;
  cursor: pointer;
}

.field select::-ms-expand { display: none; }

.field textarea { resize: vertical; min-height: 110px; }

.field--full { grid-column: 1 / -1; }

/* =========================================================
   TEXTE LÉGAL (politique de confidentialité, mentions légales)
   ========================================================= */

.legal-text {
  max-width: 720px;
}

.legal-text h2 {
  font-size: var(--fs-h3);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}

.legal-text h2:first-child { margin-top: 0; }

.legal-text p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.legal-text ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
  list-style: disc;
}

.legal-text li {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.legal-text a {
  color: var(--color-gold-ink);
  text-decoration: underline;
}

/* =========================================================
   CARTES "COMPOSER VOTRE EXPÉRIENCE" (page Corporate)
   Réutilisent .universe-tile / .universe-grid : mêmes
   proportions, même comportement, nouveaux modificateurs
   de largeur + une variante sombre et typographique pour
   les univers qui n'ont pas (encore) de photographie dédiée.
   ========================================================= */

.tile--vinylbar {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  min-height: 360px;
}

.tile--live {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  min-height: 360px;
}

/* .tile--sceno (pavé "Scénographie & Lumière") supprimé le 2026-09-03 —
   règle réutilisée telle quelle pour .tile--technique (pavé "Production
   technique", même besoin : pleine largeur, fond charbon). */
.tile--technique {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  min-height: 300px;
}

/* Les grid-column: span N ci-dessous supposent la grille 12 colonnes de
   .universe-grid, qui n'existe qu'à partir de 860px — même bug/même
   correction que .universe-tile--* plus haut : sans cette condition,
   les tuiles "Composer votre expérience" (corporate.html) s'écrasaient
   sur mobile (largeur quasi nulle, texte compressé, photo qui semblait
   étirée en hauteur — bug remonté par Laurent le 2026-09-07, voir
   PROJET-NOTES.md). Cantonnées au desktop. */
@media (min-width: 860px) {
  .tile--dj { grid-column: span 7; }
  .tile--vinylbar { grid-column: span 5; }
  .tile--modja-composer { grid-column: span 5; }
  .tile--live { grid-column: span 7; }
  .tile--technique { grid-column: span 12; }
}

/* =========================================================
   VIDÉO "L'EXPÉRIENCE EN IMAGES" (page Mariages) — sobre,
   immersive, sans cadre doré, sans ombre lourde, sans effet 3D :
   un simple poster plein cadre + un bouton play discret. Rien ne
   se charge tant que le visiteur n'a pas cliqué (preload="none").
   Restauré le 2026-08-24 après un essai en hero plein écran jugé
   pas assez qualitatif pour ce format de vidéo.
   ========================================================= */

.exp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-charcoal-soft);
}

.exp-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(245, 240, 230, 0.55);
  background: rgba(14, 13, 12, 0.35);
  color: var(--color-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
}

.exp-video__play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.exp-video__play:hover,
.exp-video__play:focus-visible {
  background: rgba(14, 13, 12, 0.55);
  border-color: var(--color-ivory);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .exp-video__play:hover,
  .exp-video__play:focus-visible { transform: none; }
}

.exp-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.exp-video[data-playing] .exp-video__poster,
.exp-video[data-playing] .exp-video__play {
  display: none;
}

.exp-video[data-playing] .exp-video__el {
  opacity: 1;
  pointer-events: auto;
}


/* =========================================================
   CARTES "4 UNIVERS" CORPORATE — grande photographie +
   précisions dépliables (pas de nouvelle page, pas de menu
   déroulant : tout reste sur la page Corporate).
   ========================================================= */

.corp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-line-dark);
}

@media (min-width: 760px) {
  .corp-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Cartes "4 univers Corporate" — sans photo (2026-08-10) : fond
   charcoal uni + icône ligne dorée, plutôt qu'une photo générique.
   Plus sobre, plus cohérent avec le reste du site, et évite l'effet
   "banque d'images" des photos précédentes. */
.corp-card {
  position: relative;
  background: var(--color-charcoal);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.6rem);
}

.corp-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--color-ivory);
}

.corp-card__title {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--color-ivory);
  margin-bottom: 0.7rem;
}

.corp-card__text {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-beige-soft);
  max-width: 34ch;
  margin-bottom: 1.2rem;
}

/* Lien "En savoir plus" — chaque carte pointe désormais vers une page
   Corporate dédiée (corporate/<slug>/index.html) plutôt qu'un simple
   disclosure <details>. margin-top: auto pousse le bouton en bas de
   carte même si les textes ont des longueurs différentes. Volontairement
   discret (pas d'accent doré, taille réduite) : voir BRIEF CLAUDE —
   Épurer la page Corporate (2026-08-24). */
.corp-card__cta {
  font-size: 0.68rem;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.corp-card__cta svg {
  width: 12px;
  height: 9px;
}

/* =========================================================
   GALERIE CORPORATE — grille photographique dense, sans
   légendes : elle doit parler d'elle-même.
   ========================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--color-line-dark);
}

/* `.gallery-grid` fixe déjà `display`, ce qui l'emporterait sinon sur la
   règle native `[hidden]{display:none}` du navigateur (même spécificité,
   mais origine "auteur" prioritaire) — utilisé pour les onglets galerie. */
.gallery-grid[hidden] {
  display: none;
}

@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery-grid__item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-charcoal);
}

.gallery-grid__item--wide {
  aspect-ratio: 3 / 2;
}

@media (min-width: 700px) {
  .gallery-grid__item--wide { grid-column: span 2; }
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease-editorial);
}

.gallery-grid__item:hover img,
.gallery-grid__item:focus-within img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid__item:hover img,
  .gallery-grid__item:focus-within img { transform: none; }
}

/* =========================================================
   GALERIE LIEUX DE MARIAGE — grille de photos au même format
   (aspect-ratio uniforme), nom du lieu en légende superposée au
   survol/en permanence, inspirée de melaniebintein.com/portfolio-
   venues-wedding-destination (2026-08-26, voir PROJET-NOTES.md).
   ========================================================= */

.venues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--color-line-dark);
}

@media (min-width: 700px) {
  .venues-grid { grid-template-columns: repeat(3, 1fr); }
}

.venues-grid__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-charcoal);
}

.venues-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease-editorial);
}

.venues-grid__item:hover img,
.venues-grid__item:focus-within img {
  transform: scale(1.06);
}

.venues-grid__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,13,12,0) 45%, rgba(14,13,12,0.85) 100%);
  pointer-events: none;
}

.venues-grid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ivory);
}

@media (prefers-reduced-motion: reduce) {
  .venues-grid__item:hover img,
  .venues-grid__item:focus-within img { transform: none; }
}

/* =========================================================
   BANDEAU DÉFILANT LIEUX DE MARIAGE (mariages.html) — remplace
   la grille statique .venues-grid par une seule ligne de vignettes
   qui défile en continu, lentement, de droite à gauche. Ne démarre
   qu'une fois la section visible au scroll (classe .is-visible posée
   par le mécanisme .reveal existant dans js/main.js — aucun JS
   supplémentaire nécessaire). Vignettes volontairement petites pour
   rester discrètes/élégantes plutôt que massives.
   ========================================================= */
.venues-marquee {
  overflow: hidden;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.venues-marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: venuesMarqueeRTL 90s linear infinite;
  animation-play-state: paused;
}

.venues-marquee.is-visible .venues-marquee__track {
  animation-play-state: running;
}

.venues-marquee:hover .venues-marquee__track {
  animation-play-state: paused;
}

.venues-marquee__item {
  position: relative;
  flex: 0 0 auto;
  height: clamp(160px, 16vw, 220px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-charcoal);
}

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

@keyframes venuesMarqueeRTL {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .venues-marquee__track { animation: none; }
}

/* =========================================================
   ONGLETS GALERIE (page d'accueil) — filtre Mariages / Corporate
   / Expériences au-dessus d'une `.gallery-grid`. Purement
   typographique, dans l'esprit épuré du reste du site.
   ========================================================= */

.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.gallery-tabs__btn {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: none;
  border: none;
  padding: 0 0 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.gallery-tabs__btn:hover,
.gallery-tabs__btn:focus-visible {
  color: var(--color-gold-ink);
}

.gallery-tabs__btn.is-active {
  color: var(--color-gold-ink);
  border-color: var(--color-gold);
}

/* =========================================================
   FORMULAIRE — grille deux colonnes en desktop (utilisée sur
   la page Corporate ; réutilisable pour la page Contact).
   ========================================================= */

.contact-form {
  max-width: 720px;
  margin-inline: auto;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
}

.contact-form__submit {
  margin-top: 0.6rem;
}

/* =========================================================
   VINYL BAR — hero typographique (page dédiée).
   Le mobilier n'étant pas finalisé, aucune photographie n'est
   utilisée : la présence se construit par l'espace, la
   typographie, et un unique mouvement continu très discret —
   justifié ici par la métaphore du disque qui tourne.
   ========================================================= */

.vinyl-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* Passé en ivoire le 2026-09-04 (retour d'usage, voir layout.css
   .bg-charcoal .eyebrow et PROJET-NOTES.md). */
.vinyl-hero .eyebrow {
  color: var(--color-ivory);
}

.vinyl-hero__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  transform: translate(-50%, -50%);
  opacity: 0.1;
  animation: vinylSpin 70s linear infinite;
}

@keyframes vinylSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-hero__mark { animation: none; }
}

/* =========================================================
   GALERIE ACCUEIL — bloc à deux colonnes, texte + photos en
   défilement continu (2026-08-27, voir PROJET-NOTES.md, inspiré de
   monsieur-photobooth.com). Deux colonnes de photos, chacune avec
   son contenu dupliqué une fois pour un bouclage parfaitement
   fluide (translateY(-50%) ramène exactement au point de départ).
   ========================================================= */
.gallery-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 860px) {
  .gallery-split { grid-template-columns: 0.85fr 1.15fr; }
}

.gallery-marquee {
  display: flex;
  gap: 12px;
  height: clamp(360px, 55vw, 560px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Comme .gallery-grid[hidden] plus haut : .gallery-marquee fixe déjà
   `display`, il faut le réaffirmer explicitement pour que l'attribut
   [hidden] posé par initTabGroups() (js/main.js) masque bien le panneau
   inactif. */
.gallery-marquee[hidden] {
  display: none;
}

.gallery-marquee__col {
  flex: 1;
  overflow: hidden;
}

.gallery-marquee__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  animation: galleryMarqueeUp 32s linear infinite;
}

.gallery-marquee__col--down .gallery-marquee__track {
  animation-name: galleryMarqueeDown;
  animation-duration: 38s;
}

.gallery-marquee__col--down { margin-top: -80px; }

.gallery-marquee__track img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

@keyframes galleryMarqueeUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes galleryMarqueeDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.gallery-marquee:hover .gallery-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-marquee__track {
    animation: none;
  }
}

.vinyl-hero__content {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
  max-width: 640px;
}

/* =========================================================
   MOODBOARD TYPOGRAPHIQUE — substitut de galerie pour les
   expériences sans photographie (Vinyl Bar).
   ========================================================= */

.moodboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-line);
}

@media (min-width: 700px) {
  .moodboard { grid-template-columns: repeat(4, 1fr); }
}

.moodboard__item {
  background: var(--color-charcoal);
  color: var(--color-beige-soft);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}