/* ==========================================================================
   DISCIPLINE — /collections · « Quatre ordres, une seule exigence »
   Styles propres à la page. Réutilise les classes de main.css.
   SOMMAIRE
    1. Introduction : les quatre ordres
    2. Frise
    3. Rail latéral collant
    4. Chapitres (LEGIO, IMPERIUM, AUREA, FORUM)
    5. Arc & illustration phare
    6. Pièces
    7. Conclusion
   ========================================================================== */

/* Hôtes d'illustrations inline */
[data-svg] > svg { display: block; width: 100%; height: 100%; }
[data-svg].is-failed { min-height: 1px; }

/* ---------- 1. INTRODUCTION ---------- */
.c-intro { padding-top: calc(var(--header-h, 80px) + var(--announce-h, 36px) + clamp(28px, 4vw, 64px)); padding-bottom: clamp(56px, 7vw, 104px); }
.c-intro__head { display: grid; gap: clamp(20px, 3vw, 36px); margin-bottom: clamp(40px, 6vw, 80px); }
/* taille : h1.page-title--showcase (main.css) ; l'ancienne surcharge de taille était sans effet (spécificité) et a été retirée */
.c-intro__title { max-width: 13.5em; }
/* < 480 px : « une seule exigence » (9,5em) doit tenir sur une ligne, sinon le titre passe à 3 lignes et coupe l'accent doré (« ORDRES, UNE / SEULE EXIGENCE ») */
@media (max-width: 479px) { h1.c-intro__title { font-size: clamp(1.75rem, 9.2vw, 2.5rem); } }

/* Stylobate : une dalle pleine de pierre sur laquelle se dressent les quatre ordres (remplace le filet doré) */
.c-orders__rule { height: 6px; background: var(--decor-soft); }
.c-orders { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-order { position: relative; }
.c-order__link {
  position: relative; display: grid; align-content: end; gap: 6px; height: 100%;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2.2vw, 36px) clamp(24px, 3vw, 36px);
  grid-template-rows: clamp(240px, 27vw, 400px) auto auto auto;
}
.c-order__col { grid-row: 1; justify-self: center; align-self: end; height: 100%; width: auto; max-width: 100%; margin-bottom: 18px; transition: transform var(--dur-4) var(--ease); }
.c-order__col > svg { height: 100%; width: auto; max-width: 100%; margin-inline: auto; }
.c-order__col--arch { aspect-ratio: 3 / 4; height: 100%; }
.c-order__col--arch > svg { width: 100%; height: 100%; }
.c-order__link:hover .c-order__col, .c-order__link:focus-visible .c-order__col { transform: translateY(-8px); }
.c-order__num { margin-top: 10px; font: 900 clamp(1.1875rem, 1.8vw, 1.625rem)/1 var(--font-sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--accent); }
.c-order__name { font: 600 clamp(0.85rem, 0.7rem + 0.55vw, 1.2rem)/1.2 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; }
.c-order__order { font: 600 0.875rem/1.3 var(--font-sans); color: var(--accent); }
@media (max-width: 1000px) {
  .c-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .c-orders { grid-template-columns: 1fr; }
  .c-order__link { grid-template-rows: none; grid-template-columns: 76px 1fr; column-gap: 20px; align-content: center; padding-block: 24px; }
  .c-order__col { grid-row: 1 / span 3; grid-column: 1; height: 150px; margin: 0; align-self: center; }
  .c-order__col--arch { height: 110px; }
  .c-order__num, .c-order__name, .c-order__order { grid-column: 2; margin-top: 0; }
}

/* ---------- 2. FRISE ---------- */
/* Bande pleine de méandre (le vide est la clé grecque) : elle se dévoile depuis le centre. Le conteneur ne sert que de déclencheur (reste visible). */
.c-motto { --decor: var(--decor-soft); background: var(--ink); padding-block: 14px; }
html.js:not(.no-reveal) .c-motto .meander { clip-path: inset(0); transition: clip-path 1500ms var(--ease-in-out); }
html.js:not(.no-reveal) .c-motto:not(.is-revealed) .meander { clip-path: inset(0 50% 0 50%); }

/* ---------- 3. RAIL LATÉRAL ---------- */
.c-rail {
  --rail-fg: var(--ink); --rail-bg: var(--marble); --rail-rule: rgba(15, 14, 12, 0.3);
  position: fixed; z-index: var(--z-sticky); left: clamp(8px, 1.3vw, 26px); top: 50%;
  display: none; opacity: 0; pointer-events: none; visibility: hidden; transform: translate(-16px, -50%);
  /* masqué = hors de l'ordre de tabulation (visibility), la sortie attend la fin du fondu */
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
.c-rail[data-tone='dark'] { --rail-fg: var(--marble); --rail-bg: var(--basalt); --rail-rule: rgba(243, 239, 231, 0.3); }
.c-rail.is-visible { opacity: 1; pointer-events: auto; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.c-rail ol { list-style: none; padding: 0; display: grid; position: relative; }
.c-rail ol::before { content: ''; position: absolute; left: 50%; translate: -50% 0; top: 22px; bottom: 22px; width: 3px; background: var(--rail-rule); transition: background var(--dur-3); }
.c-rail ol::after { content: ''; position: absolute; left: 50%; translate: -50% 0; top: 22px; width: 3px; height: calc(100% - 44px); background: var(--gold); transform: scaleY(calc(var(--progress, 0) * 0.75)); transform-origin: top; transition: transform var(--dur-3) var(--ease); }
.c-rail a { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 44px; color: var(--rail-fg); transition: color var(--dur-2); }
.c-rail__num { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 2px; font: 500 0.66rem/1 var(--font-engraved); letter-spacing: 0.06em; background: var(--rail-bg); box-shadow: 0 0 0 4px var(--rail-bg); border-radius: 13px; opacity: 0.72; transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease); }
.c-rail a:hover .c-rail__num, .c-rail a:focus-visible .c-rail__num { opacity: 1; }
.c-rail a[aria-current='true'] .c-rail__num { opacity: 1; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px var(--rail-bg); transform: scale(1.18); }
.c-rail__name { position: absolute; left: calc(100% - 2px); top: 50%; padding: 8px 12px; font: 600 0.7rem/1 var(--font-caps); letter-spacing: 0.16em; white-space: nowrap; color: var(--rail-fg); background: var(--rail-bg); border: 1px solid var(--rail-rule); opacity: 0; pointer-events: none; transform: translate(-6px, -50%); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease); }
.c-rail a:hover .c-rail__name, .c-rail a:focus-visible .c-rail__name { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1100px) { .c-rail { display: block; } }

/* ---------- 4. CHAPITRES ---------- */
.c-chap { padding-block: clamp(56px, 7vw, 112px); }
.c-chap__inner { display: grid; gap: clamp(40px, 5vw, 72px); }
.c-chap__grid { position: relative; display: grid; grid-template-columns: 1fr; row-gap: 14px; align-items: center; }
.c-chap__text { display: contents; }
@media (min-width: 960px) {
  .c-chap__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); row-gap: 0; }
  .c-chap--flip .c-chap__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .c-chap__text { position: relative; display: grid; gap: 14px; align-content: center; grid-column: 1; grid-row: 1; }
  .c-chap--flip .c-chap__text { grid-column: 2; }
  .c-arch { grid-column: 2; grid-row: 1; }
  .c-chap--flip .c-arch { grid-column: 1; }
}

.c-chap__numeral {
  position: absolute; z-index: 0; left: -0.04em; top: -0.8em; pointer-events: none; user-select: none;
  font: 900 clamp(6.75rem, 10vw, 11rem)/1 var(--font-sans); letter-spacing: var(--brut-track-xl);
  color: var(--decor-soft);
}
@media (max-width: 959px) { .c-chap__grid { padding-top: 64px; } .c-chap__numeral { top: -0.3em; right: -0.02em; left: auto; font-size: clamp(6rem, 25vw, 11rem); } }
.c-chap__text > *:not(.c-chap__numeral) { position: relative; z-index: 1; }

.c-chap__name {
  position: relative; z-index: 1; margin-top: 2px;
  font: 900 clamp(2.375rem, 6.5vw, 7.375rem)/0.92 var(--font-sans); letter-spacing: var(--brut-track-xl); text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 959px) { .c-chap__name { font-size: clamp(2.25rem, 12.4vw, 5.625rem); } }
.c-chap__fr { margin-top: 6px; font: 600 clamp(1rem, 0.86rem + 0.62vw, 1.3125rem)/1.3 var(--font-sans); color: var(--accent); }
.c-chap__tagline { font: 600 clamp(1.1875rem, 0.94rem + 1vw, 1.8125rem)/1.35 var(--font-sans); }
/* Quelques phrases sous l'accroche : la place de la gamme dans l'échelle de la maison (IMPERIUM le sport, AUREA l'or, LEGIO le haut de gamme) et ce que portent ses pièces ; FORUM n'en a pas */
.c-chap__lead { max-width: 30em; font: 400 1rem/1.6 var(--font-sans); color: var(--fg-muted); text-wrap: pretty; }
.c-chap__from { display: flex; align-items: baseline; gap: 10px; font: 600 0.72rem/1.3 var(--font-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.c-chap__from [data-from] { font: 600 1.0625rem/1 var(--font-sans); letter-spacing: 0.01em; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); }
.c-chap__cta { margin-top: 10px; }
@media (max-width: 959px) {
  .c-chap__cta { order: 6; margin-top: 8px; }
  .c-chap__grid > .c-arch { order: 5; margin-block: 24px 12px; }
}

/* ---------- 5. ARC & ILLUSTRATION PHARE ---------- */
.c-arch { position: relative; z-index: 1; margin: 0; width: min(100%, 400px); justify-self: center; display: grid; gap: 20px; }
.c-arch__frame {
  position: relative; aspect-ratio: 5 / 7; border-radius: 999px 999px 0 0; overflow: clip; isolation: isolate;
  box-shadow: 0 0 0 12px var(--decor-soft);          /* socle plein en arc (remplace le double filet doré) */
}
.c-arch--dark .c-arch__frame { background: var(--basalt) url(/assets/textures/marble-dark.webp) center / cover; }
.c-arch--light .c-arch__frame { background: var(--marble-2) url(/assets/textures/marble-light.webp) center / cover; }
/* le rideau (mask) pose overflow:hidden : clip garde la dérive au défilement rattachée à la page */
html.js .c-arch__frame[data-reveal='mask'] { overflow: clip; }
.c-arch__art { position: absolute; z-index: 1; inset: 15% 6% 5%; display: grid; place-items: center; }
.c-art { width: 100%; height: 100%; filter: drop-shadow(0 26px 28px rgba(0, 0, 0, 0.34)); }
.c-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* photo détourée d'une pièce (Printful) */
.c-arch--light .c-art { filter: drop-shadow(0 24px 24px rgba(15, 14, 12, 0.28)); }
.c-arch__cap { display: grid; justify-items: center; text-align: center; }
.c-arch__link { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: 4px 14px; justify-content: center; font: 900 0.875rem/1.15 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; }
.c-arch__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--accent-line); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.c-arch__link:hover::after, .c-arch__link:focus-visible::after { transform: scaleX(1); }
.c-arch__price { font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--accent); }   /* prix : 600 au corps du nom, chiffres tabulaires */
@media (max-width: 959px) { .c-arch { width: min(80%, 360px); } }

/* ---------- 6. PIÈCES ---------- */
.c-chap__cards { position: relative; z-index: 1; }
/* IMPERIUM compte six pièces dont la phare : cinq cartes, sur une seule rangée de cinq colonnes au-dessus de 1100 px, au lieu de 4 + 1 (carte seule) (collections.js pose data-n).
   Plus étroit, les colonnes de main.css (3 puis 2) s'appliquent : le media query évite de les écraser. */
@media (min-width: 1101px) { .c-chap__cards[data-n='5'] { --cols: 5; } }
/* Quatre cartes (LEGIO et AUREA, une fois la phare retirée) : une rangée de quatre colonnes dès 861 px, au lieu de 3 + 1 (carte seule). Dessous, 2 x 2. */
@media (min-width: 861px) { .c-chap__cards[data-n='4'] { --cols: 4; } }
/* FORUM compte quatre pièces dont la phare : trois cartes, sur une seule rangée de trois colonnes dès 700 px (main.css passe à deux colonnes sous
   861 px : la troisième carte resterait seule). Sous 700 px, deux colonnes : trois colonnes y seraient trop étroites. */
@media (min-width: 700px) { .c-chap__cards[data-n='3'] { --cols: 3; } }
/* Le nom de la collection est déjà celui du chapitre ; l'ajout rapide n'apparaît qu'au survol ou au focus. */
.c-chap__cards .product-card__collection { display: none; }
.c-chap__cards .product-card__quick { visibility: hidden; }
.c-chap__cards .product-card:hover .product-card__quick, .c-chap__cards .product-card:focus-within .product-card__quick { visibility: visible; }

/* ---------- 7. CONCLUSION ---------- */
.c-end { padding-block: clamp(88px, 12vw, 192px); }
.c-end__inner { display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 32px); }
.c-end__laurel { width: min(300px, 62%); }
.c-end__cta { margin-top: 12px; }

/* ---------- 8. CIBLES TACTILES ---------- */
.c-order__link { min-height: 44px; }

/* ---------- 9. COLORIS SUR FOND SOMBRE ---------- */
.section--dark .product-card__swatch { box-shadow: 0 0 0 1px var(--gold-light); }