/* Page d’accueil (FR / et EN /en/) : ce qui lui est propre. Le reste (teintes, barre, menu en coupe, visionneuse) est dans commun.css.
   Composition : une descente verticale, de la canopée (+40 m) au fond (−40 m). */
:root{
  --t-hero:clamp(4.2rem,11.5vw,11.5rem);
}

/* Ouverture ----------------------------------------------------------------------- */
.hero{position:relative;height:clamp(580px,92vh,980px);background:var(--ciel);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:38% 46%}
.hero__text{position:absolute;left:55%;right:var(--side-r);bottom:clamp(40px,8vh,96px)}
.hero__name{font:300 var(--t-hero)/.84 var(--display);letter-spacing:-.02em}
.hero__name .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero__name .line>span{display:block}
.hero__lede{margin-top:clamp(20px,2.4vw,34px);font-size:clamp(1rem,.3vw + .95rem,1.125rem);line-height:1.65;max-width:31ch;font-weight:400}
.hero__caption{position:absolute;left:var(--side-l);bottom:clamp(40px,8vh,96px);color:#fff;--note:rgba(255,255,255,.86)}
.hero__cue{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none;opacity:.85}
.hero__cue svg{width:12px;height:22px}
@media (prefers-reduced-motion:no-preference){
  .hero__cue svg{animation:cue 2.6s var(--ease-in-out) infinite}
}
@keyframes cue{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* Canopée ------------------------------------------------------------------------------ */
.canopee .grid{row-gap:clamp(56px,7vw,112px);align-items:end}
.canopee .statement{grid-column:1/6;align-self:center}
.canopee__main{grid-column:7/13}
.canopee__pair{grid-column:3/13}

/* Sous-bois : récit épinglé ---------------------------------------------------------- */
.sousbois .story{grid-column:1/6;position:sticky;top:calc(var(--bar-h) + 7vh);align-self:start}
.sousbois .story .body{margin-top:clamp(26px,2.8vw,40px)}
.sousbois .pics{grid-column:7/13;display:flex;flex-direction:column;gap:clamp(56px,7vw,104px)}
.sousbois .pics figure:nth-child(2){width:70%}
.sousbois .pics figure:nth-child(3){width:70%;align-self:flex-end}

/* Sol : le film -------------------------------------------------------------------------- */
.film__title{font-size:clamp(2.9rem,8.2vw,8rem);line-height:.92}
.film__body{margin-top:clamp(48px,6vw,88px);align-items:end;row-gap:40px}
.film__still{grid-column:1/9}
.film__text{grid-column:9/13;padding-bottom:2.6em}
.film .status{margin-top:1.5em;font-size:var(--t-small);line-height:1.6}
.film .status b{font-weight:600}
.film__nuit{margin-top:clamp(56px,7vw,104px)}

/* Rivière : expéditions --------------------------------------------------------------------- */
.riviere__text{margin-top:clamp(64px,8vw,120px);row-gap:28px}
.riviere .h2{grid-column:1/7}
.riviere__text .body{grid-column:7/12;padding-top:.6em}

/* Repère du Pérou : ouvre la carte « Jusqu’à El Chino » (commun/carte.js) */
.repere{display:inline-flex;align-items:center;gap:20px;margin-top:clamp(30px,3.2vw,44px);text-decoration:none;color:inherit}
.repere img{width:58px;height:auto;flex:none;transition:transform 700ms var(--ease-out)}
.repere__coord{display:block;color:var(--note);font-variant-numeric:tabular-nums;letter-spacing:.16em}
.repere__txt{display:inline;margin-top:8px;font:400 1.375rem/1.25 var(--display);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 420ms var(--ease-out)}
.repere__coord+.repere__txt{display:inline-block}
@media (hover:hover) and (pointer:fine){
  .repere:hover img{transform:scale(1.06) rotate(-2deg)}
  .repere:hover .repere__txt{background-size:100% 1px}
}
.sousbois .story .repere+.actions{margin-top:22px}
.compte{margin-left:.9em;padding-left:.9em;border-left:1px solid currentColor;font-variant-numeric:tabular-nums;opacity:.65}
.suite-galerie{margin:clamp(40px,5vw,72px) 0 0}

/* Plongée : la surface ------------------------------------------------------------------------ */
.plongee{position:relative;background:var(--recif);color:#fff}
.plongee__stage{position:relative}
.plongee__photo{position:relative;aspect-ratio:3/2;overflow:hidden}
.plongee__img{width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.plongee__crue{position:absolute;left:var(--side-l);top:clamp(96px,16vh,180px);max-width:20ch;font:400 var(--t-statement)/1.18 var(--display)}
.plongee__eau{position:relative;background:var(--recif);padding:clamp(64px,10vw,140px) var(--side-r) clamp(64px,10vw,140px) var(--side-l)}
.vague{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(18px,2.4vw,34px);overflow:hidden;pointer-events:none}
.vague svg{display:block;width:200%;height:100%;fill:var(--recif)}
.plongee__texte{font:300 clamp(2.4rem,5.4vw,5.2rem)/1 var(--display);max-width:21ch;letter-spacing:-.01em}
.bulles{display:none}

.plongee.is-live{height:310vh}
.plongee.is-live .plongee__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.plongee.is-live .plongee__photo{position:absolute;inset:0;aspect-ratio:auto}
.plongee.is-live .plongee__eau{position:absolute;inset:0;display:flex;align-items:center;transform:translateY(calc(100% + 40px));will-change:transform}
.plongee.is-live .plongee__texte{opacity:0}
.plongee.is-live .bulles{display:block;position:absolute;inset:0;pointer-events:none}
.bulles i{position:absolute;left:var(--x);bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;border:1.25px solid rgba(232,238,233,.7);opacity:0}
.plongee.is-active .vague svg{animation:houle 7s linear infinite}
@keyframes houle{to{transform:translateX(-50%)}}

/* Récif ------------------------------------------------------------------------------------- */
.plongee.is-live+.recif{padding-top:clamp(16px,3vw,48px)}
.recif .head{row-gap:24px;align-items:end;margin-bottom:clamp(56px,7vw,104px)}
.recif .h2{grid-column:1/7}
.recif .head .body{grid-column:7/12}

/* Grand bleu : séances ------------------------------------------------------------------------- */
.seances .grid{row-gap:56px;align-items:start}
.seances .fig-descente{grid-column:1/6}
.seances .offre{grid-column:7/13;padding-top:clamp(0px,4vw,64px)}
.seances .offre .body{margin-top:clamp(26px,2.8vw,40px)}
.formats{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;gap:2px;max-width:34em}
.formats li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 20px;background:color-mix(in oklab,var(--pale) 6%,transparent)}
.formats b{font:400 1.375rem/1.2 var(--display)}
.formats span{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--note)}
.contact-line{margin-top:20px}
.seances .just{margin-top:clamp(64px,8vw,120px)}

/* Fond : à propos -------------------------------------------------------------------------------- */
.fond{padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
.fond .grid{row-gap:48px}
.fond .apropos{grid-column:1/7}
.fond .apropos .body{margin-top:clamp(26px,2.8vw,40px)}
.fond .liens{grid-column:8/13;align-self:end;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.fond .liens .label{display:block;color:var(--note);margin-bottom:6px}
.fond .liens a{font:400 1.5rem/1.2 var(--display);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 420ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.fond .liens a:hover{background-size:100% 1px}}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:clamp(80px,10vw,150px)}

/* Écrire : fenêtre de contact. Sans JavaScript, simple section en bas de page ; avec, un calque qui monte comme le menu. */
.message{background:var(--abysse);color:var(--pale);--note:color-mix(in oklab,var(--pale) 70%,transparent);padding-block:var(--section)}
.message__haut{display:none}
.message__corps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:48px;align-items:start}
.message__intro{grid-column:1/6}
.message__titre{font:300 clamp(2.4rem,4.6vw,4.4rem)/.98 var(--display);letter-spacing:-.012em}
.message__titre em{font-weight:300}
.message__texte{margin-top:26px;max-width:28em;color:var(--note)}
.message__form{grid-column:7/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px var(--gutter);padding-top:.6em}
.message__merci{grid-column:1/8}
.message.is-sent .message__intro{display:none}
.message .champ{display:grid;gap:10px;min-width:0}
.message .champ .label{color:var(--note)}
.message__long{grid-column:1/-1}
.message input:not([type=hidden]),.message textarea{width:100%;margin:0;padding:10px 0 12px;border:0;border-bottom:1px solid color-mix(in oklab,var(--pale) 34%,transparent);border-radius:0;background:transparent;color:inherit;font:400 1.0625rem/1.5 var(--text);-webkit-appearance:none;appearance:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.message textarea{min-height:7.5em;resize:vertical}
.message input:focus-visible,.message textarea:focus-visible{outline:none;border-bottom-color:var(--ouakari);box-shadow:0 1px 0 var(--ouakari)}
.message input:-webkit-autofill{-webkit-text-fill-color:var(--pale);box-shadow:0 0 0 40px var(--abysse) inset}
.message__statut:empty{display:none}
.message__statut{grid-column:1/-1;margin:0;padding:14px 16px;background:color-mix(in oklab,var(--ouakari) 18%,transparent);font-size:var(--t-small)}
.message__statut a{font-weight:600}
.message__envoi{grid-column:1/-1}
.message__merci:focus{outline:none}
.message [hidden]{display:none!important}

.js .message{position:fixed;inset:0;z-index:65;padding:0;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 700ms var(--ease-water),visibility 0s linear 700ms}
.js .message.is-open{visibility:visible;clip-path:inset(0);transition:clip-path 700ms var(--ease-water),visibility 0s}
.js .message__haut{display:flex;position:sticky;top:0;z-index:1;align-items:center;justify-content:space-between;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--side-r) 0 var(--side-l);background:var(--abysse)}
.js .message__haut .label{color:var(--note)}
.message__fermer{background:none;border:0;padding:12px 0 12px 12px;cursor:pointer;color:var(--pale)}
.js .message__corps{min-height:calc(100% - var(--bar-h));align-content:center;padding-block:clamp(40px,8vh,96px)}
@media (prefers-reduced-motion:no-preference){
  .js .message.is-open .message__intro,.js .message.is-open .message__form{animation:rise 800ms var(--ease-out) both}
  .js .message.is-open .message__form{animation-delay:120ms}
}
@media (prefers-reduced-motion:reduce){
  .js .message,.js .message.is-open{clip-path:none;transition:opacity 200ms ease,visibility 0s linear 200ms;opacity:0}
  .js .message.is-open{opacity:1;transition:opacity 200ms ease}
}
.pot{position:absolute;left:-9999px}

/* Mouvement ---------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero__media{animation:emerge 1500ms var(--ease-water) both}
  .js .hero__img{animation:settle 2200ms var(--ease-soft) both}
  .js .hero__name .line>span{transform:translateY(108%);animation:line-up 1000ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 120ms + 900ms)}
  .js .hero [data-rise]{opacity:0;transform:translateY(14px);animation:rise 900ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 100ms + 1150ms)}
  .js .bar{animation:fade 800ms ease 600ms both}
}
@keyframes emerge{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.1)}to{transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero__media{animation:emerge 1500ms var(--ease-water) both}
    .hero__text{animation:float-up linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes float-up{to{transform:translateY(-18vh);opacity:.2}}
  }
}

/* Téléphone ------------------------------------------------------------------------------------------------- */
@media (max-width:760px){

  .hero{height:auto;overflow:visible}
  .hero__media{position:relative;aspect-ratio:4/5}
  .hero__img{object-position:36% 50%}
  .hero__text{position:static;padding:30px var(--side-r) 0 var(--side-l)}
  .hero__name{font-size:clamp(3.6rem,19vw,5.6rem)}
  .hero__caption{position:static;padding:28px var(--side-r) 40px var(--side-l)}
  .hero__cue{display:none}

  .canopee .statement{margin-bottom:8px}
  .sousbois .story{position:static}
  .sousbois .pics{margin-top:56px;gap:44px}
  .sousbois .pics figure:nth-child(2),.sousbois .pics figure:nth-child(3){width:86%}
  .film__text{padding-bottom:0}
  .message__intro,.message__form{grid-column:1/-1}
  .message__form{grid-template-columns:minmax(0,1fr)}

  .plongee.is-live{height:250vh}
  .plongee__crue{top:auto;bottom:62%;max-width:15ch}
  .plongee:not(.is-live) .plongee__crue{position:static;padding:40px var(--side-r) 0 var(--side-l);color:var(--pale)}
}