/* =========================================================================
   base.css — socle commun : variables, reset, typographie, utilitaires
   ========================================================================= */
:root {
  --ink: #0a121e;
  --black: #000;
  --blanc: #ffffff;
  --gris: #6d747c;
  --gris-clair: #d8dadd;
  --hairline: #e7e7e7;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nav-h: 70px;
  --pad: 6vw;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@property --fill {
  syntax: '<number>';
  initial-value: 0;
  inherits: false
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

/* le fond est déclaré ici pour qu'il ne soit pas remonté au canvas :
   sans cela, la nav en fusion « difference » n'a rien sous elle et reste blanche */
html {
  overflow-x: clip;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  background: var(--blanc)
}
html:has(.page-legal), html:has(.page-simple) {
 scroll-snap-type: none;
}

/* blocage du défilement pendant l'introduction 
html.is-locked {
  overflow: hidden
}
*/
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--blanc);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* contexte de fusion défini pour l'inversion de la nav */
  isolation: isolate
}

body.is-intro {
  overflow: hidden;
  height: 100vh
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: 0 0;
  color: inherit
}

figure {
  margin: 0
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px
}

::selection {
  background: var(--ink);
  color: var(--blanc)
}

h1,
h2,
h3 {
  font-weight: 400
}

/* ===== utilitaires (index 2) ===== */
.eyebrow {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris)
}

.reveal {
  opacity: 0;
  transform: translateY(28px)
}

.grow {
  opacity: 0;
  transform: scale(.55);
  transform-origin: left bottom
}

.btn {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  transition: background .25s, color .25s
}

.btn:hover {
  background: var(--ink);
  color: #fff
}

.btn--fill {
  background: var(--ink);
  color: #fff
}

.btn--fill:hover {
  background: transparent;
  color: var(--ink)
}


/* ===== accessibilite : mouvement reduit ===== */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none
  }

  *,
  ::before,
  ::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important
  }
}

/* titre necessaire a la structure du document mais non affiche */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}