/* Galeries (Amazonie, Sous l’eau) : pages fabriquées par outils/galeries.py.
   Même logique que l’accueil : chaque chapitre est une strate (altitude dans la forêt, profondeur sous l’eau),
   le profondimètre suit le défilement, les photos gardent leur format et s’ouvrent dans la visionneuse. */

/* Ouverture --------------------------------------------------------------------------------------- */
.g-tete{padding-top:calc(var(--bar-h) + clamp(56px,8vw,128px))}
.g-tete .grid{row-gap:40px;align-items:end}
.g-tete__titre{grid-column:1/8}
.g-tete__titre .label{color:var(--note)}
.g-tete h1{margin-top:20px;font:300 clamp(3.4rem,8.4vw,8.4rem)/.9 var(--display);letter-spacing:-.02em}
.g-tete h1 em{font-weight:300}
.g-tete h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.g-tete h1 .line>span{display:block}
.g-tete__texte{grid-column:8/13;padding-bottom:.8em}
.g-tete__texte .note{margin-top:18px}
.g-tete__texte .actions{margin-top:24px}

/* Sommaire en strates, comme une coupe */
.g-sommaire{grid-column:1/-1;list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--trait)}
.g-sommaire a{display:grid;grid-template-columns:5.5rem 11rem minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--trait);text-decoration:none;transition:padding 420ms var(--ease-out)}
.g-sommaire__prof{font:600 .9375rem/1 var(--text);font-variant-numeric:tabular-nums}
.g-sommaire__prof::before{content:"";display:inline-block;width:10px;height:10px;margin-right:12px;vertical-align:-1px;background:var(--c);box-shadow:0 0 0 1px color-mix(in oklab,currentColor 22%,transparent)}
.g-sommaire .label{color:var(--note)}
.g-sommaire__titre{font:300 clamp(1.5rem,2.4vw,2.2rem)/1.1 var(--display)}
.g-sommaire__n{font-size:var(--t-small);color:var(--note);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.g-sommaire a:hover{padding-left:14px}}

/* Chapitres ------------------------------------------------------------------------------------------- */
.g-chap__tete{row-gap:22px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.g-chap__prof{grid-column:1/4;display:flex;flex-direction:column;gap:10px}
.g-chap__prof b{font:600 clamp(1.5rem,2.2vw,2rem)/1 var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.g-chap__prof .label{color:var(--note)}
.g-chap__tete .h2{grid-column:4/10}
.g-chap__tete .body{grid-column:10/13;padding-bottom:.5em}
.g-chap .just figure figcaption,.g-solo figcaption{min-height:1.5em}

/* Image seule, décalée d’un côté, pour donner du rythme entre les rangées */
.g-solo{margin-block:clamp(56px,7vw,112px)}
.g-solo figure{width:min(100%,var(--l,64%))}
.g-solo.droite figure{margin-left:auto}
.g-solo.centre figure{margin-inline:auto}
.just+.g-solo,.g-solo+.just{margin-top:clamp(56px,7vw,112px)}

/* Suite : galerie suivante et retour ------------------------------------------------------------------- */
.g-suite .grid{row-gap:40px;align-items:center}
.g-suite__lien{grid-column:1/8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,3vw,48px);align-items:center;text-decoration:none}
.g-suite__lien img{width:100%;height:auto;transition:transform 900ms var(--ease-out)}
.g-suite__lien .label{color:var(--note)}
.g-suite__lien b{display:block;margin-top:14px;font:300 clamp(2.2rem,4.4vw,4rem)/1 var(--display)}
.g-suite__lien b em{font-weight:300}
.g-suite__cadre{overflow:hidden}
@media (hover:hover) and (pointer:fine){.g-suite__lien:hover img{transform:scale(1.04)}}
.g-suite__autres{grid-column:9/13;list-style:none;margin:0;padding:0;display:grid;gap:18px}

/* Mouvement ---------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js .g-tete h1 .line>span{transform:translateY(108%);animation:line-up 1000ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 120ms + 300ms)}
  .js .g-tete [data-rise]{opacity:0;transform:translateY(14px);animation:rise 900ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 90ms + 600ms)}
}

/* Écrans moyens ------------------------------------------------------------------------------------------- */
@media (max-width:1100px){
  .g-chap__prof{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:16px}
  .g-chap__tete .h2{grid-column:1/8}
  .g-chap__tete .body{grid-column:8/13}
  .g-sommaire a{grid-template-columns:5rem 9rem minmax(0,1fr) auto}
}

/* Téléphone ----------------------------------------------------------------------------------------------- */
@media (max-width:760px){
  .g-tete{padding-top:calc(var(--bar-h) + 48px)}
  .g-tete h1{font-size:clamp(3rem,15vw,4.6rem)}
  .g-sommaire a{grid-template-columns:4.4rem minmax(0,1fr) auto;row-gap:4px;padding:16px 0}
  .g-sommaire .label{grid-column:2;grid-row:1}
  .g-sommaire__titre{grid-column:2;grid-row:2;font-size:1.45rem}
  .g-sommaire__prof{grid-row:1/3}
  .g-sommaire__n{grid-row:1/3;grid-column:3}
  .g-sommaire__prof::before{display:block;margin:0 0 8px}
  .g-solo figure{width:100%}
  .g-suite__lien{grid-template-columns:minmax(0,1fr)}
}
.g-appel{margin-top:clamp(56px,7vw,96px)}

/* Séquence : plusieurs images d’un même instant, lues dans l’ordre */
.g-scene{margin-block:clamp(56px,7vw,112px);padding-top:22px;border-top:1px solid var(--trait)}
.g-scene__titre{display:flex;align-items:baseline;gap:18px;margin:0 0 clamp(22px,2.4vw,34px)}
.g-scene__titre .label{color:var(--note)}
.g-scene__titre span:last-child{font:300 clamp(1.7rem,2.6vw,2.4rem)/1.1 var(--display);font-style:italic}
.g-scene+.just,.just+.g-scene{margin-top:clamp(56px,7vw,112px)}

/* Récit : une scène racontée image par image (commun/recit.js) ----------------------------------------
   Sans animation : titre, phrases et images à la suite. Animé : la photo reste à l’écran, le texte défile. */
.recit{padding-block:var(--section)}
.recit__tete{max-width:34em}
.recit__tete .label{color:var(--note)}
.recit__tete h3{margin-top:18px;font:300 clamp(2.6rem,5.4vw,5rem)/.95 var(--display);letter-spacing:-.012em}
.recit__tete h3 em{font-weight:300}
.recit__tete .note{margin-top:18px}
.recit__temps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:22px;max-width:40em}
.recit__pas p{font:400 clamp(1.35rem,1.9vw,1.8rem)/1.3 var(--display)}
.recit__fin p{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.1}
.recit__cadre{display:grid;gap:clamp(28px,3vw,44px);max-width:1100px;margin-top:48px}
.recit__h{font-family:var(--text);font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.recit:not(.is-anime) .recit__scene{padding-inline:var(--side-l) var(--side-r)}
.recit:not(.is-anime){display:flex;flex-direction:column-reverse}
.recit__heure:empty{display:none}

.recit.is-anime{display:block;padding:0}
.recit.is-anime .recit__scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.recit.is-anime .recit__cadre{position:absolute;margin:0;max-width:none;left:38%;right:var(--side-r);top:calc(var(--bar-h) + 5vh);bottom:13vh;display:block}
.recit.is-anime .recit__img{position:absolute;inset:0;opacity:0;transition:opacity 160ms linear;pointer-events:none}
.recit.is-anime .recit__img.is-on{opacity:1;pointer-events:auto}
.recit.is-anime .recit__img figure{height:100%}
.recit.is-anime .recit__img .photo{height:100%}
.recit.is-anime .recit__img img{width:100%;height:100%;object-fit:contain;object-position:center}
.recit.is-anime .recit__img figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.recit.is-anime .recit__heure{position:absolute;right:var(--side-r);bottom:4.5vh;margin:0;font:600 clamp(1.1rem,1.6vw,1.5rem)/1 var(--text);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--pale)}
.recit.is-anime .recit__heure::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.7em;border-radius:50%;background:var(--ouakari);vertical-align:.08em}
.recit.is-anime .recit__texte{position:relative;margin-top:-100vh;margin-top:-100svh;padding-bottom:30vh;pointer-events:none}
.recit.is-anime .recit__tete{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;width:min(30em,32vw);max-width:none}
.recit.is-anime .recit__temps{margin:0;display:block;max-width:none}
.recit.is-anime .recit__pas{min-height:72vh;display:flex;align-items:center}
.recit.is-anime .recit__pas p{width:min(22em,30vw)}
.recit.is-anime .recit__fin{min-height:90vh}

@media (max-width:760px){
  /* téléphone : l’image occupe le haut de l’écran, sur un fond opaque ; le texte défile en dessous et passe sous l’image */
  .recit{--rh:66.7vw}
  .recit.is-anime .recit__scene{z-index:2;pointer-events:none;background:linear-gradient(var(--humus) calc(var(--bar-h) + var(--rh) + 56px),transparent calc(var(--bar-h) + var(--rh) + 96px))}
  .recit.is-anime .recit__img.is-on{pointer-events:auto}
  .recit.is-anime .recit__cadre{left:0;right:0;top:calc(var(--bar-h) + 8px);bottom:auto;height:var(--rh)}
  .recit.is-anime .recit__heure{top:calc(var(--bar-h) + var(--rh) + 22px);bottom:auto;left:var(--side-l);right:auto}
  .recit.is-anime .recit__texte{z-index:1}
  .recit.is-anime .recit__tete,.recit.is-anime .recit__pas p{width:100%}
  .recit.is-anime .recit__tete{justify-content:flex-end;padding-bottom:8svh}
  .recit.is-anime .recit__pas{align-items:flex-end;padding-bottom:10svh;min-height:70svh}
}