/* v15 (2026-09-21) : revue globale — titre du panneau sur une ligne (la méta passe à la ligne), légende de planche sur une ligne.
/* v14 (2026-09-21) : profondeur du panneau au défilement (transform inline sur .panel, transition douce).
/* v13 (2026-09-21) : auto-démonstration du panneau (fondu plus long) + rassemblement des pièces à l'adoption.
/* v12 (2026-09-21) : quatrième pièce de retour (bottes noires, packshot client) — planche à 3 cellules sous la pièce forte, mini à 4, vignettes à 4.
/* v11 (2026-09-21) : vêtement toujours ENTIER, jamais recadré (règle du widget, Lot 4 v2) — la pièce forte du panneau et les couvertures Magazine/édito passent en contain sur fond sable.
/* v10 (2026-09-21) — passe premium : packshots réels, planche pleine largeur, trois chiffres, nuanciers photographiques, apparition au défilement, respiration de la couverture ; look de démonstration à 3 pièces. */
/* v9 (2026-09-21) : logotype OVESTIA (plus long que VESTIA) — taille réduite sur mobile.
@media (max-width: 640px) { .wordmark { font-size: 18px; letter-spacing: .12em; } }
/* Ovestia — site de lancement V3.1 (2026-09-17). Base : maquette V3 « campagne » intégrée avec de VRAIES photos dans
   chaque emplacement (jamais Google Fonts ; FR/EN séparés ; formulaire branché ; fond BLANC). Toute modification = nouveau nom de fichier. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-normal-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-italic-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-normal-500.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-italic-500.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/DMSans-normal-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/DMSans-normal-500.woff2) format('woff2'); }

/* Vestia — site de lancement V3 (2026-09-17). Base : V2.1 en ligne + corrections + système visuel mode.
   UI : crème #F9F7F4 / encre #1a1a1a / blanc, accent noir, gris chaud #6f6a62. Cormorant Garamond + DM Sans (400 ET 500, auto-hébergées).
   Images : deux registres du retail mode — CAMPAGNE (silhouette, fond de studio, grain) et PACKSHOT (pièce à plat, papier découpé).
   La couleur vit dans les images (tabac, bordeaux, ardoise, sable), jamais dans l'interface. Aucun or d'interface.
   Mouvement : bandeau défilant lent, zoom discret au survol, fondus de 300 ms ; tout est coupé sous prefers-reduced-motion. */

:root {
  --ink: #1a1a1a;
  --cream: #FFFFFF;          /* fond BLANC (revue fondateur 17/09) */
  --white: #ffffff;
  --muted: #6f6a62;
  --line: rgba(26, 26, 26, .14);
  --line-strong: rgba(26, 26, 26, .3);
  --grege: #F0EFEC;
  --mastic: #E7E5E0;
  --taupe: #D8D5CF;
  --ardoise: #383633;
  --shelf: #F2F2F0;
  --on-ink: #FFFFFF;
  --on-ink-muted: #b9b3a9;
  --line-on-ink: rgba(255, 255, 255, .2);
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 152px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --grain: url(data:image/png;base64,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);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--on-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: var(--cream); padding: 10px 16px; text-decoration: none; font-size: 13px; }
.skip:focus { top: 10px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ——— Typographie ——— */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-variant-numeric: lining-nums; }
h1, h2 { font-style: italic; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(46px, 9.2vw, 132px); line-height: .94; letter-spacing: -.022em; }
h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.02; }
h3 { font-size: clamp(23px, 2vw, 28px); line-height: 1.15; font-weight: 500; }
.kicker { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; max-width: 34em; }
.muted { color: var(--muted); }
.serif-it { font-family: var(--serif); font-style: italic; }

/* ——— Boutons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  padding: 14px 28px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--cream); text-decoration: none; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); }
.btn.small { min-height: 40px; padding: 9px 18px; font-size: 11px; }
.on-ink .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.on-ink .btn:hover { background: transparent; color: var(--on-ink); }
.textlink { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textlink:hover { text-decoration-thickness: 2px; }

/* ——— En-tête (ours du magazine) ——— */
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--cream); border-bottom: 1px solid var(--line); }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.wordmark i { letter-spacing: .1em; }
.mast nav.main { display: none; gap: 30px; font-size: 13px; }
.mast nav.main a { text-decoration: none; color: var(--muted); transition: color .2s; }
.mast nav.main a:hover { color: var(--ink); }
.mast .right { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.langs a, .langs button { text-decoration: none; color: var(--muted); background: none; border: 0; padding: 8px 2px; cursor: pointer; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; font-size: inherit; }
.langs [aria-current="true"], .langs [aria-pressed="true"] { color: var(--ink); border-bottom: 1px solid var(--ink); }
.mast .btn { display: none; }
@media (min-width: 560px) { .mast .btn { display: inline-flex; } }
@media (min-width: 1020px) { .mast nav.main { display: flex; } }

/* ——— Le panneau Vestia (démonstration) ——— */
.panel { margin: 0; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 40px 70px -48px rgba(26, 26, 26, .4); min-width: 0; }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-name { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1; }
.panel-name::before { content: '✦'; font-style: normal; font-size: 11px; margin-right: 8px; vertical-align: 2px; }
.panel-meta { display: flex; align-items: center; gap: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; }
.cart { color: var(--ink); white-space: nowrap; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.cell { display: grid; grid-template-rows: 1fr auto; background: var(--white); min-width: 0; position: relative; }
.cell--hero { grid-column: 1 / -1; }
.cell-img { position: relative; aspect-ratio: 3 / 4; min-height: 0; overflow: hidden; color: var(--ink); }
.cell--hero .cell-img { aspect-ratio: 16 / 9; }
.cut { position: absolute; inset: 5% 6% 4%; width: 88%; height: 91%; }
.cell-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell-tag { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; background: var(--white); padding: 4px 8px; }
.cell-cap { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-name { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; overflow-wrap: anywhere; }
.cell-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.cell-price { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.swap { position: absolute; right: 8px; top: 8px; z-index: 1; border: 1px solid var(--ink); background: var(--white); border-radius: 999px; padding: 7px 12px; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.swap:hover { background: var(--ink); color: var(--white); }
.top-variant { display: grid; grid-template-rows: 1fr auto; grid-row: 1 / -1; min-width: 0; }
.top-variant[hidden] { display: none; }
.panel-bottom { display: grid; grid-template-columns: minmax(0, 1fr); }
.note { margin: 0; padding: 18px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.note p { font-family: var(--serif); font-style: italic; font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.34; }
.note .kicker { font-size: 10px; }
.adopt { padding: 16px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.look-title { font-family: var(--serif); font-size: 22px; line-height: 1.1; font-style: italic; }
.look-total { font-size: 12.5px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.adopt .btn { width: 100%; }
@media (min-width: 640px) {
  .board { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .cell--hero { grid-column: auto; }
  .cell--hero .cell-img { aspect-ratio: auto; height: 100%; }
  .panel-bottom { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .note { border-bottom: 0; border-right: 1px solid var(--line); padding: 20px 22px; }
  .adopt { padding: 20px 22px; }
}
.swapping .top-variant:not([hidden]), .swapping .note p, .swapping .look-total { animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }


/* ——— Images : l'emplacement. Un <svg> aujourd'hui, une <img> du studio demain, même boîte, même ratio ——— */
.shot { position: relative; overflow: hidden; margin: 0; background: #4a3f36; isolation: isolate; }
.shot > .shot-svg, .shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot::after { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 96px; mix-blend-mode: overlay; opacity: .85; pointer-events: none; }

/* ——— Bandeau d'annonce ——— */
.announce { background: var(--ink); color: var(--on-ink); font-size: 12.5px; }
.announce .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; align-items: baseline; padding-block: 9px; text-align: center; }
.announce a { color: var(--on-ink); text-underline-offset: 4px; white-space: nowrap; }
.announce span { color: var(--on-ink-muted); }

/* ——— Couverture : la campagne ———
   Mobile : l'image (4:5) porte le titre, le texte et les boutons suivent sur fond crème.
   Desktop : l'image occupe toute la couverture, le texte s'y pose à gauche, le panneau en sort par le bas. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.hero .shot { grid-area: 1 / 1 / 2 / 2; z-index: -2; aspect-ratio: 4 / 5; max-height: 80vh; width: 100%; background: #54463B; }
.hero .shot--wide { display: none; }
.hero::before { content: ''; grid-area: 1 / 1 / 2 / 2; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(24,17,13,.82) 0%, rgba(24,17,13,.35) 34%, rgba(24,17,13,0) 58%), linear-gradient(180deg, rgba(24,17,13,.35) 0%, rgba(24,17,13,0) 16%); }
.hero-head, .hero-body { width: 100%; }
.hero-head { grid-area: 1 / 1 / 2 / 2; color: var(--on-ink); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-block: 18px 24px; }
.hero-head .issue { color: var(--on-ink); opacity: .8; margin-bottom: auto; }
.hero-head .issue::before, .hero-head .issue::after { background: var(--line-on-ink); }
.hero-head .kicker { color: var(--on-ink); opacity: .9; }
.hero h1 { font-size: clamp(48px, 9.6vw, 148px); line-height: .92; margin: 0; }
.hero h1 .l { display: block; }
.hero-body { grid-area: 2 / 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-block: 30px 12px; }
.hero-body .lead { max-width: 31em; }
.hero .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 29px); line-height: 1.2; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-season { position: absolute; right: var(--gutter); top: 54px; z-index: -1; font-family: var(--serif); font-style: italic; font-size: clamp(64px, 13vw, 210px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(249, 247, 244, .6); letter-spacing: -.02em; user-select: none; }
.hero-credit { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .hero { grid-template-rows: 1fr auto; min-height: clamp(660px, 92vh, 920px); background: #54463B; color: var(--on-ink); }
  .hero .shot--tall { display: none; }
  .hero .shot--wide { display: block; grid-area: 1 / 1 / 3 / 2; aspect-ratio: auto; max-height: none; height: 100%; }
  .hero::before { grid-area: 1 / 1 / 3 / 2; background: linear-gradient(90deg, rgba(24,17,13,.74) 0%, rgba(24,17,13,.42) 40%, rgba(24,17,13,0) 64%), linear-gradient(0deg, rgba(24,17,13,.55) 0%, rgba(24,17,13,0) 32%); }
  .hero-head { padding-block: 30px 0; gap: 16px; }
  .hero h1 .l + .l { padding-left: clamp(40px, 7vw, 120px); }
  .hero-body { color: var(--on-ink); padding-block: clamp(24px, 3vw, 40px) clamp(180px, 17vw, 250px); }
  .hero-body .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
  .hero-body .btn:hover { background: transparent; color: var(--on-ink); }
  .hero-body .btn.ghost { background: transparent; color: var(--on-ink); }
  .hero-body .btn.ghost:hover { background: var(--on-ink); color: var(--ink); }
  .hero-body :focus-visible { outline-color: var(--on-ink); }
  .hero-credit { color: var(--on-ink-muted); }
  .hero-season { top: auto; bottom: clamp(200px, 19vw, 280px); right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); font-size: clamp(90px, 11vw, 170px); }
}

/* ——— Le panneau : sur grand écran, il sort de la campagne ——— */
.try { position: relative; z-index: 2; padding-block: 36px var(--section); }
.try .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; grid-template-areas: 'text' 'panel'; }
.try-panel { grid-area: panel; min-width: 0; }
.try-text { grid-area: text; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.try-text h2 { font-size: clamp(32px, 3.6vw, 52px); }
.try-text p { color: var(--muted); max-width: 30em; }
@media (min-width: 1020px) {
  .try { padding-top: 0; }
  .try .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; grid-template-areas: 'text panel'; align-items: start; }
  .try-panel { margin-top: calc(-1 * clamp(130px, 13vw, 190px)); }
  /* le panneau déborde au-dessus de #fr-try : sans cette marge, « Le styliste » du menu le coupe de 58 px */
  #fr-try, #en-try { scroll-margin-top: clamp(130px, 13vw, 190px); }
  .try-text { padding-top: clamp(48px, 6vw, 88px); }
}
.panel { box-shadow: 0 50px 90px -50px rgba(20, 14, 10, .6); }

/* ——— Bandeau défilant : les titres des looks ——— */
.marquee { background: var(--ink); color: var(--on-ink); overflow: hidden; padding-block: clamp(16px, 2vw, 26px); border-block: 1px solid var(--ink); }
.marquee-track { display: flex; width: max-content; gap: 0; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3.2vw, 46px); line-height: 1.1; white-space: nowrap; padding-inline: clamp(16px, 2vw, 30px); }
.marquee span::after { content: '✦'; font-style: normal; font-size: .4em; margin-left: clamp(32px, 4vw, 60px); vertical-align: .5em; color: var(--on-ink-muted); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ——— Les looks : la voix, portée par l'image ——— */
.looks { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: thin; }
.look-card { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.look-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #2a221e; }
.look-img .shot { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.look-card:hover .look-img .shot { transform: scale(1.035); }
.look-card figcaption { display: flex; flex-direction: column; gap: 8px; }
.look-card .num { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.look-card .ttl { font-family: var(--serif); font-size: 24px; line-height: 1.08; font-weight: 500; }
.look-card blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18.5px; line-height: 1.32; color: var(--muted); }
.look-card .tag { position: absolute; left: 12px; top: 12px; z-index: 1; background: var(--on-ink); color: var(--ink); font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 5px 9px; }
.looks-cap { margin-top: 40px; font-size: 13px; color: var(--muted); max-width: 60em; }
@media (min-width: 900px) {
  .looks { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 18px; overflow: visible; margin-right: 0; padding: 0; }
  .look-card:nth-child(2) { margin-top: 64px; }
  .look-card .ttl { font-size: 27px; }
}

/* ——— En production : les captures réelles, dans leurs cadres ——— */
.photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.photos figure { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.photos figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.frame { background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 40px 70px -48px rgba(26, 26, 26, .45); }
.frame .bar2 { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.frame .bar2 i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.frame img { width: 100%; height: auto; display: block; }
.frame.phone { border-radius: 30px; padding: 10px; max-width: 300px; border-color: var(--ink); }
.frame.phone img, .frame.phone .ph { border-radius: 22px; }
.ph { display: grid; place-items: center; text-align: center; padding: 24px; aspect-ratio: 16 / 10; background: var(--grege); color: var(--muted); font-size: 13px; }
.frame.phone .ph { aspect-ratio: 9 / 18; }
@media (min-width: 900px) { .photos { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px 48px; } .photos .tall { grid-column: 2; grid-row: 1 / span 2; justify-self: center; } }

/* ——— Matière. Fermeture. Coupe. ——— */
.matter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink); margin-top: clamp(36px, 5vw, 72px); }
.swatch { position: relative; aspect-ratio: 1; isolation: isolate; display: flex; align-items: flex-end; padding: 16px; color: var(--on-ink); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.swatch::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grain); background-size: 96px; mix-blend-mode: overlay; }
.swatch::before { content: ''; position: absolute; inset: 0; z-index: -2; }
.sw-gabardine::before { background: repeating-linear-gradient(135deg, rgba(40,24,8,.2) 0 2px, transparent 2px 7px), linear-gradient(160deg, #C9A679, #A98453); }
.sw-merino { color: var(--ink); } .sw-merino::before { background: repeating-linear-gradient(90deg, rgba(60,45,20,.13) 0 3px, transparent 3px 11px), linear-gradient(180deg, #EFE7D7, #D9CCB3); }
.sw-flanelle::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), #3B3937; }
.sw-cuir::before { background: radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.3), transparent 55%), radial-gradient(90% 70% at 90% 100%, rgba(0,0,0,.35), transparent 60%), #4A3426; }
@media (min-width: 760px) { .matter { grid-template-columns: repeat(4, minmax(0, 1fr)); } .swatch { aspect-ratio: 4 / 5; padding: 22px; } }

/* origine : le plateau */
.origin .shot { aspect-ratio: 4 / 3; }
.origin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 900px) { .origin-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }
.credits { flex-basis: 100%; font-size: 12px; }

/* ——— Rubriques ——— */
.rubric { padding-block: var(--section); border-top: 1px solid var(--line); }
.rubric-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rubric-head { display: flex; flex-direction: column; gap: 18px; }
.rubric-body { margin-top: clamp(36px, 5vw, 72px); min-width: 0; }
@media (min-width: 1020px) {
  .rubric-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 0 32px; }
  .rubric-grid > .kicker { padding-top: 14px; }
  .rubric-body { grid-column: 2; }
}

/* trois choses */
.three { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.three article { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); }
.three .n { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--muted); }
.three p { color: var(--muted); }
@media (min-width: 860px) { .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* face-à-face */
.versus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
.versus figure { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.versus figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.shelf { background: var(--white); border: 1px solid var(--line); padding: 16px; color: var(--muted); }
.shelf-title { font-size: 13px; font-weight: 500; margin-bottom: 12px; color: var(--muted); }
.shelf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shelf-item { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; min-width: 0; line-height: 1.3; }
.shelf-item .box { aspect-ratio: 1; background: var(--shelf); }
.shelf-item .add { border: 1px solid var(--line-strong); padding: 5px 0; text-align: center; font-size: 10.5px; }
.mini { background: var(--white); border: 1px solid var(--line-strong); }
.mini .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini .cell--hero { grid-column: auto; }
.mini .cell--hero .cell-img, .mini .cell-img { aspect-ratio: 3 / 4; height: auto; }
.mini .note { border: 0; padding: 14px 16px 16px; }
.mini .note p { font-size: clamp(16px, 1.3vw, 18.5px); }
@media (min-width: 860px) { .versus { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }

/* deux lectures */
.modes-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 46em; }
.tabs { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; padding: 3px; margin: 34px 0 22px; }
.tabs button { border: 0; background: transparent; border-radius: 999px; padding: 10px 22px; min-height: 42px; cursor: pointer; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: background-color .25s var(--ease), color .25s var(--ease); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.tabpanel[hidden] { display: none; }
.tabpanel.entering { animation: swapin .3s var(--ease); }
@keyframes swapin { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }

/* lecture Magazine */
.mag { background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 40px 70px -48px rgba(26, 26, 26, .4); }
.mag-cover { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.mag-cover .txt { padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.mag-title { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -.015em; }
.mag-chapeau { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; max-width: 30em; }
.mag-cover .shot { aspect-ratio: 4 / 3; }
.mag-rows { list-style: none; margin: 0; padding: 0; counter-reset: piece; }
.mag-rows li { counter-increment: piece; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px clamp(16px, 3vw, 44px); border-bottom: 1px solid var(--line); }
.mag-rows .cell-img { aspect-ratio: 1; }
.mag-rows .cut { inset: 8%; width: 84%; height: 84%; }
.mag-rows .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mag-rows .meta b { font-weight: 400; font-size: 14.5px; }
.mag-rows .meta b::before { content: counter(piece, decimal-leading-zero) ' · '; color: var(--muted); font-size: 11.5px; letter-spacing: .1em; }
.mag-rows .meta i { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--muted); }
.mag-rows .px { grid-column: 2; font-size: 12.5px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.mag-rows .px span { color: var(--ink); margin-right: 10px; }
.mag-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 3vw, 44px); }
@media (min-width: 760px) {
  .mag-cover { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mag-cover .shot { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .mag-rows li { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .mag-rows .px { grid-column: auto; text-align: right; }
}

/* le magazine de votre boutique */
.edito { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
.edito-text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.motto { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; text-wrap: balance; }
.honest { border-left: 1px solid var(--ink); padding-left: 18px; max-width: 32em; }
.stat { font-size: 14px; color: var(--muted); max-width: 40em; }
.stat a { white-space: nowrap; }
.dual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.dual figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dual figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dual-cap { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.browser { background: var(--white); border: 1px solid var(--line-strong); min-width: 0; }
.browser .bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.browser .bar::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.browser .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.browser .page { padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.browser .m { font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.browser .t { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; }
.browser .c { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.3; color: var(--muted); }
.browser .thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.browser .thumbs .cell-img { aspect-ratio: 3 / 4; }
.browser .page .shot { aspect-ratio: 16 / 7; margin: -18px -16px 4px; }
.code { margin: 0; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); padding: 16px; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; height: 100%; }
.code .t { color: var(--on-ink-muted); }
@media (min-width: 700px) { .dual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1020px) { .edito { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }

/* manifeste — la page noire */
.manifesto { background: var(--ink); color: var(--on-ink); padding-block: var(--section); }
.manifesto .kicker { color: var(--on-ink-muted); }
.manifesto ul { list-style: none; margin: 0; padding: 0; }
.manifesto li { font-family: var(--serif); font-style: italic; font-size: clamp(27px, 4vw, 56px); line-height: 1.08; letter-spacing: -.012em; padding: clamp(14px, 1.7vw, 24px) 0; border-top: 1px solid var(--line-on-ink); }
.manifesto li:last-child { border-bottom: 1px solid var(--line-on-ink); }
.manifesto .close { margin-top: clamp(28px, 4vw, 48px); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-ink-muted); }

/* tarifs — une carte d'abonnement, pas trois boîtes */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
.incl { display: flex; flex-direction: column; gap: 16px; }
.incl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--muted); }
.incl li { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
.incl li::before { content: '—'; color: var(--ink); }
.plans { border-top: 1px solid var(--ink); }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line); }
.plan h3 { font-size: clamp(27px, 2.6vw, 36px); font-style: italic; font-weight: 400; }
.plan .scope { grid-column: 1; color: var(--muted); font-size: 15px; }
.plan .price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--serif); font-size: clamp(40px, 4.4vw, 60px); line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
.plan .price small { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 8px; }
.plans-foot { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; margin-top: 22px; }
@media (min-width: 1020px) { .pricing { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 72px; } }

/* mise en place */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--ink); }
.steps .num { font-family: var(--serif); font-size: 44px; line-height: 1; font-variant-numeric: lining-nums; color: var(--muted); }
.steps p { color: var(--muted); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* origine */
.origin .text { display: flex; flex-direction: column; gap: 32px; }
.origin .founders { border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.origin .founders p { color: var(--muted); }
.origin .col { display: flex; flex-direction: column; gap: 28px; }


/* questions */
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); font-weight: 400; font-size: 20px; color: var(--muted); flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--muted); padding: 0 0 22px; max-width: 42em; }

/* démonstration */
.demo { background: #F6F6F4; border-top: 1px solid var(--line); padding-block: var(--section); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.demo-head { display: flex; flex-direction: column; gap: 20px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input { font: inherit; font-size: 19px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; width: 100%; min-width: 0; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; color: var(--muted); }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.form-foot { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-msg { font-size: 15px; min-height: 1.6em; }
.form-msg[data-state="ok"] { font-family: var(--serif); font-style: italic; font-size: 22px; }
.demo-shot { aspect-ratio: 16 / 10; }
@media (min-width: 1020px) {
  .demo-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 80px; align-items: start; }
  .demo-shot { grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
  .demo-head, .demo .form { grid-column: 2; }
}

/* colophon */
.colophon { border-top: 1px solid var(--line); padding-block: 40px 48px; font-size: 13px; color: var(--muted); }
.colophon .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: baseline; }
.colophon .sig { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); }
.colophon nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ——— Compatibilité : pages légales existantes (confidentialite.html, mentions-legales.html, /en/privacy.html, /en/legal.html).
   Elles partagent cette feuille de style : leurs règles d'origine sont conservées ici. ——— */
header.top { position: sticky; top: 0; background: var(--cream); border-bottom: 1px solid var(--line); z-index: 5; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
nav.langs a { text-decoration: none; color: var(--muted); } nav.langs a[aria-current] { color: var(--ink); }
footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--muted); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { text-decoration: none; } footer a:hover { text-decoration: underline; }
.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 8px; }
.legal h2 { font-size: 26px; font-style: normal; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink); }
.legal .muted { color: var(--muted); }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.legal th { font-weight: 400; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.todo { background: var(--white); border: 1px dashed var(--muted); padding: 2px 8px; border-radius: 4px; font-size: 14px; }
/* Le h3 global monte à 23-28 px, soit la taille du h2 de section : dans un texte légal la
   hiérarchie se perdait. Ici le sous-titre est un sous-titre. */
.legal h3 { font-size: 19px; font-weight: 500; margin: 28px 0 8px; }

/* N25 (18/10) — LE TABLEAU DES DURÉES ÉTIRAIT LA PAGE. Mesuré à 390 px de viewport : la largeur
   de MISE EN PAGE valait 466 px en français et 431 en anglais, donc le navigateur rendait toute
   la politique à 84 % et 90 % — chaque mot 16 % plus petit que dessiné, sur la page qu'un
   relecteur d'App Store lit. La page d'accueil, au même moment, lit 390 à l'échelle 1 : le défaut
   venait bien du tableau à quatre colonnes, et de lui seul.
   Un conteneur à défilement horizontal aurait suffi à ne plus étirer la page ; empilé, le tableau
   se LIT sur un téléphone. L'en-tête de colonne devient l'étiquette de chaque cellule
   (`data-label`, posé dans le HTML depuis les `<th>` du tableau lui-même). */
@media (max-width: 700px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: auto; }
  .legal tr:first-child { display: none; }   /* la ligne d'en-tête : son texte vit dans data-label */
  .legal tr { border-top: 1px solid var(--line); padding: 14px 0; }
  .legal td { border-top: 0; padding: 6px 0; }
  .legal td::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .legal td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

[data-lang-root][hidden] { display: none; }

/* ——— V3.1 : photos réelles dans les emplacements ——— */
.shot > img { object-position: 50% 30%; }
.hero .shot--tall > img { object-position: 50% 18%; }
.hero .shot--wide > img { object-position: 62% 30%; }
.shot::after { opacity: .35; }
.look-img .shot > img { object-position: 50% 20%; }
.frame img { width: 100%; height: auto; display: block; }
.frame.phone { max-width: 300px; }
.photos .dash { grid-column: 1; }

/* ——— Démonstration instantanée (21/09) : le styliste se compose sous les yeux du prospect ——— */
.demo-live { grid-column: 1 / -1; display: none; flex-direction: column; gap: 14px; margin-top: 8px; }
.demo-live[data-on] { display: flex; }
.demo-live .demo-live-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.demo-live .demo-live-head .kicker { color: var(--ink); }
.demo-live .host { background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 50px 90px -50px rgba(20,14,10,.5); padding: clamp(12px, 2vw, 28px); min-height: 320px; }
.demo-live .host [data-vestia-inline] { min-height: 300px; }
.demo-msg { font-size: 15px; color: var(--muted); min-height: 1.6em; }
.demo-msg[data-state="ko"] { color: var(--warn, #8a2a2a); }
.demo-msg[data-state="busy"]::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--muted); border-right-color: transparent; border-radius: 50%; margin-right: 8px; vertical-align: -1px; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-msg[data-state="busy"]::before { animation: none; } }

/* ——— v10 : pièces réelles dans le panneau ——— */
.cell-img.packshot { background: #EAE4DA; }
.cell-img.packshot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; box-sizing: border-box; display: block; }
.cell--hero .cell-img.packshot > img { object-fit: cover; object-position: 50% 10%; padding: 0; }
.mini .cell--hero .cell-img.packshot > img { object-fit: contain; padding: 7%; }
.mag-rows .cell-img.packshot > img, .browser .thumbs .cell-img.packshot > img { padding: 8%; }
.cover-piece { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; background: #EAE4DA; display: block; }
.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .board { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); } }
.mini .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.browser .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ——— v10 : la planche (pleine largeur, fond sable) ——— */
.planche { background: #EAE4DA; padding-block: var(--section); border-top: 1px solid var(--line); }
.planche-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(32px, 5vw, 64px); }
.planche-head h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(38px, 6.4vw, 92px); line-height: .98; letter-spacing: -.015em; max-width: 12em; text-wrap: balance; }
.planche-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(26,26,26,.10); border-block: 1px solid rgba(26,26,26,.10); }
@media (min-width: 640px) { .planche-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .planche-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pc { margin: 0; background: #EAE4DA; aspect-ratio: 3 / 4; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc img { width: 78%; height: 78%; object-fit: contain; transition: transform 1.2s var(--ease); }
.pc:hover img { transform: translateY(-8px) scale(1.02); }
.pc figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.planche-cap { margin-top: 28px; font-size: 13px; color: var(--muted); max-width: 60em; }
.planche-cap .credit { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ——— v10 : trois chiffres ——— */
.proof { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 88px); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 760px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.proof-grid > div { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); }
.proof-grid b { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7vw, 104px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.proof-grid span { font-size: 14px; color: var(--muted); max-width: 22em; line-height: 1.5; }

/* ——— v10 : nuanciers photographiques ——— */
.swatch--photo { padding: 0; margin: 0; }
.swatch--photo::before, .swatch--photo::after { display: none; }
.swatch--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.swatch--photo:hover img { transform: scale(1.04); }
.swatch--photo figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: var(--on-ink); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
@media (min-width: 760px) { .swatch--photo figcaption { left: 22px; bottom: 20px; } }

/* ——— v10 : mouvement sobre ——— */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js .looks [data-reveal]:nth-child(2), html.js .proof-grid [data-reveal]:nth-child(2), html.js .matter [data-reveal]:nth-child(2) { transition-delay: .12s; }
html.js .looks [data-reveal]:nth-child(3), html.js .proof-grid [data-reveal]:nth-child(3), html.js .matter [data-reveal]:nth-child(3) { transition-delay: .24s; }
html.js .matter [data-reveal]:nth-child(4) { transition-delay: .36s; }
html.js .planche-grid .pc:nth-child(2) { transition-delay: .07s; } html.js .planche-grid .pc:nth-child(3) { transition-delay: .14s; } html.js .planche-grid .pc:nth-child(4) { transition-delay: .21s; } html.js .planche-grid .pc:nth-child(5) { transition-delay: .28s; }
html.js .planche-grid .pc:nth-child(6) { transition-delay: .1s; } html.js .planche-grid .pc:nth-child(7) { transition-delay: .17s; } html.js .planche-grid .pc:nth-child(8) { transition-delay: .24s; } html.js .planche-grid .pc:nth-child(9) { transition-delay: .31s; } html.js .planche-grid .pc:nth-child(10) { transition-delay: .38s; }
.hero .shot > img { animation: kb 26s var(--ease) both; transform-origin: 60% 30%; }
@keyframes kb { from { transform: scale(1.06); } to { transform: scale(1); } }
.panel { transition: box-shadow .6s var(--ease); }
.try-panel:hover .panel { box-shadow: 0 60px 90px -50px rgba(26, 26, 26, .5); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero .shot > img { animation: none; }
  .pc img, .swatch--photo img { transition: none; }
}

/* ——— v11 : jamais de vêtement coupé ——— */
.cell--hero .cell-img.packshot > img { object-fit: contain; object-position: 50% 50%; padding: 5%; }
.cell--hero .cell-img.packshot { aspect-ratio: 1 / 1; }
@media (min-width: 640px) { .cell--hero .cell-img.packshot { aspect-ratio: auto; } }
.cover-piece { object-fit: contain; object-position: 50% 50%; padding: 5%; box-sizing: border-box; }

/* ——— v12 : quatre pièces ——— */
.board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .board { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }
.mini .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.browser .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ——— v13 : le panneau vit ——— */
.panel.auto .swapping .top-variant:not([hidden]), .panel.auto.swapping .top-variant:not([hidden]), .panel.auto.swapping .note p, .panel.auto.swapping .look-total { animation-duration: .55s; }
.gathering .board .cell-img > img { animation: gather .9s var(--ease) both; }
.gathering .board .cell:nth-child(2) .cell-img > img { animation-delay: .06s; }
.gathering .board .cell:nth-child(3) .cell-img > img { animation-delay: .12s; }
.gathering .board .cell:nth-child(4) .cell-img > img { animation-delay: .18s; }
@keyframes gather { 0% { transform: none; opacity: 1; } 45% { transform: translate(9%, 13%) scale(.86); opacity: .28; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gathering .board .cell-img > img { animation: none; } }

/* ——— v14 : profondeur ——— */
.try-panel .panel { will-change: transform; transition: box-shadow .6s var(--ease), transform .18s linear; }

/* ——— v15 : revue globale ——— */
.panel-name { white-space: nowrap; }
.panel-meta { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
.pc figcaption { right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Le vrai widget dans le panneau (22/09) ─────────────────────────────────
   Le panneau dessiné à la main reste dans le HTML : il est peint avant tout script
   et sert de couverture d'attente, exactement comme la page « Le Styliste » de Shopify.
   Le widget écrit par-dessus quand il est prêt (après `load` + idle : la page garde
   son Lighthouse). L'hôte ne dessine rien lui-même. */
.try-host { display: block; width: 100%; min-width: 0; }
.try-host > .cb-panel { width: 100%; }
/* l'inline du widget pose `.cb-panel.cb-inline-studio{box-shadow:none}` (0-2-0) : il faut au moins autant */
.try-host > .cb-panel.cb-inline-studio { box-shadow: 0 40px 70px -48px rgba(26, 26, 26, .45); transition: box-shadow .6s var(--ease); }
/* 28/09 : le panneau dessiné portait une ombre, le vrai widget arrivait à plat — sur une photo de couverture,
   l'ombre est ce qui le pose SUR la page. Elle vit ici, dans le site : la page « Le Styliste » d'un marchand
   reste plate, c'est la doctrine de l'inline. */
.try-host:hover > .cb-panel.cb-inline-studio { box-shadow: 0 60px 90px -50px rgba(26, 26, 26, .5); }
/* Quand le visiteur a demandé SA boutique, le panneau la montre et se présente. */
.try-live { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.try-live[hidden] { display: none; }
.try-live .kicker { color: var(--ink); }

/* ─── Contraste sur fond sable (23/09, mesuré par Lighthouse) ────────────────
   Le gris chaud du site donne 4,24:1 sur le sable #EAE4DA : sous la barre AA
   pour du petit texte. Un cran plus sombre dans cette rubrique uniquement,
   pour ne pas toucher au gris que Mourad a réglé pour le reste du site. */
.planche { --muted: #635e57; }

/* ═══ v18 (28/09) — landing resserrée : hero avec le champ de démonstration, bandes d'appel, encadré lisible ═══ */
.hero-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 640px; margin-top: 4px; }
.hero-form .field { gap: 8px; }
.hero-form .btn { justify-self: start; }
.hero-form .fine { font-size: 12.5px; color: var(--muted); margin: 0; }
.hero-form .fine a { color: var(--ink); text-underline-offset: 4px; }
@media (min-width: 640px) {
  .hero-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hero-form .fine { grid-column: 1 / -1; }
}
.band { border-top: 1px solid var(--line); background: #F6F6F4; }
.band .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-block: 28px; }
.band p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.25; max-width: 30em; }
.fiche-photo { max-width: 640px; }
.fiche-photo .frame { border: 1px solid var(--line); background: #fff; }
.fiche-photo img { display: block; width: 100%; height: auto; }
.looks-matter { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(36px, 5vw, 64px); max-width: 44em; }
.looks-matter .lead { margin: 0; }

/* ═══ v19 (28/09) — audit externe appliqué : preuves, manifeste-interlude, plan recommandé, Groupe « Bientôt », offre fondatrice ═══ */
.proof .wrap > .kicker { display: block; margin-bottom: 28px; }
.proof-photos { margin-top: clamp(40px, 5vw, 72px); }
.manifesto-line { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.1; margin: 0 0 28px; text-wrap: balance; }
.manifesto ul.small { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; padding: 0; margin: 0 0 28px; list-style: none; }
.manifesto ul.small li { font-family: var(--sans); font-size: 14px; color: var(--on-ink-muted); padding: 0; border: 0; }
.plan { position: relative; }
.plan-badge { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; margin-bottom: 14px; }
.plan--soon .price { color: var(--muted); font-size: 22px; }
.origin .founders .btn { margin-top: 6px; }

/* ── v20 (28/09) — la fiche produit en fausse boutique : packshots réels, une note réelle, aucune capture ── */
.fiche-mock { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fiche-mock figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fm { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line-strong); background: #fff; box-shadow: 0 40px 70px -48px rgba(26, 26, 26, .45); }
.fm-media { display: grid; place-items: center; padding: 28px 24px 12px; background: #fff; }
.fm-media img { width: 100%; max-width: 210px; height: auto; display: block; }
.fm-info { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.fm-crumb { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fm-title { margin: 14px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; }
.fm-price { margin: 6px 0 0; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.fm-desc { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 42ch; }
.fm-sizes { margin: 20px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-sizes .fm-lab { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.fm-sizes span:not(.fm-lab) { min-width: 40px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); font-size: 12.5px; font-variant-numeric: lining-nums; }
.fm-sizes span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fm-btn { margin: 18px 0 0; display: block; text-align: center; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 15px 18px; }
.fm-ship { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
/* l'encadré, tel que le widget le pose sous le formulaire d'achat (mêmes mesures que .cb-portee) */
.pf-card { margin: 24px 0 0; padding: 16px 18px 14px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; line-height: 1.3; }
.pf-k { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 8px; }
.pf-word { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--ink); }
.pf-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.pf-thumbs { display: flex; border: 1px solid rgba(0, 0, 0, .08); }
.pf-ph { display: block; width: 46px; height: 69px; border-right: 1px solid rgba(0, 0, 0, .08); background: #fff; overflow: hidden; }
.pf-ph:last-child { border-right: 0; }
.pf-ph img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pf-t { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.25; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-cta { grid-column: 2; justify-self: start; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 1px; white-space: nowrap; }
@media (min-width: 720px) {
  .fm { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fm-media { padding: 40px 32px; border-right: 1px solid var(--line); }
  .fm-media img { max-width: 340px; }
  .fm-info { padding: 34px 36px 36px; }
}

/* v21 (2026-09-28) : après approbation — CTA d'installation, « Où il apparaît » (trois portes + jamais), point mort. */
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero-or { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); }
.hero-form .field label { font-size: 11.5px; }
.portes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 900px) { .portes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.porte { margin: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.porte-vis .frame { border: 1px solid var(--line); background: #fff; overflow: hidden; }
.porte-vis img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.porte figcaption { display: flex; flex-direction: column; gap: 8px; }
.porte .n { font-family: var(--serif); font-size: 22px; color: var(--muted); line-height: 1; }
.porte h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; margin: 0; }
.porte p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.teaser-mock { position: relative; aspect-ratio: 4 / 3; background: #fff; padding: 18px; }
.tm-page { display: flex; flex-direction: column; gap: 10px; }
.tm-page i { display: block; height: 8px; width: 88%; background: var(--grege); border-radius: 2px; }
.tm-page i:first-child { height: 34%; width: 46%; background: var(--mastic); margin-bottom: 6px; }
.tm-teaser { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; }
.tm-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 8px 24px rgba(0,0,0,.18); position: relative; z-index: 2; }
.tm-label { margin-left: -14px; padding: 10px 16px 10px 26px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.never { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .never { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.never li { padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.never li::before { content: "✦ "; font-size: 12px; vertical-align: middle; }
.roi { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--ink); background: #fff; }
@media (min-width: 820px) { .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.roi-in { padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; align-content: start; }
.roi select { font: inherit; font-size: 19px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; width: 100%; -webkit-appearance: none; appearance: none; }
.roi-out { background: var(--ink); color: var(--on-ink); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.roi-n { font-family: var(--serif); font-size: clamp(72px, 10vw, 128px); line-height: .9; font-variant-numeric: lining-nums; }
.roi-out p { margin: 0; font-size: 17px; max-width: 34ch; }
.roi-out .fine { color: var(--on-ink-muted); font-size: 12.5px; margin-top: 12px; }
.hero .hero-or { color: rgba(255,255,255,.78); }
.hero .hero-form .field label { color: rgba(255,255,255,.72); }

/* ── v21 (28/09) — porte I : la fiche produit DESSINÉE, jamais la capture de la boutique de test
   (thème rouge et bleu, photos d'agrégateur : exactement ce que la maquette de la fiche a remplacé). ── */
.fiche-mini { position: relative; aspect-ratio: 4 / 3; background: #fff; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fiche-mini .fmi-btn { display: block; text-align: center; background: var(--ink); color: #fff; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 10px 12px; }
.fiche-mini .pf-card { margin: 0; padding: 11px 12px 10px; }
.fiche-mini .pf-k { font-size: 8.5px; margin-bottom: 5px; }
.fiche-mini .pf-word { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
.fiche-mini .pf-strip { gap: 8px 10px; }
.fiche-mini .pf-ph { width: 28px; height: 42px; }
.fiche-mini .pf-t { font-size: 11.5px; }
.fiche-mini .pf-cta { font-size: 8.5px; }

/* 28/09 : `.looks-matter` est un enfant direct de `.rubric-grid` sans colonne assignée — il tombait donc
   dans la colonne ÉTROITE du surtitre (185 px) avec 927 px de vide à droite, sept lignes au lieu de deux.
   30/09 : la règle était posée à TOUTES les largeurs. Sous 1020 px la grille n'a qu'une colonne : viser la
   colonne 2 en créait une implicite, la première tombait à 0 et le corps de la rubrique avec elle — les deux
   notes et leur légende se lisaient dans 0 px de large, un mot par ligne. Elle ne vaut qu'à deux colonnes. */
@media (min-width: 1020px) {
  .rubric-grid > .looks-matter { grid-column: 2; align-self: start; }
}

/* ── v23 (28/09) — la section de démonstration prend sa propre silhouette (bomber olive), au lieu de répéter
   la photo de la section Origine. Le fichier est un portrait 3:4 ; le cadre mobile était en 16:10 et coupait
   la tête, quelle que soit la découpe. Il passe en 4:5 : une silhouette entière plutôt qu'un fragment. ── */
.demo-shot { aspect-ratio: 4 / 5; }

/* ── 29/09 — le produit cesse de se montrer dans la colonne de lecture.
   Les trois portes et les deux mises en scène tenaient dans 927 px au milieu d'une page de 1470 :
   les captures tombaient à 286 et 440 px, trop petites pour qu'on voie le widget. Ces blocs sortent
   de la colonne — comme le fait déjà la bande des matières — et prennent la largeur de la page. ── */
.full { width: 100%; max-width: 1460px; margin: clamp(32px, 4vw, 52px) auto 0; padding-inline: clamp(16px, 3vw, 40px); }
.full .never { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1000px) { .full .never { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
/* les deux mises en scène sont à égalité : la grille 8fr/4fr héritée écrasait le Cahier */
@media (min-width: 900px) {
  #fr-modes .full .photos, #en-modes .full .photos { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}
/* 29/09 : « .looks » est un carrousel horizontal (colonnes de 340 px) conçu pour beaucoup de cartes.
   Avec DEUX notes, il laissait le tiers droit de la colonne vide. À partir du bureau, les deux cartes
   occupent la colonne à égalité : les photos passent de 335 à ~443 px et le vide disparaît. */
@media (min-width: 900px) {
  .looks { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto;
           gap: 40px; overflow-x: visible; margin-right: 0; padding-bottom: 0; }
}

/* ── 29/09 — « Deux mises en scène » cesse d'être deux captures posées côte à côte.
   Choisir sa mise en scène est un GESTE : la rubrique le rend, avec le commutateur du widget lui-même.
   Une seule image à l'écran, donc deux fois plus grande, et la section perd son air de vitrine fermée. ── */
.stagings { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.stg-switch { display: inline-flex; background: var(--paper, #fff); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; }
.stg-btn { appearance: none; background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 10px 20px; transition: background .2s var(--ease), color .2s var(--ease); }
.stg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.stg-fig { margin: 0; width: 100%; max-width: 1180px; display: flex; flex-direction: column; gap: 14px; }
.stg-fig .frame img { display: block; width: 100%; height: auto; }
/* `display:block` d'auteur bat le `display:none` de l'attribut `hidden` : il faut le redire. */
.stg-fig .frame img[hidden] { display: none; }
.stg-fig figcaption { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stg-hint { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .stg-btn { padding: 9px 14px; font-size: 11px; } }

/* ── 29/09 — la pastille se REPLIE, dans son cadre.
   Le texte de la porte II annonce « elle se replie sur son ✦ au bout de cinq secondes » : le cadre le montre
   au lieu de le dire. Cinq secondes avec le libellé, cinq sans, en boucle lente — une boucle parce qu'on
   démontre un geste, pas parce que la pastille reviendrait d'elle-même dans une vraie boutique.
   L'animation ne démarre qu'une fois la porte à l'écran, et jamais sous prefers-reduced-motion. ── */
.tm-label { overflow: hidden; white-space: nowrap; max-width: 260px; }
@keyframes tm-repli {
  0%, 42%  { max-width: 260px; opacity: 1; padding-left: 26px; padding-right: 16px; }
  50%, 92% { max-width: 0;     opacity: 0; padding-left: 0;    padding-right: 0; }
  100%     { max-width: 260px; opacity: 1; padding-left: 26px; padding-right: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .porte.in .tm-label { animation: tm-repli 11s cubic-bezier(.4, 0, .2, 1) infinite; }
}

/* La respiration des rubriques était la même sur un écran de 1470 et de 375 : 72 px en haut
   et en bas, quatorze fois. Sur téléphone elle passe à 48, ce qui rend ~670 px à la page. */
@media (max-width: 700px) { .rubric, .proof, .demo, .manifesto { padding-block: 40px; } }
/* ── 30/09 — la page respirait comme sur un grand écran. Sur téléphone, les mêmes blocs
   se lisent avec moins d'air : les rythmes internes se resserrent, aucun contenu ne part. ── */
@media (max-width: 700px) {
  .rubric-body { margin-top: 22px; }
  .three { gap: 20px; }
  .three article { padding-top: 16px; }
  .portes { gap: 24px; }
  .porte { gap: 14px; }
  .full { margin-top: 24px; }
  .full .never { margin-top: 22px; }
  .never li { padding: 12px 0; }
  .look-img { aspect-ratio: 4 / 5; }
  .looks-cap { margin-top: 24px; }
  .looks-matter { margin-top: 28px; }
  .photos { gap: 20px; }
  .proof-photos .frame.phone { max-width: 196px; margin-inline: auto; }
  .fiche-mock .fm-media { padding: 18px 16px 8px; }
  .fiche-mock .fm-media img { max-width: 148px; }
  .fiche-mock .fm-info { padding: 18px 16px 20px; }
  .demo-grid { gap: 28px; }
  /* la bande des matières RESTE en 2 × 2 : passée à quatre colonnes elle déborde de 14 px,
     quelle que soit la gouttière — la légende « BOUTONNAGE » impose sa largeur minimale. */
  .swatch { padding: 14px; }
  .rubric, .proof, .demo, .manifesto, .try, .band { padding-block: 30px; }
  .faq details { padding-block: 14px; }
  .roi-in, .roi-out { padding: 22px 18px; }
}
@media (max-width: 700px) {
  .try, .band { padding-block: 40px; }
  .never { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .never li { font-size: 16px; line-height: 1.28; }
  .porte-vis .frame { max-width: 268px; margin-inline: auto; }
  .fiche-mock .pf-card { padding: 12px 13px 11px; }
  .demo-shot { max-width: 258px; margin-inline: auto; }
}

/* ── B4 (30/09) — les deux états de la page, l'un caché. Le drapeau est `data-pf` sur <html> :
   "review" tant que la fiche App Store est en validation, "live" le jour de l'approbation.
   Bascule = un attribut par page (FR et EN), rien à déployer d'autre. Aucun script : pas de
   clignotement, et l'état reste juste si le JS ne s'exécute pas. ── */
html:not([data-pf="live"]) .pf-live { display: none; }
html[data-pf="live"] .pf-review { display: none; }

/* ── Le magazine (02/10, refonte V4) — la rubrique de la landing et la page magazine.html.
   Le produit sort de la colonne de lecture (.full, leçon du 29/09) : à gauche le texte, à droite
   la page RÉELLE servie par l'API dans un cadre de navigateur, et le JSON-LD tel qu'il est publié. ── */
.magz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1020px) { .magz { grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); gap: 48px clamp(32px, 4vw, 64px); } }
.magz-text { display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.magz-text .lead { max-width: none; }
.magz-line { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.01em; }
.cite { margin: 0; padding: 2px 0 2px 20px; border-left: 1px solid var(--ink); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.src { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.src a { color: var(--muted); }
.magz-text .btn { align-self: flex-start; }
.magz-vis { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.magz-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (min-width: 760px) { .magz-pair { grid-template-columns: minmax(0, 11fr) minmax(0, 7fr); } }
.magz-pair figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.magz-pair figcaption { order: -1; }
.magz-pair .browser { flex: 1 1 auto; display: flex; flex-direction: column; box-shadow: 0 40px 80px -60px rgba(26, 26, 26, .5); }
.ibox { position: relative; flex: 1 1 auto; height: clamp(520px, 46vw, 640px); background: var(--grege); }
.ibox iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--white); }
.machine { flex: 1 1 auto; margin: 0; padding: 20px 22px; background: var(--ink); color: var(--taupe); font: 13px/1.75 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; max-height: clamp(520px, 46vw, 640px); overflow: auto; }
.machine b { font-weight: 400; color: var(--white); }
.machine i { font-style: normal; color: var(--on-ink-muted); }
.magz-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; line-height: 1.5; }
.magz-foot span { font-style: italic; color: var(--muted); }
.magz-foot a { color: var(--ink); }
.incl li.new { font-weight: 500; }

/* page magazine.html */
.mg-hero { padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.mg-ours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.mg-h1 { margin: clamp(28px, 4vw, 44px) 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 7.6vw, 116px); line-height: .92; letter-spacing: -.025em; text-wrap: balance; }
.mg-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 64px; margin-top: clamp(24px, 3vw, 40px); }
.mg-intro > div:first-child { flex: 1 1 380px; max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.mg-intro .lead { max-width: none; }
.mg-intro .magz-line { font-size: clamp(26px, 2.4vw, 32px); }
.mg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.mg-fig { margin: clamp(36px, 4.5vw, 56px) 0 0; display: flex; flex-direction: column; gap: 12px; }
.mg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.mg-tabs { display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: 14px; }
.mg-tabs button { appearance: none; min-height: 40px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.mg-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.mg-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mg-view { display: flex; border: 1px solid var(--ink); }
.mg-view button { appearance: none; min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.mg-view button + button { border-left: 1px solid var(--ink); }
.mg-view button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mg-view button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mg-stage { display: flex; justify-content: center; height: clamp(560px, 80vh, 900px); background: var(--grege); }
.mg-stage iframe { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; background: var(--white); transition: width .3s var(--ease); }
.mg-fig[data-view="mobile"] .mg-stage iframe { width: 390px; box-shadow: 0 0 0 1px var(--line); }
.mg-fig .browser { box-shadow: 0 40px 80px -60px rgba(26, 26, 26, .5); }
.mg-fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 13px; line-height: 1.5; }
.mg-fig figcaption i { font-style: italic; color: var(--muted); }
.mg-machine { background: var(--grege); padding-block: var(--section); }
.mg-machine .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 900px) { .mg-machine .wrap { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); } }
.mg-machine .text { display: flex; flex-direction: column; gap: 24px; max-width: 480px; }
.mg-machine h2 { margin: 0; }
.mg-machine figure { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mg-machine .machine { max-height: none; padding: clamp(20px, 2.4vw, 32px); }
.mg-machine figcaption { font-size: 13px; font-style: italic; color: var(--muted); }
.mg-article { padding-block: var(--section); }
.mg-article .head { max-width: 820px; display: flex; flex-direction: column; gap: 22px; margin-bottom: clamp(40px, 5vw, 64px); }
.mg-article h2 { margin: 0; }
.mg-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 36px 48px; }
.mg-parts article { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); }
.mg-parts .n { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; }
.mg-parts h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.mg-parts p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.mg-parts button { appearance: none; align-self: flex-start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mg-parts button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mg-cta { background: var(--ink); color: var(--on-ink); padding-block: clamp(72px, 9vw, 128px); }
.mg-cta .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 36px 64px; }
.mg-cta .text { flex: 1 1 460px; max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.mg-cta .kicker { color: var(--on-ink-muted); }
.mg-cta h2 { margin: 0; }
.mg-cta a.plain { color: var(--on-ink); font-size: 14px; }
.mast nav.main a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 700px) {
  .magz { gap: 28px; }
  .ibox, .machine { height: 460px; max-height: 460px; }
  .mg-stage { height: 560px; }
  .mg-fig[data-view="mobile"] .mg-stage iframe { width: 100%; box-shadow: none; }
  .mg-machine, .mg-article { padding-block: 40px; }
}