/* ==========================================================================
   base.css — reset, typographie, éléments HTML, utilitaires
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; }
svg { flex: none; }

::selection { background: var(--jaune); color: var(--nuit); }
/* Sur le carton jaune, la sélection jaune ne se voit pas : on inverse. */
[data-ton="jaune"] ::selection,
.encart--gold ::selection { background: var(--nuit); color: var(--jaune); }

/* ==========================================================================
   Titres — la display porte tout le caractère du site
   Bricolage Grotesque est variable : on pilote la graisse ET la chasse.
   Resserrée (wdth 85) et lourde (wght 700) en très grand, elle compacte le
   titre en un bloc dense — c'est ce contraste avec les micro-légendes
   Manrope qui fait l'identité, pas la taille seule.
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--ton-texte);
}
h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-variation-settings: 'wdth' 86, 'opsz' 96;
}
h2 {
  font-size: var(--fs-2xl);
  line-height: 0.98;
  font-variation-settings: 'wdth' 88, 'opsz' 72;
}
h3 {
  font-size: var(--fs-lg);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  font-variation-settings: 'wdth' 92, 'opsz' 32;
}
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-base);
  line-height: 1.4;
}

/* Titre géant, réservé aux moments de bascule (hero, fin de page). */
.titre-geant {
  font-size: var(--fs-4xl);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-variation-settings: 'wdth' 82, 'opsz' 96;
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); max-width: 66ch; }
p:last-child { margin-bottom: 0; }

/* Le mot mis en valeur dans un titre : même famille, poids et couleur.
   Injecter un serif ou une italique d'une autre fonte dans un titre grotesk
   est un réflexe d'amateur — l'emphase reste dans la famille. */
.accentue {
  color: var(--ton-accent);
  font-variation-settings: 'wdth' 78, 'opsz' 96;
}

/* Mot souligné d'un trait tracé à la main, pas d'un border-bottom. */
.souligne {
  position: relative;
  white-space: nowrap;
}
.souligne::after {
  content: '';
  position: absolute;
  left: -0.04em; right: -0.04em;
  bottom: 0.02em;
  height: 0.11em;
  border-radius: var(--r-full);
  background: var(--ton-accent);
  transform: scaleX(var(--trace, 1));
  transform-origin: left;
}
html.js .souligne { --trace: 0; }

/* ==========================================================================
   Liens
   ========================================================================== */

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

.lien-texte {
  color: var(--ton-signe);
  font-weight: var(--fw-bold);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--ease-out);
}
.lien-texte:hover { background-size: 0 1px; }

:focus-visible {
  outline: 3px solid var(--ton-accent);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}
[data-ton="corail"] :focus-visible,
[data-ton="jaune"] :focus-visible { outline-color: var(--nuit); }

/* ==========================================================================
   Listes
   ========================================================================== */

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
.liste-nue { list-style: none; padding: 0; margin: 0; }
.liste-nue li { margin: 0; }

/* ==========================================================================
   Conteneurs et sections
   ========================================================================== */

.conteneur {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.conteneur--large { width: min(100% - var(--gutter) * 2, var(--container-wide)); }
.conteneur--texte { width: min(100% - var(--gutter) * 2, var(--container-text)); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--ton-fond);
  color: var(--ton-texte);
}
.section--serree { padding-block: var(--section-y-tight); }

/* Un carton de couleur pleine largeur. Les coins arrondis en haut créent la
   sensation de feuilles empilées : c'est le seul « effet » du système. */
.carton {
  position: relative;
  z-index: var(--z-base);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--ton-fond);
  color: var(--ton-texte);
}
.carton + .carton { margin-top: calc(-1 * var(--r-2xl)); }
.carton--plat { border-radius: 0; }

/* ==========================================================================
   En-tête de section
   Pas de surtitre systématique : le titre suffit, et la position dans la page
   dit déjà de quelle section il s'agit. Le surtitre reste disponible pour les
   rares cas où il porte une vraie information.
   ========================================================================== */

/* Le sur-titre est le seul endroit, avec le nom de la maison, où l'enseigne
   peinte reprend la main dans le corps de page. Elle remplace ici une petite
   capitale grasse très interlettrée : le dessin peiné supporte mal les deux à
   la fois, on lui laisse donc sa chasse et on remonte le corps. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-family: var(--font-enseigne);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Variante assombrie de l'accent : en 12px, le corail vif ne dépasse pas
     3:1 sur papier, sous le minimum AA pour du petit texte. */
  color: var(--ton-accent-texte);
}

.entete-section { margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 5rem); }
.entete-section p {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  color: var(--ton-texte-2);
  max-width: 54ch;
}

/* Variante utilisée par les pages intérieures : titre puis texte, empilés.
   Le titre à gauche + petit paragraphe flottant à droite est un gabarit
   d'agence qu'on ne reproduit pas. */
.entete-section--large { display: block; }
.entete-section--large p { margin-top: var(--sp-6); }

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.texte-centre { text-align: center; }
.texte-centre p { margin-inline: auto; }

.plomb {
  font-size: var(--fs-md);
  color: var(--ton-texte-2);
  line-height: 1.55;
}

.mention {
  font-size: var(--fs-sm);
  color: var(--ton-texte-3);
}

/* Chiffre ou donnée mise en scène. */
.donnee {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: 'wdth' 84, 'opsz' 72;
  font-variant-numeric: tabular-nums;
  color: var(--ton-accent);
}

.saut-contenu {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--nuit);
  color: var(--papier);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: top var(--d-base) var(--ease-out);
}
.saut-contenu:focus { top: var(--sp-4); }

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

/* Un nom propre ne se coupe pas. « Sucy-en-Brie » porte deux traits d'union :
   sans cette garde, les écrans étroits cassent la commune en « SUCY- / EN-BRIE ».
   Le texte reste littéral — aucun trait d'union insécable qui fausserait la
   recherche dans la page ou l'indexation. */
.insecable { white-space: nowrap; }

/* Conservés pour les pages non reprises — volontairement discrets. */
.filet {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--sp-5);
  background: var(--ton-accent);
  border-radius: var(--r-full);
}

.separateur {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--ton-filet);
}

/* ==========================================================================
   Rideau d'ouverture — masque la bascule des polices au premier rendu,
   puis se retire vers le haut. Une seule fois par page, jamais rejoué.
   ========================================================================== */

.rideau {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: var(--nuit);
  pointer-events: none;
}
.rideau__signe {
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background-color: var(--jaune);
  background-image: url('../img/logo-oiseau-moqueur.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 52px 52px;
  display: grid;
  place-items: center;
}
.rideau__signe svg { display: none; }