/* ============================================================
   M&K — Base : remise à zéro, typographie, accessibilité,
   et habillage des surfaces natives du navigateur.
   ============================================================ */

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

/* Aucune règle d'affichage ne doit rendre visible un élément [hidden]. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--e-5));
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-ouvert { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--papier-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* --- Titres ---------------------------------------------------- */
.display, .titre-1, .titre-2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--noir);
  text-wrap: balance;
}
.display {
  font-size: var(--t-display);
  line-height: var(--interligne-serre);
  letter-spacing: var(--chasse-display);
}
.titre-1 {
  font-size: var(--t-1);
  line-height: var(--interligne-titre);
  letter-spacing: var(--chasse-display);
}
.titre-2 {
  font-size: var(--t-2);
  line-height: var(--interligne-titre);
  letter-spacing: var(--chasse-titre);
}
.titre-3 {
  font-family: var(--sans);
  font-size: var(--t-3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--chasse-titre);
  color: var(--noir);
}
.italique { font-style: italic; }

.texte { max-width: var(--mesure); }
.texte + .texte { margin-top: var(--e-4); }
.sourdine { color: var(--gris); }
.petit { font-size: var(--t-petit); }
.mini { font-size: var(--t-mini); }

/* Chiffres alignés partout où une valeur se lit ou se compare */
.prix, .chiffre, td, .qte-valeur, time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.prix { font-weight: 500; color: var(--noir); letter-spacing: 0.005em; }

/* --- Liens ----------------------------------------------------- */
a { color: inherit; }
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--trait-fort);
  transition: text-decoration-color var(--d-court) var(--doux);
}
a:not([class]):hover { text-decoration-color: currentColor; }

.lien-souligne {
  display: inline-block;
  color: var(--noir);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--d-moyen) var(--sortie);
}
.lien-souligne:hover { background-size: 0 1px; background-position: 100% 100%; }

/* --- Surfaces natives du navigateur ---------------------------- */
::selection { background: var(--oxblood); color: var(--papier); }
:root { caret-color: var(--oxblood); accent-color: var(--oxblood); }

html { scrollbar-color: var(--trait-fort) var(--papier); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--papier); }
::-webkit-scrollbar-thumb { background: var(--trait-fort); border: 3px solid var(--papier); }
::-webkit-scrollbar-thumb:hover { background: var(--gris); }

/* --- Focus visible --------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}
/* Sur fond sombre, l'accent oxblood ne contraste pas assez pour servir
   d'indicateur de focus : on repasse au papier. Toutes les surfaces
   noires du site sont listées ici. */
.fond-noir :focus-visible,
.menu__panneau :focus-visible,
.pied :focus-visible,
.hero :focus-visible { outline-color: var(--papier); }

.saut-contenu {
  position: absolute;
  left: var(--gouttiere);
  top: -100%;
  z-index: 100;
  background: var(--noir);
  color: var(--papier);
  padding: var(--e-3) var(--e-5);
  text-decoration: none;
  transition: top var(--d-court) var(--sortie);
}
.saut-contenu:focus-visible { top: var(--e-3); }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Trame de mise en page ------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section { padding-block: var(--section); }
/* Une page courte ne doit pas faire remonter le pied de page au milieu. */
main { min-height: 62vh; }
.fond-noir { background: var(--noir); color: var(--sur-noir); }
.fond-noir .display, .fond-noir .titre-1,
.fond-noir .titre-2, .fond-noir .titre-3 { color: var(--sur-noir); }
.fond-noir .sourdine { color: var(--sur-noir-doux); }
.fond-secondaire { background: var(--papier-2); }

/* La couture : filet structurel de la maison, jamais décoratif */
.couture { border-top: 1px solid var(--trait); }
.fond-noir .couture { border-top-color: var(--trait-noir); }

/* En-tête de section : le titre porte seul, aucun label au-dessus */
.tete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-7);
}

/* --- Apparition progressive -----------------------------------
   Le défaut est VISIBLE. Le script retire .revele-prêt si et
   seulement s'il peut animer : sans JS ou en mouvement réduit,
   la page s'affiche entièrement, sans ajustement.             */
.revele-pret .revele {
  opacity: 0;
  transform: translateY(18px);
}
.revele-pret .revele.vu {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--d-long) var(--sortie),
    transform var(--d-long) var(--sortie);
  transition-delay: var(--retard, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .revele-pret .revele { opacity: 1 !important; transform: none !important; }
}