/* =========================================================
   Rivmont — socle : reset, éléments, typographie, accessibilité
   ========================================================= */

/* ---------- les polices, hébergées ----------
   Les deux familles du site viennent d'`assets/fonts/`, comme Three.js
   et Lenis viennent d'`assets/vendor/` : plus aucune requête vers
   Google Fonts, qui transmettait l'adresse IP de chaque visiteur à
   Google (voir la politique de confidentialité). Ce sont les fichiers
   que Google servait — des fontes VARIABLES : un seul fichier par
   famille et par sous-ensemble porte les graisses 300 à 500 (les trois
   du site, et aucune au-delà : le gras du site est le 500), l'italique
   de Cormorant en 400 à part. Deux sous-ensembles, latin et
   latin-étendu, pour le français ; `unicode-range` ne charge le second
   que si un caractère l'appelle — et « œ » (U+0153), que le sous-ensemble
   latin contient déjà, est retiré de sa plage : les trois « œuvre » du
   copy faisaient charger 70 Ko de latin-étendu pour rien. `font-display:
   swap`, comme avant. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-roman-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-roman-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Lenis installé (`ui/smooth.js`, classe posée par lui) : c'est lui
   qui lisse, et `scroll-behavior: smooth` entrerait en conflit avec
   ses `scrollTo`. Sans lui — pas de script, mouvement réduit —, le
   navigateur garde le lissage natif des ancres. */
html.lenis{scroll-behavior:auto}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
img,video,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}

/* Un `display` explicite dans la feuille d'auteur bat le `display:none`
   de la feuille du navigateur : sans ce !important, un élément marqué
   `hidden` mais stylé (bouton, étape de formulaire) resterait visible. */
[hidden]{display:none!important}

/* Formulaires : on repart de zéro, la bordure et le retrait par défaut
   de fieldset/legend ne s'accordent pas avec la mise en page. */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:block;width:100%;padding:0}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------------------------------------------------------
   Typographie
   --------------------------------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:-.005em;
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);
  letter-spacing:-.005em;
}
.h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h3);
  line-height:1.15;
}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:var(--measure)}
.body{color:var(--ink-soft);max-width:var(--measure)}
.micro{
  font-size:var(--fs-micro);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--muted);
}

/* Eyebrow : filet + libellé capitales. Réutilisé dans tout le site. */
.eyebrow{
  display:flex;align-items:center;gap:var(--s-xs);
  font-size:var(--fs-label);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow__rule{width:38px;height:1px;background:var(--accent);flex:none}

/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */
.skip{
  position:absolute;left:var(--gutter);top:-100px;
  z-index:var(--z-modal);
  padding:12px 18px;
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-label);letter-spacing:var(--tr-wide);text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease);
}
.skip:focus{top:var(--gutter)}

/* L'anneau de focus prend `--accent-text`, pas `--accent` : sur du noir,
   le bleu de marque ne fait que 3,4:1 — il passe tout juste le minimum des
   indicateurs, mais il se voit mal. La teinte claire double le contraste
   (6,6:1) sans quitter la famille. Règle générale du site : `--accent`
   pour la décoration, `--accent-text` dès qu'il s'agit d'un retour
   d'interaction. */
:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
}

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

/* ---------------------------------------------------------
   Apparition au scroll
   Posée ici parce qu'elle est générique : `js-reveal` est observé
   par ui/reveal.js, qui ajoute `is-in`. Aucune dépendance à une
   librairie d'animation.
   --------------------------------------------------------- */
.js-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.js-reveal.is-in{opacity:1;transform:none}
.js-reveal[data-delay="1"]{transition-delay:.08s}
.js-reveal[data-delay="2"]{transition-delay:.16s}
.js-reveal[data-delay="3"]{transition-delay:.24s}

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

/* ---------------------------------------------------------
   Masque vertical
   Le texte monte derrière une fenêtre fixe : c'est le seul
   reveal du projet qui ne soit pas une simple opacité, et il
   est réservé aux déclarations. `--k` va de 0 à 1 et vaut **1**
   par défaut — sans script, la ligne est en place et lisible.

   Le remplissage compense accents et jambages : à `--lh-heading`
   (1.02) le Cormorant déborde de sa boîte de ligne, et
   `overflow:hidden` couperait le É de « Créer » comme la queue
   du p. Les marges négatives annulent ce remplissage dans le
   flux, la composition ne bouge donc pas.
   --------------------------------------------------------- */
.mask{
  display:block;
  overflow:hidden;
  padding:.14em 0 .1em;
  margin:-.14em 0 -.1em;
}
.mask > i{
  display:block;
  font-style:inherit;
  transform:translateY(calc((1 - var(--k,1)) * 112%));
}
@media (prefers-reduced-motion:reduce){
  .mask{overflow:visible;padding:0;margin:0}
  .mask > i{transform:none}
}