/* =======================
   TABLE DES MATIÈRES
   =======================
   1) VARIABLES CSS & UTILITAIRES
   2) GRILLE DE TUILES (mur fermé)
   3) SYSTÈME SWIPER (images)
   4) CARTOUCHE & MÉTADONNÉES
   5) SYSTÈME DE FILTRES
   6) MODALE PROJET
   7) GESTION DES ÉTATS & INTERACTIONS
   8) RESPONSIVE & MOBILE
   9) CORRECTIONS SPÉCIFIQUES
   ======================= */

/* =======================
   1) VARIABLES CSS 
   ======================= */
:root {
  --primary-red: #cc0000;
  --primary-red-hover: #d40404;
  --text-primary: #666;
  --text-secondary: #7a7a7a;
  --text-dark: #4b4b4b;
  --text-light: #585858;
  --border-dotted: 1px dotted var(--primary-red);
  --bg-overlay: rgba(255,255,255,0.9);
  --transition-smooth: .35s cubic-bezier(.4,0,.2,1);
  --shadow-light: 0 1px 3px rgba(0,0,0,.1);
  --shadow-modal: 0 30px 100px rgba(0,0,0,.25);
  --blur-backdrop: 2px;
}

/* =======================
   2) GRILLE DE TUILES (mur fermé)
   ======================= */
.projets-wrapper {
  padding-top: clamp(10px, 2vh, 20px);
}
.project-content {border-radius:5px;}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px;
  padding: 15px;
  position: relative;
}

/* Colonnes fixes par breakpoint (plus prévisible) */
@media (min-width: 1200px) {
  .grid-container { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1199px) and (min-width: 900px) {
  .grid-container { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) {
  .grid-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .grid-container { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  overflow: visible;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f3f3f3;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: 
    transform var(--transition-smooth),
    width var(--transition-smooth),
    height var(--transition-smooth);
  z-index: 1;
  }
.tile:not(.open) {
  border-radius: 5px;
  overflow: hidden;
}

.tile-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bandeau titre/date (tuile fermée uniquement) */
.overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 2;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  padding: 8px 10px;
  margin: 0;
  width: auto;
  box-shadow: var(--shadow-light);
  border-radius:5px 5px 0px 0px ;
}

.date1 {
font-size: 10px;
  font-weight:300;
    margin: 0 0 0 20px;
  color:  var(--primary-red);

}


.overlay-year {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  white-space: nowrap;
}

/* On évite que le titre passe sous l'année */
.overlay h3 {
    font-size: 15px;
  margin: 0 0 4px;padding-right: 54px; /* ajuste selon la largeur typique de l'année */
  margin: 0;           /* optionnel, chez toi c'est 0 0 4px */
}

.overlay p {
  font-size: 13px;
  padding-top: 4px;
  
}

/* =======================
   3) SYSTÈME SWIPER (images)
   ======================= */
.swiper {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 0 !important;
  margin: 0 auto !important;
  line-height: 0 !important;
}

.swiper .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.swiper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none !important;
}

.swiper .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  box-shadow: none !important;
  border: none !important;
}

/* Masquage conditionnel des flèches */
/* .tile:not(.open) .project-content .swiper-button-prev,
.tile:not(.open) .project-content .swiper-button-next {
  display: none !important;
}
 */
/* Style des flèches génériques */
.swiper-button-prev,
.swiper-button-next {
  background: none;
  width: 40px;
  height: 40px;
  top: 15%;
  transform: translateY(-50%);
  z-index: 1002;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  color: transparent !important;
}

/* Neutralise les pseudo-icônes */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
}

/* Pagination Swiper */
.swiper-pagination-bullet-active {
  background: var(--primary-red);
}

.swiper-pagination {
  position: absolute;
  right: 15px;
  text-align: right;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  padding-right: 15px !important;
}

/* =======================
   4) CARTOUCHE & MÉTADONNÉES
   ======================= */


/* Cartouche posé en surimpression */
.cartouche {
  position: absolute;
  left: 16px;
  bottom: 0;
  z-index: 1003;
  margin: 0;
  max-width: 66%;
  background: var(--bg-overlay);
}

/* Header du cartouche */
.cartouche-header {
  display: flex;
  flex-direction: column;       
  text-align: left !important;
    padding: .9rem 1.1rem;
  gap: .25rem;                  
  cursor: default;
  background: transparent !important;
  border: none !important;
  outline: none;
}

.cartouche-header:hover,
.cartouche-header:focus {
  background: transparent !important;
  border: none !important;
}

.cartouche-header-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.cartouche-title-text {
  width: 100%;
  background: none;
  border-radius: 0;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.1;
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: anywhere;
}



/* On évite que le titre vienne manger l'année */
.cartouche-title-text {
  padding-right: 4.5rem; /* ajuste selon la typo / largeur de l'année */
}

.cartouche-header-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #555;
}
.cartouche-subtitle {
  margin-top: 0.1em;
  font-size: 0.9em; /* ou clamp, si tu veux rester dans ta logique */
  line-height: 1.3;
  opacity: 0.9;
	  color: var(--text-secondary);
}
/* Bouton de description */
.cartouche-description-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 3px;
  margin-top: 10px;
  background: transparent;
  border: none;
  border-top: 1px dotted #8a8a8a;
  cursor: pointer;
  text-align: right;
}

.cartouche-description-toggle .cartouche-toggle-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: .6rem;
}

.cartouche-description-toggle .cartouche-chevron {
  width: 10px;
  height: 10px;
  transform: rotate(0deg);
  transition: transform .2s ease;
}

/* États d'interaction du cartouche */
.cartouche-sub {
  font-weight: 500;
  font-size: .62em;
  color: var(--text-primary);
  white-space: nowrap;
}

.cartouche-toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #555;
}

.cartouche-toggle-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cartouche-chevron {
  width: 10px;
  height: 10px;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.cartouche-date {
  font-weight: 500;
  font-size: .9rem;
  color: var(--text-primary);
  white-space: nowrap;
  padding-top: .2rem;
}
/* Année haut-droite du cartouche (modale) */
.cartouche-header {
  position: relative;
}

.cartouche-year {
  position: absolute;
  top: .85rem;     /* harmonisé avec ton padding header */
  right: 1.1rem;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cartouche-title-text { padding-right: 3.5rem; }
  .cartouche-year { top: .7rem; right: 1rem; }
}
/* Corps dépliable */
.cartouche-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-smooth), background-color .25s ease;
  backdrop-filter: blur(1px);
  border-radius: 0 10px 0 0;
  margin-top: 0;
}
/* ===============================
   MODALE : largeur stable du cartouche (toutes positions)
   =============================== */

.pm-content .cartouche{
  width: clamp(360px, 52vw, 760px); /* ← ajuste à ton goût */
  max-width: 66%;                  /* tu gardes ta logique */
  box-sizing: border-box;
}

/* Optionnel : si tu veux être sûr que l’état replié ne change jamais */
.pm-content .tile.open.cartouche-state-1 .cartouche,
.pm-content .tile.open.cartouche-state-2 .cartouche,
.pm-content .tile.open.cartouche-state-3 .cartouche{
  width: clamp(360px, 52vw, 760px);
}
@media (max-width: 900px){
  .pm-content .cartouche{
    width: auto;
    max-width: 100% !important;
  }
}

/* États ouverts */
.tile.open.meta-open .cartouche-body {
  max-height: 2000px;
}

.tile.open.meta-open .cartouche-header .cartouche-chevron,
.tile.open.meta-open .cartouche-description-toggle .cartouche-chevron {
  transform: rotate(180deg);
}

/* Cartouche visible si état 1 ou 2 */
.tile.open.cartouche-state-1 .cartouche,
.tile.open.cartouche-state-2 .cartouche {
  display: block;
  opacity: 1;
  visibility: visible;
}

.tile.open.cartouche-state-2 .cartouche-body {
  display: block;
  max-height: 2000px;
}

.tile.open.cartouche-state-3 .project-meta,
.tile.open.cartouche-state-3 .cartouche-body,
.tile.open.cartouche-state-3 .cartouche-header-bottom {
  display: none !important;
}


/* Métadonnées */
.project-meta {
  padding: clamp(0.3rem, 0.6vw, 0.6rem);
  gap: 0.6rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9em;
}

.meta-line {
  padding: .7em 0;
  border-top: var(--border-dotted);
}

.meta-line.meta-columns {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.meta-line.meta-columns .meta-block {
  flex: 1 1 45%;
}

.meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #cc0202;
}

.meta-value {
  font-size: clamp(12px, 1vw, 16px);
  color: var(--text-light);
  line-height: 1.45;
}
.meta-value a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Soulignement + passage en rouge au hover */
.meta-value a:hover {
    color: #cc0202;
    text-decoration: underline;
    text-decoration-color: #cc0202;
}

/* La petite flèche suit la danse */
.meta-value a:hover .ext-arrow {
    color: #cc0202;
    opacity: 0.8;
}

.project-description {
  grid-column: 1 / -1;
  padding: 1rem 1.5rem 1.5rem;
  border-top: var(--border-dotted);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark);
}

/* Bouton spécial description */
#description-toggle-btn {
  color: #ffffff !important;
  font-size: 9px;
  letter-spacing: 0.1rem;
  text-transform: capitalize;
  padding: 3px;
  background-color: var(--primary-red);
  border-radius: 0 !important;
}

/* =======================
   5) SYSTÈME DE FILTRES
   ======================= */
.projets-filters {
  display: flex;
  gap: .5rem;
  padding: 10px 15px 10px 1vw;
  flex-wrap: wrap;
}

.filter-btn {
  font-size: clamp(11px, 0.7vw, 0.85rem);
  text-transform: uppercase;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: none;
  border-right: none;
  background: #fff;
  color: #444;
  padding: .35rem .6rem;
  cursor: pointer;
  transition: all .2s ease;
	border-radius:0px;
}

.filter-btn:hover,
.filter-btn:focus {
  color: var(--primary-red-hover) !important;
  background-color: transparent;
  border-top: 1px solid var(--primary-red-hover);
  border-bottom: 1px solid var(--primary-red-hover);
}

.filter-btn:active {
  color: var(--primary-red-hover) !important;
  background-color: #fff !important;
  border-top: 1px solid var(--primary-red-hover);
  border-bottom: 1px solid var(--primary-red-hover);
}

.filter-btn.is-active {
  background: #fff;
  color: #bf0423 !important;
  border-color: #bf0423;
}
.filter-btn {
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* =======================
   6) MODALE PROJET
   ======================= */
.pm-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.pm-root.is-open {
  display: block;
}

.pm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.20);
}


.pm-content {
  display: block;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 6px;
}

/* Bouton de fermeture */
.pm-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  border: 0;
  background: transparent;
  background-image: url('/wp-content/themes/hello-elementor-child/assets/img/close.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55px;
  transform: translate(50%, -50%);
  cursor: pointer;
  z-index: 9000;
  transition: transform .2s ease;
}

.pm-close:hover {
  transform: translate(50%, -50%) rotate(45deg);
  background-color: transparent;
}

/* Flèches Swiper dans la modale (desktop par défaut) */
.pm-content .swiper-button-prev,
.pm-content .swiper-button-next {
  top: 25%;
  width: 50px;
  height: 50px;
  background: none;
  color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
  z-index: 1554;
}

.pm-content .swiper-button-prev {
  left: 0px;
  background-image: url('/wp-content/themes/hello-elementor-child/assets/img/arrow-left.svg');
}

.pm-content .swiper-button-next {
  right: 0px;
  background-image: url('/wp-content/themes/hello-elementor-child/assets/img/arrow-right.svg');
}

/* Masquage des éléments indésirables dans la modale */
.pm-content .tile-thumb,
.pm-content .tile img:not(.swiper-slide img),
.pm-content .tile .overlay {
  display: none !important;
}

/* =======================
   7) GESTION DES ÉTATS & INTERACTIONS
   ======================= */

/* Verrou de scroll quand modale ouverte */
html.pm-lock,
body.pm-lock {
  height: 100%;
  overflow: hidden;
  position: relative;
  overscroll-behavior: contain;
}

body.pm-scroll-lock {
  overflow: hidden;
}

/* Effet de flou sur la grille */
html.pm-lock body .grid-container {
  filter: blur(var(--blur-backdrop)) saturate(100%) !important;
  will-change: filter;
  transform: none !important;
}
.grid-container,
.projets-wrapper {
  transition: filter .35s ease;
}

html.pm-lock body .projets-wrapper {
  filter: blur(var(--blur-backdrop)) saturate(50%);
  will-change: filter;
  transform: none;
}

/* Les filtres ne sont PAS floutés */
html.pm-lock body .projets-filters {
  filter: none !important;
}

/* Corrections pour les tuiles clonées dans la modale */
.pm-content .tile {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
  z-index: auto;
  cursor: default;
  overflow: visible;
}

/* Empêche le body de "remonter" au top quand la modale s'ouvre */
html.pm-lock body {
  position: static !important;
  top: auto !important;
}
/* Empêche la sélection/drag des images dans le Swiper */
.pm-content .swiper,
.pm-content .swiper * {
  user-select: none;
  -webkit-user-select: none;
}

.pm-content .swiper img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* l'interaction passe par Swiper, pas par l'image */
}
@media (hover:hover) and (pointer:fine) {
  .pm-content .swiper img { pointer-events: none; }
}


/* =======================
   8) RESPONSIVE & MOBILE
   ======================= */

/* Cartouche responsive de base */
@media (max-width: 900px) {
  .cartouche {
    position: relative;
    max-width: 100%;
    margin-top: -50px;
    z-index: 10;
  }

  .cartouche-header {
    min-width: 80vw;
    width: 100%;
    position: relative;
    z-index: 20;
  }

  .cartouche-body {
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 0 12px 12px;
  }

  .cartouche {
    max-width: 94%;
    left: 3%;
    right: 3%;
  }
}

/* =======================
   9) CORRECTIONS SPÉCIFIQUES
   ======================= */

/* Swiper dans la modale (desktop) */
.pm-content .swiper {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  margin: 0 auto;
}

.pm-content .swiper .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Uniformisation des boutons sans styles par défaut */
button.cartouche-header,
button.cartouche-header:hover,
button.cartouche-header:focus {
  background: transparent !important;
  border: none !important;
  outline: none;
}
/* ===============================
   MODALE (desktop) : images sans crop + ratio respecté
   SOLUCE 2 : on ne force pas height:100%, on contraint avec max-height
   =============================== */

/* ===============================
   SWIPER MODALE : CADRE 16/9 FIXE (1200/675)
   =============================== */

/* Le cadre Swiper garde TOUJOURS le ratio 16:9 */
.pm-content .swiper{
  width: 100%;
  aspect-ratio: 16 / 9;         /* <-- le cœur du réacteur */
  height: auto;                  /* laisse aspect-ratio calculer */
  max-height: 60vh;              /* limite quand la fenêtre est basse */
  background: #fff;
  overflow: hidden;
}

/* Slides centrés */
.pm-content .swiper .swiper-slide{
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
}

/* Par défaut : cover (remplit le cadre 16/9, possible crop léger si ratio image ≠ 16/9) */
.pm-content .swiper .swiper-slide img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Option : pour certains slides (plans, schémas), tu mets .is-contain sur le slide */
.pm-content .swiper .swiper-slide.is-contain img{
  object-fit: contain;
  background: #fff;
}

/* Mobile : on garde le ratio, mais on autorise plus de hauteur si besoin */
@media (max-width: 900px){
  .pm-content .swiper{
    max-height: 50vh;            /* à ajuster : 45-60vh selon ton goût */
  }
}


/* =======================
   AJOUTS CSS POUR LES 3 POSITIONS DU CARTOUCHE
   ======================= */

/* Position 3 : Cartouche super replié (seulement titre + année) */
.tile.open.meta-collapsed .project-meta {
  display: none !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.tile.open.meta-collapsed .cartouche-description-toggle {
  display: none !important;
  opacity: 0 !important;
}

.tile.open.meta-collapsed .cartouche-body {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Animation plus fluide pour les transitions entre positions */
.cartouche {
  transition: all var(--transition-smooth);
}

.project-meta {
  transition: opacity .3s ease, max-height .3s ease;
}

.cartouche-description-toggle {
  transition: opacity .3s ease, transform .3s ease;
}

/* Position 3 : Réduction de la taille du cartouche */
.tile.open.meta-collapsed .cartouche {
  /*max-width: 50%;*//*  Plus petit quand replié */
}

@media (max-width: 900px) {
  .tile.open.meta-collapsed .cartouche {
    /*max-width: 70%;*//* Adapté pour mobile */
  }
}

/* ===============================
   GRILLE VS MODALE
   =============================== */

/* Masque tous les éléments de cartouche dans la GRILLE (mur fermé) */
.grid-container .tile .cartouche,
.grid-container .tile .project-meta,
.grid-container .tile .cartouche-body {
  display: none !important;
}

/* Réaffiche dans la MODALE uniquement */
.pm-content .tile.open .cartouche,
.pm-content .tile.open .project-meta,
.pm-content .tile.open .cartouche-body {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ===============================
   POSITION 2 : ouverte (infos + description)
   =============================== */

.tile.open.meta-open .cartouche-body {
  max-height: 2000px;
}

.tile.open.meta-open .cartouche-description-toggle .cartouche-chevron {
  transform: rotate(180deg);
}

/* ===============================
   POSITION 3 : repliée (titre + année seulement)
   =============================== */

.tile.open.meta-collapsed .project-meta,
.tile.open.meta-collapsed .cartouche-body,
.tile.open.meta-collapsed .cartouche-description-toggle {
  display: none !important;
}

/* Réduction visuelle de la largeur du cartouche (optionnel) */
.tile.open.meta-collapsed .cartouche {
  max-width: 100%;
}

@media (max-width: 900px) {
  .tile.open.meta-collapsed .cartouche {
    max-width: 100%;
  }
}

/* =======================
   CSS COMPLÉMENTAIRE POUR L'ERGONOMIE
   ======================= */

/* Titre cliquable avec feedback visuel en Position 3 */
.tile.open.meta-collapsed .cartouche-title-text {
  cursor: pointer;
  transition: color .2s ease, text-shadow .2s ease;
}

.tile.open.meta-collapsed .cartouche-title-text:hover {
  color: var(--primary-red);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Indication visuelle subtile que le titre est interactif en Position 3 */
.tile.open.meta-collapsed .cartouche-title-text::after {
  content: '⇣';
  font-size: 0.8em;
  color: var(--primary-red);
  opacity: 0.7;
  margin-left: 0.5rem;
  transition: opacity .2s ease;
}

.tile.open.meta-collapsed .cartouche-title-text:hover::after {
  opacity: 1;
}

/* === Quand la modale est ouverte, le footer ne doit plus exister pour le layout === */
body.pm-open { --footer-h: 0px; }
body.pm-open .site-footer,
html.pm-open .site-footer {
  pointer-events: none;
  z-index: -1 !important;
  opacity: 0;
}

/* La surcouche modale vit au-dessus de tout */
.pm-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}





/* ===============================
   Coussin anti-footer pour la grille
   =============================== */
.projets-wrapper,
.grid-container {
  padding-bottom: clamp(80px, 12vh, 160px);
}




/* ===============================
   MOBILE : modale simplifiée et lisible
   =============================== */
@media (max-width: 900px) {

  /* La boîte de dialogue occupe l'écran avec scroll global */
  .pm-dialog {
    top: 50%;
    left: 50%;
    width: 94vw;
    height: 92vh;
    max-height: 92vh;
    display: block;           /* plus de flex colonne complexe */
    overflow: hidden;
  }

  .pm-content {
    max-height: 92vh;
    overflow-y: auto;         /* on scrolle tout le contenu */
    overflow-x: hidden;
  }

  /* La tuile dans la modale redevient un bloc simple */
  .pm-content .tile {
    position: relative;
    padding: 0rem 0 3rem;
    overflow: visible;
    background: #fff;
  }

  /* Swiper : image en haut, non sticky, petite marge dessous */
  .pm-content .tile .swiper {
    position: relative !important;
    top: auto !important;
    z-index: 1;
    width: 100%;
    max-height: none;
    margin: 0 auto 1rem;
  }

  /* Cartouche : pleine largeur avec marge intérieure */
  .pm-content .tile .cartouche {
    position: relative !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 1.25rem 0;
    background: #fff;
    border-radius: 0;
    z-index: 1;
  }

  /* Meta + description : même largeur que le cartouche */
  .pm-content .tile .project-meta,
  .pm-content .tile .project-description {
    position: relative;
    max-width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
.pm-root .pm-dialog{
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}

.pm-root.is-open .pm-dialog{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

  /* On désactive les effets de repli/hauteur sur mobile */
  .cartouche-body {
    max-height: none !important;
    overflow: visible !important;
  }

  .tile.open.meta-collapsed .cartouche,
  .tile.open.meta-collapsed .cartouche-body,
  .tile.open.meta-collapsed .project-meta,
  .tile.open.meta-collapsed .cartouche-description-toggle {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Flèches et croix un peu plus petites mais calmes */
  .pm-content .swiper-button-prev,
  .pm-content .swiper-button-next {
    width: 28px;
    height: 28px;
    background-size: 28px;
    top: 60%;
    transform: translateY(-50%);
    z-index: 5;
  }

  .pm-close {
      transform-origin: center center;
    will-change: transform; 
	  width: 40px;
    height: 40px;
    background-size: 40px;
    top: 8px;
    right: 8px;
    transform: none;
    z-index: 10;
  }
	 .pm-close:hover,
  .pm-close:active {
    transform: rotate(45deg);
}
}
.tile {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.tile.is-hidden {
  opacity: 0 !important;
  transform: scale(0.95) !important;
  pointer-events: none !important;
}
.pm-root {
  opacity: 0;
  transition: opacity .35s ease;
}

.pm-root.is-open {
  opacity: 1;
}


.pm-root.is-open .pm-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Après */
.grid-container .tile:hover {
  transform: scale(1.02);
}

/* ===============================
   DESKTOP : CENTRAGE + ANIM MODALE
   =============================== */
.pm-dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
	  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    opacity .35s ease;

  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  z-index: 9000;

  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    opacity .35s ease;
}

.pm-root.is-open .pm-dialog{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
/* ===============================
   DESKTOP : MODALE + SWIPER verrouillés en 16/9 (1200x675)
   La largeur suit la hauteur. Pas de bandes blanches.
   =============================== */
@media (min-width: 901px){

  .pm-dialog{
    /* réglages */
    --pm-vw: 92vw;
    --pm-vh: 92vh;
    --pm-r: calc(16 / 9);

    /* réserve verticale pour que le cartouche reste “dans” la modale
       (ajuste : 220px, 260px, 300px selon tes contenus) */
    --pm-cartouche-safe: 260px;

    /* hauteur dispo pour l’image (contrainte par vh ET par vw via le ratio) */
    --pm-media-h: min(
      calc(var(--pm-vh) - var(--pm-cartouche-safe)),
      calc(var(--pm-vw) / var(--pm-r))
    );

    /* ✅ la largeur suit la hauteur, donc cadre 16/9 stable */
    width: calc(var(--pm-media-h) * var(--pm-r));
    max-width: var(--pm-vw);
    max-height: var(--pm-vh);

    /* garde ton centrage/anim */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0;
  }

  .pm-root.is-open .pm-dialog{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* le contenu scroll si nécessaire, mais la “zone image” reste maîtrisée */
  .pm-content{
    max-height: var(--pm-vh);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ✅ Swiper = cadre 16/9 strict */
  .pm-content .swiper{
    height: var(--pm-media-h) !important;
    width: 100% !important;            /* pleine largeur de la modale (qui est déjà ratio) */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
  }

  .pm-content .swiper .swiper-slide{
    height: 100%;
  }

  /* ✅ pas de bandes, pas de “réduction bizarre” : l’image remplit son cadre 16/9 */
  .pm-content .swiper .swiper-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* OK car image 16/9 */
    object-position: center;
    display: block;
  }

  /* option : sécurise le cartouche pour qu’il ne sorte pas si viewport très bas */
  .pm-content .cartouche{
    max-height: calc(var(--pm-vh) - 40px);
    overflow: auto;
  }
}
/* =========================================
   MODE "PETITE HAUTEUR" (desktop)
   Objectif : ne jamais couper le titre
   ========================================= */
@media (max-height: 760px) and (min-width: 901px){

  /* La modale devient un "container scroll" fiable */
  .pm-dialog{
    max-height: 92vh;      /* tu l'as déjà, je le répète pour la priorité */
  }

  .pm-content{
    overflow-y: auto;      /* scroll global si besoin */
    padding-bottom: 18px;  /* petit coussin */
  }

  /* Swiper garde ton ratio, mais on accepte qu'il prenne moins de place */
  .pm-content .swiper{
    max-height: 52vh;      /* au lieu de 60, pour laisser vivre le cartouche */
  }

  /* FIN DU OVERLAY : le cartouche repasse "dans le flux" => plus de coupe */
  .pm-content .tile.open .cartouche{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;

    max-width: 100% !important;
    width: auto !important;

    margin: -22px 18px 0;  /* petit chevauchement esthétique sous l’image */
    border-radius: 10px;
    z-index: 2;
  }

  /* Si le cartouche est long, on le rend scrollable */
  .pm-content .tile.open .cartouche-body{
    max-height: 34vh;      /* ajuste selon ton goût */
    overflow: auto;
  }

  /* Et surtout : le titre/année restent visibles pendant le scroll */
  .pm-content .tile.open .cartouche-header{
    position: sticky;
    top: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    z-index: 3;
  }
}
/* =========================================
   MOBILE : image "hero" pleine largeur en haut
   (on force un cadre 16/9 + cover)
   ========================================= */
@media (max-width: 900px){

  /* Le swiper devient un cadre 16/9 stable */
  .pm-content .tile .swiper{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden;
    background: #fff;
  }

  /* On enlève le centrage vertical qui crée les bandes */
  .pm-content .tile .swiper .swiper-slide{
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* L’image remplit le cadre */
  .pm-content .tile .swiper .swiper-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
  }
}

/* =========================================
   DESKTOP : Swiper en 16/9 strict
   - si la hauteur dispo diminue, la largeur diminue aussi
   ========================================= */
:root{
  --pm-toploss: 200px; /* marge de sécurité pour cartouche + paddings. Ajuste 160–260 */
}

@media (min-width: 901px){

  .pm-content .swiper{
    /* largeur limitée par le viewport ET par la hauteur disponible */
    width: min(92vw, calc((92vh - var(--pm-toploss)) * (16 / 9)));
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: hidden;
    background: #fff;
  }

  /* image : à toi de choisir contain vs cover */
  .pm-content .swiper .swiper-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* ou cover si tu veux remplir */
    object-position: center center;
    display: block;
  }
}