/* Kaleyo — kaleyo.fr V2 */

:root {
  --bg: #f3ede4;
  --ink: #04181c;
  --muted: rgba(4, 24, 28, .74);
  --line: rgba(4, 24, 28, .14);
  --sand: #d8c3ad;
  --accent: #ffd166;
  --lagoon: #0e6f78;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --sans: "Chillax", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  /* Mots mis en valeur (« mieux. », « en trois secondes. »…) : police ci-dessus, et sa mise en forme. */
  --accent-style: italic;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-spacing: -.03em;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--bg); }

h2, .statement {
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}
h1 em, h2 em, .statement em {
  font-family: var(--serif);
  font-style: var(--accent-style);
  font-weight: var(--accent-weight);
  font-size: var(--accent-size);
  letter-spacing: var(--accent-spacing);
}
h2 { font-size: clamp(2.4rem, 5.6vw, 5.25rem); }
h3 { font-weight: 500; font-size: 1.1875rem; letter-spacing: -.01em; line-height: 1.3; }

.eyebrow {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { max-width: 36rem; font-size: clamp(1.125rem, 1.3vw, 1.25rem); color: var(--muted); text-wrap: pretty; }

.link {
  padding-bottom: .15em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
a.link:hover, a:hover > * > .link { background-size: 0 1px; background-position: 100% 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1rem 1.6rem;
  border-radius: 99rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(.25em); }
.btn--sm { padding: .7rem 1.15rem; font-size: .8125rem; }

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .7rem 1rem; border-radius: .5rem;
  background: var(--ink); color: var(--bg);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- En-tête ----------
   Une capsule de verre dépoli, flottante et centrée. Un repère glisse sous le lien survolé ou sous la section
   en cours ; un fil doré, en bas de la capsule, montre l'avancée dans la page. Elle s'efface quand on
   descend et revient dès qu'on remonte. Le verre est porté par ::before : un flou d'arrière-plan sur la
   capsule elle-même enfermerait le menu plein écran du téléphone dans ses limites. */

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: clamp(.6rem, 1.4vw, 1rem) var(--pad) 0;
  pointer-events: none;
  transition: translate .7s var(--ease);
}
.header.is-hidden:not(:focus-within) { translate: 0 calc(-100% - 1.5rem); }
.header__bar {
  position: relative; isolation: isolate; pointer-events: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.5rem, 1.5vw, 1.25rem); /* liens au centre */
  max-width: 64rem; margin-inline: auto;
  padding: .4rem .4rem .4rem 1.1rem;
  border-radius: 99rem;
}
.header__bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(250, 247, 241, .58);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .7), 0 .75rem 2.25rem -1rem rgba(4, 24, 28, .3);
  transition: background-color .5s;
}
.is-scrolled .header__bar::before { background: rgba(250, 247, 241, .74); }

/* Logo : « kaley » en Chillax, et le « o » est un hublot où brille un soleil jaune (au survol, il se lève). */
.logo { display: inline-flex; align-items: baseline; justify-self: start; font: 600 1.4rem/1 var(--sans); letter-spacing: -.035em; }
.logo__o { width: .5em; height: auto; margin-left: .035em; overflow: visible; translate: 0 .02em; }
.logo__o rect { fill: none; stroke: currentColor; stroke-width: 6; }
.logo__o circle { fill: #ffd166; transition: transform .6s var(--ease); }
.logo:hover .logo__o circle { transform: translateY(-3px); }

.nav { position: relative; display: flex; align-items: center; gap: .15rem; font-size: .9375rem; font-weight: 450; }
.nav a[data-nav-link] { position: relative; z-index: 1; padding: .6rem 1rem; border-radius: 99rem; color: rgba(4, 24, 28, .72); transition: color .3s; }
.nav a[data-nav-link]:hover, .nav a.is-active { color: var(--ink); }
.nav__pill { /* le repère qui glisse d'un lien à l'autre (site.js) */
  position: absolute; z-index: 0; left: 0; top: 50%; height: 2.35rem; width: var(--w, 0px);
  border-radius: 99rem; background: rgba(4, 24, 28, .075);
  translate: var(--x, 0px) -50%; opacity: 0;
  transition: translate .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.nav__pill.is-on { opacity: 1; }
.nav__num, .nav__label, .nav__foot { display: none; }

.header__cta {
  display: inline-flex; align-items: center; gap: .5em; justify-self: end;
  padding: .8rem 1.15rem; border-radius: 99rem;
  background: var(--ink); color: var(--bg); font-size: .8125rem; font-weight: 500; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s;
}
.header__cta:hover { transform: translateY(-1px); background: #0b2a30; }
.header__cta .arrow { transition: transform .5s var(--ease); }
.header__cta:hover .arrow { transform: translateX(.25em); }

.header__progress { /* l'avancée dans la page, en fil doré au bas de la capsule */
  position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; pointer-events: none;
}
.header__progress span { display: block; height: 100%; background: linear-gradient(90deg, rgba(255, 209, 102, 0), var(--accent) 30%, #f0b44c); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.menu-toggle { display: none; }

/* Téléphone et tablette : le menu s'ouvre en plein écran, liens numérotés comme les étapes d'un itinéraire. */
@media (max-width: 860px) {
  .header__bar { display: flex; padding: .35rem .35rem .35rem 1rem; }
  .logo { margin-right: auto; }
  .header__cta { padding: .75rem 1rem; }
  .menu-toggle {
    display: grid; place-content: center; gap: .32rem; position: relative; z-index: 2;
    width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(4, 24, 28, .07);
  }
  .menu-toggle span { display: block; width: 1.05rem; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform .5s var(--ease); }
  .menu-open .menu-toggle span:first-child { transform: translateY(.29rem) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-.29rem) rotate(-45deg); }
  .logo, .header__cta { position: relative; z-index: 2; }
  .nav__pill, .header__progress { display: none; }

  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    height: 100vh; height: 100dvh; padding: 6.5rem var(--pad) calc(2rem + env(safe-area-inset-bottom));
    background: var(--bg);
    clip-path: inset(0 0 100% 0 round 0 0 2rem 2rem);
    visibility: hidden;
    transition: clip-path .75s var(--ease), visibility 0s .75s;
  }
  .menu-open .nav { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path .75s var(--ease), visibility 0s; }
  .nav__label { display: block; margin-bottom: 1.25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .nav a[data-nav-link] {
    display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-radius: 0;
    border-top: 1px solid var(--line);
    font-size: clamp(2.1rem, 10vw, 3.25rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--ink);
    opacity: 0; translate: 0 1.25rem;
    transition: opacity .5s, translate .7s var(--ease), color .3s;
  }
  .nav a[data-nav-link]:last-of-type { border-bottom: 1px solid var(--line); }
  .menu-open .nav a[data-nav-link] { opacity: 1; translate: 0 0; transition-delay: calc(.18s + var(--i) * .06s); }
  .nav__num { display: inline; min-width: 2rem; font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
  .nav__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto;
    opacity: 0; transition: opacity .5s;
  }
  .menu-open .nav__foot { opacity: 1; transition-delay: .45s; }
  .nav__mail { font-size: .9375rem; color: var(--muted); }
}
@media (max-width: 380px) {
  .header__cta { display: none; }
}

/* ---------- Héro : vidéo au scroll ---------- */

.hero {
  position: relative;
  /* Grande hauteur d'écran (lvh) : sur téléphone, quand les barres du navigateur se replient en défilant,
     le héro remplit toujours l'écran (avec svh, une bande de la page apparaissait en bas). */
  height: 100vh; height: 100lvh; min-height: 34rem;
  overflow: hidden;
  background: var(--ink); /* visible seulement autour de la scène quand elle recule, en fin de héro */
}
.hero__scene { position: absolute; inset: 0; overflow: hidden; background: var(--sand); transform-origin: 50% 40%; }
.hero__veil { position: absolute; inset: 0; z-index: 4; background: var(--ink); opacity: 0; pointer-events: none; }
.hero__media, .hero__video, .hero__frame, .hero__poster, .hero__poster img, .hero__cloud {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__video, .hero__frame, .hero__poster img { object-fit: cover; }
.hero__poster { transition: opacity .6s, visibility .6s; }
/* L'image d'attente reste tant qu'aucune vraie image de la vidéo n'est dessinée (sinon : écran vide sur iPhone). */
.hero.has-frame .hero__poster { opacity: 0; visibility: hidden; }

/* « Kaleyo » en nuage (WebGL), et son repli en texte si WebGL manque. */
.hero__cloud { z-index: 1; pointer-events: none; transform-origin: 0 100%; will-change: transform; }
.hero__word {
  display: none;
  position: absolute; inset: 0 0 10%; z-index: 1;
  place-content: center;
  font: 700 min(17vw, 15rem)/1 "Quicksand", var(--sans);
  letter-spacing: -.02em;
  color: #fff8ec;
  text-shadow: 0 0 .06em #fff8ec, 0 .1em .28em rgba(77, 60, 51, .28);
}
.hero.no-webgl .hero__word { display: grid; }

/* Textes posés dans le décor. La scène a la taille de la vidéo (1920 × 1080) et se cale sur elle ;
   chaque texte est une pancarte de taille fixe que le script place, image par image, là où le suivi
   de mouvement situe son point d'ancrage (perspective comprise). */
.hero__stage {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--stage, 1));
  pointer-events: none;
}
.hero__sign {
  position: absolute; left: 0; top: 0;
  display: grid; place-content: center; justify-items: center; gap: 26px;
  text-align: center;
  transform-origin: 0 0;
  visibility: hidden;
}
/* Le titre de la page reste dans le code pour les moteurs de recherche et les lecteurs d'écran, mais il
   n'est pas affiché dans le voyage (seulement dans la version fixe, plus bas). */
.hero__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__line { font-weight: 400; line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
.hero__line em {
  display: block;
  font-family: var(--serif); font-style: var(--accent-style); font-weight: var(--accent-weight); font-size: var(--accent-size); letter-spacing: var(--accent-spacing);
}
/* Dans les nuages : un plan en suspension, tourné et incliné, sous lequel la caméra passe. */
.hero__sign--clouds { width: 1500px; height: 400px; color: rgba(4, 24, 28, .9); mix-blend-mode: multiply; }
.hero__sign--clouds .hero__line { font-size: 172px; white-space: nowrap; }
/* Au-dessus de l'île : solidaire d'elle, il grandit à mesure qu'on s'en approche. */
.hero__sign--island { width: 1500px; height: 620px; color: #fff; }
.hero__sign--island .hero__line {
  font-size: 158px;
  /* Une ombre douce et large, à peine perceptible, qui détache le blanc de l'écume et du ciel clair. */
  text-shadow: 0 3px 14px rgba(4, 24, 28, .32), 0 10px 60px rgba(4, 24, 28, .3);
}
/* Sur la plage : couché sur le sable, dont le grain reste visible à travers les lettres. */
.hero__sign--sand { width: 1500px; height: 520px; mix-blend-mode: multiply; }
.hero__sign--sand .hero__line { font-size: 184px; white-space: nowrap; color: rgba(4, 24, 28, .88); }

.hero__cta { position: absolute; left: 50%; bottom: 19vh; z-index: 3; visibility: hidden; }

/* Invitation à défiler : un texte blanc et un chevron, traversés de gauche à droite par un reflet.
   Pendant le chargement de la vidéo, le texte affiche le pourcentage. Un clic lance le voyage. */
.hero__cue {
  position: absolute; inset: auto 0 clamp(1.5rem, 5vh, 3rem); z-index: 3;
  inset: auto 0 calc(clamp(1.5rem, 5svh, 3rem) + 100lvh - 100svh); /* au-dessus de la barre du navigateur, même dépliée */
  display: grid; justify-items: center; gap: .85rem;
  width: max-content; margin-inline: auto; padding: .75rem 1rem;
  font-size: .9375rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .9);
  filter: drop-shadow(0 0 .9rem rgba(4, 24, 28, .6)) drop-shadow(0 1px 1px rgba(4, 24, 28, .35)); /* reste lisible sur les nuages clairs */
}
.hero__cue-text { display: block; padding-left: .26em; /* compense l'interlettrage pour un centrage exact */ }
.hero__cue-chevron { width: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

/* Vidéo prête : le texte s'atténue un peu pour que le reflet, bien blanc, le traverse nettement ;
   le chevron descend en boucle. */
.hero.is-ready .hero__cue-text {
  background: linear-gradient(105deg, rgba(255, 255, 255, .5) 42%, #fff 50%, rgba(255, 255, 255, .5) 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: cue-shine 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.hero.is-ready .hero__cue-chevron { opacity: 1; animation: cue-drop 2.6s var(--ease) infinite; }
@keyframes cue-shine {
  0%, 12% { background-position: 100% 0; }
  78%, 100% { background-position: 0 0; }
}
@keyframes cue-drop {
  0%, 100% { transform: translateY(-.2rem); opacity: .45; }
  50% { transform: translateY(.3rem); opacity: 1; }
}

/* Sans animation, ou si la vidéo n'a pas pu être chargée : image fixe, titre, accroche finale et bouton. */
.hero.is-static { display: grid; place-content: center; justify-items: center; gap: 1.5rem; padding: 6rem var(--pad); background: var(--sand); }
.hero.is-static .hero__scene { display: contents; }
.hero.is-static .hero__veil { display: none; }
.hero.is-static .hero__stage { position: static; width: auto; height: auto; transform: none; display: grid; justify-items: center; gap: 1.5rem; }
.hero.is-static .hero__sign { position: static; width: auto; height: auto; gap: 1.5rem; mix-blend-mode: normal; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.hero.is-static .hero__title { position: static; z-index: 2; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--ink); }
.hero.is-static .hero__sign .hero__line { font-size: clamp(2.5rem, 6.4vw, 6.25rem); white-space: normal; }
.hero.is-static .hero__cta { position: static; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.hero.is-static .hero__cloud, .hero.is-static .hero__frame, .hero.is-static .hero__word, .hero.is-static .hero__cue,
.hero.is-static .hero__sign--clouds, .hero.is-static .hero__sign--island { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__video, .hero__frame { display: none; }
}

/* La suite de la page monte par-dessus le héro encore épinglé, comme une dune qui recouvre le paysage :
   son bord supérieur est un grand arc, plus large que l'écran, qui s'aplatit à mesure qu'il arrive en haut.
   L'arc (--arch) et le chevauchement (--sheet-overlap) sont réglés par site.js ; sans animation, rien ne bouge. */
.sheet { position: relative; z-index: 2; background: var(--bg); } /* pas d'overflow ici : Safari découpait aussi l'arc posé au-dessus */
.has-sheet .sheet { margin-top: calc(-1 * var(--sheet-overlap, 100vh)); }
.sheet::before {
  /* L'arc tient dans la largeur de l'écran : c'est une ellipse plus large que lui, découpée à ses bords
     (avant, une forme débordant de 15 % de chaque côté élargissait la page sur téléphone). */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: var(--arch, 0px);
  background: inherit;
  clip-path: ellipse(65% 100% at 50% 100%);
  pointer-events: none;
}
.sheet > .section:first-child { border-top: 0; } /* le bord de la page suffit : pas de filet sous l'arc */

/* ---------- Sections ---------- */

.section {
  margin-inline: var(--pad);
  padding-block: clamp(5rem, 11vw, 10.5rem);
  border-top: 1px solid var(--line);
}
.section__head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }

.conviction { display: grid; gap: clamp(3rem, 6vw, 5rem); border-top: 0; }
.statement { max-width: 19em; margin-top: 2rem; font-size: clamp(1.75rem, 4.3vw, 4rem); line-height: 1.06; letter-spacing: -.035em; }
.statement [data-cap-line] { display: block; } /* une phrase par ligne */

/* Hublot d'avion (images de Mike Barton, mikes.cv) : trois couches de 600 × 900 superposées. La vitre
   occupe le rectangle ci-dessous, aux coins arrondis à 41,42 % / 31,8 % (valeurs reprises par site.js) ;
   le volet coulisse dans l'ouverture du cadre (fermé à 0, ouvert à -57 %). */
.porthole {
  position: relative; z-index: 1; isolation: isolate;
  width: min(100%, 24rem); aspect-ratio: 2 / 3;
  justify-self: center;
}
.porthole__window {
  position: absolute; left: 19.333%; top: 19.667%; width: 61.167%; height: 53.111%;
  border-radius: 41.42% / 31.8%; overflow: hidden; background: #d9d2c6;
}
.porthole__sky { position: absolute; inset: 0; overflow: hidden; background: #e9e2d4; }
.porthole__sky img { position: absolute; left: 0; top: 0; width: auto; height: 100%; max-width: none; }
.porthole__layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.porthole__shutter { position: absolute; inset: 0; clip-path: inset(14% 12.333% 19.778% 12.167% round 29.333% / 19.556%); pointer-events: none; }
.porthole__shutter img { transform: translateY(-57%); }
.conviction__light { display: none; }

/* La section est épinglée le temps de la lire (sur ordinateur comme sur téléphone). Les nuages couvrent alors toute la section,
   découpés à la forme du hublot : pour y entrer, la découpe s'agrandit jusqu'à remplir l'écran. */
.has-cap .conviction {
  position: relative; overflow: hidden;
  height: 100vh; height: 100lvh; min-height: 32rem;
  margin-inline: 0; padding: clamp(5rem, 11vh, 7.5rem) var(--pad) clamp(1.5rem, 5vh, 3rem);
  padding-bottom: calc(clamp(1.5rem, 5svh, 3rem) + 100lvh - 100svh); /* le contenu reste dans la partie toujours visible */
  align-content: center; row-gap: clamp(1.5rem, 4vh, 3rem);
}
.has-cap .conviction .statement { font-size: clamp(1.75rem, min(4.3vw, 6.6vh), 4rem); }
.has-cap .conviction .porthole { width: min(100%, 26rem, 54vh); }
.has-cap .porthole__window { background: none; }
.has-cap .conviction > .porthole__sky { z-index: 0; inset: 0; border-radius: 0; }
.has-cap .conviction > .porthole__sky img { height: 160%; min-width: 118%; object-fit: cover; object-position: 50% 0; }
.has-cap .conviction__text { position: relative; z-index: 1; }
.has-cap .conviction__light { display: block; position: absolute; inset: 0; z-index: 3; background: var(--bg); opacity: 0; pointer-events: none; }
/* La section suivante monte sur la lumière qui suit l'entrée dans les nuages. */
.has-cap .after-cap { position: relative; z-index: 2; margin-top: -100vh; } /* exactement une hauteur d'écran, recalée par site.js */
/* Téléphone : le texte en haut, le hublot dessous. */
@media (max-width: 899px) {
  /* Le texte en haut ; le hublot au milieu de l'espace restant : autant de place au-dessus qu'en dessous. */
  .has-cap .conviction { grid-template-rows: auto 1fr; align-content: stretch; row-gap: 0; padding-top: clamp(4.5rem, 10svh, 6rem); }
  .has-cap .conviction .porthole { align-self: center; width: min(64vw, 30svh); }
  .has-cap .conviction .statement { margin-top: .8rem; font-size: clamp(1.5rem, min(8.2vw, 4.6svh), 2.6rem); }
}


/* Réalisations : une carte d'embarquement par projet. Les cartes restent collées en haut de l'écran et
   s'empilent ; celle du dessous recule et s'assombrit (site.js). Chacune prend les couleurs et la typographie
   du site qu'elle présente. Le pointillé et les deux encoches séparent le talon (le texte) de l'aperçu. */
.deck { display: grid; gap: clamp(2.5rem, 8vh, 5rem); margin: 0; padding: 0 0 14vh; list-style: none; }
.dest { position: sticky; top: calc(5.5rem + var(--i) * 1.1rem); }
.dest.is-tall { position: relative; top: auto; }
.dest::before { /* l'ombre, hors du masque des encoches */
  content: ""; position: absolute; inset: 0; border-radius: 1.5rem; pointer-events: none;
  box-shadow: 0 2rem 3.5rem -2rem rgba(4, 24, 28, .4);
}
.dest--jumilhac { --card-bg: #e5ddcf; --card-ink: #1c2a20; --card-muted: rgba(28, 42, 32, .76); --card-line: rgba(28, 42, 32, .18); --card-accent: #55683f; --media-bg: #d9d0bf; }
.dest--aba { --card-bg: #364336; --card-ink: #ffffff; --card-muted: rgba(255, 255, 255, .74); --card-line: rgba(255, 255, 255, .17); --card-accent: #cfdac6; --media-bg: #2a352a; }
.dest--maison { --card-bg: #0d1828; --card-ink: #f1ece3; --card-muted: rgba(241, 236, 227, .74); --card-line: rgba(241, 236, 227, .16); --card-accent: #c9a96b; --media-bg: #111f33; }
.dest--sac { --card-bg: #e7e7e7; --card-ink: #0c0c0c; --card-muted: rgba(12, 12, 12, .72); --card-line: rgba(12, 12, 12, .16); --card-accent: #7a2a33; --media-bg: #dedede; }
.dest__card {
  --cut: 38%; --notch: .95rem;
  position: relative; display: grid; grid-template-columns: var(--cut) 1fr;
  min-height: min(76vh, 44rem); overflow: hidden;
  border-radius: 1.5rem; background: var(--card-bg); color: var(--card-ink);
  transform-origin: 50% 0;
  -webkit-mask: radial-gradient(circle at var(--cut) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
}
.dest__card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #04181c; opacity: var(--dim, 0); pointer-events: none; }
/* Écran d'ordinateur peu haut (portable) : le paragraphe de description passe, comme sur téléphone, pour que
   les cartes tiennent à l'écran et continuent de s'empiler. */
@media (min-width: 900px) and (max-height: 820px) { .dest__text { display: none; } }
/* Carte déchirée au clic (site.js) : le talon est une copie posée sur l'original, le rideau couvre ensuite l'écran. */
.dest__stub { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dest.is-tearing::before { opacity: 0; }
.dest.is-tearing .dest__cursor { opacity: 0; }
.tear-veil { position: fixed; inset: 0; z-index: 400; pointer-events: none; }

.dest__info { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.75rem); }
.dest__route { display: flex; align-items: center; gap: .9rem; margin-bottom: clamp(.5rem, 3vh, 2rem); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--card-muted); }
.dest__path { position: relative; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--card-line) 0 5px, transparent 5px 10px); }
.dest__path svg { position: absolute; left: 50%; top: 50%; width: 1rem; translate: -50% -50%; rotate: 90deg; fill: var(--card-accent); }
.dest__title { font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 400; line-height: .95; letter-spacing: -.02em; }
.dest--jumilhac .dest__title { font-family: "Cormorant Garamond", var(--serif); font-weight: 500; letter-spacing: -.01em; }
/* ABA : les capitales élargies d'Archivo, « ABA » en très gras et « Architecture » en maigre, comme sur son site. */
.dest--aba .dest__title { font-family: "Archivo", var(--sans); font-stretch: 125%; font-weight: 300; font-size: clamp(1.45rem, 2.35vw, 2.25rem); line-height: .92; letter-spacing: -.015em; text-transform: uppercase; }
.dest--aba .dest__title span { display: block; font-weight: 800; font-size: 1.45em; }
.dest--maison .dest__title { font-family: "Libre Baskerville", var(--serif); font-size: clamp(2rem, 3.8vw, 3.6rem); letter-spacing: -.03em; }
.dest--sac .dest__title { font-family: "Jost", var(--sans); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3.2rem); text-transform: uppercase; letter-spacing: .02em; }
.dest__tagline { font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -.02em; line-height: 1.2; }
.dest__tagline em { font-family: var(--serif); font-style: var(--accent-style); color: var(--card-accent); }
.dest--maison .dest__tagline em { color: var(--card-accent); }
.dest__text { max-width: 32rem; font-size: 1.0625rem; color: var(--card-muted); text-wrap: pretty; }
.dest__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: .4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--card-line); }
.dest__facts dt { margin-bottom: .2rem; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--card-muted); }
.dest__facts dd { margin: 0; font-size: .9375rem; line-height: 1.35; }
.dest__link { justify-self: start; display: inline-flex; gap: .5rem; align-items: center; margin-top: .6rem; padding: .85rem 1.3rem; border-radius: 99rem; background: var(--card-ink); color: var(--card-bg); font-size: .875rem; font-weight: 500; transition: transform .5s var(--ease); }
.dest__link:hover { transform: translateY(-2px); }
.dest__link .arrow { transition: transform .5s var(--ease); }
.dest__link:hover .arrow { transform: translateX(.25em); }

/* L'aperçu : le site lui-même, qui tourne dans une fenêtre de navigateur. */
.dest__media { position: relative; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 3rem); background: var(--media-bg); cursor: none; }
.dest__media::before { /* le pointillé du talon */
  content: ""; position: absolute; left: 0; top: calc(var(--notch) + .6rem); bottom: calc(var(--notch) + .6rem); width: 2px;
  background: repeating-linear-gradient(var(--card-line) 0 7px, transparent 7px 14px);
}
.browser { display: block; width: 100%; overflow: hidden; border-radius: .9rem; background: #fff; box-shadow: 0 1.75rem 3rem -1.25rem rgba(4, 24, 28, .45), 0 0 0 1px rgba(4, 24, 28, .06); transition: transform 1.2s var(--ease); }
.dest__media:hover .browser { transform: translateY(-.35rem) scale(1.012); }
.browser__bar { display: flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .9rem; background: #f4f2ee; border-bottom: 1px solid rgba(4, 24, 28, .07); }
.browser__bar i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(4, 24, 28, .14); }
.browser__bar span { flex: 1; margin-right: 2.5rem; text-align: center; font-size: .6875rem; color: rgba(4, 24, 28, .66); }
.browser video { display: block; width: 100%; height: auto; object-fit: cover; background: var(--media-bg); }
.dest__cursor { /* suit la souris sur l'aperçu (site.js) */
  position: absolute; left: 0; top: 0; z-index: 2; padding: .7rem 1.1rem; border-radius: 99rem;
  background: var(--card-ink); color: var(--card-bg); font-size: .8125rem; font-weight: 500; white-space: nowrap;
  translate: calc(var(--x, 50%) - 50%) calc(var(--y, 50%) - 50%); scale: .6; opacity: 0;
  transition: opacity .3s, scale .4s var(--ease); pointer-events: none;
}
.dest__media:hover .dest__cursor { opacity: 1; scale: 1; }
@media (hover: none) { .dest__media { cursor: pointer; } .dest__cursor { display: none; } }

@media (max-width: 899px) {
  .dest { top: calc(4.5rem + var(--i) * .8rem); }
  .dest__card { grid-template-columns: 1fr; min-height: 0; -webkit-mask: none; mask: none; }
  .dest__media { order: -1; padding: 1.1rem; }
  .dest__media::before { left: 1.1rem; right: 1.1rem; top: auto; bottom: 0; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--card-line) 0 7px, transparent 7px 14px); }
  .dest__info { gap: .9rem; }
  .dest__route { margin-bottom: 0; }
  .dest__text { display: none; }
}
@media (max-height: 640px) { .dest { position: relative; top: auto; } }
/* Téléphone : plus d'empilement. Les cartes sont posées l'une sous l'autre et se découvrent en défilant. */
@media (max-width: 899px) {
  .deck { gap: 1.5rem; padding-bottom: 4vh; }
  .dest, .dest.is-tall { position: relative; top: auto; }
  .dest__info { padding: 1.4rem 1.35rem 1.6rem; gap: .85rem; }
  .dest__facts { gap: .8rem 1rem; padding-top: .9rem; }
  .dest__facts dd { font-size: .875rem; }
}

/* Visibilité : une seule grande phrase. Avec site.js, la section reste à l'écran pendant le défilement et le
   dernier mot change (Google, puis Instagram, puis Facebook), le service correspondant en petit dessous ;
   enfin la réponse remplace la question. Sans animation, tout s'affiche à la suite. */
.visi {
  position: relative; display: grid; place-content: center; justify-items: center; gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(6rem, 14vh, 9rem) var(--pad); text-align: center;
  border-top: 1px solid var(--line);
}
.visi__eyebrow { color: var(--muted); }
.visi__lead { font-size: clamp(1.35rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.visi__places { display: grid; gap: 1.5rem; margin: .4em 0 0; padding: 0; list-style: none; }
.visi__place { display: grid; justify-items: center; gap: .9rem; }
/* La fenêtre où les mots défilent ; elle porte la taille du mot pour laisser la place à ses jambages (g, p). */
.visi__mask { display: block; overflow: hidden; padding: .02em .12em .24em; margin-bottom: -.14em; font-size: clamp(3.6rem, 18.5vw, 12.5rem); }
.visi__word {
  display: block;
  font-family: var(--serif); font-style: var(--accent-style); font-weight: var(--accent-weight);
  font-size: 1em; line-height: .95; letter-spacing: -.04em;
}
/* Chaque mot dans une police proche de celle de son logo (polices libres, les officielles ne le sont pas). */
.visi__place--google .visi__word { font-family: "Poppins", var(--sans); font-style: normal; font-weight: 500; letter-spacing: -.045em; }
.visi__place--instagram .visi__word { font-family: "Cookie", var(--serif); font-style: normal; font-weight: 400; font-size: 1.3em; letter-spacing: 0; }
.visi__place--instagram .visi__mask { padding-bottom: .36em; } /* le g d'Instagram descend plus bas */
.visi__place--facebook .visi__word { font-family: "Rubik", var(--sans); font-style: normal; font-weight: 700; letter-spacing: -.05em; }
.visi__service { max-width: 34rem; font-size: .8125rem; font-weight: 500; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: var(--muted); }
.visi__service::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background: var(--c); vertical-align: .05em; }
.visi__answer { display: grid; justify-items: center; gap: 2.25rem; }
.visi__final { font-size: clamp(2.6rem, 8vw, 7rem); letter-spacing: -.045em; line-height: .98; }
.visi__final em { font-family: var(--serif); font-style: var(--accent-style); font-weight: var(--accent-weight); }

/* Animée : la section occupe l'écran ; les trois mots se superposent à la même place, la réponse aussi. */
.has-visi .visi { height: 100vh; height: 100lvh; min-height: 34rem; padding-block: 0; padding-bottom: calc(100lvh - 100svh); overflow: hidden; }
.has-visi .visi__eyebrow { position: absolute; top: clamp(6rem, 15vh, 9rem); left: 0; right: 0; }
.has-visi .visi__ask, .has-visi .visi__answer { grid-area: 1 / 1; }
.has-visi .visi__places { display: grid; }
.has-visi .visi__place { grid-area: 1 / 1; }
/* Repère : un trait par réseau, qui se remplit au défilement, avec son nom ; un clic amène à ce mot. */
.visi__steps { display: none; }
.has-visi .visi__steps { display: flex; justify-content: center; gap: clamp(.75rem, 2vw, 1.25rem); margin-top: clamp(1.75rem, 5vh, 3rem); }
.visi__step {
  position: relative; width: clamp(5.75rem, 14vw, 6.5rem); padding: 1.1rem 0 .25rem; border: 0; background: none; cursor: pointer;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s;
}
.visi__step::before, .visi__fill { content: ""; position: absolute; left: 0; right: 0; top: .35rem; height: 3px; border-radius: 3px; }
.visi__step::before { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.visi__fill { background: var(--c); transform: scaleX(0); transform-origin: left; }
.visi__step:hover, .visi__step.is-current { color: var(--c); }

/* FAQ : des lignes fines, sans fond ni changement de couleur. Les lignes se tracent de gauche à droite à
   l'arrivée (site.js) ; au survol la question glisse un peu ; à l'ouverture le + tourne en ×, la réponse se déplie
   (site.js anime la hauteur) et son texte monte en fondu. Sans JavaScript, les <details> fonctionnent seuls. */
.faq__item { position: relative; overflow: hidden; }
.faq__item::before, .faq__item:last-child::after { /* les lignes */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform-origin: left; transition: transform 1.4s var(--ease) var(--d, 0s);
}
.faq__item:last-child::after { top: auto; bottom: 0; }
.faq.is-drawing .faq__item::before, .faq.is-drawing .faq__item:last-child::after { transform: scaleX(0); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.6rem;
  font-size: clamp(1.2rem, 1.75vw, 1.5rem); letter-spacing: -.025em; line-height: 1.25;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { transition: translate .6s var(--ease); }
.faq__toggle { /* un + fin, qui tourne en × */
  position: relative; flex: none; width: 1rem; height: 1rem;
  transition: transform .6s var(--ease);
}
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor;
}
.faq__toggle::after { rotate: 90deg; }
@media (hover: hover) {
  .faq__item summary:hover .faq__q { translate: .5rem 0; }
  .faq__item summary:hover .faq__toggle { transform: rotate(90deg); }
}
.faq__item[open]:not(.is-closing) .faq__toggle { transform: rotate(135deg); }
.faq__a p {
  max-width: 42rem; padding-bottom: 1.9rem; font-size: clamp(1.125rem, 1.3vw, 1.25rem); line-height: 1.6;
  color: var(--muted); text-wrap: pretty;
  opacity: 0; translate: 0 .75rem; transition: opacity .45s, translate .6s var(--ease);
}
.faq__item[open]:not(.is-closing) .faq__a p { opacity: 1; translate: 0 0; transition-delay: .12s; }

@media (min-width: 900px) {
  .section__head { grid-template-columns: 1fr minmax(0, 26rem); align-items: end; }
  .section__head .eyebrow { grid-column: 1 / -1; }

  .conviction { grid-template-columns: 7fr 4fr; align-items: center; }
  .conviction .porthole { justify-self: end; }

  .split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .split .section__head { position: sticky; top: 7rem; grid-template-columns: 1fr; margin-bottom: 0; }
}

/* ---------- Pied de page : retour dans les nuages ---------- */

.footer {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100vh; min-height: 100svh;
  padding: 0 var(--pad);
  background: var(--bg) url("../img/hero-desktop-first.avif?v=49e63efa") center bottom / cover no-repeat;
}
.footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 2%, rgba(243, 237, 228, .5) 30%, rgba(243, 237, 228, 0) 62%); }
.footer > * { position: relative; }
.footer__cta { display: grid; gap: 1.75rem; padding-block: clamp(5.5rem, 11vw, 10rem) clamp(4rem, 9vw, 8rem); }
.footer__cta h2 { max-width: 12ch; font-size: clamp(2.9rem, 8.4vw, 8rem); line-height: .92; }
.footer__cta h2 em { display: block; }
.footer__cta .lede { /* posé sur les nuages : plus grand, un peu plus gras, et un halo crème derrière les lettres */
  max-width: 34rem; color: var(--ink); font-size: clamp(1.1875rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.5;
  text-shadow: 0 0 .25rem rgba(243, 237, 228, .95), 0 0 1rem rgba(243, 237, 228, .9), 0 0 2.2rem rgba(243, 237, 228, .8);
}
.footer__base { text-shadow: 0 0 .3rem rgba(243, 237, 228, .9), 0 0 1rem rgba(243, 237, 228, .8); }
.footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 1rem; font-size: 1rem; font-weight: 500; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(4, 24, 28, .2);
  font-size: .8125rem; font-weight: 500;
}
.footer__base nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__base a { transition: opacity .3s; }
.footer__base a:hover { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Préchargeur « Embarquement » (site.js). --p va de 0 à 1 avec le chargement réel : le trait se remplit, le compteur
   avance. Prêt, le contenu s'efface puis l'écran se soulève, son bord arrondi comme la page qui recouvre le héro.
   Sécurité : si le script ne répond plus, il disparaît seul. */
.loader { display: none; }
html.has-loader .loader {
  --p: 0;
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--bg); color: var(--ink);
  border-radius: 0 0 50% 50% / 0 0 0 0;
  animation: loader-safety .6s 14s forwards;
}
.loader__inner { display: grid; justify-items: center; gap: 1.6rem; width: min(19rem, 80vw); animation: loader-in 1s var(--ease) backwards; }
.loader__title { font-size: clamp(2.3rem, 7vw, 3.4rem); letter-spacing: -.045em; line-height: 1; text-align: center; text-wrap: balance; }
.loader__title em { font-family: var(--serif); font-style: var(--accent-style); font-weight: var(--accent-weight); }
.loader__meta {
  display: flex; justify-content: space-between; width: 100%;
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.loader__count { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.loader__bar { position: relative; width: 100%; height: 2px; margin-top: -.85rem; border-radius: 2px; overflow: hidden; background: var(--line); }
.loader__bar span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p)); transform-origin: left; }

/* Départ : le contenu monte et s'efface, puis l'écran se soulève. */
html.has-loader .loader.is-leaving { pointer-events: none; transform: translateY(-105%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh;
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1) .3s, border-radius 1.15s cubic-bezier(.76, 0, .24, 1) .3s; }
html.has-loader .loader.is-leaving .loader__inner { opacity: 0; translate: 0 -1.5rem; transition: opacity .45s, translate .6s var(--ease); }

@keyframes loader-in { from { opacity: 0; translate: 0 1rem; } }
@keyframes loader-safety { to { opacity: 0; visibility: hidden; } }