/*
 Theme Name:   Cesar H
 Description:  A child theme from Html5blank
 Author:       César Henry
 Template:     html5blank-stable
 Text Domain:  ch-theme
 Version:      1.0.0
*/

:root{
  /* Typo */
  --font-main: 'Sora', sans-serif;

  --font-size-base: 17px;
  --font-size-small: 13px;
  --font-size-large: 26px;
  --font-size-nav: 20px;

  /* Layout */
  --gutter-left: 80px;     /* desktop only */
  --gutter-right: 80px;    /* desktop only (réserve nav texte) */
  --content-pad-y: 24px;
  --pad-mobile: 16px;      /* mobile only */
}

/* =========================
   Base
   ========================= */
html, body{
  overflow-x: hidden;
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: 1.4;

}

.wrapper{
  max-width: none;
  width: 100%;
}

a{ color: #000; }

/* =========================
   Header / Nav
   ========================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 24px;
  font-weight: 600;
  color: #000;
}

.site-branding{
  position: fixed;
  top: 24px;
  left: 24px;
  font-size: var(--font-size-large);
  color: #000;
}
.site-logo{
  text-decoration: none;
  color: #000;
}

.site-navigation{
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1100;
}

.site-navigation .nav-menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
}

.site-navigation .nav-menu a{
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* Desktop hover */
@media (min-width: 901px){
  .site-navigation .nav-menu a{
    display: inline-block;
    transition: transform 220ms ease;
  }
  .site-navigation .nav-menu a:hover{
    transform: translateX(-4px) rotate(180deg);
  }
}

/* le 1er item = bouton close */
.site-navigation .nav-menu .nav-close{
  list-style: none;
  border-bottom: 0;     /* ❌ supprime le trait horizontal */
  margin: 0;
  padding: 0;
 }

/* bouton pleine largeur */
.site-navigation .nav-menu .nav-close__btn{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  cursor: pointer;
}

/* zone "pictogramme" : adapte la hauteur si besoin */
.site-navigation .nav-menu .nav-close__x{
  display: block;
  position: relative;
  height: 22px; /* hauteur sobre, proche d’un item */
}

/* croix = 2 traits, même épaisseur que les borders */
.site-navigation .nav-menu .nav-close__x::before,
.site-navigation .nav-menu .nav-close__x::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;             /* ✅ même épaisseur */
  background: currentColor; /* ✅ même couleur */
  transform-origin: center;
}

.site-navigation .nav-menu .nav-close__x::before{
  transform: translateY(-50%) rotate(45deg);
}

.site-navigation .nav-menu .nav-close__x::after{
  transform: translateY(-50%) rotate(-45deg);
}

body:not(.nav-open) .site-navigation .nav-menu .nav-close{
  display: none;
}



/* =========================
   Main layout
   ========================= */
main{
  padding-top: 0px;
  padding-bottom: var(--content-pad-y);
}

/* Desktop: gouttières */
@media (min-width: 901px){
  main{
    padding-left: var(--gutter-left);
    padding-right: 0;
  }

  /* Texte : réserve à droite (nav) */
  main :is(
    h1,h2,h3,h4,h5,h6,
    p,
    ul,ol,li,
    blockquote,
    pre,code,
    .wp-block-heading,
    .wp-block-paragraph,
    .wp-block-list,
    .wp-block-quote
  ){
    padding-right: var(--gutter-right);
  }

  /* Visuels : pas de réserve à droite */
  main :is(
    figure,
    img,
    video,
    .wp-block-image,
    .wp-block-gallery,
    .wp-block-media-text,
    .wp-block-cover,
    .wp-block-group
  ){
    padding-right: 0;
  }
}

/* Mobile: padding symétrique, pas de réserve nav texte */
@media (max-width: 900px){
  main{
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
  }

  main :is(
    h1,h2,h3,h4,h5,h6,
    p,
    ul,ol,li,
    blockquote,
    pre,code,
    .wp-block-heading,
    .wp-block-paragraph,
    .wp-block-list,
    .wp-block-quote
  ){
    padding-right: 0;
  }
}

/* =========================
   Mobile nav rails + tiroir
   ========================= */
@media (max-width: 900px){

  .site-navigation{
    top: 32px;
    right: 24px;
  }

  .site-navigation .nav-menu{
    width: 30px;
    align-items: center;
    gap: 6px;
    cursor: pointer; /* fermé: burger */
  }

  /* Rails */
  .site-navigation .nav-menu li{
    width: 30px;
    border-bottom: 2px solid currentColor;
    overflow: hidden;
  }

  /* Tiroir (le lien s’ouvre/ferme) */
  .site-navigation .nav-menu li > a{
    display: block;
    height: 0;                  /* fermé */
    overflow: hidden;
    pointer-events: none;       /* fermé: pas cliquable */
    transition: height 360ms ease;
    text-align: left;
  }

  body.nav-open .site-navigation .nav-menu{
    cursor: default;
  }

  body.nav-open .site-navigation .nav-menu li > a{
    height: 150px;              /* ouvert */
    pointer-events: auto;
    padding-top: 10px;
  }
}

@media (max-width: 900px){

  body.nav-open .site-navigation .nav-menu li{
    position: relative;
  }
/*
  body.nav-open .site-navigation .nav-menu li::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.2) 50%,
      rgba(255,255,255,0.85) 100%
    );
  }
  */
}


/* =========================
   Archive / Mosaïque
   ========================= */

/* Bypass du padding main pour cette page (tuile plein plan) */
@media (min-width: 901px){
  .archive{
    padding-left: var(--gutter-left); /* <-- récupère la gouttière */
    padding-right: 0;
  }
}

/* Grille */
.archive-canvas{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;

  padding-right: 24px; /* desktop: légère respiration à droite */
  position: relative;  /* déjà présent plus bas chez toi : on le garde ici */
}

.mosaic-tile{ display: block; }

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

/* Mobile: 2 colonnes + marges symétriques */
@media (max-width: 900px){
  .archive-canvas{
    grid-template-columns: repeat(2, 1fr);
    padding-left: 16px;
    padding-right: 16px;
  }
}

.archive-canvas::before{
  content:"";
  grid-column: span 2;
  grid-row: span 1;
}

@media (max-width: 900px){
  #archive-canvas{
    padding-top:25vh; /* ~1/3 écran */
  }
}


/* =========================
   MOSAÏQUE : chaos léger + tailles + overlap (SANS rotation)
   + Hover overlay titre (desktop only)
   + Overlay UNIQUEMENT sur l'image
   ========================= */

/* Base tile (peut avoir de la zone vide -> PAS d'overlay ici) */
.mosaic-tile{
  position: relative;
  display: block;

  transform: translate(var(--tx, 0px), var(--ty, 0px));
  z-index: var(--z, 1);
  will-change: transform;
}

/* Tailles (spans) */
.mosaic-tile.is-s{ grid-column: span 1; grid-row: span 1; }
.mosaic-tile.is-m{ grid-column: span 2; grid-row: span 2; }
.mosaic-tile.is-l{ grid-column: span 2; grid-row: span 2; }

/* Wrapper image : c'est LUI qui reçoit overlay + titre */
.mosaic-media{
  position: relative;
  display: inline-block; /* épouse la hauteur de l'image */
  width: 100%;           /* mais prend toute la largeur de la tuile */
  overflow: hidden;      /* overlay et titre restent dans l'image */
}

/* Image */
.mosaic-img{
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay subtil, seulement sur l'image */
.mosaic-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,.50); /* subtil (ajuste .15 à .30) */
  opacity:0;
  transition: opacity 200ms ease;
  pointer-events:none;
}

/* Titre bas gauche, seulement sur l'image */
.mosaic-title{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;

  padding: 10px 12px;
  max-width: 92%;

  color:#fff;
  text-align:left;
  font-size: 1.2rem;
  line-height: 1.1;

  opacity:0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events:none;
}

/* Hover desktop : lift + overlay + titre */
@media (hover:hover) and (pointer:fine) and (min-width: 901px){
  .mosaic-tile{
    transition: transform 220ms ease;
  }
  .mosaic-tile:hover{
    transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 4px));
  }

  .mosaic-tile:hover .mosaic-media::before{
    opacity:1;
  }
  .mosaic-tile:hover .mosaic-title{
    opacity:1;
    transform: translateY(0);
  }
}

/* Mobile : on limite L pour éviter le “monstre” en 2 colonnes */
@media (max-width: 900px){
  .mosaic-tile.is-l{ grid-column: span 2; grid-row: span 2; }
}

.mosaic-video{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 900px){
  .archive-canvas{ 
    gap: 12px; 
    }
}

/* DRIFT */

#archive-canvas .mosaic-tile {
  /* tu as déjà un transform quelque part : on y ajoute le drift */
  transform: translate3d(
    calc(var(--tx, 0px) + var(--dtx, 0px)),
    calc(var(--ty, 0px) + var(--dty, 0px)),
    0
  );
}


/* =========================
   TITRE PAGE — position fixed
   ========================= */

:root{
  --header-pad: 24px; /* référence verticale (CH = 24px du top) */
}

/* Le header de la page ne prend pas de place */
.archive-header{
  margin: 0;
  padding: 0;
  height: 0;
}

/* Titre */
.archive-title{
  position: fixed;
  top: var(--header-pad);
  left: var(--gutter-left);

  margin: 0;
  pointer-events: none;  /* ne bloque pas les clics */
  color:  black;
  font-size: var(--font-size-large);
  font-weight: 300;
}

/* Mobile : on adapte le gutter */
@media (max-width: 900px){
  .archive-title{
    left: var(--gutter-left);   /* aligné comme CH sur mobile */
    top: 24px;    /* même top que CH */
  }
}

/* =========================
   TEXTE FIXE (sous la mosaïque)
   ========================= */

.archive-fixed-text{
  position: fixed;
  left: var(--gutter-left);
  top: 50px;

  z-index: 0;            /* < mosaïque (tuiles ~ z=1) */
  pointer-events: none;  /* important : ne bloque jamais les clics sur les tuiles */

  color:  black;
  font-weight:  400;
  max-width: 360px;      /* ajuste si tu veux plus/moins large */
  line-height: 1.35;
}

/* Option : si tu veux que ça hérite vraiment d'une “vibe” plus discrète */
.archive-fixed-text{
  opacity: 0.9;
}

@media (max-width: 900px){
  .archive-fixed-text{
    left:  24px;
  }
}

footer
{
    font-size: 10px;
    text-align: center;
}


.mosaic-img { opacity: 1; transition: opacity .25s ease; }
.mosaic-img[data-src] { opacity: 0; }
.mosaic-img.is-loaded { opacity: 1; }




/* Sentinel lazy-load (référence stable pour IntersectionObserver) */
.mosaic-tile { position: relative; }



/* =========================
   SINGLE — base
========================= */

:root{
  --single-gap: 24px;
  --single-media-maxh-desktop: calc(100vh - 140px);
  --single-media-maxh-mobile:  calc(100vh - 110px);

  /* ✅ seuil réaliste pour passer en 2 colonnes dans la colonne media */
  --single-media-2col: 820px;
}

.single-project .single-head{
  padding-top: 24px;
}

.single-project .single-title{
  margin: 0;
  pointer-events: none;
  color: #000;
  font-size: var(--font-size-large);
  font-weight: 300;
  text-transform: uppercase;
}

@media (max-width: 900px){
  .single-project .single-title{
    padding: 0 var(--gutter-left);
  }
}

/* Layout */
.single-layout{
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 48px;
  padding-top: 24px;
  padding-bottom: 64px;
}

/* Sticky texte */
.single-text-inner{
  position: sticky;
  top: 24px;
}

/* Mobile: 1 colonne */
@media (max-width: 900px){
  .single-layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .single-text-inner{
    position: static;
  }

  .single-media{
    margin-top: 8px;
  }
}

/* =========================
   DESKTOP — seul .single-media scrolle, titre overlay
========================= */

@media (min-width: 901px){

  body.single{
    height: 100vh;
    overflow: hidden;
  }

  /* Titre overlay */
  body.single .single-project .single-head{
    position: fixed;
    top: 0;
    left: var(--gutter-left);
    right: 0;
    z-index: 50;
    pointer-events: none;
    padding-top: 24px;
  }

  /* La grille démarre en haut */
  body.single .single-project .single-layout{
    padding-top: 0;
    padding-bottom: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* Texte sous le titre */
  body.single .single-project .single-text-inner{
    top: 0;
    padding-top: 50px;
    max-height: 100vh;
    overflow: hidden; /* mets auto si tu veux scroller le texte */

    font-weight:  400;
    line-height: 1.35;
    color:  black;
  }

  /* Colonne media : scroller + container query */
  body.single .single-project .single-media{
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: var(--single-gap);
    padding-bottom: 64px;
    padding-right: 24px;

    /* ✅ container queries */
    container-type: inline-size;
    container-name: singlemedia;
  }
}

/* =========================
   MEDIAS — anti-crop & max-height (images + videos)
========================= */

body.single .single-project img,
body.single .single-project video{
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

@media (min-width: 901px){
  body.single .single-project img,
  body.single .single-project video{
    max-height: var(--single-media-maxh-desktop);
  }
}

@media (max-width: 900px){
  body.single .single-project img,
  body.single .single-project video{
    max-height: var(--single-media-maxh-mobile);
  }
}

/* =========================
   SINGLE MEDIA — items siblings (images + vidéos)
   1 col par défaut / 2 cols quand la colonne media est assez large
========================= */

/* Reset marges WP (figure = margin-bottom: 1em) */
body.single .single-project .single-media > figure{
  margin: 0 !important;
}

/* Par défaut : flux vertical (1 colonne) */
body.single .single-project .single-media{
  display: flex;
  flex-direction: column;
  gap: var(--single-gap);
}

/* ✅ 2 colonnes via container query (le plus propre) */
@container singlemedia (min-width: 820px){
  body.single .single-project .single-media{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--single-gap);
    align-items: start;
  }

  /* Les vidéos remplissent leur cellule */
  body.single .single-project .single-media > figure.wp-block-video video{
    width: 100% !important;
    height: auto !important;
  }
}

/* ✅ Fallback si container queries ne matchent pas (ou seuil trop strict):
   sur grands écrans, on force 2 colonnes */
@media (min-width: 1400px){
  body.single .single-project .single-media{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--single-gap);
    align-items: start;
  }

  body.single .single-project .single-media > figure.wp-block-video video{
    width: 100% !important;
    height: auto !important;
  }
}

/* Forcer un média à prendre les 2 colonnes (à mettre sur le bloc Image dans Gutenberg) */
@container singlemedia (min-width: 820px){

  /* Image bloc Gutenberg = <figure class="wp-block-image ..."> */
  body.single .single-project .single-media > figure.wp-block-image.span-2{
    grid-column: 1 / -1;
  }

  /* Si tu veux aussi pouvoir le faire sur une vidéo (optionnel) */
  body.single .single-project .single-media > figure.wp-block-video.span-2{
    grid-column: 1 / -1;
  }
}

/* ✅ Forcer un item à prendre 2 colonnes (classe Gutenberg: span-2) */

/* Cas normal: grid activée via container query */
@container singlemedia (min-width: 820px){
  body.single .single-project .single-media > .span-2{
    grid-column: 1 / -1 !important;
  }
}

/* Cas fallback: grid activée via media query (si container queries non utilisées) */
@media (min-width: 1400px){
  body.single .single-project .single-media > .span-2{
    grid-column: 1 / -1 !important;
  }
}

/* =========================
   PAGE PROJECTS
========================= */
.site-main.projects
{
    min-height: 90vh;
}



/* Filters */
.projects-filters{
  display:flex;
  gap: 24px;
  align-items:flex-start;
  margin: 18px 0 22px;
  position: relative;
  z-index: 50; /* above preview */
}

.filter-dd{
  position: relative;
}

/* Dropdowns: clean, aligned */
.filter-dd__toggle{
  display:flex;
  align-items:center;
  gap: 10px;

  border: 0;
  background: transparent;

  padding: 0;           /* 👈 plus de padding */
  margin: 0;

  cursor: pointer;

  font-weight:  700;
}


.filter-dd__chev{
  display:inline-block;
  transform: translateY(-1px);
}

.filter-dd__list{
  display:none;
  position:absolute;
  list-style-type: none;
  top: 100%;            /* 👈 plus d'écart */
  left: 0;

  min-width: 220px;

  border: 0;            /* 👈 plus de cadre */
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  padding: 6px 0;       /* padding interne léger, sans “cadre” */
  margin: 0;
}

.filter-dd__list li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-dd.is-open .filter-dd__list{ display:block; border-left:  2px black solid;}


.filter-dd__item{
  width:100%;
  text-align:left;
  background: transparent;
  border: 0;
  padding: 8px 8px;
  cursor:pointer;
}

.filter-dd__item:hover,
.filter-dd__item:focus-visible{
  text-decoration: underline;
}

.filter-dd__item.is-active{
  font-weight: 700;
}

@media (max-width: 900px){
  .projects-filters{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
  }

  .filter-dd{
    width: 100%;
  }

  .filter-dd__toggle{
    width: 100%;
    justify-content: space-between; /* label à gauche, chevron à droite */
  }

  .filter-dd__list{
    width: 100%;
    min-width: 0;       /* 👈 évite la largeur fixe */
    left: 0;
    right: 0;
  }
}


/* Shell: list + preview */
.projects-shell{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

/* Vertical list */
.projects-list{
  position: relative;
  z-index: 20; /* above preview */
  max-width: 820px; /* keep it brutal/left */
}

.project-row__link{
  display:block;
  padding: 6px 0;
  text-decoration: none;
  color: black; /* empêche tout changement de couleur */
}

.project-row__title{
  margin: 0;
  font-size: 18px;
  font-weight:  400;
  line-height: 1.15;
  color:  black;

  transition: transform .18s ease;
  will-change: transform;
}

.project-row:hover .project-row__title,
.project-row__link:focus-visible .project-row__title{
  transform: translateX(6px);
}

.projects__title {
    color: #000;
  font-size: var(--font-size-large);
  font-weight: 300;
  margin-top:  24px;
  text-transform: uppercase;
}

@media (max-width: 900px){
    .projects__title {
        padding-left: var(--gutter-left);
    }
}

/* Preview panel: fixed-ish on the right, "behind" text */
.projects-preview{
  display:none; /* hidden on small by default (we’ll move it later on mobile) */
}

@media (min-width: 900px){
  .projects-shell{
    grid-template-columns: 1fr;
  }

  .projects-preview{
    display:block;
    position: fixed;
    right: 6vw;
    top: 22vh;
    width: 38vw;
    max-width: 620px;
    height: 56vh;
    pointer-events: none;
    z-index: 5; /* behind list and filters */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .projects-preview.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  .projects-preview__frame{
    width:100%;
    height:100%;
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(8px);
    overflow:hidden;
  }

  .projects-preview__img,
    .projects-preview__video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: contain;
      opacity: 0;
      transition: opacity .15s ease;
    }

    .projects-preview.has-image .projects-preview__img{ opacity:1; }
    .projects-preview.has-video .projects-preview__video{ opacity:1; }


  /* optional: make list text feel "in front" */
  .projects-list{
    mix-blend-mode: normal;
  }
}

.projects-preview__img:not([src]){ opacity: 0 !important; }

.projects-preview__img:not([src]),
.projects-preview__video:not([src]){
  opacity: 0 !important;
}

@media (min-width: 900px){
  .projects-preview{
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .projects-preview.is-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }

  .projects-preview__img,
  .projects-preview__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .15s ease;
  }

  .projects-preview.has-image .projects-preview__img{ opacity: 1; }
  .projects-preview.has-video .projects-preview__video{ opacity: 1; }
}


/* =========================
   PAGE BASE TEMPLATE
========================= */

/* Container page text */
.page {
  padding: 0;
}

.page__article {
  /* rien ici si tu gères déjà via d'autres wrappers */
}

.page__header,
.page__content{
  width: calc(100% - var(--gutter-left) - 24px);
  margin-left: var(--gutter-left);
  margin-right: 24px;
}

@media (max-width: 900px){
  .page__content{
    width: min(100%, calc(100% - 2 * var(--gutter, 18px)));
    margin-left: auto;
    margin-right: auto;
  }
}


.page__header {
  padding-top: 24px;
  padding-bottom: 10px;
}

.page__title {
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
  color:  black;
  font-size: var(--font-size-large);
}

@media (max-width: 900px){
    .page__title {
        padding-left:  var(--gutter-left);
    }
}
/* Espace vertical cohérent dans Gutenberg */
.page__content > * {
  margin-top: 0;
}

.page__content > * + * {
  margin-top: 18px; /* rythme vertical */
}

/* Images / embeds Gutenberg */
.page__content img,
.page__content video,
.page__content iframe {
  max-width: 100%;
  height: auto;
}

/* Large align / full align (si tu les utilises) */
.page__content .alignwide {
  width: min(1200px, calc(100% - 2 * var(--gutter, 18px)));
  margin-left: auto;
  margin-right: auto;
}

.page__content .alignfull {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Paragraphes Gutenberg – front */
.entry-content p {
  line-height: 1.35;
  margin-bottom: 0;        /* on gère l'espacement ailleurs */
  color: black;
  font-weight: 400;
}


.page-shell{
  min-height: 100vh;
  min-height: 100dvh;       /* plus fiable sur certains environnements */
  display: flex;
  flex-direction: column;
}

/* le main pousse le footer */
.page-shell > .page{
  flex: 1 0 auto;
  min-height: 0;            /* évite certains débordements flex */
}

/* le footer ne doit pas rajouter de marge "parasite" */
.page-shell > .page-footer{
  flex: 0 0 auto;
  margin: 0;
}

/* si ta phrase est dans un <p>, les marges par défaut créent souvent le mini-scroll */
.page-footer__inner,
.page-footer__inner p{
  margin: 0;
}


/* =========================
   PANORAMA — base (tous contextes)
========================= */

.pano{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 10px 0;
}

/* Rail horizontal (galerie Gutenberg) */
.pano .wp-block-gallery{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 16px;
  padding: 0 var(--gutter, 18px);
  margin: 0;
}

.pano .wp-block-gallery .wp-block-image{
  flex: 0 0 auto;
  margin: 0;
}

/* =========================
   PANORAMA — posts dédiés
   (classe body: .is-panorama-post)
========================= */

/* Pleine largeur viewport */
.is-panorama-post .entry-content .pano{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 12px 0; /* léger ajustement vs base */
}

/* Hauteur du panorama + fitting général */
.is-panorama-post .pano{
  height: min(60vh, 800px);
  max-height: 800px;
}

/* Le rail et ses items doivent suivre la hauteur du pano */
.is-panorama-post .pano .wp-block-gallery{
  height: 100%;
  align-items: stretch;
}

/* Items: prennent la hauteur, pas de crop */
.is-panorama-post .pano figure,
.is-panorama-post .pano .wp-block-image{
  height: 100%;
  display: flex;
  align-items: stretch;
  margin: 0;
  overflow: visible !important;
}

/* Si image dans un lien, wrapper neutre */
.is-panorama-post .pano .wp-block-image > a{
  display: flex !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Image: fit dans la hauteur, jamais rognée */
.is-panorama-post .pano img{
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Neutralise explicitement le mode "cropped" WP (Galerie) */
.is-panorama-post .pano .wp-block-gallery.is-cropped img{
  object-fit: contain !important;
}

/* =========================
   PANORAMA — overrides layout desktop (uniquement panorama)
   Objectif: scroll vertical page + titre fixe, sans scroll interne .single-media
========================= */

@media (min-width: 901px){

  /* Rétablir le scroll global */
  body.single.is-panorama-post{
    height: auto !important;
    overflow: auto !important;
  }

  /* Le layout ne doit pas réserver 100vh ni clipper */
  body.single.is-panorama-post .single-project .single-layout{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    /* Décalage sous le titre fixe */
    padding-top: 56px !important;
    padding-bottom: 64px;
  }

  /* Colonne media : plus de scroll interne */
  body.single.is-panorama-post .single-project .single-media{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    padding-right: 0 !important;
  }

  /* Titre fixe (aligné CH) */
  body.single.is-panorama-post .single-project .single-head{
    position: fixed !important;
    top: 24px;
    left: var(--gutter-left);
    right: 0;
    z-index: 80;
    pointer-events: none;
    padding-top: 0 !important;
  }

  /* Texte: doit scroller (donc pas sticky) */
  body.single.is-panorama-post .single-text-inner{
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================
   PANORAMA — override Gutenberg gallery widths (has-nested-images)
   (WP force parfois width:33% selon columns-default)
========================= */

.is-panorama-post .single-pano-stack .pano .wp-block-gallery.has-nested-images{
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: stretch !important;
}

/* Chaque item ne doit PAS avoir une width en colonnes */
.is-panorama-post .single-pano-stack .pano
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image{
  width: auto !important;       /* écrase le calc(33%) WP */
  flex: 0 0 auto !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Image dans item nested: fit */
.is-panorama-post .single-pano-stack .pano
.wp-block-gallery.has-nested-images figure.wp-block-image img{
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}


/* =========================
   PANORAMA — polish
========================= */

/* 40px entre panoramas */
.is-panorama-post .single-pano-stack .pano{
  margin: 40px 0;
}

/* Pano: pas de padding vertical interne (sinon ça fausse le "fit") */
.is-panorama-post .pano{
  padding: 0 !important; /* important: on retire le 10px 0 de base */
}

/* Rail: pas d’écart entre images */
.is-panorama-post .pano .wp-block-gallery{
  gap: 0 !important;
  padding: 0 var(--gutter, 18px) 0 0; /* garde juste un gutter latéral si tu veux */
}

/* Wrappers: pas de marge parasite */
.is-panorama-post .pano figure,
.is-panorama-post .pano .wp-block-image{
  margin: 0 !important;
}

/* Assure un fit strict dans la hauteur */
.is-panorama-post .pano img{
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Masquer scrollbar (tout en gardant le scroll) */
.is-panorama-post .pano{
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge */
}
.is-panorama-post .pano::-webkit-scrollbar{
  display: none;               /* Chrome/Safari */
}


/* =========================
   PANORAMA — fix height chain (Group inner container)
========================= */

/* Le bloc Group .pano contient un inner-container : il doit hériter la hauteur */
.is-panorama-post .pano.wp-block-group{
  height: min(60vh, 800px);
  max-height: 800px;
}

/* Important : le wrapper interne doit faire 100% */
.is-panorama-post .pano.wp-block-group > .wp-block-group__inner-container,
.is-panorama-post .pano.wp-block-group > .wp-block-group__inner-container.is-layout-constrained{
  height: 100%;
  display: flex;              /* on transforme en conteneur pour étirer la galerie */
  align-items: stretch;
}

/* La galerie peut enfin prendre 100% */
.is-panorama-post .pano .wp-block-gallery{
  height: 100%;
  align-items: stretch;
}

/* Les items et images fit strictement */
.is-panorama-post .pano figure.wp-block-image{
  height: 100%;
  display: flex;
  align-items: stretch;
  margin: 0 !important;
}

.is-panorama-post .pano figure.wp-block-image img{
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}




/* Force la couleur des liens & boutons dans le menu (iOS fix) */
.site-navigation .nav-menu a,
.site-navigation .nav-menu button{
  color: #000 !important;
  -webkit-text-fill-color: #000; /* ✅ iOS Safari */
}

.filter-dd button,
.filter-dd a{
  color: #000 !important;
  -webkit-text-fill-color: #000;
}

.site-navigation .nav-menu a,
.site-navigation .nav-menu button{
  -webkit-appearance: none;
  appearance: none;
}




/* Liens dans le contenu des articles (paragraphes Gutenberg) */
.page__content p a, .single-text p a{
  text-decoration: none;              /* on neutralise le underline natif */
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;                /* espace léger sous le texte */
  transition: border-bottom-color .18s ease; /* ✅ fade */
}

.page__content p a:hover,
.page__content p a:focus-visible, .single-text p a:hover, .single-text p a:focus-visible{
  border-bottom-color: transparent;
}