/* ==========================================================================
   DISCIPLINE — Page d'accueil
   Sommaire
    1. Héros (portique)
    2. Bandeau des valeurs
    3. I — La Maison
    4. II — Les Collections
    5. III — Pièces maîtresses
    6. IV — Disciplina (monnaie 3D)
    7. V — Lookbook
    8. VI — Le Journal
    9. Mouvement réduit
   ========================================================================== */

@property --ls { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* Titre de section commun (voix brute : Source Sans 900 en capitales, accent or droit) */
.collections .display-2,
.pieces .display-2,
.disciplina .display-2,
.lookbook .display-2,
.journal .display-2 { font-size: clamp(1.8rem, 3.1vw, 2.875rem); }
.section-head--split { align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head__link { margin: 0; justify-self: start; }
@media (min-width: 900px) { .section-head__link, .section-head--split > .pieces__chips { justify-self: end; } }
.link-arrow .icon { width: 16px; height: 16px; }
.section--dark .link-arrow { color: var(--gold-light); }

/* ==========================================================================
   1. HÉROS — un portique : deux colonnes, le titre entre elles
   ========================================================================== */
.hero {
  position: relative;
  min-height: max(680px, 100svh);
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--announce-h) + var(--header-h) + 8px) var(--gutter) clamp(56px, 8svh, 84px);
  background-color: var(--ink);
  overflow: clip;
}
.hero::before { opacity: 0.6; mix-blend-mode: normal; background-position: 50% 30%; }
/* grain par-dessus le fond, sous le contenu */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/textures/grain.png) repeat; opacity: 0.28;
}

.hero__stage {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 58% 58% at 50% 46%, rgba(15, 14, 12, 0) 0%, rgba(15, 14, 12, 0.5) 62%, rgba(15, 14, 12, 0.94) 100%),
    linear-gradient(180deg, rgba(15, 14, 12, 0.72) 0%, rgba(15, 14, 12, 0) 24%, rgba(15, 14, 12, 0) 66%, rgba(15, 14, 12, 0.92) 100%);
}
/* halo doré qui suit doucement le pointeur : un disque de taille fixe déplacé par « translate » (compositeur, aucun repaint) */
.hero__halo {
  position: absolute; left: 50%; top: 46%; width: 92vmax; height: 92vmax; margin: -46vmax 0 0 -46vmax;
  background: radial-gradient(circle closest-side, rgba(217, 192, 138, 0.13), transparent 92%);
  translate: var(--halo-x, 0px) var(--halo-y, 0px);
  transition: translate 1100ms var(--ease-out), opacity 1600ms var(--ease-out);
}
html.js .hero:not(.is-live) .hero__halo { opacity: 0; }

/* Les deux colonnes */
.hero__col {
  position: absolute; z-index: 0; top: calc(var(--announce-h) + var(--header-h) + 14px); bottom: 16px;
  aspect-ratio: 240 / 1200; pointer-events: none;
}
.hero__col--left { left: clamp(-90px, 3vw, 80px); }
.hero__col--right { right: clamp(-90px, 3vw, 80px); }
.hero__col > div, .hero__col svg { width: 100%; height: 100%; }
/* la pierre se pose depuis le pied : seul le décor (aplat) bouge, jamais le contenu */
.hero__col svg { overflow: visible; }
.hero__col--right svg { transform: scaleX(-1); }

.hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; max-width: min(100%, 78rem); }

/* Logo empilé officiel, ivoire : apparition sobre (balayage de gauche à droite, comme une inscription qui se révèle) */
.hero__title { margin: 0; max-width: 100%; line-height: 0; color: var(--marble); }
.hero__logo { --logo-w: clamp(280px, 52vw, 780px); color: var(--marble); }
/* Gravure : le logo se découvre de haut en bas (THE, puis DISCIPLINE), puis un reflet doré le traverse une fois (data-shine).
   Juste après l'intro, il est déjà posé (même taille, même place) : seul le reflet passe. */
.hero.is-live .hero__logo { animation: hero-logo-in 1250ms var(--ease-out) 200ms backwards; }
.hero.is-live.is-after-intro .hero__logo { animation: none; }
@keyframes hero-logo-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-12px); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
.hero__logo.is-shining > .shine__glint { animation-delay: 700ms; }
.hero.is-after-intro .hero__logo.is-shining > .shine__glint { animation-delay: 350ms; }

/* Accroche brute, sans italique : grotesque de la marque en capitales, subordonnée au logo */
.hero__tagline {
  margin: clamp(22px, 4svh, 40px) 0 0; max-width: 16em; text-wrap: balance;
  font: 900 clamp(1.1rem, 0.75rem + 1.1vw, 1.75rem)/1.12 var(--font-sans);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--marble);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(24px, 4.4svh, 44px); }

.hero__base { position: absolute; left: 0; right: 0; bottom: 0; background: var(--decor-soft); }

/* Au défilement, le portique se resserre légèrement (CSS natif, aucun JavaScript ; statique sans prise en charge) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    @keyframes hero-col-l { to { translate: 3vw 0; } }
    @keyframes hero-col-r { to { translate: -3vw 0; } }
    .hero__col--left { animation: hero-col-l linear both; animation-timeline: scroll(root block); animation-range: 0px 80vh; }
    .hero__col--right { animation: hero-col-r linear both; animation-timeline: scroll(root block); animation-range: 0px 80vh; }
  }
}

@media (max-width: 900px) {
  /* colonne entière, symétrique : un tiers de sa largeur seulement passe hors de l'écran (jamais le fût tranché dans l'axe) */
  .hero__col--left { left: 0; translate: -33% 0; }
  .hero__col--right { right: 0; translate: 33% 0; }
  .hero__col { --decor: var(--decor-soft); }       /* sous le logo : pierre, aplat opaque */
}
@media (max-width: 520px) {
  .hero__cta { width: 100%; max-width: 330px; flex-direction: column; }
  .hero__cta .btn { width: 100%; min-height: 54px; }
}

/* ==========================================================================
   2. BANDEAU DES VALEURS
   ========================================================================== */
.values {
  position: relative; padding-block: clamp(20px, 2.4vw, 30px);
  background: var(--ink); color: var(--marble);
}
.values .marquee { --marquee-gap: clamp(44px, 6vw, 104px); --marquee-speed: 60s; }
/* la piste ne s'étire pas : le script répète les valeurs jusqu'à remplir la largeur, sans trou */
.values .marquee__item { color: var(--marble); }

/* ==========================================================================
   3. I — LA MAISON
   ========================================================================== */
.maison { padding-block: clamp(56px, 6vw, 96px); }
.maison__grid { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) { .maison__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.maison__text { display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: start; }
.maison__title {
  font: 900 clamp(1.875rem, 3.35vw, 3.375rem)/1 var(--font-sans); letter-spacing: var(--brut-track-l); text-transform: uppercase;
  max-width: 16.5em;
}
.maison__title em { font-style: normal; color: var(--accent); }
.maison__lead { margin: 0; max-width: 26.4em; font: 600 clamp(1rem, 0.82rem + 0.62vw, 1.3125rem)/1.4 var(--font-sans); letter-spacing: 0; color: var(--fg-muted); text-wrap: balance; }

.maison__figure { position: relative; margin: 0; justify-self: center; width: min(100%, 340px); }
.maison__arch {
  position: relative; z-index: 1; aspect-ratio: 3 / 4.1; display: grid; place-items: center;
  background: #0F0E0C url(/assets/textures/marble-dark.webp) center / cover no-repeat;
  box-shadow: 0 0 0 14px var(--decor-soft);          /* socle plein en arc (aplat) */
}
.maison__mono { position: relative; z-index: 1; }
/* La pierre se dresse : l'arche monte depuis son pied en gardant sa silhouette (la découpe a le même cintre que l'arche : un dôme qui s'élève, jamais un rideau plat),
   puis le monogramme se pose une fois le cintre dégagé et reçoit un reflet (data-shine + data-reveal-with : le monogramme, rogné par l'arche, se joue avec la figure) */
.maison__figure { container-type: inline-size; }
html.js .maison__arch { --cap: calc(50cqw + 20px); clip-path: inset(-20px round var(--cap) var(--cap) 0 0); transition: clip-path 1400ms var(--ease-in-out) var(--reveal-delay, 0ms); }
html.js:not(.no-reveal) .maison__figure:not(.is-revealed) .maison__arch { clip-path: inset(100% -20px -20px -20px round var(--cap) var(--cap) 0 0); }
html.js .maison__mono { transition: opacity 900ms var(--ease-out) 950ms, transform 1100ms var(--ease-out) 950ms; }
html.js:not(.no-reveal) .maison__figure:not(.is-revealed) .maison__mono { opacity: 0; transform: scale(0.96); }

/* ==========================================================================
   4. II — LES COLLECTIONS : quatre arcs
   ========================================================================== */
.collections { background-color: var(--basalt); }
.coll-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.coll:nth-child(even) { margin-top: clamp(32px, 5vw, 72px); }
@media (max-width: 1080px) { .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(40px, 6vw, 72px); } .coll:nth-child(even) { margin-top: clamp(32px, 8vw, 80px); } }
@media (max-width: 560px) {
  .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .coll:nth-child(even) { margin-top: 0; }
  .coll__link { gap: 14px; }
  .coll__arch .coll__num { bottom: 8px; }
  .coll__name { font-size: 1.05rem; letter-spacing: 0.12em; }
}

.coll__link { display: grid; gap: 22px; color: inherit; }
.coll__arch { --coll-bg: var(--marble); background: var(--coll-bg); }
.coll__arch::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--coll-tex, url(/assets/textures/marble-light.webp)) center / cover no-repeat; opacity: 0.8; }
.coll__arch > img { position: absolute; z-index: 2; left: 6%; right: 6%; top: 11%; width: 88%; height: 84%; object-fit: contain; transition: transform 1.2s var(--ease); }
/* Chaque pièce se pose dans son arche (elle descend dans la niche) une fois la carte apparue ; le numéral se grave en dernier */
html.js:not(.no-reveal) .coll:not(.is-revealed) .coll__arch > img { transform: translateY(-11%); }
html.js:not(.no-reveal) .coll.is-revealed .coll__arch > img { transition-delay: 220ms; }
html.js .coll__arch .coll__num { transition: opacity 900ms var(--ease-out) 700ms; }
html.js:not(.no-reveal) .coll:not(.is-revealed) .coll__arch .coll__num { opacity: 0; }
.coll__arch .coll__num {
  position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 900 1rem/1 var(--font-sans); letter-spacing: 0.2em; padding-left: 0.2em; color: var(--gold-ink);
}
.coll--legio .coll__arch { --coll-bg: #E4DCCB; }
.coll--imperium .coll__arch { --coll-bg: #D3C9B6; }
/* AUREA : niche sombre couleur bronze, où le sweat Pourpre Impériale de la tuile et son emblème à l'encre or se détachent (les trois autres niches sont claires) */
.coll--aurea .coll__arch { --coll-bg: #1A1815; --coll-tex: radial-gradient(ellipse 95% 80% at 50% 60%, #6a5c45 0%, #3d372e 52%, #2b2722 100%); }
.coll--aurea .coll__arch::before { opacity: 1; }
.coll--aurea .coll__num { color: var(--gold-light); }
.coll--forum .coll__arch { --coll-bg: #EFE9DC; }

.coll__link:hover .coll__arch > img, .coll__link:focus-visible .coll__arch > img { transform: scale(1.04) translateY(-1.5%); }
.coll__link:focus-visible { outline-offset: 8px; }

.coll__body { display: grid; gap: 4px; justify-items: start; padding-inline: 4px; }
.coll__name { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-caps); letter-spacing: 0.16em; color: var(--marble); }
.coll__tag { margin: 0; font: 600 1rem/1.3 var(--font-sans); letter-spacing: 0; color: var(--muted-dark); text-wrap: balance; }
.coll__link:hover .coll__name { color: var(--gold-light); }

/* ==========================================================================
   5. III — PIÈCES MAÎTRESSES
   ========================================================================== */
.pieces__chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* cartes sobres : image, collection, nom, prix — pas de pastilles de coloris ; l'ajout rapide n'apparaît qu'au survol */
.pieces__grid .product-card__swatches { display: none; }
.pieces__grid .product-card__quick { visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
.pieces__grid .product-card:hover .product-card__quick, .pieces__grid .product-card:focus-within .product-card__quick { visibility: visible; transition-delay: 0s; }
.pieces__foot { display: flex; justify-content: center; margin-top: clamp(32px, 4.5vw, 56px); }

/* ==========================================================================
   6. IV — DISCIPLINA : la monnaie qui tourne
   ========================================================================== */
.disciplina { background-color: var(--marble-2); overflow: clip; }
.disciplina::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 24% 50%, rgba(255, 252, 245, 0.7), transparent 70%); }
.disciplina > .container { position: relative; z-index: 1; }
.disciplina__grid { display: grid; gap: clamp(40px, 7vw, 112px); align-items: center; }
@media (min-width: 960px) { .disciplina__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.disciplina__stage { position: relative; display: grid; justify-items: center; width: min(100%, 520px); margin-inline: auto; }
.disciplina__orbit { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; perspective: 1500px; }
.disciplina__orbit::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--decor-soft);              /* disque plein « pierre » derrière la monnaie */
}
.disciplina__orbit::after { border-radius: 50%; }          /* reflet du pointeur (data-tilt) rogné au disque */
.coin { position: relative; z-index: 1; width: 66%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-24deg); }
/* La monnaie est frappée : elle se retourne une seule fois en arrivant (demi-tour, face cachée puis face visible) et se pose, sans boucle */
html.js:not(.no-reveal) .disciplina__stage:not(.is-revealed) .coin { transform: rotateX(8deg) rotateY(-204deg); }
html.js:not(.no-reveal) .disciplina__stage .coin { transition: transform 1500ms var(--ease-out) 250ms; }
.coin__face, .coin__rim { position: absolute; inset: 0; border-radius: 50%; display: block; }
.coin__rim { background: #CFC6B6; transform: translateZ(var(--z)); }       /* tranche : aplats pierre, sans dégradé */
.coin__rim--b { background: #A39B8E; }
.coin__face {
  display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--ink);
}
.coin__face { --decor: var(--marble); }
.coin__face img, .coin__art, .coin__art svg { display: block; width: 100%; height: 100%; }
.coin__face--front { transform: translateZ(9px); }
.coin__face--back { transform: rotateY(180deg) translateZ(9px); }
.coin__face--back img { width: 58%; height: 58%; }

.disciplina__text { display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: start; }
.disciplina__lead { margin: 0; max-width: 26.4em; font: 600 clamp(1rem, 0.82rem + 0.62vw, 1.3125rem)/1.4 var(--font-sans); letter-spacing: 0; color: var(--fg-muted); text-wrap: balance; }
.disciplina__text > p:last-child { margin: 0; }
.disciplina__quote { margin: 0; display: grid; gap: 14px; justify-items: start; }
.disciplina__laurel { display: block; width: clamp(120px, 14vw, 168px); aspect-ratio: 409.05 / 81.73; --decor: var(--ink); }
.disciplina__laurel svg { display: block; width: 100%; height: 100%; }
/* reflet doré sur la maxime gravée : l'or n'éclaire que les lettres, une fois */
.disciplina__quote .shine__text { background-image: linear-gradient(105deg, transparent 40%, var(--gold) 50%, transparent 60%); }
.disciplina__quote .latin { font-size: clamp(1.1rem, 0.75rem + 1.1vw, 1.75rem); font-weight: 900; line-height: 1.12; color: var(--fg); }

/* ==========================================================================
   7. V — LOOKBOOK : trois tableaux asymétriques
   ========================================================================== */
.lookbook { background-color: var(--ink); }
.look { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.look__panel {
  --p-bg: var(--marble); --p-fg: var(--ink); --p-line: rgba(140, 109, 55, 0.5);
  position: relative; display: block; overflow: hidden; overflow: clip; isolation: isolate; color: var(--p-fg); background: var(--p-bg);
}
.look__panel::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--p-tex) center / cover no-repeat; opacity: var(--p-tex-o, 0.7); }
.look__art { position: absolute; z-index: -1; transition: transform 1.4s var(--ease); }
.look__art svg { display: block; width: 100%; height: auto; }
.look__piece { position: absolute; z-index: 1; object-fit: contain; transition: transform 1.2s var(--ease); filter: drop-shadow(0 18px 24px rgba(15, 14, 12, 0.18)); }
.look__panel:hover .look__piece, .look__panel:focus-visible .look__piece { transform: scale(1.035) translateY(-1%); }
.look__panel:hover .look__art { transform: scale(1.03); }
.look__cap {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 12px; padding: 22px 26px 24px;
  font: 600 0.8rem/1.2 var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase;
}

/* A — grande, marbre clair, arc : t-shirt de sport Victoria, Rouge Pompéien (photo détourée, vue de face) */
.look__panel--a { --p-tex: url(/assets/textures/marble-light.webp); grid-column: 1 / span 5; aspect-ratio: 4 / 5.3; }
.look__panel--a .look__art { --decor: #DDD7CB; inset: 4% 4% auto; width: 92%; height: auto; }
.look__panel--a .look__piece { left: 10%; right: 10%; bottom: 8%; width: 80%; height: 82%; }
/* B — basalte, façade de temple : t-shirt Ala blanc (photo détourée, vue de face) */
.look__panel--b {
  --p-bg: var(--basalt-2); --p-fg: var(--marble); --p-line: rgba(217, 192, 138, 0.45); --p-tex: url(/assets/textures/marble-dark.webp); --p-tex-o: 0.5;
  grid-column: 6 / span 4; aspect-ratio: 3 / 4.2; margin-top: clamp(40px, 7vw, 112px);
}
.look__panel--b .look__art { --decor: #4B4740; left: -26%; bottom: 3%; width: 152%; height: auto; }
.look__panel--b .look__art [data-part='acroteria'] { display: none; }   /* l'acrotère dépassait du col du t-shirt comme un résidu de forme */
.look__panel--b .look__piece { left: 8%; bottom: 8%; width: 84%; height: 80%; }
/* C — pierre, colonne dorique */
.look__panel--c { --p-bg: #CFC6B6; --p-tex: url(/assets/textures/stone.webp); --p-tex-o: 0.9; grid-column: 10 / span 3; aspect-ratio: 3 / 5.4; margin-top: clamp(16px, 3vw, 48px); }
.look__panel--c .look__art { --decor: #E2DBCD; left: 50%; top: 2%; height: 78%; width: auto; aspect-ratio: 195 / 982.7; transform: translateX(-50%); }
.look__panel--c:hover .look__art { transform: translateX(-50%) scale(1.03); }
.look__panel--c .look__piece { left: -18%; bottom: 9%; width: 136%; max-width: none; height: 72%; }   /* photo détourée du sweat Castra (Printful) : silhouette moins large que l'illustration */

@media (max-width: 899px) {
  .look__panel--a { grid-column: 1 / -1; aspect-ratio: 4 / 4.6; }
  .look__panel--b { grid-column: 1 / span 7; margin-top: 0; aspect-ratio: 3 / 4.2; }
  .look__panel--c { grid-column: 8 / -1; margin-top: clamp(32px, 9vw, 80px); aspect-ratio: 3 / 5.2; }
}
@media (max-width: 560px) {
  .look { gap: 12px; }
  .look__cap { padding: 14px 14px 16px; font-size: 0.66rem; letter-spacing: 0.14em; }
  .look__panel--a { aspect-ratio: 1 / 1.05; }
  .look__panel--a .look__piece { height: 86%; }
}

/* ==========================================================================
   8. VI — LE JOURNAL
   ========================================================================== */
.journal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 899px) { .journal__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 560px; margin-inline: auto; } }
.jcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
.jcard__cover {
  position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; overflow: clip; isolation: isolate; display: grid; place-items: center;
  background: var(--marble-2);
}
.jcard__cover { background: #DCD2BF; }
.jcard__cover::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/textures/marble-light.webp) center / cover no-repeat; opacity: 0.5; }
.jcard--dark .jcard__cover { background: var(--basalt); }
.jcard--dark .jcard__cover::before { background-image: url(/assets/textures/marble-dark.webp); opacity: 0.9; }
.jcard--dark .jcard__cover { --decor: var(--marble); }
.jcard__art { position: absolute; inset: 9% 17%; transition: transform 1.2s var(--ease); }   /* cadre défini : le décor ne dilate jamais la couverture */
.jcard__art svg { display: block; width: 100%; height: 100%; }
.jcard--wide .jcard__art { inset: 9% 7%; }
.jcard:hover .jcard__art { transform: scale(1.05); }
.jcard__title { margin: 0; font: 900 clamp(1rem, 0.8rem + 0.55vw, 1.3125rem)/1.12 var(--font-sans); letter-spacing: var(--brut-track-s); text-transform: uppercase; text-wrap: balance; }
.jcard__title a { background: linear-gradient(var(--accent-line), var(--accent-line)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease); }
.jcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.jcard:hover .jcard__title a { background-size: 100% 1px; }
/* Illustration absente : emblème discret en repli */
img.is-fallback { object-fit: contain !important; padding: 34%; opacity: 0.4; filter: none !important; }

/* ==========================================================================
   9. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero.is-live .hero__logo { animation: none; }
  .hero__halo { translate: none; }
  .maison__arch { clip-path: none !important; }
  .maison__mono { opacity: 1 !important; transform: none !important; }
  .coin { transform: rotateX(8deg) rotateY(-24deg) !important; transition: none !important; }
  .jcard:hover .jcard__art, .coll__link:hover .coll__arch > img { transform: none; }
}

/* ==========================================================================
   Ajustements mobiles
   ========================================================================== */
@media (max-width: 959px) {
  .maison__figure { width: min(72%, 300px); justify-self: start; margin-left: 14px; }
}
@media (max-width: 560px) {
  .pieces__grid .product-card__badge { top: auto; bottom: 10px; left: 10px; font-size: 0.66rem; padding: 5px 7px 4px; }
}
@media (max-width: 520px) {
  .hero__logo { --logo-w: min(78vw, 420px); }
  .hero__col { --decor: var(--decor-soft); }
}

/* Cibles tactiles confortables */
/* zone de toucher de 44 px sans modifier l'interlignage : le padding d'un élément en ligne n'agrandit pas la ligne */
.link-line { display: inline; padding-block: 13px; }
.link-line::before, .link-line::after { bottom: 10px; }
.chip { min-height: 44px; }