/* ============================================================
   SINGLE PROJECT
   ============================================================ */

/* ── Layout ───────────────────────────────────────────────── */

/* Largeurs de colonnes : --vignettes-col / --media-col dans style.css (partagees avec single-event).
   Les 2 colonnes fixes ne se compriment pas, la derniere prend la place restante (flex: 1)
   pour que la ligne aille jusqu'a la marge droite du site. */
/* Largeurs surchargées ICI (et non dans style.css) : cette feuille n'est chargée que sur la
   fiche projet, la fiche event garde donc ses valeurs d'origine.

   --media-col: 55% aligne le bas de la galerie sur la dernière vignette. Le calcul :
   la colonne de vignettes fait N × 10.5% de large (vignettes carrées) + les gouttières, soit
   ~55% pour 5 vignettes — le cas le plus fréquent. ATTENTION : un projet à 6 vignettes monte
   à ~67%, la galerie finira donc un peu plus haut chez lui. Un alignement exact dans tous les
   cas supposerait d'égaliser les hauteurs, mais la galerie s'étirerait alors aussi à
   l'ouverture d'une rubrique — un défaut bien plus visible.

   La colonne de texte n'a rien à régler : .project-data est en flex: 1, elle absorbe ce qui
   reste (~33%). gap : var(--grid-gap), le même écart que les colonnes de l'atlas. */
/* --vign-w : largeur d'UNE vignette, exprimée en unités absolues pour pouvoir servir de
   HAUTEUR (un pourcentage de hauteur se calculerait sur la hauteur du parent, pas sa largeur).
   Le conteneur vaut 100vw moins les deux marges du site ; la vignette en occupe 10.5%. */
.project-acf {
  --vignettes-col: 10.5%;
  --vign-w: calc((100vw - 2 * var(--site-margin)) * 0.105);
  /* Hauteur de référence : 5 vignettes empilées + leurs 4 gouttières. La galerie étant carrée,
     lui donner cette LARGEUR lui donne exactement cette HAUTEUR — d'où l'alignement du bas.
     Une seule formule pour la colonne et la galerie : elles ne peuvent plus se désaligner. */
  --col-5: calc(5 * var(--vign-w) + 4 * var(--grid-gap));
  --media-col: var(--col-5);
  display: flex; align-items: flex-start; gap: var(--grid-gap); width: 100%;
}
/* gap : var(--grid-gap) — la même valeur que l'écart des colonnes de projets de l'atlas,
   liée pour que les deux ne puissent pas diverger. */
/* min-height : la colonne réserve toujours 5 emplacements, même avec moins de vignettes —
   c'est ce qui permet à « Plus de projets en… » de descendre en bas (margin-top: auto) et de
   rester alignée avec le bas de la galerie, avec un vide au milieu.
   flex (et non grid) : `margin-top: auto` sur le dernier enfant n'a d'effet qu'en flex. */
.project-vignettes { width: var(--vignettes-col); min-height: var(--col-5); display: flex; flex-direction: column; gap: var(--grid-gap); position: sticky; top: 116px; order: -1; flex-shrink: 0; overflow: visible; max-height: none; }
/* Poussée en bas de la colonne : le vide se crée au-dessus d'elle, pas entre les autres. */
.project-vignette--material { margin-top: auto; }
.project-gallery   { width: var(--media-col); display: flex; flex-direction: column; position: sticky; top: 116px; order: 0; flex-shrink: 0; }
.project-data      { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; order: 1; }

/* ── Panels ───────────────────────────────────────────────── */

.project-panel           { display: none; width: 100%; }
.project-panel.is-active { display: block; }

/* ── Vignettes ────────────────────────────────────────────── */

.project-vignette           { position: relative; display: block; background: none; border: none; cursor: pointer; padding: 0; width: 100%; transition: opacity 0.2s; overflow: hidden; }
.project-vignette:hover     { opacity: 1; }
.project-vignette.is-active { opacity: 0.1; cursor: default; }
.project-vignette img       { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.vignette-minimap           { width: 100%; aspect-ratio: 1/1; background: #e8e4df; }
.project-vignette.is-active { display: none; }

/* ── Vignettes : libellé AU CENTRE de la carte, en blanc ────────────────────
   Le titre était placé au-dessus, en noir : à cette taille les vignettes se distinguaient
   mal les unes des autres. Il passe sur la carte, centré.
   Deux traitements :
   - vignettes ILLUSTRÉES (photos projet, chantier, audio) : l'image est conservée, un voile
     sombre garantit la lisibilité du texte ;
   - vignettes en NÉGATIF (pièces graphiques, ressources, détails) : carte noire pleine, sans
     image — leur miniature était illisible et n'apportait rien. */
.project-vignette { display: block; position: relative; }
.project-vignette .vignette-overlay { display: block; }
.project-vignette .vignette-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 6px; text-align: center; color: #fff;
  font-family: "The Bigmouth Regular", sans-serif; font-size: 16px; line-height: 1.15;
  text-transform: none; z-index: 2;
}

/* Vignettes ILLUSTRÉES : noir et blanc, pour un ensemble homogène et un libellé lisible. */
.project-vignette:not(.project-vignette--negative) img { filter: grayscale(1); }

/* NÉGATIF : couleurs inversées, image conservée (et non un aplat noir).
   Le filtre porte sur l'image / la carte UNIQUEMENT — l'appliquer au bouton retournerait
   aussi le libellé, qui virerait au noir sur fond sombre.

   contrast(0.6) ÉCLAIRCIT le résultat, et c'est le seul levier qui marche ici : brightness()
   multiplie, or 0 × n = 0, donc le noir pur resterait noir. Le contraste, lui, ramène les
   valeurs vers le gris moyen — le noir devient ~#333 (gris foncé), le blanc ~#d8d8d8.
   Monter la valeur assombrit, la baisser éclaircit encore. */
.project-vignette--negative img,
.project-vignette--negative .vignette-minimap,
.project-vignette--negative .vignette-placeholder { filter: invert(1) contrast(0.4); }
/* Le voile de ces vignettes ne sert plus à assombrir le bas (le libellé est centré) : il est
   recyclé en teinte orange de survol, plus bas. */

/* ZOOM sur « Détails » et « Pièces graphiques » : à cette taille, l'image entière est
   illisible — on entre dedans pour qu'on devine de quoi il s'agit. Ne vise que les <img>,
   donc PAS la carte « Ressources » (un div .vignette-minimap), dont le cadrage se règle par
   son niveau de zoom côté carte et non par une mise à l'échelle qui la flouterait. */
/* Zoom de CADRAGE (pas de survol) : sans lui, l'image entière est illisible à cette taille. */
.project-vignette--negative img { --vignette-zoom: 1.8; transform: scale(var(--vignette-zoom)); }

/* ── Survol : aplat orange semi-transparent, sur TOUTES les vignettes ───────
   Remplace l'agrandissement, qui posait deux problèmes : trop discret pour se voir à cette
   taille, et inapplicable à « Ressources » — une carte (<div>), pas une image — d'où une
   vignette qui ne réagissait pas comme les autres.
   Posé en ::after et non sur .vignette-overlay : ce dernier porte le dégradé sombre qui rend
   le libellé lisible sur les photos, il faut donc garder les deux couches séparées.
   z-index 1 : au-dessus de l'image, sous le libellé (z-index 2), qui reste blanc net. */
.project-vignette::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--color-main); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.project-vignette:hover::after { opacity: 0.55; }

/* Les vignettes en négatif n'ont pas besoin du dégradé sombre : leur libellé est centré sur
   un fond déjà uniforme. */
.project-vignette--negative .vignette-overlay { display: none; }

/* ── « Plus de projets en … » : mosaïque de 3 photos ────────────────────────
   Une grande image à gauche, deux empilées à droite — trois aperçus dans un carré, sans
   qu'aucun ne devienne illisible. Les photos passent en noir et blanc comme les autres
   vignettes illustrées ; le libellé, centré, annonce le matériau (aucun titre de projet :
   la vignette mène à une sélection, pas à un projet). */
.material-mosaic {
  display: grid; aspect-ratio: 1 / 1; width: 100%;
  grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
}
.material-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
/* La 1re photo occupe toute la hauteur de la colonne large. */
.material-mosaic img:first-child { grid-row: 1 / -1; }
/* Voile plein (et non dégradé du bas) : le libellé est centré, il lui faut du contraste au
   milieu — et la mosaïque est visuellement chargée. */
.project-vignette--material .vignette-overlay { background: rgba(0, 0, 0, 0.45); }

.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right { display: none !important; }
.maplibregl-ctrl-geolocate    { display: none !important; }

/* ── Texte ────────────────────────────────────────────────── */

.project-description { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 200; color: var(--color-text); text-align: justify; width: 100%; margin: 0; }
.project-data a { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 500; color: var(--color-text); transition: color 0.2s, font-weight 0.1s; }
.project-data a:hover { color: var(--color-main); font-weight: 700; }

/* ── Dropdowns ────────────────────────────────────────────── */

.project-dropdown { width: 100%; background: none; }
.project-dropdown-trigger { display: flex; align-items: center; justify-content: flex-start; width: 100%; background: none; border: none; cursor: pointer; padding: 2px 0; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--color-text); transition: color 0.2s, font-weight 0.1s; }
.project-dropdown-trigger:hover { color: var(--color-main); font-weight: 700; background: none; }
.project-dropdown-trigger.is-open { color: var(--color-text); font-weight: 700; background: none; }
/* Le soulignement porte sur le LIBELLÉ, pas sur la flèche. Le sélecteur visait span:first-child,
   qui désignait le texte quand la flèche était à droite — depuis qu'elle est passée devant,
   c'est elle qui se retrouvait soulignée. */
.project-dropdown-trigger.is-open span:not(.project-dropdown-arrow) { text-decoration: underline; text-underline-offset: 3px; }
.project-dropdown-trigger.is-open .project-dropdown-arrow { transform: rotate(180deg); text-decoration: none; }
.project-dropdown-trigger:focus,
.project-dropdown-trigger:focus-visible,
.project-dropdown-trigger:active { background: none !important; color: var(--color-text) !important; outline: none; box-shadow: none; }
/* Flèche À GAUCHE du libellé (margin-right et non -left) : c'est l'ordre du markup, mais la
   marge suivait encore l'ancienne position à droite. flex-shrink: 0 pour qu'elle ne se
   comprime pas sur un intitulé long. */
.project-dropdown-arrow           { font-size: 24px; transition: transform 0.2s; display: inline-block; margin-right: 8px; flex-shrink: 0; line-height: 1; }
/* padding-left : le contenu est légèrement décalé sous son titre, ce qui rend la hiérarchie
   lisible d'un coup d'œil. Aligné sur la largeur de la flèche + sa marge. */
.project-dropdown-content         { display: none; padding-bottom: 16px; padding-left: 22px; }
.project-dropdown-content.is-open { display: block; }


/* ── Infos techniques ─────────────────────────────────────── */

.project-info  { width: 100%; }
.section-col   { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* ── Galerie ──────────────────────────────────────────────── */

.gallery-container { position: relative; width: 100%; overflow: hidden; }
/* Bouton « Enregistrer » toujours visible en haut à droite de l'image (le .fav-btn de base est
   masqué hors survol sur l'atlas/agenda ; ici on le veut permanent). z-index > flèches (5). */
.gallery-container .project-fav-btn { top: 12px; right: 12px; opacity: 1; pointer-events: auto; z-index: 6; }
.gallery-slider    { display: flex; flex-wrap: nowrap; transition: transform 0.5s ease-in-out; }
.gallery-slide     { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.gallery-slide img { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; display: block; cursor: zoom-in; }

.photo-credit { position: absolute; left: 12px; bottom: 12px; font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-text); background: rgba(255,255,255,0.75); padding: 6px 8px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gallery-prev,
.gallery-next       { position: absolute; top: 50%; transform: translateY(-50%); background: none !important; background-color: transparent; color: #fff; border: none; cursor: pointer; font-size: 32px; z-index: 5; transition: color 0.2s; }
.gallery-prev:hover,
.gallery-next:hover { color: var(--color-main) !important; }
.gallery-prev       { left: 10px; background: none !important; background-color: transparent !important; }
.gallery-next       { right: 10px; background: none !important; background-color: transparent !important; }


/* ── Carte ────────────────────────────────────────────────── */

#single-project-map { width: 100%; aspect-ratio: 1/1; border: 1px solid var(--color-border-strong); }

.map-marker-popup .maplibregl-popup-content { padding: 10px 14px; border-radius: 4px; font-family: "Archivo", sans-serif; max-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.marker-popup-title   { font-weight: bold; font-size: 14px; margin: 0; color: var(--color-text); }
.marker-popup-type    { font-size: 12px; color: var(--color-muted); margin-top: 4px; }

.distance-label { background: transparent; padding: 2px 6px; border-radius: 3px; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: bold; white-space: nowrap; pointer-events: none; display: block; z-index: 1000; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff; opacity: 0; transition: opacity 0.3s ease; }
.distance-label.is-visible { opacity: 1; }

.custom-project-marker       { width: 40px; height: 50px; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; transition: transform 0.2s; transform-origin: bottom center; }
.custom-project-marker:hover { transform: scale(1.15); }

.map-legend       { position: absolute; bottom: 20px; right: 20px; background: rgba(255,255,255,0.95); padding: 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-family: "Archivo", sans-serif; font-size: 11px; z-index: 10; }
.map-legend-title { font-weight: bold; margin-bottom: 8px; font-size: 12px; }
.map-legend-item  { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.map-legend-color { width: 16px; height: 16px; border-radius: 50%; }

.maplibregl-popup-close-button       { background: none !important; color: var(--color-text); font-size: 20px; padding: 8px; }
.maplibregl-popup-close-button:hover { color: var(--color-main); }

/* ── Audio ────────────────────────────────────────────────── */

.audio-container     { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 500px; margin: 60px auto 0; min-height: 300px; }
.audio-image-wrapper { position: relative; width: 100%; max-width: 300px; }
.audio-portrait      { width: 100%; height: auto; display: block; }

.audio-play-btn,
.audio-pause-btn     { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; padding: 0; z-index: 5; }
.audio-play-btn img,
.audio-pause-btn img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s; }
.play-icon-normal, .pause-icon-normal { opacity: 1; }
.play-icon-hover,  .pause-icon-hover  { opacity: 0; }
.audio-play-btn:hover .play-icon-normal,
.audio-pause-btn:hover .pause-icon-normal { opacity: 0; }
.audio-play-btn:hover .play-icon-hover,
.audio-pause-btn:hover .pause-icon-hover  { opacity: 1; }
.audio-play-btn:hover,
.audio-pause-btn:hover { transform: translate(-50%,-50%) scale(1.1); }

.audio-progress-wrapper       { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: var(--color-muted); cursor: pointer; z-index: 10; transition: height 0.2s; }
.audio-progress-wrapper:hover { height: 12px; }
.audio-progress-bar           { height: 100%; width: 0%; background: var(--color-main); transition: width 0.1s linear; pointer-events: none; }

/* ── Critères ─────────────────────────────────────────────── */

.criteria-section       { width: 100%; }
.criteria-toggle        { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: color 0.2s; user-select: none; }
.criteria-toggle:hover,
.criteria-toggle:hover .criteria-arrow { color: var(--color-main); }
.criteria-arrow         { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--color-text); transition: transform 0.3s ease; display: inline-block; }
.criteria-toggle.is-open .criteria-arrow { transform: rotate(90deg); }
.criteria-title-text    { flex: 1; }
.criteria-section-title { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; color: var(--color-text); margin: 20px 0 10px; }
.criteria-list          { display: none; flex-direction: column; gap: 0; margin-top: 0; }
.criteria-item          { display: flex; align-items: baseline; gap: 10px; border-radius: 0; }
.criteria-item.is-unchecked            { border-radius: 0; }
.criteria-item.is-unchecked .criteria-checkbox { border-radius: 0; }
.criteria-item.is-checked .criteria-label { font-weight: 400; }
.criteria-checkbox      { width: 11px; height: 11px; margin: 0; accent-color: var(--color-text); pointer-events: none; border-radius: 0; }
.criteria-label         { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 200; color: var(--color-text); }
.criteria-desc          { margin-left: 24px; margin-top: 2px; margin-bottom: 8px; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 200; color: var(--color-muted); line-height: 1.4; }
.criteria-details       { margin-left: 24px; margin-top: 4px; margin-bottom: 10px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 400; color: #3D6B2A; opacity: 0.75; }
.criteria-details[data-image] { cursor: help; position: relative; }
.criteria-tooltip       { position: absolute; z-index: 1000; background: #fff; border: 2px solid var(--color-border-strong); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); padding: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.criteria-tooltip.is-visible { opacity: 1; }
.criteria-tooltip img   { display: block; max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: cover; }

/* ── Lightbox ─────────────────────────────────────────────── */

.lightbox-overlay         { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 40px; }
.lightbox-overlay.is-open { display: flex; }
.lightbox-image           { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox-loc             { position: absolute; right: 30px; bottom: 30px; width: 220px; max-width: 35vw; max-height: 35vh; object-fit: contain; display: none; padding: 8px; }

/* ── Modale questionnaire ─────────────────────────────────── */

.survey-modal          { position: fixed; inset: 0; z-index: 9999; display: none; }
.survey-modal.is-open  { display: block; }
.survey-overlay        { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.survey-panel          { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(720px,90vw); max-height: 90vh; background: #fff; padding: 5px; display: flex; flex-direction: column; }
.survey-close          { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; }
.survey-iframe-wrapper { flex: 1; overflow: hidden; -webkit-overflow-scrolling: touch; }
.survey-iframe-wrapper iframe { width: 100%; height: 100%; min-height: 700px; border: none; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Ordre voulu : TITRE · galerie · rubriques · infos · vignettes.
     Le titre vit DANS .project-data, la galerie est un bloc frère — impossible de passer le
     titre devant la galerie en réordonnant les 3 colonnes. display:contents efface
     .project-data de la mise en page : ses enfants deviennent des enfants directs de
     .project-acf, où `order` peut alors les entrelacer avec la galerie.

     min-width: 0 est INDISPENSABLE : un élément flex a `min-width: auto`, donc il refuse de
     descendre sous la largeur de son contenu. La galerie contient un rail de N diapos côte à
     côte (.gallery-slider, nowrap) : sa largeur minimale valait N × 100%, ce qui la rendait
     bien plus large que l'écran et rendait TOUTE la page défilable vers la droite — d'où la
     description et les rubriques qui semblaient déborder. Avec min-width: 0 elle se contente
     de la largeur disponible et son overflow:hidden fait son travail. */
  /* --project-gap : l'écart entre blocs empilés. Défini en variable parce que l'annulation
     de l'espace entre les deux rubriques (plus bas) doit valoir exactement l'opposé — les
     deux ne peuvent donc plus diverger. */
  .project-acf       { --project-gap: 24px; flex-direction: column; align-items: stretch; gap: var(--project-gap); }
  .project-data      { display: contents; }
  .project-gallery   { width: 100%; min-width: 0; position: static; flex: initial; }
  /* Les 5 vignettes sur UNE SEULE LIGNE, au même écart que les colonnes de projets.
     min-height / flex-direction annulés : la colonne verticale du desktop devient une rangée.
     Largeur figée à 1/5 (flex: 0 0 …) et non `flex: 1` : avec moins de 5 vignettes, elles
     gardent leur taille au lieu de s'étirer — c'est ce qui laisse la place au décalage à
     droite de « Plus de projets en… ». */
  .project-vignettes {
    width: 100%; min-width: 0; min-height: 0; position: static; flex: initial;
    flex-direction: row; align-items: flex-start;
  }
  .project-vignette { flex: 0 0 calc((100% - 4 * var(--grid-gap)) / 5); }
  /* Poussée à DROITE (et non en bas comme sur desktop) : le vide se forme avant elle. */
  .project-vignette--material { margin-top: 0; margin-left: auto; }
  /* À 1/5 de largeur la vignette fait ~60px : le libellé de 16px du desktop déborderait. */
  .project-vignette .vignette-label { font-size: 11px; padding: 3px; line-height: 1.1; }
  .gallery-container { min-width: 0; max-width: 100%; }

  /* margin: 0 — la marge basse de 20px du titre s'ajouterait au gap de 24px de la colonne. */
  .titre1            { order: 1; margin: 0; line-height: 1.1; }
  .project-gallery   { order: 2; }
  .project-data > .project-dropdown { order: 3; min-width: 0; }
  /* « Description du projet » et « Pourquoi ce projet… » se suivent sans vide : le gap de la
     colonne ne se règle pas par paire, on le neutralise donc entre ces deux rubriques.
     IMPÉRATIF : scoper à « .project-data > ». Non scopée, la marge négative frappe aussi les
     4 rubriques de .project-info — qui, elles, ne subissent aucun gap à compenser — et les
     empile les unes sur les autres.
     C'est bien .project-data et non .project-acf > : display:contents dissout la BOÎTE, pas
     le DOM, donc le parent reste .project-data pour les sélecteurs. */
  .project-data > .project-dropdown + .project-dropdown { margin-top: calc(-1 * var(--project-gap)); }
  /* Même logique : .project-info enchaîne directement sous « Pourquoi ce projet… », le gap de
     la colonne y créerait une rupture que les rubriques n'ont pas entre elles. */
  .project-info      { order: 4; min-width: 0; margin-top: calc(-1 * var(--project-gap)); }
  .project-vignettes { order: 5; }

  /* Les longs mots (URL, noms composés) ne doivent pas élargir leur bloc. */
  .project-description,
  .project-dropdown-content { min-width: 0; overflow-wrap: break-word; }
  #single-project-map { aspect-ratio: unset; height: 400px; }
}

@media (max-width: 600px) {
  /* Les vignettes restent sur une seule ligne (5 de front), quelle que soit la largeur —
     l'ancienne bascule en 2 colonnes n'a plus lieu d'être. */
  .audio-container     { min-height: 200px; margin-top: 40px; }
  .audio-image-wrapper { max-width: 200px; }
  .audio-play-btn,
  .audio-pause-btn     { width: 60px; height: 60px; }
  .lightbox-loc        { background: #fff; }
  .survey-panel        { width: 94vw; max-height: 94vh; padding: 16px; }
  .survey-iframe-wrapper iframe { min-height: 600px; }
  .distance-label      { font-size: 10px; }
  .criteria-tooltip img { max-width: 200px; max-height: 150px; }
}