/* =============================================================
   La Rose des Sables By Saliha — Page « Créations »
   Refonte 2026-07-25 (lot feat/refonte-page-creations)
   -------------------------------------------------------------
   Styles spécifiques à la grille éditoriale de la page Créations.
   Toutes les couleurs viennent des tokens globaux de style.css (voir
   wp-content/themes/rds-theme/CLAUDE.md, « Lot du 2026-07-24 » pour
   l'historique de la palette de marque).
   Portée : tout est scopé sous .creations-page, sauf les deux
   <dialog> (élévés au-dessus du DOM par le navigateur, donc stylés
   par leur propre id/classe) et les deux propriétés d'offset ci-
   dessous, posées sur :root car scroll-padding-top doit vivre sur
   l'élément de défilement — cette feuille n'est chargée que sur
   cette page, donc sans effet ailleurs.
   Ordre des sections :
     01. Offsets de page & base ... .creations-page
     02. Introduction ............. .creations-intro (dans style.css)
     03. Navigation interne ....... .creations-nav
     04. Galeries ................. .creations-section / .creations-grid
     05. Cartes & légendes ........ .creation-card (+ placeholders)
     06. Citations ................ .creations-quote
     07. Harmonie des couleurs .... .color-harmonies
     08. Inspirations de message .. .message-inspirations / .message-accordion
     09. CTA final ................ .creations-cta (bouton : .btn-primary du thème)
     10. Lightbox ................. .creations-lightbox / .harmonies-lightbox
     11. Responsive (1000 / 800 / 700 px)
     12. Mouvement réduit
   ============================================================= */


/* =============================================================
   01. OFFSETS DE PAGE & BASE
   ============================================================= */
:root {
  /* --creations-header-h suit le token global --header-height (80px,
     constant sur tous les breakpoints — voir style.css, NAV GLOBALE).
     Si le header du thème change un jour de hauteur, cette valeur suit. */
  --creations-header-h: var(--header-height, 80px);
  /* Hauteur de la barre de navigation interne (mesurée aussi en JS). */
  --creations-nav-h: 66px;
  /* scroll-padding-top doit être posé sur l'élément de défilement (html,
     ciblé ici via :root) : évite qu'une ancre n'atterrisse sous la nav
     globale fixe + la nav interne sticky.
     ⚠️ C'est le SEUL décalage d'ancre de cette page — ne jamais lui adjoindre
     un `scroll-margin-top` sur les cibles. Les deux propriétés ne se
     remplacent pas, elles s'AJOUTENT : le bord de la cible (élargie par sa
     marge) s'aligne sur le bord de la zone utile (le viewport réduit par ce
     padding). `.creations-section` en portait un jusqu'au lot 1.33.0, et une
     arrivée par URL (« Voir les créations » de l'accueil → /creations/#mariages)
     s'arrêtait 316 px au-dessus du haut de la section au lieu de 162 —
     mesuré à 1440, 1024, 820 et 390 px — laissant voir la fin de la section
     précédente. Le chemin JS de la barre interne (creations.js, stickyOffset()
     + 10) atterrit lui à 159 px : les deux arrivées se ressemblent
     désormais. Ce padding couvre TOUTES les ancres de la page, `#top`
     (.creations-intro) compris, ce qu'une marge posée sur les seules
     sections ne faisait pas. */
  scroll-padding-top: calc(var(--creations-header-h) + var(--creations-nav-h) + 16px);
}

.creations-page {
  font-family: var(--rds-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--rds-encre);
  background: var(--rds-fond);
  -webkit-font-smoothing: antialiased;
  /* `clip` et non `hidden` : `hidden` ferait de .creations-page un conteneur
     de défilement, ce qui casserait le sticky de .creations-nav. */
  overflow-x: clip;
}
.creations-page *,
.creations-page *::before,
.creations-page *::after { box-sizing: border-box; }
/* Réinitialisations écrites avec :where() : spécificité nulle, toujours
   surchargeables par les classes de composants ci-dessous. Les titres
   (h1/h2) gardent leur police et leur graisse du thème (règle globale
   h1..h6 de style.css) : seuls margin/padding sont neutralisés ici. */
:where(.creations-page) :where(h1, h2, h3, p, ul, li, figure, figcaption, blockquote, dl, dt, dd, hr) { margin: 0; padding: 0; }
:where(.creations-page) :where(ul) { list-style: none; }
:where(.creations-page) :where(img) { display: block; max-width: 100%; }
:where(.creations-page) :where(button) { font: inherit; color: inherit; }
:where(.creations-page) :where(a) { color: var(--rds-encre); text-decoration: none; }
:where(.creations-page) :where(a:hover) { color: var(--rds-accent); }


/* =============================================================
   02. INTRODUCTION
   ⚠️ Plus ici depuis le 2026-09-27 (1.34.6) : les règles de
   `.creations-intro*`, y compris son padding sous 800px, vivent dans
   style.css (« INTRODUCTION ÉDITORIALE SANS PHOTO »), partagées avec le
   hero de Nos Ateliers. Toute retouche de cette introduction atteint les
   deux pages.
   ============================================================= */


/* =============================================================
   03. NAVIGATION INTERNE (sticky sous le header du thème)
   ============================================================= */
.creations-nav {
  position: sticky;
  top: var(--creations-header-h);
  z-index: 150;
  margin-top: 1.4rem;
  background: color-mix(in oklch, var(--rds-fond) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in oklch, var(--rds-encre) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--rds-encre) 10%, transparent);
}
.creations-nav__track {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 3rem;
}
.creations-nav__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.creations-nav__list::-webkit-scrollbar { display: none; }
.creations-nav__list > li { display: flex; flex-shrink: 0; }
.creations-nav__track[data-scrollable="1"] .creations-nav__list { justify-content: flex-start; }
.creations-nav__track::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 0;
  width: 3.4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--rds-transition);
  background: linear-gradient(90deg, transparent, var(--rds-fond) 72%);
}
.creations-nav__track[data-overflow-end="1"]::after { opacity: 1; }

.creations-nav__link {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0.55rem 1.15rem;
  background: var(--rds-surface);
  border: 1px solid color-mix(in oklch, var(--rds-encre) 15%, transparent);
  border-radius: 22px;
  font-family: var(--rds-font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rds-encre);
  cursor: pointer;
  transition: background var(--rds-transition), border-color var(--rds-transition), color var(--rds-transition);
}
.creations-nav__link:hover { border-color: var(--rds-accent); color: var(--rds-accent); }
.creations-nav__link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rds-accent);
  opacity: 0;
  transition: opacity var(--rds-transition);
}
.creations-nav__link.is-active {
  background: var(--rds-fond-alt);
  border-color: color-mix(in oklch, var(--rds-accent) 45%, var(--rds-fond-alt));
  color: var(--rds-accent);
  font-weight: 400;
}
.creations-nav__link.is-active::before { opacity: 1; }


/* =============================================================
   04. GALERIES — un chapitre par catégorie
   ============================================================= */
.creations-section {
  /* Aucun `scroll-margin-top` ici : le décalage d'ancre est porté une seule
     fois, par le `scroll-padding-top` de `:root` (voir § 01). */
  padding-bottom: 1.4rem;
  border-bottom: 1px solid color-mix(in oklch, var(--rds-encre) 13%, transparent);
}
.creations-section:last-of-type { border-bottom: 0; }

.creations-section__header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.9rem 3rem 2.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.creations-section__title {
  flex: 1 1 300px;
  font-size: clamp(2.1rem, 4.4vw, 4.1rem);
  line-height: 1;
}
.creations-section__title em { color: var(--rds-accent); font-style: italic; font-weight: 300; }
.creations-section__intro {
  flex: 1 1 320px;
  max-width: 440px;
  padding-bottom: 0.3rem;
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Grille commune : 6 colonnes, compositions variées par catégorie */
.creations-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.1rem 1.7rem;
}


/* =============================================================
   05. CARTES & LÉGENDES
   Variantes de largeur : --w2 (défaut) / --w3 / --w4 / --w6
   Variante de hauteur  : --tall (2 rangées)
   Variantes tablette   : --tablet-w3 / --tablet-w6 (≤1000px)
   ============================================================= */
.creation-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}
.creation-card--w3 { grid-column: span 3; }
.creation-card--w4 { grid-column: span 4; }
.creation-card--w6 { grid-column: span 6; }
.creation-card--tall { grid-row: span 2; }

.creation-card__zoom {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}
.creation-card__media {
  position: relative;
  flex: 1;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: color-mix(in oklch, var(--rds-surface) 88%, var(--rds-taupe));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--rds-encre) 8%, transparent);
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
}
.creation-card--w3 .creation-card__media,
.creation-card--w4 .creation-card__media { aspect-ratio: 3 / 2; }
.creation-card--w6 .creation-card__media { aspect-ratio: 12 / 5; }
.creation-card--tall .creation-card__media { aspect-ratio: auto; }
.creation-card:hover .creation-card__media {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px color-mix(in oklch, var(--rds-encre) 26%, transparent);
}
.creation-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* légende (figcaption) */
.creation-card__caption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-top: 0.75rem;
}
.creation-card__number {
  flex-shrink: 0;
  font-family: var(--rds-font-title);
  /* Normal, pas italique : réservée aux <em> des titres et aux vraies
     citations (.creations-quote), voir CLAUDE.md — même convention que le
     numéral décoratif équivalent de la page Services (.sB__service-num,
     lui aussi normal). Uniformisation typographique du lot finalisation
     2026-07-31. */
  font-style: normal;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--rds-accent);
}
.creation-card__title {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--rds-encre);
  /* Certaines créations existantes (ex. Deuil) portent une description
     longue dans le champ "Nom" plutôt qu'un intitulé court : on la borne
     visuellement à 2 lignes sans y toucher — le texte complet reste
     disponible dans la fiche détaillée (lightbox). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.creation-card__meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--rds-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}

/* --- Placeholders TEMPORAIRES (en attente des photographies) ---
   Même formule que les placeholders déjà utilisés ailleurs dans le thème
   (voir .ph / .ph--rose etc. dans atelier.css) : rayures ton-sur-ton +
   libellé Lato discret. Les rayures et le libellé disparaissent dès
   qu'une <img> est fournie : supprimer la classe .creation-placeholder--*
   et le <span> de libellé. */
.creation-placeholder--rose {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--rds-fond-alt) 40%, transparent) 0 1px,
    color-mix(in oklch, var(--rds-fond-alt) 62%, transparent) 1px 18px);
}
.creation-placeholder--or {
  background-image: repeating-linear-gradient(-45deg,
    color-mix(in oklch, var(--rds-or) 14%, transparent) 0 1px,
    color-mix(in oklch, var(--rds-or) 22%, transparent) 1px 18px);
}
.creation-placeholder--vert {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--rds-vert) 13%, transparent) 0 1px,
    color-mix(in oklch, var(--rds-vert) 20%, transparent) 1px 18px);
}
.creation-placeholder--taupe {
  background-image: repeating-linear-gradient(-45deg,
    color-mix(in oklch, var(--rds-taupe) 14%, transparent) 0 1px,
    color-mix(in oklch, var(--rds-taupe) 21%, transparent) 1px 18px);
}
.creation-placeholder__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: var(--rds-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rds-taupe);
}


/* =============================================================
   06. CITATIONS (fin de chapitre)
   ============================================================= */
.creations-quote {
  position: relative;
  max-width: 1280px;
  margin: 2.2rem auto 0;
  padding: 1.9rem 3rem 0;
  text-align: center;
}
.creations-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--rds-fond-alt);
}
.creations-quote p {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--rds-font-title);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.32;
  text-wrap: pretty;
}
.creations-quote__source {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--rds-font-body);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}


/* =============================================================
   07. HARMONIE DES COULEURS
   L'image doit conserver EXACTEMENT ses couleurs :
   aucun filtre, aucune superposition, aucun recadrage.
   ============================================================= */
#harmonies .creations-section__header { padding-bottom: 1.4rem; }

.color-harmonies {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 3rem;
}
.color-harmonies__frame {
  display: block;
  width: 100%;
  padding: 1.6rem 1.6rem 1.1rem;
  background: var(--rds-surface);
  border: 1px solid color-mix(in oklch, var(--rds-or) 45%, transparent);
  cursor: zoom-in;
  transition: box-shadow var(--rds-transition);
}
.color-harmonies__frame:hover { box-shadow: 0 18px 40px -26px color-mix(in oklch, var(--rds-encre) 35%, transparent); }
.color-harmonies__frame img { width: 100%; }
.color-harmonies__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-family: var(--rds-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}
.color-harmonies__hint::before {
  content: '⤢';
  font-size: 0.85rem;
  color: var(--rds-accent);
}
.color-harmonies__note {
  margin-top: 1.1rem;
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1rem;
  text-align: center;
  color: var(--rds-taupe);
}


/* =============================================================
   08. INSPIRATIONS DE MESSAGE (ruban personnalisé — 5 €, 2 lignes max)
   ============================================================= */
.message-inspirations {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 3rem;
}
.message-inspirations__head {
  max-width: 620px;
  margin: 0 auto 2.3rem;
  text-align: center;
}
/* Simple texte, jamais un badge (lot finalisation 2026-07-31) — remplace
   l'ancien .message-ribbon (fond rose, bordures, apparence d'encadré).
   Même vocabulaire typographique que les autres notes discrètes de la page
   (petites capitales espacées, taupe) plutôt qu'une nouvelle échelle. */
.message-inspirations__ribbon-note {
  margin: 0.6rem auto 0;
  font-family: var(--rds-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}
.message-inspirations__ribbon-label { color: var(--rds-accent); font-weight: 500; }
.message-inspirations__lede {
  max-width: 470px;
  margin: 1rem auto 0;
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--rds-taupe);
  text-wrap: pretty;
}

/* --- Accordéon (<details> / <summary>) --- */
.message-accordion {
  border-top: 1px solid color-mix(in oklch, var(--rds-encre) 13%, transparent);
  transition: background var(--rds-transition), box-shadow var(--rds-transition);
}
.message-accordion:last-of-type { border-bottom: 1px solid color-mix(in oklch, var(--rds-encre) 13%, transparent); }
.message-accordion__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.4rem;
  min-height: 60px;
  padding: 1.15rem 1.1rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--rds-transition);
}
.message-accordion__summary::-webkit-details-marker { display: none; }
.message-accordion__summary:hover { background: color-mix(in oklch, var(--rds-surface) 55%, transparent); }
.message-accordion__summary:focus-visible { outline: 2px solid var(--rds-accent); outline-offset: -4px; }
.message-accordion__title {
  display: block;
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--rds-encre);
  transition: color var(--rds-transition);
}
.message-accordion__desc {
  display: block;
  max-width: 44ch;
  margin-top: 0.2rem;
  font-family: var(--rds-font-body);
  font-size: 0.775rem;
  line-height: 1.5;
  color: var(--rds-taupe);
  text-wrap: pretty;
}
/* signe + / − dessiné en CSS (aucune icône à charger) */
.message-accordion__sign {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.message-accordion__sign::before,
.message-accordion__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: color-mix(in oklch, var(--rds-accent) 78%, transparent);
  transition: opacity var(--rds-transition), transform var(--rds-transition);
}
.message-accordion__sign::before { width: 13px; height: 1px; transform: translate(-50%, -50%); }
.message-accordion__sign::after { width: 1px; height: 13px; transform: translate(-50%, -50%); }
.message-accordion[open] {
  background: color-mix(in oklch, var(--rds-surface) 72%, var(--rds-fond));
  box-shadow: inset 2px 0 0 color-mix(in oklch, var(--rds-accent) 50%, transparent);
}
.message-accordion[open] .message-accordion__title { color: var(--rds-accent); }
.message-accordion[open] .message-accordion__sign::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0.3);
}

/* --- Liste de messages --- */
.message-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  padding: 0 1.1rem 1.7rem;
}
.message-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid color-mix(in oklch, var(--rds-encre) 7%, transparent);
}
.message-line__text {
  font-family: var(--rds-font-title);
  font-style: normal;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--rds-encre);
}
.message-copy {
  flex-shrink: 0;
  padding: 0.3rem 0.15rem;
  background: none;
  border: 0;
  font-family: var(--rds-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rds-taupe);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--rds-transition), color var(--rds-transition);
}
.message-line:hover .message-copy,
.message-copy:focus-visible { opacity: 1; }
.message-copy:hover { color: var(--rds-accent); }
.message-copy[data-copied="1"] { opacity: 1; color: var(--rds-accent); }
/* sur écran tactile, le bouton reste visible et atteignable */
@media (hover: none) {
  .message-copy {
    opacity: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
.message-accordion[open] .message-list { animation: rds-creations-list-in 0.3s cubic-bezier(.2, .6, .2, 1); }
@keyframes rds-creations-list-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}


/* =============================================================
   09. CTA FINAL
   Le bouton réutilise .btn-primary (style.css, hiérarchie des boutons
   du thème — plein prune, action principale) : aucune règle de bouton
   propre à cette page.
   ============================================================= */
.creations-cta {
  padding: 4.6rem 3rem 5rem;
  text-align: center;
  background: var(--rds-surface);
  border-top: 1px solid color-mix(in oklch, var(--rds-encre) 12%, transparent);
}
.creations-cta__rule {
  width: 52px;
  height: 1px;
  border: 0;
  background: var(--rds-fond-alt);
  margin: 0 auto 1.9rem;
}
.creations-cta__title {
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.14;
}
.creations-cta__title em { color: var(--rds-accent); font-style: italic; font-weight: 300; }
.creations-cta__sub {
  margin-bottom: 1.9rem;
  font-family: var(--rds-font-body);
  font-size: 1rem;
  color: var(--rds-taupe);
}


/* =============================================================
   10. LIGHTBOX (deux dialogues natifs <dialog>)
   .creations-lightbox  — fiche d'une création
   .harmonies-lightbox  — agrandissement du tableau des harmonies

   ⚠️ La COQUE des deux dialogues (dimensions, fond sombre, ::backdrop,
   repli `.is-fallback-open`, contrôles ronds, verrou de défilement) ne
   vit plus ici : elle est partagée avec la galerie d'interviews de
   « Notre Histoire » depuis le 2026-09-08 et vit dans
   `assets/css/rds-lightbox.css`, sous la classe `.rds-lightbox` que les
   deux <dialog> portent désormais en plus de la leur. Cette feuille est
   déclarée en DÉPENDANCE d'enqueue de `rds-creations` : elle est donc
   toujours chargée avant, et les règles ci-dessous — de spécificité
   égale — gardent la main par l'ordre du cascade.
   Ne subsiste ici que ce qui est propre à ces deux dialogues.
   ============================================================= */
.harmonies-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.harmonies-lightbox { padding: 4.5rem 1.2rem 2rem; }

/* fiche création */
/* Couloir de navigation (lot 1.21.13) : la largeur d'une flèche (46px) plus
   l'écart qui la sépare de la photographie. Les deux valeurs sont liées —
   c'est ce qui garantit qu'une flèche ancrée sur le bord du cadre photo
   tienne EXACTEMENT dans le retrait réservé, sans jamais déborder de la
   colonne média, y compris quand la photo occupe toute la largeur
   disponible. Modifier l'écart sans recalculer le couloir ferait sortir les
   flèches sur le texte de droite. */
.creations-lightbox {
  --rds-lb-nav-gap: 1.25rem;
  --rds-lb-nav-lane: calc(46px + var(--rds-lb-nav-gap));
}
.creations-lightbox__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.4rem;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}
/* Aucun fond ici (lot 1.21.13) : la colonne média est toujours plus large
   que la photographie, qui reste affichée en entier — le fond clair qui s'y
   trouvait dessinait donc deux bandes gris rosé de part et d'autre d'elle.
   La zone reprend désormais le brun sombre de la boîte de dialogue. Le fond
   n'est conservé que pour le placeholder ci-dessous, dont il porte le motif
   rayé et la lisibilité du filigrane (texte taupe). */
.creations-lightbox__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: var(--rds-lb-nav-lane);
}
.creations-lightbox__media.is-placeholder {
  min-height: min(65dvh, 620px);
  background-color: color-mix(in oklch, var(--rds-surface) 80%, var(--rds-taupe));
}
/* Cadre de la photographie : il épouse ses dimensions rendues et sert
   d'ancrage aux flèches (voir page-creations.php). Il ne porte ni fond, ni
   bordure, ni contrainte propre — l'image garde exactement les dimensions
   qu'elle avait avant ce lot. */
.creations-lightbox__frame {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}
/* Sans photographie, le cadre n'a plus de contenu en flux : on lui rend la
   surface du placeholder pour que les flèches restent centrées sur lui et
   écartées jusqu'aux bords du couloir. */
.creations-lightbox__media.is-placeholder .creations-lightbox__frame {
  width: 100%;
  align-self: stretch;
}
.creations-lightbox__image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 9rem); object-fit: contain; object-position: center; }
.creations-lightbox__image[hidden] { display: none; }
/* Reprise corrective post-audit : .creation-placeholder__label (partagée
   avec les vignettes de la grille) pose display:flex en règle AUTEUR, qui
   l'emporte toujours sur le display:none de l'attribut [hidden] — une règle
   UA par défaut, quelle que soit sa spécificité. Sans cette surcharge
   explicite (même traitement que .creations-lightbox__image[hidden]
   ci-dessus et .creations-lightbox__desc[hidden] plus bas), le filigrane
   « Photographie à venir » restait affiché en permanence, y compris sur les
   vraies photos. */
.creations-lightbox__note[hidden] { display: none; }
.creations-lightbox__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--rds-blanc);
}
.creations-lightbox__number {
  margin-bottom: 0.7rem;
  font-family: var(--rds-font-title);
  /* Normal, pas italique — même correction et même raison que
     .creation-card__number ci-dessus (lot finalisation 2026-07-31). */
  font-style: normal;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--rds-fond-alt);
}
.creations-lightbox__title {
  margin-bottom: 1rem;
  font-size: 1.95rem;
  line-height: 1.1;
  color: var(--rds-blanc);
}
.creations-lightbox__desc {
  margin-bottom: 1.5rem;
  /* Cormorant conservé (paragraphe éditorial, cohérent avec l'intro/les
     chapeaux de section de cette page — voir CLAUDE.md), mais normal plutôt
     qu'italique : une description de création n'est pas une citation, seuls
     les <em> de titres et .creations-quote le sont (lot finalisation
     2026-07-31). */
  font-family: var(--rds-font-title);
  font-style: normal;
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in oklch, var(--rds-blanc) 72%, transparent);
}
/* Masqué (creations.js) quand une création n'a pas de description propre,
   distincte de son nom (CRE-DESC-01) — même garde explicite que
   .creations-lightbox__image[hidden] ci-dessus. */
.creations-lightbox__desc[hidden] { display: none; }
.creations-lightbox__details {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in oklch, var(--rds-blanc) 20%, transparent);
  font-family: var(--rds-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--rds-blanc) 50%, transparent);
}
/* Quatre lignes indépendantes (reprise corrective post-audit, puis ajout du
   Prix du modèle) : Détails, Prix, Prix du modèle et Dimensions sont quatre
   <div> distincts, chacun masqué séparément par creations.js quand sa valeur
   est vide — plus jamais fusionnés dans un seul champ ("~45 cm × 55 cm ·
   85 €"). Même garde explicite [hidden] que
   .creations-lightbox__image/.creations-lightbox__note/.creations-lightbox__desc
   ci-dessus : .creations-lightbox__details pose display:flex en règle
   auteur sur le même sélecteur que la liste elle-même, qui l'emporterait
   sinon sur le display:none par défaut de [hidden]. */
.creations-lightbox__details[hidden] { display: none; }
.creations-lightbox__detail[hidden] { display: none; }
.creations-lightbox__details dd {
  display: block;
  margin: 0.25rem 0 0;
  font-weight: 400;
  color: var(--rds-blanc);
}
.creations-lightbox__details dt { margin: 0; }

/* ⚠️ L'APPARENCE des contrôles ronds (cercle 46px, fond sombre, bordure,
   ombre, survol) et le `position: fixed` du bouton de fermeture vivent
   dans `assets/css/rds-lightbox.css`, partagés avec la galerie
   d'interviews — l'historique de leur contraste y est conservé en entier.
   Les deux règles y sont SOLIDAIRES et scopées à `.rds-lightbox` : ne pas
   redéclarer ici le `position` du bouton de fermeture, qui repasserait
   dans le flux de la boîte de dialogue.
   Ne reste ici que le POSITIONNEMENT des flèches, propre à la mise en page
   de la fiche d'une création. */

/* Navigation précédente/suivante entre créations d'une même galerie.
   Depuis le lot 1.21.13, elles sont ancrées sur .creations-lightbox__frame
   (le cadre de la photographie) et non plus sur la colonne média : elles se
   posent donc HORS de la photographie, à `--rds-lb-nav-gap` de son bord,
   centrées verticalement sur elle — « ← photo → ». Le retrait de la colonne
   média (`--rds-lb-nav-lane`) leur réserve exactement la place nécessaire,
   quelle que soit la largeur de la photo.
   z-index explicite : toujours au-dessus de l'image et du filigrane, quel
   que soit l'ordre du DOM (défense en profondeur, pas une correction de bug
   de superposition observé). */
.rds-lightbox .lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.rds-lightbox .lightbox-nav svg { width: 20px; height: 20px; }
.rds-lightbox .lightbox-nav--prev { right: calc(100% + var(--rds-lb-nav-gap)); }
.rds-lightbox .lightbox-nav--next { left: calc(100% + var(--rds-lb-nav-gap)); }
/* Première/dernière création de la galerie : le bouton correspondant est
   désactivé plutôt que masqué (repère stable de "début"/"fin" de galerie,
   jamais de saut en boucle) — retiré de l'ordre de tabulation nativement
   par l'attribut disabled, jamais un simple style visuel. Seule l'icône est
   atténuée (reprise corrective post-audit) : baisser l'opacité du cercle
   entier réintroduisait le même défaut de contraste que le fond clair
   corrigé ci-dessus, le cercle sombre doit rester pleinement visible même
   désactivé. */
.rds-lightbox .lightbox-nav[disabled] { cursor: default; }
.rds-lightbox .lightbox-nav[disabled] svg { opacity: 0.45; }

/* agrandissement des harmonies : image scrollable, couleurs intactes */
.harmonies-lightbox__scroll {
  width: 100%;
  max-width: 1300px;
  padding: 1.2rem;
  overflow: auto;
  background: var(--rds-surface);
  border: 1px solid color-mix(in oklch, var(--rds-or) 45%, transparent);
}
.harmonies-lightbox__scroll img { width: 100%; margin: 0 auto; }
.harmonies-lightbox__caption {
  margin-top: 1rem;
  font-family: var(--rds-font-title);
  /* Normal : consigne pratique ("communiquez la lettre..."), pas une
     citation (lot finalisation 2026-07-31). */
  font-style: normal;
  font-weight: 300;
  font-size: 0.98rem;
  text-align: center;
  color: color-mix(in oklch, var(--rds-blanc) 75%, transparent);
}

/* Le verrou de défilement (body.has-lightbox-open) et la note sur le
   focus clavier vivent dans rds-lightbox.css, avec le reste de la coque
   partagée. */


/* =============================================================
   11. RESPONSIVE
   Points de rupture : 1000 (tablette) / 800 / 700 (mobile)
   ============================================================= */
@media (max-width: 1000px) {
  .creations-section__header {
    padding: 3.2rem 1.5rem 1.8rem;
    align-items: flex-start;
    gap: 1rem;
  }
  .creations-section__intro { flex: 1 1 100%; max-width: 640px; }
  .creations-grid { padding: 0 1.5rem; gap: 1.8rem 1.4rem; }
  .creation-card,
  .creation-card--w3,
  .creation-card--w4,
  .creation-card--w6 { grid-row: auto; }
  .creation-card--tablet-w3 { grid-column: span 3; }
  .creation-card--tablet-w6 { grid-column: span 6; }
  .creation-card--tablet-w3 .creation-card__media { aspect-ratio: 4 / 5; }
  .creation-card--tablet-w6 .creation-card__media { aspect-ratio: 3 / 2; }
  .creations-quote { padding: 1.7rem 1.5rem 0; }
  .color-harmonies,
  .message-inspirations { padding: 0 1.5rem; }
  .creations-lightbox__inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    overflow: visible;
  }
  .creations-lightbox[open] { align-items: flex-start; }
  /* Le couloir des flèches est conservé jusqu'à 700px : mesuré à 768 et
     820px, la photographie y est plafonnée par sa HAUTEUR et n'atteint
     jamais la largeur disponible — la disposition « ← photo → » ne lui coûte
     donc pas un pixel. Le repli vertical n'intervient qu'en dessous, où
     l'espace latéral manquerait réellement (voir @media 700px). */
  .creations-lightbox__media { width: 100%; }
  .creations-lightbox__image { max-height: min(64dvh, calc(100dvh - 9rem)); }
  .creations-lightbox__media.is-placeholder { min-height: min(64dvh, 540px); }
}

@media (max-width: 800px) {
  .creations-nav__track { padding: 0 1.4rem; }
  .creations-nav__list { justify-content: flex-start; }
  .creations-nav__link { min-height: 44px; padding: 0.65rem 1.15rem; }
  .message-list { grid-template-columns: 1fr; }
  .creations-cta { padding: 3.6rem 1.5rem 4rem; }
}

@media (max-width: 700px) {
  :root { --creations-nav-h: 74px; }
  .creation-card,
  .creation-card--w3,
  .creation-card--w4,
  .creation-card--w6,
  .creation-card--tablet-w3,
  .creation-card--tablet-w6 { grid-column: span 6; }
  .creation-card .creation-card__media,
  .creation-card--tablet-w3 .creation-card__media { aspect-ratio: 4 / 5; }
  .creation-card--w3 .creation-card__media,
  .creation-card--w4 .creation-card__media,
  .creation-card--w6 .creation-card__media,
  .creation-card--tablet-w6 .creation-card__media { aspect-ratio: 3 / 2; }
  .message-accordion__summary { padding: 1.05rem 0.7rem; gap: 0.9rem; }
  .message-list { padding: 0 0.7rem 1.5rem; }
  .message-copy {
    opacity: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-inline: 0.4rem;
  }
  /* Repli de la navigation sous la photographie (lot 1.21.13, déplacé ici
     depuis le breakpoint 1000px). En dessous de 700px, la photographie
     occupe TOUTE la largeur disponible : lui retirer deux couloirs de 66px
     la rétrécirait d'un tiers sur un téléphone — ce que la consigne
     interdit. Les flèches repassent donc sous elle, comme avant ce lot, et
     le retrait latéral est rendu à zéro pour que la photo retrouve
     exactement ses dimensions d'origine.
     Elles restent ancrées sur le cadre : `top: 100%` les place sous la
     photographie (jamais dessus), et les décalages horizontaux depuis le
     centre du cadre — lui-même centré dans la colonne — reproduisent à
     l'identique le placement mesuré avant ce lot. */
  .creations-lightbox__media { padding: 0 0 3.6rem; }
  .creations-lightbox .lightbox-nav {
    top: calc(100% + 0.45rem);
    bottom: auto;
    transform: none;
  }
  .creations-lightbox .lightbox-nav--prev { right: auto; left: calc(50% - 3.2rem); }
  .creations-lightbox .lightbox-nav--next { left: auto; right: calc(50% - 3.2rem); }
  .harmonies-lightbox { padding: 4.5rem 0.6rem 1.5rem; }
  .harmonies-lightbox__scroll { padding: 0.7rem; }
  /* image élargie pour permettre la lecture des harmonies au doigt */
  .harmonies-lightbox__scroll img { width: 220%; max-width: none; }
}


/* =============================================================
   12. MOUVEMENT RÉDUIT
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto !important; }
  .creations-page *,
  .creations-lightbox *,
  .harmonies-lightbox * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .creation-card:hover .creation-card__media { transform: none; }
  .creations-nav__list { scroll-behavior: auto; }
}