/* ==========================================================================
   BASE — reset, typographie, structure de page
   ========================================================================== */

/* --- Polices locales (RGPD : aucun appel à un serveur tiers) -------------
   Déposer les fichiers dans assets/fonts/. Playfair Display et Jost sont
   toutes deux disponibles en variable ; à défaut, remplacer par des
   fichiers statiques et ajuster les font-weight ci-dessous.               */

@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../fonts/PlayfairDisplay.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Playfair Display"; font-style:italic; font-weight:400 800; font-display:swap;
  src:url("../fonts/PlayfairDisplay-Italic.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("../fonts/Jost.woff2") format("woff2-variations");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--c-creme);
  color:var(--c-texte);
  font-family:var(--f-texte);
  font-size:var(--t-m);
  font-weight:var(--p-leger);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--c-or); color:var(--c-creme); }

img,svg{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }

/* --- Titres — Playfair, rare, grande, marquante -------------------------- */
h1,h2,h3{
  font-family:var(--f-titre);
  font-weight:var(--p-titre);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 var(--e-3);
  text-wrap:balance;
}
h1{ font-size:var(--t-xxl); font-weight:var(--p-fort); line-height:1.02; }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-l); }

/* Le h4 revient au Jost : jamais deux Playfair côte à côte. */
h4{
  font-family:var(--f-texte); font-size:var(--t-m); font-weight:var(--p-medium);
  letter-spacing:0; line-height:1.4; margin:0 0 var(--e-1);
}

/* L'italique Or Bois : le geste Playfair de la charte, à garder rare. */
.souffle{
  font-family:var(--f-titre); font-style:italic;
  font-weight:var(--p-medium); color:var(--c-or);
}

p{ margin:0 0 var(--e-3); max-width:var(--lisible); }
p:last-child{ margin-bottom:0; }

a{ color:var(--c-brun); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--c-or-fonce); }

:focus-visible{ outline:2px solid var(--c-or); outline-offset:3px; border-radius:var(--rayon); }

/* --- Surtitre : Jost 500 très espacé, filet Or Bois en tête -------------- */
.surtitre{
  font-family:var(--f-surtitre);
  font-size:var(--t-xs);
  font-weight:var(--p-medium);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-sauge);
  display:flex; align-items:center; gap:.7em;
  margin:0 0 1.1rem;
}
.surtitre::before{ content:""; width:26px; height:1px; background:var(--c-or); flex:none; }

/* --- Structure ---------------------------------------------------------- */
.conteneur{ width:min(100% - 2.5rem, var(--largeur)); margin-inline:auto; }
.section{ padding-block:var(--e-section); position:relative; }

.section--kraft{ background:var(--c-kraft); }
.section--brun{ background:var(--c-brun); color:var(--c-creme); }
.section--brun h2,.section--brun h3,.section--brun h4{ color:var(--c-creme); }
.section--brun .surtitre{ color:var(--c-or); }
.section--brun a{ color:var(--c-creme); }
.section--brun a:hover{ color:var(--c-or); }

.contenu-principal{ padding-left:var(--rail); transition:padding var(--transition); }

.accroche{
  font-family:var(--f-titre); font-style:italic; font-weight:var(--p-normal);
  font-size:var(--t-l); line-height:1.35;
  color:var(--c-sauge); max-width:36ch;
}

.saut-contenu{
  position:absolute; left:-9999px; z-index:999;
  background:var(--c-brun); color:var(--c-creme); padding:var(--e-2) var(--e-3);
}
.saut-contenu:focus{ left:var(--e-2); top:var(--e-2); }

.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;
}