/* ==========================================================================
   01-BASE — r\u00e9initialisation, typographie, primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Le flash de surbrillance du tap (bleu sur Android, gris sur iOS) : c'est
     lui qui « fait page web » sous le doigt. Il ne sert a rien ici, le survol
     n'existe pas au doigt et tous les etats sont dessines par la feuille. */
  -webkit-tap-highlight-color: transparent;
  /* Le noir du site est posé sur `html` en plus de `body` depuis le
     23-09-2026 : c'est la couleur qui remplit la zone de rebond (overscroll)
     et les barres du navigateur mobile. Porté par `body` seul, un rebond en
     haut ou en bas de page découvrait du blanc. */
  background-color: #000000;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  /* Le corps du texte passe de 300 à 400 le 30-09-2026. Jost 300 est une
     bâton fine, dessinée pour le papier : sur le noir pur, à 17 px, elle
     s'allège encore et fatigue à la lecture longue. La maison a vu la version
     de secours du site — un cran plus grasse — et l'a préférée ; 400 est ce
     cran, sans le gras non plus. Le contraste des gris ne bouge pas : seuls le
     corps et le chapeau changent de graisse. Voir README §49.3. */
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-title);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display-1);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--t-display-2);
  line-height: 1.02;
}

h3 {
  font-size: var(--t-display-3);
  line-height: 1.1;
}

h4 {
  font-size: var(--t-display-4);
  line-height: 1.24;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

hr {
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  margin: 0;
}

::selection {
  background: var(--c-laiton);
  color: var(--c-noir);
}

/* --------------------------------------------------------------- Focus visible */
:focus-visible {
  outline: 2px solid var(--c-laiton);
  outline-offset: 3px;
}

/* Le clic et le tap ne laissent aucun contour : le contour est reserve au
   clavier (`:focus-visible`), ou il est indispensable. */
:focus:not(:focus-visible) {
  outline: none;
}

/* LE DEUXIEME BLEU DU TAP - 29-09-2026.
   Un doigt pose sur un bouton ou sur un lien de carte selectionnait le texte
   du controle : la selection bleue du systeme apparaissait le temps du tap,
   puis disparaissait. Elle part sur les controles. Le texte des PARAGRAPHES,
   lui, reste selectionnable : c'est de la lecture, et la selection y est deja
   au laiton (::selection plus haut) pour copier une adresse ou un passage. */
button,
summary,
.btn,
.nav-toggle,
.nav-link,
.site-nav__cta,
.nav-overlay__link,
.entry__credit a,
.link-arrow,
.crumbs a,
.pager__link,
.gallery__item,
.index-list__row,
.lightbox__close,
.lightbox__nav,
.quick-form__foot .btn {
  -webkit-user-select: none;
  user-select: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-laiton);
  color: var(--c-noir);
  padding: 0.85rem 1.4rem;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------- Utilitaires */
.u-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-shell-narrow {
  max-width: var(--shell-narrow);
}

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

.u-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

.u-serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* \u00c9tiquette : petit texte capitales tr\u00e8s espac\u00e9, signature du syst\u00e8me */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fg-faint);
}

.label--accent {
  color: var(--accent);
}

/* Le repère qui ouvre chaque étiquette : le rang du chapitre (« 00 », « 01 »)
   ou le mot de la section (« La maison », « Équipe »). C'est le rôle du second
   accent — la lavande du cadre de la plaque, qui situe sans rien demander.
   L'étiquette qui suit reste en blanc (ou en bleu quand elle porte l'emphase),
   d'où la seule paire de couleurs du site dans une même ligne de 11 px. */
.label__index {
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
}

.label__rule {
  display: inline-block;
  width: clamp(1.5rem, 4vw, 4.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.rule {
  height: var(--hairline);
  background: var(--rule);
  border: 0;
}

/* Chapeau de section */
.section-head {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.4rem);
}

.section-head__title {
  max-width: 22ch;
}

.lede {
  font-size: var(--t-lede);
  text-wrap: pretty;
  line-height: 1.55;
  /* Le chapeau suit le corps : 300 → 400 le 30-09-2026 (voir 01-base, body). */
  font-weight: 400;
  max-width: 46ch;
  color: var(--fg-muted);
}

.prose {
  max-width: var(--shell-text);
}

.prose p {
  margin-bottom: 1.4em;
}

.prose strong {
  font-weight: 400;
  color: var(--fg);
}

.text-accent {
  color: var(--accent);
}

/* ============================================================== R\u00e9v\u00e9lations
   Les \u00e9l\u00e9ments .reveal sont visibles par d\u00e9faut : si le JS ne charge pas,
   la page reste parfaitement lisible (progressive enhancement).
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js .reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path calc(var(--dur-3) * 0.9) var(--ease);
}

.js .reveal-img.is-in {
  clip-path: inset(0 0 0 0);
}

.js .reveal-img img {
  transform: scale(1.14);
  transition: transform calc(var(--dur-3) * 1.1) var(--ease);
}

.js .reveal-img.is-in img {
  transform: scale(1);
}

/* R\u00e9v\u00e9lation ligne par ligne : les lignes sont d\u00e9coup\u00e9es par le JS.
   Le masque re\u00e7oit un peu de garde : en Cormorant, une ligne descend sous sa
   bo\u00eete (jambages du q, accents du \u00c9). Sans cette garde, la r\u00e9v\u00e9lation
   rognait le bas des lettres. La marge n\u00e9gative annule l'effet sur la mise en page. */
.js .reveal-lines .line {
  display: block;
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.js .reveal-lines .line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--dur-3) var(--ease);
}

.js .reveal-lines.is-in .line > span {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-img,
  .js .reveal-img img,
  .js .reveal-lines .line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}