/* ═══════════════════════════════════════════════════════════════
   MAISON CARRÉ — landing Drop 02
   Palette achromatique volontaire : aucune couleur d'accent.
   Le seul « accent » du site est l'inversion noir / papier.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #0B0B0B;
  --ink-raise:  #101010;
  --chalk:      #EDEBE6;
  --graphite:   #7F7C76;   /* 4.7:1 sur --ink — WCAG AA texte normal */
  --hair:       #232323;
  --paper:      #EDEAE3;
  --paper-ink:  #101010;
  --paper-hair: #C9C4BA;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rhythm: clamp(5rem, 12vh, 9rem);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* le point de couture : motif de séparation de la marque */
  --seam: repeating-linear-gradient(
    to right, var(--hair) 0 7px, transparent 7px 14px);
  --seam-paper: repeating-linear-gradient(
    to right, var(--paper-hair) 0 7px, transparent 7px 14px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.05rem, .55vw + .95rem, 1.25rem);
  line-height: 1.62;
  /* Cormorant est en chiffres elzéviriens par défaut : illisible dans une fiche technique */
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--chalk); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 1px solid var(--chalk);
  outline-offset: 4px;
}

/* ── voix utilitaire : le registre « fiche technique » ───────── */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.5;
}

.sep { padding: 0 .6em; opacity: .45; }

.eyebrow { color: var(--graphite); margin: 0 0 1.6rem; }

/* ── échelle d'affichage ─────────────────────────────────────── */
.display {
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
h1.display     { font-size: clamp(2.35rem, 4.4vw, 4.05rem); line-height: 1.02; }
.display--lg   { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.04; }
.display--md   { font-size: clamp(1.7rem, 2.7vw, 2.4rem); letter-spacing: -.01em; line-height: 1.12; }

.display .line { display: block; }
.display .line--muted { color: var(--graphite); }

/* ── papier millimétré : le substrat sur lequel tout s'aligne ── */
.grid-substrate {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 30%, transparent 100%);
}

main, .masthead, .colophon { position: relative; z-index: 1; }

/* ═══════════════════════ EN-TÊTE ═══════════════════════ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem var(--gutter);
  background: rgba(11,11,11,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.masthead.is-visible {
  opacity: 1;
  transform: none;
  border-bottom-color: var(--hair);
}
.masthead__logo {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.masthead__wordmark { height: 13px; width: auto; }
.masthead__mark { height: 24px; width: auto; }
.masthead__cta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--chalk);
  text-decoration: none;
  padding: .62rem 1.1rem;
  border: 1px solid var(--hair);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.masthead__cta:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

/* ═══════════════════════ HERO ═══════════════════════ */
.hero {
  min-height: 100svh;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

.hero__origin {
  color: var(--graphite);
  margin: 0;
  text-align: right;
}

.hero__inner {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  align-content: center;
  padding: clamp(2.5rem, 7vh, 5rem) 0;
}

.hero__text { max-width: 36rem; }

/* ── le monogramme et sa cote ── */
.hero__mark { position: relative; }
.mark {
  width: clamp(204px, 26vw, 340px);
  height: auto;
  color: var(--chalk);
  overflow: visible;
}
.mark__frame { stroke-dasharray: 1820; }
.mark__wordmark { opacity: 1; }

.dimension path { stroke: var(--graphite); stroke-width: 4; fill: none; }
.stitch { stroke-width: 8; stroke-linecap: butt; }

/* ── choix : modèle, taille, coloris ── */
.options {
  border: 0;
  margin: 0 0 1.35rem;
  padding: 0;
}
.options__label {
  color: var(--graphite);
  padding: 0;
  margin-bottom: .6rem;
  float: left;      /* un legend ne suit pas le flux : on le remet dedans */
  width: 100%;
}
.options__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  clear: both;
}

.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  border: 1px solid var(--hair);
  padding: .58rem .9rem;
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background-color .25s var(--ease);
}
.chip:hover span { border-color: var(--graphite); color: var(--chalk); }
.chip input:checked + span {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--ink);
}
.chip input:focus-visible + span { outline: 1px solid var(--chalk); outline-offset: 3px; }

.chip--soon { cursor: default; }
.chip--soon span {
  border-style: dashed;
  border-color: var(--graphite);
  color: var(--graphite);
}
.chip--soon:hover span { border-color: var(--graphite); color: var(--graphite); }

/* sur fond papier, la section Accès garde ses contrastes */
.options.is-invalid .options__label { color: var(--chalk); }
.options.is-invalid .chip span { border-color: var(--graphite); }

/* ── formulaire ── */
/* L'argument de rareté, remonté sous le titre : c'est ce qui doit frapper
   avant même le formulaire. Repris de la section « Accès », où il faisait
   double emploi. */
.hero__lede {
  max-width: 30rem;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0;
  color: var(--graphite);
}

.signup { margin: clamp(2rem, 4vh, 2.8rem) 0 0; }

.signup__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--graphite);
  transition: border-color .3s var(--ease);
}
.signup__row:focus-within { border-bottom-color: var(--chalk); }

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--chalk);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  padding: .85rem .2rem;
}
.signup__input::placeholder { color: var(--graphite); opacity: 1; }
.signup__input:focus { outline: none; }

.signup__button {
  flex: 0 0 auto;
  background: var(--chalk);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  padding: .85rem 1.5rem;
  margin: .28rem 0 .28rem 1rem;
  font-family: inherit;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.signup__button:hover { opacity: .82; }
.signup__button:active { transform: translateY(1px); }
.signup__button[disabled] { opacity: .5; cursor: default; }

/* Champ secondaire, placé AVANT l'e-mail : Denis veut le pseudo en premier.
   Il reste visiblement facultatif — filet discret, jamais concurrent du
   bouton — et c'est lui qui porte l'écart avec la ligne e-mail en dessous. */
.signup__social {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 1.1rem;
  max-width: 22rem;
  border-bottom: 1px solid var(--hair);
  transition: border-color .3s var(--ease);
}
.signup__social:focus-within { border-bottom-color: var(--graphite); }

.signup__at {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  color: var(--graphite);
}
.signup__handle {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--chalk);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  padding: .5rem 0;
}
.signup__handle::placeholder { color: var(--graphite); opacity: 1; }
.signup__handle:focus { outline: none; }

.signup.is-done .signup__social { opacity: .28; pointer-events: none; }

.signup__note {
  color: var(--graphite);
  margin: .95rem 0 0;
  transition: color .3s var(--ease);
}
.signup__note.is-error { color: var(--chalk); }

.signup.is-done .signup__row { opacity: .28; pointer-events: none; }
.options.is-locked { opacity: .35; pointer-events: none; }

/* ── bandeau technique bas de hero ── */
.ticker {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hair);
  color: var(--chalk);
}
.ticker__key { color: var(--graphite); padding-right: .7em; }

/* ═══════════════════════ SECTIONS ═══════════════════════ */
.section-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.section-head__next {
  color: var(--graphite);
  margin: 1.1rem 0 0;
}

.piece {
  padding: var(--rhythm) var(--gutter);
  border-top: 1px solid var(--hair);
}

.piece__grid { max-width: 62rem; }

.specs {
  position: relative;
  margin: 0;
  padding-top: 1px;
}
.specs::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--seam);
}
.specs__row {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.05rem 0;
}
/* Les filets sont visibles par défaut. Le tracé progressif n'est ajouté
   que si le script confirme pouvoir l'animer (classe .js-anim). */
.specs__row::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--seam);
  transform-origin: left;
}
.specs__row::before { bottom: 0; }

.js-anim .specs__row::before {
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}
.js-anim .specs__row.is-in::before { transform: scaleX(1); }

.specs dt {
  color: var(--graphite);
  padding-top: .38rem;
  transition: color .4s var(--ease);
}
.specs__row:hover dt { color: var(--chalk); }
.specs dd { margin: 0; }


/* ── inversion papier ── */
.principle {
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--rhythm) var(--gutter);
}
.principle__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 74rem;
}
.principle__lead { position: sticky; top: 6rem; }
.principle .eyebrow { color: #6B675E; }
.statement { margin-bottom: clamp(2rem, 5vh, 3rem); }
.principle__body p { margin: 0 0 1.35rem; }
.principle__body p:last-child { margin-bottom: 0; }
/* ── la bande photo ──
   Pas de max-width : la bande occupe toute la largeur de l'écran. Une largeur
   bornée laissait une plage noire à droite sur les grands moniteurs. Ce qui
   dépasse se rattrape au défilement horizontal plutôt qu'en rétrécissant. */
.gallery {
  padding: var(--rhythm) 0 0;
}
/* Nomme la série. Il y aura d'autres pièces : sans étiquette, on ne sait pas
   à quel modèle ces photos se rapportent. */
.gallery__title {
  margin: 0 0 1.4rem;
  padding: 0 var(--gutter);
}
.gallery__strip {
  display: flex;
  gap: clamp(.5rem, 1vw, .9rem);
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;    /* n'entraîne pas la navigation arrière */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;             /* la barre casserait la bande noire */
  /* « safe » est le mot important : centré tant que les quatre photos tiennent
     à l'écran, recalé à gauche dès que ça déborde. Un simple « center » rendrait
     le début de la bande inatteignable au défilement. */
  justify-content: safe center;
}
.gallery__strip::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 auto;
  /* Calibré pour que les quatre photos débordent toujours un peu sur un écran
     d'ordinateur : la coupe à droite est le seul indice fiable qu'il y a autre
     chose à voir, et il ne reste aucune plage noire inutile. */
  width: clamp(16rem, 30vw, 28rem);
  scroll-snap-align: start;
}
.shot__link {
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
/* Le 3:4 est imposé ici : même si une photo arrive dans un autre format,
   la bande reste régulière plutôt que de partir en escalier. */
.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ink-raise);  /* évite le flash blanc avant chargement */
  transition: opacity .45s var(--ease);
}
.shot__link:hover img { opacity: .78; }

/* ── agrandissement ──
   Construit par main.js et retiré du flux tant qu'il est fermé : sans
   JavaScript, .shot__link reste un lien direct vers le fichier image. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Opaque : à 96 % on lisait encore les titres de la page derrière la photo.
     Le fondu à l'ouverture vient de l'opacité du bloc, pas de celle du fond. */
  background: #050505;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox[data-open] { opacity: 1; }
.lightbox img {
  max-width: min(92vw, 60rem);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__close,
.lightbox__step {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--graphite);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__step:hover { color: var(--chalk); }
.lightbox__close { top: .6rem; right: .6rem; }
.lightbox__step--prev { left: .4rem; }
.lightbox__step--next { right: .4rem; }
.lightbox__count {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .55rem;
  letter-spacing: .16em;
  color: var(--graphite);
}
body.is-zoomed { overflow: hidden; }

/* ── chute du récit ── */
.principle__close {
  margin: clamp(1.8rem, 4vh, 2.6rem) 0 0;
  color: var(--paper-ink);
}

/* ── CTA final ── */
.access { padding: var(--rhythm) var(--gutter); }
.access__inner { max-width: 34rem; }
.access__lede { color: var(--graphite); margin: 1.8rem 0 0; }
.signup--wide { max-width: 34rem; }

/* ── registre des drops : le contrôle du nombre, rendu public ── */
.ledger {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  color: var(--chalk);
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: .95rem 0;
  position: relative;
}
.ledger__row::before,
.ledger__row:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--seam);
}
.ledger__row::before { top: 0; }
.ledger__row:last-child::after { bottom: 0; }
.ledger dt { color: var(--graphite); }
.ledger dd { margin: 0; }
.ledger__state { text-align: right; }
.ledger__row--done { color: var(--graphite); }
.ledger__row--done .ledger__state { color: var(--chalk); }

/* ═══════════════════════ PAGES LÉGALES ═══════════════════════ */
.legal {
  max-width: 44rem;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) var(--rhythm);
}
.legal h1 { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.legal__lede {
  color: var(--graphite);
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}

.legal__block { position: relative; padding: clamp(1.8rem, 4vh, 2.6rem) 0 0; }
.legal__block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--seam);
}
.legal__block + .legal__block { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

.legal h2 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 1.1rem;
}
.legal p { margin: 0 0 1.1rem; }
.legal p:last-child { margin-bottom: 0; }
.legal a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--hair); }
.legal a:hover { border-bottom-color: var(--chalk); }
.legal strong { font-weight: 400; color: var(--chalk); }

.legal__list { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.legal__list li { margin-bottom: .7rem; }
.legal__list li::marker { color: var(--graphite); }

.legal__updated {
  color: var(--graphite);
  margin: clamp(3rem, 7vh, 4.5rem) 0 0;
  padding-top: 1.3rem;
  position: relative;
}
.legal__updated::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--seam);
}

/* ═══════════════════════ PIED ═══════════════════════ */
.colophon {
  position: relative;
  border-top: 1px solid var(--hair);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.colophon__logo { width: 132px; opacity: .55; }
.colophon__meta { display: flex; flex-wrap: wrap; gap: .6rem 2rem; color: var(--graphite); }
.colophon__meta a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid transparent; }
.colophon__meta a:hover { color: var(--chalk); border-bottom-color: var(--hair); }

/* ── page d'administration ── */
.admin__bouton {
  display: inline-block;
  padding: .9rem 1.6rem;
  border: 1px solid var(--chalk) !important;
  background: var(--chalk);
  color: var(--ink) !important;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.admin__bouton:hover { background: #fff; }

/* ═══════════════════════ RÉVÉLATIONS ═══════════════════════ */
/* Rien n'est masqué tant que le script n'a pas confirmé pouvoir animer.
   Sans JS, ou si une transition ne démarre pas, la page reste lisible. */
.is-settled [data-reveal] { opacity: 1 !important; transform: none !important; }
.is-settled .mark__frame { stroke-dashoffset: 0 !important; }
.is-settled .mark__m,
.is-settled .mark__wordmark,
.is-settled .dimension__tick,
.is-settled .stitch { opacity: 1 !important; }

.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js-anim .mark__frame { stroke-dashoffset: 1820; }
.js-anim .mark__m,
.js-anim .mark__wordmark,
.js-anim .dimension__tick,
.js-anim .stitch { opacity: 0; }

.is-lit [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.is-lit [data-reveal="1"] { transition-delay: .15s; }
.is-lit [data-reveal="2"] { transition-delay: .95s; }
.is-lit [data-reveal="3"] { transition-delay: 1.25s; }

/* 1. le cadre — 2. le M — 3. la cote — 4. le nom, plus lent */
.is-lit .mark__frame {
  transition: stroke-dashoffset 1.5s var(--ease) .25s;
  stroke-dashoffset: 0;
}
.is-lit .mark__m {
  transition: opacity .7s var(--ease) 1.4s;
  opacity: 1;
}
.is-lit .stitch {
  /* les points se posent l'un après l'autre, du haut vers le bas */
  transition: opacity .28s var(--ease) calc(1.95s + var(--i) * .055s);
  opacity: 1;
}
.is-lit .dimension__tick {
  transition: opacity .5s var(--ease) 2.85s;
  opacity: 1;
}
.is-lit .mark__wordmark {
  transition: opacity 1.4s var(--ease) 2.75s;
  opacity: 1;
}

/* Idem : rien n'est masqué tant que le script n'a pas pris la main. */
.js-anim .observe { opacity: 0; transform: translateY(20px); }
.js-anim .observe.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}

/* le pied de page se révèle comme les autres blocs */
.js-anim .colophon.observe > * { opacity: 0; transform: translateY(16px); }
.js-anim .colophon.observe.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js-anim .colophon.observe.is-in .colophon__meta { transition-delay: .12s; }
.is-settled .colophon > * { opacity: 1 !important; transform: none !important; }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 900px) {
  .principle__inner { grid-template-columns: minmax(0, 1fr); }
  .principle__lead { position: static; }
}

@media (max-width: 720px) {
  /* Une colonne : sur un téléphone, trois plans de pied côte à côte
     seraient trop petits pour qu'on distingue quoi que ce soit du vêtement. */
  /* Une photo presque pleine largeur, la suivante amorcée sur la droite :
     sur un écran de 375 px, trois plans de pied côte à côte seraient
     illisibles, mais rien qui dépasse et personne ne pense à balayer. */
  .shot { width: min(78vw, 21rem); }
  .hero { padding-top: 5rem; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .hero__mark { order: -1; }
  .hero__text { max-width: none; }
  /* Le monogramme est la signature de la marque : à 104 px il passait pour un
     favicon perdu en haut de page. */
  .mark { width: min(46vw, 190px); }

  /* Bandeau technique : en ligne sur ordinateur, en tableau clé/valeur sur
     téléphone. À plat, deux couples tombaient par ligne et « MATIÈRE COTON BIO
     220 G/M² COL CARRÉ » se lisait comme une seule phrase. */
  .ticker {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .64rem;
  }
  .ticker li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0 .6rem;
  }
  .ticker__key { padding-right: 0; }
  .specs__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .specs dt { padding-top: 0; }
  .signup__row { flex-wrap: wrap; border-bottom: 0; }
  .signup__input {
    flex: 1 1 100%;
    border-bottom: 1px solid var(--graphite);
    padding-left: 0;
  }
  .signup__button { margin: 1rem 0 0; width: 100%; }

  /* Pied de page : une ligne par entrée, séparées d'un filet. En flux libre,
     les six libellés s'agglutinaient en trois lignes bancales, et chaque lien
     ne faisait que 17 px de haut — impossible à viser au doigt. Le rembourrage
     porte la zone tactile à ~47 px, au-dessus du minimum de 44 px d'Apple. */
  .colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
  .colophon__logo { width: 116px; }
  .colophon__meta {
    flex-direction: column;
    gap: 0;
    width: 100%;
    font-size: .64rem;
  }
  .colophon__meta > * { padding: .95rem 0; }
  .colophon__meta > * + * { border-top: 1px solid var(--hair); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal], .observe { opacity: 1; transform: none; }
  .mark__frame { stroke-dashoffset: 0; }
  .mark__m, .mark__wordmark, .dimension__tick, .stitch { opacity: 1; }
  .specs__row::before { transform: scaleX(1); }
}