/* ==========================================================================
   Harlone — feuille de styles
   Noir et blanc, mobile d'abord. Couleurs, polices et espacements : voir :root.
   ========================================================================== */

/* ---------- 0. Polices auto-hébergées (licence SIL OFL, voir assets/fonts) ---------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

/* ---------- 1. Réglages ---------- */

:root {
  /* Direction « Nocturne + Grain » : noir profond (principal), blanc cassé (secondaire).
     Les couleurs sont nommées par rôle : --encre = texte, --contre = son opposé.
     Le bandeau .section--contraste inverse ces rôles (fond blanc, texte noir). */
  --encre: #ecebe7; /* texte principal : 16:1 sur le fond */
  --contre: #0a0a0b; /* texte posé sur --encre (boutons, sélection) */
  --fond: #0a0a0b; /* fond de page, noir profond */
  --fond-doux: #141416; /* encadrés, emplacements d'images */
  --gris-fonce: #c4c2bc; /* textes d'accompagnement : 11:1 */
  --gris: #8d8a84; /* textes secondaires : 5,8:1, conforme AA */
  --gris-clair: #6b6964; /* numéros indisponibles uniquement */
  --ligne: rgba(236, 235, 231, 0.14);
  --arrondi: 1.3125rem; /* 21 px : coins arrondis des photos (sauf ouverture de l'accueil et précommande) */
  --grain: 0.1; /* intensité du grain, identique au laboratoire (0 pour le retirer) */

  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Titres : Inter appuyé et serré ; accents en Cormorant italique (balise <em>) */
  --display: var(--sans);
  --display-weight: 650;
  --display-track: -0.045em;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
  --fs-xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-2xl: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);
  --fs-display: clamp(3.5rem, 1rem + 12vw, 10.5rem);

  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --largeur: 80rem;
  --largeur-texte: 36rem;

  --lent: 1.4s;
  --moyen: 0.6s;
  --courbe: cubic-bezier(0.2, 0.65, 0.2, 1);
}

/* ---------- 2. Base ---------- */

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

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

html.no-scroll {
  overflow: hidden;
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain sur toute la page : une couche fixe et immobile, calculée une seule fois
   par le navigateur (rien ne bouge au défilement, fluide sur téléphone).
   Copie exacte du grain du laboratoire 1 (direction Nocturne) : même fichier,
   même fusion « screen », même intensité. Invisible sur le blanc.
   L'en-tête et le pied de page passent au-dessus (noir pur). */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  background: url('../img/grain.svg?v=3418d1434d') repeat;
  opacity: var(--grain);
  mix-blend-mode: screen;
}

/* Les photos passent au-dessus du grain (mais sous l'en-tête, à 95) */
.media__frame,
.hero__media,
.loupe {
  position: relative;
  z-index: 91;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-track);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

/* Accent : un mot en italique serif dans un titre (<em>) */
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Les ancres ne passent pas sous l'en-tête fixe. */
[id] {
  scroll-margin-top: 6rem;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: opacity var(--moyen) var(--courbe);
}

a:hover {
  opacity: 0.6;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--encre);
  color: var(--contre);
}

.skip-link {
  position: absolute;
  z-index: 100;
  left: 1rem;
  top: -100%;
  padding: 0.75rem 1.25rem;
  background: var(--encre);
  color: var(--contre);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 3. Typographie utilitaire ---------- */

.eyebrow {
  margin-bottom: 1.5rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

.display {
  font-size: var(--fs-display);
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}

.title {
  font-size: var(--fs-2xl);
  margin-bottom: 2rem;
}

.title--sm {
  font-size: var(--fs-xl);
  margin-bottom: 1.5rem;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--gris);
}

.note {
  font-size: var(--fs-sm);
  color: var(--gris);
}

/* ---------- 4. Mise en page ---------- */

.container {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: var(--section);
}

.section--centered {
  text-align: center;
}

.section--centered > * {
  max-width: 44rem;
  margin-inline: auto;
}

/* Bandeau contrasté : blanc sur la page noire. Les rôles des couleurs sont inversés,
   donc tout ce qu'il contient (boutons, gris, filets) s'adapte tout seul. */
.section--contraste {
  --encre: #0a0a0b;
  --contre: #ecebe7;
  --fond: #c9cccd; /* gris argenté, plus doux qu'un blanc franc */
  --fond-doux: #bcbfc0;
  --gris-fonce: #2a2926;
  --gris: #4f4c47; /* 5,8:1 sur le gris argenté, conforme AA */
  --ligne: rgba(10, 10, 11, 0.16);
  background: var(--fond);
  color: var(--encre);
}

.page-head {
  padding-top: clamp(3rem, 2rem + 6vw, 7rem);
  padding-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}

.page-head .title {
  margin-bottom: 1.5rem;
}

.page-head .lead {
  max-width: var(--largeur-texte);
}

/* ---------- 5. En-tête et navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 95; /* au-dessus du grain : noir pur, comme dans le laboratoire */
  /* Fond uni volontaire : un backdrop-filter casserait le menu plein écran mobile. */
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 1.1rem var(--gouttiere);
}

.logo {
  position: relative;
  z-index: 50;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Logo dessiné (en-tête) : image blanche sur fond transparent, tirée de photos/Logo1.png. */
.logo--image {
  display: block;
  line-height: 0;
}

.logo--image img {
  display: block;
  width: auto;
  height: 1.45rem;
}


/* Logo complet (monogramme + nom, photos/Logo2.png, passé en blanc) : pied de page. */
.logo-complet {
  display: block;
  width: auto;
  height: 4rem;
}

/* Sélecteur de langue « FR · EN » : discret, à droite (avant le bouton Menu sur mobile,
   après la navigation sur grand écran). Reste utilisable quand le menu mobile est ouvert. */
.lang-switch {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--gris);
}

.lang-switch a {
  padding-block: 0.5rem; /* cible tactile confortable */
  text-decoration: none;
}

.lang-switch a[aria-current] {
  color: var(--encre);
  text-decoration: underline;
}

@media (min-width: 56rem) {
  .lang-switch {
    order: 3;
    margin-left: 0;
  }

  .site-nav {
    margin-left: auto;
  }
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav a[aria-current='page'] {
  text-decoration: underline;
}

/* Bouton Menu : visible seulement sur mobile, et seulement si JavaScript est actif.
   Sans JavaScript, les liens restent affichés sous le logo. */
.menu-toggle {
  display: none;
  position: relative;
  z-index: 50;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 55.99rem) {
  .js .menu-toggle {
    display: block;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fond);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--moyen) var(--courbe),
      visibility 0s linear var(--moyen);
  }

  .js .site-header[data-menu-open] .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--moyen) var(--courbe);
  }

  .js .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }

  .js .site-nav a {
    font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
    font-size: 2rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }
}

@media (min-width: 56rem) {
  .site-nav ul {
    gap: 2.5rem;
  }

  .site-nav__cta a {
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--encre);
    transition:
      background var(--moyen) var(--courbe),
      color var(--moyen) var(--courbe);
  }

  .site-nav__cta a:hover {
    opacity: 1;
    background: var(--encre);
    color: var(--contre);
  }
}

/* ---------- 6. Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.5rem;
  padding: 1rem 2.25rem;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--contre);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background var(--moyen) var(--courbe),
    color var(--moyen) var(--courbe);
}

.btn:hover {
  opacity: 1;
  background: var(--contre);
  color: var(--encre);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  border-color: var(--ligne);
  background: var(--fond-doux);
  color: var(--gris);
  cursor: not-allowed;
}

/* ---------- 7. Images ---------- */

.media {
  margin: 0;
}

.media__frame {
  overflow: hidden;
  background: var(--fond-doux);
  aspect-ratio: 4 / 5;
  border-radius: var(--arrondi);
}

/* Page de précommande : photo à angles droits. */
.order__media .media__frame {
  border-radius: 0;
}

/* Galerie de la précommande : les photos défilent dans le cadre carré.
   Téléphone : glissement du doigt, géré par le navigateur (défilement « aimanté »).
   Ordinateur : flèches au survol, et flèches du clavier quand la galerie a le focus. */
.galerie__piste {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.galerie__piste::-webkit-scrollbar {
  display: none;
}

.galerie__piste:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: -4px;
}

.galerie__photo {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* une photo à la fois, même avec un geste rapide */
}

.galerie__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie__fleche {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(236 235 231 / 0.35);
  border-radius: 50%;
  background: rgb(10 10 11 / 0.55);
  color: var(--encre);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.galerie__fleche--prec {
  left: 1rem;
}

.galerie__fleche--suiv {
  right: 1rem;
}

.galerie__fleche svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.galerie__fleche:hover {
  background: rgb(10 10 11 / 0.8);
}

/* Flèches visibles au survol de la galerie ou au clavier ; masquées aux extrémités. */
.galerie__cadre:hover .galerie__fleche,
.galerie__fleche:focus-visible {
  opacity: 1;
}

.galerie__fleche:disabled {
  visibility: hidden;
}

/* Écran tactile sans souris : pas de flèches, on glisse du doigt. */
@media (hover: none) {
  .galerie__fleche {
    display: none;
  }
}

.galerie__points {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  display: flex;
  gap: 0.25rem;
  transform: translateX(-50%);
}

.galerie__point {
  width: 1.5rem; /* cible tactile plus large que le point dessiné */
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.galerie__point::before {
  content: '';
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  margin: auto;
  border-radius: 50%;
  background: rgb(236 235 231 / 0.4);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.galerie__point[aria-current='true']::before {
  background: var(--encre);
  transform: scale(1.25);
}

/* Sans JavaScript, flèches et points restent cachés (ils ne serviraient à rien). */
.galerie__fleche[hidden],
.galerie__points[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .galerie__fleche,
  .galerie__point::before {
    transition: none;
  }
}

.media__frame--wide {
  aspect-ratio: 3 / 2;
}

.media__frame--carre {
  aspect-ratio: 1;
}

.media__frame--paysage {
  aspect-ratio: 5 / 4;
}

.media__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mention honnête : « Rendu », « Prototype » ou « Photo du modèle final ». */
.media figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- 8. Accueil ---------- */

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.split + .split {
  margin-top: var(--section);
}

.split__text {
  max-width: var(--largeur-texte);
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 8rem);
  }

  .split--reverse .media {
    order: 2;
  }
}

/* Fiche technique : quatre groupes (deux colonnes sur ordinateur), lignes serrées,
   libellé à gauche et valeur à droite pour une lecture d'un coup d'œil */
.specs {
  display: grid;
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 56rem) {
  .specs {
    grid-template-columns: 1fr 1fr;
  }
}

.specs__titre {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  letter-spacing: 0;
}

.specs dl {
  margin: 0;
  border-top: 1px solid var(--encre);
}

.specs dl > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 38%) 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.specs dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.1em;
}

.specs dd {
  margin: 0;
}

.assurances {
  display: grid;
  gap: 0.75rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--gris);
}

@media (min-width: 48rem) {
  .assurances {
    grid-auto-flow: column;
    justify-content: center;
    gap: 2.5rem;
  }
}

/* ---------- 9. Précommande ---------- */

.order {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) var(--section);
}

@media (min-width: 56rem) {
  .order {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }

  .order__media {
    position: sticky;
    top: 6.5rem;
    z-index: 91; /* « sticky » isole la photo : on remonte le bloc entier au-dessus du grain */
  }
}

.order__price {
  margin: 0 0 2rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-xl);
}

.order__price span {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--gris);
}

.stock {
  margin-bottom: 2.5rem;
}

.stock p {
  margin-bottom: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stock progress {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--ligne);
  appearance: none;
}

.stock progress::-webkit-progress-bar {
  background: var(--ligne);
}

.stock progress::-webkit-progress-value {
  background: var(--encre);
}

.stock progress::-moz-progress-bar {
  background: var(--encre);
}

.facts {
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--ligne);
}

.facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: var(--fs-sm);
}

.facts dt {
  color: var(--gris);
}

.facts dd {
  margin: 0;
  text-align: right;
}

.facts__highlight dd {
  font-weight: 600;
}

.check {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm);
}

.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--encre);
}

/* Pays de livraison (page de précommande) */
.field {
  margin-bottom: 1.5rem;
}

.field__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

.field__select {
  width: 100%;
  min-height: 3rem; /* cible tactile confortable */
  padding: 0.6rem 2.5rem 0.6rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: 0;
  background-color: var(--fond-doux);
  /* Flèche dessinée en CSS (aucune image) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--encre) 50%),
    linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position:
    right 1.1rem center,
    right 0.75rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  color: var(--encre);
  font: inherit;
  font-size: var(--fs-sm);
  appearance: none;
  cursor: pointer;
}

.field__select:hover {
  border-color: var(--encre);
}

.field__help {
  margin: 0.6rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--gris-fonce);
}

.field__help--note {
  color: var(--gris);
}

.small {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--gris);
}

.legal-box {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-sm);
  color: var(--gris-fonce);
}

.legal-box strong {
  font-weight: 600;
  color: var(--encre);
}

/* Grille des numéros 01 à 50 */

.numbers {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.numbers legend {
  margin-bottom: 1.25rem;
  padding: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-lg);
}

.numbers legend span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--gris);
}

/* 5 ou 10 colonnes : 50 numéros, des lignes toujours complètes. */
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

@media (min-width: 30rem) {
  .numbers__grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

.num {
  position: relative;
  display: block;
  cursor: pointer;
}

.num input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}

.num > span:first-of-type {
  display: grid;
  place-items: center;
  min-height: 2.75rem; /* cible tactile confortable */
  border: 1px solid var(--ligne);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  transition:
    background var(--moyen) var(--courbe),
    border-color var(--moyen) var(--courbe),
    color var(--moyen) var(--courbe);
}

.num:hover > span:first-of-type {
  border-color: var(--encre);
}

.num input:focus-visible + span {
  outline: 1px solid var(--encre);
  outline-offset: 3px;
}

.num input:checked + span {
  border-color: var(--encre);
  background: var(--encre);
  color: var(--contre);
}

.num input:disabled + span {
  cursor: not-allowed;
  border-color: var(--ligne);
  color: var(--gris-clair);
}

.num:has(input:disabled) {
  cursor: not-allowed;
}

.num[data-status='held'] > span:first-of-type {
  border-style: dashed;
  color: var(--gris);
}

.num[data-status='sold'] > span:first-of-type,
.num[data-status='reserved'] > span:first-of-type {
  background: var(--fond-doux);
  color: var(--gris-clair);
  text-decoration: line-through;
}

.numbers__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--fs-xs);
  color: var(--gris);
}

.numbers__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--ligne);
}

.swatch--selected {
  border-color: var(--encre);
  background: var(--encre);
}

.swatch--held {
  border-style: dashed;
  border-color: var(--gris);
}

.swatch--sold {
  background: var(--fond-doux);
}

.link-button {
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.summary {
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-block: 1px solid var(--ligne);
  font-size: var(--fs-sm);
}

.form-error {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--encre);
  background: var(--fond-doux);
  font-size: var(--fs-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 10. FAQ ---------- */

.faq-group + .faq-group {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.faq-group h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-xl);
}

.faq details {
  border-bottom: 1px solid var(--ligne);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-lg);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--sans);
  font-weight: 300;
  transition: transform var(--moyen) var(--courbe);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > div ul {
  margin: 0 0 1em;
  padding-left: 1.25rem;
}

.faq details > div li + li {
  margin-top: 0.5rem;
}

.faq details > div {
  max-width: 44rem;
  padding-bottom: 1.75rem;
  color: var(--gris-fonce);
}

/* ---------- 11. Textes longs (histoire, pages légales) ---------- */

/* Interligne un peu plus large : le texte clair sur fond noir se lit mieux aéré. */
.prose {
  max-width: 42rem;
  line-height: 1.75;
}

.prose h2 {
  margin: 3.5rem 0 1.25rem;
  font-size: var(--fs-xl);
}

.prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: var(--fs-lg);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.form-model {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--ligne);
  background: var(--fond-doux);
}

.prose li + li {
  margin-top: 0.4rem;
}

.notice {
  margin-bottom: 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--encre);
  font-size: var(--fs-sm);
}

.notice strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 12. Pages courtes (contact, succès, annulation) ---------- */

.message {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--section);
}

.message .lead {
  max-width: 32rem;
  margin: 0 auto 2.5rem;
}

.contact-link {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-xl);
  overflow-wrap: anywhere;
}

/* ---------- 13. Pied de page ---------- */

.site-footer {
  position: relative;
  z-index: 95; /* au-dessus du grain : noir pur, comme l'en-tête */
  background: var(--fond);
  margin-top: var(--section);
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-sm);
  color: var(--gris);
}

.section--contraste + .site-footer,
main:has(> .section--contraste:last-child) + .site-footer {
  margin-top: 0;
}

/* Trois blocs (logo, liens, contact) centrés chacun dans leur colonne,
   horizontalement et verticalement, textes centrés. */
.site-footer__inner {
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 2.5rem;
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 4rem var(--gouttiere) 3rem;
}

.site-footer__inner > * > :last-child {
  margin-bottom: 0;
}

.site-footer .logo-complet {
  margin-inline: auto;
}

.site-footer .logo {
  margin: 0;
  color: var(--encre);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.5rem;
}

.site-footer a {
  text-decoration: none;
}

/* Lien Instagram : glyphe Instagram (photos/insta-logo.png) à la place du mot, teinté
   comme le texte du lien (masque CSS) ; le mot reste lu par les lecteurs d'écran. */
.lien-insta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.lien-insta__icone {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: url("../img/instagram.webp") center / contain no-repeat;
  mask: url("../img/instagram.webp") center / contain no-repeat;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--largeur);
  margin-inline: auto;
  padding: 1.5rem var(--gouttiere) 2rem;
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-xs);
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.site-footer__legal li + li {
  margin-top: 0;
}

/* Téléphone : ligne légale centrée, comme les blocs au-dessus. */
@media (max-width: 47.99rem) {
  .site-footer__legal,
  .site-footer__legal ul {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 15. Accueil : ouverture, présentation de la montre, loupe ---------- */

/* Ouverture : photo sur toute la largeur sous le menu, puis l'édition limitée et les
   boutons. L'ensemble tient dans le premier écran (menu compris) : la photo prend
   toute la hauteur restante. Sur un écran étroit, elle est rognée sur les côtés
   et reste centrée (montre au centre de l'image). */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 4.5rem); /* 4,5rem : hauteur de l'en-tête */
  /* Au-dessus du grain : bandeau en noir pur, identique à l'en-tête. */
  position: relative;
  z-index: 91;
  background: var(--fond);
}

.hero__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 16rem;
  margin: 0;
  overflow: hidden;
  background: var(--fond-doux);
  border-bottom: 1px solid var(--ligne); /* filet symétrique de celui de l'en-tête */
}

/* Photo définitive : <img> placée dans .hero__media */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Encadré vide en attendant la photo */
.hero__media--vide {
  border-block: 1px solid var(--ligne);
}

.hero__media figcaption {
  position: absolute;
  z-index: 1; /* au-dessus de la photo */
  left: var(--gouttiere);
  bottom: 1rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Bandeau sous la photo : sur ordinateur, même hauteur que le menu (symétrie).
   Téléphone : centré sur trois lignes. Ordinateur : texte à gauche, boutons à droite. */
.hero__text {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding-block: 1.25rem;
  text-align: center;
}

.hero__edition {
  margin: 0;
  line-height: 1.15;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: var(--fs-lg);
}

/* « Harlone · Modèle No.1 · Édition limitée », points espacés */
.hero__sep {
  margin-inline: 0.6em;
  color: var(--gris);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.75rem;
}

.hero__actions .btn {
  min-height: 2.75rem;
  padding: 0.7rem 1.75rem;
}

.link-arrow {
  padding-block: 0.75rem; /* cible tactile confortable */
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--gris);
}

@media (min-width: 56rem) {
  .hero__text {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'edition actions'
      'meta    actions';
    justify-items: start;
    align-items: center;
    gap: 0.1rem 2rem;
    padding-block: 0.76rem; /* bandeau + filet = 72 px, comme l’en-tête */
    text-align: left;
  }

  .hero__edition {
    grid-area: edition;
    align-self: end;
  }

  .hero__meta {
    grid-area: meta;
    align-self: start;
  }

  .hero__actions {
    grid-area: actions;
    justify-content: end;
  }
}

/* Histoire : frise chronologique. Étapes passées (point plein), étape en cours
   (point cerclé), étapes à venir (point creux, trait pointillé).
   Téléphone : date au-dessus du texte. Ordinateur : date à gauche du trait. */
.frise {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  --date: 0rem; /* largeur de la colonne des dates (ordinateur) */
  --axe: 0.34rem; /* position du trait */
}

.frise__etape {
  position: relative;
  padding: 0 0 3rem calc(var(--axe) + 2rem);
}

.frise__etape::before {
  content: '';
  position: absolute;
  left: calc(var(--date) + var(--axe));
  top: 0.6rem;
  bottom: -0.6rem;
  border-left: 1px solid var(--gris);
}

.frise__etape--actuel::before,
.frise__etape--futur::before {
  border-left: 1px dashed var(--gris-clair);
}

.frise__etape:last-child::before {
  display: none;
}

.frise__etape::after {
  content: '';
  position: absolute;
  left: calc(var(--date) + var(--axe) - 0.34rem);
  top: 0.25rem;
  width: 0.69rem;
  height: 0.69rem;
  border-radius: 50%;
  background: var(--encre);
}

.frise__etape--actuel::after {
  box-shadow:
    0 0 0 0.3rem var(--fond),
    0 0 0 calc(0.3rem + 1px) var(--encre);
}

.frise__etape--futur::after {
  background: var(--fond);
  border: 1px solid var(--gris);
}

.frise__date {
  margin: 0 0 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.frise__etape--actuel .frise__date {
  color: var(--encre);
}

.frise__titre {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.1;
}

.frise__contenu > p {
  max-width: 36rem;
  margin: 0;
  color: var(--gris-fonce);
}

.frise__contenu > p + p {
  margin-top: 0.75rem;
}

.frise__photo {
  max-width: 26rem;
  margin-top: 1.5rem;
}

@media (min-width: 56rem) {
  .frise {
    --date: 11rem;
  }

  .frise__etape {
    display: grid;
    grid-template-columns: var(--date) 1fr;
    padding: 0 0 4.5rem;
  }

  .frise__date {
    margin: 0;
    padding: 0.1rem 2.5rem 0 0;
    text-align: right;
  }

  .frise__contenu {
    padding-left: calc(var(--axe) + 2.5rem);
    margin-top: -0.45rem; /* le titre s'aligne sur le point */
  }
}

/* Fiches d'horloger : photo carrée (7/12) et texte (5/12) centré sur sa hauteur,
   en alternance, reliées par un filet vertical fin. Photos toutes de même taille. */
.fiche {
  position: relative;
  display: grid;
  gap: 2rem;
}

.fiche + .fiche {
  margin-top: var(--section);
}

.fiche__texte {
  max-width: 34rem;
}

/* La légende sort du calcul de hauteur : le texte se centre sur la photo seule */
@media (min-width: 56rem) {
  .fiche__media {
    position: relative;
  }

  /* Légende calée du côté extérieur de la photo et limitée en largeur :
     elle ne touche jamais le filet vertical qui passe au milieu de la page. */
  .fiche__media figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    max-width: 78%;
  }

  .fiche--inverse .fiche__media figcaption {
    left: auto;
    right: 0;
    text-align: right;
  }
}

/* Texte plus compact que les autres sections, pour rester à la hauteur de la photo */
.fiche__texte .title--sm {
  margin-bottom: 1rem;
}

.fiche__texte .lead {
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  margin-bottom: 1rem;
}

.fiche__texte > p:not(.lead) {
  font-size: 0.95rem;
  color: var(--gris-fonce);
}

/* Points clés : libellé à gauche, valeur à droite, entre deux filets */
.fiche__points {
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-sm);
}

.fiche__points > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ligne);
}

.fiche__points dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

.fiche__points dd {
  margin: 0;
  text-align: right;
}

@media (min-width: 56rem) {
  .fiche {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .fiche--inverse {
    grid-template-columns: 5fr 7fr;
  }

  .fiche--inverse .fiche__media {
    order: 2;
  }

  /* Filet vertical qui relie une photo à la suivante */
  .fiche + .fiche::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    height: var(--section);
    border-left: 1px solid var(--ligne);
  }
}

/* Encadré vide en attendant la photo : un filet discret pour le délimiter */
.media__frame--vide {
  border: 1px solid var(--ligne);
}

/* Loupe d'horloger */
.loupe-section {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .loupe-section {
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
  }
}

.loupe-figure {
  margin: 0;
}

.loupe-figure figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  text-align: center;
}

.loupe {
  --lens: clamp(8rem, 30vw, 11rem);
  position: relative;
  width: min(100%, 34rem);
  margin-inline: auto;
  -webkit-touch-callout: none;
  user-select: none;
}

.loupe img {
  width: 100%;
  border-radius: var(--arrondi);
  -webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
  .loupe {
    cursor: none;
  }
}

.loupe__lens {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lens);
  height: var(--lens);
  margin: calc(var(--lens) / -2) 0 0 calc(var(--lens) / -2);
  border-radius: 50%;
  border: 1px solid var(--encre);
  background-color: var(--fond);
  background-repeat: no-repeat;
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.45),
    inset 0 0 0 5px rgba(236, 238, 237, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(0.6);
  transition:
    opacity 0.35s var(--courbe),
    transform 0.35s var(--courbe);
  pointer-events: none;
}

.loupe.is-active .loupe__lens {
  opacity: 1;
  transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(1);
  transition:
    opacity 0.35s var(--courbe),
    transform 0s;
}

.hint-touch {
  display: none;
}

@media (hover: none) {
  .hint-mouse {
    display: none;
  }

  .hint-touch {
    display: inline;
  }
}

/* Titres qui montent derrière un masque */
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em; /* jambages des lettres */
}

.mask__inner {
  display: block;
  transform: translateY(108%);
  transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.mask.is-in .mask__inner {
  transform: none;
}

/* Compteur à rouleaux « X / 50 réservées » */
.home-stock {
  display: inline-flex;
  align-items: baseline;
  margin: 2rem 0 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-stock[hidden] {
  display: none;
}

.odometer {
  display: inline-flex;
  height: 1.2em;
  overflow: hidden;
  margin-right: 0.15em;
  font-size: 2.4em;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}

.odometer__col {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1.2em));
  transition: transform 1.8s cubic-bezier(0.25, 1.1, 0.35, 1);
}

.odometer__col span {
  height: 1.2em;
}

/* ---------- 14. Animations (lentes, discrètes) ---------- */

/* Ajouté par JavaScript uniquement aux éléments encore hors de l'écran :
   sans JavaScript, tout reste visible. */
.reveal-pending {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--lent) var(--courbe),
    transform var(--lent) var(--courbe);
}

.reveal-pending.is-visible {
  opacity: 1;
  transform: none;
}

[data-parallax] {
  transform: scale(1.06);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-parallax] {
    transform: none;
  }
}

/* ---------- 16. Impression (CGV, mentions légales…) ---------- */

/* Les navigateurs n'impriment pas les fonds : on repasse en noir sur blanc. */
@media print {
  :root,
  .section--contraste {
    --encre: #000000;
    --contre: #ffffff;
    --fond: #ffffff;
    --fond-doux: #ffffff;
    --gris-fonce: #222222;
    --gris: #444444;
    --gris-clair: #777777;
    --ligne: rgba(0, 0, 0, 0.25);
  }

  body::after {
    display: none;
  }

  /* Logos blancs : imprimés en noir sur la page blanche. */
  /* Icône Instagram : couleur de fond conservée à l'impression. */
  .lien-insta__icone {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .logo--image img,
  .logo-complet {
    filter: invert(1);
  }
}