/* A.G.I.R - Page réalisation (Mission Jurassique)
   Mise en page reprise de la maquette de Sam.
   Tout est cloisonné sous .mj-page. */

.mj-page {
    --abyss:#081722;
    --abyss-2:#0c2431;
    --panel:#102c3b;
    --panel-line:#26495a;
    --cyan:#5fe1c9;
    --cyan-dim:#3a8f81;
    --brass:#c99a55;
    --brass-light:#e3bd82;
    --cream:#eee6d6;
    --slate:#9fb3be;
    --coral:#e1673e;
    /* Polices du site, pour rester cohérent avec les autres pages */
    --ff-display: var(--font-display);
    --ff-body: var(--font-body);
    --ff-mono: var(--font-body);
  }
.mj-page .rail {
    position:fixed;left:22px;top:0;height:100vh;width:150px;
    z-index:40;pointer-events:none;
  }
.mj-page .rail-line {
    position:absolute;left:5px;top:8%;bottom:8%;width:2px;
    background:linear-gradient(to bottom, var(--cyan-dim), var(--panel-line));
  }
.mj-page .rail-item {
    position:absolute;left:0;right:0;padding-left:20px;
  }
.mj-page .rail-tick {
    position:absolute;left:20px;top:0;transform:translateY(-50%);
    display:flex;align-items:center;gap:8px;opacity:.35;
    transition:opacity .35s ease, transform .35s ease;
    white-space:nowrap;
  }
.mj-page .rail-tick .dot {width:8px;height:8px;border-radius:50%;background:var(--slate);flex:none;}
.mj-page .rail-tick .lbl {
    font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.03em;
    color:var(--slate);white-space:nowrap;
  }
.mj-page .rail-item.active .rail-tick {opacity:1;transform:translateY(-50%) translateX(2px);}
.mj-page .rail-item.active .dot {background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.mj-page .rail-item.active .lbl {color:var(--cyan);}
  @media(max-width:1180px){
.mj-page .rail {display:none;}}

.mj-page section, .mj-page header.hero {
  padding-left: min(9vw, 140px);
  padding-right: min(9vw, 140px);
}
@media (min-width: 1181px) {
  .mj-page section, .mj-page header.hero { padding-left: 210px; }
}
@media (max-width: 720px) {
  .mj-page section, .mj-page header.hero { padding-left: 6vw; padding-right: 6vw; }
}

.mj-page .eyebrow {
    font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--brass-light);
    display:flex;align-items:center;gap:10px;margin-bottom:18px;
  }
.mj-page .eyebrow::before {content:"";width:26px;height:1px;background:var(--brass);display:inline-block;}
.mj-page h1, .mj-page h2, .mj-page h3 {font-family:var(--ff-display);font-weight:600;margin:0 0 .5em;color:var(--cream);}
.mj-page .lede {color:var(--slate);font-size:1.08rem;max-width:60ch;}
.mj-page header.hero {
    position:relative;min-height:100vh;display:flex;flex-direction:column;
    justify-content:flex-end;padding-top:120px;padding-bottom:64px;
    overflow:hidden;isolation:isolate;
  }
.mj-page header.hero .bg {
    position:absolute;inset:0;z-index:-2;
  }
.mj-page header.hero .bg img {width:100%;height:100%;object-fit:cover;}
.mj-page .site-mark {
    position:absolute;top:34px;left:min(9vw,140px);z-index:2;
    font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.15em;
    color:var(--slate);text-transform:uppercase;
  }
  @media(min-width:1181px){
.mj-page .site-mark {left:210px;}
  }

.mj-page .depth-live {
    position:absolute;top:34px;right:min(9vw,140px);z-index:2;
    font-family:var(--ff-mono);font-size:.72rem;color:var(--cyan);
    text-align:right;letter-spacing:.08em;
  }
  @media(max-width:640px){
.mj-page .depth-live {display:none;}
  }

.mj-page header.hero h1 {
    font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:-.01em;
    margin-bottom:.28em;
  }
.mj-page header.hero h1 em {color:var(--cyan);font-style:italic;font-weight:500;}
.mj-page header.hero .sub {max-width:52ch;color:var(--cream);opacity:.88;font-size:1.15rem;margin-bottom:34px;}
.mj-page .badges {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px;}
.mj-page .badge {
    font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.05em;
    border:1px solid var(--panel-line);color:var(--slate);
    padding:7px 13px;border-radius:3px;background:rgba(16,44,59,.55);
    backdrop-filter:blur(2px);
  }
.mj-page .cta-row {display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.mj-page .btn-primary {
    font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
    background:linear-gradient(180deg,var(--brass-light),var(--brass));
    color:#20140a;border:none;padding:15px 26px;border-radius:5px;
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px rgba(201,154,85,.25);
    cursor:pointer;text-decoration:none;font-weight:600;
  }
.mj-page .btn-ghost {
    font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyan-dim);padding-bottom:3px;
  }
.mj-page section {padding-top:110px;padding-bottom:110px;position:relative;}
.mj-page section.alt {background:var(--abyss-2);}
.mj-page .strata::before {
    content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(to right, transparent, var(--panel-line) 20%, var(--panel-line) 80%, transparent);
  }
.mj-page .grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
  @media(max-width:900px){
.mj-page .grid-2 {grid-template-columns:1fr;gap:36px;}}

.mj-page .grid-2.rev .art {order:2;}
  @media(max-width:900px){
.mj-page .grid-2.rev .art {order:0;}}

.mj-page .art {position:relative;}
.mj-page .art img {border-radius:6px;border:1px solid var(--panel-line);}
.mj-page .art .cap {
    font-family:var(--ff-mono);font-size:.72rem;color:var(--slate);
    margin-top:12px;letter-spacing:.02em;
  }
.mj-page .art .cap b {color:var(--brass-light);font-weight:500;}
.mj-page p {color:var(--cream);opacity:.92;max-width:58ch;}
.mj-page p.sm {max-width:60ch;color:var(--slate);}
.mj-page .species-head {max-width:64ch;margin-bottom:56px;}
.mj-page .species-grid {
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;
  }
.mj-page .card {
    background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;
    overflow:hidden;position:relative;
  }
.mj-page .card .imgwrap {position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a1e29;}
.mj-page .card .imgwrap img {width:100%;height:100%;object-fit:cover;}
.mj-page .card .num {
    position:absolute;top:10px;left:10px;font-family:var(--ff-mono);
    font-size:.68rem;color:var(--abyss);background:var(--brass-light);
    padding:2px 7px;border-radius:2px;letter-spacing:.03em;z-index:2;
  }
.mj-page .card .tag {
    position:absolute;top:10px;right:10px;font-family:var(--ff-mono);
    font-size:.62rem;letter-spacing:.06em;padding:3px 8px;border-radius:2px;z-index:2;
    text-transform:uppercase;
  }
.mj-page .tag.marin {background:rgba(95,225,201,.16);color:var(--cyan);border:1px solid var(--cyan-dim);}
.mj-page .tag.terrestre {background:rgba(225,103,62,.16);color:var(--coral);border:1px solid #a34322;}
.mj-page .card .
.mj-page .card h3 {font-size:1.15rem;margin-bottom:2px;}
.mj-page .card .latin {font-family:var(--ff-mono);font-size:.68rem;color:var(--slate);margin-bottom:10px;display:block;letter-spacing:.02em;}
.mj-page .card p {font-size:.9rem;margin:0;color:var(--slate);max-width:none;line-height:1.55;}
.mj-page .banner {
    position:relative;min-height:70vh;display:flex;align-items:flex-end;
    padding-top:80px;padding-bottom:80px;overflow:hidden;
  }
.mj-page .banner .bg {position:absolute;inset:0;z-index:0;}
.mj-page .banner .bg img {width:100%;height:100%;object-fit:cover;}
.mj-page .banner .bg::after {
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(6,15,21,.95), rgba(6,15,21,.35) 60%, rgba(6,15,21,.55));
  }
.mj-page .banner .content {position:relative;z-index:1;max-width:62ch;}
.mj-page .banner h2 {font-size:clamp(1.8rem,3.4vw,2.7rem);}
.mj-page .banner p {color:var(--cream);opacity:.92;font-size:1.05rem;}
.mj-page .duo {display:grid;grid-template-columns:220px 1fr;gap:52px;align-items:center;}
  @media(max-width:760px){
.mj-page .duo {grid-template-columns:1fr;justify-items:center;text-align:center;}}

.mj-page .duo .portrait {
    width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
    border:1px solid var(--panel-line);background:#0a1e29;
    box-shadow:0 0 0 10px rgba(95,225,201,.05), 0 0 40px rgba(95,225,201,.1);
  }
.mj-page .duo .portrait img {width:100%;height:100%;object-fit:cover;}
.mj-page .voices {display:flex;gap:34px;margin-top:22px;flex-wrap:wrap;}
  @media(max-width:760px){
.mj-page .voices {justify-content:center;}}

.mj-page .voice {max-width:24ch;}
.mj-page .voice .who {font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.mj-page .voice.sam .who {color:var(--brass-light);}
.mj-page .voice.nova .who {color:var(--cyan);}
.mj-page .voice p {font-size:.92rem;color:var(--slate);}
.mj-page .conclusion {text-align:left;position:relative;}
.mj-page .conclusion .quote {
    font-family:var(--ff-display);font-style:italic;font-weight:500;
    font-size:clamp(1.4rem,2.6vw,2rem);color:var(--cream);max-width:44ch;
    border-left:2px solid var(--brass);padding-left:24px;margin:34px 0;
  }
.mj-page .practical {
    display:flex;flex-wrap:wrap;gap:34px;margin:38px 0 34px;
    border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);
    padding:26px 0;
  }
.mj-page .practical .item {font-family:var(--ff-mono);font-size:.78rem;color:var(--slate);}
.mj-page .practical .item b {display:block;color:var(--cream);font-size:1rem;font-family:var(--ff-body);font-weight:600;margin-bottom:3px;}

  

  

/* ---------- compléments A.G.I.R ---------- */
.mj-page { position:relative; background:var(--abyss); color:var(--cream); line-height:1.65; font-family:var(--ff-body); }
.mj-page img { max-width:100%; display:block; }
.mj-page header.hero { margin-top:-74px; min-height:100svh; }
.mj-page .rail { top:74px; height:calc(100vh - 74px); }

.mj-page .mj-txt p { color:var(--cream); opacity:.92; max-width:58ch; margin:0 0 16px; }
.mj-page .mj-txt p:last-child { margin-bottom:0; }
.mj-page .mj-txt strong { color:var(--brass-light); font-weight:600; }

.mj-page .mj-chute { margin-top:48px; max-width:64ch; color:var(--cream); opacity:.92; border-left:2px solid var(--brass); padding-left:24px; }
.mj-page .mj-merci { color:var(--slate); max-width:64ch; font-size:.95rem; }

.mj-page .mj-ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:100%; height:100%; min-height:200px;
  border:1px dashed var(--panel-line); border-radius:6px; background:var(--panel); text-align:center; padding:20px;
}
.mj-page .mj-ph span { font-family:var(--ff-display); font-size:1.2rem; color:var(--brass-light); }
.mj-page .mj-ph small { font-family:var(--ff-mono); font-size:.6rem; color:var(--slate); opacity:.6; word-break:break-all; }
.mj-page .bg .mj-ph { border:0; border-radius:0; min-height:100%; }
.mj-page .portrait .mj-ph { border-radius:50%; min-height:0; }
.mj-page .card .imgwrap .mj-ph { border:0; border-radius:0; min-height:100%; }

/* ══════════════════════════════════════════
   AJUSTEMENTS : largeur, rythme, densité
   ══════════════════════════════════════════ */

/* Colonne de contenu : ni trop large, ni perdue */
.mj-page .wrap { max-width: 1080px; }

/* Sections : marges à gauche pour dégager le rail, respiration réduite */
.mj-page section { padding-top: 88px; padding-bottom: 88px; }

/* Le texte respire mais ne s'étire pas */
.mj-page .mj-txt p { max-width: 68ch; line-height: 1.8; }
.mj-page .lede { max-width: 62ch; line-height: 1.75; }

/* Titres : un peu plus contenus */
.mj-page h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.14; letter-spacing: -0.01em; }
.mj-page h1 { letter-spacing: -0.02em; }

/* Sur-titres : sans police mono, on compense par l'espacement */
.mj-page .eyebrow { letter-spacing: 0.2em; font-size: 0.66rem; font-weight: 600; }
.mj-page .rail-tick .lbl,
.mj-page .depth-live,
.mj-page .site-mark,
.mj-page .badge,
.mj-page .card .num,
.mj-page .card .tag,
.mj-page .art .cap,
.mj-page .practical .item { letter-spacing: 0.1em; }

/* Grille texte / image : image un peu moins dominante */
.mj-page .grid-2 { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
.mj-page .grid-2.rev { grid-template-columns: 0.95fr 1.05fr; }
.mj-page .art img { box-shadow: 0 26px 60px -34px rgba(0,0,0,0.85); }

/* Cartes espèces : 3 colonnes stables, un peu plus larges */
.mj-page .species-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.mj-page .card { transition: transform 0.3s ease, border-color 0.3s ease; }
.mj-page .card:hover { transform: translateY(-4px); border-color: var(--cyan-dim); }
.mj-page .card .body { padding: 18px 20px 20px; }
.mj-page .card p { line-height: 1.6; }

/* Bandeau de l'immensité : plus haut, texte plus large */
.mj-page .banner { min-height: 76vh; }
.mj-page .banner .content { max-width: 68ch; }

/* Le duo : portrait plus grand, texte à côté */
.mj-page .duo { grid-template-columns: 260px 1fr; gap: 56px; }

/* Conclusion : la barre pratique en grille régulière */
.mj-page .practical { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mj-page .practical .item { font-size: 0.82rem; line-height: 1.5; }
.mj-page .practical .item b { font-size: 0.98rem; margin-bottom: 5px; }

/* Citation finale */
.mj-page .quote { max-width: 52ch; }

/* Boutons : hauteur homogène */
.mj-page .btn-primary { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; }
.mj-page .btn-ghost { display: inline-flex; align-items: center; height: 50px; }

@media (max-width: 900px){
  .mj-page .duo { grid-template-columns: 1fr; }
  .mj-page .practical { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mj-page section { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 560px){
  .mj-page .practical { grid-template-columns: 1fr; }
  .mj-page .grid-2, .mj-page .grid-2.rev { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   ÉQUILIBRE : colonne centrée, blocs remplis
   ══════════════════════════════════════════ */

/* La colonne de contenu se centre dans l'espace restant */
.mj-page .wrap { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* Sur très grand écran, on borne aussi les sections */
.mj-page section, .mj-page header.hero { padding-right: min(9vw, 210px); }

/* Bandeau : le contenu se centre lui aussi */
.mj-page header.hero > *:not(.bg):not(.site-mark):not(.depth-live) {
  max-width: 1240px; margin-left: auto; margin-right: auto; width: 100%;
}
.mj-page header.hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); margin-bottom: 28px; }
.mj-page header.hero .badges { margin-bottom: 32px; }

/* Texte : mesure plus généreuse, plus de colonne étriquée */
.mj-page .mj-txt p { max-width: 74ch; }
.mj-page .lede { max-width: 68ch; }

/* Cartes espèces : la dernière ligne se centre au lieu de rester orpheline */
.mj-page .species-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.mj-page .card { flex: 1 1 290px; max-width: 340px; display: flex; flex-direction: column; }
.mj-page .card .body { flex: 1; }
.mj-page .species-head { max-width: 68ch; margin-bottom: 48px; }

/* Grille texte / image : l'image ne se ratatine plus */
.mj-page .grid-2 { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mj-page .grid-2 .art img,
.mj-page .grid-2 .art .mj-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mj-page .grid-2 .mj-txt p { max-width: none; }

/* Chute des espèces : centrée sous la grille */
.mj-page .mj-chute { margin-left: auto; margin-right: auto; max-width: 72ch; }

/* Le duo : centré */
.mj-page .duo { max-width: 1000px; }

/* Conclusion : la citation ne flotte pas seule */
.mj-page .quote { max-width: 60ch; }
.mj-page .conclusion .mj-txt p { max-width: 72ch; }

@media (max-width: 1180px){
  .mj-page section, .mj-page header.hero { padding-right: min(9vw, 140px); }
}
@media (max-width: 720px){
  .mj-page section, .mj-page header.hero { padding-right: 6vw; }
  .mj-page .card { flex: 1 1 100%; max-width: none; }
}

/* ---------- Fiche projet (section -10 m) ---------- */
.mj-page .fiche {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px;
  padding: 6px 26px 10px;
}
.mj-page .fiche-item { padding: 20px 0; border-bottom: 1px solid var(--panel-line); }
.mj-page .fiche-item:last-child { border-bottom: 0; }
.mj-page .fiche-lbl {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 6px;
}
.mj-page .fiche-val { display: block; font-size: 0.95rem; line-height: 1.6; color: var(--cream); opacity: 0.92; }


/* Remerciements : mis en valeur en fin de page */
.mj-page .mj-merci {
  margin-top: 40px; padding: 26px 28px; max-width: 74ch;
  background: var(--panel); border-left: 2px solid var(--brass); border-radius: 4px;
  color: var(--cream); opacity: 0.9; font-size: 0.95rem; line-height: 1.8;
}


/* ---------- Teaser vidéo en fond du bandeau ---------- */
.mj-page header.hero .bg { overflow: hidden; }
.mj-page .mj-hero-vid { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bouton son */
.mj-page .mj-sound {
  position: absolute; z-index: 3; bottom: 34px; right: min(9vw, 210px);
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,23,34,0.6); border: 1px solid var(--panel-line);
  color: var(--cream); cursor: pointer; backdrop-filter: blur(4px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.mj-page .mj-sound:hover { transform: scale(1.06); background: rgba(8,23,34,0.8); border-color: var(--cyan-dim); }
.mj-page .mj-sound svg { width: 21px; height: 21px; }
.mj-page .mj-sound .ico-on { display: none; }
.mj-page .mj-sound.is-on { border-color: var(--cyan); color: var(--cyan); }
.mj-page .mj-sound.is-on .ico-off { display: none; }
.mj-page .mj-sound.is-on .ico-on { display: block; }

@media (max-width: 720px){
  .mj-page .mj-sound { right: 6vw; bottom: 24px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce){
  .mj-page .mj-hero-vid { display: none; }
}

/* ══════════════════════════════════════════
   BANDEAU : bloc de texte au milieu à gauche
   (le teaser porte déjà du texte en bas)
   ══════════════════════════════════════════ */
.mj-page header.hero {
  justify-content: center;          /* centré verticalement */
  padding-top: 120px; padding-bottom: 120px;
}

/* le contenu reste calé à gauche, sur une colonne étroite */
.mj-page header.hero > *:not(.bg):not(.site-mark):not(.depth-live):not(.mj-sound) {
  margin-left: 0; margin-right: 0;
  max-width: 620px; width: 100%;
}

/* voile renforcé à gauche pour la lisibilité */

.mj-page header.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); margin-bottom: 24px; }
.mj-page header.hero .badges { margin-bottom: 28px; }
.mj-page header.hero .cta-row { margin-bottom: 0; }

@media (max-width: 900px){
  .mj-page header.hero > *:not(.bg):not(.site-mark):not(.depth-live):not(.mj-sound) { max-width: none; }
  }

/* Bandeau : bloc de texte en bas à gauche */
.mj-page header.hero {
  justify-content: flex-end;
  padding-top: 120px; padding-bottom: 72px;
}


/* Aucun voile sur la vidéo : l'image reste pure.
   La lisibilité du texte est assurée par une ombre portée. */
.mj-page header.hero .bg::after { content: none; }

.mj-page header.hero h1,
.mj-page header.hero .eyebrow,
.mj-page header.hero .site-mark,
.mj-page header.hero .depth-live { text-shadow: 0 2px 24px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6); }

.mj-page header.hero .badge { background: rgba(8,23,34,0.72); backdrop-filter: blur(3px); }

/* ---------- Galerie de fin : les deux photos à la même hauteur ---------- */
.mj-page .mj-galerie {
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px;
  align-items: stretch;            /* les deux colonnes font la même hauteur */
  margin: 48px 0 8px;
}
.mj-page .mj-gal-item { margin: 0; display: flex; flex-direction: column; min-width: 0; }

/* La photo paysage donne le rythme : c'est elle qui fixe la hauteur */
.mj-page .mj-gal-item:first-child img,
.mj-page .mj-gal-item:first-child .mj-ph { aspect-ratio: 4/3; }

/* La photo portrait s'étire à la même hauteur, recadrée au centre */
.mj-page .mj-gal-item:last-child img,
.mj-page .mj-gal-item:last-child .mj-ph { height: 100%; }

.mj-page .mj-gal-item img {
  width: 100%; object-fit: cover; object-position: center;
  border-radius: 6px; border: 1px solid var(--panel-line);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,0.85);
}
.mj-page .mj-gal-item .mj-ph { flex: 1; }
.mj-page .mj-gal-item figcaption { font-size: 0.72rem; color: var(--slate); margin-top: 10px; font-style: italic; }

@media (max-width: 760px){
  .mj-page .mj-galerie { grid-template-columns: 1fr; }
  .mj-page .mj-gal-item:last-child img { height: auto; aspect-ratio: 4/3; }
}

/* ---------- Bloc résumé : l'affiche garde son format ---------- */
.mj-page #s1 .art img {
  aspect-ratio: auto;          /* pas de recadrage forcé */
  object-fit: contain;
  width: auto; max-width: 100%; height: auto;
  max-height: 620px;
  margin: 0 auto;
  border-radius: 6px;
}
.mj-page #s1 .art { display: flex; align-items: center; justify-content: center; }
.mj-page #s1 .art .mj-ph { aspect-ratio: 3/4; }

@media (max-width: 900px){
  .mj-page #s1 .art img { max-height: 460px; }
}

/* ---------- Repères scientifiques : texte puis panorama ---------- */
.mj-page .s3-texte { max-width: 76ch; }
.mj-page .s3-texte .mj-txt p { max-width: none; }

.mj-page .art-large { margin: 48px 0 0; }
.mj-page .art-large img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover; object-position: center;
  border-radius: 6px; border: 1px solid var(--panel-line);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.mj-page .art-large .mj-ph { aspect-ratio: 21/9; }
.mj-page .art-large .cap { margin-top: 12px; font-size: 0.72rem; color: var(--slate); font-style: italic; letter-spacing: 0.04em; }

@media (max-width: 760px){
  .mj-page .art-large img,
  .mj-page .art-large .mj-ph { aspect-ratio: 16/10; }
}

/* ---------- Direction artistique : la planche en pleine largeur ---------- */
.mj-page .s5-texte { max-width: 76ch; }
.mj-page .s5-texte .mj-txt p { max-width: none; }

.mj-page .art-planche { margin: 48px 0 0; }
.mj-page .art-planche img {
  width: 100%; height: auto;       /* format naturel : rien n'est rogné */
  aspect-ratio: auto; object-fit: contain;
  border-radius: 6px; border: 1px solid var(--panel-line);
  background: var(--panel);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.mj-page .art-planche .mj-ph { aspect-ratio: 3.64/1; }
.mj-page .art-planche .cap {
  margin-top: 12px; font-size: 0.74rem; color: var(--slate);
  font-style: italic; letter-spacing: 0.04em;
}
.mj-page .art-planche .cap strong { color: var(--brass-light); font-style: normal; }

/* ---------- Bandeau « L'immensité » : aucun voile sur l'image ---------- */
.mj-page .banner .bg::after { content: none; }

/* Lisibilité assurée par l'ombre portée du texte */
.mj-page .banner .eyebrow,
.mj-page .banner h2,
.mj-page .banner .mj-txt p {
  text-shadow: 0 2px 26px rgba(0,0,0,0.85), 0 1px 5px rgba(0,0,0,0.7);
}

/* ---------- Voile local, derrière le seul bloc de texte ---------- */
.mj-page .banner .content { position: relative; z-index: 1; }
.mj-page .banner .content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -54px -110px -60px -90px;
  background: radial-gradient(115% 125% at 22% 58%,
              rgba(6,15,21,0.94) 0%,
              rgba(6,15,21,0.86) 32%,
              rgba(6,15,21,0.55) 58%,
              rgba(6,15,21,0.12) 80%,
              rgba(6,15,21,0) 100%);
}

@media (max-width: 900px){
  .mj-page .banner .content::before { inset: -40px -8vw -48px -8vw; }
}

/* ---------- L'immensité : le texte se cale à gauche, l'image respire ---------- */
.mj-page .banner .content {
  margin-left: 0; margin-right: auto;   /* plus de centrage */
  max-width: 560px;
}
.mj-page .banner .content .mj-txt p { max-width: none; }

/* le voile suit le bloc, resserré sur sa nouvelle largeur */
.mj-page .banner .content::before {
  inset: -54px -140px -60px -100px;
  background: radial-gradient(105% 125% at 18% 58%,
              rgba(6,15,21,0.94) 0%,
              rgba(6,15,21,0.85) 34%,
              rgba(6,15,21,0.5) 60%,
              rgba(6,15,21,0.1) 82%,
              rgba(6,15,21,0) 100%);
}

@media (max-width: 900px){
  .mj-page .banner .content { max-width: none; }
  .mj-page .banner .content::before { inset: -40px -8vw -48px -8vw; }
}

/* L'immensité : le bloc respire un peu plus depuis le bord gauche */
.mj-page .banner .content { margin-left: clamp(0px, 7vw, 170px); }
.mj-page .banner .content::before { inset: -54px -150px -60px -120px; }

@media (max-width: 900px){
  .mj-page .banner .content { margin-left: 0; }
}

/* ---------- Nova : portrait animé, mêmes dimensions que l'image ---------- */
.mj-page .duo .portrait .mj-nova-vid {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce){
  .mj-page .duo .portrait .mj-nova-vid { display: none; }
}

/* Le titre garde ses deux lignes sans <br> (Google lisait « MissionJurassique ») */
.mj-page header.hero h1 em { display: block; }

/* Vaches Noires : aucun recadrage, la signature reste visible */
.mj-page .art-large img {
  aspect-ratio: auto;      /* format naturel de la photo */
  height: auto;
  object-fit: contain;
  width: 100%;
}
@media (max-width: 760px){
  .mj-page .art-large img { aspect-ratio: auto; }
}

/* Galerie de fin : chaque photo garde son format (retour à la version précédente) */
.mj-page .mj-galerie {
  grid-template-columns: 1.35fr 0.65fr;
  align-items: start;
  gap: 22px;
}
.mj-page .mj-gal-item { display: block; }
.mj-page .mj-gal-item img { height: auto; }
.mj-page .mj-gal-item:first-child img { aspect-ratio: 4/3; object-fit: cover; }
.mj-page .mj-gal-item:last-child  img { aspect-ratio: 3/4; object-fit: cover; }

@media (max-width: 760px){
  .mj-page .mj-galerie { grid-template-columns: 1fr; }
  .mj-page .mj-gal-item:last-child img { aspect-ratio: 4/3; }
}

/* Galerie de fin : format naturel, aucun recadrage */
.mj-page .mj-gal-item img,
.mj-page .mj-gal-item:first-child img,
.mj-page .mj-gal-item:last-child img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.mj-page .mj-gal-item:first-child .mj-ph { aspect-ratio: 4/3; }
.mj-page .mj-gal-item:last-child  .mj-ph { aspect-ratio: 3/4; }

/* ---------- Galerie de fin : hauteurs égales, sans recadrage ----------
   Les colonnes sont dimensionnées d'après le format réel des photos
   (paysage 1600x1205, portrait 904x1200), de sorte que leurs hauteurs
   naturelles coincident. Ni etirement, ni rognage. */
.mj-page .mj-galerie {
  grid-template-columns: 1.763fr 1fr;
  align-items: start;
  gap: 22px;
}

@media (max-width: 760px){
  .mj-page .mj-galerie { grid-template-columns: 1fr; }
}