/* ============================================================
   KARAI — styles des pages du site (complète style.css)
   Organisation : un bloc par page et par composant, dans l'ordre des pages.
   Les espacements sont tous réglés dans la dernière section, « ÉCARTS ».
   ============================================================ */
/* ════════════════════════════════════════════════════════════════════════
   BASE ET ÉLÉMENTS COMMUNS
   ════════════════════════════════════════════════════════════════════════ */
.home { --h-r: 14px; --h-line: color-mix(in srgb, var(--c-line) 12%, transparent); }
.home img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ── Éléments communs ── */
.h-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.h-title { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; color: var(--c-title); }
.h-ph { display: block; position: relative; overflow: hidden; border-radius: var(--h-r); }
.h-ph img { transition: transform 1.2s cubic-bezier(.19, 1, .22, 1); }
a:hover > .h-ph img { transform: scale(1.04); }
.h-btn { display: inline-block; font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 1.05rem 2.1rem; border-radius: 999px; border: 1px solid var(--c-link); background: var(--c-link); color: var(--c-on-photo); transition: 0.25s; }
.h-btn:hover { background: transparent; color: var(--c-link); }
.h-btn--ghost { background: transparent; border-color: var(--c-on-photo); color: var(--c-on-photo); }
.h-badge { position: absolute; top: 0.9rem; left: 0.9rem; font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--c-badge-open); color: var(--c-badge-text); }
.h-badge--soon { background: var(--c-badge-soon); }
.h-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.75rem; color: color-mix(in srgb, var(--c-text) 70%, transparent); border-top: 1px solid var(--h-line); padding-top: 0.8rem; }
/* Fond beige foncé, pour alterner */
.h-sec--alt { background: var(--c-bg-alt); }
/* Ligne beige sous une section (page Expeditions : entre « All levels welcome » et le pied de page) */
.h-sec--line { border-bottom: 0.5px solid color-mix(in srgb, var(--c-on-dark) 55%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-btn--outline { background: transparent; color: var(--c-title); border-color: var(--c-line); }
.h-btn--outline:hover { background: var(--c-bg-dark); color: var(--c-on-photo); border-color: var(--c-bg-dark); }
[data-video] { cursor: pointer; }
[data-video]:focus-visible { outline: 2px solid var(--c-surtitle); outline-offset: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   EN-TÊTES PLEINE PHOTO (toutes les pages)
   ════════════════════════════════════════════════════════════════════════ */
/* En-tête : une photo pleine largeur, titre en bas à gauche */
.h-cover { position: relative; overflow: hidden; color: var(--c-on-photo); }
.h-cover > img { position: absolute; inset: 0; animation: subtle-zoom 20s ease-in-out infinite alternate; }
.h-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05) 40%, rgba(0,0,0,.6)); }
.h-cover__txt { position: absolute; z-index: 2; left: var(--h-pad); right: var(--h-pad); }
.h-cover__txt .surtitre { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.h-cover h1 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.05; color: var(--c-on-photo); }
.h-cover h1 em { color: var(--c-on-photo); }
/* Photo d'en-tête plein écran, sous le menu transparent */
.h-cover { margin-top: 0; height: 100vh; min-height: 560px; }
/* En-tête : titre centré en bas (Expeditions, Photography — comme Documentary) */
.h-cover--center .h-cover__txt { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding-bottom: clamp(3rem, 11vh, 7rem); }
.h-cover--center .h-cover__txt .surtitre { margin-bottom: 0.5rem; }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : ouverture en deux volets
   ════════════════════════════════════════════════════════════════════════ */
/* ── Ouverture en deux volets ── */
.h-hero { position: relative; display: flex; overflow: hidden; background: var(--c-bg-dark); color: var(--c-on-photo); }
.h-hero__p { position: relative; flex: 1; overflow: hidden; transition: flex 0.8s cubic-bezier(.19, 1, .22, 1); }
.h-hero__p img { position: absolute; inset: 0; transition: transform 1.6s cubic-bezier(.19, 1, .22, 1), filter 0.8s; }
.h-hero__p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.35) 58%, rgba(0,0,0,.8) 100%); }
.h-hero .h-hero__p:hover { flex: 1.25; }
.h-hero__p:hover img { transform: scale(1.04); }
.h-hero:hover .h-hero__p:not(:hover) img { filter: brightness(.7) saturate(.8); }
.h-hero__txt { position: absolute; z-index: 2; left: clamp(1.5rem, 4vw, 4rem); right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(2rem, 6vh, 4rem); max-width: 30rem; display: block; }
.h-hero__txt .surtitre { margin-bottom: 0.8rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.h-hero__title { display: block; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; margin-bottom: 0.25rem; }
.h-hero__text { display: block; font-size: 0.9rem; line-height: 1.65; margin-bottom: 1.4rem; max-width: 34ch; }
.h-hero__go { display: inline-block; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.95rem 1.8rem; border: 1px solid var(--c-on-photo); border-radius: 999px; transition: 0.25s; }
/* seuls les deux boutons sont cliquables : ils s'inversent à leur propre survol */
.h-hero__go { position: relative; z-index: 2; color: var(--c-on-photo); text-decoration: none; }
.h-hero__go:hover, .h-hero__go:focus-visible { background: var(--c-on-photo); color: var(--c-bg-dark); }
@media (max-width: 600px) {
  /* ── Téléphone : volets empilés ── */
  .h-hero { flex-direction: column; }
  .h-hero__p { flex: none; min-height: 26rem; }
  .h-hero:hover .h-hero__p, .h-hero .h-hero__p:hover { flex: none; }
}
/* ── Titre coupé sur la ligne de séparation ──
   « We tell stories. » finit juste avant la ligne, « We take you there. » commence juste après.
   Chaque moitié est dans son volet : au survol, elle suit la ligne qui se déplace. */
.h-hero__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-hero__half em { color: var(--c-on-photo); }
.h-hero__p:first-of-type .h-hero__half { right: var(--h-split-gap); text-align: right; }
.h-hero__p:last-of-type .h-hero__half { left: var(--h-split-gap); }
@media (max-width: 600px) {
  .h-hero__p { height: 80vh; }
  .h-hero__p .h-hero__half { white-space: normal; top: 2.5rem; }
  .h-hero__p:first-of-type .h-hero__half, .h-hero__p:last-of-type .h-hero__half { left: var(--h-pad); right: var(--h-pad); text-align: left; }
}
/* ── Menu plein dès le haut (accueil) ──
   Le menu ne flotte plus sur les photos : il est d'emblée en version claire,
   et les deux volets commencent juste en dessous (sinon « Documentary » tombait sur la ligne). */
body:has(.h-hero) { --h-nav: 75px; }
.h-hero { --h-split-gap: clamp(1rem, 1.6vw, 1.75rem); margin-top: var(--h-nav, 75px); height: calc(100vh - var(--h-nav, 75px)); min-height: 560px; }
.h-hero__half { position: absolute; z-index: 2; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: 1.05; white-space: nowrap; color: var(--c-on-photo); text-shadow: 0 2px 24px rgba(0,0,0,.25); top: clamp(2.5rem, 8vh, 4.5rem); }
@media (max-width: 600px) {
  .h-hero { height: auto; min-height: 0; }
  .h-hero__p:first-of-type .h-hero__half { top: 2.5rem; }
}
/* Ouverture : dernier mot des titres des volets en italique doré */
.h-hero__title em { font-style: italic; color: var(--c-accent-on-dark); }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : manifeste
   ════════════════════════════════════════════════════════════════════════ */
/* le manifesto enchaîne directement sur les fondateurs */
.home .mf { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : prochaines expéditions
   ════════════════════════════════════════════════════════════════════════ */
/* ── Prochaines expéditions (la première carte, plus grande) ── */
.h-feat { background: var(--c-bg-alt); }
.h-more { display: none; }
.h-feat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.h-card { display: flex; flex-direction: column; }
.h-card .h-ph { aspect-ratio: 4 / 5; margin-bottom: 1.3rem; }
.h-card .surtitre { margin-bottom: 0.6rem; }
.h-card h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; margin-bottom: 0.5rem; }
.h-card p { font-size: 0.88rem; margin-bottom: 0.9rem; color: var(--c-text); }
@media (max-width: 860px) {
  .h-feat__grid .h-card:first-child .h-ph { min-height: 0; aspect-ratio: 4 / 5; }
}
/* Accueil, prochaines expéditions : infos sans gras */
.h-card .h-meta, .h-card .h-meta b { font-weight: 400; }

/* ════════════════════════════════════════════════════════════════════════
   « THE WAY WE TRAVEL » : panneaux (accueil + Expeditions)
   ════════════════════════════════════════════════════════════════════════ */
/* 6. The way we travel : panneaux photo qui s'ouvrent */
.ab-panels { display: flex; gap: var(--grid-gap, 1.8rem); height: clamp(26rem, 42vw, 34rem); }
.ab-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--h-r); overflow: hidden; cursor: pointer; outline: none; transition: flex-grow .7s cubic-bezier(.19, 1, .22, 1); color: var(--c-on-photo); }
.ab-panel.is-open { flex-grow: 3.2; }
.ab-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 16 12 / .85) 0%, rgb(20 16 12 / .25) 50%, rgb(20 16 12 / .1) 100%); }
.ab-panel.is-open img { transform: scale(1.03); }
.ab-panel__txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem, 2.4vw, 2.2rem); }
.ab-panel__n { display: block; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 2.4rem; line-height: 1; color: var(--c-surtitle); margin-bottom: .8rem; }
.ab-panel h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.15; color: var(--c-on-photo); white-space: nowrap; }
.ab-panel p { max-width: 34ch; font-size: .92rem; line-height: 1.7; color: var(--c-on-photo); opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; transition: opacity .5s ease .15s, max-height .6s ease, margin .6s ease; }
.ab-panel.is-open p { opacity: .92; max-height: 8rem; margin-top: .8rem; }
.ab-panel:not(.is-open) h3 { font-size: 1.2rem; white-space: normal; }
@media (max-width: 600px) {
  .ab-panels { flex-direction: column; height: auto; }
  .ab-panel, .ab-panel.is-open { flex: none; height: 20rem; }
  .ab-panel p { opacity: .92; max-height: none; margin-top: .8rem; }
  .ab-panel:not(.is-open) h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); }
}
/* Sur la balise <img> du panneau :  style="--pos: 50% 50%; --pos-narrow: 30% 50%"
   --pos        = cadrage quand le panneau est ouvert (large) — et sur mobile
   --pos-narrow = cadrage quand le panneau est fermé (étroit) ; sans lui, --pos est utilisé */
.ab-panel img { object-position: var(--pos, 50% 50%); transition: transform 1.2s cubic-bezier(.19, 1, .22, 1), object-position .7s cubic-bezier(.19, 1, .22, 1); }
.ab-panel:not(.is-open) img { object-position: var(--pos-narrow, var(--pos, 50% 50%)); }
@media (max-width: 600px) {
  .ab-panel:not(.is-open) img { object-position: var(--pos, 50% 50%); }
}
/* Accessibilité : contour visible au clavier sur les panneaux et tuiles cliquables (rien ne change à la souris) */
.ab-panel:focus-visible, .doc-flip:focus-visible { outline: 2px solid var(--c-surtitle); outline-offset: 3px; }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : visual stories
   ════════════════════════════════════════════════════════════════════════ */
/* ── Visual stories (bandeau sombre) ── */
.h-edito { background: var(--c-bg-dark); color: var(--c-on-dark); }
.h-edito .h-title, .h-edito h3, .h-edito h4 { color: var(--c-on-photo); }
.h-edito em { color: var(--c-accent-on-dark); }
.h-edito__lead { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.h-edito__lead h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin-bottom: 1.2rem; }
.h-edito__lead p { font-size: 0.95rem; line-height: 1.85; max-width: 44ch; color: var(--c-on-dark); }
.h-edito h4 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.5rem; }
/* Visual stories : trois cartes */
.h-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.h-story { display: flex; flex-direction: column; }
.h-story .h-ph { aspect-ratio: 4 / 5; margin-bottom: 1.4rem; }
.h-story .surtitre { margin-bottom: 0.6rem; }
.h-story h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin-bottom: 0.7rem; }
.h-story p { font-size: 0.9rem; line-height: 1.7; color: var(--c-on-dark); margin-bottom: 1.2rem; max-width: 36ch; }
.h-story .link-underline { margin-top: auto; align-self: flex-start; }
@media (max-width: 600px) {
  .h-stories { grid-template-columns: 1fr; }
}
/* Visual stories : titres clairs, sans italique */
.h-story h3, .h-story h3 em { color: var(--c-on-photo); font-style: normal; }
/* Photographie : texte du bandeau sombre */
.h-edito__lead p { margin-bottom: 1.2rem; }
/* All levels welcome : même espace en haut et en bas */
.h-edito__lead:last-child { margin-bottom: 0; }
/* Bloc photo + texte dont la photo suit la hauteur du texte (page Expeditions, « All levels welcome ») */
.h-edito__lead--fill { align-items: stretch; }
.h-edito__lead--fill .h-ph { aspect-ratio: auto; height: 100%; min-height: 24rem; }
.h-edito__lead--fill .h-ph img { width: 100%; height: 100%; object-fit: cover; }
.h-edito__lead--fill > div { align-self: center; }
/* Expeditions : bandeau « accompagnement photo » sous « All levels welcome », trois tuiles photo */
.h-edito__coach { margin-top: clamp(3rem, 5vw, 4.5rem); }
/* petite ligne « Included in every expedition » au-dessus des trois tuiles, prolongée par un filet */
.h-edito__coach .h-edito__label { display: flex; align-items: center; gap: 1.2rem; margin-bottom: clamp(1.2rem, 2vw, 1.6rem); }
.h-edito__label::after { content: ''; flex: 1; height: 1px; background: rgb(250 247 242 / .18); }
/* trois icônes dessinées au trait fin (SVG dans la page), titre et texte centrés */
.h-coach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); text-align: center; padding-top: clamp(1rem, 2vw, 1.5rem); }
.h-coach__icon { display: block; width: clamp(6.5rem, 9vw, 8.5rem); height: auto; margin: 0 auto 1.4rem; color: var(--c-surtitle); filter: url(#ink); }
.h-coach__item h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; color: var(--c-on-photo); margin-bottom: .7rem; }
.h-coach__item p { font-size: .92rem; line-height: 1.75; color: var(--c-on-dark); max-width: 32ch; margin: 0 auto; }
@media (max-width: 760px) { .h-coach { grid-template-columns: 1fr; gap: 2.8rem; } }
/* Page Film, « How we work » : trois tuiles recto/verso, dessin au trait + titre au recto ; en-tête centré */
.doc-flips.doc-flips--draw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-flips--draw .doc-flip { aspect-ratio: 4 / 3; }
.doc-flips--draw .doc-flip__front { justify-content: center; padding-top: 0; }
.doc-flip__draw { display: block; width: clamp(6.5rem, 9vw, 8.5rem); height: auto; margin-bottom: 1.4rem; color: var(--c-surtitle); filter: url(#ink); }
.doc-flips--draw .doc-flip__back p { max-width: 32ch; }
@media (max-width: 900px) { .doc-flips.doc-flips--draw { grid-template-columns: 1fr; } .doc-flips--draw .doc-flip { aspect-ratio: 16 / 10; } }
.doc-method--centre .ab-mission { text-align: center; justify-items: center; }
.doc-method--centre .ab-text p { margin-left: auto; margin-right: auto; max-width: 60ch; }
@media (max-width: 860px) {
  .h-edito__lead--fill .h-ph { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : les fondateurs
   ════════════════════════════════════════════════════════════════════════ */
/* ── Les fondateurs ── */
.h-founders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3vw, 3rem); }
.h-founders__box { background: var(--c-bg-alt); border-radius: var(--h-r); padding: clamp(2rem, 4.5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.h-founders__box .h-title { margin-bottom: 1.6rem; }
.h-founders__box > p { margin-bottom: 1.2rem; max-width: 52ch; color: var(--c-text); }
.h-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.2rem 0 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--h-line); }
.h-duo b { display: block; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.45rem; line-height: 1.15; margin-bottom: 0.35rem; }
.h-duo small { display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.6rem; }
.h-founders__card { position: relative; overflow: hidden; border-radius: var(--h-r); min-height: 34rem; color: var(--c-on-photo); }
.h-founders__card img { position: absolute; inset: 0; object-position: 22% 60%; transition: transform 1.4s cubic-bezier(.19, 1, .22, 1); }
.h-founders__card:hover img { transform: scale(1.04); }
.h-founders__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
.h-founders__cap { position: absolute; z-index: 2; left: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.2rem); }
.h-founders__cap .surtitre { color: var(--c-on-photo); margin-bottom: 0.4rem; }
.h-founders__name { display: block; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; }
@media (max-width: 860px) {
  .h-feat__grid, .h-edito__lead, .h-promise__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .h-founders { grid-template-columns: 1fr; }
  .h-founders__card { min-height: 26rem; }
}
@media (max-width: 560px) {
  .h-duo { grid-template-columns: 1fr; }
}
/* The way we travel : photo à gauche, texte à droite */
.h-founders--reverse .h-founders__card { order: -1; }
@media (max-width: 860px) {
  .h-founders--reverse .h-founders__card { order: 0; }
}
/* The way we travel : un seul bloc (photo + texte), texte clair sur fond brun */
.h-founders--merged em { color: var(--c-accent-on-dark); }
.h-founders--merged { gap: 0; border-radius: var(--h-r); overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 860px) {
  /* 1/3 photo, 2/3 texte */
  .h-founders--merged { grid-template-columns: 1fr; }
}
/* The way we travel : bandeau moins haut, texte étiré en largeur */
.h-founders--merged .h-founders__box { border-radius: 0; background: var(--c-bg-dark); padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4.5vw, 4.5rem); }
.h-founders--merged .h-founders__box > p { color: var(--c-on-dark); max-width: none; margin-bottom: 0.9rem; }
.h-founders--merged .h-title { color: var(--c-on-photo); margin-bottom: 1.2rem; }
.h-founders--merged .h-founders__card { border-radius: 0; min-height: 0; }
@media (max-width: 860px) {
  .h-founders--merged .h-founders__card { min-height: 16rem; }
}
/* The founders : tous les paragraphes en Inter à la même taille */
.h-founders__box > p, .h-duo p { font-size: 0.95rem; line-height: 1.8; }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : latest news
   ════════════════════════════════════════════════════════════════════════ */
/* ── Latest news : trois bandeaux — numéro · image 16:9 · texte ── */
.h-rows { display: flex; flex-direction: column; }
.h-row { display: grid; }
.h-row__txt { display: flex; flex-direction: column; }
.h-row__txt .surtitre { margin-bottom: 0.7rem; }
.h-row h3 { font-family: var(--font-serif); font-weight: var(--w-serif); line-height: 1.15; color: var(--c-title); }
.h-row p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); }
.h-row .link-underline { align-self: flex-start; }
/* Latest news : un bloc par article (numéro, photo, texte), sans lignes de séparation */
.h-rows { border-top: none; gap: clamp(1rem, 2vw, 2rem); }
.h-row__num { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1; color: var(--c-surtitle); text-align: center; }
.h-row .h-ph { border-radius: 0; }
/* Latest news : 1/3 numéro + photo, 2/3 texte ; bandeaux moins hauts */
.h-row { border-bottom: none; padding: 0; gap: 0; background: var(--c-bg-alt); border-radius: var(--h-r); overflow: hidden; align-items: stretch; }
.h-row__media { display: grid; grid-template-columns: clamp(3.5rem, 5.5vw, 5.5rem) minmax(0, 1fr); align-items: center; align-self: stretch; }
.h-row__media .h-ph { align-self: stretch; }
.h-row__txt { padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.8rem, 4vw, 3.5rem); justify-content: center; }
.h-row h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 0.6rem; }
.h-row p { max-width: 68ch; margin-bottom: 1rem; }
.h-row--soon h3 em { color: var(--c-accent); }
@media (max-width: 600px) {
  .h-row { grid-template-columns: 1fr; min-height: 0; }
  .h-row__media { grid-template-columns: 4rem minmax(0, 1fr); }
  .h-row__media .h-ph { aspect-ratio: 16 / 9; height: auto; }
  .h-row__num { font-size: 2.2rem; padding: 0; text-align: center; }
}
@media (min-width: 601px) {
  /* Le cadre ne suit plus la hauteur du texte ; le texte se centre à côté. Cadrage : « card_position: » dans la fiche de l'article. */
  .h-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr); min-height: 0; align-items: center; }
  .h-row__media { align-self: center; }
  .h-row__media .h-ph { aspect-ratio: 3 / 2; height: auto; align-self: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : « Our promise » (section retirée de l'accueil, gardée pour les sauvegardes)
   ════════════════════════════════════════════════════════════════════════ */
/* ── Promesse ── */
.h-promise { background: var(--c-bg-alt); text-align: center; }
.h-promise__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem auto 3.5rem; max-width: 72rem; background: var(--c-bg); border-radius: var(--h-r); padding: 2.6rem 0; }
.h-promise__grid > div { padding: 0 clamp(1rem, 3vw, 3rem); }
.h-promise__grid > div + div { border-left: 1px solid var(--h-line); }
.h-promise__grid h3 { font-family: var(--font-serif); font-weight: var(--w-serif); margin-bottom: 1rem; }
.h-promise__grid p { font-size: 0.9rem; line-height: 1.8; color: var(--c-text); }
@media (max-width: 860px) {
  .h-promise__grid > div + div { border-left: 0; border-top: 1px solid var(--h-line); padding-top: 2rem; margin-top: 2rem; }
}
/* Piliers : titres sur une ligne, sans italique */
.h-promise__grid h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; }
/* piliers : pas de marge sous la grille quand elle termine la section */
.h-promise__grid:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
   ACCUEIL : inspirations
   ════════════════════════════════════════════════════════════════════════ */
/* ── Inspirations ── */
.h-moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(13rem, 20vw, 19rem); gap: clamp(0.6rem, 1vw, 1rem); }
.h-mood { position: relative; overflow: hidden; border-radius: var(--h-r); color: var(--c-on-photo); }
.h-mood:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.h-mood:nth-child(6) { grid-column: span 2; }
.h-mood img { transition: transform 1.4s cubic-bezier(.19, 1, .22, 1); }
.h-mood:hover img { transform: scale(1.06); }
.h-mood::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); }
.h-mood > span { position: absolute; z-index: 2; left: 1.3rem; right: 1.3rem; bottom: 1.1rem; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; }
.h-mood small { display: block; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.5rem; opacity: 0; transform: translateY(6px); transition: 0.35s; }
.h-mood:hover small { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .h-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-mood:nth-child(6) { grid-column: span 1; }
  .h-mood small { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .h-moods { grid-template-columns: 1fr; grid-auto-rows: 16rem; }
  .h-mood:nth-child(1) { grid-column: span 1; grid-row: span 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGES EXPÉDITION
   ════════════════════════════════════════════════════════════════════════ */
.exp13 { background: var(--c-bg); }
.exp13 .exp-section-header { border-bottom: none; }
/* blocs arrondis, avec le même espace entre eux */
.exp13 .exp-specs, .exp13 .exp-experience { margin-left: var(--h-pad); margin-right: var(--h-pad); margin-bottom: var(--x-gap); border: none; border-radius: var(--h-r); overflow: hidden; }
.exp13 .exp-price { margin-bottom: var(--x-gap); border: none; border-radius: var(--h-r); overflow: hidden; }
.exp13 .exp-leader, .exp13 .exp-commitment, .exp13 .exp-footer-cta { margin-left: var(--h-pad); margin-right: var(--h-pad); margin-bottom: var(--x-gap); border: none; border-radius: var(--h-r); overflow: hidden; }
/* En-tête : le bandeau d'infos vient se poser sur le bas de la photo */
.exp13 .exp-spec-item { padding: 1.8rem 1.15rem; }
.exp13 .exp-specs { position: relative; z-index: 5; margin-top: -4rem; box-shadow: 0 24px 50px -30px rgba(26, 20, 16, .55); }
/* About the expedition : sans traits, sur le fond clair */
.exp13 .exp-intro { background: transparent; border: none; }
.exp13 .exp-intro__left { border-right: none; }
.exp13 .exp-intro__right { padding-right: var(--h-pad); }
/* The experience : photo et texte dans un même bloc beige */
.exp13 .exp-experience { background: var(--c-bg-alt); }
.exp13 .exp-experience__image img { display: block; }
.exp13 .exp-point { border-radius: 8px; }
/* Highlights : quatre photos arrondies, espacées */
.exp13 .exp-highlights { background: transparent; border: none; }
.exp13 .exp-highlights__grid { gap: var(--x-gap); padding: 0 var(--h-pad); }
.exp13 .exp-highlight-card { border: none !important; }
/* Itinéraire : sans trait, photos arrondies */
.exp13 .exp-itinerary { background: transparent; border: none; }
.exp13 .exp-itinerary__grid { padding-left: var(--h-pad); }
.exp13 .exp-itinerary__photo-break img { border-radius: var(--h-r); }
/* Encart de réservation à droite de l'itinéraire (ordinateur seulement) : suit le défilement, s'efface à l'approche du prix */
.exp13 .exp-aside { display: none; }
@media (min-width: 1180px) {
  .exp13 .exp-itinerary { display: grid; grid-template-columns: minmax(0, 1fr) calc(20rem + var(--h-pad)); }
  .exp13 .exp-itinerary > .exp-section-header { grid-column: 1 / -1; }
  .exp13 .exp-aside { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 7rem; display: flex; flex-direction: column; align-items: center; text-align: center; width: 20rem; margin-right: var(--h-pad); padding: 2rem 1.8rem; background: var(--c-bg-alt); border-radius: var(--h-r); transition: opacity .7s ease, transform .7s ease, visibility 0s linear 0s; }
  .exp13 .exp-aside.is-away { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s; }
}
.exp-aside .surtitre { margin-bottom: .9rem; }
.exp-aside__dates { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.35rem; line-height: 1.25; color: var(--c-title); }
.exp-aside__meta { margin-top: .35rem; font-size: .8rem; color: var(--c-text); }
.exp-aside__price { width: 100%; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--h-line); font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 2rem; line-height: 1; color: var(--c-title); }
.exp-aside__price span { display: block; margin-top: .5rem; font-family: var(--font-sans); font-size: .72rem; line-height: 1.4; color: var(--c-text); }
/* places restantes : simple ligne de texte (le fond posé par spots.js est neutralisé) */
.exp-aside__spots { margin-top: 1.1rem; background: none !important; color: var(--c-link); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.exp-aside__spots.is-soon { color: var(--c-text); }
.exp13 .exp-aside .exp-cta-btn { width: 100%; margin-top: 1.4rem; text-align: center; border-radius: 999px; border: 1px solid var(--c-link); }
.exp13 .exp-aside .exp-cta-btn:hover { background: transparent; color: var(--c-link); }
.exp-aside__more { margin-top: 1rem; }
.exp13 .exp-price { scroll-margin-top: 6rem; }
/* Prix : un bloc beige centré */
.exp13 .exp-price { background: var(--c-bg-alt); }
.exp13 .exp-price .exp-cta-btn { border-radius: 999px; }
/* Your guide : photo et texte dans un même bloc beige */
.exp13 .exp-leader__image img { display: block; }
/* Responsibility : bloc brun arrondi */
.exp13 .exp-commitment__content { border-right: 1px solid color-mix(in srgb, var(--c-on-dark) 12%, transparent); }
/* Ready to… : bloc vert arrondi, bouton en pilule */
.exp13 .exp-footer-cta .exp-cta-btn { border-radius: 999px; }
/* FAQ : sur le fond clair, sans trait vertical */
.exp13 .exp-faq { background: transparent; border: none; }
.exp13 .exp-faq__intro { border-right: none; padding-left: var(--h-pad); }
.exp13 .exp-faq__list { padding-right: var(--h-pad); }
@media (max-width: 1024px) {
  .exp13 .exp-specs { margin-top: -2.5rem; }
  .exp13 .exp-commitment__content { border-right: none; }
  .exp13 .exp-highlights__grid { padding: 0 var(--h-pad); }
}
@media (max-width: 768px) {
  .exp13 .exp-intro__right, .exp13 .exp-itinerary__grid { padding-left: var(--h-pad); padding-right: var(--h-pad); }
}
/* En-tête : assez court pour voir tout le bandeau d'infos dès l'arrivée */
.exp13 .exp-hero { height: calc(100vh - 7rem); min-height: 460px; }
.exp13 .exp-hero__content { padding-bottom: 6.5rem; }
.exp13 .scroll-hint { bottom: 6.5rem; display: none; }
/* About the expedition : la phrase seule, centrée */
.exp13 .exp-intro { display: block; text-align: center; }
.exp13 .exp-intro__left { max-width: 56rem; margin: 0 auto; padding-left: var(--h-pad); padding-right: var(--h-pad); }
.exp13 .exp-intro__left p { text-wrap: balance; }
/* Highlights : la légende sous la photo, dans un bandeau doré qui fait corps avec elle */
.exp13 .exp-highlight-card { flex-direction: column; }
.exp13 .exp-highlight-card__img { overflow: hidden; }
.exp13 .exp-highlight-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp13 .exp-highlight-card__text h3 { white-space: normal; }
/* Itinéraire : hébergement · activité · transport, sur une ligne, avec une petite icône */
.day-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; margin-top: -0.2rem; }
.day-fact { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--c-text); }
.day-fact svg { flex: none; color: var(--c-link); }
/* Prix : bloc plus étroit ; les deux listes dans un encart beige clair */
.exp13 .exp-price { max-width: 64rem; margin-left: auto; margin-right: auto; }
.exp13 .exp-price__lists { background: var(--c-bg); border-radius: var(--h-r); padding: 2.2rem 0; max-width: 54rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Your guide : fond brun, textes clairs */
.exp13 .exp-leader { background: var(--c-bg-dark); }
.exp13 .exp-leader__content h2 { color: var(--c-on-photo); }
.exp13 .exp-leader__role, .exp13 .exp-leader__content p { color: var(--c-on-dark); }
/* Responsibility : fond beige, textes foncés */
.exp13 .exp-commitment { background: var(--c-bg-alt); color: var(--c-text); }
.exp13 .exp-commitment__content { border-right-color: var(--h-line); }
.exp13 .exp-commitment__content h2, .exp13 .exp-commitment__stat .big { color: var(--c-title); }
.exp13 .exp-commitment em { color: var(--c-accent); }
.exp13 .exp-commitment__content p, .exp13 .exp-commitment__stat p { color: var(--c-text); }
@media (min-width: 769px) and (max-width: 1400px) {
  .exp13 .exp-hero { height: calc(100vh - 14rem); }
}
@media (max-width: 768px) {
  .exp13 .exp-hero { height: 78vh; }
  .exp13 .exp-price__lists { grid-template-columns: 1fr; padding: 1.8rem; }
}
/* Highlights : bandeau sous la photo en beige foncé, légende en majuscules */
.exp13 .exp-highlight-card__text { flex: 1; align-items: center; justify-content: center; }
/* ── Page Mauritania (expédition en préparation) ── */
.mau-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--x-gap); padding: 0 var(--h-pad); }
.mau-point { background: var(--c-bg-alt); border-radius: var(--h-r); padding: 2rem 1.8rem; }
.mau-point__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c-bg); color: var(--c-surtitle); margin-bottom: 1.2rem; }
.mau-point p { font-size: 0.92rem; line-height: 1.75; color: var(--c-text); }
/* dessins au trait (même style que les icônes de la page Expeditions), centrés : ligne de sol commune aux quatre */
.mau-point__draw { display: block; width: clamp(7rem, 9vw, 8.5rem); height: auto; margin: 0 auto 1.2rem; color: var(--c-surtitle); filter: url(#ink); }
.mau-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--x-gap); padding: var(--pad-section) var(--h-pad) 0; margin-bottom: var(--x-gap); }
.mau-photos .h-ph { aspect-ratio: 4 / 5; }
.mau-photos .h-ph:first-child { aspect-ratio: auto; }
.exp13 .mau-notify2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; text-align: left; gap: 3rem; padding: clamp(3rem, 5vw, 4.5rem); }
.mau-notify2 .surtitre { color: var(--c-on-photo); }
.mau-notify2 .exp-footer-cta__left h2 { margin-bottom: 1rem; }
.mau-notify2 .exp-footer-cta__left p { color: var(--c-on-photo); font-size: 0.95rem; line-height: 1.75; max-width: 52ch; }
.mau-notify2 .exp-footer-cta__right { margin-top: 0; }
/* bouton « Join the waiting list » : comme le bandeau newsletter de l'accueil (contour clair, plein clair au survol) */
.mau-notify2 .h-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 3.1rem; background: transparent; color: var(--c-on-photo); border: 1px solid var(--c-on-photo); }
.mau-notify2 .h-btn:hover, .mau-notify2 .h-btn:focus-visible { background: var(--c-on-photo); color: var(--c-link); border-color: var(--c-on-photo); }
.exp13 .mau-other2 { background: transparent; }
@media (max-width: 1024px) {
  .mau-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mau-points, .mau-photos, .exp13 .mau-notify2 { grid-template-columns: 1fr; }
  .mau-photos .h-ph:first-child { aspect-ratio: 4 / 5; }
}
.exp13 .exp-intro--guest { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; text-align: left; max-width: 82rem; margin: 0 auto; padding: var(--pad-section) var(--h-pad); }
.exp13 .exp-intro--guest .exp-intro__left { max-width: none; margin: 0; padding: 0; }
.exp-guest-card { justify-self: end; width: 100%; max-width: 26rem; background: var(--c-bg-dark); border-radius: var(--h-r); overflow: hidden; }
.exp-guest-card__ph { aspect-ratio: 3 / 2; overflow: hidden; }
.exp-guest-card__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exp-guest-card__txt { padding: 1.6rem 1.8rem 1.7rem; }
.exp-guest-card .surtitre { margin-bottom: .6rem; }
.exp-guest-card h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.7rem; line-height: 1.15; color: var(--c-on-photo); margin: 0 0 .35rem; }
.exp-guest-card__role { display: block; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-on-dark); opacity: .75; margin-bottom: 1rem; }
.exp-guest-card p { font-family: var(--font-sans); font-size: .85rem; line-height: 1.7; color: var(--c-on-dark); margin: 0 0 .8rem; }
.exp-guest-card__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-surtitle); margin-bottom: .2rem; }
.exp-guest-card__more summary::-webkit-details-marker { display: none; }
.exp-guest-card__plus { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-size: .9rem; line-height: 1; transition: transform .3s; }
.exp-guest-card__more[open] .exp-guest-card__plus { transform: rotate(45deg); }
.exp-guest-card__more[open] summary { margin-bottom: .9rem; }
@media (max-width: 860px) {
  .exp13 .exp-intro--guest { grid-template-columns: 1fr; }
  .exp-guest-card { justify-self: center; }
}
/* Expédition : sous-titre du hero (subtitle: dans ## hero) */
.exp-hero__sub { font-family: var(--font-serif); font-weight: var(--w-serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.2; color: var(--c-surtitle); margin-top: .8rem; text-shadow: 0 2px 20px rgb(0 0 0 / .25); }
/* Photo pleine tuile aux coins arrondis, numéro doré (01, 02…) en haut à gauche, titre en serif clair en bas,
   léger dégradé ; tuiles 2 et 4 décalées vers le bas (quinconce), zoom doux au survol. Même esprit que « Our approach ». */
.exp13 .exp-highlights__grid { counter-reset: hl; align-items: start; }
.exp13 .exp-highlight-card { counter-increment: hl; position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-bg-dark); border-radius: var(--h-r); isolation: isolate; }
.exp13 .exp-highlight-card__img { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; }
.exp13 .exp-highlight-card__img img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.exp13 .exp-highlight-card:hover .exp-highlight-card__img img { transform: scale(1.06); }
.exp13 .exp-highlight-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 16 12 / .82) 0%, rgb(20 16 12 / .35) 38%, rgb(20 16 12 / 0) 62%, rgb(20 16 12 / .25) 100%); }
.exp13 .exp-highlight-card::before { content: counter(hl, decimal-leading-zero); position: absolute; top: 1.2rem; left: 1.4rem; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--c-surtitle); }
.exp13 .exp-highlight-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2vw, 1.6rem); display: block; text-align: left; }
.exp13 .exp-highlight-card__text h3 { font-family: var(--font-serif); font-weight: var(--w-serif); text-transform: none; letter-spacing: 0; font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.15; color: var(--c-on-photo); text-wrap: balance; }
@media (max-width: 860px) {
  .exp13 .exp-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp13 .exp-highlight-card { aspect-ratio: 3 / 4; }
  .exp13 .exp-highlight-card::before { top: .9rem; left: 1rem; font-size: 1.7rem; }
  .exp13 .exp-highlight-card__text { padding: 1rem; }
  .exp13 .exp-highlight-card__text h3 { font-size: 1.1rem; }
}
/* Highlights : mini-vidéo révélée au survol (« video: » dans la fiche) */
.exp13 .exp-highlight-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.exp13 .exp-highlight-card.is-playing .exp-highlight-card__video { opacity: 1; }
.exp13 .exp-highlight-card.has-video:hover .exp-highlight-card__video { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .exp13 .exp-highlight-card__video { display: none; }
}
/* Highlights : les 4 tuiles alignées en hauteur (plus de quinconce), sur ordinateur comme sur mobile */
.exp13 .exp-highlight-card:nth-child(even) { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE PHOTOGRAPHY
   ════════════════════════════════════════════════════════════════════════ */
/* citation d'introduction : même taille que celle de la page Expeditions (réglage .h-statement p) */
/* filtre : boutons en pilule, à droite du titre */
.photo13 .series-filter { border: none; padding: 0; background: transparent; }
.photo13 .series-filter-btns { gap: 0.5rem; flex-wrap: wrap; }
.photo13 .series-filter-btn { border: 1px solid var(--h-line); border-radius: 999px; padding: 0.6rem 1.2rem; background: transparent; }
.photo13 .series-filter-btn:last-child { border-right: 1px solid var(--h-line); }
.photo13 .series-filter-btn.active { background: var(--c-bg-dark); border-color: var(--c-bg-dark); color: var(--c-on-photo); }
.photo13 .series-grid { border: none; }
.photo13 .series-card { border: none; border-radius: var(--h-r); }
/* licences : un bloc beige centré */
.photo13-license { background: var(--c-bg-alt); border-radius: var(--h-r); text-align: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 6rem); }
.photo13-license .h-title { margin-bottom: 1.2rem; }
.photo13-license p { max-width: 44rem; margin: 0 auto 2rem; font-size: 0.95rem; line-height: 1.8; color: var(--c-text); }
@media (max-width: 768px) {
  .photo13 .series-grid { grid-template-columns: 1fr !important; }
  .photo13 .series-card { grid-column: auto !important; }
}
.photo13 .h-statement .photo13-quote { margin-bottom: 0; }
.photo13-filters { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.photo13-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.photo13-more [hidden] { display: none; }
/* Our approach : deux colonnes, piliers numérotés à droite */
.photo13-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.photo13-approach__intro .h-title { margin-bottom: 1.4rem; }
.photo13-approach__intro p { font-size: 0.98rem; line-height: 1.85; color: var(--c-text); max-width: 44ch; }
.photo13-approach__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.photo13-approach__list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1.8rem 0; border-top: 1px solid var(--h-line); }
.photo13-approach__list li:last-child { border-bottom: 1px solid var(--h-line); }
.photo13-num { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; color: var(--c-surtitle); }
.photo13-approach__list h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; margin-bottom: 0.6rem; color: var(--c-title); }
.photo13-approach__list p { font-size: 0.92rem; line-height: 1.75; color: var(--c-text); }
@media (max-width: 860px) {
  .photo13-approach { grid-template-columns: 1fr; }
}
.photo13-appr { background: var(--c-bg-dark); color: var(--c-on-photo); }
.photo13-appr .surtitre { color: var(--c-surtitle); }
.photo13-appr .h-title { color: var(--c-on-photo); }
.photo13-appr__head { display: grid; }
.photo13-appr__head p { font-size: 0.98rem; line-height: 1.85; color: var(--c-on-photo); opacity: 0.8; }
.photo13-appr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.5rem); align-items: start; }
.photo13-pillar { position: relative; aspect-ratio: 3 / 4; border-radius: var(--h-r); overflow: hidden; color: var(--c-on-photo); text-decoration: none; isolation: isolate; }
.photo13-pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo13-pillar::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 16 12 / 0.92) 0%, rgb(20 16 12 / 0.55) 42%, rgb(20 16 12 / 0.05) 70%); transition: background 0.6s; }
.photo13-pillar:hover img { transform: scale(1.06); }
.photo13-pillar__num { top: 1.4rem; left: 1.6rem; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1; color: var(--c-surtitle); }
.photo13-pillar__txt { left: 0; right: 0; padding: clamp(1.4rem, 2.4vw, 2.2rem); }
.photo13-pillar__txt h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; margin-bottom: 0.7rem; color: var(--c-on-photo); }
.photo13-pillar__txt p { font-size: 0.9rem; line-height: 1.7; opacity: 0.88; margin-bottom: 1.2rem; }
.photo13-pillar__from { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-surtitle); border-top: 1px solid rgb(250 247 242 / 0.25); padding-top: 0.9rem; width: 100%; }
.photo13-pillar__from svg { transition: transform 0.4s; }
.photo13-pillar:hover .photo13-pillar__from svg { transform: translateX(4px); }
@media (max-width: 600px) {
  .photo13-appr__grid { grid-template-columns: 1fr; }
  .photo13-pillar { aspect-ratio: 4 / 5; }
}
/* Our approach : trois cartes alignées, même hauteur */
.photo13-pillar:nth-child(2) { margin-top: 0; }
/* Our approach : paragraphe sous le titre */
.photo13-appr__head { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
.photo13-appr__head p { max-width: 60ch; }
.d-process .photo13-approach__list li { border-color: rgb(250 247 242 / 0.18); }
/* zone « View more » sans marge quand le bouton est caché (toutes les pages) */
.photo13-more:has( > [hidden]) { display: none; }
/* Photography : tuile « More series coming soon » en fin de grille */
.photo13 .series-card--soon { cursor: default; }
.photo13 .series-card--soon .series-card-image { background: var(--c-bg-dark); display: flex; align-items: center; justify-content: center; text-align: center; }
.series-soon__txt { padding: 2rem; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; color: var(--c-on-photo); }
.series-soon__txt em { color: var(--c-surtitle); }
.series-soon__txt .surtitre { display: block; margin-bottom: 1rem; }
/* La tuile devient une colonne : le numéro en haut, puis titre + paragraphe + ligne « Seen in » collés en bas.
   Les éléments ne sont plus superposés en absolu : si un texte s'allonge, la tuile grandit au lieu de déborder. */
.photo13-pillar { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.photo13-pillar__num { position: static; padding: 1.4rem 1.6rem 0; }
.photo13-pillar__txt { position: static; top: auto; bottom: auto; height: auto; display: flex; flex-direction: column; justify-content: flex-end; }
.photo13-pillar__txt h3 { min-height: 0; }
.photo13-pillar__from { margin-top: 0; }
@media (max-width: 960px) {
  .photo13-pillar__txt { height: auto; }
}
@media (min-width: 1600px) {
  /* grand écran : les tuiles passent à l'horizontale (4:3) */
  .photo13-pillar { aspect-ratio: 4 / 3; }
}
/* Photography : tuile « coming soon » cachée tant que « View more » est affiché */
.photo13 .series-card--soon[hidden] { display: none; }
/* Toujours visibles, en bas à gauche : pays (doré), titre, sous-titre.
   Au survol : le bloc monte légèrement et révèle la catégorie (pilule) et « View series → ». */
.series-card-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.series-card-subtitle { margin-bottom: 0; }
.series-card-cat { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-on-photo); border: 1px solid color-mix(in srgb, var(--c-on-photo) 45%, transparent); border-radius: 999px; padding: 0.35rem 0.9rem; }
.series-card-meta { gap: 1.2rem; }
@media (hover: hover) {
  .series-card-meta { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: max-height .5s cubic-bezier(.19,1,.22,1), margin-top .5s cubic-bezier(.19,1,.22,1), opacity .4s ease, transform .5s ease; }
  .series-card:hover .series-card-meta, .series-card:focus-visible .series-card-meta { max-height: 3rem; margin-top: 1.1rem; opacity: 1; transform: none; }
  /* le sous-titre aussi n'apparaît qu'au survol */
  .series-card-subtitle { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.19,1,.22,1), opacity .4s ease; }
  .series-card:hover .series-card-subtitle, .series-card:focus-visible .series-card-subtitle { max-height: 4rem; opacity: 1; }
}
@media (hover: none) {
  .series-card-meta { opacity: 1; transform: none; margin-top: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE JOURNAL
   ════════════════════════════════════════════════════════════════════════ */
.j-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.j-head p { font-size: 0.98rem; line-height: 1.85; color: var(--c-text); max-width: 46ch; }
/* article à la une : photo + texte fusionnés */
.j-feat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); background: var(--c-bg-alt); border-radius: var(--h-r); overflow: hidden; color: inherit; text-decoration: none; }
.j-feat[hidden] { display: none; }
.j-feat .h-ph { border-radius: 0; min-height: clamp(20rem, 32vw, 30rem); }
.j-feat__txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); }
.j-feat h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin-bottom: 1rem; color: var(--c-title); }
/* cartes */
.j-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.j-card { display: flex; flex-direction: column; background: var(--c-bg-alt); border-radius: var(--h-r); overflow: hidden; color: inherit; text-decoration: none; }
.j-card[hidden] { display: none; }
.j-card .h-ph { border-radius: 0; }
.j-card__txt { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.2rem); }
.j-card h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.2; margin-bottom: 0.8rem; color: var(--c-title); }
.j-feat h2 em, .j-card h3 em { color: var(--c-accent); }
.j-feat p, .j-card p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); margin-bottom: 1.4rem; }
.j-feat .h-meta, .j-card .h-meta { margin-bottom: 1.4rem; font-weight: 400; }
.j-feat .link-underline, .j-card .link-underline { align-self: flex-start; }
.j-feat:hover .h-ph img, .j-card:hover .h-ph img { transform: scale(1.04); }
.j-empty { text-align: center; padding: 3rem 0; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.4rem; color: var(--c-text); }
@media (max-width: 1024px) {
  .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .j-head, .j-feat, .j-grid { grid-template-columns: 1fr; }
  .j-feat .h-ph { min-height: 0; aspect-ratio: 4 / 3; }
}
/* Journal : même écart sous l'en-tête, pas de marge fantôme quand la grille est vide */
.j-grid:empty { display: none; }
.j-feat:has( + .j-grid:empty) { margin-bottom: 0; }
/* Journal : bandeau photo (pas plein écran) */
.j-banner-sec { display: block; }
.j-banner { position: relative; border-radius: var(--h-r); overflow: hidden; color: var(--c-on-photo); }
.j-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-banner::after { content: ''; position: absolute; inset: 0; }
@media (max-width: 860px) {
  .j-banner { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 30rem; }
}
/* bandeau : tons chauds passés, grain, vignettage, titre centré */
.j-banner--vintage { background: #2a2018; }
.j-banner--vintage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); background-size: 180px; mix-blend-mode: overlay; opacity: .45; }
.j-banner__title { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--font-serif); font-weight: var(--w-serif); line-height: 1; color: var(--c-on-photo); text-shadow: 0 2px 30px rgb(0 0 0 / .35); text-align: center; }
/* grille : la tuile brune d'introduction + toutes les cartes à la même taille */
.j-intro { display: flex; flex-direction: column; color: var(--c-on-photo); border-radius: var(--h-r); padding: clamp(1.8rem, 3vw, 2.6rem); }
.j-intro h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; color: var(--c-on-photo); margin-bottom: 1.4rem; }
.j-intro h2 em { color: var(--c-on-photo); font-style: italic; }
.j-intro p { font-size: 0.95rem; line-height: 1.8; color: var(--c-on-photo); opacity: .9; }
/* bandeau : plus d'effet vintage, titre un peu sous le centre */
.j-banner--vintage > img { filter: none; }
.j-banner--vintage::before { display: none; }
.j-banner--vintage::after { background: linear-gradient(to bottom, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .45)); }
.j-banner__title { padding-top: 18%; }
/* grille en quinconce : unité de hauteur --j-u ; la tuile prend 1 unité, chaque article 2 unités.
   La 1re colonne est ainsi décalée d'une demi-carte par rapport aux deux autres. */
.j-grid { --j-u: clamp(18rem, 24vw, 22rem); grid-auto-rows: var(--j-u); grid-auto-flow: row dense; }
.j-intro { grid-row: span 1; min-height: 0; background: var(--c-bg-dark); }
.j-card { grid-row: span 2; height: auto; }
.j-card .h-ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.j-card__txt { flex: 0 0 auto; }
.j-card p { flex: none; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) {
  .j-grid { --j-u: clamp(17rem, 34vw, 21rem); }
}
@media (max-width: 860px) {
  .j-grid { grid-auto-rows: auto; }
  .j-intro, .j-card { grid-row: auto; }
  .j-card .h-ph { aspect-ratio: 4 / 3; flex: none; }
}
.j-more-tile { grid-column: 1; grid-row: span 1; border: 0; cursor: pointer; text-align: left; font: inherit; justify-content: space-between; flex-direction: row; align-items: flex-end; transition: background .3s; }
.j-more-tile[hidden] { display: none; }
.j-more-tile__txt { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; color: var(--c-on-photo); }
.j-more-tile__txt em { font-style: italic; color: var(--c-on-photo); }
.j-more-tile__plus { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--c-surtitle); color: var(--c-surtitle); font-family: var(--font-sans); font-weight: 300; font-size: 1.5rem; line-height: 1; transition: background .3s, color .3s, transform .4s; flex-shrink: 0; }
.j-more-tile:hover .j-more-tile__plus, .j-more-tile:focus-visible .j-more-tile__plus { background: var(--c-surtitle); color: var(--c-bg-dark); transform: rotate(90deg); }
@media (max-width: 860px) {
  .j-more-tile { grid-column: auto; min-height: 9rem; }
}
/* bandeau en pleine largeur, format 16:9, sous un menu transparent (comme les autres pages) */
.j-banner-sec--full .j-banner { aspect-ratio: 16 / 9; max-height: 100vh; min-height: 30rem; border-radius: 0; }
.j-banner-sec--full + #articles { padding-top: var(--sec-gap); }
/* Journal : tuile Field notes, texte en haut */
.j-intro:not(.j-more-tile) { justify-content: flex-start; }
/* Journal : titre du bandeau à la taille des autres pages (+ surtitre doré) */
.j-banner__title { flex-direction: column; font-size: inherit; }
.j-banner__title .surtitre { margin-bottom: 0.5rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.j-banner__title h1 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.05; color: var(--c-on-photo); text-shadow: 0 2px 30px rgb(0 0 0 / .35); margin: 0; }
.j-banner__title h1 em { color: var(--c-on-photo); font-style: italic; }
/* Journal : bandeau d'accueil un peu plus haut */
.j-banner.j-banner--vintage { height: clamp(32rem, 78vh, 50rem); }

/* ════════════════════════════════════════════════════════════════════════
   BANDEAU NEWSLETTER + INSTAGRAM
   ════════════════════════════════════════════════════════════════════════ */
/* ── Rester en contact : newsletter | Instagram, sur fond vert ── */
.h-connect { background: var(--c-link); color: var(--c-on-photo); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 0; }
.h-connect .surtitre, .h-connect .h-title, .h-connect .h-title em, .h-connect h3 { color: var(--c-on-photo); }
.h-connect__nl { padding-right: clamp(2rem, 6vw, 6rem); }
.h-connect__nl .h-title { margin-bottom: 1rem; }
.h-connect__nl p { font-size: 0.95rem; line-height: 1.75; max-width: 46ch; color: var(--c-on-photo); }
.h-connect__ig { display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: clamp(2rem, 6vw, 6rem); border-left: 1px solid color-mix(in srgb, var(--c-on-photo) 40%, transparent); }
.h-connect__avatar { display: block; border-radius: 50%; overflow: hidden; border: 2px solid var(--c-on-photo); }
.h-connect__avatar img { transition: transform 1s; }
.h-connect__avatar:hover img { transform: scale(1.06); }
.h-connect h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; }
.h-connect__ig p { font-size: 0.9rem; color: var(--c-on-photo); }
@media (max-width: 600px) {
  .h-connect { grid-template-columns: 1fr; gap: 3rem; }
  .h-connect__nl { padding-right: 0; }
  .h-connect__ig { padding-left: 0; border-left: 0; padding-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--c-on-photo) 40%, transparent); }
}
/* Newsletter + Instagram, version beige (page Expeditions) */
.h-connect--light { background: var(--c-bg-alt); color: var(--c-text); }
.h-connect--light .surtitre { color: var(--c-surtitle); }
.h-connect--light .h-title, .h-connect--light h3 { color: var(--c-title); }
.h-connect--light .h-title em { color: var(--c-accent); }
.h-connect--light .h-connect__nl p, .h-connect--light .h-connect__ig p { color: var(--c-text); }
.h-connect--light .h-connect__ig { border-left-color: var(--h-line); }
.h-connect--light .h-connect__avatar { border-color: var(--c-bg); }
.h-connect--light .h-btn--ghost { color: var(--c-link); border-color: var(--c-link); }
@media (max-width: 600px) {
  .h-connect--light .h-connect__ig { border-top-color: var(--h-line); }
}
.doc14 .h-connect .h-btn { background: transparent; color: var(--c-link); border-color: var(--c-link); }
/* Bandeau newsletter + Instagram : moins haut */
.h-connect__nl p { margin-bottom: 1.5rem; }
.h-connect__ig p { margin-bottom: 1.3rem; }
/* Subscribe = même bouton contour que Follow us (blanc au survol sur fond vert, vert plein sur fond beige) */
.h-connect .h-btn--ghost:hover { background: var(--c-on-photo); color: var(--c-link); border-color: var(--c-on-photo); }
.h-connect--light .h-btn--ghost:hover { background: var(--c-link); color: var(--c-on-photo); border-color: var(--c-link); }
@media (min-width: 601px) {
  /* Les deux colonnes partagent les mêmes 4 lignes (surtitre, titre, texte, bouton) grâce à subgrid :
   les surtitres et les boutons tombent à la même hauteur. La photo de profil passe à gauche du nom. */
  .h-connect { grid-template-rows: auto auto auto auto; align-items: start; row-gap: 0; }
  .h-connect__nl { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
  .h-connect__ig { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; align-items: start; justify-items: center; }
  .h-connect__nl .h-btn { align-self: end; justify-self: start; }
  .h-connect__ig .h-btn { align-self: end; justify-self: center; }
  .h-connect__nl .h-title { align-self: center; }
}
.h-connect__ig .surtitre, .h-connect__nl .surtitre { margin-bottom: 1.4rem; }
.h-connect__id { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; align-self: center; }
.h-connect__id .h-connect__avatar { width: 64px; height: 64px; margin: 0; flex-shrink: 0; }
.h-connect__id h3 { margin: 0; }
/* même hauteur pour Subscribe (bouton) et Follow us (lien) */
.h-connect .h-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 3.1rem; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE FILM (Documentary)
   ════════════════════════════════════════════════════════════════════════ */
.doc13 .h-cover::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 14rem; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); pointer-events: none; }
.doc13 .d-quote { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.3; color: var(--c-title); }
.doc13 .d-quote em { color: var(--c-accent); }
/* lecture : bouton rond et durée */
.d-play { position: absolute; top: 50%; left: 50%; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(250 247 242 / 0.7); color: var(--c-on-photo); backdrop-filter: blur(4px); }
.d-dur { position: absolute; right: 0.9rem; bottom: 0.9rem; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgb(26 20 16 / 0.55); color: var(--c-on-photo); }
.d-soon { top: 0.9rem; left: 0.9rem; }
[data-video]:hover .h-ph img { transform: scale(1.04); }
/* film mis en avant : photo + texte fusionnés */
.d-film p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); margin-bottom: 1.4rem; }
.d-film .h-meta { margin-bottom: 1.4rem; font-weight: 400; }
.d-film .link-underline { align-self: flex-start; }
/* filtre */
.d-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.d-filter__btn { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.75rem 1.3rem; border-radius: 999px; border: 1px solid var(--h-line); background: transparent; color: var(--c-text); cursor: pointer; transition: background .3s, color .3s; }
.d-filter__btn:hover { border-color: var(--c-title); }
.d-filter__btn.active { background: var(--c-bg-dark); border-color: var(--c-bg-dark); color: var(--c-on-photo); }
/* cartes de films */
.d-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.d-film { display: flex; flex-direction: column; background: var(--c-bg-alt); border-radius: var(--h-r); overflow: hidden; }
.d-film[hidden] { display: none; }
.d-film .h-ph { border-radius: 0; aspect-ratio: 16 / 10; }
.d-film h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.15; margin-bottom: 0.5rem; color: var(--c-title); }
.d-film h3 em { color: var(--c-accent); }
.d-film p { flex: 1; }
.d-film--noimg .h-ph { background: var(--c-bg-dark); }
.d-soon-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.d-soon-ph .surtitre { margin: 0; padding: 0.7rem 1.3rem; border: 1px solid rgb(250 247 242 / 0.35); border-radius: 999px; }
.d-film--soon .h-ph img { filter: saturate(.6); }
/* méthode : bloc sombre */
.d-process { background: var(--c-bg-dark); color: var(--c-on-photo); border-radius: var(--h-r); padding: clamp(2.5rem, 6vw, 5.5rem); }
.d-process .h-title, .d-process h3 { color: var(--c-on-photo); }
.d-process p { color: var(--c-on-photo); opacity: .82; }
/* commandes : bloc beige, deux colonnes */
.d-collab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); border-radius: var(--h-r); padding: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.d-collab__intro .h-title { margin-bottom: 1.2rem; }
.d-collab__intro p { font-size: 0.95rem; line-height: 1.8; margin-bottom: 2rem; max-width: 46ch; }
.d-collab__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.4rem; }
.d-collab__types > div { border-top: 1px solid var(--h-line); padding-top: 1.2rem; }
.d-collab__types .surtitre { margin-bottom: 0.7rem; }
.d-collab__types p { font-size: 0.9rem; line-height: 1.75; }
@media (max-width: 1024px) {
  .d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .d-collab, .d-grid, .d-collab__types { grid-template-columns: 1fr; }
}
.doc14 .surtitre { color: var(--c-surtitle); }
.cine-sec { padding: clamp(3rem, 6vw, 5.5rem) var(--h-pad); }
/* grain de pellicule, sur les images */
.cine-feat__frame::after, .cine-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--cine-grain); background-size: 160px; mix-blend-mode: overlay; opacity: .35; }
/* ── Lecture (commun) ── */
.doc14 .d-play { z-index: 3; background: rgb(0 0 0 / .25); }
.doc14 .d-dur, .doc14 .d-soon { display: none; }
.doc14 [data-video]:hover .d-play { background: var(--c-on-dark); color: #000; }
/* ── Film à la une : 21:9, texte sur l'image ── */
.cine-feat { position: relative; border-radius: var(--h-r); overflow: hidden; color: var(--c-on-dark); }
.cine-feat__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; }
.cine-feat__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.19,1,.22,1); }
.cine-feat:hover .cine-feat__frame img { transform: scale(1.03); }
.cine-feat .d-play { width: 5.6rem; height: 5.6rem; }
.cine-feat__frame::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .45) 38%, transparent 65%); }
.cine-feat__txt { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: min(34rem, 48%); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.8rem, 4vw, 3.5rem); }
.cine-feat h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1; margin: .4rem 0 .6rem; color: var(--c-on-dark); }
.cine-feat p { font-size: .92rem; line-height: 1.75; color: var(--c-on-dark); opacity: .85; margin: .6rem 0 1.2rem; }
.cine-feat__meta { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cine-dim); }
.doc14 .link-underline { color: var(--c-on-dark); border-color: var(--c-surtitle); margin-top: 1.2rem; align-self: flex-start; }
/* ── En-tête de la liste + filtre façon onglets ── */
/* ── Cartes de films : image 16:9, titre sur l'image, légende dessous ── */
.cine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cine-card[hidden] { display: none; }
.cine-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--h-r); overflow: hidden; }
.cine-frame .h-ph { position: absolute; inset: 0; border-radius: 0; }
.cine-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.19,1,.22,1), filter .8s; }
.cine-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .25) 45%, rgb(0 0 0 / .15) 100%); }
.cine-card:hover .cine-frame img { transform: scale(1.04); }
.cine-frame__title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2.4vw, 2rem); }
.cine-frame__title .surtitre { margin-bottom: .5rem; }
.cine-frame h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; color: var(--c-on-dark); }
.cine-card .d-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .4s, transform .4s, background .4s; }
.cine-card:hover .d-play, .cine-card:focus-visible .d-play { opacity: 1; transform: translate(-50%, -50%); }
/* film en production */
.cine-card.d-film--soon .cine-frame img { filter: grayscale(1) brightness(.9); }
/* films en production : noir et blanc, légèrement assombri */
.doc14 .d-soon-ph { z-index: 1; }
.doc14 .d-soon-ph .surtitre { color: var(--c-surtitle); }
.doc14 .d-film--noimg .d-soon-ph .surtitre { display: none; }
/* ── Commandes : bloc encadré sur fond sombre ── */
.cine-collab .d-collab__types > div { border-color: var(--cine-line); }
.doc14 .h-btn, .cine-btn { border-color: var(--c-surtitle); }
@media (max-width: 860px) {
  .cine-feat__frame { aspect-ratio: 4 / 5; }
  .cine-feat__frame::before { background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .4) 55%, transparent 80%); }
  .cine-feat__txt { width: auto; right: 0; }
  .cine-grid { grid-template-columns: 1fr; }
  .cine-card .d-play { opacity: 1; transform: translate(-50%, -50%); }
}
/* Documentary : texte d'approche en Inter capitales, titre d'en-tête centré */
.doc14 .h-cover__txt { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Documentary : filtres en pilules à gauche (comme Photography), cartes épurées avec texte révélé au survol */
.doc14 .d-filter { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); gap: 0.5rem; }
.cine-frame__title h3 { margin: 0; }
.cine-frame__more { display: flex; flex-direction: column; }
@media (hover: hover) {
  .cine-frame__more { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; transform: translateY(6px); transition: max-height .6s cubic-bezier(.19,1,.22,1), opacity .5s ease, padding .5s ease, transform .5s ease; }
  /* les films « in production » suivent le même système : sous-titre et ligne « In production » révélés au survol */
  .cine-card:hover .cine-frame__more, .cine-card:focus-visible .cine-frame__more { max-height: 8rem; opacity: 1; padding-top: 0.6rem; transform: none; }
  .cine-frame::before { transition: background .6s ease; }
  .cine-card:hover .cine-frame::before { background: linear-gradient(to top, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .45) 55%, rgb(0 0 0 / .25) 100%); }
}
/* visionneuse : description sous le titre */
.video-lightbox-desc { max-width: 62ch; margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.75; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.video-lightbox-desc:empty { display: none; }
/* Documentary : « Our approach » — grande photo, encart de texte à droite */
.cine-approach { position: relative; border-radius: var(--h-r); overflow: hidden; }
.cine-approach > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-approach::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--cine-grain); background-size: 160px; mix-blend-mode: overlay; opacity: .3; }
.cine-approach__card { z-index: 2; background: var(--c-bg); color: var(--c-text); border-radius: var(--h-r); padding: clamp(1.8rem, 3vw, 2.8rem); }
.cine-approach__card .surtitre { margin-bottom: 1.4rem; }
.cine-approach__card h2 { color: var(--c-title); margin-bottom: 1.4rem; }
.cine-approach__card p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); }
@media (max-width: 860px) {
  .cine-approach > img { position: relative; aspect-ratio: 4 / 3; height: auto; }
  .cine-approach::after { bottom: auto; height: 0; }
}
.doc14 { --cine-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); --cine-line: color-mix(in srgb, var(--c-line) 14%, transparent); --cine-dim: color-mix(in srgb, var(--c-text) 72%, transparent); background: var(--c-bg); color: var(--c-text); }
/* sur les images, le texte reste clair */
.doc14 .cine-feat__meta { color: rgb(245 240 232 / .72); }
/* filtres */
.doc14 .d-filter__btn { border: 1px solid var(--cine-line); border-radius: 999px; padding: 0.75rem 1.3rem; background: transparent; border-color: var(--h-line); }
.doc14 .d-filter__btn:hover { border-color: var(--c-title); }
.doc14 .d-filter__btn.active { border-color: var(--c-bg-dark); }
/* films en production sans image */
/* commandes : bloc beige soutenu */
.cine-collab { background: var(--c-bg-alt); border: none; }
.cine-collab .h-title { color: var(--c-title); }
.cine-collab p { color: var(--c-text); }
.doc14 .cine-collab .h-btn { background: var(--c-link); border-color: var(--c-link); color: var(--c-on-photo); }
.doc14 .cine-collab .h-btn:hover { background: transparent; color: var(--c-link); }
.doc14 .cine-btn { background: transparent; border-color: var(--c-line); }
.doc14 .cine-btn:hover { border-color: var(--c-bg-dark); }
/* encart 16:9 */
.cine-approach { min-height: 28rem; }
@media (max-width: 860px) {
  /* 16:9, sans écraser l'encart sur écran étroit */
  .cine-approach { display: flex; flex-direction: column; aspect-ratio: auto; }
}
/* Documentary : titre d'en-tête descendu dans la partie sombre de la photo, toujours centré */
.doc14 .h-cover__txt { justify-content: flex-end; padding-bottom: clamp(3rem, 11vh, 7rem); }
/* en-tête : surtitre plus proche du titre */
.doc14 .h-cover__txt .surtitre { margin-bottom: 0.5rem; }
/* section des films sur fond sombre */
.doc14 #films .d-filter__btn { border-color: rgb(245 240 232 / .18); color: rgb(245 240 232 / .7); }
.doc14 #films .d-filter__btn:hover { border-color: var(--c-on-dark); color: var(--c-on-dark); }
.doc14 #films .d-filter__btn.active { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-bg-dark); }
.doc14 #films .cine-frame { background: var(--c-bg-dark); }
/* fin liseré beige sur téléphone : la tuile se détache du fond sombre */
@media (max-width: 600px) { .doc14 #films .cine-frame { border: 1px solid color-mix(in srgb, var(--c-on-dark) 22%, transparent); } }
.doc14 #films .cine-btn { color: var(--c-on-dark); border-color: rgb(245 240 232 / .35); }
.doc14 #films .cine-btn:hover { background: var(--c-on-dark); color: var(--c-bg-dark); border-color: var(--c-on-dark); }
/* Documentary : encart Our approach un peu plus étroit */
.cine-approach__card { width: min(24.5rem, 34%); }
@media (max-width: 860px) {
  .cine-approach__card { position: relative; inset: auto; margin: -2.5rem 1rem 1rem; width: auto; }
}
/* Documentary : premier paragraphe de l encart Our approach en Inter */
.cine-approach__card h2 { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; }
.cine-approach__card h2 em { color: var(--c-accent); font-style: normal; }
/* Documentary : encart Our approach : paragraphes libres */
.cine-approach__card { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.cine-approach__card p { margin: 0 0 1rem; }
.cine-approach__card p:last-child { margin-bottom: 0; }
.cine-approach__card .cine-approach__lead { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.5; color: var(--c-title); margin-bottom: 1.4rem; }
.cine-approach__card .cine-approach__lead em { color: var(--c-accent); font-style: italic; }
/* Documentary : tuiles recto/verso (How we work) */
.doc-flips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
.doc-flip:hover .doc-flip__inner, .doc-flip:focus .doc-flip__inner { transform: rotateY(-180deg); }
/* rotation vers la droite */
.doc-flip__face { position: absolute; inset: 0; border-radius: var(--h-r); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.6rem, 2.6vw, 2.4rem); }
/* recto : brun, chiffre et titre centrés */
.doc-flip__front { background: var(--c-bg-dark); color: var(--c-on-dark); }
.doc-flip__n { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: 1; color: var(--c-surtitle); margin-bottom: 1.2rem; }
.doc-flip__front h3 { color: var(--c-on-dark); }
.doc-flip__plus { position: absolute; right: 1.3rem; bottom: 1.1rem; font-family: var(--font-sans); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--c-surtitle); transition: transform .4s; }
/* verso : beige foncé, le paragraphe */
.doc-flip__back { background: #e8dfd0; color: var(--c-text); transform: rotateY(180deg); }
.doc-flip__back p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); max-width: 26ch; }
@media (prefers-reduced-motion: reduce) {
  .doc-flip__inner { transition: none; }
}
@media (max-width: 1024px) {
  .doc-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .doc-flips { grid-template-columns: 1fr; }
}
/* Documentary : titres du recto en Inter capitales */
.doc-flip__front h3 { font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(0.85rem, 1.1vw, 1rem); line-height: 1.6; max-width: 18ch; }
/* Documentary : tuiles carrées (1:1) */
.doc-flip { perspective: 1400px; outline: none; cursor: default; aspect-ratio: 1 / 1; min-height: 0; }
.doc-flip__front { justify-content: flex-start; padding-top: 24%; }
@media (max-width: 560px) {
  .doc-flip { aspect-ratio: 1 / 1; min-height: 0; }
}
/* Documentary : bouton lecture plus petit sur les cartes de films */
.cine-card .d-play { width: 3.2rem; height: 3.2rem; }
.cine-card .d-play svg { width: 14px; height: 14px; margin-left: 2px; }
.doc14 #films { background: var(--c-bg-dark); }
.ab-flips .doc-flip { aspect-ratio: 16 / 10; }
.ab-flips .doc-flip__front { padding-top: 14%; }
/* Bandeau photo + encart : variante « encart texte à gauche » (About, Our mission) */
.cine-approach--left .cine-approach__card { right: auto; left: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 860px) {
  .cine-approach--left .cine-approach__card { left: auto; }
}
.ab-green .doc-flip__front { background: var(--kaki-dark); }
.ab-green .doc-flip__back { background: var(--kaki-light); }
@media (min-width: 861px) {
  /* L'encart de texte n'est plus posé en absolu : le bandeau garde au minimum la hauteur du texte,
   donc plus de barre de défilement dans l'encart, quelle que soit la largeur. */
  /* hauteur visée ≈ moitié de la largeur (2:1), mais le bloc grandit si le texte en demande plus */
  .cine-approach { aspect-ratio: auto; min-height: calc((100vw - 2 * var(--h-pad)) / 2); display: flex; justify-content: flex-end; align-items: stretch; padding: clamp(1rem, 2.4vw, 2rem); }
  .cine-approach__card { position: relative; inset: auto; overflow: visible; }
  .cine-approach--left { justify-content: flex-start; }
  .cine-approach--left .cine-approach__card { left: auto; }
}
/* Toujours visibles : région (doré) + titre. Au survol : sous-titre, catégories en pilules, « Watch the film → ». */
.cine-frame__more { gap: 0; }
.cine-frame__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.1rem; }
.cine-pill { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-on-photo); border: 1px solid color-mix(in srgb, var(--c-on-photo) 45%, transparent); border-radius: 999px; padding: 0.35rem 0.9rem; }
.cine-pill + .cine-pill { margin-left: -0.6rem; }
.cine-pill--soon { color: var(--c-surtitle); border-color: color-mix(in srgb, var(--c-surtitle) 60%, transparent); }

/* ════════════════════════════════════════════════════════════════════════
   PAGE EXPEDITIONS : texte d'intro, liste, bandeau défilant, avis
   ════════════════════════════════════════════════════════════════════════ */
/* Liste des expéditions : photo et texte côte à côte, en alternance */
.h-exps { display: flex; flex-direction: column; }
.h-exp--reverse .h-ph { order: 2; }
.h-exp__txt .surtitre { margin-bottom: 0.8rem; }
.h-exp h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; margin-bottom: 0.6rem; color: var(--c-title); }
.h-exp__slogan { font-family: var(--font-serif); font-weight: var(--w-serif); font-style: italic; font-size: 1.25rem; color: var(--c-accent); margin-bottom: 1.2rem; }
.h-exp p { font-size: 0.95rem; line-height: 1.8; color: var(--c-text); margin-bottom: 1.4rem; max-width: 50ch; }
.h-exp .link-underline { align-self: flex-start; }
@media (max-width: 860px) {
  .h-exp--reverse .h-ph { order: 0; }
}
/* Cartes : photo et encart de texte de même hauteur, toutes les photos à la même taille */
.h-exp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 1200px) {
  .h-exp p { font-size: 0.88rem; }
}
.h-exp__txt { display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 3.5rem); justify-content: center; }
.h-exp .h-meta { margin-bottom: 1.4rem; }
.home .experiences { padding-top: 1.5rem; }
/* Page Expeditions — « The experience » : surtitre et texte centrés, en Noto */
.h-statement { max-width: 50rem; margin: 0 auto; text-align: center; }
.h-statement .surtitre { margin-bottom: 1.8rem; }
.h-statement p { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.5; color: var(--c-title); margin: 0 auto 1.2rem; text-wrap: balance; }
.h-statement p:last-child { margin-bottom: 0; }
/* Page Expeditions : un seul écart, entre photo et texte comme entre deux expéditions ; infos sans gras */
.h-exps { --h-exp-gap: clamp(1rem, 2vw, 2rem); gap: var(--h-exp-gap); }
.h-exp .h-meta, .h-exp .h-meta b { font-weight: 400; color: var(--c-text); }
/* Page Expeditions : chaque expédition = un seul bloc (photo + texte), coins arrondis à l'extérieur */
.h-exp { gap: 0; border-radius: var(--h-r); overflow: hidden; }
.h-exp .h-ph { aspect-ratio: auto; width: 100%; height: auto; min-height: clamp(28rem, 40vw, 34rem); border-radius: 0; }
.h-exp__txt { border-radius: 0; background: transparent; }
/* Page Expeditions : section sur fond beige clair, blocs d'expédition sur fond beige foncé */
#list.h-sec--alt { background: var(--c-bg); }
.h-exp { background: var(--c-bg-alt); }
.d-film .h-exp__slogan { font-size: 1.1rem; margin-bottom: 1rem; }
.cine-frame .h-exp__slogan { display: block; font-size: 1.05rem; }
.cine-frame__more .h-exp__slogan { margin: 0; }
/* Expeditions : bandeau défilant, même espace au-dessus et en dessous */
.home .experiences { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 1.5rem); }
.h-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.h-reviews__score { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--c-title); background: var(--c-bg-alt); border-radius: 999px; padding: .7rem 1.4rem .7rem 1rem; }
.h-reviews__note { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 2.2rem; line-height: 1; }
.h-reviews__score small { display: block; font-size: .7rem; letter-spacing: .08em; color: var(--c-text); margin-top: .2rem; }
.h-review__stars { color: var(--c-surtitle); letter-spacing: .15em; font-size: .9rem; }
.h-reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(17rem, 30vw, 24rem); gap: var(--grid-gap, 1.8rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.h-review { margin: 0; scroll-snap-align: start; background: var(--c-bg-alt); border-radius: var(--h-r); padding: clamp(1.6rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: 1.1rem; }
.h-review blockquote { margin: 0; flex: 1; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; color: var(--c-title); }
.h-review figcaption { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-surtitle); }
.cine-frame__more .h-exp__slogan { margin-bottom: 0; }
.cine-card .cine-frame__more .h-exp__slogan { color: var(--c-on-dark); }

/* ════════════════════════════════════════════════════════════════════════
   PAGE ABOUT
   ════════════════════════════════════════════════════════════════════════ */
.ab-mission { display: grid; align-items: start; }
.ab-text p { font-size: 0.98rem; line-height: 1.85; color: var(--c-text); }
.ab-text p:last-child { margin-bottom: 0; }
/* méthode : bloc sombre, photo 1/2 et texte */
.ab-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--c-bg-dark); color: var(--c-on-photo); border-radius: var(--h-r); overflow: hidden; }
.ab-work .h-ph { border-radius: 0; min-height: clamp(26rem, 40vw, 36rem); }
.ab-work__txt { padding: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.ab-work .h-title { color: var(--c-on-photo); margin-bottom: 1.4rem; }
.ab-work p { font-size: 0.95rem; line-height: 1.85; color: var(--c-on-photo); opacity: .85; margin-bottom: 1rem; }
/* engagements : 6 piliers numérotés */
.ab-btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 860px) {
  .ab-mission, .ab-work { grid-template-columns: 1fr; }
  .ab-work .h-ph { min-height: 0; aspect-ratio: 4 / 3; }
}
.doc-method .ab-mission { grid-template-columns: 1fr; gap: 1.4rem; }
.doc-method .ab-text p { max-width: 60ch; }
.ab-stack { grid-template-columns: 1fr; gap: 1.4rem; }
.ab-stack .ab-text p { max-width: 62ch; }
.ab-flips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ab-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ab-flips { grid-template-columns: 1fr; }
}
/* 1. Un mot de Thom & Emi : photo + lettre */
.ab-note__letter { background: var(--c-bg-alt); border-radius: var(--h-r); padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; }
.ab-note__letter .surtitre { margin-bottom: 1.6rem; }
.ab-note__lead { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.3; color: var(--c-title); margin-bottom: 1.4rem; }
.ab-note__letter p:not(.ab-note__lead) { font-size: 0.98rem; line-height: 1.85; color: var(--c-text); margin-bottom: 1rem; max-width: 56ch; }
/* 4. Fondateurs : « In a few words » */
.ab-qa { margin: 1.6rem 0 0; padding: 1.2rem 1.4rem; border-radius: calc(var(--h-r) - 4px); display: grid; gap: .9rem; }
.ab-qa dd { margin: 0; font-weight: var(--w-serif); }
/* 7. Chiffres */
.ab-stat__n { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: 1; color: var(--c-surtitle); }
/* 8. Ceux qui nous accueillent : cartes « tirage photo » légèrement inclinées */
/* cinq polaroids par ligne (trois sur tablette, deux sur mobile) ; une ligne incomplète reste centrée */
.ab-hosts { --n: 5; --g: var(--grid-gap, 1.8rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.ab-hosts > .ab-host { flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width: 0; }
/* format polaroid : photo carrée, cadre fin en haut et sur les côtés, bas plus large avec le lieu centré */
.ab-host { margin: 0; aspect-ratio: 88 / 98; display: flex; flex-direction: column; background: var(--c-bg); border-radius: var(--h-r); padding: 0; box-shadow: 0 14px 34px rgb(26 20 16 / .10); transition: transform .6s cubic-bezier(.19, 1, .22, 1), box-shadow .6s; }
.ab-host__ph { display: block; margin: 6% 6% 0; aspect-ratio: 1 / 1; border-radius: calc(var(--h-r) - 6px); overflow: hidden; }
.ab-host__ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-host figcaption { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 .4rem; }
.ab-host .surtitre { margin: 0; font-size: .56rem; }
@media (max-width: 1024px) {
  /* 9. L'esprit KARAI : trois colonnes sur bloc brun */
  .ab-hosts { --n: 3; }
}
@media (max-width: 560px) {
  .ab-hosts { --n: 2; }
  .ab-host { aspect-ratio: 88 / 104; }
  .ab-host .surtitre { font-size: .48rem; letter-spacing: .1em; line-height: 1.5; }
}
/* 1–2. Quatre tuiles en quinconce : la colonne de droite est décalée vers le bas, même écart partout */
.ab-quin__dark { background: var(--c-bg-dark); }
.ab-quin__dark .h-title { color: var(--c-on-photo); margin-bottom: 1.4rem; }
.ab-quin__dark .h-title em { color: var(--c-surtitle); }
.ab-quin__dark p { color: var(--c-on-photo) !important; opacity: .85; }
/* 3. Frise verticale */
.ab-vt { position: relative; }
.ab-vt__line { position: absolute; left: 50%; bottom: 0; width: 1px; transform: translateX(-50%); background: color-mix(in srgb, var(--c-surtitle) 25%, transparent); }
.ab-vt__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--c-surtitle); transition: height .15s linear; }
.ab-vt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ab-vt__item { position: relative; display: flex; }
.ab-vt__item--left { justify-content: flex-start; }
.ab-vt__item--right { justify-content: flex-end; }
.ab-vt__card { border-radius: var(--h-r); padding: clamp(1.6rem, 2.6vw, 2.2rem); opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.19, 1, .22, 1); }
.ab-vt__item--wide .ab-vt__card { overflow: hidden; }
.ab-vt__item--wide .ab-vt__card > .ab-vt__year { margin-left: clamp(1.6rem, 2.6vw, 2.2rem); }
.ab-vt__item--wide .ab-vt__card > p { margin-left: clamp(1.6rem, 2.6vw, 2.2rem); margin-right: clamp(1.6rem, 2.6vw, 2.2rem); }
.ab-vt__dot { position: absolute; left: 50%; top: 2.3rem; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%) scale(.6); border: 1px solid var(--c-surtitle); transition: transform .5s ease, background .5s ease; }
.is-on > .ab-vt__dot { background: var(--c-surtitle); transform: translate(-50%, -50%) scale(1); }
.is-on > .ab-vt__card { opacity: 1; transform: none; }
.ab-vt__year { font-family: var(--font-serif); font-weight: var(--w-serif); line-height: 1; color: var(--c-surtitle); }
.ab-vt__card h3 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; margin-bottom: .6rem; }
.ab-vt__card > p { font-size: .95rem; line-height: 1.75; color: var(--c-text); }
/* fondateurs présentés dans la frise */
.ab-vt__ph { display: block; }
.ab-vt__ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-vt__ftxt .surtitre { margin-bottom: .6rem; }
.ab-vt__ftxt p { margin-bottom: .8rem; }
/* aboutissement : « Together, we drive Karai forward » */
.ab-vt__end { position: relative; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.4rem; opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.19, 1, .22, 1); }
.ab-vt__end.is-on { opacity: 1; transform: none; }
.ab-vt__dot--end { top: 0; width: 20px; height: 20px; }
.ab-vt__end .ab-work { position: relative; z-index: 1; }
@media (max-width: 860px) {
  /* 4. Mission : une phrase forte sur une grande photo */
  .ab-vt__line { left: 7px; transform: none; }
  .ab-vt__dot { left: 7px; }
  .ab-vt__item, .ab-vt__item--right { justify-content: flex-start; padding-left: 2.2rem; }
  .ab-vt__end { padding-left: 0; }
  .ab-vt__dot--end { left: 7px; }
}
/* 1–2 : ligne 1 moitié/moitié, ligne 2 un tiers/deux tiers */
.ab-quin2 { display: flex; flex-direction: column; gap: var(--grid-gap, 1.8rem); }
.ab-quin2__row { display: grid; gap: var(--grid-gap, 1.8rem); align-items: stretch; }
.ab-quin2__row--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ab-quin2__row--third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ab-quin2 .ab-note__photo { position: relative; border-radius: var(--h-r); overflow: hidden; min-height: clamp(22rem, 34vw, 32rem); }
.ab-quin2 .ab-note__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-quin2 .ab-note__letter { justify-content: center; }
.ab-quin2 .ab-quin__dark .h-title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.ab-quin2 .ab-quin__dark p { font-size: .98rem; line-height: 1.85; }
/* frise : fondateurs repliés */
.ab-vt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ab-vt__more:not([hidden]) + .ab-vt__toggle { margin-top: .8rem; }
.ab-vt__toggle { display: inline-flex; align-items: center; margin-top: .4rem; padding: 0; border: 0; background: none; cursor: pointer; }
.ab-vt__plus { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--c-surtitle); color: var(--c-surtitle); font-weight: 300; transition: transform .4s, background .3s, color .3s; }
.ab-vt__toggle:hover .ab-vt__plus { background: var(--c-surtitle); }
.ab-vt__toggle[aria-expanded="true"] .ab-vt__plus { transform: rotate(45deg); }
/* « Read more » ouvert : le texte d'introduction s'affiche en entier (il est placé avant le bouton, d'où :has) */
.ab-vt__ftxt:has(.ab-vt__toggle[aria-expanded="true"]) .ab-vt__excerpt,
.ab-vt__ftxt:has(.ab-vt__more:not([hidden])) .ab-vt__excerpt { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
/* engagements : photo de forêt */
.ab-forest { position: relative; border-radius: var(--h-r); overflow: hidden; }
.ab-forest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-forest::after { content: ''; position: absolute; inset: 0; }
/* hôtes : tuiles droites */
.ab-host, .ab-host:nth-child(even) { transform: none; }
.ab-host:hover { box-shadow: 0 22px 44px rgb(26 20 16 / .16); transform: translateY(-.4rem); }
@media (max-width: 860px) {
  .ab-quin2__row--half, .ab-quin2__row--third { grid-template-columns: 1fr; }
  .ab-quin2 .ab-note__photo { min-height: 0; aspect-ratio: 4 / 3; }
}
.ab-manifesto { background: var(--c-bg-dark); color: var(--c-on-photo); border-radius: var(--h-r); text-align: center; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.6rem, 8vw, 9rem); }
.ab-manifesto .surtitre { margin-bottom: 2rem; }
.ab-manifesto__big { max-width: 58rem; margin: 0 auto; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.25; color: var(--c-on-photo); }
.ab-manifesto__big em { color: var(--c-surtitle); }
/* frise : la ligne part d'une boule, sans titre au-dessus */
.ab-story > .surtitre { display: block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ab-vt { margin-top: 0; }
.ab-vt::before { content: ''; position: absolute; left: 50%; top: 0; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: var(--c-surtitle); z-index: 1; }
/* engagements : titre et texte sur la photo */
.ab-forest--txt { aspect-ratio: auto; min-height: clamp(28rem, 42vw, 38rem); margin-top: 0; display: flex; align-items: flex-end; }
.ab-forest--txt::after { background: linear-gradient(to top, rgb(20 16 12 / .85) 0%, rgb(20 16 12 / .4) 50%, rgb(20 16 12 / .1) 100%); }
.ab-forest__txt { position: relative; z-index: 1; max-width: 46rem; padding: clamp(2rem, 4vw, 3.5rem); color: var(--c-on-photo); }
.ab-forest__txt .surtitre { margin-bottom: 1rem; }
.ab-forest__txt h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; color: var(--c-on-photo); margin-bottom: 1.2rem; }
.ab-forest__txt h2 em { color: var(--c-surtitle); }
.ab-forest__txt p { font-size: .98rem; line-height: 1.8; color: var(--c-on-photo); opacity: .9; }
@media (max-width: 860px) {
  .ab-vt::before { left: 0; transform: none; }
}
/* la ligne commence directement sur la première boule (2019) */
.ab-vt { padding-top: 0; }
.ab-vt::before { display: none; }
/* frise sur fond de page clair : cartes en beige pour rester visibles */
.ab-story .ab-vt__card { background: var(--c-bg-alt); }
.ab-story .ab-vt__dot { background: var(--c-bg); }
.ab-story .is-on > .ab-vt__dot { background: var(--c-surtitle); }
/* frise : fondateurs, photo réduite, tuile en deux tons (date en haut, personne en bas) */
.ab-story .ab-vt__item--wide .ab-vt__card { background: var(--c-bg-alt); }
.ab-story .ab-vt__founder { margin-top: 1.4rem; border-top: 0; background: var(--c-bg-dark); color: var(--c-on-photo); display: grid; gap: 1.2rem; align-items: start; padding: clamp(1.2rem, 2vw, 1.6rem); }
.ab-story .ab-vt__ftxt { padding: 0; }
.ab-story .ab-vt__ftxt .surtitre { margin-bottom: .4rem; font-size: .55rem; }
.ab-story .ab-vt__ftxt h4 { color: var(--c-on-photo); }
.ab-story .ab-vt__ftxt p { color: var(--c-on-photo); opacity: .82; }
.ab-story .ab-vt__ftxt .ab-qa { background: rgb(245 240 232 / .06); }
.ab-story .ab-vt__ftxt .ab-qa dd { color: var(--c-on-photo); }
.ab-story .ab-vt__toggle:hover .ab-vt__plus { color: var(--c-bg-dark); }
@media (max-width: 560px) {
  .ab-story .ab-vt__ph { width: 6rem; }
}
/* engagements : palette verte kaki (cette section seulement) */
.ab-green { --kaki-dark: #3d4a2e; --kaki-light: #dde0c8; }
/* appel final : bloc vert turquoise */
.ab-cta-teal { background: var(--c-link); color: var(--c-on-photo); }
.ab-cta-teal .surtitre { color: var(--c-on-photo); opacity: .85; }
.ab-cta-teal .h-title, .ab-cta-teal .h-title em { color: var(--c-on-photo); }
.ab-cta-teal p { color: var(--c-on-photo) !important; opacity: .9; }
.ab-cta-teal .h-btn { background: var(--c-on-photo); border-color: var(--c-on-photo); color: var(--c-link); }
.ab-cta-teal .h-btn:hover { background: transparent; color: var(--c-on-photo); }
.ab-cta-teal .h-btn--outline { background: transparent; border-color: var(--c-on-photo); color: var(--c-on-photo); }
.ab-cta-teal .h-btn--outline:hover { background: var(--c-on-photo); color: var(--c-link); }
/* « + » centré, dessiné en CSS */
.ab-vt__plus { position: relative; font-size: 0; }
.ab-vt__plus::before { content: ''; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.ab-vt__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(90deg); }
/* date et titre sur la même ligne */
.ab-vt__card > .ab-vt__year { display: inline; font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 0 .5rem 0 0; }
.ab-vt__card > h3 { display: inline; font-style: italic; color: var(--c-title); }
.ab-vt__card > h3 em { color: var(--c-title); }
.ab-vt__card > p { margin-top: .7rem; }
.ab-vt__item--wide .ab-vt__card > h3 { margin: 0; }
.ab-vt__item--wide .ab-vt__card > .ab-vt__year + h3 { margin-left: 0; }
/* fondateurs : photo rectangle aux coins arrondis, tout à la même taille */
.ab-story .ab-vt__founder { grid-template-columns: 6.5rem minmax(0, 1fr); }
.ab-story .ab-vt__ph { overflow: hidden; aspect-ratio: 3 / 4; border-radius: calc(var(--h-r) - 4px); }
.ab-story .ab-vt__ftxt h4, .ab-story .ab-vt__ftxt p, .ab-story .ab-vt__ftxt .ab-qa dd { font-family: var(--font-sans); font-size: .9rem; line-height: 1.7; font-style: normal; letter-spacing: 0; text-transform: none; }
.ab-story .ab-vt__ftxt h4 { font-weight: 500; margin-bottom: .3rem; }
.ab-story .ab-vt__ftxt .ab-qa dt { font-family: var(--font-sans); font-size: .9rem; line-height: 1.7; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--c-surtitle); margin: 0; }
.ab-story .ab-vt__toggle { line-height: 1.7; gap: .6rem; }
/* tuiles superposées à la ligne : elles la chevauchent et forment un ensemble */
.ab-vt__line { top: 2.3rem; z-index: 0; }
.ab-vt__card { position: relative; z-index: 1; width: calc(50% + 2.5rem); box-shadow: 0 10px 30px rgb(26 20 16 / .06); }
.ab-vt__dot { z-index: 2; }
.ab-vt__list { gap: clamp(1.2rem, 2.4vw, 2rem); }
.ab-vt__item--left .ab-vt__card { margin-right: auto; padding-right: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 2.5rem); }
.ab-vt__item--right .ab-vt__card { margin-left: auto; padding-left: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 2.5rem); }
.ab-vt__item--wide.ab-vt__item--left .ab-vt__card, .ab-vt__item--wide.ab-vt__item--right .ab-vt__card { padding: 0; }
.ab-vt__item--wide.ab-vt__item--right .ab-vt__card > * { margin-left: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 2.5rem) !important; }
.ab-vt__item--wide.ab-vt__item--left .ab-vt__card > * { margin-right: calc(clamp(1.6rem, 2.6vw, 2.2rem) + 2.5rem) !important; }
.ab-vt__item--wide .ab-vt__card > .ab-vt__founder { margin-left: 0 !important; margin-right: 0 !important; }
.ab-vt__item--wide.ab-vt__item--right .ab-vt__founder { padding-left: calc(clamp(1.2rem, 2vw, 1.6rem) + 2.5rem); }
.ab-vt__item--wide.ab-vt__item--left .ab-vt__founder { padding-right: calc(clamp(1.2rem, 2vw, 1.6rem) + 2.5rem); }
.ab-vt__item--wide .ab-vt__card > .ab-vt__year { display: inline-block; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); }
@media (max-width: 860px) {
  .ab-vt__card { width: 100%; }
  .ab-vt__item--left .ab-vt__card, .ab-vt__item--right .ab-vt__card { padding: clamp(1.4rem, 4vw, 1.8rem); }
  .ab-vt__item--wide.ab-vt__item--left .ab-vt__card > *, .ab-vt__item--wide.ab-vt__item--right .ab-vt__card > * { margin-left: 1.4rem !important; margin-right: 1.4rem !important; }
  .ab-vt__item--wide .ab-vt__card > .ab-vt__founder { margin: 1.4rem 0 0 !important; padding: 1.2rem !important; }
}
.ab-vt__item--wide .ab-vt__card > h3 { margin-left: 0 !important; margin-right: 0 !important; }
.ab-vt__item--wide .ab-vt__card > .ab-vt__year { margin-right: .5rem !important; }
/* About, Our commitment : écart entre la photo et les tuiles */
.ab14 .ab-forest + .ab-flips { margin-top: var(--grid-gap, 1.8rem); }
.ab-story .ab-vt__toggle { font-family: var(--font-sans); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--c-surtitle); }
.ab-story .ab-vt__toggle:hover { color: var(--c-surtitle); }
/* grandes tuiles (avec fondateur) : le titre suit la date comme sur les autres tuiles, quel que soit le côté */
.ab-vt__item--wide.ab-vt__item--right .ab-vt__card > h3, .ab-vt__item--wide.ab-vt__item--left .ab-vt__card > h3 { margin-left: 0 !important; margin-right: 0 !important; }
/* grandes tuiles : date + titre regroupés, le titre revient à la ligne sous la date et jamais plus à gauche */
.ab-vt__item--wide .ab-vt__card > .ab-vt__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: .2rem; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); margin-left: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .6rem; }
.ab-vt__head .ab-vt__year { margin: 0 !important; display: inline; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.ab-vt__head h3 { margin: 0 !important; font-style: italic; color: var(--c-title); }
.ab-vt__head h3 em { color: var(--c-title); }

/* ════════════════════════════════════════════════════════════════════════
   NAVIGATION (variantes par page)
   ════════════════════════════════════════════════════════════════════════ */
body:has(.h-hero) nav { background: var(--c-bg-nav); color: var(--c-nav-scrolled); padding-top: 1rem; padding-bottom: 1rem; border-bottom: 0; }
body:has(.h-hero) nav .nav-cta { border-color: var(--ink); color: var(--ink); }
body:has(.h-hero) nav .nav-cta:hover { background: var(--c-bg-dark); color: var(--white); }
/* Page Photography : avant le défilement, textes du menu en foncé (#1a1410) ; le bandeau reste transparent */
body:has(.photo13) nav:not(.scrolled) { color: var(--c-title); }
body:has(.photo13) nav:not(.scrolled) .nav-cta, body:has(.photo13) nav:not(.scrolled) .nav-burger { border-color: var(--c-title); color: var(--c-title); }
body:has(.jr13) nav:not(.scrolled) { color: var(--c-title); }
body:has(.jr13) nav:not(.scrolled) .nav-cta, body:has(.jr13) nav:not(.scrolled) .nav-burger { border-color: var(--c-title); color: var(--c-title); }
body:has(.j-banner-sec--full) nav:not(.scrolled) { color: var(--c-on-photo); }
body:has(.j-banner-sec--full) nav:not(.scrolled) .nav-cta, body:has(.j-banner-sec--full) nav:not(.scrolled) .nav-burger { border-color: var(--c-on-photo); color: var(--c-on-photo); }

/* ════════════════════════════════════════════════════════════════════════
   ÉCARTS — tous les espacements du site sont réglés ici, et seulement ici
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --sec-gap: clamp(4rem, 8vw, 7rem);          /* bas des sections = écart entre deux sections */
  --sec-top: calc(var(--sec-gap) * .75);      /* haut des sections (position du surtitre) */
  --head-gap: clamp(1.6rem, 2.6vw, 2.4rem);   /* entre l'en-tête d'une section (surtitre + titre) et son contenu */
  --grid-gap: clamp(1rem, 2vw, 1.8rem);       /* entre les tuiles et les cartes d'une grille */
}
.home { --h-pad: clamp(1.25rem, 5.5vw, 5rem); }                  /* marges à gauche et à droite */
.exp13 { --x-gap: clamp(1rem, 2vw, 2rem); --pad-section: 3rem; } /* pages expédition : écart entre blocs, marge intérieure */
.doc14 { --doc-gap: var(--sec-gap); }                            /* page Documentary */

/* Sections */
.h-sec { padding: var(--sec-top) var(--h-pad) var(--sec-gap); }
.h-sec.h-sec--no-top, .h-sec.h-sec--flush { padding-top: 0; }           /* collée à la section du dessus */
.h-sec.h-sec--flush-top { padding-top: clamp(3rem, 6vw, 5rem); }
.h-sec.h-sec--tight-bottom { padding-bottom: clamp(2rem, 4vw, 3rem); }
.h-sec.j-banner-sec--full { padding-right: 0; padding-bottom: 0; padding-left: 0; }
.mf--centre { padding-top: var(--sec-top); padding-bottom: var(--sec-gap); }   /* accueil : manifeste */
.h-sec.h-connect { padding-top: calc(clamp(2.8rem, 4.5vw, 4rem) * .75); padding-bottom: clamp(2.8rem, 4.5vw, 4rem); } /* bandeau newsletter */
.doc14 .cine-approach-sec, .doc14 #films, .doc14 .doc-method + .cine-sec { padding-top: calc(var(--doc-gap) * .75); padding-bottom: var(--doc-gap); }
.doc14 .doc-method { padding-top: calc(var(--doc-gap) * .75); padding-bottom: 0; }

/* Entre l'en-tête d'une section et son contenu */
.h-head, .photo13-appr__head { margin-bottom: var(--head-gap); }
.exp13 .exp-section-header { padding: var(--pad-section) var(--h-pad) var(--head-gap); }
.ab-mission + .doc-flips, .ab-mission + .ab-hosts, .ab-mission + .ab-panels, .ab-mission + .ab-vt, .ab-mission + .ab-forest { margin-top: var(--head-gap); }
.h-head + .ab-panels { margin-top: 0; }

/* Grilles de tuiles et de cartes */
.j-grid, .doc-flips, .cine-grid, .photo13 .series-grid { gap: var(--grid-gap); }
.j-feat { margin-bottom: var(--grid-gap); }
/* Accueil, Inspirations : paragraphe d'introduction sous le titre */
.h-head__lead { max-width: 62ch; margin-top: 1.2rem; font-size: .98rem; line-height: 1.85; color: var(--c-text); }
/* Accueil, The founders : plus de lien sous les deux portraits, plus de légende sur la photo (ni dégradé) */
.h-founders__box > .h-duo:last-child { margin-bottom: 0; }
.h-founders__card:not(:has(.h-founders__cap))::after { display: none; }
/* Pages expédition : la ligne de l'itinéraire descend jusqu'à la fin du dernier jour et se termine sur une boule pleine */
.day-line--last::after { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-surtitle); }
.day-line--last { margin-bottom: 3rem; }   /* = marge basse du texte du jour : la boule tombe à hauteur de la dernière ligne */
/* écarts égaux : au-dessus et au-dessous du texte d'introduction ; en haut et en bas du texte de la tuile « About the expedition » */
.exp13 .exp-specs { margin-bottom: 0; }
.exp13 .exp-intro:not(.exp-intro--guest) .exp-intro__left { padding-top: clamp(3.5rem, 5vw, 4.5rem); padding-bottom: clamp(3.5rem, 5vw, 4.5rem); }
.exp13 .exp-experience__content > :last-child { margin-bottom: 0; }
/* Responsibility : lien vers les engagements de la page About */
.exp-commitment__link { display: inline-block; margin-top: 1.4rem; }
.exp13 .exp-commitment { scroll-margin-top: 6rem; }
#commitment { scroll-margin-top: 5rem; }
/* About, frise : lien sous le texte d'une étape (ex. « Watch the teaser ») */
.ab-vt__link { display: inline-block; margin-top: 1rem; }

/* About, Our commitment : dessins à la place des chiffres */
.ab-flips .doc-flip__front { justify-content: center; padding-top: 0; }
.ab-flips .doc-flip__draw { width: clamp(7.5rem, 10vw, 9.5rem); margin-bottom: 0.8rem; }

/* ── Pages d'expédition : avis de la destination ───────────── */
.exp-reviews { padding: var(--pad-section) var(--h-pad) 0; }
.exp-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap, 1.8rem); }
.exp-reviews__grid--1 { grid-template-columns: minmax(0, 40rem); justify-content: center; }
.exp-reviews__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exp-review__trip { color: var(--c-text); letter-spacing: .14em; }
@media (max-width: 860px) {
  .exp-reviews__grid, .exp-reviews__grid--2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .exp-reviews__grid .h-review { scroll-snap-align: start; }
  .exp-reviews__grid--1 { grid-auto-columns: 100%; }
}

/* ── Pages d'expédition : « How booking works » en 4 étapes ── */
.exp-steps { --steps-bg: var(--c-bg); padding-bottom: var(--pad-section); text-align: center; }
.exp13 .exp-steps__head { text-align: center; }
.exp-steps__list { list-style: none; margin: 0; padding: 0 var(--h-pad); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: none; }
.exp-step { display: flex; flex-direction: column; align-items: center; }
.exp-steps__draw { width: clamp(6.5rem, 9vw, 8.5rem); height: auto; color: var(--c-surtitle); filter: url(#ink); margin-bottom: 1.2rem; }
.exp-step__n { font-family: var(--font-serif); font-style: italic; color: var(--c-surtitle); font-size: 1rem; margin-bottom: .35rem; }
.exp-step h3 { font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.82rem, 1vw, .95rem); color: var(--c-title); margin-bottom: .8rem; }
.exp-step p { font-size: .9rem; line-height: 1.75; color: var(--c-text); max-width: 26ch; margin: 0 auto; }
.exp-step p a { color: var(--c-link); }
@media (max-width: 960px) { .exp-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; } }
@media (max-width: 520px) { .exp-steps__list { column-gap: 1.2rem; row-gap: 2.4rem; } .exp-steps__draw { width: 5.6rem; margin-bottom: .8rem; } .exp-step p { font-size: .82rem; line-height: 1.65; } }

/* ── Page Contact : deux formulaires (voyageurs / professionnels) ── */
.ct { padding: var(--pad-section) var(--h-pad); }
.ct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap, 1.8rem); align-items: stretch; }
.ct-card { background: var(--c-bg-alt); border-radius: var(--h-r); padding: clamp(1.8rem, 3.5vw, 3rem); display: flex; flex-direction: column; scroll-margin-top: 6rem; }
.ct-card .surtitre { margin-bottom: 1rem; }
.ct-card h2 { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; color: var(--c-title); }
.ct-card h2 em { color: var(--c-surtitle); }
.ct-card__lead { margin: 1rem 0 2rem; font-size: .92rem; line-height: 1.75; color: var(--c-text); max-width: 34rem; }
.ct-card--dark { background: var(--c-bg-dark); }
.ct-card--dark h2 { color: var(--c-on-dark); }
.ct-card--dark .ct-card__lead { color: color-mix(in srgb, var(--c-on-dark) 75%, transparent); }
.ct-form { display: flex; flex-direction: column; gap: 1.2rem; flex: 1; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.ct-field { display: flex; flex-direction: column; gap: .45rem; }
.ct-field > span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text); }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; font: inherit; font-size: .92rem; color: var(--c-title); background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-line) 14%, transparent); border-radius: .7rem; padding: .85rem 1rem; transition: border-color .3s ease; }
.ct-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c49a3c' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }
.ct-field textarea { resize: vertical; min-height: 8rem; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--c-surtitle); }
.ct-card--dark .ct-field > span { color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }
.ct-card--dark .ct-field input, .ct-card--dark .ct-field select, .ct-card--dark .ct-field textarea { background: color-mix(in srgb, var(--c-on-dark) 6%, transparent); color: var(--c-on-dark); border-color: color-mix(in srgb, var(--c-on-dark) 18%, transparent); }
.ct-card--dark .ct-field select option { color: var(--c-title); }
.ct-btn { align-self: flex-start; margin-top: auto; border: 0; cursor: pointer; padding: 1rem 2rem; border-radius: 999px; background: var(--c-btn-bg); color: var(--c-btn-text); font: inherit; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; transition: opacity .3s ease; }
.ct-btn:hover { opacity: .85; }
.ct-btn--light { background: var(--c-surtitle); color: var(--c-bg-dark); }
.ct-tally { width: 100%; min-height: 32rem; border: 0; }
.ct-direct { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 6vw, 6rem); text-align: center; margin-top: clamp(3rem, 6vw, 4.5rem); }
.ct-direct .surtitre { display: block; margin-bottom: .5rem; }
.ct-direct a, .ct-direct p { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.25rem; color: var(--c-title); text-decoration: none; }
.ct-direct a:hover { color: var(--c-link); }
.ct-note { text-align: center; font-size: .8rem; color: var(--c-text); opacity: .75; margin: 2rem auto 0; max-width: 36rem; line-height: 1.7; }
@media (max-width: 960px) {
  .ct__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ct-row { grid-template-columns: 1fr; }
}

/* ── Fiches expédition : barre de réservation fixe (mobile et tablette) ── */
.exp-mbar { display: none; }
@media (max-width: 1179px) {
  .exp-mbar { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem .55rem 1.1rem; background: var(--c-bg-dark); color: var(--c-on-dark); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
  .exp-mbar.is-on { transform: none; opacity: 1; }
  .exp-mbar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
  .exp-mbar__dates { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-surtitle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp-mbar__price { font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.15rem; white-space: nowrap; }
  .exp-mbar__ask, .exp-mbar__book { flex: none; text-decoration: none; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; padding: .8rem 1rem; white-space: nowrap; }
  .exp-mbar__ask { color: var(--c-on-dark); border: 1px solid color-mix(in srgb, var(--c-on-dark) 30%, transparent); }
  .exp-mbar__book { background: var(--c-surtitle); color: var(--c-bg-dark); padding: .8rem 1.3rem; }
}
@media (max-width: 400px) {
  .exp-mbar__ask { padding: .8rem .75rem; letter-spacing: .1em; }
}

/* Accueil, prochaines expéditions : la ligne durée · date · prix alignée en bas des 3 cartes */
.h-feat__grid .h-card .h-meta { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   TABLETTE (601 à 1024 px) : accueil
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 1024px) {
  /* hero : moins haut que l'écran d'une tablette en portrait */
  .h-hero { height: min(calc(100vh - var(--h-nav, 75px)), 52rem); min-height: 34rem; }
  .h-hero__half { font-size: clamp(1.9rem, 4.2vw, 3rem); }
  .h-hero__txt { left: clamp(1.2rem, 3vw, 2rem); right: clamp(1.2rem, 3vw, 2rem); }
  .h-hero__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
  .h-hero__text { font-size: .85rem; }
  .h-hero__go { padding: .85rem 1.3rem; }
  /* la dune de gauche remonte un peu pour être au niveau de celle de droite, comme sur ordinateur */
  .h-hero__p:first-of-type img { top: -5%; height: 105%; }
  /* the way we travel : panneaux un peu moins hauts, titres fermés plus petits */
  .ab-panels { height: 26rem; gap: .8rem; }
  .ab-panel:not(.is-open) h3 { font-size: 1rem; }
  .ab-panel__txt { padding: 1.2rem; }
  /* beyond the expeditions : textes plus compacts sur 3 colonnes */
  .h-story h3 { font-size: 1.4rem; }
  .h-story p { font-size: .85rem; }
}
@media (min-width: 601px) and (max-width: 860px) {
  /* founders : la photo à gauche du texte, à la hauteur du texte */
  .h-founders { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .h-founders__card { min-height: 0; }
  .h-duo { grid-template-columns: 1fr; gap: 1rem; }
  /* prochaines expéditions : photos au format 3:2 */
  .h-feat__grid .h-card .h-ph, .h-feat__grid .h-card:first-child .h-ph { aspect-ratio: 3 / 2; min-height: 0; }
  /* latest news : chiffre, petite photo, texte à droite */
  .h-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .h-row__media { grid-template-columns: 3rem minmax(0, 1fr); }
  .h-row__num { font-size: 2.2rem; }
  .h-row__txt { padding: 1.2rem 1.4rem; }
  .h-row h3 { font-size: 1.3rem; }
  .h-row p { font-size: .85rem; line-height: 1.6; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* newsletter + instagram : deux colonnes plus serrées */
  .h-connect__nl { padding-right: 2rem; }
  .h-connect__ig { padding-left: 2rem; }
  .h-connect h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
  .h-connect__id { gap: .7rem; }
  .h-connect__id .h-connect__avatar { width: 48px; height: 48px; }
}
@media (max-width: 860px) {
  /* page Expeditions, section Photography (tablette et téléphone) : le texte d'abord, la photo ensuite */
  .h-edito__lead--fill > .h-ph { order: 2; }
}

/* Photography, tuiles des séries sur tablette et téléphone (jusqu'à 1024 px) : pas de survol possible,
   les infos sont toujours visibles. Toute la tuile est un lien, donc « View series » est retiré. */
@media (max-width: 1024px) {
  .series-card .series-card-subtitle { max-height: none; opacity: 1; overflow: visible; }
  .series-card .series-card-meta { max-height: none; opacity: 1; transform: none; overflow: visible; margin-top: .9rem; }
  .series-card .series-card-cta { display: none; }
  .series-card-cat { white-space: nowrap; }
  .series-card-info { padding: 1.4rem 1.5rem; }
  .series-card-subtitle { font-size: .88rem; line-height: 1.45; }
  .series-card-overlay, .series-card:hover .series-card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--c-bg-dark) 92%, transparent) 0%, color-mix(in srgb, var(--c-bg-dark) 45%, transparent) 38%, transparent 70%); }
}

/* Photography, Our approach sur tablette : les 3 photos côte à côte, comme sur ordinateur */
@media (min-width: 601px) and (max-width: 1024px) {
  .photo13-pillar { aspect-ratio: auto; min-height: 28rem; gap: 1rem; }
  .photo13-pillar__num { font-size: 2.4rem; padding: 1.1rem 1.2rem 0; }
  .photo13-pillar__txt { padding: 1.1rem 1.2rem 1.3rem; }
  .photo13-pillar__txt h3 { font-size: 1.3rem; margin-bottom: .5rem; }
  .photo13-pillar__txt p { font-size: .82rem; line-height: 1.6; margin-bottom: .9rem; }
  .photo13-pillar__from { font-size: .58rem; letter-spacing: .12em; gap: .35rem; }
  /* « Seen in » sous la photo : la photo s'arrête au-dessus, le texte descend */
  .photo13-pillar { --seen: 2.8rem; padding-bottom: var(--seen); min-height: 29rem; }
  .photo13-pillar img { bottom: auto; height: calc(100% - var(--seen)); }
  .photo13-pillar::after { bottom: var(--seen); border-radius: 0 0 var(--h-r) var(--h-r); }
  .photo13-pillar__txt p { margin-bottom: 0; }
  .photo13-pillar__from { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--seen); margin: 0; padding: 0 .2rem; border-top: 0; background: var(--c-bg-dark); padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE FILM sur tablette et téléphone : pas de survol
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* cartes des films : infos et bouton lecture toujours visibles */
  .cine-card .cine-frame__more { max-height: none; opacity: 1; overflow: visible; padding-top: .5rem; transform: none; }
  .cine-card .d-play { opacity: 1; top: 1rem; left: auto; right: 1rem; transform: none; }
  .cine-card:hover .d-play, .cine-card:focus-visible .d-play { transform: none; }
  .cine-frame::before { background: linear-gradient(to top, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .45) 50%, rgb(0 0 0 / .1) 100%); }
  /* tuiles recto/verso : elles se retournent au toucher (clic), plus au survol */
  .doc-flip:hover .doc-flip__inner, .doc-flip:focus .doc-flip__inner { transform: none; }
  .doc-flip.is-flipped .doc-flip__inner { transform: rotateY(-180deg); }
  .doc-flip { cursor: pointer; }
  .doc-flip.is-flipped .doc-flip__plus { transform: rotate(45deg); }  /* pastilles de catégorie : un vrai espace entre elles */
  .cine-pill + .cine-pill { margin-left: 0; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  /* deux films côte à côte : l'image entière en 16:9 en haut, les infos en dessous sur fond sombre,
     le bouton lecture au centre de l'image */
  .cine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cine-card { display: flex; flex-direction: column; }
  .cine-frame { aspect-ratio: auto; flex: 1; display: flex; flex-direction: column; background: var(--c-bg-dark); container-type: inline-size; }
  .cine-frame::before { display: none; }
  .cine-frame img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .cine-frame__title { position: relative; flex: 1; }
  .cine-card .d-play, .cine-card:hover .d-play, .cine-card:focus-visible .d-play { top: 28.125cqw; left: 50%; right: auto; transform: translate(-50%, -50%); }
  .cine-frame h3 { font-size: 1.6rem; }
  .cine-frame .h-exp__slogan { font-size: .95rem; }
  .cine-frame__actions { margin-top: .8rem; gap: .5rem; }
  /* From first meeting to final cut : les 3 tuiles côte à côte, carrées */
  .doc-flips.doc-flips--draw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .doc-flips--draw .doc-flip { aspect-ratio: 1 / 1; }
  .doc-flips--draw .doc-flip__draw { width: 5.5rem; margin-bottom: 1rem; }
  .doc-flips--draw .doc-flip__front h3 { font-size: .78rem; }
  .doc-flips--draw .doc-flip__back { padding: 1.2rem; }
  .doc-flips--draw .doc-flip__back p { font-size: .82rem; line-height: 1.6; }
  .doc-flips--draw .doc-flip__plus { right: .9rem; bottom: .7rem; font-size: 1.3rem; }
}

/* Journal sur tablette : la photo du hero commence sous le menu, avec une marge fixe */
@media (min-width: 601px) and (max-width: 1024px) {
  .h-sec.j-banner-sec { padding-top: calc(90px + 1.5rem); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : accueil
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* prochaines expéditions : photos carrées */
  .h-feat__grid .h-card .h-ph, .h-feat__grid .h-card:first-child .h-ph { aspect-ratio: 1 / 1; min-height: 0; }
  /* visual stories : photos carrées, de l'air sous les liens « All photo series »… */
  .h-story .h-ph { aspect-ratio: 1 / 1; }
  .h-stories { row-gap: 3rem; }
  /* latest news : le chiffre, puis la photo, puis les infos centrées */
  .h-row { text-align: center; }
  .h-row__media { display: flex; flex-direction: column; align-items: stretch; }
  .h-row__num { padding: 1.3rem 0 1rem; font-size: 2.4rem; }
  .h-row__media .h-ph { aspect-ratio: 3 / 2; height: auto; }
  .h-row__txt { align-items: center; padding: 1.4rem 1.4rem 1.6rem; }
  .h-row .link-underline { align-self: center; }
  .h-row p { margin-left: auto; margin-right: auto; }
  /* newsletter : tout centré */
  .h-connect__nl { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .h-connect__nl p { margin-left: auto; margin-right: auto; }
  /* the way we travel : le chiffre ne chevauche plus le titre */
  .ab-panel__n { margin-bottom: .5rem; }
  /* prochaines expéditions : « View all » passe sous les cartes */
  .h-sec:has(> .h-more) > .h-head > .link-underline { display: none; }
  .h-more { display: flex; justify-content: center; margin-top: 2.8rem; }
  /* prochaines expéditions : plus d'air entre les cartes, et un trait pour séparer chaque expédition */
  .h-feat__grid { row-gap: 0; }
  .h-feat__grid .h-card + .h-card { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid color-mix(in srgb, var(--c-line) 22%, transparent); }
  .h-feat__grid .h-card .h-meta { margin-top: .4rem; border-top: 0; padding-top: 0; }
  /* hero : les deux volets tiennent dans un seul écran, l'un au-dessus de l'autre */
  .h-hero { height: calc(100svh - var(--h-nav, 75px)); min-height: 30rem; gap: 2px; }
  .h-hero__p, .h-hero:hover .h-hero__p, .h-hero .h-hero__p:hover { flex: 1 1 0; height: auto; min-height: 0; }
  .h-hero__p .h-hero__half, .h-hero__p:first-of-type .h-hero__half { top: 1rem; font-size: 1.95rem; }
  .h-hero__p::after { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.78) 100%); }
  /* bas du volet : titre sur toute la largeur, puis le texte à gauche et le bouton en bas à droite */
  .h-hero__txt { left: var(--h-pad, 1.25rem); right: var(--h-pad, 1.25rem); bottom: 1rem; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: end; }
  .h-hero__title { grid-column: 1 / -1; font-size: 1.55rem; margin-bottom: .1rem; }
  .h-hero__text { grid-column: 1; font-size: .74rem; line-height: 1.45; margin-bottom: 0; max-width: none; }
  .h-hero__go { grid-column: 2; padding: .62rem .9rem; font-size: .56rem; letter-spacing: .1em; white-space: nowrap; }
  /* volet « Photo expeditions » : photo zoomée et remontée, le titre doré tombe entièrement sur la dune */
  .h-hero__p:last-of-type img { top: auto; bottom: 0; height: 120%; }
}

/* Page Expeditions sur téléphone : chaque destination en colonne, photo au-dessus, texte en dessous */
@media (max-width: 600px) {
  .h-exps .h-exp { grid-template-columns: 1fr; }
  .h-exps .h-exp .h-ph, .h-exps .h-exp--reverse .h-ph { order: 0; aspect-ratio: 4 / 3; min-height: 0; height: auto; }
  .h-exps .h-exp__txt { padding: 1.6rem 1.4rem 1.8rem; }
  .h-exps .h-exp h2 { font-size: 1.9rem; }
  .h-exps .h-exp__slogan { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : page Photography
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* hero : photo décalée vers la droite pour garder la silhouette du photographe dans le cadre */
  .photo13 .h-cover > img { object-position: 88% 100% !important; }
  /* tuiles des séries : seulement le titre et le sous-titre (pays, catégorie et bouton masqués) */
  .photo13 .series-card .series-card-type,
  .photo13 .series-card .series-card-meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : page Film
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* tuiles des films : l'image entière en 16:9 en haut, les infos en dessous sur fond sombre,
     le bouton lecture au centre de l'image (même principe que sur tablette) */
  .cine-card { display: flex; flex-direction: column; }
  .cine-frame { aspect-ratio: auto; flex: 1; display: flex; flex-direction: column; background: var(--c-bg-dark); container-type: inline-size; }
  .cine-frame::before { display: none; }
  .cine-frame img { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .cine-frame__title { position: relative; flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
  .cine-card .d-play, .cine-card:hover .d-play, .cine-card:focus-visible .d-play { top: 28.125cqw; left: 50%; right: auto; transform: translate(-50%, -50%); }
  .cine-frame h3 { font-size: 1.6rem; }
  .cine-frame .h-exp__slogan { font-size: .95rem; }
  .cine-frame__actions { margin-top: .8rem; gap: .5rem; }
  /* hero : les deux silhouettes d'enfants au centre de l'écran */
  .doc14 .h-cover > img { object-position: 41% 60% !important; }
  /* « From first meeting » / « to final cut » sur deux lignes */
  .doc-method .h-title em { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : page Journal
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* la photo du hero commence sous le menu, avec un écart de sécurité */
  .h-sec.j-banner-sec { padding-top: calc(75px + 1.25rem); }
  /* « The Journal » en bas de la photo, à la même distance du bas que les titres des autres pages */
  .j-banner__title { justify-content: flex-end; padding: 0 var(--h-pad, 1.25rem) clamp(3rem, 11vh, 7rem); }
  /* cadrage : Emilie au centre, sa main entière dans le cadre
     (bandeau un peu moins haut pour montrer plus de largeur de la photo) */
  .j-banner.j-banner--vintage { height: 34rem; min-height: 0; }
  .j-banner--vintage > img { object-position: 35% 60% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : page About
   ═══════════════════════════════════════════════════════════════════════ */
.ab-commit-head { display: none; }
@media (max-width: 600px) {
  /* hero : photo légèrement décalée, Thomas et Emilie moins au bord du cadre */
  .ab14 .h-cover > img { object-position: 38% 50%; }
  /* Key dates : fin liseré doré autour de chaque tuile */
  .ab-story .ab-vt__card { border: 1px solid color-mix(in srgb, var(--c-surtitle) 55%, transparent); }
  /* 2018 et 2022, bloc Thomas / Emilie : photo et nom côte à côte, puis le texte sur toute la largeur */
  .ab-story .ab-vt__founder { grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: .9rem; align-items: center; }
  .ab-story .ab-vt__ph { width: 4.6rem; }
  .ab-story .ab-vt__ftxt { display: contents; }
  .ab-story .ab-vt__ftxt h4 { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--font-serif); font-weight: var(--w-serif); font-size: 1.35rem; line-height: 1.15; }
  .ab-story .ab-vt__ftxt > p, .ab-story .ab-vt__more, .ab-story .ab-vt__toggle { grid-column: 1 / -1; }
  .ab-story .ab-vt__ftxt p { font-size: .88rem; line-height: 1.7; margin-bottom: 0; }
  .ab-story .ab-vt__toggle { justify-self: start; margin-top: 0; }
  /* Our commitment : surtitre et titre centrés au-dessus de la photo, le paragraphe reste sur la photo */
  .ab-commit-head { display: block; text-align: center; margin-bottom: 1.8rem; }
  .ab-commit-head .surtitre { display: block; margin-bottom: .8rem; }
  .ab-commit-head .h-title em { color: var(--c-surtitle); }
  .ab-forest__txt .surtitre, .ab-forest__txt h2 { display: none; }
  .ab-forest--txt { min-height: 22rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600 px) : page Mauritania
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* hero un peu moins haut pour montrer plus de largeur : le chamelier au centre, un chameau entier de chaque côté */
  .exp13 .exp-hero--mauritania { height: 70vh; min-height: 0; }
  .exp-hero--mauritania .exp-hero__image-wrap img { object-position: 37.5% 50%; }
  /* texte descendu : le surtitre se lit sur le sable, sous la caravane */
  .exp13 .exp-hero--mauritania .exp-hero__content { padding-bottom: 2.4rem; }
  /* même position du texte sur les autres fiches expédition (Madagascar, Spiti Valley, Mongolia…) */
  .exp13 .exp-hero__content { padding-bottom: 2.4rem; }
  /* flèche « retour en haut » : elle remonte au-dessus de la barre de réservation fixe quand celle-ci est affichée */
  .back-to-top { transition: opacity .3s ease, transform .3s ease, bottom .4s ease; }
  body:has(.exp-mbar.is-on) .back-to-top { bottom: calc(5.2rem + env(safe-area-inset-bottom)); right: 1rem; }
}