/* ============================================================
   BASE — mobile. Mise en page en flux, aucun positionnement absolu.
   Le desktop est enfermé dans la requête média en fin de fichier.
   ============================================================ */

:root {
  --fond:   #f8f4f1;
  --encre:  #212121;
  --trait:  rgba(33,33,33,.18);
  --accent: #212121;
  --u:      1px;
  --marge:  20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--fond); color: var(--encre);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* clip et non hidden : hidden casse position:sticky */
}
html { overflow-x: clip; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.page { position: relative; }
.maj { text-transform: uppercase; }

.jalon { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.jalon::before { content: ""; flex: none; width: 7px; height: 7px;
  background: var(--encre); margin-top: 7px; }

/* ---------- chargement ---------- */
.loader { position: fixed; inset: 0; z-index: 999; background: var(--fond);
  display: grid; place-items: center; overflow: hidden; padding: 0 var(--marge); }
.loader__rideau { position: absolute; inset: 0; background: var(--fond);
  transform-origin: top; will-change: transform; }
.loader__nom {
  position: relative; z-index: 2; font-weight: 500; letter-spacing: -.04em;
  line-height: .94; font-size: clamp(28px, 11vw, 52px);
  display: flex; flex-wrap: wrap; justify-content: center;
  overflow: hidden; padding-bottom: .1em; max-width: 100%;
}
.loader__nom span { display: inline-block; transform: translateY(105%);
  animation: monteLettre 1.15s cubic-bezier(.22,1,.36,1) forwards; }
.loader__nom span.espace { width: .3em; }
@keyframes monteLettre { to { transform: translateY(0); } }

.loader__pied { position: absolute; z-index: 2; left: 0; right: 0; bottom: 32px;
  padding: 0 var(--marge); display: flex; justify-content: space-between;
  align-items: flex-end; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; opacity: 0; animation: paraitre .9s ease .55s forwards; }
.loader__compte { font-variant-numeric: tabular-nums; font-size: 34px;
  letter-spacing: -.04em; text-transform: none; line-height: .85; font-weight: 500; }
.loader__rail { position: absolute; left: var(--marge); right: var(--marge);
  bottom: 18px; height: 1px; background: rgba(33,33,33,.16); z-index: 2;
  opacity: 0; animation: paraitre .9s ease .55s forwards; }
.loader__barre { position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--encre); transition: width .5s cubic-bezier(.22,1,.36,1); }
@keyframes paraitre { to { opacity: 1; } }

/* ---------- structure de défilement ---------- */
/* l'ouverture et le pied sont fixes derrière ; le contenu glisse par-dessus */
.hero  { position: fixed; top: 0; left: 0; right: 0; height: 100svh; z-index: 1;
  background: var(--fond); }
.pied  { position: fixed; bottom: 0; left: 0; right: 0; z-index: 0; }
.contenu { position: relative; z-index: 1; background: var(--fond);
  margin-top: 100svh; margin-bottom: 0; }

/* ---------- ouverture ---------- */
.hero { padding: 26px var(--marge) 32px; display: flex; flex-direction: column; }
.hero__nom { margin-top: auto; }
.hero__nav { position: absolute; top: 26px; right: var(--marge);
  display: flex; align-items: baseline; gap: 16px;
  font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.hero__langues { display: inline-flex; gap: 7px; }
.hero__langues button { background: none; border: 0; padding: 0; font: inherit;
  color: inherit; letter-spacing: .1em; opacity: .4; transition: opacity .3s; }
.hero__langues button.actif { opacity: 1; }
.hero__langues span { opacity: .25; }
.hero__logo { height: 28px; color: var(--encre); margin-bottom: 12vh; }
.hero__logo svg { height: 100%; width: auto; display: block; }
.hero__accroche { margin-bottom: 0; max-width: 32ch; }
.hero__nom { font-weight: 600; letter-spacing: -.045em; line-height: .88;
  font-size: clamp(40px, 15vw, 76px); margin-bottom: 18px; }
.hero__reperes { display: flex; justify-content: space-between; font-size: 12px; }

/* ---------- plein écran ---------- */
.pleine { position: relative; z-index: 2; background: var(--fond);
  height: 74vh; overflow: hidden; }
.pleine > * { width: 100%; height: 100%; }

/* ---------- média qui s'agrandit ---------- */
.duo-pin { position: relative; z-index: 3; height: 200vh; background: var(--fond); }
.duo { position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--fond); display: grid; place-items: center; }
.duo__media { width: 100vw; height: 100vh; overflow: hidden;
  transform-origin: center; will-change: transform; }
.duo__media > * { transform-origin: center; }
.duo__est, .duo__ville { position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .1em; z-index: 4; }
.duo__est { top: 12vh; }
.duo__ville { bottom: 12vh; }
.duo__mot { position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 22px; letter-spacing: -.035em; z-index: 4;
  mix-blend-mode: difference; color: #fff; }
.duo__mot--g { left: var(--marge); }
.duo__mot--d { right: var(--marge); }

/* ---------- sections ---------- */
.bloc, .temoins, .chiffres {
  position: relative; z-index: 2; background: var(--fond);
}
.bloc { padding: 66px var(--marge) 74px; }
.bloc__titre { font-size: 32px; font-weight: 500; letter-spacing: -.038em;
  line-height: .98; margin-bottom: 20px; }
.bloc__filet { width: 100%; height: 1px; background: var(--trait);
  margin-bottom: 22px; transform: scaleX(0); transform-origin: left; }
.bloc__filet.vu { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.bloc__jalon, .services__jalon { margin-bottom: 24px; }
.bloc__texte { margin-bottom: 30px; }
.bloc__texte p + p { margin-top: 1.1em; }
.apropos__media, .services__media { aspect-ratio: 4 / 3; overflow: hidden; margin-top: 12px; }

.presta figure { overflow: hidden; background: rgba(33,33,33,.06);
  margin-top: 14vw; position: relative; }
.presta figure:first-of-type { margin-top: 0; }
/* rythme : largeurs et hauteurs alternées */
.presta figure:nth-of-type(1) { width: 100%;  aspect-ratio: 4 / 5; }
.presta figure:nth-of-type(2) { width: 74%;   aspect-ratio: 3 / 4; margin-left: auto; }
.presta figure:nth-of-type(3) { width: 88%;   aspect-ratio: 1 / 1; }
.presta figure:nth-of-type(4) { width: 100%;  aspect-ratio: 5 / 4; }

.services__intro { margin-bottom: 28px; }
.services__intro p + p { margin-top: 1.1em; }
.services__liste { list-style: none; }
.services__liste li { border-bottom: 1px solid var(--trait); padding: 13px 0; font-size: 16px; }
.services__liste li:first-child { border-top: 1px solid var(--trait); }
.services__compte { margin-top: 20px; font-size: 12px; color: rgba(33,33,33,.45); }

/* ---------- chiffres ---------- */
.chiffres { padding: 58px var(--marge) 64px; border-top: 1px solid var(--trait); }
.chiffres__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.chiffres__bloc { padding-top: 0; }
.chiffres__n { font-size: 46px; font-weight: 500; letter-spacing: -.045em;
  line-height: .9; font-variant-numeric: tabular-nums; display: block; }
.chiffres__n small { font-size: .42em; }
.chiffres__l { margin-top: 10px; font-size: 11px; color: rgba(33,33,33,.55);
  text-transform: uppercase; letter-spacing: .1em; }

/* ---------- témoignages ---------- */
.temoins { padding: 66px 0 74px; }
.temoins__tete { padding: 0 var(--marge); margin-bottom: 36px; }
.temoins__cit { font-size: 23px; line-height: 1.34; letter-spacing: -.035em; margin-bottom: 24px; }
.temoins__bande { overflow: hidden; }
.temoins__piste { display: flex; gap: 12px; width: max-content; will-change: transform; }
.temoins__carte { width: 76vw; flex: none; min-height: 230px;
  border: 1px solid var(--trait); background: #fff; padding: 22px;
  display: flex; flex-direction: column; gap: 12px; }
.temoins__etoiles { letter-spacing: .16em; }
.temoins__mot { flex: 1; line-height: 1.6; font-size: 14px; }
.temoins__qui { font-size: 11px; letter-spacing: .1em; color: rgba(33,33,33,.55); }

/* ---------- pied de page ---------- */
.pied { background: var(--encre); color: var(--fond); padding: 44px var(--marge) 30px; }
.pied__logo { height: 26px; color: var(--fond); margin-bottom: 28px; }
.pied__logo svg { height: 100%; width: auto; display: block; }
.pied__menu, .pied__social { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pied__coord { margin-bottom: 22px; font-size: 14px; }
.pied__nom { font-weight: 600; letter-spacing: -.045em; line-height: .88;
  font-size: clamp(34px, 13vw, 68px); padding-bottom: .04em; }

/* ---------- survol : sans objet au toucher ---------- */
.vue { position: relative; overflow: hidden; }
.vue__voile { display: none; }
.curseur, .curseur__anneau { display: none; }

/* ---------- apparitions ---------- */
[data-monte] { opacity: 0; transform: translateY(22px); }
[data-monte].vu { opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.mot { color: #bdb8b1; transition: color .45s ease; display: inline; }
.mot.encre { color: var(--encre); }

.lien-trait { position: relative; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-monte] { opacity: 1; transform: none; }
  .bloc__filet { transform: scaleX(1); }
  .mot { color: var(--encre); }
  .duo-pin { height: auto; }
  .duo { position: relative; }
  .duo__media { transform: none; }
}


/* ============================================================
   DESKTOP — grille 1440, positionnement absolu.
   Rien de tout cela ne s'applique en dessous de 861 px.
   ============================================================ */
@media (min-width: 861px) {
  :root { --u: calc(100vw / 1440); }
}
@media (min-width: 1440px) { :root { --u: 1px; } }

@media (min-width: 861px) {
  /* ---------- chargement ---------- */
  .loader {
    position: fixed; inset: 0; z-index: 999; background: var(--fond);
    display: grid; place-items: center; overflow: hidden;
  }
  .loader__rideau {
    position: absolute; inset: 0; background: var(--fond);
    transform-origin: top; will-change: transform;
  }
  .loader__nom {
    position: relative; z-index: 2;
    font-weight: 500; letter-spacing: -.04em; line-height: .92;
    font-size: clamp(30px, calc(96 * var(--u)), 116px);
    display: flex; overflow: hidden; padding-bottom: .08em;
  }
  .loader__nom span {
    display: inline-block; transform: translateY(105%);
    animation: monteLettre 1.15s cubic-bezier(.22,1,.36,1) forwards;
  }
  .loader__nom span.espace { width: .3em; }
  @keyframes monteLettre { to { transform: translateY(0); } }

  .loader__pied {
    position: absolute; z-index: 2; left: 0; right: 0;
    bottom: calc(38 * var(--u)); padding: 0 calc(38 * var(--u));
    display: flex; justify-content: space-between; align-items: flex-end;
    font-size: clamp(12px, calc(13 * var(--u)), 14px);
    text-transform: uppercase; letter-spacing: .1em;
    opacity: 0; animation: paraitre .9s ease .55s forwards;
  }
  .loader__compte { font-variant-numeric: tabular-nums;
    font-size: clamp(28px, calc(64 * var(--u)), 76px);
    letter-spacing: -.04em; text-transform: none; line-height: .85; font-weight: 500; }
  .loader__rail {
    position: absolute; left: calc(38 * var(--u)); right: calc(38 * var(--u));
    bottom: calc(24 * var(--u)); height: 1px; background: rgba(33,33,33,.16); z-index: 2;
    opacity: 0; animation: paraitre .9s ease .55s forwards;
  }
  .loader__barre { position: absolute; inset: 0 auto 0 0; width: 0;
    background: var(--encre); transition: width .5s cubic-bezier(.22,1,.36,1); }
  @keyframes paraitre { to { opacity: 1; } }

  /* ---------- 1. ouverture, 714 px ---------- */
  .hero { height: 100svh; display: block; padding: 0; }
  .hero__logo { position: absolute; left: calc(30 * var(--u)); top: 5.6%; margin: 0;
    height: calc(36 * var(--u)); display: flex; gap: calc(3 * var(--u)); }
  .hero__logo { color: var(--encre); }
  .hero__logo svg { height: 100%; width: auto; display: block; }
  .hero__nav { position: absolute; right: calc(30 * var(--u)); top: 6%;
    display: flex; align-items: baseline; gap: calc(34 * var(--u)); }
  .hero__cta { position: static; }
  .hero__accroche { position: absolute; left: calc(1060 * var(--u)); top: 23.5%; margin: 0;
    width: calc(327 * var(--u)); }
  .hero__nom { position: absolute; left: calc(14 * var(--u)); top: 75.6%; margin: 0;
    width: calc(1412 * var(--u)); font-weight: 600; letter-spacing: -.03em;
    line-height: .78; white-space: nowrap; }
  .hero__est   { position: absolute; left: calc(31 * var(--u)); top: 91.3%; }
  .hero__ville { position: absolute; right: calc(30 * var(--u)); top: 91.3%; }

  /* ---------- 2. plein écran débordant, 714 px ---------- */
  .pleine { height: calc(714 * var(--u)); overflow: hidden; position: relative; }
  .pleine > * { position: absolute; top: calc(-37 * var(--u)); left: calc(-180 * var(--u));
    width: calc(1620 * var(--u)); height: calc(751 * var(--u)); }

  /* ---------- 3. média centré qui s'agrandit ---------- */
  .duo-pin { height: 260vh; }
  .duo { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
  .duo__media { position: relative; width: 100vw; height: 100vh; overflow: hidden;
    transform-origin: center; will-change: transform; }
  .duo__est   { position: absolute; left: 50%; transform: translateX(-50%); top: 14vh; }
  .duo__ville { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14vh; }
  .duo__mot { position: absolute; top: calc(338 * var(--u));
    font-size: calc(52 * var(--u)); letter-spacing: -.035em; }
  .duo__mot--g { left: calc(150 * var(--u)); }
  .duo__mot--d { right: calc(189 * var(--u)); }

  /* ---------- motif commun ---------- */
  .bloc { position: relative; }
  .bloc__titre { position: absolute; left: calc(58 * var(--u)); top: calc(104 * var(--u));
    font-size: calc(62 * var(--u)); font-weight: 500; letter-spacing: -.035em; line-height: .95; }
  .bloc__filet { position: absolute; left: calc(58 * var(--u)); top: calc(188 * var(--u));
    width: calc(1323 * var(--u)); height: 1px; background: var(--trait);
    transform: scaleX(0); transform-origin: left; }
  .bloc__filet.vu { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
  .bloc__jalon { position: absolute; left: calc(58 * var(--u)); top: calc(228 * var(--u)); }
  .bloc__texte { position: absolute; left: calc(632 * var(--u)); top: calc(220 * var(--u));
    width: calc(654 * var(--u)); }
  .bloc__texte p + p { margin-top: 1.05em; }

  /* qui sommes-nous, 1204 px */
  .apropos { height: calc(1204 * var(--u)); }
  .apropos__media { position: absolute; left: calc(632 * var(--u)); top: calc(564 * var(--u));
    width: calc(634 * var(--u)); height: calc(552 * var(--u)); overflow: hidden; }

  /* prestations, 2816 px */
  .presta { height: calc(2816 * var(--u)); padding-bottom: 0; }
  
  .presta figure { position: absolute; overflow: hidden; margin: 0;
    background: rgba(33,33,33,.06); contain: paint; }
  .presta figure:nth-of-type(1) { left: calc(402 * var(--u)); top: calc(557 * var(--u));
    width: calc(634 * var(--u)); height: calc(698 * var(--u)); aspect-ratio: auto; }
  .presta figure:nth-of-type(2) { left: calc(52 * var(--u));  top: calc(1311 * var(--u));
    width: calc(531 * var(--u)); height: calc(524 * var(--u)); aspect-ratio: auto; }
  .presta figure:nth-of-type(3) { left: calc(743 * var(--u)); top: calc(1518 * var(--u));
    width: calc(643 * var(--u)); height: calc(943 * var(--u)); aspect-ratio: auto; }
  .presta figure:nth-of-type(4) { left: calc(52 * var(--u));  top: calc(2041 * var(--u));
    width: calc(531 * var(--u)); height: calc(656 * var(--u)); aspect-ratio: auto; }

  /* services, 895 px */
  .services { min-height: calc(895 * var(--u)); height: auto;
    padding-bottom: calc(90 * var(--u)); }
  .services__jalon { position: absolute; left: calc(58 * var(--u)); top: calc(132 * var(--u)); }
  .services .bloc__filet { top: calc(180 * var(--u)); }
  .services__col { position: absolute; left: calc(58 * var(--u)); top: calc(209 * var(--u));
    width: calc(352 * var(--u)); }
  .services__intro { margin-bottom: calc(38 * var(--u)); }
  .services__intro p + p { margin-top: 1.05em; }
  .services__liste { list-style: none; }
  .services__liste li { border-bottom: 1px solid var(--trait);
    padding: calc(10 * var(--u)) 0 calc(9 * var(--u));
    font-size: calc(16 * var(--u)); letter-spacing: -.03em; }
  .services__liste li:first-child { border-top: 1px solid var(--trait); }
  .services__compte { margin-top: calc(30 * var(--u)); }
  .services__media { position: absolute; left: calc(632 * var(--u)); top: calc(209 * var(--u));
    width: calc(748 * var(--u)); height: calc(552 * var(--u)); overflow: hidden; }

  /* bandeau de chiffres */
  .chiffres {
    position: relative; z-index: 2; background: var(--fond);
    padding: calc(96 * var(--u)) calc(58 * var(--u)) calc(110 * var(--u));
    border-top: 1px solid var(--trait);
  }
  .chiffres__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--u)); }
  .chiffres__bloc { padding-top: 0; }
  .chiffres__n {
    font-size: calc(92 * var(--u)); font-weight: 500; letter-spacing: -.045em;
    line-height: .9; font-variant-numeric: tabular-nums; display: block;
  }
  .chiffres__n small { font-size: .42em; letter-spacing: -.02em; }
  .chiffres__l { margin-top: calc(14 * var(--u)); color: rgba(33,33,33,.55);
    text-transform: uppercase; letter-spacing: .1em; }

  /* témoignages, 1086 px */
  .temoins { min-height: calc(1086 * var(--u)); height: auto; position: relative;
    padding-bottom: calc(90 * var(--u)); }
  .temoins__tete { position: absolute; left: calc(454 * var(--u)); top: calc(140 * var(--u));
    width: calc(926 * var(--u)); }
  .temoins__cit { font-size: calc(44 * var(--u)); line-height: 1.28; letter-spacing: -.03em;
    margin-bottom: calc(34 * var(--u)); }
  .temoins__bande { position: absolute; left: calc(31 * var(--u)); top: calc(560 * var(--u));
    width: calc(1350 * var(--u)); height: calc(427 * var(--u));
    overflow: hidden; display: flex; align-items: center; }
  .temoins__piste { display: flex; gap: calc(16 * var(--u)); width: max-content; will-change: transform; }
  .temoins__carte { width: calc(420 * var(--u)); flex: none; height: calc(360 * var(--u));
    border: 1px solid var(--trait); background: #fff; padding: calc(28 * var(--u));
    display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
  .temoins__etoiles { letter-spacing: .16em; }
  .temoins__mot { flex: 1; line-height: 1.6; }
  .temoins__qui { color: rgba(33,33,33,.55); }

  /* pied de page, 587 px */
  .pied { height: calc(587 * var(--u)); position: relative;
    background: var(--encre); color: var(--fond); overflow: hidden; }
  .pied__logo { position: absolute; left: calc(29 * var(--u)); top: calc(59 * var(--u));
    height: calc(35 * var(--u)); display: flex; gap: calc(3 * var(--u)); }
  .pied__logo svg { height: 100%; width: auto; display: block; }
  .pied__logo { color: var(--fond); }
  .pied__menu { position: absolute; left: calc(29 * var(--u)); top: calc(123 * var(--u));
    display: grid; gap: calc(5 * var(--u)); }
  .pied__coord { position: absolute; left: calc(162 * var(--u)); top: calc(124 * var(--u));
    width: calc(300 * var(--u)); }
  .pied__social { position: absolute; right: calc(49 * var(--u)); top: calc(123 * var(--u));
    display: grid; gap: calc(5 * var(--u)); text-align: right; }
  .pied__nom { position: absolute; left: calc(10 * var(--u)); top: calc(444 * var(--u));
    width: calc(1420 * var(--u)); font-weight: 600; letter-spacing: -.03em;
    line-height: .78; white-space: nowrap; }

  /* apparitions */
  [data-monte] { opacity: 0; transform: translateY(24px); }
  [data-monte].vu { opacity: 1; transform: none;
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-monte] { opacity: 1; transform: none; }
    .bloc__filet { transform: scaleX(1); }
  }



  /* ---------- curseur ---------- */
  @media (hover: hover) and (pointer: fine) {
    body, a, button, .vue { cursor: none; }
    .curseur, .curseur__anneau {
      display: block; position: fixed; top: 0; left: 0; z-index: 900;
      pointer-events: none; border-radius: 50%;
      mix-blend-mode: difference;
      will-change: transform; contain: strict;
    }
    .curseur { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px;
      transition: opacity .3s ease; }
    .curseur__anneau { width: 38px; height: 38px; margin: -19px 0 0 -19px;
      border: 1px solid rgba(255,255,255,.75); display: grid; place-items: center;
      transition: width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1),
                  margin .45s cubic-bezier(.22,1,.36,1), background-color .45s ease,
                  border-color .45s ease; }
    .curseur__anneau svg { width: 34%; height: 34%; opacity: 0; color: #fff;
      transform: scale(.5) rotate(-14deg);
      transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
    body.survol-media .curseur { opacity: 0; }
    body.survol-media .curseur__anneau { width: 112px; height: 112px; margin: -56px 0 0 -56px;
      background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.95);
      mix-blend-mode: normal; }
    body.survol-media .curseur__anneau svg { opacity: 1; transform: scale(1) rotate(0); }
    body.survol-lien .curseur__anneau { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    body.zone-media .curseur, body.zone-media .curseur__anneau { mix-blend-mode: normal; }
    body.zone-media .curseur { background: #fff; }
    body.zone-media .curseur__anneau { border-color: rgba(255,255,255,.9); }
  }

  /* survol des images */
  .vue > img, .vue > video { transition: transform 1.1s cubic-bezier(.22,1,.36,1); transform: scale(1.14); }
  .vue:hover > img, .vue:hover > video { transform: scale(1); }
  .vue__voile { display: flex; position: absolute; inset: 0; z-index: 2;
    align-items: center; justify-content: space-between; padding: 0 calc(48 * var(--u));
    color: #fff; opacity: 0; transition: opacity .55s ease; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.34)); }
  .vue:hover .vue__voile { opacity: 1; }
  .vue__voile span { font-size: calc(22 * var(--u)); letter-spacing: -.03em; }

  /* soulignement des liens */
  .lien-trait::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.22em;
    height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .55s cubic-bezier(.22,1,.36,1); }
  .lien-trait:hover::after { transform: scaleX(1); transform-origin: left; }
  .hero__langues button:hover { opacity: 1; }
  .pied__menu span:hover, .pied__social span:hover { opacity: .55; }
}

/* ============================================================
   EMPILEMENT — ouverture et pied fixes, contenu par-dessus
   ============================================================ */
.pied    { position: fixed; z-index: 0; }
.hero    { position: fixed; z-index: 1; background: var(--fond);
           transition: visibility 0s linear .35s, opacity .35s ease; }
.hero.efface { visibility: hidden; opacity: 0; }
.hero:not(.efface) { transition-delay: 0s; }
.contenu { position: relative; z-index: 2; }
.pleine, .bloc, .temoins, .chiffres { position: relative; z-index: 3; background: var(--fond); }
.duo-pin { position: relative; z-index: 4; background: var(--fond); }