/* =========================================================
   RESET & BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  background:#fff;
  overflow-x:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
main#main-content{ margin:0; padding:0; }
figure{ margin:0; }
a{
  display:inline-block;
  text-decoration:none;
  color:#000;
}
a:hover{ color:#f0f; }

/* =========================================================
   ICONES / BOUTONS
   ========================================================= */

.icon{
  width:40px;
  height:40px;
  background-color:#f0f;
  border:none;
  border-radius:4px;
  position:relative;
  cursor:pointer;
  padding:0;
  opacity:.7;
  transition:opacity .3s ease, background-color .3s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon::before,.icon::after{ content:""; position:absolute; background:#fff; }
.icon:hover{ background-color:#70f; opacity:1; }

/* menu (≡) */
.icon.menu::before,.icon.menu::after{
  left:8px; right:8px; height:4px; border-radius:2px;
}
.icon.menu::before{ top:8px; box-shadow:0 10px 0 #fff; }
.icon.menu::after{ bottom:8px; }

/* open (|||) */
.icon.open::before{
  top:8px; bottom:8px; width:4px; left:50%;
  transform:translateX(-50%);
  box-shadow:-10px 0 0 #fff, 10px 0 0 #fff;
}
.icon.open::after{ display:none; }

/* top (↑) */
.icon.top{ border-radius:50%; background-color:#f0f; }
.icon.top::before{ width:2px; height:18px; left:19px; top:13px; border-radius:1px; }
.icon.top::after{
  width:12px; height:12px; left:14px; top:13px;
  background:transparent;
  border-left:2px solid #fff;
  border-top:2px solid #fff;
  transform:rotate(45deg);
}

/* back (←) */
.icon.back{ border-radius:50%; background-color:#f0f; }
.icon.back::before{ width:18px; height:2px; left:13px; top:19px; border-radius:1px; }
.icon.back::after{
  width:12px; height:12px; left:13px; top:14px;
  background:transparent;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

/* down (— + ▼) */
.icon.scroll-down{ border-radius:4px; background-color:#f0f; }
.icon.scroll-down::before{ width:18px; height:2px; left:11px; top:15px; border-radius:1px; }
.icon.scroll-down::after{
  width:0; height:0; left:13px; top:19px;
  background:transparent;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:10px solid #fff;
}

/* =========================================================
   SCROLL BUTTONS : Back / Top
   - masqués par défaut (y < 400)
   - visibles uniquement si JS ajoute .is-visible
   ========================================================= */

#scrollDownButton[hidden]{ display:none !important; }

#scroll-buttons{
  position:fixed;
  right:7vw;
  bottom:3vw;
  display:flex;
  gap:1vw;
  z-index:1001;
}

/* état caché (par défaut) */
#scroll-buttons .icon{
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background-color .3s ease;
}

/* état visible */
#scroll-buttons .icon.is-visible{
  opacity:.7;
  transform:translateY(0);
  pointer-events:auto;
}
#scroll-buttons .icon.is-visible:hover{ opacity:1; }

/* focus clavier */
#scroll-buttons .icon:focus-visible{
  outline:2px solid #70f;
  outline-offset:2px;
}

/* =========================================================
   VIEW TOGGLE : commande liste/grille
   - Tablette + PC + pages concernées
   - même fade in/out que back/top
   ========================================================= */

/* on garde la règle + pages => le bouton "existe" */
#viewToggle{ display:none; }

/* ✅ AVANT: 1024px ; ✅ MAINTENANT: 601px (tablettes incluses) */
@media (min-width:601px){
  body.page-series #viewToggle,
  body.page-fables #viewToggle,
  body.page-visites #viewToggle,
  body.page-flow #viewToggle,
  body.page-docs #viewToggle,
  body.page-archives #viewToggle,
  body.page-video #viewToggle,
  body.page-ecouter #viewToggle,
  body.page-photosBlog #viewToggle,
  body.page-streetArt #viewToggle{
    display:inline-flex;
  }
}

/* IMPORTANT : hidden via opacity/pointer-events par défaut,
   visible UNIQUEMENT via .is-visible (JS) */
#viewToggle.icon.view-toggle{
  width:40px;
  height:40px;
  background:#f0f !important;
  border:none;
  border-radius:4px;

  /* fade out par défaut (y<400) */
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background-color .3s ease;
}

#viewToggle.icon.view-toggle::before,
#viewToggle.icon.view-toggle::after{ display:none; }

#viewToggle.icon.view-toggle.is-visible{
  opacity:.7;
  transform:translateY(0);
  pointer-events:auto;
}
#viewToggle.icon.view-toggle.is-visible:hover{
  background:#70f;
  opacity:1;
}

/* Picto */
#viewToggle .cmd_picto{ position:relative; width:26px; height:26px; display:block; }

/* par défaut : picto GRILLE */
#viewToggle .cmd_picto::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#fff,#fff) left  top    / 10px 10px no-repeat,
    linear-gradient(#fff,#fff) right top    / 10px 10px no-repeat,
    linear-gradient(#fff,#fff) left  bottom / 10px 10px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 10px 10px no-repeat;
}

/* en mode grille : picto LISTE = • — (x3) */
body.view-grid #viewToggle .cmd_picto::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle,#fff 55%,transparent 56%) 2px 3px  / 4px 4px no-repeat,
    linear-gradient(#fff,#fff)                          9px 4px  / 15px 3px no-repeat,
    radial-gradient(circle,#fff 55%,transparent 56%) 2px 10px / 4px 4px no-repeat,
    linear-gradient(#fff,#fff)                          9px 11px / 15px 3px no-repeat,
    radial-gradient(circle,#fff 55%,transparent 56%) 2px 17px / 4px 4px no-repeat,
    linear-gradient(#fff,#fff)                          9px 18px / 15px 3px no-repeat;
}

/* =========================================================
   MENU BUTTON : intro drop + nudge
   ========================================================= */

#menuButton.menu-intro{
  transform:translateY(-120vh);
  opacity:0;
  will-change:transform, opacity, box-shadow;
}

@keyframes menuDropElastic{
  0%   { transform:translateY(-120vh) scaleX(.75) scaleY(1.55); opacity:0; }
  20%  { transform:translateY(-70vh)  scaleX(.70) scaleY(1.75); opacity:1; }
  42%  { transform:translateY(-10vh)  scaleX(.72) scaleY(1.65); }
  55%  { transform:translateY(14px)   scaleX(1.45) scaleY(.58); }
  68%  { transform:translateY(-22px)  scaleX(.85) scaleY(1.25); }
  78%  { transform:translateY(6px)    scaleX(1.25) scaleY(.72); }
  88%  { transform:translateY(-10px)  scaleX(.92) scaleY(1.10); }
  94%  { transform:translateY(2px)    scaleX(1.12) scaleY(.92); }
  100% { transform:translateY(0)      scaleX(1) scaleY(1); }
}
#menuButton.menu-drop{
  animation:menuDropElastic 1050ms cubic-bezier(.15,.95,.25,1.15) both;
  opacity:1;
}

@keyframes menuNudgeDual{
  0%   { transform:scale(1) rotate(0deg); box-shadow:0 0 0 0 rgba(255,255,255,.38), 0 0 0 0 rgba(0,0,0,.28); }
  35%  { transform:scale(1.08) rotate(-6deg); box-shadow:0 0 0 12px rgba(255,255,255,0), 0 0 0 12px rgba(0,0,0,0); }
  55%  { transform:scale(1.06) rotate(6deg);  box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); }
  75%  { transform:scale(1.03) rotate(-3deg); box-shadow:0 0 0 9px rgba(255,255,255,0), 0 0 0 9px rgba(0,0,0,0); }
  100% { transform:scale(1) rotate(0deg); box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); }
}

@keyframes menuNudgeCycle{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); transform:scale(1) rotate(0deg); }
  6%   { box-shadow:0 0 0 0 rgba(255,255,255,.38), 0 0 0 0 rgba(0,0,0,.28); transform:scale(1) rotate(0deg); }
  16%  { box-shadow:0 0 0 12px rgba(255,255,255,0), 0 0 0 12px rgba(0,0,0,0); transform:scale(1.08) rotate(-6deg); }
  26%  { box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); transform:scale(1) rotate(0deg); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); transform:scale(1) rotate(0deg); }
}

#menuButton.menu-nudge-cycle{ animation:menuNudgeCycle 6s ease-out infinite; }
#menuButton.menu-nudge-now{ animation:menuNudgeDual 850ms ease-out 1; }
#menuButton.menu-nudge-cycle.menu-nudge-now{
  animation:menuNudgeCycle 6s ease-out infinite, menuNudgeDual 850ms ease-out 1;
}
#menuButton.menu-stopped{ animation:none !important; box-shadow:none !important; transform:none !important; }

@media (prefers-reduced-motion: reduce){
  #menuButton.menu-intro,
  #menuButton.menu-drop,
  #menuButton.menu-nudge-now,
  #menuButton.menu-nudge-cycle{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    box-shadow:none !important;
  }
}

/* =========================================================
   MENU
   ========================================================= */

:root{
  --header-top: 5vw;
  --header-left: 20vw;
  --header-h: 40px;
  --menu-top: calc(var(--header-top) + var(--header-h) + 12px);

  /* ✅ GRILLE : valeurs par défaut */
  --grid-cols: 4;
  --grid-gap: 4px;
}

/* ✅ Tablette portrait : 3 colonnes */
@media (min-width:601px) and (max-width:1023px) and (orientation: portrait){
  :root{ --grid-cols: 3; }
}
/* ✅ Tablette paysage : 4 colonnes */
@media (min-width:601px) and (orientation: landscape){
  :root{ --grid-cols: 4; }
}

header{
  position:fixed;
  left:var(--header-left);
  top:var(--header-top);
  z-index:1001;
  display:flex;
  align-items:center;
  gap:1vw;
}

nav#mainMenu{
  position:fixed;
  top:0;
  left:0;
  transform:translateX(-120%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.3vw;

  padding-top: var(--menu-top);
  padding-left:3vw;

  max-height: 100dvh;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);

  background:transparent;
  z-index:1000;
  transition:transform .3s ease;
}

nav#mainMenu.open{ transform:translateX(0); }

nav#mainMenu a{
  display:inline-block;
  font-size:1.2rem;
  padding:0 1vw;
  background-color:#f0f;
  border-radius:.15vw;
  opacity:.85;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .3s ease, background-color .3s ease;
}
nav#mainMenu a:hover{ background-color:#70f; opacity:1; }
nav#mainMenu a.active{ opacity:1; }

/* =========================================================
   MEDIAS (plein écran) + labels
   ========================================================= */

figure.media-fullwidth{ position:relative; margin:0 0 1vw; }
figure.media-fullwidth img,
figure.media-fullwidth video{
  display:block;
  width:100vw;
  max-width:100vw;
  height:auto;
}
figcaption.file-label{
  position:absolute;
  top:90%;
  left:2.5%;
  transform:translateY(-50%);
  padding:.2vw .45vw;
  background:rgba(30,30,30,.9);
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  border-radius:2px;
  pointer-events:none;
  z-index:10;
}
audio.audio-player{
  position:absolute;
  top:80%;
  left:2.5%;
  width:50%;
  height:5%;
  z-index:20;
}

/* =========================================================
   TUILES GENERIQUES
   ========================================================= */

.exposition{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin:0 0 1vh;
  z-index:0;
}
.exposition > a{ display:block; width:100%; }
.exposition > a > img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.exposition .captation{
  position:absolute;
  bottom:4vw;
  left:2vw;
  width:96vw;
}
.exposition .captation .titre{
  font-size:6vw;
  font-weight:800;
  color:#fff;
  text-align:right;
  text-shadow:2px 2px 2px black;
  opacity:.9;
  line-height:var(--lh-titre, 5vw);
  margin-bottom:var(--mb-titre, 0vw);
}
.exposition .captation .sousTitre{
  font-size:2vw;
  font-weight:800;
  color:#fff;
  text-align:right;
  text-shadow:2px 2px 2px black;
  opacity:.9;
  line-height:var(--lh-sousTitre, 2vw);
  margin-bottom:var(--mb-sousTitre, 0vw);
}

body.page-archives{ --lh-titre:5vw; --lh-sousTitre:2vw; --mb-titre:0vw; --mb-sousTitre:12vw; }
body.page-visites{ --lh-titre:0vw; --lh-sousTitre:0vw; --mb-titre:0vw; --mb-sousTitre:4vw; }
body.page-flow{ --lh-titre:5vw; --lh-sousTitre:2vw; --mb-titre:8vw; --mb-sousTitre:0vw; }
body.page-fables{ --lh-titre:5vw; --lh-sousTitre:2vw; --mb-titre:3.8vw; --mb-sousTitre:3.8vw; }
body.page-series{ --lh-titre:5vw; --lh-sousTitre:2vw; --mb-titre:4.4vw; --mb-sousTitre:4.1vw; }
body.page-webDesign{ --lh-titre:12vw; --lh-sousTitre:2vw; --mb-titre:4vw; --mb-sousTitre:0vw; }
body.page-series{ --lh-titre:1; --lh-sousTitre:1.1; --mb-titre:0vw; --mb-sousTitre:2vw; }

.exposition .captation .resume{
  position:relative;
  bottom:5%;
  left:65%;
  width:31%;
  z-index:20;
  display:block;
  font-size:1.2vw;
  font-weight:500;
  background-color:rgba(255,255,255,.9);
  padding:.5vw 2vw;
}
.exposition .captation .suite{
  position:relative;
  color:#FFF;
  padding:1vw;
  background-color:#999;
}

/* =========================================================
   5 COLONNES en pied de page
   ========================================================= */

.content-section.layout-5cols{
  display:grid;
  grid-template-columns:5% 25% 25% 40% 5%;
  width:100%;
  padding:2vw 0 8vw;
  box-sizing:border-box;
  align-items:start;
}
.content-section.layout-5cols .content-liens{ grid-column:2; }
.content-section.layout-5cols .content-texte{ grid-column:3; }
.content-section.layout-5cols .content-edito{ grid-column:4; }
.content-section.layout-5cols .content-container{ display:contents; }
.content-section.layout-5cols .content-liens,
.content-section.layout-5cols .content-texte,
.content-section.layout-5cols .content-edito{
  padding-left:1.5vw;
  padding-right:1.5vw;
  box-sizing:border-box;
}
.content-section.layout-5cols .content-liens .titre,
.content-section.layout-5cols .content-texte .titre,
.content-section.layout-5cols .content-edito .titre{
  display:block;
  font-size:3vw;
  font-weight:800;
  padding-bottom:1vw;
}
.content-section.layout-5cols .content-liens .sousTitre,
.content-section.layout-5cols .content-texte .sousTitre,
.content-section.layout-5cols .content-edito .sousTitre{
  display:block;
  font-size:2vw;
  font-weight:800;
  padding:1vw 0;
}
.content-section.layout-5cols .content-liens .texte,
.content-section.layout-5cols .content-texte .texte,
.content-section.layout-5cols .content-edito .texte{
  display:block;
  font-size:1vw;
}
.content-section.layout-5cols .content-liens a.active,
.content-section.layout-5cols .content-texte a.active{ color:#f0f; }
.content-section .content-liens,
.content-section .content-texte,
.content-section .content-edito{
  font-size:.95vw;
  line-height:1.45;
}
.content-section .content-liens a,
.content-section .content-texte a,
.content-section .content-edito a{
  font-weight:800;
  text-decoration:none;
}

/* =========================================================
   ABOUT
   ========================================================= */

.content-section.layout-about{
  display:grid;
  grid-template-columns:25% 23% 24% 23% 5%;
  width:100%;
  padding:2vw 0 8vw;
  box-sizing:border-box;
  align-items:start;
}
.content-section.layout-about .content-liens{ grid-column:2; }
.content-section.layout-about .content-texte{ grid-column:3; }
.content-section.layout-about .content-edito{ grid-column:4; }
.content-section.layout-about .content-liens,
.content-section.layout-about .content-texte,
.content-section.layout-about .content-edito{
  padding-left:1.5vw;
  padding-right:1.5vw;
  box-sizing:border-box;
}

/* =========================================================
   VISITES
   ========================================================= */

.videosLabel{
  display:block;
  font-size:9vw;
  color:#999;
  font-weight:800;
}

/* =========================================================
   WEBDESIGN
   ========================================================= */

.webdesign-exposition{
  width:100vw;
  max-width:100vw;
  margin:0 0 1vh;
}
.webdesign-exposition a{ display:block; width:100%; }
.webdesign-img{
  display:block;
  width:100vw;
  max-width:100vw;
  height:auto;
  object-fit:contain;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px){
  :root{
    --header-top: 4vw;
    --header-left: 4vw;
    --header-h: 44px;
    --menu-top: calc(var(--header-top) + var(--header-h) + 12px);
  }

  .icon{ width:44px; height:44px; border-radius:8px; }
  .icon.top,.icon.back{ border-radius:50%; }

  header{ gap:2.5vw; }

  #scroll-buttons{ right:4vw; bottom:4vw; gap:2.5vw; }

  nav#mainMenu{
    padding-left:4vw;
    gap:2px;
  }
  nav#mainMenu a{
    font-size:1.05rem;
    padding:2px 8px;
    border-radius:6px;
    line-height:1.05;
  }

  .icon.menu::before,.icon.menu::after{ left:10px; right:10px; height:4px; border-radius:2px; }
  .icon.menu::before{ top:10px; box-shadow:0 10px 0 #fff; }
  .icon.menu::after{ bottom:10px; }

  .icon.open::before{
    top:10px; bottom:10px; width:4px; left:50%;
    transform:translateX(-50%);
    box-shadow:-9px 0 0 #fff, 9px 0 0 #fff;
  }

  .icon.top::before{ width:2px; height:18px; left:21px; top:13px; border-radius:1px; }
  .icon.top::after{ width:12px; height:12px; left:16px; top:12px; border-left:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg); }

  .icon.back::before{ width:18px; height:2px; left:14px; top:21px; border-radius:1px; }
  .icon.back::after{ width:12px; height:12px; left:14px; top:16px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }

  .icon.scroll-down::before{ width:18px; height:2px; left:13px; top:16px; border-radius:1px; }
  .icon.scroll-down::after{ left:14px; top:20px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:11px solid #fff; }

  figcaption.file-label{ font-size:.5rem; padding:2px 6px; border-radius:4px; top:92%; }
  audio.audio-player{ width:70%; height:4%; top:82%; }
}

/* =========================================================
   VIDEOS : titre -> tablette plus haut, mobile masqué
   ========================================================= */

@media (min-width: 601px) and (max-width: 1366px){
  figure.media-fullwidth video + figcaption.file-label{ top:78%; }
}
@media (min-width: 601px) and (max-width: 1366px) and (orientation: landscape){
  figure.media-fullwidth video + figcaption.file-label{ top:82%; }
}
@media (max-width: 600px){
  figure.media-fullwidth video + figcaption.file-label{ display:none !important; }
}

/* =========================================================
   MODE GRILLE : TABLETTE + PC (clean)
   - 4 colonnes en landscape / desktop
   - 3 colonnes en portrait tablette
   ========================================================= */

@media (min-width:601px){

  /* -------------------------------------------------------
     1) GRILLE (layout)
  ------------------------------------------------------- */
  body.view-grid.page-series main#main-content,
  body.view-grid.page-fables main#main-content,
  body.view-grid.page-visites main#main-content,
  body.view-grid.page-flow main#main-content,
  body.view-grid.page-archives main#main-content,
  body.view-grid.page-docs main#main-content,
  body.view-grid.page-video main#main-content,
  body.view-grid.page-ecouter main#main-content,
  body.view-grid.page-photosBlog main#main-content,
  body.view-grid.page-streetArt main#main-content{
    display:grid;
    grid-template-columns:repeat(var(--grid-cols), 1fr);
    gap:var(--grid-gap);
    align-items:start;
    padding:0;
  }

  /* FLOW : densité */
  body.view-grid.page-flow main#main-content{ grid-auto-flow:dense; }
  body.view-grid.page-flow main#main-content > :not(.exposition){ grid-column:1 / -1; }

  /* Sections texte pleine largeur */
  body.view-grid .content-section,
  body.view-grid .videosLabel{ grid-column:1 / -1; }

  /* -------------------------------------------------------
     2) TUILES "exposition" (series/fables/visites/flow/archives/docs)
  ------------------------------------------------------- */
  body.view-grid.page-series .exposition,
  body.view-grid.page-fables .exposition,
  body.view-grid.page-visites .exposition,
  body.view-grid.page-flow   .exposition,
  body.view-grid.page-archives .exposition,
  body.view-grid.page-docs .exposition{
    width:auto;
    max-width:100%;
    margin:0;
  }

  body.view-grid.page-series .exposition > a > img,
  body.view-grid.page-fables .exposition > a > img,
  body.view-grid.page-visites .exposition > a > img,
  body.view-grid.page-flow   .exposition > a > img,
  body.view-grid.page-archives .exposition > a > img,
  body.view-grid.page-docs .exposition > a > img{
    width:100%;
    height:auto;
    display:block;
  }

  body.view-grid.page-series .exposition .captation .resume,
  body.view-grid.page-fables .exposition .captation .resume,
  body.view-grid.page-visites .exposition .captation .resume,
  body.view-grid.page-flow   .exposition .captation .resume,
  body.view-grid.page-archives .exposition .captation .resume,
  body.view-grid.page-docs .exposition .captation .resume{
    display:none;
  }

  body.view-grid.page-series .exposition .captation,
  body.view-grid.page-fables .exposition .captation,
  body.view-grid.page-visites .exposition .captation,
  body.view-grid.page-flow   .exposition .captation,
  body.view-grid.page-archives .exposition .captation,
  body.view-grid.page-docs .exposition .captation{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:10px 10px 12px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  }

  body.view-grid.page-series .exposition .captation .titre,
  body.view-grid.page-fables .exposition .captation .titre,
  body.view-grid.page-visites .exposition .captation .titre,
  body.view-grid.page-flow   .exposition .captation .titre,
  body.view-grid.page-archives .exposition .captation .titre,
  body.view-grid.page-docs .exposition .captation .titre{
    font-size:clamp(14px, 1.05vw, 18px);
    font-weight:800;
    color:#fff;
    text-shadow:2px 2px 2px #000;
    text-align:right;
    line-height:1.1;
    margin:0 0 4px;
  }

  body.view-grid.page-series .exposition .captation .sousTitre,
  body.view-grid.page-fables .exposition .captation .sousTitre,
  body.view-grid.page-visites .exposition .captation .sousTitre,
  body.view-grid.page-flow   .exposition .captation .sousTitre,
  body.view-grid.page-archives .exposition .captation .sousTitre,
  body.view-grid.page-docs .exposition .captation .sousTitre{
    font-size:clamp(12px, .85vw, 14px);
    font-weight:800;
    color:#fff;
    text-shadow:2px 2px 2px #000;
    text-align:right;
    line-height:1.2;
    margin:0;
  }

  /* -------------------------------------------------------
     3) MEDIA (video/ecouter + archives/blog/docs)
  ------------------------------------------------------- */
  body.view-grid.page-video figure.media-fullwidth,
  body.view-grid.page-ecouter figure.media-fullwidth,
  body.view-grid.page-archives figure.media-fullwidth,
  body.view-grid.page-docs figure.media-fullwidth,
  body.view-grid.page-photosBlog figure.media-fullwidth,
  body.view-grid.page-streetArt figure.media-fullwidth{
    margin:0;
    position:relative;
    cursor:pointer;
  }

  body.view-grid.page-video figure.media-fullwidth img,
  body.view-grid.page-video figure.media-fullwidth video,
  body.view-grid.page-ecouter figure.media-fullwidth img,
  body.view-grid.page-ecouter figure.media-fullwidth video,
  body.view-grid.page-archives figure.media-fullwidth img,
  body.view-grid.page-archives figure.media-fullwidth video,
  body.view-grid.page-docs figure.media-fullwidth img,
  body.view-grid.page-docs figure.media-fullwidth video,
  body.view-grid.page-photosBlog figure.media-fullwidth img,
  body.view-grid.page-photosBlog figure.media-fullwidth video,
  body.view-grid.page-streetArt figure.media-fullwidth img,
  body.view-grid.page-streetArt figure.media-fullwidth video{
    width:100%;
    height:auto;
    display:block;
  }

  /* -------------------------------------------------------
     4) LABELS : règles explicites par type de page
  ------------------------------------------------------- */

  /* VIDEO : bandeau en bas */
  body.view-grid.page-video figure.media-fullwidth > figcaption.file-label{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    margin:0;
    border-radius:0;
    padding:10px 10px 12px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  }

  /* ECOUTER : bandeau + audio dessous */
  body.view-grid.page-ecouter figure.media-fullwidth > figcaption.file-label{
    position:absolute;
    left:0;
    right:0;
    bottom:52px;
    top:auto;
    transform:none;
    margin:0;
    border-radius:0;
    padding:10px 10px 12px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    font-size:clamp(12px, .9vw, 14px);
    font-weight:800;
    pointer-events:none;
  }

  body.view-grid.page-ecouter figure.media-fullwidth > .audio-player{
    position:static;
    display:block;
    width:100%;
    height:44px;
    margin:8px 0 0;
    pointer-events:auto;
  }

  /* ARCHIVES : bandeau en bas */
  body.view-grid.page-archives figure.media-fullwidth > figcaption.file-label{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    margin:0;
    border-radius:0;
    padding:10px 10px 12px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    pointer-events:none;
    font-size:clamp(12px, .9vw, 14px);
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;  
    }

  body.view-grid.page-archives figure.media-fullwidth > .audio-player{
    position:static;
    display:block;
    width:100%;
    height:44px;
    margin:8px 0 0;
    pointer-events:auto;
  }

  /* DOCS : bandeau en bas */
  body.view-grid.page-docs figure.media-fullwidth > figcaption.file-label{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    margin:0;
    border-radius:0;
    padding:10px 10px 12px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    font-size:clamp(12px, .9vw, 14px);
    font-weight:800;
    pointer-events:none;
  }

  body.view-grid.page-docs figure.media-fullwidth.is-audio > .audio-player{
    position:static;
    display:block;
    width:100%;
    height:44px;
    margin:8px 0 0;
    pointer-events:auto;
  }

  /* PHOTOS : label gris + mini */
  body.view-grid.page-photosBlog figure.media-fullwidth > figcaption.file-label,
  body.view-grid.page-streetArt  figure.media-fullwidth > figcaption.file-label{
    position:absolute;
    top:90%;
    left:2.5%;
    right:auto;
    bottom:auto;
    transform:translateY(-50%);
    padding:0px 3px;
    background:rgba(30,30,30,.9);
    color:#fff;
    border-radius:2px;

    font-size: clamp(7px, .4vw, 8px);
    line-height:1.15;
    font-weight:300;
    opacity: 0.5;

    max-width:92%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
  }

  body.view-grid.page-photosBlog figure.media-fullwidth > .audio-player,
  body.view-grid.page-streetArt  figure.media-fullwidth > .audio-player{
    position:static;
    display:block;
    width:100%;
    height:44px;
    margin:8px 0 0;
    pointer-events:auto;
  }
}

/* ✅ Mobile : pas de grille (seulement < 601px) */
@media (max-width:600px){
  body.view-grid main#main-content{ display:block !important; }
}