/* ==========================================================================
   DISCIPLINE — Système de design partagé
   Contrat : docs/CHARTE.md · Démonstration : /styleguide

   SOMMAIRE
    1. Polices (@font-face)
    2. Tokens (couleurs, typographies, espacements, rayons, ombres, mouvements)
    3. Reset moderne
    4. Base & typographie fluide
    5. Layout (container, section, grid, stack, cluster)
    6. Typographie utilitaire (display, h1–h4, eyebrow, lead, latin, engraved…)
    7. Ornements pleins (divider, meander, entablature, frame-arch, fluted, marble-bg, grain) · jeton --decor
    8. Boutons & liens (btn, link-line)
    9. Étiquettes (badge, tag, chip, breadcrumb, icon)
   10. Formulaires (field, input, select, textarea, checkbox, radio, switch, qty, swatch, size-option)
   11. Composants (card, quote, accordion, tabs, modal, empty-state, marquee, toast)
   12. Carte produit (product-card)
   13. En-tête, annonce, méga-menu
   14. Pied de page
   15. Overlays (tiroir panier, recherche, menu mobile, cookies, intro)
   16. Animations d'apparition (data-reveal, split, draw, build, count, shine, parallax, effets liés au défilement)
   17. Utilitaires
   18. Impression
   19. Mouvement réduit
   20. Transitions de page (View Transitions)
   21. Interactions fines (inclinaison, aimant, envol vers le panier)
   ========================================================================== */

/* ==========================================================================
   1. POLICES — auto-hébergées (public/assets/fonts), aucune requête tierce
   ========================================================================== */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cinzel-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cinzel-latin-500-normal.woff2) format('woff2'); }

@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-900-normal.woff2) format('woff2'); }

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
:root {
  /* Palette (CHARTE §2) */
  --marble: #F3EFE7;
  --marble-2: #E9E3D7;
  --stone: #CFC6B6;
  --ink: #0F0E0C;
  --basalt: #1A1815;
  --basalt-2: #26231F;
  --gold: #B8975A;
  --gold-light: #D9C08A;
  --gold-deep: #8C6D37;
  --gold-ink: #7A5E2C;          /* or foncé pour petit texte sur clair (contraste AA) */
  --purple: #4A1F3D;
  --muted: #6B645A;
  --muted-dark: #B9B1A4;       /* ≈ 8:1 sur basalte : lecture confortable des textes secondaires */
  --danger: #8E2F2F;
  --success: #3F5A3A;

  /* Typographies */
  /* CHARTE §0.2 : Source Sans 3 (texte, capitales espacées 600/700 et voix brute 900), Cinzel (gravures seulement). */
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-caps: var(--font-sans);                                    /* capitales espacées 600/700 : navigation, eyebrows, boutons, .h1–.h4 */
  --font-engraved: 'Cinzel', 'Trajan Pro 3', 'Times New Roman', serif; /* réservé à .engraved (inscriptions gravées) */
  /* Voix brute : Source Sans 3 Black (900) en capitales, interlettrage serré, jamais d'italique (référence : .hero__tagline de l'accueil).
     Graisses présentes : 400 (+ 400 italique du texte courant), 600, 700, 900 — jamais 300 ni 500 (elles retomberaient sur une autre graisse).
     Interlettrage selon la taille rendue : */
  --brut-track-xl: -0.01em;   /* ≥ 3.5rem : titres monumentaux, grands numéraux */
  --brut-track-l: 0;          /* 2 – 3.5rem : titres de section */
  --brut-track-m: 0.015em;    /* 1.25 – 2rem : titres de bloc, de carte, bandeau */
  --brut-track-s: 0.03em;     /* < 1.25rem : accroches, devises, noms de produit */

  /* Couleurs sémantiques (thème clair par défaut ; .section--dark les inverse) */
  --bg: var(--marble);
  --bg-alt: var(--marble-2);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --rule: rgba(15, 14, 12, 0.17);             /* filets et séparateurs décoratifs : encre en faible contraste, jamais dorés (CHARTE §2) */
  --rule-strong: rgba(15, 14, 12, 0.42);      /* filet plus net (survol, séparateur structurant) */
  --accent: var(--gold-ink);                   /* texte accentué */
  --accent-line: var(--gold);                  /* filets or */
  --field-bg: rgba(255, 255, 255, 0.4);
  --field-border: #857E73;                     /* bordure fonctionnelle (champs, cases) : ≥ 3:1 sur marbre (WCAG 1.4.11) */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0E0C' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");

  /* Couleurs héritées par les SVG inline (CHARTE §2 et §8) : --decor = décors pleins ; --line / --fill = pictogrammes fonctionnels seulement (schémas), plus aucun décor */
  --line: var(--gold);
  --fill: none;
  --logo: var(--ink);
  --decor: var(--ink);                         /* décors pleins (docs/da/GRAMMAIRE.md) : encre sur clair */
  --decor-soft: #DDD7CB;                       /* « pierre » adoucie : grand décor d'arrière-plan sous du texte (aplat opaque) */
  --numeral-fill: #D5CFC2;                     /* aplat « pierre » des grands numéraux (GRAMMAIRE §8) : opaque, jamais d'or ni de fondu */

  /* Layout */
  --gutter: clamp(20px, 5vw, 80px);
  --container: 1440px;
  --container-narrow: 880px;
  --container-wide: 1680px;
  --section-y: clamp(72px, 10vw, 160px);
  --announce-h: 36px;
  --header-h: 80px;
  --grid-gap: clamp(16px, 2.2vw, 32px);

  /* Espacements (échelle 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
  --space-6: 32px; --space-7: 48px;  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;

  /* Rayons — très faibles : l'architecture est droite */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Ombres — longues, douces, teintées d'encre */
  --shadow-1: 0 1px 2px rgba(15, 14, 12, 0.06), 0 4px 12px rgba(15, 14, 12, 0.05);
  --shadow-2: 0 2px 4px rgba(15, 14, 12, 0.05), 0 12px 32px rgba(15, 14, 12, 0.1);
  --shadow-3: 0 8px 16px rgba(15, 14, 12, 0.08), 0 32px 80px rgba(15, 14, 12, 0.18);

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* arrivée longue et douce : apparitions, pose des images */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-0: 160ms;                                       /* micro-retours (focus, pression) */
  --dur-1: 240ms;
  --dur-2: 600ms;
  --dur-3: 900ms;
  --dur-4: 1200ms;
  --dur-5: 1600ms;                                      /* grandes pièces : colonnes, images « posées » */
  --stagger: 70ms;                                      /* cran de cascade (la cascade par lot est plafonnée à 6 crans) */
  --reveal-shift: 24px;                                 /* amplitude de la montée « up » */
  --view-dur: 420ms;                                    /* transition de page */

  /* Plans (z-index) */
  --z-sticky: 20;
  --z-header: 50;
  --z-menu: 45;
  --z-cookie: 80;
  --z-drawer: 90;
  --z-search: 95;
  --z-toast: 120;
  --z-intro: 1000;
}

/* Contexte sombre : on inverse les variables sémantiques */
.section--dark,
.is-dark {
  --bg: var(--basalt);
  --bg-alt: var(--basalt-2);
  --fg: var(--marble);
  --fg-muted: var(--muted-dark);
  --rule: rgba(243, 239, 231, 0.2);
  --rule-strong: rgba(243, 239, 231, 0.42);
  --accent: var(--gold-light);
  --accent-line: var(--gold);
  --field-bg: rgba(243, 239, 231, 0.04);
  --field-border: rgba(243, 239, 231, 0.46);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9C08A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  --line: var(--gold-light);
  --logo: var(--marble);
  --decor: var(--marble);                      /* ivoire sur sombre */
  --decor-soft: #34312C;
  --numeral-fill: #3A3732;
  background-color: var(--bg);
  color: var(--fg);
}

@media (max-width: 1240px) { :root { --header-h: 68px; --announce-h: 34px; } }
@media (max-width: 420px)  { :root { --header-h: 62px; --announce-h: 32px; } }

/* ==========================================================================
   3. RESET MODERNE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); scroll-padding-bottom: calc(var(--sp-bar, 0px) + var(--sp-cookie, 0px)); }
/* Éléments fixes qui recouvrent le bas ou le haut de l'écran : le focus clavier ne doit pas passer dessous (WCAG 2.4.11) */
html.has-cookie-banner { --sp-cookie: calc(var(--cookie-h, 0px) + 16px); }
/* en bas de page, le pied de page se prolonge de la hauteur du bandeau : ses derniers liens ne restent pas dessous */
html.has-cookie-banner .site-footer { border-bottom: var(--cookie-h, 0px) solid var(--basalt); }
html.has-shop-bar { scroll-padding-top: calc(var(--header-h) + var(--shop-bar-h, 0px) + 24px); }
html, body { overflow-x: clip; }
body { min-height: 100vh; min-height: 100dvh; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Chiffres alignés pour prix, dates, tailles et mesures (un raccourci « font: » les remet à « normal » : Source Sans est alors déjà en chiffres alignés). */
html { font-variant-numeric: lining-nums; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* Spécificité nulle : une classe de page qui pose un padding ou une puce sur une liste role="list" l'emporte toujours. */
:where(ul[role='list'], ol[role='list']) { list-style: none; padding: 0; }
.list-reset { list-style: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, blockquote, figcaption { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; padding: 0; min-width: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ==========================================================================
   4. BASE & TYPOGRAPHIE FLUIDE
   ========================================================================== */
body {
  background-color: var(--marble);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem); /* 15 → 17 px */
  font-weight: 400;
}
html.is-locked, html.is-locked body, html.has-intro, html.has-intro body { overflow: hidden; }
html.is-locked { scrollbar-gutter: stable; }

h1, h2, h3, h4 { font-family: var(--font-caps); font-weight: 600; text-transform: uppercase; line-height: 1.15; letter-spacing: 0.1em; }
h1 { font-size: clamp(1.7rem, 1.3rem + 2.1vw, 2.9rem); font-weight: 700; letter-spacing: 0.08em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 700; letter-spacing: 0.08em; }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); letter-spacing: 0.12em; }
h4 { font-size: 0.9rem; letter-spacing: 0.16em; }
p + p { margin-top: 1em; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
/* Titres : l'accent (<em>) reste droit et se signale par la couleur (voix brute, aucune italique dans les titres) */
:is(h1, h2, h3, h4, h5, h6) :is(em, i) { font-style: normal; color: var(--accent); }
small { font-size: 0.8125em; }
hr { border: 0; height: 1px; background: var(--rule); margin: var(--space-7) 0; }
::selection { background: var(--gold); color: var(--ink); }
.is-dark ::selection, .section--dark ::selection { background: var(--gold-light); color: var(--ink); }

/* Focus : anneau or, visible au clavier uniquement */
:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }   /* --accent : 5,3:1 sur marbre (WCAG 1.4.11), or clair sur fond sombre */

/* Barre de défilement discrète */
html { scrollbar-width: thin; scrollbar-color: var(--stone) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stone); border: 3px solid var(--marble); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Lien d'évitement */
.skip-link {
  position: fixed; left: 16px; top: -120px; z-index: calc(var(--z-intro) + 1);
  background: var(--ink); color: var(--marble); padding: 14px 22px;
  font: 600 12px/1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 16px; }
.skip-link:focus-visible { outline-color: var(--gold-light); outline-offset: -5px; }   /* anneau sur son propre fond encre : toujours contrasté, quelle que soit la page dessous */

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.container, .container--narrow, .container--wide {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.section { position: relative; padding-block: var(--section-y); background-color: var(--bg); color: var(--fg); }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section sombre : basalte + marbre noir en très faible opacité */
.section--dark { position: relative; isolation: isolate; overflow: clip; }
.section--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/textures/marble-dark.webp) center / cover no-repeat;
  opacity: 0.055; mix-blend-mode: screen;
}
/* Section claire texturée (marbre) */
.section--marble { isolation: isolate; }
.section--marble::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/textures/marble-light.webp) center / cover no-repeat; opacity: 0.55;
}
.section--alt { background-color: var(--marble-2); }
.section--dark.section--alt { background-color: var(--basalt-2); }

/* Tête de section : eyebrow + titre + chapô */
.section-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: clamp(32px, 5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); } }

/* Grille 12 colonnes */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid--2, .grid--3, .grid--4, .grid--products { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
.grid--products { --cols: 4; row-gap: clamp(32px, 4vw, 56px); }
.grid--center { align-items: center; }
.grid--gap-lg { gap: clamp(32px, 5vw, 80px); }
@media (max-width: 1100px) { .grid--4 { --cols: 2; } .grid--products { --cols: 3; } }
@media (max-width: 860px) { .grid--3 { --cols: 2; } .grid--products { --cols: 2; } }
@media (max-width: 640px) { .grid--2, .grid--3 { --cols: 1; } }
@media (max-width: 480px) { .grid--4 { --cols: 1; } .grid--products { column-gap: 12px; } }

/* Étendues sur la grille 12 colonnes (≥ 900 px ; plein largeur en dessous) */
.span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .span-3 { grid-column: auto / span 3; } .span-4 { grid-column: auto / span 4; } .span-5 { grid-column: auto / span 5; }
  .span-6 { grid-column: auto / span 6; } .span-7 { grid-column: auto / span 7; } .span-8 { grid-column: auto / span 8; }
  .span-9 { grid-column: auto / span 9; } .span-12 { grid-column: 1 / -1; }
  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
}

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-7); }
.stack--xl { --stack-gap: var(--space-9); }
.stack > * { margin-block: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-4)); }
.cluster--sm { --cluster-gap: var(--space-2); }
.cluster--lg { --cluster-gap: var(--space-6); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

/* Rapports d'image */
.ratio-4-5 { aspect-ratio: 4 / 5; } .ratio-3-4 { aspect-ratio: 3 / 4; } .ratio-1-1 { aspect-ratio: 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-3-2 { aspect-ratio: 3 / 2; } .ratio-21-9 { aspect-ratio: 21 / 9; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   6. TYPOGRAPHIE UTILITAIRE
   ========================================================================== */
/* Voix brute (CHARTE §0.2) : Source Sans 3 Black en capitales, interlettrage serré, aucune italique.
   L'accent d'un titre (<em>) reste droit et se distingue par la couleur (--accent : or foncé sur clair, or clair sur sombre). */
.display-1,
.display-2 { font-family: var(--font-sans); font-weight: 900; text-transform: uppercase; letter-spacing: var(--brut-track-xl); line-height: 0.96; }
.display-1 { font-size: clamp(2.375rem, 5vw, 5rem); }
/* Échelles de titre de page : vitrine (Maison, Collections, Journal) et utilitaire (boutique, service client, légal). */
h1.page-title--showcase { font-size: clamp(2.5rem, 5vw, 5rem); }
h1.page-title--utility { font-size: clamp(2.375rem, 3.75vw, 4rem); }
.display-2 { font-size: clamp(1.875rem, 3.5vw, 3.25rem); letter-spacing: var(--brut-track-l); line-height: 1; }
.display-1 em, .display-2 em, .title-serif em, .serif em, .lead em, .lead i, .quote em, .empty-state__title em, .tagline em, .latin em { font-style: normal; color: var(--accent); }
.h1, .h2, .h3, .h4 { font-family: var(--font-caps); font-weight: 600; text-transform: uppercase; line-height: 1.15; letter-spacing: 0.1em; }
.h1 { font-size: clamp(1.7rem, 1.3rem + 2.1vw, 2.9rem); font-weight: 700; letter-spacing: 0.08em; }
.h2 { font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 700; letter-spacing: 0.08em; }
.h3 { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); letter-spacing: 0.12em; }
.h4 { font-size: 0.9rem; letter-spacing: 0.16em; }
/* Mot-clé Black en capitales, écho du logo (à utiliser très rarement, en grand) */
.caps-black { font-family: var(--font-sans); font-weight: 900; text-transform: uppercase; letter-spacing: var(--brut-track-m); line-height: 1; }
/* Accroche brute : la référence validée (.hero__tagline de l'accueil), pour devises, citations courtes, confirmations (≤ 12 mots) */
.tagline { font: 900 clamp(1.1rem, 0.75rem + 1.1vw, 1.75rem)/1.12 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; text-wrap: balance; }
/* Titre de bloc (nom historique « title-serif ») : voix brute, un cran sous .display-2 */
.title-serif { font-family: var(--font-sans); font-weight: 900; text-transform: uppercase; letter-spacing: var(--brut-track-m); line-height: 1.02; font-size: clamp(1.5rem, 0.875rem + 1.6vw, 2.25rem); }

/* Surtitre : un petit losange plein d'or le précède (forme pleine, plus de filet) ; avec un numéro (.eyebrow__num), le losange le suit */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 0.75rem/1.4 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before, .eyebrow__num::after { content: ''; flex: none; width: 6px; height: 6px; background: var(--accent-line); transform: rotate(45deg); }
.eyebrow:has(> .eyebrow__num)::before, .product-card__collection::before { display: none; }
.eyebrow__num { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ''; flex: none; width: 6px; height: 6px; background: var(--accent-line); transform: rotate(45deg); }
.eyebrow--center:has(> .eyebrow__num)::after, .eyebrow--bare::before, .eyebrow--bare::after { display: none; }

/* Chapô : grotesque droite 600 en casse normale (plus lisible que des capitales au-delà d'une ligne) */
.lead { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.0625rem, 0.92rem + 0.5vw, 1.375rem); line-height: 1.4; letter-spacing: 0; color: var(--fg); }
/* Nom historique : grotesque droite 600 en casse normale, sans italique (interligne des chapôs et des gloses) */
.serif { font-family: var(--font-sans); font-weight: 600; line-height: 1.4; }
/* Mot fort dans une voix déjà grasse (chapô 600, citation 700, devise et accroche 900) : la règle générique « strong { 600 } » l'effacerait ou l'allégerait → Black */
:is(.lead, .serif, .quote, .tagline, .latin) :is(strong, b) { font-weight: 900; }
.italic { font-style: italic; }
.caps { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.12em; }
/* Devise latine : capitales Black, comme une légende frappée (la traduction reste en texte courant) */
.latin { font-family: var(--font-sans); font-style: normal; font-weight: 900; font-size: clamp(1rem, 0.85rem + 0.45vw, 1.25rem); line-height: 1.12; letter-spacing: var(--brut-track-s); text-transform: uppercase; color: var(--fg); }
.latin__fr { display: block; margin-top: 6px; font: 400 0.8125rem/1.5 var(--font-sans); font-style: normal; letter-spacing: 0.04em; text-transform: none; color: var(--fg-muted); }
.engraved { font-family: var(--font-engraved); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.42em; color: var(--accent); }
.numeral { font-family: var(--font-sans); font-weight: 900; font-size: clamp(4rem, 9.5vw, 9.5rem); line-height: 0.8; letter-spacing: var(--brut-track-xl); color: var(--numeral-fill); opacity: 1; user-select: none; }   /* aplat « pierre » opaque (GRAMMAIRE §8) */
.muted { color: var(--fg-muted); }
/* Prix : grotesque 600, chiffres tabulaires (colonnes alignées) ; les totaux passent en 700 */
.price { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.text-gold { color: var(--accent); }
.text-center { text-align: center; } .text-right { text-align: right; }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 2em; }
.prose a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.to-fill { background: rgba(184, 151, 90, 0.26); border: 0; padding: 0 4px; font-style: normal; }
/* Lettrine massive sur trois lignes de texte courant (interligne 1,65) : (2 × 1,65 + 0,66) / 0,66 ≈ 5,9em ; autre interligne → recalculer.
   flow-root : un paragraphe de moins de trois lignes contient sa lettrine au lieu de la laisser mordre sur le bloc suivant (liste, titre). */
.dropcap { display: flow-root; }
.dropcap::first-letter { font-family: var(--font-sans); font-weight: 900; font-style: normal; font-size: 5.9em; line-height: 0.8; float: left; padding: 0.03em 0.08em 0 0; color: var(--accent); }

/* ---- Logos officiels (CHARTE §0.1) : span masqué, couleur = `color`, mis en cache par le navigateur ----
   <span class="logo-mark logo-mark--wordmark" role="img" aria-label="THE DISCIPLINE" style="--logo-h:18px"></span>
   Taille : --logo-h (hauteur) OU --logo-w (largeur) ; l'autre côté suit le rapport officiel. Couleur : color / .logo-mark--ivory|--ink|--gold. */
.logo-mark {
  --logo-ar: 1;
  display: inline-block; flex: none; vertical-align: middle;
  width: var(--logo-w, calc(var(--logo-h, 24px) * var(--logo-ar)));
  aspect-ratio: var(--logo-ar);
  background-color: currentColor;
  -webkit-mask: var(--logo-src) no-repeat center / contain; mask: var(--logo-src) no-repeat center / contain;
}
.logo-mark--monogram { --logo-src: url(/assets/brand/logo-monogram.svg); --logo-ar: 1.1592; }   /* 597 × 515 */
.logo-mark--wordmark { --logo-src: url(/assets/brand/logo-wordmark.svg); --logo-ar: 9.1522; }   /* 1263 × 138 */
.logo-mark--stacked  { --logo-src: url(/assets/brand/logo-stacked.svg);  --logo-ar: 3.3166; }   /* 917 × 276,5 */
.logo-mark--laurel   { --logo-src: url(/assets/brand/logo-laurel.svg);   --logo-ar: 2.2553; }   /* 286,2 × 126,9 */
.logo-mark--ivory { color: var(--marble); }
.logo-mark--ink { color: var(--ink); }
.logo-mark--gold { color: var(--gold); }

/* ==========================================================================
   7. ORNEMENTS
   ========================================================================== */
/* Décors pleins en CSS : même grammaire que les SVG (docs/da/GRAMMAIRE.md), couleur = --decor.
   Les SVG de marque sont utilisés en masque (la couleur reste pilotée par --decor). */
/* Séparateur : deux barres massives de part et d'autre d'un losange plein (seul accent d'or) */
.divider { position: relative; height: 14px; margin-block: var(--space-6); color: var(--accent-line); background: linear-gradient(90deg, var(--decor) 0 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), var(--decor) calc(50% + 22px)) center / 100% 4px no-repeat; }
.divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.divider--short { width: 140px; margin-inline: auto; }
.divider--left { margin-left: 0; margin-right: auto; }
/* Variante laurier : une branche pleine au centre, entre deux barres */
.divider--laurel { height: 36px; background: linear-gradient(90deg, var(--decor) 0 calc(50% - 124px), transparent calc(50% - 124px) calc(50% + 124px), var(--decor) calc(50% + 124px)) center / 100% 4px no-repeat; }
.divider--laurel::after { width: 200px; height: 40px; background: var(--decor); transform: translate(-50%, -50%); -webkit-mask: url(/assets/brand/laurel-branch.svg) center / contain no-repeat; mask: url(/assets/brand/laurel-branch.svg) center / contain no-repeat; }

/* Frise méandre : bande pleine (la clé grecque est le vide). Tuile à largeur entière (le fichier est en preserveAspectRatio="none" : aucune couture) */
.meander { --mw: 26px; --mh: 21px; height: var(--mh); width: 100%; background: var(--decor); -webkit-mask: url(/assets/brand/meander.svg) left center / var(--mw) var(--mh) repeat-x; mask: url(/assets/brand/meander.svg) left center / var(--mw) var(--mh) repeat-x; }
.meander--sm { --mw: 20px; --mh: 16px; }
.meander--lg { --mw: 40px; --mh: 32px; }

/* Entablement : couronnement plein, répété (tuile 1200 × 172 -> 7 : 1) */
.entablature { --ew: 280px; --eh: 40px; height: var(--eh); width: 100%; background: var(--decor); -webkit-mask: url(/assets/brand/entablature.svg) left center / var(--ew) var(--eh) repeat-x; mask: url(/assets/brand/entablature.svg) left center / var(--ew) var(--eh) repeat-x; }
.entablature--sm { --ew: 168px; --eh: 24px; }
.entablature--lg { --ew: 448px; --eh: 64px; }

/* Cadre en arc (plein cintre) : forme pleine, sans filet intérieur ; la variante --outline ajoute un socle plein en arc derrière */
.frame-arch { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: var(--marble-2); }
.frame-arch > img, .frame-arch > svg, .frame-arch > picture { width: 100%; height: 100%; object-fit: cover; }
.frame-arch--outline { overflow: visible; background: none; box-shadow: 0 0 0 12px var(--decor-soft); }   /* socle plein en arc (aplat, sans flou) */

/* Cannelures décoratives : fût plein, cannelures en creux (fentes arrondies par le masque) */
.fluted { position: relative; background: var(--decor); -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 22px); mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 22px); }

/* Fond marbre clair */
.marble-bg { background: var(--marble) url(/assets/textures/marble-light.webp) center / cover no-repeat; }
/* Grain : calque de texture au-dessus du contenu de fond (le parent doit être positionné) */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(/assets/textures/grain.png) repeat; opacity: 0.35; }

/* ==========================================================================
   8. BOUTONS & LIENS
   ========================================================================== */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-border: currentColor;
  --btn-fill: var(--gold); --btn-fill-fg: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 clamp(24px, 3vw, 36px);
  font: 600 0.78rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  outline: 2px solid transparent; outline-offset: -2px;
  transition: color 380ms var(--ease-in-out) 110ms, border-color 460ms var(--ease-in-out), transform var(--dur-0) var(--ease), outline-color var(--dur-1) var(--ease), outline-offset 420ms var(--ease-out);
}
/* Remplissage qui balaie le bouton : il entre par la gauche au survol et ressort par la droite à la sortie (l’origine change sans transition) */
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleX(0); transform-origin: right center; transition: transform 560ms var(--ease-in-out); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); border-color: var(--btn-fill); }
/* Reflet doré discret sur les boutons dorés, primaires et clairs : une bande de lumière traverse le bouton au survol */
.btn::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transform: translateX(-115%); background: linear-gradient(105deg, transparent 38%, rgba(240, 221, 170, 0.5) 50%, transparent 62%); }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover::after, .btn--primary:hover::after, .btn--light:hover::after { opacity: 1; transform: translateX(115%); transition: transform 1100ms var(--ease-in-out) 160ms, opacity 120ms linear 160ms; }
}
/* Pression : le bouton se pose à 0,98 ; focus clavier : l’anneau doré s’écarte en douceur */
.btn:active { transform: scale(0.98); transition-duration: 380ms, 460ms, 90ms, var(--dur-1), 420ms; }
.btn:focus-visible { outline-color: var(--accent); outline-offset: 4px; }
.btn .icon { width: 16px; height: 16px; transition: transform 560ms var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--marble); --btn-border: var(--ink); --btn-fill: var(--gold); --btn-fill-fg: var(--ink); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-border: var(--gold); --btn-fill: var(--ink); --btn-fill-fg: var(--gold-light); }
.btn--outline { --btn-border: var(--rule-strong); --btn-fill: var(--ink); --btn-fill-fg: var(--marble); }
.section--dark .btn--outline, .is-dark .btn--outline { --btn-fill: var(--marble); --btn-fill-fg: var(--ink); }
.btn--ghost { --btn-border: transparent; --btn-fill: transparent; padding-inline: 8px; }
.btn--ghost:hover { color: var(--accent); border-color: transparent; }
.btn--light { --btn-bg: var(--marble); --btn-fg: var(--ink); --btn-border: var(--marble); --btn-fill: var(--gold); --btn-fill-fg: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding-inline: 20px; font-size: 0.66rem; }
.btn--lg { min-height: 62px; padding-inline: 44px; font-size: 0.78rem; }

/* Lien dont le soulignement se trace au survol */
.link-line { position: relative; display: inline-block; padding-bottom: 3px; font-weight: 400; letter-spacing: 0.02em; }
.link-line::before, .link-line::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; }
.link-line::before { background: currentColor; opacity: 0.28; }
/* Le filet doré se trace de gauche à droite à l’entrée et se retire vers la droite à la sortie (l’origine change sans transition) */
.link-line::after { background: var(--accent-line); transform: scaleX(0); transform-origin: right; transition: transform 640ms var(--ease-in-out); }
.link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 600 0.72rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); transition: color var(--dur-1) var(--ease); }
.link-arrow .icon { width: 16px; height: 16px; transition: transform 600ms var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(6px); }
/* Zone tactile ≥ 44 px : le soulignement reste collé au texte. */
@media (max-width: 900px), (pointer: coarse) { .link-line { padding-block: 11px; } .link-line::before, .link-line::after { bottom: 9px; } }
@media (max-width: 900px), (pointer: coarse) { .link-arrow { min-height: 44px; } }

/* ==========================================================================
   9. ÉTIQUETTES
   ========================================================================== */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 3rem; height: 3rem; stroke-width: 1; }

.badge { display: inline-flex; align-items: center; padding: 6px 10px 5px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--marble); border-radius: var(--radius-sm); }
.badge--gold { background: var(--gold); color: var(--ink); }
.badge--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.section--dark .badge:not(.badge--gold):not(.badge--outline) { background: var(--marble); color: var(--ink); }

.tag { display: inline-flex; align-items: center; padding: 6px 12px; font: 400 0.72rem/1 var(--font-sans); letter-spacing: 0.1em; color: var(--fg-muted); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
/* Puce : la teinte de sélection monte du bas (transform), le texte s’inverse en fondu */
.chip { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 400 0.78rem/1 var(--font-sans); letter-spacing: 0.08em; color: var(--fg); border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: transparent; cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: color 420ms var(--ease-in-out), border-color 420ms var(--ease-in-out), transform var(--dur-0) var(--ease), outline-color var(--dur-1) var(--ease), outline-offset 420ms var(--ease-out); }
.chip::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--fg); transform: translateY(101%); transition: transform 520ms var(--ease-in-out); }
.chip:hover { border-color: var(--fg); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline-color: var(--accent); outline-offset: 3px; }
.chip.is-active, .chip[aria-pressed='true'], .chip[aria-current='true'] { color: var(--bg); border-color: var(--fg); }
.chip.is-active::before, .chip[aria-pressed='true']::before, .chip[aria-current='true']::before { transform: none; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; list-style: none; padding: 0; font: 600 0.7rem/1.4 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 12px; }
.breadcrumb li + li::before { content: ''; width: 5px; height: 5px; background: var(--accent-line); transform: rotate(45deg); }
.breadcrumb a { transition: color var(--dur-1); }
/* Cible tactile de 44 px sans décaler la mise en page : on étend la zone par marge négative compensée. */
@media (max-width: 900px), (pointer: coarse) { .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; } }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--fg); }

/* ==========================================================================
   10. FORMULAIRES
   ========================================================================== */
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field__label { font: 600 0.7rem/1.3 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }
.field__hint { font-size: 0.8125rem; color: var(--fg-muted); }
.field__error { font-size: 0.8125rem; color: var(--danger); display: none; }
.section--dark .field__error { color: #E39B9B; }
.field.is-invalid .field__error, .field__error.is-visible { display: block; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }

.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font: 400 0.95rem/1.4 var(--font-sans); color: var(--fg);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  transition: border-color 360ms var(--ease), box-shadow 480ms var(--ease-out), background var(--dur-1) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: 0.8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg); }
/* Focus : bordure et anneau pleins en or lisible (≥ 3:1 sur clair comme sur sombre), plus de halo translucide */
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.textarea { min-height: 150px; resize: vertical; }
.select { min-height: 52px; padding-right: 44px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; cursor: pointer; }
.select option { color: var(--ink); background: var(--marble); }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: 0.5; cursor: not-allowed; }
.input-group { display: flex; }
.input-group .input { border-right: 0; }
.input-group .btn { min-height: 52px; }

.checkbox, .radio { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 0.875rem; line-height: 1.5; }
.checkbox input, .radio input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; top: 0; left: 0; cursor: pointer; }
.checkbox__box, .radio__dot { flex: none; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border: 1px solid var(--field-border); background: var(--field-bg); outline: 2px solid transparent; outline-offset: -2px; transition: background 320ms var(--ease), border-color 320ms var(--ease), transform var(--dur-0) var(--ease), outline-color var(--dur-1) var(--ease), outline-offset 420ms var(--ease-out); }
.radio__dot { border-radius: 50%; }
/* Coche qui se trace : la jambe courte d’abord, puis la longue (le trait est révélé de gauche à droite avant rotation) */
.checkbox__box::after { content: ''; width: 10px; height: 5px; border-left: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: translateY(-1px) rotate(-45deg); clip-path: inset(-2px 100% -2px -2px); transition: clip-path 140ms var(--ease-in-out); }
.radio__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); transform: scale(0); transition: transform 360ms var(--ease-out); }
.checkbox input:checked + .checkbox__box, .radio input:checked + .radio__dot { background: var(--fg); border-color: var(--fg); }
.checkbox input:checked + .checkbox__box::after { clip-path: inset(-2px -2px -2px -2px); transition: clip-path 380ms var(--ease-in-out) 90ms; }
.radio input:checked + .radio__dot::after { transform: scale(1); }
.checkbox input:active + .checkbox__box, .radio input:active + .radio__dot { transform: scale(0.92); }
.checkbox input:focus-visible + .checkbox__box, .radio input:focus-visible + .radio__dot { outline-color: var(--accent); outline-offset: 3px; }
@media (max-width: 900px), (pointer: coarse) { .checkbox, .radio { min-height: 44px; align-items: center; } .checkbox__box, .radio__dot { margin-top: 0; } .checkbox input, .radio input { top: 50%; transform: translateY(-50%); } .tabs [role='tab'] { min-width: 44px; min-height: 44px; text-align: center; } }

/* Interrupteur (cookies) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.switch__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 24px; border: 1px solid var(--field-border); background: transparent; outline: 2px solid transparent; outline-offset: -2px; transition: background 420ms var(--ease), border-color 420ms var(--ease), outline-color var(--dur-1) var(--ease), outline-offset 420ms var(--ease-out); }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: transform 480ms var(--ease-out), background 320ms var(--ease); }
.switch input:checked + .switch__track { background: var(--gold); border-color: var(--gold); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--ink); }
.switch input:disabled + .switch__track { opacity: 0.55; }
.switch input:focus-visible + .switch__track { outline-color: var(--accent); outline-offset: 3px; }

/* Quantité */
.qty { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--field-bg); }
.qty { overflow: hidden; }
.qty button { width: 40px; display: grid; place-items: center; color: var(--fg); transition: background 320ms var(--ease), color 320ms var(--ease), transform var(--dur-0) var(--ease); }
.qty button:hover { background: var(--fg); color: var(--bg); }
.qty button:active { transform: scale(0.9); }
.qty button .icon { width: 14px; height: 14px; }
.qty input, .qty output, .qty__value { width: 44px; min-width: 0; display: grid; place-items: center; text-align: center; border: 0; background: transparent; font: 400 0.9rem/1 var(--font-sans); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 36px; } .qty--sm button { width: 32px; } .qty--sm .qty__value { width: 32px; }
@media (pointer: coarse) { .qty button, .qty--sm button { width: 44px; } .qty--sm { height: 44px; } }

/* Pastille de couleur */
.swatch { --swatch: var(--ink); position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.swatch::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(15, 14, 12, 0.22); transition: transform 520ms var(--ease-out); }
/* Anneau doré de sélection : il se pose (de 0,78 à 1) en même temps qu’il apparaît */
.swatch::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(0.78); transition: opacity 280ms var(--ease), transform 520ms var(--ease-out); }
.swatch:hover::before { transform: scale(1.08); }
.swatch:active::before { transform: scale(0.94); transition-duration: 120ms; }
.swatch[aria-pressed='true']::after, .swatch.is-active::after, .swatch[aria-checked='true']::after { opacity: 1; transform: none; }
.swatch:focus-visible { outline-offset: 2px; border-radius: 50%; }
.swatch--sm { width: 24px; height: 24px; } .swatch--sm::before { width: 14px; height: 14px; }

/* Option de taille */
/* Taille : la teinte de sélection se pose (échelle 0,7 → 1 + fondu), le texte s’inverse en même temps */
.size-option { position: relative; isolation: isolate; min-width: 52px; height: 48px; padding: 0 14px; display: inline-grid; place-items: center; font: 400 0.82rem/1 var(--font-sans); letter-spacing: 0.06em; color: var(--fg); border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: color 360ms var(--ease), border-color 360ms var(--ease), transform var(--dur-0) var(--ease), outline-color var(--dur-1) var(--ease), outline-offset 420ms var(--ease-out); }
.size-option::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--fg); opacity: 0; transform: scale(0.7); transition: opacity 260ms var(--ease), transform 520ms var(--ease-out); }
.size-option:hover { border-color: var(--fg); }
.size-option:active { transform: scale(0.96); }
.size-option:focus-visible { outline-color: var(--accent); outline-offset: 3px; }
.size-option[aria-pressed='true'], .size-option.is-active, .size-option[aria-checked='true'] { color: var(--bg); border-color: var(--fg); }
.size-option[aria-pressed='true']::before, .size-option.is-active::before, .size-option[aria-checked='true']::before { opacity: 1; transform: none; }
.size-option:disabled, .size-option.is-disabled { color: var(--fg-muted); opacity: 0.5; cursor: not-allowed; overflow: hidden; }
.size-option:disabled::after, .size-option.is-disabled::after { content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 1px; background: currentColor; transform: rotate(-35deg); }

/* ==========================================================================
   11. COMPOSANTS
   ========================================================================== */
.card { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.card--lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--rule-strong); }
.card--flat { background: transparent; }
.section--dark .card { background: var(--basalt-2); }

/* Citation : grotesque droite 700 en casse normale (une citation peut être longue) ; .quote--caps pour une citation courte (≤ 12 mots) */
.quote { position: relative; margin: 0; padding-top: 44px; font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: clamp(1.1875rem, 0.95rem + 1vw, 1.75rem); line-height: 1.28; letter-spacing: -0.005em; color: var(--fg); text-wrap: pretty; }
.quote::before { content: '\201C'; position: absolute; top: -0.12em; left: 0; font-style: normal; font-weight: 900; font-size: 3.4em; line-height: 1; color: var(--accent-line); opacity: 0.7; }
/* text-wrap : une citation sans <p> échappe à « p { pretty } » ; la citation courte en capitales s'équilibre, <p> compris */
.quote--caps { font-weight: 900; font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2.125rem); line-height: 1.08; letter-spacing: var(--brut-track-m); text-transform: uppercase; text-wrap: balance; }
.quote--caps p { text-wrap: balance; }
.quote__author, .quote cite { display: block; margin-top: 24px; font: 600 0.72rem/1.4 var(--font-caps); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* Accordéon (details.accordion — animation pilotée par main.js) */
.accordion { border-bottom: 1px solid var(--rule); }
.accordion:first-of-type { border-top: 1px solid var(--rule); }
.accordion > summary { position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font: 600 0.8rem/1.4 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; transition: color 360ms var(--ease); }
.accordion > summary::-webkit-details-marker { display: none; }
/* Icône + / – : la barre horizontale reste, la verticale pivote et s’efface (le « + » devient « – ») */
.accordion > summary::before, .accordion > summary::after { content: ''; flex: none; width: 12px; height: 12px; }
.accordion > summary::before { order: 2; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; transition: transform 640ms var(--ease-out); }
.accordion > summary::after { position: absolute; right: 0; top: 50%; margin-top: -6px; background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform 640ms var(--ease-out), opacity 360ms var(--ease); }
.accordion[open] > summary::before { transform: rotate(180deg); }
.accordion[open] > summary::after { transform: rotate(90deg); opacity: 0; }
.accordion > summary:hover { color: var(--accent); }
.accordion > summary:active { transform: translateX(2px); transition: transform var(--dur-0) var(--ease); }
.accordion__content { overflow: hidden; padding: 0 0 26px; color: var(--fg-muted); max-width: 46rem; }
/* Le contenu se pose à l’ouverture : ses blocs montent légèrement, l’un après l’autre */
.accordion[open] > .accordion__content > * { animation: sp-acc-in 560ms var(--ease-out) both; }
.accordion[open] > .accordion__content > :nth-child(2) { animation-delay: 50ms; }
.accordion[open] > .accordion__content > :nth-child(3) { animation-delay: 100ms; }
.accordion[open] > .accordion__content > :nth-child(n+4) { animation-delay: 150ms; }
@keyframes sp-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.accordion__content > * + * { margin-top: 0.9em; }

/* Onglets */
.tabs__list { display: flex; gap: clamp(20px, 3vw, 44px); overflow-x: auto; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs [role='tab'] { position: relative; flex: none; padding: 16px 0; font: 600 0.75rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); transition: color 420ms var(--ease); }
.tabs [role='tab']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-line); transform: scaleX(0); transition: transform var(--dur-2) var(--ease); }
.tabs [role='tab']:hover { color: var(--fg); }
.tabs [role='tab'][aria-selected='true'] { color: var(--fg); }
.tabs [role='tab'][aria-selected='true']::after { transform: scaleX(1); }
/* Indicateur unique (posé par components.js) : il glisse et s’ajuste à la largeur de l’onglet choisi ; sans lui, le soulignement par onglet reste en repli */
[role='tablist'].has-indicator { position: relative; }
.tabs__indicator { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--accent-line); transform-origin: 0 50%; pointer-events: none; opacity: 0; transition: transform 640ms var(--ease-in-out), opacity 300ms var(--ease); }
.tabs [role='tablist'].has-indicator [role='tab']::after { display: none; }
.tabs [role='tabpanel'] { padding-top: var(--space-6); }
.tabs [role='tabpanel']:not([hidden]) { animation: sp-panel-in 640ms var(--ease-out) both; }
@keyframes sp-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Modale (<dialog class="modal">) */
.modal { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100% - 32px)); max-height: min(88vh, 900px); padding: 0; overflow: auto; color: var(--fg); background: var(--marble); border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--shadow-3); }
/* Entrée ET sortie : transitions + @starting-style (le dialogue reste affiché le temps de repartir). Navigateurs sans prise en charge : apparition directe. */
.modal { opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 360ms var(--ease), transform 520ms var(--ease-out), overlay 520ms allow-discrete, display 520ms allow-discrete; }
.modal[open] { opacity: 1; transform: none; }
.modal:not([open]) { pointer-events: none; }
@starting-style { .modal[open] { opacity: 0; transform: translateY(18px) scale(0.985); } }
.modal::backdrop { background: rgba(15, 14, 12, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 420ms var(--ease), overlay 520ms allow-discrete, display 520ms allow-discrete; }
.modal[open]::backdrop { opacity: 1; }
@starting-style { .modal[open]::backdrop { opacity: 0; } }
/* Le contenu arrive en cascade courte */
.modal[open] .modal__inner > :not(.modal__close) { animation: sp-acc-in 560ms var(--ease-out) both; animation-delay: 120ms; }
.modal[open] .modal__inner > :not(.modal__close):nth-child(3) { animation-delay: 170ms; }
.modal[open] .modal__inner > :not(.modal__close):nth-child(4) { animation-delay: 220ms; }
.modal[open] .modal__inner > :not(.modal__close):nth-child(n+5) { animation-delay: 270ms; }
.modal__inner { position: relative; padding: clamp(28px, 4vw, 52px); }
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--fg); transition: color 320ms var(--ease), transform 640ms var(--ease-out); }
.modal__close:hover { color: var(--accent); transform: rotate(90deg); }
.modal__title { margin-bottom: var(--space-4); }
.modal--dark { background: var(--basalt); --bg: var(--basalt); --fg: var(--marble); --fg-muted: var(--muted-dark); --rule: rgba(243, 239, 231, 0.2); --accent: var(--gold-light); --field-bg: rgba(243, 239, 231, 0.04); --field-border: rgba(243, 239, 231, 0.46); --rule-strong: rgba(243, 239, 231, 0.42); }

/* État vide */
.empty-state { display: grid; justify-items: center; gap: var(--space-4); padding: clamp(40px, 8vw, 96px) var(--space-5); text-align: center; }
.empty-state__icon { --logo-h: 56px; color: var(--accent-line); opacity: 0.85; }
.empty-state__title { font: 900 clamp(1.25rem, 0.95rem + 1vw, 1.75rem)/1.08 var(--font-sans); text-transform: uppercase; letter-spacing: var(--brut-track-m); }
.empty-state .empty-state__title { color: var(--fg); }   /* le titre reste en encre (le texte d'appoint de l'état vide est atténué) */
.empty-state p { max-width: 30rem; color: var(--fg-muted); }

/* Bandeau défilant (dupliqué par main.js) */
.marquee { position: relative; display: flex; overflow: hidden; user-select: none; --marquee-gap: clamp(32px, 5vw, 72px); --marquee-speed: 48s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { flex: none; display: flex; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap); min-width: 0; animation: marquee var(--marquee-speed) linear infinite; }
.marquee[data-marquee='reverse'] .marquee__track { animation-direction: reverse; }
.marquee[data-marquee='fast'] { --marquee-speed: 26s; }
.marquee[data-marquee='slow'] { --marquee-speed: 80s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; display: inline-flex; align-items: center; gap: var(--marquee-gap); white-space: nowrap; font: 900 clamp(1.125rem, 0.85rem + 1.2vw, 2rem)/1.2 var(--font-sans); letter-spacing: var(--brut-track-m); text-transform: uppercase; }
.marquee__item::after { content: ''; width: 9px; height: 9px; background: var(--accent-line); transform: rotate(45deg); flex: none; }
.marquee--caps .marquee__item { padding-block: 0.55em; font: 600 0.8rem/1.6 var(--font-caps); font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; }

/* Toasts */
.toasts { position: fixed; left: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: 10px; width: min(380px, calc(100% - 32px)); pointer-events: none; transform: translateY(0); transition: transform 700ms var(--ease-out); }
/* Au-dessus du bandeau cookies : on s’appuie sur sa hauteur réelle (--cookie-h, posée par cookies.js) */
body.has-cookie-banner .toasts { transform: translateY(calc(-1 * var(--cookie-h, 104px))); }
.toast { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--ink); color: var(--marble); border: 1px solid rgba(243, 239, 231, 0.2); border-radius: var(--radius-sm); box-shadow: var(--shadow-3); font-size: 0.875rem; line-height: 1.45; animation: sp-toast-in 640ms var(--ease-out) both; }
.toast .icon { width: 20px; height: 20px; color: var(--gold-light); }
.toast__logo { --logo-h: 20px; color: var(--gold-light); }
.toast__msg { flex: 1; }
.toast__close { width: 28px; height: 28px; display: grid; place-items: center; opacity: 0.6; transition: opacity var(--dur-1) var(--ease), transform 480ms var(--ease-out); }
.toast__close:hover { opacity: 1; transform: rotate(90deg); }
.toast__close .icon { width: 14px; height: 14px; color: inherit; }
.toast--success .icon { color: #A9C79B; }
.toast--error { border-color: rgba(227, 155, 155, 0.7); }
.toast--error .icon { color: #E39B9B; }
/* Barre pleine d'or : elle se vide pendant que la notification attend de se fermer (suspendu au survol et au focus) */
.toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform-origin: left center; animation: sp-toast-timer var(--toast-d, 4200ms) linear both; }
.toast--error .toast__timer { background: #E39B9B; }
.toast.is-paused .toast__timer { animation-play-state: paused; }
.toast.is-leaving { animation: sp-toast-out 340ms var(--ease-in-out) both; }
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sp-toast-out { to { opacity: 0; transform: translateX(-14px); } }
@keyframes sp-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) { .toasts { left: 16px; bottom: 16px; } }

/* ==========================================================================
   12. CARTE PRODUIT
   ========================================================================== */
.product-card { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; height: 100%; }
.product-card__media { position: relative; z-index: 3; aspect-ratio: 4 / 5; overflow: hidden; background: var(--marble-2); isolation: isolate; }
/* Deux fonds superposés : marbre clair, puis un fond pierre plus chaud qui apparaît au survol */
.product-card__bg { position: absolute; inset: 0; z-index: 0; background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover no-repeat; }
.product-card__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 252, 245, 0.55), rgba(207, 198, 182, 0.65)); opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.product-card:hover .product-card__bg::after, .product-card:focus-within .product-card__bg::after { opacity: 1; }
.product-card__media-link { position: absolute; inset: 0; z-index: 1; display: block; }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 1.1s var(--ease); will-change: transform; }
.product-card:hover .product-card__img, .product-card:focus-within .product-card__img { transform: scale(1.03); }
/* Vue « face » au survol (pointeurs capables de survol seulement ; ui/product-card.js pose l'image et .is-alt-ready une fois chargée).
   Calque absolu dans la même boîte 4:5 : aucun décalage. Un 1er visuel déjà « face », ou une illustration SVG : pas de calque, rien ne change. */
.product-card__img--alt { opacity: 0; pointer-events: none; }
.product-card__media.is-alt-ready .product-card__img { transition: transform 1.1s var(--ease), opacity var(--dur-3) var(--ease); }   /* le fondu n'existe qu'une fois la 2e vue prête : l'apparition de la 1re image reste celle des autres */
.product-card__img:not([data-fallback]) ~ .product-card__img--alt { display: none; }   /* photo de base en erreur (repli SVG) : on ne superpose rien */
@media (hover: hover) {
  .product-card:hover .product-card__media.is-alt-ready .product-card__img[data-fallback] { opacity: 0; }
  .product-card:hover .product-card__media.is-alt-ready .product-card__img--alt { opacity: 1; }
  .product-card:has(:focus-visible) .product-card__media.is-alt-ready .product-card__img[data-fallback] { opacity: 0; }
  .product-card:has(:focus-visible) .product-card__media.is-alt-ready .product-card__img--alt { opacity: 1; }
}
/* Repli d'image : monogramme officiel doré, discret (posé par shop.js) */
img.is-fallback { object-fit: contain; padding: 24%; opacity: 0.5; }
/* Photo produit en vignette de liste (page panier, récapitulatif de commande ; posée par fillProductArt) : remplit la tuile 4:5 sans décalage. */
.product-art__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.product-card__badge { position: absolute; top: 14px; left: 14px; z-index: 3; max-width: calc(100% - 68px); line-height: 1.25; }
@media (max-width: 560px) {
  /* Cartes étroites (grille à 2 colonnes) : le badge ne doit pas recouvrir le bouton favori. */
  .product-card__badge { top: 10px; left: 10px; padding: 5px 7px 4px; font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* Favori */
.product-card__wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); opacity: 0.75; transition: opacity var(--dur-1), transform var(--dur-2) var(--ease), color var(--dur-1); }
.product-card__wish .icon { width: 22px; height: 22px; transition: fill var(--dur-1), stroke var(--dur-1), transform var(--dur-2) var(--ease); }
.product-card__wish:hover { opacity: 1; transform: scale(1.08); }
.product-card__wish[aria-pressed='true'] { color: var(--gold-deep); opacity: 1; }
.product-card__wish[aria-pressed='true'] .icon { fill: currentColor; animation: heart-pop var(--dur-2) var(--ease); }

/* Ajout rapide */
.product-card__quick { --accent: var(--gold-ink); position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px; background: rgba(243, 239, 231, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--rule); transform: translateY(101%); visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
/* Une seule taille : le bouton apparaît au survol ou dès que la carte a le focus. Plusieurs tailles : survol (souris) ou panneau ouvert au clavier (.is-quick-open, product-card.js) */
.product-card:hover .product-card__quick, .product-card:focus-within .product-card__quick:not(.product-card__quick--sizes), .product-card.is-quick-open .product-card__quick { transform: none; visibility: visible; transition-delay: 0s; }
/* « Ajout rapide » au clavier : un seul arrêt de tabulation, visible seulement au focus clavier ; il laisse la place au panneau une fois ouvert */
.product-card__quick-toggle { position: absolute; left: 0; bottom: 0; z-index: 3; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }   /* masqué visuellement comme un lien d'évitement, mais bien dans la tabulation */
.product-card__quick-toggle .icon { width: 16px; height: 16px; }
.product-card__quick-toggle:focus-visible { --accent: var(--gold-ink); right: 0; width: auto; height: auto; min-height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: visible; clip-path: none; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: rgba(243, 239, 231, 0.94); border-top: 1px solid var(--rule); outline-offset: -5px; animation: sp-quick-in 360ms var(--ease-out) both; }
@keyframes sp-quick-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.product-card.is-quick-open .product-card__quick-toggle { visibility: hidden; }
.product-card__quick-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 40px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.product-card__quick-btn .icon { width: 16px; height: 16px; }
.product-card__quick-btn:hover { color: var(--gold-ink); }
.product-card__quick-label { display: block; margin-bottom: 10px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.product-card__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.product-card__size { min-width: 40px; height: 36px; padding: 0 8px; display: grid; place-items: center; font: 400 0.75rem/1 var(--font-sans); color: var(--ink); border: 1px solid rgba(15, 14, 12, 0.22); background: transparent; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.product-card__size:hover, .product-card__size:focus-visible { background: var(--ink); color: var(--marble); border-color: var(--ink); }
.product-card__size:focus-visible { outline-offset: 2px; }
@media (hover: none) { .product-card__quick, .product-card__quick-toggle { display: none; } .product-card__wish { opacity: 1; } }

/* Corps */
.product-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.product-card__collection { font-size: 0.68rem; letter-spacing: 0.24em; }
.product-card__name { font: 900 clamp(0.875rem, 0.8rem + 0.25vw, 1.0625rem)/1.18 var(--font-sans); text-transform: uppercase; letter-spacing: var(--brut-track-s); text-wrap: balance; }
/* Lien étendu : toute la carte est cliquable (zone tactile ≥ 44 px), les boutons (favori, ajout rapide : z-index 3) restent au-dessus. */
.product-card__name a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.product-card__name a { background: linear-gradient(var(--accent-line), var(--accent-line)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease); }
.product-card:hover .product-card__name a { background-size: 100% 1px; }
.product-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 4px; }   /* wrap : jusqu’à 7 coloris (Ala, Fama, Caelum) ne tiennent pas à côté du prix sur une carte de téléphone */
.product-card__price { font: 600 0.9375rem/1 var(--font-sans); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.product-card__swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.product-card__swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--swatch, var(--ink)); box-shadow: 0 0 0 1px var(--rule); }

/* Variantes */
/* Variante « dark » : cadre marbre clair (aplat, sans filet), pour que les pièces noires restent lisibles sur fond sombre. */
.product-card--dark .product-card__media { background: var(--marble-2); }
.product-card--dark .product-card__bg::after { background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 252, 245, 0.55), rgba(184, 151, 90, 0.35)); }
.section--dark .product-card__swatch, .product-card--dark .product-card__swatch { box-shadow: 0 0 0 1px rgba(243, 239, 231, 0.55); }
.product-card--compact { gap: 12px; }
.product-card--compact .product-card__name { font-size: 0.875rem; }
.product-card--compact .product-card__swatches { display: none; }

/* ==========================================================================
   13. EN-TÊTE, ANNONCE, MÉGA-MENU
   ========================================================================== */
.announce { position: relative; height: var(--announce-h); background: var(--ink); color: var(--marble); overflow: hidden; }
.announce__item { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 16px; text-align: center; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(70%); transition: opacity 520ms var(--ease), transform 760ms var(--ease-out); }
/* Rotation verticale : le message sortant monte et s’efface, le suivant arrive d’en dessous (header.js pose .is-leaving sur le sortant) */
.announce__item.is-active { opacity: 1; transform: none; transition-delay: 120ms; }
.announce__item.is-leaving { opacity: 0; transform: translateY(-70%); transition: opacity 420ms var(--ease), transform 620ms var(--ease-in-out); transition-delay: 0ms; }
.announce:not([data-ready]) .announce__item:first-child { opacity: 1; transform: none; }
@media (max-width: 480px) { .announce__item { font-size: 0.7rem; letter-spacing: 0.13em; } }
@media (max-width: 360px) { .announce__item { letter-spacing: 0.06em; padding: 0 8px; } }

.site-header {
  --hdr-fg: var(--ink); --hdr-bg: var(--marble); --hdr-rule: transparent;
  position: sticky; top: calc(var(--announce-h) * -1); z-index: var(--z-header);
  transform: translateY(var(--hy, 0)); transition: transform 760ms var(--ease-out);
}
.site-header__bar {
  position: relative; height: var(--header-h); color: var(--hdr-fg);
  background-color: var(--hdr-bg); border-bottom: 1px solid var(--hdr-rule);
  isolation: isolate;
  transition: background-color 640ms var(--ease-in-out), border-color 640ms var(--ease-in-out);
}
/* La couleur ne se fond que sur les feuilles qui la peignent (logo, liens, flèches, burger) : une transition de `color` sur la barre
   restylait les ~130 descendants à chaque image pendant 640 ms, à chaque passage sur une section sombre ou claire. */
.site-header__bar .logo-mark, .site-header__bar .nav-link { transition: color 640ms var(--ease-in-out); }
/* Flou d’arrière-plan porté par une couche à part : il apparaît en fondu (opacity) au lieu de claquer quand la barre passe en « défilée » */
.site-header__bar::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: opacity 640ms var(--ease-in-out); }
.site-header.is-scrolled { --hdr-bg: rgba(243, 239, 231, 0.88); --hdr-rule: rgba(15, 14, 12, 0.14); }
.site-header.is-scrolled .site-header__bar::after { opacity: 1; }
.site-header.is-hidden { --hy: -100%; transition-duration: 560ms; transition-timing-function: var(--ease-in-out); }
/* En-tête transparent au-dessus d'un héros sombre */
body[data-header='transparent'] .site-header { position: fixed; top: 0; left: 0; right: 0; --hdr-fg: var(--marble); --hdr-bg: transparent; --logo: var(--marble); --accent: var(--gold-light); }
body[data-header='transparent'] .site-header.is-scrolled { --hy: calc(var(--announce-h) * -1); --hdr-fg: var(--ink); --hdr-bg: rgba(243, 239, 231, 0.88); --logo: var(--ink); --accent: var(--gold-ink); }
body[data-header='transparent'] .site-header.is-scrolled.is-hidden { --hy: -100%; }
body[data-header='transparent'] .site-header:not(.is-scrolled) .site-header__bar { border-bottom-color: rgba(243, 239, 231, 0.14); }
/* Voile pleine largeur sous la barre transparente : aucun bord net, la lisibilité du logo est assurée sur toute la largeur. */
body[data-header='transparent'] .site-header:not(.is-scrolled):not(.has-open):not(.menu-open) .site-header__bar::before { content: ''; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 14, 12, 0.6), rgba(15, 14, 12, 0)); }
/* Barre défilante au-dessus d'une section sombre : version basalte (classe posée par header.js) */
.site-header.is-scrolled.on-dark:not(.has-open):not(.menu-open) { --hdr-fg: var(--marble); --hdr-bg: rgba(26, 24, 21, 0.9); --hdr-rule: rgba(243, 239, 231, 0.16); --logo: var(--marble); --accent: var(--gold-light); }
.site-header.is-scrolled.on-dark:not(.has-open):not(.menu-open) .icon-btn:hover { color: var(--gold-light); }
/* Mega-menu, menu mobile ou recherche ouverts : barre pleine */
.site-header.has-open, .site-header.menu-open { --hdr-fg: var(--ink); --hdr-bg: var(--marble); --hdr-rule: rgba(15, 14, 12, 0.14); --hy: 0 !important; --logo: var(--ink); --accent: var(--gold-ink); }
body[data-header='transparent'] .site-header.has-open, body[data-header='transparent'] .site-header.menu-open { --hy: 0 !important; }

.site-header__inner { height: 100%; width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.5vw, 40px); }

/* Logo : monogramme + mot-symbole officiels, ivoire sur en-tête transparent, encre sinon (couleur héritée de --hdr-fg) */
.logo { grid-column: 1; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; justify-self: start; color: currentColor; }
.logo__word { --logo-h: 18px; }
/* Reflet : une bande dorée traverse le mot-symbole au survol (le masque garde la forme des lettres ; seul le fond glisse) */
.logo__word, .footer__logo { background-image: linear-gradient(100deg, transparent 42%, rgba(205, 170, 100, 0.95) 50%, transparent 58%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 0% 0; }
@media (hover: hover) and (pointer: fine) { .logo:hover .logo__word, .logo:focus-visible .logo__word { animation: sp-sheen 1300ms var(--ease-in-out) both; } }
@keyframes sp-sheen { from { background-position: 90% 0; } to { background-position: 10% 0; } }
@media (max-width: 1240px) { .logo__word { --logo-h: 16px; } }
@media (max-width: 420px) { .logo__word { --logo-h: 14px; } }

/* Navigation */
.primary-nav { grid-column: 2; justify-self: center; min-width: 0; }
.primary-nav__list { display: flex; align-items: center; gap: clamp(18px, 2vw, 36px); list-style: none; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; height: var(--header-h); }
.nav-item--mega { position: static; }
.nav-link { position: relative; display: inline-flex; align-items: center; height: 44px; font: 600 0.75rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
/* Soulignement doré : il se trace de gauche à droite et se retire vers la droite (origine commutée sans transition) */
.nav-link::after { content: ''; position: absolute; left: 0; right: 0.22em; bottom: 8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 600ms var(--ease-in-out); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-item.is-open > .nav-link::after, .nav-link[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { width: 22px; height: 44px; margin-left: -2px; display: grid; place-items: center; color: currentColor; }
.nav-toggle .icon { width: 14px; height: 14px; transition: transform 560ms var(--ease-out), color 640ms var(--ease-in-out); }
.nav-item.is-open .nav-toggle .icon { transform: rotate(180deg); }
@media (max-width: 1240px) { .primary-nav { display: none; } }

/* Actions */
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: currentColor; transition: color 360ms var(--ease), transform 480ms var(--ease-out); }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--gold-deep); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); transition-duration: 360ms, var(--dur-0); }
body[data-header='transparent'] .site-header:not(.is-scrolled):not(.has-open):not(.menu-open) .icon-btn:hover { color: var(--gold-light); }
.count { position: absolute; top: 4px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; font: 600 0.66rem/1 var(--font-sans); letter-spacing: 0; color: var(--ink); background: var(--gold); border-radius: 17px; transform: scale(1); transition: transform 560ms var(--ease-out); }
.count[data-count='0'], .count.is-empty { transform: scale(0); }
/* Compte : pastille dorée quand une session d'aperçu est ouverte */
.icon-btn--account.is-signed-in::after { content: ''; position: absolute; top: 9px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); pointer-events: none; }
.count.is-bump { animation: heart-pop var(--dur-2) var(--ease); }
@media (max-width: 1240px) { .header-actions .icon-btn--account { display: none; } }
@media (max-width: 359px) { .header-actions .icon-btn--wish { display: none; } }

/* Burger -> croix : les barres se rejoignent au centre, puis pivotent (propriétés translate / rotate décalées dans le temps) ; la barre centrale se retire */
.burger { display: none; grid-column: 1; grid-row: 1; position: relative; width: 44px; height: 44px; justify-self: start; margin-left: -10px; color: currentColor; }
.burger span { position: absolute; left: 11px; right: 11px; top: 22px; height: 1.25px; background: currentColor; translate: 0 0; rotate: 0deg; scale: 1 1; transform-origin: 50% 50%; transition: translate 360ms var(--ease-out) 260ms, rotate 480ms var(--ease-out) 0ms, scale 360ms var(--ease-out) 120ms, opacity 240ms var(--ease) 120ms, color 640ms var(--ease-in-out); }
.burger span:nth-child(1) { translate: 0 -5px; } .burger span:nth-child(3) { translate: 0 5px; }
.burger[aria-expanded='true'] span { transition: translate 360ms var(--ease-out) 0ms, rotate 520ms var(--ease-out) 220ms, scale 300ms var(--ease-out) 0ms, opacity 200ms var(--ease) 0ms, color 640ms var(--ease-in-out); }
.burger[aria-expanded='true'] span:nth-child(1) { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; scale: 0 1; }
.burger[aria-expanded='true'] span:nth-child(3) { translate: 0 0; rotate: -45deg; }
@media (max-width: 1240px) { .burger { display: block; } .site-header__inner { grid-template-columns: 1fr auto 1fr; gap: 8px; } .logo { grid-column: 2; grid-row: 1; justify-self: center; } .header-actions { grid-row: 1; } }
/* Mobile étroit : burger | logo | recherche, favoris, panier. Le logo prend la piste centrale souple, jamais tronqué. */
@media (max-width: 520px) { .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; } .logo { justify-self: center; } .header-actions { gap: 0; } .icon-btn { width: 40px; } .burger { width: 40px; margin-left: -8px; } .burger span { left: 9px; right: 9px; } }
@media (min-width: 380px) and (max-width: 520px) { .icon-btn, .burger { width: 44px; } .burger span { left: 11px; right: 11px; } }

/* Méga-menu & menu déroulant */
/* Voile derrière le grand méga-menu (élément .mega-scrim posé par partials/header.html ; html.mega-open par header.js) */
.mega-scrim { position: fixed; inset: 0; z-index: calc(var(--z-header) - 5); background: rgba(15, 14, 12, 0.34); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 360ms var(--ease), visibility 0s linear 360ms; }
html.mega-open .mega-scrim { opacity: 1; visibility: visible; transition: opacity 560ms var(--ease-out); }
@media (max-width: 1240px) { .mega-scrim { display: none; } }
/* Panneau : sortie rapide, entrée longue et douce */
.mega, .dropdown { position: absolute; top: 100%; z-index: 2; color: var(--ink); background: var(--marble); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 240ms var(--ease), transform 320ms var(--ease-in-out), visibility 0s linear 320ms; }
.mega.is-open, .dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--ease), transform 640ms var(--ease-out); }
.mega { left: 0; right: 0; border-top: 1px solid var(--rule); }
.mega::before { content: ''; position: absolute; inset: 0; background: url(/assets/textures/marble-light.webp) center / cover; opacity: 0.45; pointer-events: none; }
.mega__inner { position: relative; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.15fr; gap: clamp(32px, 4vw, 72px); padding-block: clamp(32px, 4vw, 56px); }
.mega__title { margin-bottom: 20px; padding-bottom: 14px; font: 600 0.72rem/1 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid var(--rule); }
.mega__list { list-style: none; padding: 0; display: grid; gap: 4px; }
.mega__list a { position: relative; display: inline-block; padding: 6px 0; font-size: 0.9rem; color: var(--ink); transition: color 360ms var(--ease), transform 560ms var(--ease-out); }
.mega__list a:hover { color: var(--gold-ink); transform: translateX(6px); }
/* Cascade courte : titres et liens arrivent l’un après l’autre (rang --k posé par header.js, 36 ms par cran, 14 crans au plus) */
.mega__title, .mega__list > li { opacity: 0; transform: translateY(10px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.mega.is-open .mega__title, .mega.is-open .mega__list > li, .dropdown.is-open .mega__title, .dropdown.is-open .mega__list > li { opacity: 1; transform: none; transition: opacity 480ms var(--ease) calc(120ms + var(--k, 0) * 36ms), transform 640ms var(--ease-out) calc(120ms + var(--k, 0) * 36ms); }
.mega__list .is-all a { font-weight: 600; }
.mega__list .mega__collection { display: grid; gap: 1px; padding: 7px 0; }
.mega__collection strong { font: 600 0.8rem/1.3 var(--font-caps); letter-spacing: 0.16em; }
.mega__collection span { font: 400 0.875rem/1.3 var(--font-sans); color: var(--muted); }
.mega__feature { position: relative; display: grid; align-content: end; gap: 6px; min-height: 280px; padding: 24px; overflow: hidden; color: var(--marble); background: var(--basalt); isolation: isolate; }
/* L’illustration vedette se pose : elle monte de 18 px en se réduisant de 1,05 à 1 (plus de filet doré autour) */
.mega__feature img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; object-position: center 30%; padding: 18px 18px 90px; opacity: 0; transform: translateY(18px) scale(1.05); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.mega.is-open .mega__feature img { opacity: 1; transform: none; transition: opacity 700ms var(--ease) 200ms, transform 1200ms var(--ease-out) 200ms; }
.mega.is-open .mega__feature:hover img { transform: scale(1.04); transition: transform 1.2s var(--ease); }
.mega__feature::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 60% at 50% 35%, #3A362F, var(--basalt)); }
.mega__feature::after { content: ''; display: none; position: absolute; inset: 10px; border: 1px solid rgba(217, 192, 138, 0.5); pointer-events: none; opacity: 0; transform: scale(1.05); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.mega.is-open .mega__feature::after { opacity: 1; transform: none; transition: opacity 600ms var(--ease) 360ms, transform 1100ms var(--ease-out) 360ms; }
.mega__feature .eyebrow { color: var(--gold-light); font-size: 0.68rem; }
.mega__feature-title { font: 900 1.375rem/1.04 var(--font-sans); text-transform: uppercase; letter-spacing: var(--brut-track-m); }
.mega__feature-link { font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
.dropdown { left: -24px; min-width: 260px; padding: 20px 24px; border: 1px solid var(--rule); }
.dropdown .mega__list a { font-size: 0.9rem; }
.dropdown .mega__title { margin: 20px 0 10px; padding-bottom: 10px; }
.dropdown .mega__list + .mega__title { margin-top: 22px; }
.mega__list a[aria-current] { color: var(--gold-ink); }
@media (max-width: 1240px) { .mega, .dropdown { display: none; } }

/* ==========================================================================
   14. PIED DE PAGE
   ========================================================================== */
.site-footer { position: relative; color: var(--marble); background: var(--basalt); isolation: isolate; overflow: clip; --fg: var(--marble); --fg-muted: var(--muted-dark); --accent: var(--gold-light); --rule: rgba(243, 239, 231, 0.18); --line: var(--gold-light); --decor: var(--marble); --decor-soft: #34312C; --numeral-fill: #3A3732; --field-bg: rgba(243, 239, 231, 0.04); --field-border: rgba(243, 239, 231, 0.46); --rule-strong: rgba(243, 239, 231, 0.42); --bg: var(--basalt); }
.site-footer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/textures/marble-dark.webp) center / cover no-repeat; opacity: 0.055; mix-blend-mode: screen; pointer-events: none; }
.site-footer a { transition: color 360ms var(--ease); }
.site-footer a:hover { color: var(--gold-light); }

.newsletter { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 5vw, 72px); text-align: center; }
.newsletter__inner { display: grid; justify-items: center; gap: var(--space-5); }
.newsletter__title { font: 900 clamp(1.75rem, 1.1rem + 2.4vw, 2.875rem)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--brut-track-l); }
.newsletter__title em { color: var(--gold-light); font-style: normal; }
.newsletter__text { max-width: 36rem; color: var(--muted-dark); }
.newsletter__form { width: min(100%, 560px); display: grid; gap: var(--space-4); text-align: left; margin-top: var(--space-3); }
.newsletter__row { display: flex; gap: 0; }
.newsletter__row .input { border-right: 0; min-height: 56px; }
.newsletter__row .btn { min-height: 56px; }
.newsletter__legal { text-align: center; font-size: 0.8125rem; line-height: 1.55; color: var(--muted-dark); }
.newsletter__legal a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px), (pointer: coarse) { .newsletter__legal a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
.newsletter__msg { min-height: 1.5em; font-size: 0.9rem; color: var(--gold-light); }
.newsletter__msg.is-error { color: #E39B9B; }
/* Message : il monte et s’éclaircit à chaque changement (newsletter.js rejoue .is-in) */
.newsletter__msg.is-in .newsletter__msg-text { display: inline-block; animation: sp-msg-in 560ms var(--ease-out) both; }
@keyframes sp-msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Envoi : les champs s’effacent (.is-leaving), puis la confirmation prend leur place (.is-done) */
.newsletter__row, .newsletter__legal, .newsletter__form .checkbox { transition: opacity 320ms var(--ease), transform 360ms var(--ease-in-out); }
.newsletter__form.is-leaving .newsletter__row, .newsletter__form.is-leaving .newsletter__legal, .newsletter__form.is-leaving .checkbox { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.newsletter__form.is-done .newsletter__row, .newsletter__form.is-done .checkbox, .newsletter__form.is-done .newsletter__legal { display: none; }
.newsletter__form.is-done .newsletter__msg { display: grid; justify-items: center; gap: 14px; font: 900 1.0625rem/1.3 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; text-align: center; text-wrap: balance; }
/* Coche qui se trace : le cercle, puis le trait (pathLength = 1 posé en JS) */
.nl-check { width: 48px; height: 48px; color: var(--gold-light); }
.nl-check circle, .nl-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sp-trace 700ms var(--ease-in-out) 60ms forwards; }
.nl-check path { animation-duration: 480ms; animation-delay: 560ms; }
@keyframes sp-trace { to { stroke-dashoffset: 0; } }
.newsletter__form.is-done .newsletter__msg-text { animation-delay: 700ms; }
/* Rythme : si la page se termine par une section sombre, la lettre passe en marbre clair, entre deux bandes noires. */
main:has(> .section--dark:last-child) ~ .site-footer .newsletter,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter {
  position: relative; isolation: isolate; color: var(--ink); background-color: var(--marble);
  --fg: var(--ink); --fg-muted: var(--muted); --accent: var(--gold-ink); --rule: rgba(15, 14, 12, 0.17); --line: var(--gold); --decor: var(--ink); --decor-soft: #DDD7CB; --numeral-fill: #D5CFC2; --bg: var(--marble);
  --field-bg: rgba(255, 255, 255, 0.5); --field-border: #857E73; --rule-strong: rgba(15, 14, 12, 0.42);
}
main:has(> .section--dark:last-child) ~ .site-footer .newsletter::before,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(/assets/textures/marble-light.webp) center / cover no-repeat; opacity: 0.55; }
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__title em,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__title em { color: var(--gold-ink); }
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__text,
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__legal,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__text,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__legal { color: var(--muted); }
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__legal a,
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__msg,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__legal a,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__msg { color: var(--gold-ink); }
main:has(> .section--dark:last-child) ~ .site-footer .newsletter__msg.is-error,
main:has(> [data-pv-root] > .section--dark:last-child) ~ .site-footer .newsletter__msg.is-error { color: var(--danger); }
@media (max-width: 560px) { .newsletter__row { flex-direction: column; } .newsletter__row .input { border-right: 1px solid var(--field-border); border-bottom: 0; } }

.reassurance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding-block: clamp(32px, 4vw, 48px); border-block: 1px solid var(--rule); }
.reassurance__item { display: flex; align-items: center; gap: 16px; }
.reassurance__item .icon { width: 30px; height: 30px; color: var(--gold-light); stroke-width: 1; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .reassurance__item:hover .icon { transform: translateY(-2px); } }
.reassurance__title { display: block; font: 600 0.7rem/1.3 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.reassurance__text { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--muted-dark); line-height: 1.4; }
@media (max-width: 1000px) { .reassurance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .reassurance { grid-template-columns: 1fr; } }

.footer__main { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(32px, 4vw, 72px); padding-block: clamp(56px, 7vw, 96px); }
.footer__brand { display: grid; align-content: start; gap: var(--space-4); }
.footer__logo { --logo-w: min(100%, 300px); color: var(--marble); }
.footer__copy { margin: 0; }
.footer__motto { font: 900 1.25rem/1.1 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; }
.footer__motto small { display: block; margin-top: 8px; font: 400 0.8125rem/1.5 var(--font-sans); font-style: normal; letter-spacing: 0.04em; text-transform: none; color: var(--muted-dark); }
.footer__col h2 { margin-bottom: 20px; font: 600 0.72rem/1.5 var(--font-caps); letter-spacing: 0.18em; color: var(--gold-light); }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer__col a { position: relative; display: inline-block; font-size: 0.9rem; color: rgba(243, 239, 231, 0.82); }
/* Filet doré qui se trace sous le lien (entre par la gauche, ressort par la droite) */
.footer__col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold-light); transform: scaleX(0); transform-origin: right; transition: transform 560ms var(--ease-in-out); }
.footer__col a:hover::after, .footer__col a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* Logo empilé : un reflet doré le traverse une fois, quand le bloc arrive à l’écran (classe posée par l’apparition au défilement) */
.footer__brand.is-revealed .footer__logo { animation: sp-sheen 1900ms var(--ease-in-out) 650ms 1 both; }
.footer__brand .engraved { letter-spacing: 0.22em; white-space: nowrap; }
@media (max-width: 900px), (pointer: coarse) {
  .footer__col ul { gap: 0; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }
  .footer__col a::after { bottom: 10px; }
}
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 16px 28px; border-top: 1px solid var(--rule); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted-dark); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; padding: 0; }
.footer__legal a, .footer__legal button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 4px; }
.footer__legal a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 360ms var(--ease), color 360ms var(--ease); }
.footer__legal a:hover { text-decoration-color: currentColor; }
.footer__legal button { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 360ms var(--ease); }
.footer__legal button:hover { color: var(--gold-light); }
.site-footer .meander { background: var(--decor-soft); }
/* Tunnel d'achat (panier, commande) : pas de fuite de conversion, pied réduit à la marque et aux mentions légales. */
body[data-page='panier'] .newsletter, body[data-page='commande'] .newsletter,
body[data-page='panier'] .reassurance, body[data-page='commande'] .reassurance,
body[data-page='panier'] .footer__col, body[data-page='commande'] .footer__col { display: none; }
body[data-page='panier'] .footer__main, body[data-page='commande'] .footer__main { grid-template-columns: 1fr; padding-block: clamp(32px, 4vw, 48px); }
body[data-page='panier'] .footer__logo, body[data-page='commande'] .footer__logo { --logo-w: 200px; }
body[data-page='panier'] .footer__brand, body[data-page='commande'] .footer__brand { grid-auto-flow: column; justify-content: start; align-items: center; gap: 24px; }
@media (max-width: 640px) { body[data-page='panier'] .footer__brand, body[data-page='commande'] .footer__brand { grid-auto-flow: row; } }
@media (max-width: 1100px) { .footer__main { grid-template-columns: repeat(2, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__main { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

/* ==========================================================================
   15. OVERLAYS
   ========================================================================== */
/* ---- Tiroir panier ---- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; transition: visibility 0s linear 640ms; }
.drawer.is-open { visibility: visible; transition-delay: 0s; }
/* Voile : il se lève avant que le panneau n’arrive ; à la fermeture, le panneau part d’abord (sortie plus brève que l’entrée) */
.drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 14, 12, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 520ms var(--ease-in-out) 60ms; }
.drawer.is-open .drawer__backdrop { opacity: 1; transition: opacity 640ms var(--ease); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; color: var(--ink); background: var(--marble); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform 560ms var(--ease-in-out); }
.drawer.is-open .drawer__panel { transform: none; transition: transform 760ms var(--ease-out); }
/* Cascade d’ouverture (.is-opening posée par cart-drawer.js le temps de l’entrée) : en-tête, barre de livraison, lignes, totaux, boutons */
.drawer.is-opening .drawer__head, .drawer.is-opening .drawer__shipping, .drawer.is-opening .cart-line, .drawer.is-opening .drawer__foot > *, .drawer.is-opening .empty-state > * { animation: sp-rise 720ms var(--ease-out) both; }
.drawer.is-opening .drawer__head { animation-delay: 160ms; }
.drawer.is-opening .drawer__shipping { animation-delay: 230ms; }
.drawer.is-opening .cart-line { animation-delay: calc(300ms + var(--i, 0) * 70ms); }
.drawer.is-opening .drawer__foot > * { animation-delay: calc(380ms + var(--f, 0) * 60ms); }
.drawer.is-opening .drawer__foot > :nth-child(1) { --f: 0; } .drawer.is-opening .drawer__foot > :nth-child(2) { --f: 1; } .drawer.is-opening .drawer__foot > :nth-child(3) { --f: 2; } .drawer.is-opening .drawer__foot > :nth-child(4) { --f: 3; } .drawer.is-opening .drawer__foot > :nth-child(5) { --f: 4; }
.drawer.is-opening .empty-state > * { animation-delay: calc(300ms + var(--e, 0) * 90ms); }
.drawer.is-opening .empty-state > :nth-child(2) { --e: 1; } .drawer.is-opening .empty-state > :nth-child(3) { --e: 2; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.drawer .empty-state.is-arriving > * { animation: sp-rise 700ms var(--ease-out) both; }
.drawer .empty-state.is-arriving > :nth-child(2) { animation-delay: 90ms; }
.drawer .empty-state.is-arriving > :nth-child(3) { animation-delay: 180ms; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--rule); }
.drawer__title { display: flex; align-items: baseline; gap: 12px; font: 600 0.9rem/1 var(--font-caps); letter-spacing: 0.16em; }
.drawer__title small { font: 400 0.8rem/1 var(--font-sans); letter-spacing: 0.06em; color: var(--muted); text-transform: none; }
.drawer__close { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; transition: transform 640ms var(--ease-out), color 320ms var(--ease); }
.drawer__close:hover { transform: rotate(90deg); color: var(--gold-ink); }
.drawer__shipping { padding: 18px 28px; border-bottom: 1px solid var(--rule); background: var(--marble-2); }
.drawer__shipping-msg { font-size: 0.82rem; line-height: 1.4; }
.drawer__shipping-msg strong { font-weight: 600; color: var(--gold-ink); }
.drawer__progress { position: relative; height: 3px; margin-top: 12px; background: rgba(15, 14, 12, 0.12); overflow: hidden; }
.drawer__progress-bar { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 900ms var(--ease-out); }
/* Seuil atteint : un reflet doré traverse la barre, une seule fois (.is-shining posée par cart-drawer.js) */
.drawer__progress-bar::after { content: ''; position: absolute; inset: 0; opacity: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 30%, rgba(255, 244, 214, 0.95) 50%, transparent 70%); }
.drawer__progress.is-shining .drawer__progress-bar::after { animation: sp-bar-shine 1500ms var(--ease-in-out) 500ms 1 both; }
@keyframes sp-bar-shine { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px; }
.drawer__foot { padding: 22px 28px 28px; border-top: 1px solid var(--rule); background: var(--marble); display: grid; gap: 14px; }
.drawer__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.875rem; }
.drawer__row--total { font: 600 0.78rem/1 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.drawer__row--total .drawer__amount { font: 700 1.375rem/1 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.drawer__note { font-size: 0.75rem; color: var(--muted); }
.drawer__actions { display: grid; gap: 10px; }
.drawer .empty-state { position: relative; isolation: isolate; padding-block: 64px; }
/* Panier vide : deux pilastres pleins en teinte pierre encadrent le message (masque du décor de marque : aplat opaque, aucun trait).
   Ils s'élèvent depuis leur pied à l'ouverture (clip-path, une fois) ; le panier plein n'en a pas : l'état vide est masqué (display: none). */
.drawer .empty-state::before, .drawer .empty-state::after { content: ''; position: absolute; z-index: -1; bottom: 0; height: min(100%, 360px); aspect-ratio: 160 / 982.7; background: var(--decor-soft); -webkit-mask: url(/assets/brand/pilaster.svg) center bottom / 100% 100% no-repeat; mask: url(/assets/brand/pilaster.svg) center bottom / 100% 100% no-repeat; pointer-events: none; }
.drawer .empty-state::before { left: 0; }
.drawer .empty-state::after { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .drawer.is-opening .empty-state::before, .drawer.is-opening .empty-state::after, .drawer .empty-state.is-arriving::before, .drawer .empty-state.is-arriving::after { animation: sp-pilaster-rise 1000ms var(--ease-out) 240ms both; }
  .drawer.is-opening .empty-state::after, .drawer .empty-state.is-arriving::after { animation-delay: 320ms; }
}
@keyframes sp-pilaster-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 480px) { .drawer .empty-state::before, .drawer .empty-state::after { height: min(100%, 280px); } }
.cart-line { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__media { position: relative; aspect-ratio: 4 / 5; background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: 12px; }
.cart-line__name { font: 900 0.9375rem/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--brut-track-s); }
.cart-line__price { font: 600 0.9375rem/1.2 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-line__media img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cart-line:hover .cart-line__media img { transform: scale(1.04); } }
.cart-line__opts { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); }
.cart-line__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cart-line__remove { font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: color 360ms var(--ease); }
.cart-line__remove:hover { color: var(--danger); }
@media (max-width: 480px) { .drawer__head, .drawer__shipping, .drawer__body, .drawer__foot { padding-inline: 20px; } .cart-line { grid-template-columns: 72px 1fr; gap: 14px; } }

/* ---- Recherche plein écran ---- */
.search { position: fixed; inset: 0; z-index: var(--z-search); display: flex; flex-direction: column; overflow-y: auto; color: var(--ink); background: linear-gradient(rgba(243, 239, 231, 0.72), rgba(243, 239, 231, 0.72)), var(--marble) url(/assets/textures/marble-light.webp) center / cover; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity 360ms var(--ease-in-out), transform 480ms var(--ease-in-out), visibility 0s linear 480ms; }
.search.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 560ms var(--ease), transform 760ms var(--ease-out); }
/* Entrée : le champ, puis l’état, les suggestions ; le filet doré se trace sous le champ */
.search.is-open .search__top, .search.is-open .search__input, .search.is-open .search__status, .search.is-open .search__suggest > * { animation: sp-rise 720ms var(--ease-out) both; }
.search.is-open .search__top { animation-delay: 80ms; }
.search.is-open .search__input { animation-delay: 160ms; }
.search.is-open .search__status { animation-delay: 240ms; }
.search.is-open .search__suggest > * { animation-delay: calc(300ms + var(--s, 0) * 70ms); }
.search.is-open .search__suggest > :nth-child(2) { --s: 1; } .search.is-open .search__suggest > :nth-child(3) { --s: 2; } .search.is-open .search__suggest > :nth-child(4) { --s: 3; } .search.is-open .search__suggest > :nth-child(5) { --s: 4; }
.search__top { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); }
.search__mark { --logo-h: 28px; color: var(--ink); opacity: 0.85; }
.search__close { width: 48px; height: 48px; display: grid; place-items: center; margin-right: -12px; transition: transform 640ms var(--ease-out), color 320ms var(--ease); }
.search__close:hover { transform: rotate(90deg); color: var(--gold-ink); }
.search__inner { width: min(100% - 2 * var(--gutter), 1100px); margin: clamp(8px, 4vh, 48px) auto 64px; }
.search__field { position: relative; border-bottom: 1px solid var(--rule-strong); }
/* Barre pleine d’encre : elle se pose de gauche à droite à l’ouverture (et reste posée) ; c’est le repère du champ actif */
.search__field::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--ease-in-out); }
.search.is-open .search__field::after { transform: scaleX(1); transition: transform 1100ms var(--ease-in-out) 260ms; }
.search__input { width: 100%; caret-color: var(--gold); padding: 8px 56px 18px 0; font: 900 clamp(1.625rem, 0.9rem + 3.2vw, 3.5rem)/1.1 var(--font-sans); letter-spacing: var(--brut-track-l); text-transform: uppercase; color: var(--ink); background: transparent; border: 0; border-radius: 0; outline: none; }
.search__input::placeholder { color: rgba(15, 14, 12, 0.28); font-style: normal; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__field .icon { position: absolute; right: 0; top: 50%; width: 32px; height: 32px; transform: translateY(-65%); color: var(--gold-ink); }
.search__status { margin-top: 18px; min-height: 1.5em; font: 600 0.7rem/1.4 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.search__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: 8px; }
/* Résultat : seuls les nouveaux (.is-new, posée par search.js) arrivent, en cascade courte ; les autres ne bougent pas, d’où l’absence de clignotement */
.search__result { display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.search__result.is-new { animation: sp-rise 560ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms); }
.search__result-media { aspect-ratio: 4 / 5; background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; overflow: hidden; }
.search__result-media img { width: 100%; height: 100%; object-fit: contain; }
.search__result-name { display: block; font: 900 1rem/1.18 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; transition: color 360ms var(--ease), transform 560ms var(--ease-out); }
.search__result-meta { display: block; font: 600 0.7rem/1.4 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.search__result-price { font: 600 0.9375rem/1 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.search__result:hover .search__result-name { color: var(--gold-ink); transform: translateX(4px); }
.search__result-media img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .search__result:hover .search__result-media img { transform: scale(1.05); } }
.search__suggest { margin-top: 40px; display: grid; gap: 18px; }
.search__suggest-title { font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.search__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.search__collections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.search__collection { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--rule); transition: border-color 480ms var(--ease), background 480ms var(--ease), transform 640ms var(--ease-out); }
.search__collection:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.4); transform: translateY(-3px); }
.search__collection strong { font: 600 0.85rem/1.2 var(--font-caps); letter-spacing: 0.16em; }
.search__collection span { font: 400 0.9375rem/1.3 var(--font-sans); color: var(--muted); }
@media (max-width: 900px) { .search__results { grid-template-columns: 1fr; } .search__collections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .search__result { grid-template-columns: 52px 1fr auto; gap: 12px; } }

/* ---- Menu mobile plein écran ---- */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); color: var(--marble); background: transparent; visibility: hidden; transition: visibility 0s linear 760ms; }
.mobile-menu.is-open { visibility: visible; transition-delay: 0s; }
/* Rideau : un grand pan de basalte descend depuis le haut (translateY) ; une frise de méandre pleine borde son bord inférieur */
.mobile-menu__curtain { position: absolute; inset: 0; background: var(--basalt); transform: translateY(-101%); transition: transform 600ms var(--ease-in-out) 160ms; }
.mobile-menu__curtain::before { content: ''; position: absolute; inset: 0; background: url(/assets/textures/marble-dark.webp) center / cover; opacity: 0.06; mix-blend-mode: screen; pointer-events: none; }
.mobile-menu__curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 21px; background: var(--marble); -webkit-mask: url(/assets/brand/meander.svg) left center / 26px 21px repeat-x; mask: url(/assets/brand/meander.svg) left center / 26px 21px repeat-x; }
.mobile-menu.is-open .mobile-menu__curtain { transform: none; transition: transform 760ms var(--ease-in-out); }
.mobile-menu__scroll { position: relative; height: 100%; display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-6); overflow-y: auto; overscroll-behavior: contain; }
/* À la fermeture, tout le contenu (y compris un sous-menu ouvert) s’efface vite avant que le rideau ne remonte */
.mobile-menu__scroll { opacity: 0; transition: opacity 220ms var(--ease); }
.mobile-menu.is-open .mobile-menu__scroll { opacity: 1; transition: none; }
.mobile-menu__nav { display: grid; margin-block: auto; }
/* Liens : sortie rapide (sans cascade), entrée en cascade ; le filet de chaque ligne se trace de gauche à droite */
.mobile-menu__link, .mobile-menu summary { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font: 600 clamp(1.5rem, 6.5vw, 2.1rem)/1.1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; list-style: none; opacity: 0; transform: translateY(18px); transition: opacity 200ms var(--ease), transform 200ms var(--ease), color 320ms var(--ease); }
.mobile-menu__link::after, .mobile-menu summary::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(243, 239, 231, 0.16); transform: scaleX(0); transform-origin: left center; transition: transform 200ms var(--ease); }
.mobile-menu.is-open .mobile-menu__link, .mobile-menu.is-open summary { opacity: 1; transform: none; transition: opacity 640ms var(--ease) calc(260ms + var(--i, 0) * 70ms), transform 820ms var(--ease-out) calc(260ms + var(--i, 0) * 70ms), color 320ms var(--ease); }
.mobile-menu.is-open .mobile-menu__link::after, .mobile-menu.is-open summary::after { transform: none; transition: transform 900ms var(--ease-in-out) calc(300ms + var(--i, 0) * 70ms); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary .icon { width: 20px; height: 20px; color: var(--gold-light); transition: transform 560ms var(--ease-out); }
.mobile-menu details[open] summary .icon { transform: rotate(180deg); }
.mobile-menu__link[aria-current], .mobile-menu summary[aria-current] { color: var(--gold-light); }
.mobile-menu__sub { display: grid; gap: 2px; padding: 10px 0 18px 16px; }
.mobile-menu details.is-animating > .mobile-menu__sub { overflow: hidden; }
/* Sous-menu : la hauteur glisse (header.js) ; les liens montent l’un après l’autre */
.mobile-menu details[open] .mobile-menu__sub > * { animation: sp-rise 560ms var(--ease-out) both; animation-delay: calc(70ms + var(--j, 0) * 36ms); }
.mobile-menu__sub a { display: block; min-height: 44px; padding: 10px 0; font: 600 1.125rem/1.25 var(--font-sans); color: rgba(243, 239, 231, 0.85); transition: color 320ms var(--ease), transform 560ms var(--ease-out); }
.mobile-menu__sub a:hover { color: var(--gold-light); transform: translateX(4px); }
.mobile-menu__sub a small { display: block; font: 400 0.8rem/1.2 var(--font-sans); color: var(--muted-dark); }
.mobile-menu__sub .mobile-menu__label { margin: 14px 0 4px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.mobile-menu__foot { display: grid; gap: 20px; margin-top: var(--space-6); opacity: 0; transform: translateY(14px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; transition: opacity 640ms var(--ease) calc(260ms + var(--i, 5) * 70ms), transform 820ms var(--ease-out) calc(260ms + var(--i, 5) * 70ms); }
.mobile-menu__logo { --logo-h: 15px; color: var(--marble); opacity: 0.55; }
.mobile-menu__utility { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font: 600 0.72rem/1.2 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.mobile-menu__utility a, .mobile-menu__utility button { display: flex; align-items: center; min-height: 48px; padding-inline: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit; border-bottom: 1px solid rgba(243, 239, 231, 0.14); transition: color 320ms var(--ease); }
.mobile-menu__utility a:hover, .mobile-menu__utility button:hover { color: var(--marble); }
@media (min-width: 1241px) { .mobile-menu { display: none; } }

/* ---- Bandeau cookies ---- */
/* Bandeau : il se lève d’en bas (800 ms) pendant que sa frise de méandre se pose, puis le texte et les boutons montent ; sortie plus brève */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie); color: var(--marble); background: var(--ink); transform: translateY(110%); visibility: hidden; transition: transform 520ms var(--ease-in-out), visibility 0s linear 520ms; }
.cookie-banner::before { content: ''; position: absolute; left: 0; right: 0; top: -10.5px; height: 10.5px; background: var(--marble); -webkit-mask: url(/assets/brand/meander.svg) left center / 13px 10.5px repeat-x; mask: url(/assets/brand/meander.svg) left center / 13px 10.5px repeat-x; transform: scaleX(0); transform-origin: center; transition: transform 300ms var(--ease); }
.cookie-banner.is-visible { transform: none; visibility: visible; transition: transform 840ms var(--ease-out); }
.cookie-banner.is-visible::before { transform: none; transition: transform 1200ms var(--ease-in-out) 300ms; }
.cookie-banner.is-visible .cookie-banner__inner > div:first-child > *, .cookie-banner.is-visible .cookie-banner__actions > * { animation: sp-rise 640ms var(--ease-out) both; animation-delay: 420ms; }
.cookie-banner.is-visible .cookie-banner__inner > div:first-child > :nth-child(2) { animation-delay: 480ms; }
.cookie-banner.is-visible .cookie-banner__actions > :nth-child(1) { animation-delay: 540ms; }
.cookie-banner.is-visible .cookie-banner__actions > :nth-child(2) { animation-delay: 600ms; }
.cookie-banner__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: 20px; }
.cookie-banner__title { font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 8px; }
.cookie-banner__text { max-width: 54rem; font-size: 0.82rem; line-height: 1.55; color: rgba(243, 239, 231, 0.8); }
.cookie-banner__text a { color: var(--gold-light); text-decoration: underline; text-decoration-color: rgba(217, 192, 138, 0.4); text-underline-offset: 3px; transition: text-decoration-color 360ms var(--ease); }
.cookie-banner__text a:hover { text-decoration-color: var(--gold-light); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.cookie-banner .btn { --btn-border: rgba(243, 239, 231, 0.4); min-height: 44px; padding-inline: 22px; }
.cookie-banner .btn--light { --btn-border: var(--marble); }
@media (max-width: 800px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 18px; } .cookie-banner__actions .btn { flex: 1 1 auto; padding-inline: 14px; } }
.cookie-prefs { display: grid; gap: 0; margin-block: var(--space-5) var(--space-6); }
.cookie-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.cookie-prefs__row:last-child { border-bottom: 1px solid var(--rule); }
.cookie-prefs__row strong { display: block; font: 600 0.75rem/1.3 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; }
.cookie-prefs__row p { margin-top: 4px; font-size: 0.82rem; color: var(--fg-muted); }
.cookie-prefs__row .badge { margin: 6px 0 0; font-size: 0.66rem; }
.cookie-prefs__row--off strong { color: var(--fg-muted); }

/* ---- Intro animée (une fois par session) ---- */
.intro { display: none; }
html.js.has-intro .intro { position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center; overflow: hidden; color: var(--marble); background: var(--ink); cursor: pointer; animation: sp-intro-curtain 700ms var(--ease-in-out) 2100ms both, sp-intro-failsafe 0s 5s forwards; }
html.js.has-intro .intro.is-skipping { animation: sp-intro-skip 420ms var(--ease) both; }
.intro__stage { position: relative; display: grid; place-items: center; width: clamp(280px, 52vw, 780px); aspect-ratio: 3.3166; }
@media (max-width: 520px) { .intro__stage { width: min(78vw, 420px); } }
.intro__stage > * { grid-area: 1 / 1; }
/* Bord du rideau : une frise de méandre pleine l’accompagne pendant la levée (elle fait partie du rideau : elle monte avec lui) */
html.js.has-intro .intro::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 21px; pointer-events: none; background: var(--marble); -webkit-mask: url(/assets/brand/meander.svg) left center / 26px 21px repeat-x; mask: url(/assets/brand/meander.svg) left center / 26px 21px repeat-x; opacity: 0; animation: sp-intro-edge 700ms var(--ease-in-out) 2100ms both; }
/* Passage vers le héros : le logo s’efface et s’allège pendant que le rideau monte */
html.js.has-intro .intro__stage { animation: sp-intro-stage-out 620ms var(--ease-in-out) 2100ms both; }
/* Accueil : le logo se pose sur celui du héros (intro.js mesure --intro-w / -dx / -dy / -lift) et reste IMMOBILE pendant la levée du rideau :
   un contre-mouvement de même durée et même courbe annule la montée du rideau ; il s'efface ensuite, une fois le héros découvert.
   Aucune durée ne change (rideau à 2,1 s, retrait à 2,9 s). */
html.js.has-intro .intro.intro--aligned { overflow: visible; }
html.js.has-intro .intro--aligned .intro__stage { width: var(--intro-w, clamp(280px, 52vw, 780px)); translate: var(--intro-dx, 0px) var(--intro-dy, 0px); animation: sp-intro-hold 700ms var(--ease-in-out) 2100ms both, sp-intro-fade 340ms var(--ease-in-out) 2440ms both; }
@keyframes sp-intro-hold { to { translate: var(--intro-dx, 0px) calc(var(--intro-dy, 0px) + var(--intro-lift, 0px)); } }
@keyframes sp-intro-fade { to { opacity: 0; } }
/* L’en-tête apparaît dès que le rideau se lève (intro.js pose .is-intro-leaving) */
html.js.has-intro:not(.is-intro-done) .site-header { opacity: 0; }
html.js.has-intro.is-intro-leaving:not(.is-intro-done) .site-header { opacity: 1; transition: opacity 900ms var(--ease) 140ms; }
/* 1. le monogramme se révèle (balayage de gauche à droite), puis s'efface */
.intro__mono { --logo-h: clamp(120px, 18vw, 200px); color: var(--marble); opacity: 0; animation: sp-intro-mono 1050ms var(--ease-out) 80ms both; }
/* 2. le logo empilé prend la place ; les feuilles de laurier apparaissent une à une (SVG injecté par intro.js) */
.intro__stacked { width: 100%; color: var(--marble); opacity: 0; animation: sp-intro-stacked-in 480ms var(--ease-out) 760ms forwards; }
.intro__stacked > .logo-mark, .intro__stacked > svg { --logo-w: 100%; width: 100%; height: auto; display: block; }
.intro__stacked > svg { aspect-ratio: 917 / 276.5; }
.intro__stacked .leaf { transform-box: fill-box; transform-origin: 20% 90%; opacity: 0; animation: sp-intro-leaf 380ms var(--ease-out) both; animation-delay: calc(760ms + var(--i, 0) * 80ms); }
.intro__skip { position: absolute; right: 24px; bottom: 24px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); }
html.is-intro-done .intro { display: none !important; }
/* Images clés de l’intro (durées inchangées : feuilles visibles à 1,4 s, rideau à 2,1 s, retrait à 2,9 s) */
@keyframes sp-intro-mono { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.97); } 12% { opacity: 1; } 42% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } 74% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: scale(1.03); } }
@keyframes sp-intro-stacked-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-intro-leaf { from { opacity: 0; transform: translateY(10px) rotate(-8deg) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes sp-intro-curtain { to { transform: translateY(-101%); } }
@keyframes sp-intro-stage-out { to { opacity: 0; transform: translateY(-3%) scale(1.015); } }
@keyframes sp-intro-edge { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 1; } }
@keyframes sp-intro-skip { to { opacity: 0; visibility: hidden; } }
@keyframes sp-intro-failsafe { to { visibility: hidden; pointer-events: none; } }

/* Mouvement réduit — composants et superpositions : valeur finale directe, aucun décalage de cascade, pas de bords fondus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0ms !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .btn::after, .toast__timer, .mega-scrim { display: none; }
  .modal, .modal::backdrop { transition-duration: 0.01ms !important; }
  html.js.has-intro:not(.is-intro-done) .site-header { opacity: 1; }
}

/* ==========================================================================
   16. ANIMATIONS D'APPARITION
   Les états initiaux ne s'appliquent que sous html.js (posé par head.html) :
   sans JavaScript, tout reste visible. Filet de sécurité : html.no-reveal.
   ========================================================================== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes intro-mono { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.97); } 12% { opacity: 1; } 42% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } 74% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: scale(1.03); } }
@keyframes intro-stacked-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-leaf { from { opacity: 0; transform: translateY(10px) rotate(-8deg) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes intro-curtain { to { transform: translateY(-101%); } }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }

/* --- Apparition : état initial (sous html.js) → html.js [data-reveal].is-revealed ---
   Types : '' | up (montée 24 px) · fade (opacité) · rise (montée ample + léger flou, textes courts) ·
   left | right · scale · mask (rideau) · column (s'élève depuis sa base) · zoom (image qui se pose dans son cadre) ·
   line (filet qui se trace, data-line-origin="center|right"). Le délai (--reveal-delay) est posé par declarative.js (cascade par lot). */
html.js [data-reveal] { opacity: 0; transition: opacity 800ms var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html.js [data-reveal=''], html.js [data-reveal='up'] { transform: translateY(var(--reveal-shift, 24px)); }
html.js [data-reveal='fade'] { transform: none; transition-duration: var(--dur-3), 0ms, 0ms; }
/* « rise » est le seul type qui anime `filter` (flou) : l'état final ne retire donc jamais le filtre propre d'un autre élément (drop-shadow…) */
html.js [data-reveal='rise'] { transform: translateY(40px); filter: blur(6px); transition-property: opacity, transform, filter; transition-duration: 900ms, 1300ms, 900ms; }
html.js [data-reveal='rise'].is-revealed { filter: none; }
html.js [data-reveal='left'] { transform: translateX(-24px); }
html.js [data-reveal='right'] { transform: translateX(24px); }
html.js [data-reveal='scale'] { transform: scale(0.96); }
/* « column » : la colonne s'élève depuis sa base */
html.js [data-reveal='column'] { transform-origin: 50% 100%; transform: translateY(36px) scaleY(0.94); transition-duration: 1000ms, var(--dur-5), 0ms; }
/* « line » : filet qui se trace de gauche à droite (ou depuis le centre) — jamais invisible : seule l'échelle change */
html.js [data-reveal='line'] { opacity: 1; transform: scaleX(0); transform-origin: left center; transition-duration: 0ms, var(--dur-4), 0ms; transition-timing-function: var(--ease-in-out); }
html.js [data-reveal='line'][data-line-origin='center'] { transform-origin: center; }
html.js [data-reveal='line'][data-line-origin='right'] { transform-origin: right center; }
/* « zoom » : le cadre reste fixe, l'image intérieure se pose (1,08 → 1) */
html.js [data-reveal='zoom'] { transform: none; overflow: hidden; overflow: clip; transition-duration: 700ms, 0ms, 0ms; }
html.js [data-reveal='zoom'] > img, html.js [data-reveal='zoom'] > picture img, html.js [data-reveal='zoom'] > svg, html.js [data-reveal='zoom'] > video, html.js [data-reveal='zoom'] > .img-cover { transform: scale(1.08); transition: transform var(--dur-5) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html.js [data-reveal='zoom'].is-revealed > img, html.js [data-reveal='zoom'].is-revealed > picture img, html.js [data-reveal='zoom'].is-revealed > svg, html.js [data-reveal='zoom'].is-revealed > video, html.js [data-reveal='zoom'].is-revealed > .img-cover { transform: none; }
html.js img[data-reveal='zoom'], html.js svg[data-reveal='zoom'] { transform: scale(1.05); transition-duration: 800ms, var(--dur-5), 0ms; }
/* « mask » : un rideau de la couleur du fond se lève (clip-path écarté : un élément entièrement rogné n'est jamais « visible » pour l'IntersectionObserver) */
html.js [data-reveal='mask'] { position: relative; overflow: hidden; opacity: 1; transform: none; }
/* « trigger » (alias « none ») : pose seulement is-revealed, aucune mise en forme — sert à piloter des enfants en CSS
   (html.js [data-reveal='trigger']:not(.is-revealed) .enfant { … }) */
html.js [data-reveal='trigger'], html.js [data-reveal='none'] { opacity: 1; transform: none; filter: none; transition: none; }
html.js [data-reveal='mask']::after { content: ''; position: absolute; inset: -1px; z-index: 3; background: var(--bg); transform-origin: top; transition: transform var(--dur-4) var(--ease-in-out); transition-delay: var(--reveal-delay, 0ms); pointer-events: none; }
/* data-mask-origin : côté vers lequel le rideau se replie (top par défaut = il se lève ; bottom = il s'abaisse ; left / right = il se replie sur le côté) */
html.js [data-reveal='mask'][data-mask-origin='bottom']::after { transform-origin: bottom; }
html.js [data-reveal='mask'][data-mask-origin='left']::after { transform-origin: left; }
html.js [data-reveal='mask'][data-mask-origin='right']::after { transform-origin: right; }
html.js [data-reveal='mask'] > img, html.js [data-reveal='mask'] > picture img { transform: scale(1.14); transition: transform 1.8s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html.js [data-reveal='mask'].is-revealed::after { transform: scaleY(0); }
html.js [data-reveal='mask'][data-mask-origin='left'].is-revealed::after, html.js [data-reveal='mask'][data-mask-origin='right'].is-revealed::after { transform: scaleX(0); }
html.js [data-reveal='mask'].is-revealed > img, html.js [data-reveal='mask'].is-revealed > picture img { transform: none; }
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Mobile : plus de translation horizontale (aucun débordement près des bords), montées plus courtes */
@media (max-width: 767px) {
  html.js [data-reveal='left'], html.js [data-reveal='right'] { transform: translateY(18px); }
  html.js [data-reveal='rise'] { transform: translateY(28px); filter: blur(4px); }
  html.js [data-reveal='rise'].is-revealed { filter: none; }
  html.js [data-reveal='column'] { transform: translateY(24px) scaleY(0.96); }
  html.js [data-reveal].is-revealed { transform: none; }
}
/* Élément déjà dépassé (saut d'ancre) : affiché sans animation, puis la main est rendue aux transitions du composant */
html.js .is-instant, html.js .is-instant *, html.js .is-instant::before, html.js .is-instant::after { transition: none !important; transition-delay: 0s !important; }
html.no-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
html.no-reveal [data-reveal='rise'] { filter: none !important; }
html.no-reveal [data-reveal]::after { display: none !important; }
html.no-reveal [data-reveal] > img, html.no-reveal [data-reveal] > picture img, html.no-reveal [data-reveal] > svg { transform: none !important; }

/* Découpe de texte : data-split="chars" | "words" (jamais de coupure au milieu d'un mot : le mot est insécable) */
.split__word { display: inline-block; white-space: nowrap; }
/* Avant la découpe (JS), le texte est masqué sans être retiré de la mise en page : aucun éclair de texte, aucun décalage compté */
html.js [data-split]:not(.is-split):not(.is-revealed) { visibility: hidden; }
html.no-reveal [data-split] { visibility: visible !important; }
html.js [data-split] .split__char, html.js [data-split] .split__inner { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity 650ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * var(--split-step, 28ms) + var(--reveal-delay, 0ms)); }
/* Mots : chacun monte depuis un masque (marges de garde pour les accents et les queues de lettres) */
html.js [data-split='words'] .split__word { overflow: hidden; overflow: clip; vertical-align: top; padding: 0.14em 0.08em 0.18em; margin: -0.14em -0.08em -0.18em; }
html.js [data-split='words'] .split__inner { transform: translateY(112%); transition: opacity 500ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * var(--split-step, 70ms) + var(--reveal-delay, 0ms)); }
html.js [data-split].is-revealed .split__char, html.js [data-split].is-revealed .split__inner { opacity: 1; transform: none; }
html.no-reveal [data-split] .split__char, html.no-reveal [data-split] .split__inner { opacity: 1 !important; transform: none !important; }

/* Tracé de lignes SVG : data-draw (sur <svg>) */
html.js [data-draw]:not(.is-prepared) { opacity: 0; }
[data-draw] .draw-shape { stroke-dasharray: 1; stroke-dashoffset: 1.01; }
/* Durée totale plafonnée : 1300 ms + (40 formes × 22 ms) = 2,18 s, même pour les grands décors. */
[data-draw].is-prepared .draw-shape { transition: stroke-dashoffset 1300ms var(--ease-in-out); transition-delay: calc(var(--draw-i, 0) * 22ms + var(--reveal-delay, 0ms)); }
[data-draw].is-drawn .draw-shape { stroke-dashoffset: 0; }
html.js .is-instant .draw-shape { transition: none !important; }
html.no-reveal [data-draw] { opacity: 1 !important; }
html.no-reveal [data-draw] .draw-shape { stroke-dashoffset: 0; }

/* Construction de la pierre : data-build (sur <svg>, posé par ui/decor.js pour les hôtes data-svg-draw / data-build).
   Chaque <g data-part> se pose dans l'ordre du document (bas -> haut), --bi = rang, --build-step <= 180 ms ;
   total <= 1 600 ms. transform / opacity seulement ; clip-path pour une pièce sans parties. */
html.js svg[data-build]:not(.is-prepared) { opacity: 0; }
svg[data-build] .build-part { transform-box: fill-box; transform-origin: 50% 100%; }
html.js svg[data-build].is-prepared .build-part {
  opacity: 0; transform: translateY(10%);
  transition: opacity 560ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--bi, 0) * var(--build-step, 120ms) + var(--reveal-delay, 0ms));
}
html.js svg[data-build].is-prepared.is-built .build-part[data-part] { opacity: 1; transform: none; }
/* la base et le socle se posent (descente courte, sans rebond) */
html.js svg[data-build].is-prepared .build-part[data-part='base'],
html.js svg[data-build].is-prepared .build-part[data-part='ground'] { transform: translateY(-24%); }
/* le fût s'élève depuis son pied */
html.js svg[data-build].is-prepared .build-part[data-part='shaft'],
html.js svg[data-build].is-prepared .build-part[data-part='body'],
html.js svg[data-build].is-prepared .build-part[data-part='wall'],
html.js svg[data-build].is-prepared .build-part[data-part='drum'] { transform: scaleY(0.04); transition: opacity 400ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--bi, 0) * var(--build-step, 120ms) + var(--reveal-delay, 0ms)); }
html.js svg[data-build].is-prepared .build-part[data-part='arch'] { transform: translateY(-6%) scaleY(0.9); }
/* chapiteau, tailloir, entablement, fronton : descendent légèrement en place */
html.js svg[data-build].is-prepared .build-part[data-part='astragal'],
html.js svg[data-build].is-prepared .build-part[data-part='capital'] { transform: translateY(-14%); transform-origin: 50% 0; }
html.js svg[data-build].is-prepared .build-part[data-part='abacus'],
html.js svg[data-build].is-prepared .build-part[data-part='entablature'],
html.js svg[data-build].is-prepared .build-part[data-part='pediment'],
html.js svg[data-build].is-prepared .build-part[data-part='acroteria'],
html.js svg[data-build].is-prepared .build-part[data-part='architrave'],
html.js svg[data-build].is-prepared .build-part[data-part='frieze'],
html.js svg[data-build].is-prepared .build-part[data-part='cornice'],
html.js svg[data-build].is-prepared .build-part[data-part='tympanum'] { transform: translateY(-40%); transform-origin: 50% 0; }
/* ornements : ils se posent en fondu, très légèrement agrandis */
html.js svg[data-build].is-prepared .build-part[data-part='leaves'],
html.js svg[data-build].is-prepared .build-part[data-part='legend'],
html.js svg[data-build].is-prepared .build-part[data-part='laurel'],
html.js svg[data-build].is-prepared .build-part[data-part='rim'],
html.js svg[data-build].is-prepared .build-part[data-part='stems'],
html.js svg[data-build].is-prepared .build-part[data-part='stem'],
html.js svg[data-build].is-prepared .build-part[data-part='bow'],
html.js svg[data-build].is-prepared .build-part[data-part='frame'],
html.js svg[data-build].is-prepared .build-part[data-part='acanthus'] { transform: scale(0.94); transform-origin: 50% 50%; }
/* pièce sans parties : dévoilement de bas en haut */
html.js svg[data-build].build-whole.is-prepared { clip-path: inset(100% -2px -2px -2px); transition: clip-path 1100ms var(--ease-in-out) var(--reveal-delay, 0ms); }
html.js svg[data-build].build-whole.is-built { clip-path: inset(-2px); }
html.js .is-instant .build-part, html.js svg[data-build].is-instant { transition: none !important; }
html.js svg[data-build].is-instant .build-part { transition: none !important; }
html.no-reveal svg[data-build] { opacity: 1 !important; clip-path: none !important; }
html.no-reveal svg[data-build] .build-part { opacity: 1 !important; transform: none !important; animation: none !important; }
/* data-build="fall" (colonne brisée, ruine…) : la souche (ground, base, shaft) se bâtit comme ci-dessus ; le fragment couché
   (drum, capital, abacus, ou tout <g data-part data-fall>) tombe d'un bloc autour d'un pivot commun (--fall-origin, posé depuis
   data-fall-origin="x y" en unités du viewBox ; par défaut le bas du dessin) et se pose, sans rebond : l'angle et la hauteur ne font que
   décroître. Départ à 480 ms (la souche monte pendant ce temps), durée 1 100 ms : 1 580 ms au total + le délai de l'hôte. */
@keyframes build-fall {
  0% { opacity: 0; transform: translate(8%, -34%) rotate(-22deg); animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.55); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: translate(0, -1%) rotate(-2deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1); }
  100% { opacity: 1; transform: none; }
}
html.js svg[data-build='fall'].is-prepared .build-part:is([data-part='drum'], [data-part='capital'], [data-part='abacus'], [data-fall]) { opacity: 0; transform: none; transition: none; transform-box: view-box; transform-origin: var(--fall-origin, 50% 100%); }
html.js svg[data-build='fall'].is-prepared.is-built .build-part:is([data-part='drum'], [data-part='capital'], [data-part='abacus'], [data-fall]) { opacity: 1; transform: none; animation: build-fall 1100ms linear calc(var(--reveal-delay, 0ms) + var(--fall-delay, 480ms)) both; }
html.js svg[data-build='fall'].is-instant .build-part { animation: none !important; }
svg[data-build='fall'] { overflow: visible; }

/* Parallaxe (propriété « translate » : se compose avec transform) */
[data-parallax] { will-change: translate; }

/* Trait de séparation qui se trace à l'apparition */
html.js .divider[data-reveal], html.js .meander[data-reveal] { transform: scaleX(0.4); transform-origin: center; transition-duration: var(--dur-3), 1300ms, 0ms; }
html.js .divider[data-reveal].is-revealed, html.js .meander[data-reveal].is-revealed { transform: none; }

/* Compteur : data-count (la copie finale, transparente, fixe la largeur ; la valeur animée est superposée) */
.count__box { position: relative; display: inline-grid; font-variant-numeric: lining-nums tabular-nums; --count-justify: flex-start; }
.count__box > * { grid-area: 1 / 1; text-align: inherit; }
.count__final { opacity: 0; user-select: none; }
/* Le calque animé ne dimensionne pas la boîte (seule la valeur finale le fait) : XVIII, XXXVIII… plus larges que XX ne déplacent rien */
.count__live { position: absolute; inset: 0; display: flex; justify-content: var(--count-justify); white-space: nowrap; }
[data-count].is-counted { font-variant-numeric: lining-nums tabular-nums; }

/* Reflet doré : data-shine (une fois à l'apparition ; "hover" le rejoue ; "hover-only" : survol seulement) */
:where([data-shine]) { position: relative; }
@keyframes shine-glint { from { transform: translateX(-130%) skewX(-16deg); opacity: 1; } to { transform: translateX(330%) skewX(-16deg); opacity: 1; } }
@keyframes shine-text { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.shine__glint { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-130%) skewX(-16deg); background: linear-gradient(100deg, transparent 0%, rgba(255, 244, 214, 0) 14%, rgba(255, 240, 200, 0.78) 50%, rgba(255, 244, 214, 0) 86%, transparent 100%); will-change: transform; }
[data-shine]:not(.logo-mark)[data-shine-kind='surface'] { overflow: hidden; overflow: clip; }
.logo-mark[data-shine] .shine__glint { background: linear-gradient(100deg, transparent 0%, rgba(217, 192, 138, 0) 14%, rgba(217, 192, 138, 0.95) 50%, rgba(217, 192, 138, 0) 86%, transparent 100%); }
.shine__text, .shine__text * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
.shine__text { position: absolute; inset: 0; z-index: 4; pointer-events: none; user-select: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 214, 0.95) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; opacity: 0; }
.is-shining > .shine__glint, [data-shine~='hover']:hover > .shine__glint, [data-shine~='hover-only']:hover > .shine__glint { animation: shine-glint 1200ms var(--ease-in-out) var(--shine-delay, 0ms) both; }
.is-shining > .shine__text, [data-shine~='hover']:hover > .shine__text, [data-shine~='hover-only']:hover > .shine__text { opacity: 1; animation: shine-text 1200ms var(--ease-in-out) var(--shine-delay, 0ms) both; }
[data-shine~='hover']:hover > .shine__glint, [data-shine~='hover']:hover > .shine__text, [data-shine~='hover-only']:hover > .shine__glint, [data-shine~='hover-only']:hover > .shine__text { --shine-delay: 0ms; }

/* Images : fondu à l'arrivée des pixels (jamais pour les images en cache) */
@keyframes img-in { from { opacity: 0; } }
html.js img.is-img-pending { opacity: 0; }
img.is-img-in { animation: img-in 800ms var(--ease-out) backwards; }
html.no-reveal img.is-img-pending { opacity: 1 !important; }

/* Effets liés au défilement, en CSS natif (aucun JavaScript) : data-scroll="drift | zoom | fade-out | rise".
   Hors prise en charge ou en mouvement réduit : éléments statiques. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes sd-drift { from { translate: 0 var(--drift, 40px); } to { translate: 0 calc(var(--drift, 40px) * -1); } }
    @keyframes sd-zoom { from { scale: 1.12; } to { scale: 1; } }
    @keyframes sd-fade-out { to { opacity: 0; translate: 0 -56px; } }
    @keyframes sd-rise { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } }
    [data-scroll='drift'] { animation: sd-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    [data-scroll='zoom'] { view-timeline: --sd-zoom block; overflow: hidden; overflow: clip; }
    [data-scroll='zoom'] > img, [data-scroll='zoom'] > picture img, [data-scroll='zoom'] > svg, [data-scroll='zoom'] > video, [data-scroll='zoom'] > .img-cover { animation: sd-zoom linear both; animation-timeline: --sd-zoom; animation-range: cover 0% cover 70%; }
    [data-scroll='fade-out'] { animation: sd-fade-out linear both; animation-timeline: scroll(root block); animation-range: 0px 60vh; }
    [data-scroll='rise'] { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}

/* Barre de progression de lecture : <body data-progress> (élément créé par motion.js ; masquée en mouvement réduit, cf. section 19) */
@keyframes sd-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-header) + 1); height: 2px; pointer-events: none; }
.read-progress > span { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left center; }
@supports (animation-timeline: scroll()) {
  .read-progress > span { transform: scaleX(0); animation: sd-progress linear both; animation-timeline: scroll(root block); }
}
@media print { .read-progress { display: none; } }

/* ==========================================================================
   17. UTILITAIRES
   ========================================================================== */
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sr-only-focusable:focus, .visually-hidden-focusable:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.hide-mobile { } .show-mobile { display: none !important; }
@media (max-width: 700px) { .hide-mobile { display: none !important; } .show-mobile { display: revert !important; } }
.nowrap { white-space: nowrap; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.mx-auto { margin-inline: auto; }
.flex-1 { flex: 1; }
.no-scroll-x { overflow-x: clip; }
.bg-ink { background: var(--ink); color: var(--marble); --decor: var(--marble); --decor-soft: #34312C; --numeral-fill: #34312C; }
.bg-basalt { background: var(--basalt); color: var(--marble); --decor: var(--marble); --decor-soft: #34312C; --numeral-fill: #3A3732; }
.bg-marble-2 { background: var(--marble-2); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.js-only { display: none; }
html.js .js-only { display: revert; }
html.js .no-js-only { display: none; }


/* Espacements : .mt-1 … .mt-10 / .mb-1 … .mb-10 (échelle --space-1 … --space-10), .mt-0 / .mb-0 */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); } .mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); } .mb-7 { margin-bottom: var(--space-7); }
.mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); }
.mt-9 { margin-top: var(--space-9); } .mb-9 { margin-bottom: var(--space-9); }
.mt-10 { margin-top: var(--space-10); } .mb-10 { margin-bottom: var(--space-10); }

/* ==========================================================================
   18. IMPRESSION
   ========================================================================== */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  html.js [data-reveal], html.js [data-split] .split__char, html.js [data-split] .split__inner { opacity: 1 !important; transform: none !important; }
  html.js [data-reveal='mask']::after { display: none; }
  .announce, .site-header, .site-footer .newsletter, .reassurance, .drawer, .search, .mobile-menu, .cookie-banner, .toasts, .intro, .skip-link, .marquee, .meander, .btn, .product-card__quick, .product-card__wish { display: none !important; }
  body { font-size: 11pt; line-height: 1.5; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
  .section, .section--dark { padding-block: 16pt; }
  img, svg { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ==========================================================================
   19. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal], html.js [data-split] .split__char, html.js [data-split] .split__inner { opacity: 1 !important; transform: none !important; }
  html.js [data-reveal='mask']::after { display: none; }
  html.js [data-reveal='rise'] { filter: none !important; }
  html.js [data-reveal] > img, html.js [data-reveal] > picture img, html.js [data-reveal] > svg, html.js [data-reveal] > video, html.js [data-reveal] > .img-cover { transform: none !important; }
  html.js img.is-img-pending { opacity: 1 !important; }
  .shine__glint, .shine__text { display: none !important; }
  .read-progress { display: none !important; }
  [data-parallax] { translate: none !important; }
  [data-draw] .draw-shape { stroke-dashoffset: 0 !important; }
  html.js [data-draw]:not(.is-prepared) { opacity: 1; }
  html.js svg[data-build], html.js svg[data-build] .build-part { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none !important; }
  .marquee__track[aria-hidden='true'] { display: none; }
  .product-card:hover .product-card__img, .product-card:focus-within .product-card__img { transform: none; }
  .product-card__media.is-alt-ready .product-card__img { transition: none; }   /* la vue « face » remplace alors la vue de référence (le dos des hauts AUREA) sans fondu */
  html.js.has-intro .intro { display: none !important; }
  .drawer__panel, .search, .mobile-menu { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   20. TRANSITIONS DE PAGE
   View Transitions inter-documents : fondu enchaîné court (≤ 450 ms) avec une très légère montée du contenu
   entrant ; l'en-tête reste immobile (nom dédié) ; morphing de l'illustration d'une carte produit vers la fiche
   (le nom « product-hero » est posé par motion.js, un seul élément à la fois). Absent en mouvement réduit
   et dans les navigateurs sans prise en charge (navigation classique, aucune régression).
   ========================================================================== */
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: vt-in var(--view-dur, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; mix-blend-mode: normal; }
  ::view-transition-group(site-header) { animation-duration: 240ms; }
  ::view-transition-group(product-hero) { animation-duration: 650ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  ::view-transition-old(product-hero), ::view-transition-new(product-hero) { width: 100%; height: 100%; object-fit: contain; }
}

/* ==========================================================================
   21. INTERACTIONS FINES
   Inclinaison + reflet (data-tilt), aimant (data-magnetic, translate posé par motion.js), envol vers le panier.
   Effets de pointeur : (hover: hover) and (pointer: fine) uniquement.
   ========================================================================== */
/* Variables du reflet. Elles doivent s'hériter (le ::after les lit sur l'élément incliné), mais les enfants directs les refixent :
   le restyle à chaque image de survol s'arrête là et ne descend plus dans le SVG inline d'une pièce (÷ 3 mesuré à CPU × 4). */
@property --tilt-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --tilt-y { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
[data-tilt] > * { --tilt-x: 50%; --tilt-y: 50%; }
@media (hover: hover) and (pointer: fine) {
  [data-tilt]::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--tilt-x) var(--tilt-y), rgba(255, 244, 214, 0.4), rgba(255, 244, 214, 0) 58%); transition: opacity var(--dur-2) var(--ease-out); }
  [data-tilt].is-tilting::after { opacity: 1; }
  [data-tilt].is-tilting { will-change: transform; }
  [data-magnetic] { will-change: auto; }
}
@keyframes cart-pulse { 0% { transform: scale(1); } 38% { transform: scale(1.18); } 100% { transform: scale(1); } }
[data-cart-open].is-cart-pulse .icon { animation: cart-pulse 650ms var(--ease-out); }
.fly-thumb { position: fixed; left: 0; top: 0; z-index: var(--z-toast); width: 56px; height: 70px; margin: -35px 0 0 -28px; overflow: hidden; pointer-events: none; background: var(--marble-2); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-2); opacity: 0; will-change: transform, opacity; }
.fly-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fly-thumb--disc { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(184, 151, 90, 0.22); }
@media (prefers-reduced-motion: reduce) {
  [data-tilt]::after, .fly-thumb { display: none !important; }
  [data-tilt] { transform: none !important; }
  [data-magnetic] { translate: none !important; }
  [data-cart-open].is-cart-pulse .icon { animation: none; }
}