/* LEVOLYA - landing - feuille de style unique */

:root {
  --lv-accent: #EE1A5F;
  --lv-pop: #FF7A1A;          /* orange decoratif : halos, fleches, numeros */
  --lv-pop-deep: #F26100;     /* surbrillances en grand texte : titre, chapo (blanc 3,24) */
  --lv-pop-tag:  #E85D04;     /* etiquette du heros, plus petite donc plus soutenue (blanc 3,50) */
  --lv-cream: #FBF6F3;
  --lv-ink: #2A1D21;
  --lv-dark: #1A1013;
  --lv-halo-warm: #FF9433;
  --lv-halo-mid: #FF6A4D;
  --lv-duo: linear-gradient(155deg, #FF9433 0%, #FF6A4D 45%, #FF5C92 100%);
  --lv-veil: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.2), transparent 58%);
  --lv-pad: clamp(20px, 5vw, 40px);
  --lv-step-h: clamp(84px, 11vw, 104px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--lv-ink);
  background: var(--lv-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: #B0574F; text-underline-offset: 3px; }
a:hover { color: #3A2A2E; }

h1, h2, h3 { font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--lv-pad); padding-right: var(--lv-pad); }

/* ---------- accessibilité : focus visible et lien d'évitement ---------- */

:focus-visible {
  outline: 3px solid var(--lv-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.lever :focus-visible, .contact :focus-visible { outline-color: var(--lv-pop); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--lv-ink); color: var(--lv-cream);
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 700;
  padding: 12px 16px; text-decoration: none;
  transition: top .2s ease;
}
.skip:focus { top: 12px; color: var(--lv-cream); }

.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- en-tête et logo ---------- */

.header { padding-top: clamp(22px, 5vw, 30px); display: flex; }

.logo { width: max-content; cursor: default; font-size: clamp(27px, 8.6vw, 52px); }
.logo__word { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1em; letter-spacing: .16em; line-height: 1; padding-left: .06em; }
.logo__bar {
  height: .096em; background: var(--lv-ink); margin-top: .212em;
  transform-origin: 1.27em 50%;
  transition: transform .4s cubic-bezier(.34,1.4,.5,1);
}
.logo.is-lifted .logo__bar { transform: rotate(-3.4deg); }
.logo__cursor {
  width: 0; height: 0; margin-left: 1.115em;
  border-left: .154em solid transparent;
  border-right: .154em solid transparent;
  border-bottom: .212em solid var(--lv-accent);
}
.logo__baseline { font-size: .331em; letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; color: #6A5153; margin-top: .69em; font-weight: 600; }

/* ---------- héros ---------- */

.hero { padding-top: clamp(26px, 4.5vw, 44px); position: relative; }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(26px, 4vw, 52px); align-items: center; }
.hero__text { animation: lv-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 { font-weight: 900; font-size: clamp(40px, 5.6vw, 78px); line-height: .95; letter-spacing: -.03em; margin: 0; text-wrap: pretty; }
.hero h1 .accent { color: var(--lv-accent); }
.hero h1 .marker { display: inline-block; background: var(--lv-pop-deep); color: #FFFFFF; padding: 0 .1em; transform: rotate(-1.6deg); }

.link-cta {
  display: inline-block; margin-top: 30px;
  font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--lv-ink); text-decoration: none;
  border-bottom: 3px solid var(--lv-accent); padding-bottom: 5px; white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .25s ease;
}
.link-cta:hover, .link-cta:active { color: var(--lv-accent); transform: translate(4px, -4px) rotate(-1.2deg); }

.hero__media { min-width: 0; position: relative; align-self: start; margin-top: min(0px, max(-104px, calc((760px - 100vw) * 1000))); }
.arch {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: 50% 50% 18px 18px / 34% 34% 18px 18px;
  /* overflow: hidden ne retient pas toujours un enfant en mix-blend-mode :
     le groupe de fusion est composite a part et deborde des coins arrondis.
     clip-path, lui, decoupe pour de bon. */
  clip-path: inset(0 round 50% 50% 18px 18px / 34% 34% 18px 18px);
  background: var(--lv-duo); isolation: isolate;
}
/* Meme traitement que les visuels des trois temps : la luminance de la photo
   est projetee sur le degrade de la marque. Le cadrage est remonte pour que
   les deux mains soient entieres. */
.arch img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 88%;
  mix-blend-mode: luminosity;
  /* on fait deriver le cadrage plutot que de zoomer : un scale depassait
     du cadre et laissait apparaitre un lisere de l'image brute */
  animation: lv-derive 18s ease-in-out infinite;
}
.veil { position: absolute; inset: 0; pointer-events: none; background: var(--lv-veil); }

/* Etiquette du heros. Par defaut (telephone) elle reste dans le cadre,
   sinon elle sortirait de l'ecran. Des que la grille passe sur deux colonnes,
   elle deborde dans la gouttiere pour casser la silhouette de l'arche. */
.tag {
  position: absolute; left: 14px; bottom: 24px;
  background: var(--lv-pop-tag); color: #FFFFFF; padding: 11px 15px;
  transform: rotate(-7deg); animation: lv-pop 5s ease-in-out infinite;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 19px;
  line-height: 1.15; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(42, 29, 33, .22);
}
@media (min-width: 780px) {
  .tag { left: -42px; bottom: 48px; padding: 13px 18px; transform: rotate(-7.5deg); }
}

/* ---------- carte de présentation ---------- */

.intro { padding-top: clamp(52px, 8vw, 84px); padding-bottom: 10px; position: relative; }
.halo { position: absolute; border-radius: 50%; pointer-events: none; }
.intro__halo-a { top: 30px; left: 6%; width: 46%; padding-bottom: 46%; opacity: .17; background: radial-gradient(circle at 50% 50%, var(--lv-accent) 0%, transparent 62%); }
.intro__halo-b { bottom: -40px; right: 4%; width: 42%; padding-bottom: 42%; opacity: .2; background: radial-gradient(circle at 50% 50%, var(--lv-pop) 0%, transparent 62%); }
.card {
  position: relative; background: #FFFFFF; border-radius: 34px;
  padding: 44px clamp(26px, 4vw, 58px) 0; overflow: hidden;
}
.card__lead { font-family: 'Archivo', sans-serif; font-size: clamp(24px, 2.1vw, 28px); line-height: 1.3; font-weight: 500; margin: 0; max-width: 48ch; letter-spacing: -.018em; text-wrap: pretty; }
.card__lead mark { background: var(--lv-pop-deep); color: #FFFFFF; padding: 0 .08em; }
.card__body { font-size: 17.5px; line-height: 1.62; margin: 22px 0 0; max-width: 62ch; color: #4A3A3E; text-wrap: pretty; }
.card__kicker { font-family: 'Archivo', sans-serif; font-size: 19px; line-height: 1.4; margin: 26px 0 44px; font-weight: 700; }

/* ---------- section levier ---------- */

.lever { position: relative; background: var(--lv-dark); isolation: isolate; color: var(--lv-cream); margin: 24px 0 40px; overflow: hidden; }
.lever__halo-a { top: -58%; left: 50%; transform: translateX(-50%); width: 90%; padding-bottom: 90%; opacity: .9; background: radial-gradient(circle at 50% 50%, var(--lv-accent) 0%, transparent 62%); }
.lever__halo-b { bottom: -46%; right: -12%; width: 62%; padding-bottom: 62%; opacity: .38; background: radial-gradient(circle at 50% 50%, var(--lv-halo-mid) 0%, transparent 66%); }
.lever__photo {
  position: absolute; inset: 0; pointer-events: none; opacity: .62;
  background-image: url('../img/levier-fond.jpg');
  background-image: image-set(url('../img/levier-fond.webp') type('image/webp'), url('../img/levier-fond.jpg') type('image/jpeg'));
  background-size: cover; background-position: center center;
  background-attachment: fixed; background-repeat: no-repeat;
  mix-blend-mode: luminosity;
}
.lever__scrim { position: absolute; inset: 0; pointer-events: none; background: rgba(14,7,10,.8); }
.lever__inner { position: relative; padding-top: clamp(76px, 11vw, 140px); padding-bottom: clamp(76px, 11vw, 140px); }
.lever__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 64px; align-items: center; }

.eyebrow { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.eyebrow--pop { color: var(--lv-pop); }
.eyebrow--accent { color: var(--lv-accent); }

.lever h2 { font-size: clamp(28px, 3.6vw, 50px); line-height: .98; margin: 14px 0 18px; letter-spacing: -.025em; }
/* sur grand ecran le titre tient sur deux lignes : on empeche la coupure
   au trait d'union de SAVOIR-FAIRE. En dessous, il a le droit de passer a la ligne. */
@media (min-width: 900px) { .lever h2 { white-space: nowrap; } }
.lever__hint { font-size: 16.5px; line-height: 1.55; color: #D6BEBA; margin: 0; max-width: 36ch; }
.lever__hint strong {
  display: block; margin-bottom: 4px;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -.01em; color: var(--lv-cream);
}

.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 132px; }
.bars span { display: block; background: #4A3A3E; height: 22px; transition: height .3s cubic-bezier(.2,.8,.2,1), background .25s ease; }
.slider { position: relative; margin-top: 20px; height: 28px; }
.slider__rail { position: absolute; left: 0; right: 0; top: 5px; height: 4px; background: var(--lv-cream); }
.slider__cursor {
  position: absolute; top: 9px; transform: translateX(-50%); width: 0; height: 0; pointer-events: none;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 11px solid var(--lv-pop);
  transition: left .12s linear;
}
.slider input { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; opacity: 0; cursor: ew-resize; }
/* l'input est invisible : on rend le focus clavier lisible sur la piste */
.slider:has(input:focus-visible) .slider__rail { outline: 3px solid var(--lv-pop); outline-offset: 6px; }
.slider:has(input:focus-visible) .slider__cursor { filter: drop-shadow(0 0 6px var(--lv-pop)); }
.slider input:focus-visible { outline: none; }
.slider__read { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 14px; }
.slider__label { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.slider__note { font-size: 13px; color: #BCA3A1; white-space: nowrap; }

/* sur telephone la lecture s'empile au lieu de se serrer sur deux colonnes */
@media (max-width: 780px) {
  .lever__grid { gap: 36px; }
  .slider__read { flex-direction: column; align-items: flex-start; gap: 5px; }
  .slider__label { font-size: 19px; }
}

/* ---------- trois temps ---------- */

.steps { position: relative; height: 300vh; }
.steps__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  min-height: 600px;
  display: flex; align-items: center; overflow: hidden;
}
.steps__grid { width: 100%; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px); align-items: center; }
.steps__rail { min-width: 0; flex: 1 1 250px; max-width: 340px; }
.steps h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: .98; margin: 10px 0 clamp(14px, 2.6vw, 26px); letter-spacing: -.02em; }

.rail { position: relative; padding-left: 46px; }
.rail__line { position: absolute; left: 19px; top: 22px; bottom: 26px; width: 3px; background: #E4D3CE; }
.rail__cursor {
  position: absolute; left: 1px; top: 11px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 11px solid var(--lv-accent);
  transition: transform .5s cubic-bezier(.34,1.25,.5,1);
}
/* les etapes sont des boutons : accessibles au clavier */
.rail__item {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  height: var(--lv-step-h); width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.rail__col { display: block; min-width: 0; }
.rail__dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 13.5px; letter-spacing: -.01em;
  border: 3px solid #E4D3CE; background: var(--lv-cream); color: #A08589;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .4s cubic-bezier(.34,1.4,.5,1);
}
.rail__item.is-on .rail__dot { border-color: var(--lv-accent); background: var(--lv-accent); color: #FFFFFF; transform: scale(1.1); }
.rail__title { display: block; font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: clamp(20px, 2.2vw, 24px); text-transform: uppercase; letter-spacing: -.015em; color: #7E6367; transition: color .3s ease; }
.rail__item.is-on .rail__title { color: var(--lv-ink); }
.rail__bar { display: block; height: 3px; margin-top: 10px; width: 26px; background: #E4D3CE; transition: width .45s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.rail__item.is-on .rail__bar { width: 88px; background: var(--lv-ink); }
.rail__teaser { display: block; font-size: 13.5px; line-height: 1.5; color: #6E585C; margin-top: 8px; }

.panel { min-width: 0; flex: 4 1 400px; background: #F7EAE4; transform: rotate(-1.6deg); }
.panel__media { aspect-ratio: 16/9; background: var(--lv-duo); isolation: isolate; overflow: hidden; clip-path: inset(0); position: relative; }
.panel__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: 0; transform: scale(1);
  transition: opacity .5s ease, transform 5s cubic-bezier(.2,.6,.2,1);
}
.panel__media img.is-on { opacity: 1; transform: scale(1.045); }
.panel__num {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: clamp(24px, 3vw, 34px);
  color: var(--lv-pop); background: var(--lv-ink); padding: 4px 14px 6px; line-height: 1;
}
.panel__body { padding: clamp(18px, 2.6vw, 28px) clamp(20px, 3.2vw, 34px) clamp(20px, 3vw, 30px); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel__body h3 { font-size: clamp(22px, 3vw, 32px); margin: 0; letter-spacing: -.015em; }
.panel__when {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: #8A6E73;
  border: 2px solid #DCC5BE; padding: 4px 9px; white-space: nowrap;
}
.panel__rule { height: 4px; background: var(--lv-ink); margin-top: 12px; width: 104px; }
.panel__tick { width: 0; height: 0; margin-left: 16px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--lv-accent); }
.panel__text { font-size: clamp(15px, 1.55vw, 17.5px); line-height: 1.5; color: #3E2F33; margin: 12px 0 0; max-width: 52ch; text-wrap: pretty; font-weight: 500; }
.panel__list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; max-width: 56ch; }
.panel__list li {
  position: relative; padding-left: 22px;
  font-size: clamp(13.5px, 1.35vw, 15.5px); line-height: 1.45; color: #4A3A3E; text-wrap: pretty;
}
.panel__list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 6px solid var(--lv-accent);
}
.panel__foot {
  margin: 14px 0 0; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: clamp(13.5px, 1.4vw, 15.5px); line-height: 1.4; color: var(--lv-ink);
  border-top: 2px solid #E4D3CE; padding-top: 12px; text-wrap: pretty;
}

/* écrans peu hauts : on resserre pour que le panneau tienne dans le pin */
@media (max-height: 780px) and (min-width: 900px) {
  .panel__media { aspect-ratio: 21/9; }
  .panel__body { padding: 15px 24px 19px; }
  .panel__list { gap: 4px; }
  .panel__text { margin-top: 10px; }
  .panel__foot { margin-top: 11px; padding-top: 10px; }
}

/* La pile mobile n'existe qu'en dessous de 900px : le defilement epingle
   ne peut pas contenir le rail plus un panneau complet sur un telephone. */
.steps__stack { display: none; }

@media (max-width: 899px) {
  .steps { height: auto; }
  .steps__pin {
    position: static; height: auto; min-height: 0;
    display: block; overflow: visible;
    padding-top: clamp(50px, 9vw, 76px); padding-bottom: clamp(50px, 9vw, 76px);
  }
  .steps__grid { display: block; }
  .steps__rail { max-width: none; }
  .steps__rail .rail { display: none; }
  .steps__grid > .panel { display: none; }
  .steps__stack { display: grid; gap: 26px; margin-top: 24px; }
  .steps__stack .panel { flex: none; }
  .steps__stack .panel:nth-child(1) { transform: rotate(-1.6deg); }
  .steps__stack .panel:nth-child(2) { transform: rotate(1.3deg); }
  .steps__stack .panel:nth-child(3) { transform: rotate(-1.1deg); }
  .steps__stack .panel__media img { opacity: 1; transform: none; }
}

/* ---------- contact ---------- */

.contact { position: relative; background: var(--lv-dark); color: var(--lv-cream); overflow: hidden; }
.contact__halo-a { top: -24%; left: -8%; width: 62%; padding-bottom: 62%; opacity: .9; background: radial-gradient(circle at 50% 50%, var(--lv-accent) 0%, transparent 68%); }
.contact__halo-b { bottom: -30%; right: -8%; width: 64%; padding-bottom: 64%; opacity: 1; background: radial-gradient(circle at 50% 50%, var(--lv-pop) 0%, var(--lv-halo-warm) 34%, transparent 68%); }
.contact__halo-c { bottom: 6%; right: 24%; width: 34%; padding-bottom: 34%; opacity: .55; background: radial-gradient(circle at 50% 50%, var(--lv-halo-mid) 0%, transparent 64%); }
.contact__grid {
  position: relative;
  padding-top: clamp(58px, 8vw, 92px); padding-bottom: clamp(58px, 8vw, 92px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(34px, 5vw, 60px); align-items: start;
}
.contact .logo-sm { width: max-content; }
.contact .logo-sm__word { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: .16em; line-height: 1; padding-left: .06em; }
.contact .logo-sm__bar { height: 4px; background: var(--lv-cream); margin-top: 10px; }
.contact .logo-sm__cursor { width: 0; height: 0; margin-left: 39px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--lv-pop); }
.contact h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: .95; letter-spacing: -.025em; margin: 32px 0 0; max-width: 18ch; text-wrap: pretty; }
.contact p.lead { font-size: 18px; line-height: 1.6; color: #E8D3CF; margin: 18px 0 0; max-width: 38ch; }
.btn-mail {
  display: inline-block; margin-top: 22px;
  font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 700;
  color: #1C1316; background: var(--lv-cream); text-decoration: none; padding: 13px 18px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn-mail:hover { background: var(--lv-ink); color: var(--lv-cream); }
.btn-mail:active { transform: scale(.97); }

.form { min-width: 0; display: grid; gap: 14px; background: rgba(18,12,14,.55); border: 1px solid rgba(251,246,243,.16); padding: 30px 30px 28px; }
.form label { display: grid; gap: 7px; }
.form label > span { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #F3D8D0; font-weight: 700; }
.form label > span em { font-style: normal; font-weight: 500; color: #C8ADAA; letter-spacing: .1em; }
.form input, .form textarea {
  font-family: 'Public Sans', sans-serif; font-size: 15px; color: var(--lv-ink);
  background: var(--lv-cream); border: 0; padding: 13px 14px; width: 100%;
}
.form textarea { line-height: 1.5; resize: vertical; }
.form button {
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 15px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--lv-cream); background: #12090B; border: 0;
  padding: 16px 22px; cursor: pointer; justify-self: start;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.form button:hover { background: var(--lv-cream); color: #12090B; }
.form button:active { transform: scale(.97); }
.form button[disabled] { opacity: .55; cursor: progress; }
.form__note { font-size: 12px; line-height: 1.5; color: #C6ACAA; margin: 0; }
.form__note a { color: #F3D8D0; }
.form__note a:hover { color: #FFFFFF; }
.form__status { font-size: 14px; line-height: 1.5; margin: 0; min-height: 0; }
.form__status.ok { color: #7FE0A8; }
.form__status.ko { color: #FFB3C4; }
.form__status a { color: #FFB3C4; }

/* ---------- barre d'action mobile ---------- */

/* Rien sur ordinateur : le formulaire y est visible sans effort. */
.dock { display: none; }

@media (max-width: 779px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(22, 13, 16, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(251, 246, 243, .16);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  }
  /* visible par defaut : sans JavaScript la barre reste utilisable */
  .dock--cache { transform: translateY(130%); }

  .dock__home {
    flex: none; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: var(--lv-cream); text-decoration: none;
    border: 2px solid rgba(251, 246, 243, .34);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .dock__home:active { background: var(--lv-cream); color: #12090B; border-color: var(--lv-cream); }

  .dock__cta {
    flex: 1 1 auto; min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: .01em; text-align: center; text-wrap: balance;
    color: #12090B; background: var(--lv-cream); text-decoration: none;
    padding: 8px 14px;
    transition: transform .2s ease;
  }
  .dock__cta:active { transform: scale(.98); }
  .dock :focus-visible { outline: 3px solid var(--lv-pop); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

/* ---------- pied de page ---------- */

.footer { background: var(--lv-ink); color: #C9AFAB; }
.footer__inner { padding-top: 28px; padding-bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; font-size: 13px; }
.footer__line { flex: 1 1 260px; }
.footer__nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__nav a { color: #E3CBC7; text-decoration: none; border-bottom: 1px solid rgba(227,203,199,.35); padding-bottom: 2px; }
.footer__nav a:hover { color: #FFFFFF; border-bottom-color: currentColor; }
.footer__mono { display: flex; align-items: center; gap: 10px; }

/* ---------- animations ---------- */

@keyframes lv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lv-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lv-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes lv-derive { 0%, 100% { object-position: 50% 88%; } 50% { object-position: 50% 82%; } }
@keyframes lv-pop { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(-7deg) scale(1.05); } }

/* le fondu n'est branche sur le defilement que si le navigateur sait le faire ;
   ailleurs le bloc reste simplement visible, sans animation orpheline */
@supports (animation-timeline: view()) {
  .reveal { animation: lv-reveal .85s cubic-bezier(.2,.85,.2,1) both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
}

@media (prefers-reduced-motion: reduce) {
  .arch img, .tag { animation: none; }
  .panel__media img { transform: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
  .slider__cursor, .rail__cursor, .panel__media img { transition-duration: .01ms; }
}

/* iOS ignore background-attachment: fixed, et le repaint coute cher en scroll */
@media (max-width: 1100px) {
  .lever__photo { background-attachment: scroll; }
}

/* ---------- pages légales ---------- */

.legal { max-width: 760px; padding-top: clamp(30px, 6vw, 56px); padding-bottom: clamp(50px, 8vw, 90px); }
.legal h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: .98; letter-spacing: -.025em; margin: 0 0 8px; }
.legal h2 { font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.01em; margin: 40px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: #3E2F33; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .legal__date { font-size: 13px; color: #7A6367; margin-top: 0; }
.legal .todo { background: #FFF0C2; padding: 0 .2em; border-bottom: 2px solid #E0B32B; }
.legal__back {
  display: inline-block; margin-top: 40px;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lv-ink);
  text-decoration: none; border-bottom: 3px solid var(--lv-accent); padding-bottom: 4px;
}
.legal__back:hover { color: var(--lv-accent); }