/* ============================================================
   Emma Nocquet — Portfolio 2026 — Index plein écran
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=Anton&family=Baloo+2:wght@500;700&family=Quicksand:wght@500;700&family=Comfortaa:wght@500;700&family=Oswald:wght@500;600&family=Bebas+Neue&display=swap');

:root{
  --cream:      #faf6ef;
  --ink:        #100d0a;
  --ink-soft:   #4a4438;

  --marques:    #ae92cf;
  --seconde:    #427caa;
  --movin:      #cb8796;
  --azura:      #be3f48;
  --protejons:  #43617d;
  --collectif:  #cc5d25;
  --sharewithme:#2f03f6;
  --dreamact:   #94c170;
}

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

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ============================================================
   INDEX — bloc "Portfolio" + 8 bandes
   ============================================================ */
.index{
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  color:var(--ink);
}
#indexView[hidden], #projectView[hidden]{ display:none; }

.index-hero{
  flex:none;
  padding:16px 56px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:center;
  gap:32px;
  border-bottom:1px solid rgba(16,13,10,.08);
}
.index-hero-art{
  max-width:100%;
  max-height:92px;
  width:auto;
  justify-self:start;
}
.index-hero-text{
  max-width:46ch;
  margin:0;
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.55;
}
.index-hero-contact{
  justify-self:end;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.82rem;
  padding-top:26px; /* dégage le sélecteur de langue (position fixe) qui flotte au-dessus */
  margin-right:76px; /* dégage aussi horizontalement le sélecteur de langue, plus à droite */
}
.index-hero-contact a{
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid rgba(16,13,10,.2);
  padding-bottom:1px;
  white-space:nowrap;
}
.index-hero-contact a:hover{ border-color:var(--ink); }
.dl-link{
  border-bottom:1px solid rgba(16,13,10,.2);
  padding:0 0 1px;
  font-family:'Space Grotesk', sans-serif;
  font-size:.82rem;
  font-weight:600;
  color:var(--collectif);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  margin-top:2px;
}
.dl-link:hover{ border-color:var(--collectif); }

.index-rows{
  flex:1;
  min-height:0;
  display:flex;
  scrollbar-width:thin;
  scrollbar-color:rgba(16,13,10,.25) transparent;
}
.index-rows::-webkit-scrollbar{ width:8px; height:8px; }
.index-rows::-webkit-scrollbar-track{ background:transparent; }
.index-rows::-webkit-scrollbar-thumb{ background:rgba(16,13,10,.25); border-radius:999px; }
.index-rows::-webkit-scrollbar-thumb:hover{ background:rgba(16,13,10,.4); }

.index-row{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:none;
  padding:0;
  text-align:left;
  display:block;
}

.index-row-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.05);
  transform-origin:center;
  filter:blur(2px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
  opacity:.22;
}
.index-row:hover .index-row-bg, .index-row:focus-visible .index-row-bg{
  opacity:.9;
  transform:scale(1.12);
  filter:blur(0);
}

.index-row-tint{
  position:absolute; inset:0;
  background:var(--accent);
  opacity:.68;
  transition:opacity .45s ease;
}
.index-row:hover .index-row-tint, .index-row:focus-visible .index-row-tint{ opacity:.32; }

.index-row-scrim{
  position:absolute; inset:0;
  opacity:.6;
  transition:opacity .45s ease;
}
.index-row:hover .index-row-scrim, .index-row:focus-visible .index-row-scrim{ opacity:.8; }

.index-row-content{
  position:relative;
  z-index:2;
  display:flex;
  color:#fff;
  text-shadow:0 1px 3px rgba(16,13,10,.55), 0 2px 16px rgba(16,13,10,.35);
}
.index-row-left{
  display:flex;
  min-width:0;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.index-row-num{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  opacity:.8;
  flex:none;
  color:#fff;
}
.index-row-name{
  /* Sans serif gras : le nom de la marque doit trancher avec les italiques
     Fraunces qui l'entourent (numéro, catégorie) et se lire de loin. */
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
}
.index-row-cat{
  flex:0 1 auto;
  display:none;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.tag-arrow{
  display:inline-flex;
  align-items:center;
  color:rgba(255,255,255,.65);
  transition:color .3s ease, transform .3s ease;
}
.tag-arrow svg{ display:block; }
.index-row:hover .tag-arrow, .index-row:focus-visible .tag-arrow{ color:#fff; }
.index-row-arrow{
  flex:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  opacity:.85;
  color:#fff;
  transition:transform .3s ease, opacity .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.index-row:hover .index-row-arrow{
  opacity:1;
  background:#fff;
  border-color:#fff;
  color:var(--accent);
}

/* ============================================================
   Mode DESKTOP (>900px) — vertical (colonnes) ou horizontal (bandes)
   ============================================================ */
@media (min-width:901px){
  [data-desktop-mode="vertical"] .index-rows{ flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  [data-desktop-mode="vertical"] .index-row{ flex:1 1 150px; min-width:150px; height:100%; border-right:1px solid rgba(255,255,255,.18); }
  [data-desktop-mode="vertical"] .index-row:last-child{ border-right:none; }
  [data-desktop-mode="vertical"] .index-row-scrim{ background:linear-gradient(180deg, rgba(16,13,10,.32) 0%, rgba(16,13,10,0) 55%, rgba(16,13,10,.18) 100%); }
  [data-desktop-mode="vertical"] .index-row-content{ width:100%; height:100%; flex-direction:column; align-items:center; justify-content:space-between; gap:20px; padding:28px 0; }
  [data-desktop-mode="vertical"] .index-row-left{ flex-direction:column; align-items:center; gap:18px; transform-origin:center center; }
  [data-desktop-mode="vertical"] .index-row:hover .index-row-left{ transform:translateY(-8px) scale(1.05); }
  [data-desktop-mode="vertical"] .index-row-num{ font-size:1.05rem; }
  [data-desktop-mode="vertical"] .index-row-name{ font-size:clamp(1.4rem, 2.6vw, 2.1rem); writing-mode:vertical-rl; transform:rotate(180deg); max-height:min(46vh, 420px); }
  [data-desktop-mode="vertical"] .index-row-cat{ display:flex; flex-direction:column; align-items:center; text-align:center; font-size:.68rem; writing-mode:vertical-rl; transform:rotate(180deg); max-height:22vh; }
  [data-desktop-mode="vertical"] .tag-arrow{ margin:10px 0; }
  [data-desktop-mode="vertical"] .tag-arrow svg{ width:16px; height:34px; transform:rotate(90deg); }
  [data-desktop-mode="vertical"] .index-row:hover .tag-arrow{ transform:translateY(3px); }
  [data-desktop-mode="vertical"] .index-row-arrow{ transform:rotate(90deg); }
  [data-desktop-mode="vertical"] .index-row:hover .index-row-arrow{ transform:rotate(90deg) translateX(4px); }

  [data-desktop-mode="horizontal"] .index-rows{ flex-direction:column; overflow-y:auto; overflow-x:hidden; }
  [data-desktop-mode="horizontal"] .index-row{ flex:1 1 92px; min-height:92px; width:100%; border-bottom:1px solid rgba(255,255,255,.18); }
  [data-desktop-mode="horizontal"] .index-row:last-child{ border-bottom:none; }
  [data-desktop-mode="horizontal"] .index-row-scrim{ background:linear-gradient(90deg, rgba(16,13,10,.32) 0%, rgba(16,13,10,0) 55%, rgba(16,13,10,.18) 100%); }
  [data-desktop-mode="horizontal"] .index-row-content{ height:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; padding:0 56px; }
  [data-desktop-mode="horizontal"] .index-row-left{ flex-direction:row; align-items:baseline; gap:26px; transform-origin:left center; }
  [data-desktop-mode="horizontal"] .index-row:hover .index-row-left{ transform:translateX(8px) scale(1.05); }
  [data-desktop-mode="horizontal"] .index-row-num{ font-size:1.05rem; }
  [data-desktop-mode="horizontal"] .index-row-name{ font-size:clamp(1.6rem, 3.4vw, 2.9rem); writing-mode:horizontal-tb; transform:none; max-height:none; }
  [data-desktop-mode="horizontal"] .index-row-cat{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; font-size:.72rem; max-width:44%; text-align:right; writing-mode:horizontal-tb; transform:none; max-height:none; }
  [data-desktop-mode="horizontal"] .tag-arrow{ margin:0 10px; }
  [data-desktop-mode="horizontal"] .tag-arrow svg{ width:34px; height:16px; transform:none; }
  [data-desktop-mode="horizontal"] .index-row:hover .tag-arrow{ transform:translateX(3px); }
  [data-desktop-mode="horizontal"] .index-row-arrow{ transform:none; }
  [data-desktop-mode="horizontal"] .index-row:hover .index-row-arrow{ transform:translateX(4px); }
}

/* ============================================================
   Mode MOBILE (<=900px) — horizontal (bandes) ou vertical (colonnes)
   ============================================================ */
@media (max-width:900px){
  [data-mobile-mode="horizontal"] .index-rows{ flex-direction:column; overflow-y:visible; overflow-x:hidden; }
  [data-mobile-mode="horizontal"] .index-row{ flex:none; min-height:88px; width:100%; border-bottom:1px solid rgba(255,255,255,.18); }
  [data-mobile-mode="horizontal"] .index-row:last-child{ border-bottom:none; }
  [data-mobile-mode="horizontal"] .index-row:hover{ flex-grow:0; }
  [data-mobile-mode="horizontal"] .index-row-scrim{ background:linear-gradient(90deg, rgba(16,13,10,.32) 0%, rgba(16,13,10,0) 55%, rgba(16,13,10,.18) 100%); }
  [data-mobile-mode="horizontal"] .index-row-content{ height:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; }
  [data-mobile-mode="horizontal"] .index-row-left{ flex-direction:row; align-items:baseline; gap:16px; transform-origin:left center; }
  [data-mobile-mode="horizontal"] .index-row:hover .index-row-left{ transform:translateX(8px) scale(1.05); }
  [data-mobile-mode="horizontal"] .index-row-num{ font-size:.8rem; }
  [data-mobile-mode="horizontal"] .index-row-name{ font-size:1.15rem; writing-mode:horizontal-tb; transform:none; max-height:none; }
  [data-mobile-mode="horizontal"] .index-row-cat{ display:none !important; }
  [data-mobile-mode="horizontal"] .tag-arrow svg{ transform:none; }
  [data-mobile-mode="horizontal"] .index-row-arrow{ width:34px; height:34px; transform:none; }
  [data-mobile-mode="horizontal"] .index-row:hover .index-row-arrow{ transform:translateX(4px); }

  [data-mobile-mode="vertical"] .index-rows{ flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  [data-mobile-mode="vertical"] .index-row{ flex:1 1 96px; min-width:96px; height:100%; border-right:1px solid rgba(255,255,255,.18); }
  [data-mobile-mode="vertical"] .index-row:last-child{ border-right:none; }
  [data-mobile-mode="vertical"] .index-row-scrim{ background:linear-gradient(180deg, rgba(16,13,10,.32) 0%, rgba(16,13,10,0) 55%, rgba(16,13,10,.18) 100%); }
  [data-mobile-mode="vertical"] .index-row-content{ width:100%; height:100%; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; }
  [data-mobile-mode="vertical"] .index-row-left{ flex-direction:column; align-items:center; gap:12px; transform-origin:center center; }
  [data-mobile-mode="vertical"] .index-row:hover .index-row-left{ transform:translateY(-6px) scale(1.04); }
  [data-mobile-mode="vertical"] .index-row-num{ font-size:.85rem; }
  [data-mobile-mode="vertical"] .index-row-name{ font-size:1.1rem; writing-mode:vertical-rl; transform:rotate(180deg); max-height:40vh; }
  [data-mobile-mode="vertical"] .index-row-cat{ display:none !important; }
  [data-mobile-mode="vertical"] .tag-arrow svg{ width:14px; height:26px; transform:rotate(90deg); }
  [data-mobile-mode="vertical"] .index-row-arrow{ width:32px; height:32px; transform:rotate(90deg); }
  [data-mobile-mode="vertical"] .index-row:hover .index-row-arrow{ transform:rotate(90deg) translateX(3px); }
}

/* ============================================================
   Mode ONGLETS — effet "livre" : une seule rangée horizontale de
   cases, une par projet. La case survolée s'élargit et affiche la
   vraie page d'accueil du projet (logo, description, tags, photo
   découpée) ; les autres restent fines, se répartissant naturellement
   à gauche (déjà "tournées") ou à droite (à venir) selon leur ordre.
   ============================================================ */
.index-tabs-layout{ display:none; }
@media (min-width:901px){
  [data-desktop-mode="tabs"] .index-rows{ display:none; }
  [data-desktop-mode="tabs"] .index-tabs-layout{
    display:flex;
    flex-direction:row;
    flex:1;
    min-height:0;
    overflow:hidden;
  }

  .index-tab-slot{
    position:relative;
    overflow:hidden;
    height:100%;
    flex:0 0 68px;
    cursor:pointer;
    border:none;
    border-left:1px solid rgba(255,255,255,.18);
    padding:0;
    background:var(--accent, var(--ink));
    transition:flex-grow .65s cubic-bezier(.2,.7,.2,1), flex-basis .65s cubic-bezier(.2,.7,.2,1);
  }
  .index-tab-slot:first-child{ border-left:none; }
  .index-tab-slot.active{ flex:1 1 0; }

  /* Étiquette fine (numéro + nom pivoté), visible quand la case n'est pas active */
  .index-tab-thin{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    padding:20px 0;
    opacity:1;
    transition:opacity .3s ease;
  }
  .index-tab-slot.active .index-tab-thin{ opacity:0; pointer-events:none; }
  .index-tab-top{
    display:flex; flex-direction:column; align-items:center;
    gap:14px;
  }
  .index-tab-num{
    font-family:'Fraunces', serif; font-style:italic; font-weight:500;
    font-size:.85rem; color:rgba(255,255,255,.75);
  }
  .index-tab-name{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem;
    color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    writing-mode:vertical-rl; transform:rotate(180deg);
    max-height:320px; /* valeur fixe : ce bloc est maintenant niché dans .index-tab-top, dimensionné à son contenu (un % de hauteur n'aurait pas de base fiable) */
    text-shadow:0 1px 3px rgba(16,13,10,.4);
  }
  .index-tab-cat{
    display:flex; align-items:center;
    font-family:'Space Grotesk', sans-serif; font-size:.68rem; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.82);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    writing-mode:vertical-rl; transform:rotate(180deg);
    max-height:52%;
  }
  .index-tab-cat .tag-arrow{ margin:7px 0; }
  .index-tab-cat .tag-arrow svg{ width:11px; height:22px; transform:rotate(90deg); }

  /* Vraie page d'accueil du projet, visible seulement quand la case est active */
  .index-tab-wide{
    position:absolute; inset:0;
    opacity:0;
    transform:scale(1.045);
    transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    pointer-events:none;
  }
  .index-tab-slot.active .index-tab-wide{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }
  .index-tab-wide .cover-split{ min-height:0; height:100%; }
  /* La photo continue de zoomer doucement tant que la case reste active (effet Ken Burns) */
  .index-tab-wide .cover-photo-wrap img{
    transition:none;
    animation:tabsKenBurns 9s ease-in-out infinite alternate;
    animation-play-state:paused;
  }
  .index-tab-slot.active .index-tab-wide .cover-photo-wrap img{ animation-play-state:running; }
  /* Bouton « Voir plus » : le clic sur toute la case ouvre déjà le projet, mais
     rien ne le signalait au visiteur — d'où cette invitation explicite, qui
     n'apparaît que sur la case active. */
  .index-tab-more{
    position:absolute; right:38px; bottom:38px; z-index:3;
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 24px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;
    background:rgba(16,13,10,.28);
    backdrop-filter:blur(6px);
    color:#fff; cursor:pointer;
    font-family:'Space Grotesk', sans-serif;
    font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    opacity:0; transform:translateY(10px);
    transition:opacity .45s ease .25s, transform .45s ease .25s, background .2s ease, border-color .2s ease;
  }
  .index-tab-slot.active .index-tab-more{ opacity:1; transform:translateY(0); }
  .index-tab-more:hover{ background:rgba(16,13,10,.5); border-color:#fff; }

  @keyframes tabsKenBurns{
    from{ transform:scale(1); }
    to{ transform:scale(1.09); }
  }
}

/* ============================================================
   PROJECT VIEW — fiche plein écran d'un projet
   ============================================================ */
.project-view{ position:relative; background:var(--cream); color:var(--ink); min-height:100vh; }

.pv-nav{
  position:fixed;
  top:18px;
  left:24px;
  z-index:50;
  display:flex;
  gap:8px;
}
.pv-nav button{
  background:var(--ink);
  border:1.5px solid var(--ink);
  color:var(--cream);
  width:40px; height:40px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .2s ease;
  box-shadow:0 10px 24px -10px rgba(16,13,10,.4);
}
.pv-nav button:hover{ background:var(--accent, var(--ink-soft)); border-color:var(--accent, var(--ink-soft)); }
.pv-nav .back{ width:auto; border-radius:999px; padding:0 16px; gap:8px; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

.slide{ position:relative; animation:slideIn .5s cubic-bezier(.2,.7,.2,1); }
.slide.leaving{ animation:slideOut .2s ease forwards; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
@keyframes slideOut{ from{ opacity:1; } to{ opacity:0; } }

/* Page 1 du book : reprise fidèle de la couverture PDF — panneau couleur + photo, comme dans le book original */
.cover-split{
  display:flex;
  align-items:stretch;
  min-height:min(88vh, 900px);
  background:var(--accent, transparent); /* évite tout liseré de la couleur de page dans les interstices d'arrondi */
}
.cover-panel{
  flex:0 0 46%;
  min-width:0;
  background:var(--accent, var(--ink));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  padding:64px 56px;
  position:relative;
  z-index:1;
}
.cover-top{
  position:absolute;
  top:30px; left:236px; right:80px; /* right >= 64px (débord du bloc photo) + marge, pour ne jamais être recouvert par la photo qui a un z-index plus élevé */
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 14px; align-items:center;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-align:right;
}
.cover-top span{ min-width:0; overflow-wrap:break-word; } /* empêche le texte long de déborder hors de la zone au lieu de passer à la ligne */
.cover-num{ font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1rem; color:#fff; }
.rule{ height:1px; width:100px; background:rgba(255,255,255,.35); margin:0 0 26px; }
.cover-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.05;
  margin:0 0 20px;
  color:#fff;
}
.cover-logo-wrap{ display:flex; justify-content:center; } /* reçoit le décalage de position (Admin > Position et taille) sans perturber les marges du logo lui-même */
.cover-logo{
  display:block;
  max-width:min(420px, 88%);
  max-height:190px;
  width:auto; height:auto;
  object-fit:contain;
  margin:0 0 24px;
}
.cover-desc{ max-width:38ch; margin:0 0 26px; font-size:.85rem; line-height:1.55; color:rgba(255,255,255,.88); }
.cover-mini-cat{
  display:none; align-items:center; justify-content:center; flex-wrap:wrap;
  font-family:'Space Grotesk', sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.88);
}
.cover-split--minimal .cover-mini-cat{ display:flex; }
.cover-split--minimal .cover-mini-cat .tag-arrow{ margin:0 10px; }
.cover-split--minimal .cover-mini-cat .tag-arrow svg{ width:34px; height:16px; }
/* Décale le logo et le texte d'environ 1cm vers la gauche sur l'accueil en
   mode Onglets uniquement (pas sur la vraie page projet) — en élargissant le
   padding droit du panneau, ce qui déplace le centre du contenu, qui reste centré. */
.cover-split--minimal .cover-panel{ padding-left:56px; padding-right:132px; }
.cover-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cover-tags span{
  border:1.5px solid rgba(255,255,255,.55); color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; white-space:nowrap;
}
.cover-credit{
  position:absolute; left:0; right:0; bottom:26px;
  text-align:center;
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.cover-photo-wrap{
  flex:1 1 54%;
  position:relative;
  margin-left:-64px;
  overflow:hidden;
  z-index:2;
  background:var(--accent, transparent); /* garantit la couleur du panneau dans les creux du crénelage */
}
.cover-photo-wrap img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.stage-body{ background:var(--cream); color:var(--ink); padding:36px 60px 100px; }
.body-inner{ max-width:1180px; margin:0 auto; }
.brief{
  background:var(--accent, var(--ink)); color:#fff; border-radius:22px; padding:36px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px;
}
.brief h4{ margin:0 0 10px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.brief p{ margin:0; font-size:.95rem; line-height:1.6; }
.brief--attached{ border-radius:0; margin-bottom:0; }
/* Toutes les photos à la taille de la photo du brief (16/9, pleine largeur),
   les unes à la suite des autres et sans espace : une bande continue, façon
   planche-contact verticale. Elle défile dans son propre ascenseur plutôt que
   d'allonger indéfiniment la page sous la couverture du projet. */
.gallery-scroll{
  /* 136px = padding vertical de .stage-body (36 en haut + 100 en bas) : la bande
     occupe exactement la hauteur restante, sans déborder de l'écran. */
  height:calc(100vh - 136px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--accent, var(--ink)) rgba(16,13,10,.06);
}
.gallery-scroll::-webkit-scrollbar{ width:10px; }
.gallery-scroll::-webkit-scrollbar-track{ background:rgba(16,13,10,.06); }
.gallery-scroll::-webkit-scrollbar-thumb{ background:var(--accent, var(--ink)); border-radius:6px; }
@media (max-width:900px){
  /* .stage-body change de padding en mobile (28 + 120) */
  .gallery-scroll{ height:calc(100vh - 148px); }
}

.gallery{ display:flex; flex-direction:column; gap:0; }
.gallery a{ display:block; overflow:hidden; cursor:zoom-in; }
.gallery img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* Image de galerie avec légende visible en dessous — reprend le traitement
   du book original (pages "Brief initial / Résultat" sous la photo). Prend
   toute la largeur de la grille pour laisser la place au texte. */
/* Bande continue : plus d'arrondis ni de retrait, la légende touche la photo
   qu'elle commente et la photo suivante touche la légende. */
.gallery-item--captioned a{ cursor:zoom-in; }
.gallery-caption{
  background:var(--accent, var(--ink)); color:#fff;
  padding:22px 28px;
  font-size:.92rem; line-height:1.6;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,8,6,.95);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:40px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease;
}
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox-close{ position:absolute; top:26px; right:32px; background:none; border:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .index{ height:auto; min-height:100vh; }
  [data-mobile-mode="vertical"].index{ height:100vh; } /* les colonnes ont besoin d'une hauteur définie pour se répartir, comme en desktop */
  .index-hero{ grid-template-columns:1fr; padding:16px 22px 12px; gap:14px; text-align:left; }
  .index-hero-art{ max-height:80px; }
  .index-hero-contact{ justify-self:start; text-align:left; flex-direction:row; flex-wrap:wrap; gap:14px; margin-right:0; padding-top:0; }

  .cover-split{ flex-direction:column; min-height:0; }
  .cover-panel{ flex:none; padding:44px 22px 34px; }
  .cover-top{ position:static; justify-content:center; text-align:center; margin-bottom:22px; }
  .cover-credit{ position:static; margin-top:24px; }
  .cover-desc{ max-width:none; }
  .cover-photo-wrap{ flex:none; margin-left:0; clip-path:none !important; height:46vh; }
  .stage-body{ padding:28px 22px 120px; }
  .brief{ grid-template-columns:1fr; padding:26px; }
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .pv-nav{ top:auto; bottom:18px; left:18px; }
}

@media (prefers-reduced-motion: reduce){
  .slide{ animation:none; }
  .index-row{ transition:none; }
}

/* ---------- Language switch ---------- */
.lang-switch{
  position:fixed;
  top:18px;
  right:22px;
  z-index:80;
  display:flex;
  gap:4px;
  background:rgba(16,13,10,.5);
  backdrop-filter:blur(6px);
  border-radius:8px;
  padding:4px;
}
.lang-switch[hidden]{ display:none !important; } /* l'attribut hidden doit l'emporter sur le display:flex ci-dessus */
.lang-btn{
  width:24px; height:17px;
  padding:0;
  border-radius:3px;
  overflow:hidden;
  border:none;
  background:transparent;
  cursor:pointer;
  opacity:.5;
  filter:grayscale(70%);
  transition:opacity .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex; align-items:center; justify-content:center;
}
.lang-btn svg{ width:100%; height:100%; display:block; }
.lang-btn:hover{ opacity:.8; transform:scale(1.08); }
.lang-btn.active{
  opacity:1;
  filter:grayscale(0%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.8);
}
@media (max-width: 640px){
  .lang-switch{ top:12px; right:12px; padding:3px; gap:3px; }
  .lang-btn{ width:22px; height:15px; }
}

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--collectif); outline-offset:3px; }