/* =========================================================
   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;
}
.media-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.media-link:hover{
  color:inherit;
}

/* =========================================================
   ✅ TUILES = LIEN PLEIN (pas de couleur au hover)
   ========================================================= */

/* La tuile (a.exposition) doit rester neutre malgré a:hover global */
a.exposition,
a.exposition:hover,
a.exposition:focus,
a.exposition:active,
a.exposition:visited{
  color:inherit !important;
  text-decoration:none !important;
}

/* =========================================================
   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
   ========================================================= */

#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
   ========================================================= */

/* bouton caché par défaut, activé seulement sur pages OK */
#viewToggle{ display:none; }

/* ✅ Tablette + PC (comme avant) */
@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;
  }
}

/* ✅ Smartphone portrait/paysage (nouveau) */
@media (max-width:600px){
  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;
  }
}

/* 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 */
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 + HEADER
   ========================================================= */

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

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

  /* ✅ Header buttons */
  --hb-icon: 40px;
  --hb-gap: 1vw;
}

/* =========================================================
   BREAKPOINTS GRILLE (TES OBJECTIFS)
   Tab Vrt : 3
   Tab Hzt : 4
   Smart Vrt : 2
   Smart Hzt : 3
   Desktop : 4
   ========================================================= */

/* SMART portrait : 2 colonnes */
@media (max-width:600px) and (orientation: portrait){
  :root{ --grid-cols: 2; }
}

/* SMART paysage : 3 colonnes */
@media (max-height:500px) and (orientation: landscape){
  :root{ --grid-cols: 3; }
}

/* TABLETTE portrait : 3 colonnes */
@media (min-width:601px) and (orientation: portrait){
  :root{ --grid-cols: 3; }
}

/* TABLETTE paysage : 4 colonnes */
@media (min-width:601px) and (orientation: landscape){
  :root{ --grid-cols: 4; }
}

/* ✅ header UNIQUEMENT pour tes boutons */
header.header-buttons{
  position:fixed;
  left:var(--header-left);
  top:var(--header-top);
  z-index:1001;

  height:var(--hb-icon);
  width:1px; /* les enfants sont positionnés en absolute */
}

/* ✅ Menu ne bouge pas */
#menuButton.icon{
  position:absolute;
  left:0;
  top:0;
  background-color:#f0f; /* restore */
  opacity:.7;
}
#menuButton.icon:hover{ background-color:#70f; opacity:1; }

/* ✅ Scroll down à droite du menu */
#scrollDownButton.icon{
  position:absolute;
  left:calc(var(--hb-icon) + var(--hb-gap));
  top:0;
  background-color:#f0f; /* restore */
  opacity:.7;
}
#scrollDownButton.icon:hover{ background-color:#70f; opacity:1; }

/* ✅ Bouton retour */
#backTilesLink{
  position:absolute;
  top:0;
  left:0; /* ancré sur le menu */
  transform:translateX(calc(-100% - var(--hb-gap))); /* s’étend à gauche */

  height:var(--hb-icon);
  display:flex;
  align-items:center;

  padding:0 14px;
  background:#f0f;
  border-radius:4px;

  font-size:1.2rem;
  font-weight:400;
  color:#fff !important;
  text-decoration:none;
  white-space:nowrap;

  opacity:.85;
  transition:opacity .3s ease, background-color .3s ease;
}
#backTilesLink:hover{
  background:#70f;
  opacity:1;
}

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
   ========================================================= */

/* ✅ compatible : tuile <a class="exposition"> */
a.exposition,
.exposition{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin:0 0 1vh;
  z-index:0;
}

/* ✅ en mode “tuile = lien”, l’a doit être block */
a.exposition{
  display:block; /* override a{inline-block} */
  cursor:pointer;
  width:100%;
}

/* ✅ Image directe (tuile = a) */
a.exposition > img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

/* ✅ Fallback si certains templates n’ont pas encore été migrés */
.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;
  z-index:10;
  pointer-events:none;
}
.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;
}

.exposition > a.tile-link{
  position:absolute;
  inset:0;
  display:block;
  z-index:5;
}

.exposition .external-link{
  pointer-events:auto;
  position:relative; 
  z-index:20; 
}

/* =========================================================
   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 (boutons/menu seulement)
   ========================================================= */

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

    --hb-icon: 44px;
    --hb-gap: 2.5vw;
  }

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

  #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%; }

  /* ✅ backTiles à droite du scrollDown en mobile */
  #backTilesLink{
    left:calc((var(--hb-icon) * 2) + (var(--hb-gap) * 2));
    transform:none;

    height:var(--hb-icon);
    font-size:1.05rem;
    padding:0 10px;
    border-radius:8px;
  }
}

/* =========================================================
   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 : TOUS ÉCRANS (piloté par --grid-cols)
   ========================================================= */

/* -------------------------------------------------------
   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;
}

/* ✅ sections texte en pleine largeur */
body.view-grid main#main-content > .content-section{
  grid-column:1 / -1;
  width:100%;
}

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

/* -------------------------------------------------------
   2) TUILES "exposition"
------------------------------------------------------- */
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;
}

/* ✅ tuile = a.exposition (image directe) */
body.view-grid.page-series .exposition > img,
body.view-grid.page-fables .exposition > img,
body.view-grid.page-visites .exposition > img,
body.view-grid.page-flow   .exposition > img,
body.view-grid.page-archives .exposition > img,
body.view-grid.page-docs .exposition > img{
  width:100%;
  height:auto;
  display:block;
}

/* ✅ fallback si certaines pages sont encore en .exposition > a > img */
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
------------------------------------------------------- */
body.view-grid.page-flow figure.media-fullwidth,
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,
body.view-grid.page-visites figure.media-fullwidth{
  margin:0;
  position:relative;
  cursor:pointer;
}

body.view-grid.page-flow figure.media-fullwidth img,
body.view-grid.page-flow figure.media-fullwidth video,
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,
body.view-grid.page-visites figure.media-fullwidth img,
body.view-grid.page-visites figure.media-fullwidth video{
  width:100%;
  height:auto;
  display:block;
}

/* VISITES détail : vidéos pleine largeur */
body.view-grid.page-visites.visites-detail figure.media-fullwidth:has(.videosLabel),
body.view-grid.page-visites.visites-detail figure.media-fullwidth:has(.youtube_iframe_conteneur),
body.view-grid.page-visites.visites-detail figure.media-fullwidth:has(video){
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
  margin:0 0 1vw;
}

/* -------------------------------------------------------
   4) GRILLE : hover = zoom CLIPPÉ
------------------------------------------------------- */
body.view-grid .exposition,
body.view-grid figure.media-fullwidth{
  position:relative;
  z-index:1;
  overflow:hidden;
}

/* ✅ zoom : tuile = a.exposition > img */
body.view-grid .exposition > img,
body.view-grid figure.media-fullwidth > img,
body.view-grid figure.media-fullwidth > video{
  transform:scale(1);
  transform-origin:center;
  transition:transform 180ms ease;
  will-change:transform;
}

/* ✅ fallback zoom : ancien markup .exposition > a > img */
body.view-grid .exposition > a > img{
  transform:scale(1);
  transform-origin:center;
  transition:transform 180ms ease;
  will-change:transform;
}

body.view-grid .exposition:hover > img,
body.view-grid figure.media-fullwidth:hover > img,
body.view-grid figure.media-fullwidth:hover > video{
  transform:scale(1.05);
}
body.view-grid .exposition:hover > a > img{
  transform:scale(1.05);
}

/* VISITES détail : pas de zoom global */
body.view-grid.page-visites.visites-detail figure.media-fullwidth:hover > img,
body.view-grid.page-visites.visites-detail figure.media-fullwidth:hover > video{
  transform:none;
}
body.view-grid.page-visites.visites-detail figure.media-fullwidth:has(img):hover > img{
  transform:scale(1.035);
}

/* -------------------------------------------------------
   5) LABELS
------------------------------------------------------- */
body.view-grid.media-mini-label figure.media-fullwidth > figcaption.file-label,
body.view-grid.page-visites figure.media-fullwidth > figcaption.file-label{
  position:absolute;
  top:90%;
  left:2.5%;
  right:auto;
  bottom:auto;
  transform:translateY(-50%);
  padding:0 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:.5;

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

/* 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));
  pointer-events:none;
  z-index:10;
}

/* 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;
  z-index:10;
}

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 : audio dessous */
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;
  z-index:10;
}

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 BLOG + STREET ART : audio dessous si besoin */
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;
}