/**
 * base.css
 * Reset léger, fondations typographiques et éléments HTML natifs.
 */

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

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

/* Le header est fixe (position: fixed) et se superpose au contenu :
   sans ce décalage, tout lien vers une ancre (#id) — depuis le
   formulaire, la nav, ou ailleurs — atterrit avec son titre caché sous
   le header, donnant l'impression d'une page "cassée". S'applique à
   n'importe quel élément ciblé par une ancre. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Bug corrigé le 2026-09-07 (retour de Laurent : capture d'écran mobile
   montrant la photo Épure de mariages.html décalée vers la droite, avec
   un grand vide à gauche — voir PROJET-NOTES.md). <figure> n'était
   jamais remis à zéro : la marge par défaut du navigateur (40px de
   chaque côté) s'ajoutait à la largeur voulue (ex. .editorial__media
   .media { width: min(420px, 82vw) }), ce qui dépassait la largeur du
   conteneur — sur une grille CSS, un enfant ne rétrécit jamais en
   dessous de la taille minimale de son propre contenu (min-width: auto
   implicite), donc au lieu de rétrécir la marge débordait discrètement
   à droite (masquée par overflow-x: hidden), laissant l'image visible
   décalée vers la gauche du cadre. */
figure {
  margin: 0;
}

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

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

/* Bug corrigé le 2026-09-07 (retour de Laurent : "photos pas centrées,
   tirent sur la droite" sur plusieurs pages — voir PROJET-NOTES.md) :
   partout où une image de recadrage (object-fit: cover; width/height:
   100%) est enveloppée dans <picture> (balise <source> + fallback),
   <picture> lui-même n'avait pas de hauteur — hérite du besoin en
   pourcentage indéfini, l'img retombait donc sur sa hauteur naturelle
   (comme height:auto) au lieu de 100% du conteneur. Résultat : l'image
   débordait en bas et était coupée en haut du cadre par le
   overflow:hidden du parent, jamais recentrée par object-position.
   picture hérite ici la hauteur de SON parent quand celui-ci en a une
   (cas des tuiles/médias en cover), et reste en hauteur naturelle sinon
   (n'affecte pas les <picture> utilisées en flux normal). */
picture {
  height: 100%;
}

img {
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.002em;
  color: var(--color-ink);
}

p {
  margin: 0;
}

/* ---- Accentuation élégante de mots-clés (2026-08-10) ----
   À utiliser avec parcimonie, dans des paragraphes ou titres, pour
   faire ressortir un mot ou une courte expression sans casser le
   ton éditorial. Couleur adaptée automatiquement au fond de section
   (voir la variante .bg-charcoal ci-dessous). */
.accent-word {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold-ink);
}

.bg-charcoal .accent-word,
.hero .accent-word {
  color: var(--color-gold);
}

/* ---- Lien inline vers une formule/expérience mentionnée dans un texte
   (2026-09-01, voir BRIEF CLAUDE — "à chaque fois qu'une formule ou une
   expérience revient dans une page, le mot doit être cliquable et
   surligné"). Discret et cohérent avec le reste du site : la taille, la
   graisse et la couleur du texte ne changent pas, seul un soulignement
   doré signale que le mot est cliquable et mène vers la page/section
   concernée. À utiliser sur la première mention pertinente d'un nom de
   formule ou d'expérience dans un paragraphe de contenu (pas dans les
   titres/labels qui décrivent déjà la carte ou la section sur laquelle ils
   se trouvent, ni dans les données structurées JSON-LD, meta ou alt). */
.inline-text-link {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.inline-text-link:hover,
.inline-text-link:focus-visible {
  color: var(--color-gold-ink);
}

.bg-charcoal .inline-text-link:hover,
.hero .inline-text-link:hover,
.bg-charcoal .inline-text-link:focus-visible,
.hero .inline-text-link:focus-visible {
  color: var(--color-gold);
}

/* Écriture manuscrite — mise en valeur ponctuelle d'un mot ou d'une courte
   expression, à l'essai (2026-08-26) sur index.html #positionnement. Ne pas
   généraliser ailleurs sans validation. */
.accent-script {
  font-family: var(--font-script);
  font-size: 1.35em;
  font-style: normal;
  font-weight: 400;
  color: var(--color-gold-ink);
  line-height: 1;
}

.bg-charcoal .accent-script,
.hero .accent-script {
  color: var(--color-gold);
}

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

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

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

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

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/* ---- Sélection de texte ---- */
::selection {
  background: var(--color-gold);
  color: var(--color-charcoal);
}

/* ---- Focus visible, accessibilité clavier ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 1.5px solid var(--color-gold);
  outline-offset: 4px;
}

/* ---- Lien d'évitement clavier ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  padding: 0.9em 1.4em;
  z-index: 999;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--gutter);
}

/* ---- Respect du mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Visually hidden (accessible, hors écran) ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}