/* ==========================================================================
   Séverine Baur — Maquette de direction artistique
   v2 : sidebar verticale, typo Fraunces + Inter, voix éditoriale resserrée.
   Sans framework, sans JavaScript.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* --- Variables --------------------------------------------------------- */
:root {
  --bg: #FAFAF7;            /* ivoire chaud */
  --ink: #1A1A1A;           /* presque noir */
  --ink-soft: #6E6259;      /* gris chaud, métadonnées */
  --ink-quiet: #A8A39C;     /* gris très clair, accessoire */
  --rule: #E8E5DF;          /* filets très discrets */
  --gold: #C09B5A;          /* or — indicateur nav actif */

  --serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sidebar: 240px;
  --pad-x: 64px;
  --pad-x-mobile: 22px;
}

/* --- Body -------------------------------------------------------------- */
body {
  font-family: var(--serif);
  background-color: var(--bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: 'opsz' 14, 'SOFT' 30;
}

/* --- Accessibilité ----------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Page d’accueil — splash plein écran (index.html uniquement)
   Sidebar absente du markup ; composition photographique pleine page.
   ========================================================================== */

.page-splash {
  background: var(--bg); /* ivoire — le noir du diaporama est porté par .splash lui-même */
  overflow-x: hidden; /* vertical scroll autorisé pour le triptyque sous le splash */
}

.splash {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* hauteur dynamique iOS */
  overflow: hidden;
  background: #000;
}

.splash-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  transform-origin: 50% 40%; /* aligné sur object-position */
  will-change: transform;
}

/* ── Ken Burns — zoom-avant léger sur chaque image du diaporama ────────── */
/* Démarre pendant le fondu d'entrée, se termine pendant le fondu de sortie */
@keyframes kb-zoomin {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}
.splash-photo.kb-playing {
  animation: kb-zoomin 14s linear forwards;
}

/* Écran noir pour les transitions du diaporama (z-index 1 : au-dessus du
   voile, en-dessous du logo et des actions qui sont à z-index 2). */
.splash-blackout {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 1s ease;
}

/* Voile sombre très léger en haut, uniquement pour la lisibilité
   du logo et des actions. Centre et bas de l’image intacts. */
.splash-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.12) 22%,
    rgba(0, 0, 0, 0)    42%
  );
}

/* --- Logo, centré en haut ---------------------------------------------- */
/*
  PNG identité blanche : ratio 2400×700, padding transparent ~33 % haut
  et ~38 % bas. À 560px de large : image 163px de haut, padding top ≈ 40px.
  Le wordmark visible apparaît naturellement à ~40px du haut du viewport.
  overflow:hidden sur .splash clippe tout débord.
*/
.splash-brand {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 448px;   /* 560 × 0.8 — réduit de 20 % */
  z-index: 2;
  pointer-events: auto; /* lien cliquable vers Regard */
  cursor: pointer;
}

.splash-brand img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Actions, centré en bas -------------------------------------------- */
.splash-actions {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  z-index: 2;
}

/* Flèche d'entrée — remplace le mot ENTRER */
.splash-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 6px;
  animation: sb-enter-bounce 2.6s ease-in-out infinite;
}
.splash-enter:hover,
.splash-enter:focus-visible {
  animation-play-state: paused;
  opacity: 0.95;
  outline: none;
}

@keyframes sb-enter-bounce {
  0%, 100% { transform: translateY(0);    opacity: 0.62; }
  50%       { transform: translateY(10px); opacity: 0.95; }
}

.splash-separator {
  width: 190px;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  margin: 6px auto 5px;
}

.splash-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.splash-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #fff;
  transition: opacity 200ms ease;
}

.splash-socials a:hover,
.splash-socials a:focus-visible { opacity: 0.55; }

.splash-socials svg { display: block; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .splash-brand {
    top: 40px;
    width: 320px;   /* 400 × 0.8 */
  }
  .splash-actions {
    bottom: 48px;
    gap: 9px;
  }
  .splash-socials { gap: 16px; }
  .splash-socials a { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .splash-brand {
    top: 43px;
    width: 260px;
  }
  .splash-actions {
    bottom: 40px;
    gap: 8px;
  }
  .splash-socials { gap: 14px; }
  .splash-socials a { width: 17px; height: 17px; }
  .splash-socials svg { width: 17px; height: 17px; }
}

/* ==========================================================================
   Page d'accueil — triptyque & CTA Missions (sous le splash)
   ========================================================================== */

/* Conteneur global des sections d'accueil — fond ivoire */
.accueil-sections {
  background: var(--bg);
  /* Pas de transform / will-change / animation sur ce conteneur :
     le texte doit se rendre sur la même couche CPU que les pages intérieures. */
}

/* Chapeau de l'accueil : même espace que les pages intérieures */
.accueil-sections .regard-chapeau {
  margin-top: 56px;
}

/* ── Section triptyque ──────────────────────────────────────────────────────── */
.accueil-triptique-section {
  padding: 48px 16px 72px;
  max-width: 1320px;
  margin: 0 auto;
}

.accueil-triptique-intro {
  text-align: center;
  margin-bottom: 64px;
}

.accueil-triptique-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 18px;
}

.accueil-triptique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.accueil-triptique-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}

.accueil-triptique-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.accueil-triptique-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}

.accueil-triptique-card:hover .accueil-triptique-img-wrap::after {
  background: rgba(0, 0, 0, 0.10);
}

.accueil-triptique-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s ease;
}

.accueil-triptique-card:hover .accueil-triptique-img {
  transform: scale(1.02);
}

.accueil-triptique-name {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.accueil-triptique-desc {
  margin-top: 10px;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 14, 'SOFT' 40;
  text-align: center;
}

/* ── Section CTA Missions ───────────────────────────────────────────────────── */
.accueil-missions-cta {
  background: var(--bg);
  border-top: 0.5px solid var(--rule);
  padding: 60px var(--pad-x) 96px;
  text-align: center;
}

.accueil-missions-texte {
  max-width: 540px;
  margin: 0 auto 36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.80;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 14, 'SOFT' 40;
}

/* ── Responsive triptyque ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .accueil-triptique-section { padding: 72px var(--pad-x-mobile) 56px; }
  .accueil-triptique { gap: 28px; }
  .accueil-missions-cta { padding: 60px var(--pad-x-mobile) 72px; }
}

@media (max-width: 680px) {
  .accueil-triptique {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .accueil-triptique-name { font-size: 18px; }
}

/* ==========================================================================
   Mise en page intérieure v3 — logo centré + nav horizontale + phrase bas
   Remplace la sidebar pour toutes les pages intérieures.
   ========================================================================== */

.page-interior { background: var(--bg); }

/* ── Fondu d'entrée de page ─────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Colonne centrale, pleine hauteur */
.interior-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  animation: page-enter 2s ease both;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.interior-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44px;
}

/* Logo — même PNG identité noire, centré, plus petit que le hero */
.interior-brand {
  display: block;
  width: 340px;
  pointer-events: auto;
}
.interior-brand img {
  width: 100%;
  height: auto;
  display: block;
}

/* Navigation horizontale */
.interior-nav { margin-top: 18px; }
.interior-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 44px;
  justify-content: center;
}
.interior-nav a {
  position: relative;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 180ms ease;
}
.interior-nav a:hover,
.interior-nav a:focus-visible { color: var(--ink); }

/* Indicateur de page active — trait fin centré sous le texte */
.interior-nav a.is-active { color: var(--ink); }
.interior-nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--gold);
}

/* ── Contenu principal ───────────────────────────────────────────────────── */
.interior-main {
  width: 100%;
  max-width: 1320px;
  padding: 56px 16px 32px;
  flex: 1;
}


/* ── Responsive intérieur ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .interior-brand { width: 320px; }   /* aligné sur splash-brand 900px */
  .interior-nav ul { gap: 28px; }
  .interior-main { padding: 40px 8px 24px; }
}

@media (max-width: 600px) {
  .interior-nav { margin-top: 9px; }
  .interior-nav ul { gap: 16px; }
  .interior-nav a { font-size: 9.5px; letter-spacing: 0.12em; }
  .interior-main { padding: 32px 6px 20px; }
}

@media (max-width: 480px) {
  .interior-brand { width: 260px; }   /* ≤ 480px : même taille que splash-brand */
}

/* ==========================================================================
   Visionneuse inline — fond ivoire, dans la mise en page
   Remplace la grille de photos sans quitter la page.
   ========================================================================== */


/* ── Visionneuse inline — photo pleine largeur, barre de contrôle en bas ── */
.inline-viewer {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg);
  cursor: pointer; /* clic fond = fermer */
}
.inline-viewer.is-open { display: flex; }

/* Photo + légende — pleine largeur, ne ferme pas */
.inline-viewer-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: default;
}
.inline-viewer-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 230px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
}
.inline-viewer-caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  cursor: default;
}


/* ==========================================================================
   Page Regard — barre de contrôles ← S M L → et grille adaptative
   Uniquement pour data-page="regard". Ne touche pas les autres pages.
   ========================================================================== */

/* ── Chapeau introductif ─────────────────────────────────────────────────── */
.regard-chapeau {
  max-width: 640px;
  margin: 0 auto 52px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.025em;
  color: var(--ink-soft);
  text-align: center;
}

/* Dernière phrase sur sa propre ligne, avec espace plus important avant */
/* Classe sémantique partagée accueil + regard (alias de .regard-chapeau-finale) */
.regard-chapeau-finale,
.sb-gold-sentence {
  display: block;
  margin-top: 0.66em;
  font-size: 1.5em;
  font-weight: 300;
  color: var(--gold);
}

/* ── Regard — cartes de séries (accordéon + fondu croisé SML) ───────────── */
.regard-serie {
  margin: 50px 0;
}

/* ── Preview (image + overlay titre) ──────────────────────────────────── */
.regard-serie-head {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

/* Wrapper à 67% de largeur — garde l'overlay calé sur l'image */
.regard-serie-preview {
  position: relative;
  width: 67%;
  overflow: hidden; /* contient le zoom scale(1.02) */
}

/* Image en ratio naturel, sans rognage */
.regard-serie-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s ease;
}

.regard-serie-head:hover .regard-serie-img {
  transform: scale(1.02);
}

.regard-serie-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.30) 50%,
    rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
  transition: background 0.6s ease;
}

.regard-serie-head:hover .regard-serie-overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.20) 50%,
    rgba(0, 0, 0, 0.04) 100%);
}

/* Classe sémantique partagée accueil + pages intérieures */
.regard-serie-titre,
.sb-section-title {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ── Sous-titre de série (ex. Plymouth sous College of Art) ─────────────── */
.regard-serie-overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.regard-serie-sous-titre {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 7px;
}
.regard-serie-overlay .regard-serie-sous-titre {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ── Corps SML (caché par défaut, apparaît par fondu) ─────────────────── */
.regard-serie-body {
  display: none;
}

/* Bandeau-titre cliquable au-dessus du module SML */
.regard-serie-body-header {
  background: var(--bg);
  padding: 28px 0 22px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.25s ease;
}
.regard-serie-body-header:hover {
  opacity: 0.6;
}

.regard-serie-body-titre {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Chapeaux introductifs — Métier & Horizons ───────────────────────────── */
.metier-chapeau,
.horizons-chapeau {
  max-width: 640px;
  margin: 0 auto 52px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.025em;
  color: var(--ink-soft);
  text-align: center;
}

.metier-chapeau-finale,
.horizons-chapeau-finale {
  display: block;
  margin-top: 0.66em;
}
.horizons-chapeau-finale {
  font-size: 1.5em;
  font-weight: 300;
  color: var(--gold);
}
/* Accent or réutilisable — un besoin irrépressible, etc. */
.sb-peak {
  display: block;
  margin-top: 0.66em;
  font-size: 1.5em;
  font-weight: 300;
  color: var(--gold);
}

/* ── Mobile — chapeaux + phrases or + triptique accueil + UNIVERS ─────────── */
@media (max-width: 600px) {
  /* Marges latérales des chapeaux */
  .regard-chapeau,
  .metier-chapeau,
  .horizons-chapeau { padding: 0 28px; }

  /* Phrases en or → 1.25em */
  .regard-chapeau-finale,
  .sb-gold-sentence,
  .horizons-chapeau-finale,
  .sb-peak { font-size: 1.25em; }

  /* Titres des vignettes accueil (Métier / Horizon / Regard) : taille inchangée */
  /* (pas de surcharge ici — revenu à 21px par défaut) */
}

/* ── Barre de contrôles : ← S M L → ─────────────────────────────────────── */
.regard-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 32px;
}

/* Boutons S / M / L */
.regard-modes {
  display: flex;
  align-items: center;
  gap: 20px;
}

.regard-mode-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 0;
  line-height: 1;
  transition: color 160ms ease;
}

.regard-mode-btn:hover { color: var(--ink-soft); }
.regard-mode-btn[aria-pressed="true"] { color: var(--gold); }

/* Flèches de navigation — visibles uniquement en mode L */
.regard-nav-prev,
.regard-nav-next {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  color: var(--ink-quiet);
  padding: 0;
  width: 24px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: color 160ms ease, opacity 200ms ease;
  user-select: none;
}

.regard-controls.is-l .regard-nav-prev,
.regard-controls.is-l .regard-nav-next {
  opacity: 0.45;
  pointer-events: auto;
}

.regard-controls.is-l .regard-nav-prev:hover,
.regard-controls.is-l .regard-nav-next:hover {
  opacity: 1;
  color: var(--ink);
}

/* ── Grille — conteneur neutre ───────────────────────────────────────────── */
.regard-grid { width: 100%; }
.regard-grid figure { margin: 0; }

/* ── Mode S — index compact, 4 colonnes, espacement 18 px, sans légendes ── */
.regard-grid.mode-s {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.regard-grid.mode-s figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.regard-grid.mode-s figure img:hover { opacity: 0.82; }

.regard-grid.mode-s figcaption { display: none; }

/* ── Mode M — 2 colonnes, légendes au survol ─────────────────────────────── */
.regard-grid.mode-m {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 56px;
}

.regard-grid.mode-m figure img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.regard-grid.mode-m figure img:hover { opacity: 0.88; }

.regard-grid.mode-m figcaption {
  margin-top: 9px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transition: opacity 180ms ease;
}

.regard-grid.mode-m figure:hover figcaption { opacity: 1; }

/* ── Espace bas de page — le footnav fournit son propre padding ─────────── */
[data-page="regard"] .interior-main  { padding-bottom: 0; }
[data-page="metier"] .interior-main  { padding-bottom: 0; }
[data-page="horizons"] .interior-main { padding-bottom: 0; }

/* ── Contact — espace menu → bloc photo-bio +50 % (56 → 84px) ──────────── */
[data-page="severine"] .interior-main { padding-top: 109px; }

/* ── Mode L — visionneuse centrée, fondu entre images ───────────────────── */
[data-page="regard"] .inline-viewer {
  cursor: default;
  width: 100%;
}

[data-page="regard"] .inline-viewer-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: default;
  position: relative; /* pour le bouton plein écran absolu */
}

[data-page="regard"] .inline-viewer-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.5s ease;
}

[data-page="regard"] .inline-viewer-caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  cursor: default;
  transition: opacity 0.5s ease;
}


/* ── Responsive Regard ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .regard-grid.mode-s {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .regard-grid.mode-m {
    column-gap: 24px;
    row-gap: 44px;
  }
}

@media (max-width: 600px) {
  .regard-controls { gap: 16px; }
  .regard-grid.mode-s {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .regard-grid.mode-m {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
}

/* ── Page Séverine — layout centré ──────────────────────────────────────── */
/* ── Mise en page — photo gauche / texte droite ─────────────────────────────── */
.severine-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 56px;
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 64px;
}

.severine-photo {
  flex: 0 0 auto;
  width: 42%;          /* environ la moitié — laisse un peu plus d'espace au texte */
}
.severine-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Colonne de droite ───────────────────────────────────────────────────────── */
.severine-right {
  flex: 1;
  min-width: 0;
}

/* ── Bio — même style que les chapeaux des autres pages ─────────────────────── */
.severine-bio { width: 100%; }
.severine-bio p {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.025em;
  color: var(--ink-soft);
  text-align: left;
  margin-bottom: 0;
}
.severine-bio p + p { margin-top: 18px; }

/* ── Contact ─────────────────────────────────────────────────────────────────── */
.severine-contact-block {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.severine-contact-block p {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 2;
  text-align: left;
}
.severine-contact-logo {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 0 8px;
  opacity: 0.75;
}

/* Boutons EMAIL / TÉLÉPHONE */
.sev-contact-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: inherit;
  transition: color 180ms ease;
}
.sev-contact-btn:hover { color: var(--ink); }

/* État révélé (numéro de téléphone affiché) */
.sev-contact-btn[data-revealed] {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

/* ── Socials ─────────────────────────────────────────────────────────────────── */
.severine-socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 20px;
}
.severine-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  border-bottom: none;
  transition: color 180ms ease;
}
.severine-socials a:hover { color: var(--ink); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .severine-wrap {
    flex-direction: column;
    gap: 32px;
    padding: 0 0 64px;     /* marges gérées par photo + right */
  }
  .severine-photo {
    width: 67%;            /* même largeur que les vignettes métier */
    margin: 0 auto;
  }
  .severine-right {
    width: 67%;            /* texte aligné sur la même emprise */
    margin: 0 auto;
  }
  .severine-bio p {
    text-align: justify;
  }
  .severine-contact-block {
    text-align: center;    /* picto SB, email, tél centrés */
  }
  .severine-contact-block p { text-align: center; }
  .severine-contact-logo { margin: 0 auto 8px; }
  .severine-socials { justify-content: center; }
}

/* ==========================================================================
   Pages Métier, Horizons & Accueil — visionneuse inline
   ========================================================================== */

/* ── Visionneuse inline — Métier, Horizons & Accueil (même UX que Regard) ── */
[data-page="metier"] .inline-viewer,
[data-page="horizons"] .inline-viewer,
[data-page="index"] .inline-viewer {
  cursor: default;
  width: 100%;
}

[data-page="metier"] .inline-viewer-figure,
[data-page="horizons"] .inline-viewer-figure,
[data-page="index"] .inline-viewer-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: default;
}

[data-page="metier"] .inline-viewer-img,
[data-page="horizons"] .inline-viewer-img,
[data-page="index"] .inline-viewer-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

[data-page="metier"] .inline-viewer-caption,
[data-page="horizons"] .inline-viewer-caption,
[data-page="index"] .inline-viewer-caption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  cursor: default;
  transition: opacity 0.5s ease;
}



/* ==========================================================================
   Page Métier v2 — liste de séries avec volets accordéon
   ========================================================================== */

.metier-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 860px;
  margin: 24px auto 72px;
}

/* ── Séparateur fin entre séries ─────────────────────────────────────────── */
.metier-sep {
  height: 1px;
  background: var(--rule);
  margin: 0 16%;
}

/* ── Section UNIVERS — séries réalisées pour des clients ─────────────────── */
.metier-univers-header {
  text-align: center;
  padding: 56px 0 52px;
}
.metier-univers-titre {
  display: block;
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.metier-univers-filet {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 18px;
}
.metier-univers-baseline {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── Séries UNIVERS : preview pleine largeur ─────────────────────────────── */
.univers-serie .regard-serie-preview {
  width: 100%;
}

/* ── UNIVERS triptique ────────────────────────────────────────────────── */
.univers-triptique-wrap   { margin-top: 0; }
.univers-triptique        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.univers-vignette         { cursor: pointer; }
.univers-vignette .regard-serie-preview { width: 100%; }
.univers-vignette.is-active .regard-serie-overlay { opacity: 1; background: rgba(0,0,0,0.45); }
.univers-sml              { display: none; margin-top: 16px; }
.univers-sml.is-open      { display: block; }

/* Overlay titles on UNIVERS vignettes — centred, word-per-line */
.univers-vignette .regard-serie-titre {
  font-size: 21px;
  text-align: center;
  line-height: 1.35;
}

/* UNIVERS mobile : vignettes en colonne, centrées, titres 18px */
@media (max-width: 600px) {
  .univers-triptique { grid-template-columns: 1fr; gap: 24px; }
  .univers-vignette .regard-serie-preview { width: 67%; margin: 0 auto; }
  .univers-vignette .regard-serie-titre { font-size: 18px; text-align: center; }
}

/* Task #77 : SML header title for the 3 UNIVERS series — 25% smaller */
#univers-sml .regard-serie-body-titre {
  font-size: 21px;
}

/* ── Mode L — visionneuse plein écran immersive ──────────────────────────── */
.metier-fs {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  align-items: center;
  justify-content: center;
}

.metier-fs.is-open { display: flex; }

.metier-fs-img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition: opacity 0.28s ease;
}

/* Cartouche de pilotage — apparaît sur mouvement souris */
/* Réduit de 25% (padding + gap) — icônes conservent leur taille d'origine */
.metier-fs-bar {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 33px;
  padding: 10px 27px;
  background: rgba(10, 10, 10, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}

.metier-fs-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.metier-fs-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 0;
  line-height: 1;
  transition: color 0.18s ease;
}

.metier-fs-btn:hover { color: rgba(255, 255, 255, 0.95); }

.metier-fs-arrow {
  font-size: 17px;
  letter-spacing: 0;
}

.metier-fs-btn svg { display: block; }

.metier-fs-autoplay { opacity: 0.65; transition: color 0.18s ease, opacity 0.18s ease; }
.metier-fs-autoplay:hover { opacity: 1; }
.metier-fs-autoplay.is-active { color: #fff; opacity: 1; }

/* ── Volet accordéon ─────────────────────────────────────────────────────── */
.metier-item-volet {
  height: 0;
  overflow: hidden;
}

.metier-volet-inner {
  padding: 4px 0 56px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .metier-sep         { margin: 0 10%; }
}

@media (max-width: 600px) {
  .metier-sep         { margin: 0 5%; }
  /* Titres L'Art & la Matière / Gens de terre / Pignon sur rue — -30% et centrés */
  .metier-item .regard-serie-titre {
    font-size: 20px;      /* 28px × 0.70 */
    text-align: center;
  }
}

/* ==========================================================================
   Toggle langue FR | EN — barre fixe, toujours visible
   Injectée dans document.body via lang.js (#sb-lang-bar).
   Z-index 100 : au-dessus du contenu, sous le plein écran (200)
   et sous l'overlay intro (1000).
   ========================================================================== */

/* Conteneur fixe — toutes pages */
#sb-lang-bar {
  position: fixed;
  bottom: 22px;
  right: 28px;
  z-index: 100;
  pointer-events: auto;
}

/* Base toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 180ms ease;
  /* Pages intérieures (fond ivoire) : gris chaud lisible */
  color: var(--ink-soft);
}

.lang-toggle-btn:hover     { color: var(--ink); }
.lang-toggle-btn.is-active { color: var(--ink); }

.lang-toggle-sep {
  font-family: var(--sans);
  font-size: 8px;
  color: var(--ink-quiet);
  line-height: 1;
  user-select: none;
}

/* Page splash (fond sombre) — couleurs inversées */
.page-splash #sb-lang-bar .lang-toggle-btn {
  color: rgba(255, 255, 255, 0.50);
}
.page-splash #sb-lang-bar .lang-toggle-btn:hover,
.page-splash #sb-lang-bar .lang-toggle-btn.is-active {
  color: rgba(255, 255, 255, 0.90);
}
.page-splash #sb-lang-bar .lang-toggle-sep {
  color: rgba(255, 255, 255, 0.28);
}

/* Responsive — resserrer sur mobile */
@media (max-width: 600px) {
  #sb-lang-bar { bottom: 16px; right: 16px; }
}

/* ==========================================================================
   Bouton CTA partagé — utilisé dans regard.html, metier.html, horizons.html,
   missions.html. Héritage de l'ancienne page Projets, conservé tel quel.
   ========================================================================== */

.pj-btn {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 32px;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.pj-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ==========================================================================
   Fullscreen API — bouton plein écran navigateur
   Progressive enhancement : sans impact si l'API n'est pas disponible.
   ========================================================================== */

/* ── Bouton dans la cartouche metier-fs (horizons + metier) ─────────────── */
.metier-fs-fullscreen-btn .fs-icon-compress { display: none; }
.metier-fs-fullscreen-btn[aria-pressed="true"] .fs-icon-expand   { display: none; }
.metier-fs-fullscreen-btn[aria-pressed="true"] .fs-icon-compress { display: block; }

/* ── Bouton flottant dans l'inline-viewer (regard, mode L) ─────────────── */
.inline-viewer-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-quiet);
  padding: 4px;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
  line-height: 0;
}
.inline-viewer.is-open:hover .inline-viewer-fs-btn { opacity: 1; }
.inline-viewer-fs-btn svg { display: block; }
.inline-viewer-fs-btn .fs-icon-compress { display: none; }
.inline-viewer-fs-btn[aria-pressed="true"] .fs-icon-expand   { display: none; }
.inline-viewer-fs-btn[aria-pressed="true"] .fs-icon-compress { display: block; }

/* ── inline-viewer en mode plein écran navigateur ───────────────────────── */
.inline-viewer:fullscreen,
.inline-viewer:-webkit-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
}
.inline-viewer:fullscreen .inline-viewer-figure,
.inline-viewer:-webkit-full-screen .inline-viewer-figure {
  width: auto;
  max-width: 100vw;
}
.inline-viewer:fullscreen .inline-viewer-img,
.inline-viewer:-webkit-full-screen .inline-viewer-img {
  max-width: 100vw;
  max-height: 100dvh;
}
.inline-viewer:fullscreen .inline-viewer-caption,
.inline-viewer:-webkit-full-screen .inline-viewer-caption {
  color: rgba(255, 255, 255, 0.55);
}
.inline-viewer:fullscreen .inline-viewer-fs-btn,
.inline-viewer:-webkit-full-screen .inline-viewer-fs-btn {
  opacity: 1;
  color: rgba(255, 255, 255, 0.5);
}
.inline-viewer:fullscreen .inline-viewer-fs-btn:hover,
.inline-viewer:-webkit-full-screen .inline-viewer-fs-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* ── metier-fs en mode plein écran navigateur ───────────────────────────── */
/* L'élément est déjà inset:0 + background:#000, rien à corriger.           */
/* La barre reste position:fixed — fonctionnel dans le fullscreen element.  */
.metier-fs:fullscreen .metier-fs-img,
.metier-fs:-webkit-full-screen .metier-fs-img {
  max-width: 100vw;
  max-height: 100dvh;
}

/* ==========================================================================
   Page Missions — héro plein écran + architecture éditoriale
   ========================================================================== */

/* ── Héro plein écran ───────────────────────────────────────────────────────── */
.ms-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  align-self: stretch;
  flex-shrink: 0;
}

.ms-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Voile double gradient — lisibilité header + pied de hero */
.ms-hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.12) 28%,
      rgba(0,0,0,0.04) 55%,
      rgba(0,0,0,0.45) 100%
    );
}

/* ── En-tête flottant (logo blanc + nav blanche) ────────────────────────────── */
.ms-hero-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44px;
  z-index: 2;
}

.ms-hero-brand {
  display: block;
  width: 340px;
  pointer-events: auto;
}
.ms-hero-brand img {
  width: 100%;
  height: auto;
  display: block;
}

.ms-hero-nav { margin-top: 18px; }
.ms-hero-nav ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  gap: 44px;
  justify-content: center;
}
.ms-hero-nav a {
  position: relative;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color 180ms ease;
}
.ms-hero-nav a:hover,
.ms-hero-nav a:focus-visible { color: rgba(255,255,255,1); }
.ms-hero-nav a.is-active { color: #fff; }
.ms-hero-nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 25%;
  right: 25%;
  height: 1px;
  background: rgba(255,255,255,0.55);
}

/* ── Titre + baseline ancrés en bas du héro ─────────────────────────────────── */
.ms-hero-caption {
  position: absolute;
  bottom: 116px;      /* remonté de ~1 hauteur de titre (72 + 44) */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.ms-hero-title {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 216;       /* 270 × 0.80 — Inter variable */
  line-height: 1.1;
  letter-spacing: 0.224em;  /* 0.28 × 0.80 */
  text-transform: uppercase;
  color: #fff;
}

.ms-hero-baseline {
  margin-top: 15px;       /* remonté d'1/3 vers le titre (22 → 15) */
  font-family: var(--sans);
  font-size: 16.8px;      /* 14px × 1.20 */
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.025em;
  color: rgba(255,255,255,0.88);
}

/* ── Picto appareil photo — au-dessus du chapeau intro ──────────────────────── */
.ms-picto-camera-wrap {
  display: flex;
  justify-content: center;
  margin-top: 72px;
}
.ms-cam {
  color: var(--ink-quiet);
  width: 66px;
  height: 66px;
}

/* Flash — rayons : apparaissent en éclat bref, toutes les 3.5s */
.ms-flash-rays {
  opacity: 0;
  animation: ms-flash-burst 3.5s ease-in-out infinite;
}
@keyframes ms-flash-burst {
  0%, 10%, 100% { opacity: 0; }
  5%            { opacity: 1; }
}

/* Obturateur — se resserre au moment du flash */
.ms-shutter {
  transform-origin: 50% 61.4%;
  opacity: 0.4;
  animation: ms-shutter-click 3.5s ease-in-out infinite;
}
@keyframes ms-shutter-click {
  0%, 10%, 100% { transform: scale(1);    opacity: 0.4; }
  5%            { transform: scale(0.52); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-flash-rays, .ms-shutter { animation: none; }
}

/* ── Texte intro ─────────────────────────────────────────────────────────────── */
.ms-intro {
  max-width: 640px; /* harmonisé avec les chapeaux Métier/Horizon/Regard */
  margin: 24px auto 0;
  text-align: center;
}
.ms-intro-sub {
  font-family: var(--sans);
  font-size: 14px;     /* = taille chapeau des 3 autres pages */
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: 0.025em;
}
.ms-intro-sub2 {
  margin-top: 14px;
}
/* Phrase finale — même police + gabarit que les chapeaux finales des autres pages */
.ms-intro-peak {
  display: block;
  margin-top: 0.66em;
  font-family: var(--sans);  /* hérite sinon de body (Fraunces) — fix explicite */
  font-size: 21px;           /* = 1.5 × 14px — valeur absolue pour éviter l'héritage body (18px) */
  font-weight: 300;
  color: var(--gold);
}
.ms-intro-peak em {
  font-style: italic;
  font-weight: inherit;
}

/* ── Domaines ───────────────────────────────────────────────────────────────── */
.ms-domaines {
  max-width: 720px;
  margin: 104px auto 0;
  border-top: 1px solid var(--rule);
}
.ms-domaine {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 32px;
  padding: 44px 0;
  border-bottom: 1px solid var(--rule);
}
.ms-domaine-num {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  padding-top: 0;
}
.ms-domaine-titre {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.ms-domaine-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 13, 'SOFT' 50;
  margin: 0;
}

/* ── Portrait corps de page ─────────────────────────────────────────────────── */
/* Desktop : format paysage original — Mobile : format portrait (voir @media) */
.ms-portrait {
  margin: 96px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.ms-portrait img {
  display: block;
  width: 80%;
  aspect-ratio: 4 / 3;   /* paysage sur desktop */
  object-fit: cover;
  object-position: center 25%;
}

/* ── Carousel Avis ─────────────────────────────────────────────────────────── */
.avis-carousel-outer {
  max-width: 1040px;
  margin: 104px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.avis-carousel-titre {
  margin: 0 0 36px;
}
.avis-carousel-viewport {
  overflow: hidden;
  text-align: left;
}
.avis-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.avis-carousel-controls {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 28px;
}
.avis-ctl-prev,
.avis-ctl-next {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  padding: 0;
  width: 24px;
  text-align: center;
  transition: color 160ms ease;
  user-select: none;
}
.avis-ctl-prev:hover,
.avis-ctl-next:hover {
  color: var(--gold);
}
.avis-card {
  flex: 0 0 calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  border: 1px solid var(--rule);
  border-top: 2px solid transparent;
  transition: border-top-color 0.3s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.avis-card:hover {
  border-top-color: var(--gold);
}
.avis-card-guillemet {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 44, 'SOFT' 0;
}
.avis-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink);
  font-variation-settings: 'opsz' 13, 'SOFT' 50;
  flex: 1;
}
.avis-card-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.avis-card-author {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.avis-card-role {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink-quiet);
  margin-top: 5px;
}

/* ── Références partenaires ────────────────────────────────────────────────── */
.mission-partners {
  max-width: 1360px;
  margin: 96px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.mission-partners-title {
  margin: 0 0 52px;
}

.partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(86px, 1fr));
  gap: clamp(38px, 4vw, 58px) clamp(24px, 2.4vw, 36px);
  align-items: center;
  justify-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.partner-logo {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo-link img {
  width: auto;
  max-width: min(118px, 100%);
  max-height: 74px;
  object-fit: contain;
  opacity: 0.68;
  transition: opacity 0.25s ease;
}

.partner-logo-link:hover img,
.partner-logo-link:focus-visible img {
  opacity: 0.9;
}

/* ── Citation finale (entre références et CTA) ──────────────────────────────── */
.ms-quote-finale {
  max-width: 620px;
  margin: 80px auto 0;
  text-align: center;
  padding-top: 64px;
  border-top: 1px solid var(--rule);
}
.ms-quote-finale-texte {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  white-space: pre-line;
  letter-spacing: 0.01em;
  font-variation-settings: 'opsz' 72, 'SOFT' 20;
}

/* ── CTA unique ─────────────────────────────────────────────────────────────── */
.ms-cta {
  text-align: center;
  margin: 16px 0 80px;
}

/* ── Pas de footer — espace bas de page ─────────────────────────────────────── */
[data-page="projets"] .interior-main { padding-bottom: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ms-hero-title { font-size: 30px; letter-spacing: 0.22em; }
  .ms-hero-brand { width: 320px; }   /* aligné sur splash-brand 900px */
  .ms-hero-nav ul { gap: 28px; }
  .avis-card { flex: 0 0 calc((100% - 24px) / 2); }
  .ms-portrait img { width: 90%; }
  .partners-logo-grid {
    grid-template-columns: repeat(5, minmax(86px, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 600px) {
  .ms-hero-title { font-size: 25px; letter-spacing: 0.18em; }
  .ms-hero-baseline { font-size: 12.6px; letter-spacing: 0.12em; }
  .ms-hero-nav { margin-top: 9px; }
  .ms-hero-nav ul { gap: 16px; }
  .ms-hero-nav a { font-size: 9.5px; letter-spacing: 0.12em; }
  .ms-hero-caption { bottom: 85px; }  /* remonté pour dégager la flèche */
  .ms-intro { padding: 0 28px; }         /* marges latérales chapeau Mission */
  .ms-intro-peak { font-size: 17.5px; }  /* = 1.25 × 14px, aligné sur sb-peak/horizons-chapeau-finale */
  .ms-domaines { padding: 0 28px; }      /* marges latérales domaines Mission */
  .ms-intro, .ms-domaines, .ms-portrait, .avis-carousel-outer,
  .mission-partners, .ms-quote-finale, .ms-cta { margin-top: 56px; }
  .avis-card { flex: 0 0 100%; }
  .ms-portrait img {
    width: 100%;
    aspect-ratio: 3 / 4;   /* format portrait sur mobile */
    object-position: center 15%;
  }
  .partners-logo-grid {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 34px 24px;
    max-width: 420px;
  }
  .partner-logo-link img {
    max-width: min(116px, 100%);
    max-height: 68px;
  }
  .ms-domaine { grid-template-columns: 1fr; gap: 0; }
  .ms-domaine-num { display: none; }
  .ms-quote-finale-texte { font-size: 14px; }
}

@media (max-width: 380px) {
  .partners-logo-grid {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .ms-hero-brand { width: 260px; }   /* ≤ 480px : même taille que splash-brand */
}


/* ═══════════════════════════════════════════════════════════════════════════
   HÉROS DE PAGES — Métier, Horizons, Regard
   ═══════════════════════════════════════════════════════════════════════════ */

/* Recadrages image spécifiques par page */
.metier-hero   .ms-hero-img { object-position: center 22%; }
.horizons-hero .ms-hero-img { object-position: center 40%; }
.regard-hero   .ms-hero-img { object-position: center 28%; }

@media (max-width: 600px) {
  .regard-hero .ms-hero-img { object-position: 25% 28%; } /* décalé à gauche pour centrer le personnage */
}

/* Indicateur de scroll — flèche animée en bas du héro (partagé) */
.page-hero-scroll {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255,255,255,0.72);
  z-index: 2;
  animation: page-hero-scroll-bounce 2.4s ease-in-out infinite;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  transition: color 0.2s ease;
}
.page-hero-scroll svg {
  width: 30px;
  height: 30px;
}
.page-hero-scroll:hover {
  color: #fff;
}

@keyframes page-hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 0.72; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation invites — bas de page REGARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Navigation typographique bas de page (Regard) ───────────────────────── */
.regard-footnav {
  margin-top: 96px;
  padding: 64px 24px 66px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.regard-footnav-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.regard-footnav-row--sub {
  opacity: 0.72;
}

.regard-footnav-link {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 16px;
  transition: color 220ms ease;
}

a.regard-footnav-link:hover {
  color: var(--gold);
}

.regard-footnav-link.is-current {
  color: var(--gold);
  cursor: default;
}

.regard-footnav-sep {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  color: var(--ink-quiet);
  user-select: none;
}

/* ── CTA contact — conservé pour metier.html ─────────────────────────────── */
.rni-cta {
  text-align: center;
  padding: 80px 0 96px;
}

@media (max-width: 600px) {
  .rni-cta { padding: 70px 0 70px; }           /* espace rni-cta mobile */
  .regard-footnav { margin-top: 48px; }        /* margin-top 96px → 48px */
}
.rni-cta .pj-btn { margin-top: 0; }