/**
 * Denain Mediafolio 2016 — styles custom pour les projets
 *
 * Chargé après le CSS du plugin Mediafolio (assets/css/mediafolio.css).
 * Rien ici n'utilise !important : si un conflit de priorité CSS apparaît,
 * c'est un signal qu'il faut revoir la sélection plutôt que forcer.
 *
 * Phase 1 — Grille masonry            : ci-dessous
 * Phase 2 — Overlay au survol          : ci-dessous
 * Phase 4 — Fiche projet façon Figma   : ci-dessous
 */


/* =========================================================================
   Phase 1 — Grille masonry
   =========================================================================
   Le plugin affiche la grille en "damier" : toutes les cases ont la même
   hauteur, imposée par une mise en page de type tableau (grid-template-
   columns). On remplace ce système par des colonnes fluides, où chaque
   image garde sa hauteur naturelle et vient se placer dans la colonne la
   moins remplie — l'effet "Pinterest" de la maquette Figma.

   On doit répéter la règle pour chaque variante "columns-1" à "columns-6"
   que le plugin peut générer, sinon ses propres règles (plus précises)
   continueraient à s'appliquer à la place des nôtres.
   ========================================================================= */

.projects ul.projects,
.projects.columns-1 ul.projects,
.projects.columns-2 ul.projects,
.projects.columns-3 ul.projects,
.projects.columns-4 ul.projects,
.projects.columns-5 ul.projects,
.projects.columns-6 ul.projects {
  display: block;
  column-count: 1;
  column-gap: var(--pas-10);   /* 80px — gouttière horizontale (cahier) */
}

/* Tablette : 2 colonnes */
@media ( min-width: 600px ) {
  .projects ul.projects,
  .projects.columns-1 ul.projects,
  .projects.columns-2 ul.projects,
  .projects.columns-3 ul.projects,
  .projects.columns-4 ul.projects,
  .projects.columns-5 ul.projects,
  .projects.columns-6 ul.projects {
    column-count: 2;
  }
}

/* Desktop : 3 colonnes, comme sur la maquette Figma */
@media ( min-width: 1024px ) {
  .projects ul.projects,
  .projects.columns-1 ul.projects,
  .projects.columns-2 ul.projects,
  .projects.columns-3 ul.projects,
  .projects.columns-4 ul.projects,
  .projects.columns-5 ul.projects,
  .projects.columns-6 ul.projects {
    column-count: 3;
  }
}

/* Chaque case : ne jamais se couper au milieu entre deux colonnes */
.projects ul.projects li.project {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0 0 var(--pas-10);   /* 80px — gouttière verticale (cahier) */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}


/* =========================================================================
   Overlay au survol + badge catégorie
   =========================================================================
   Appareil AVEC survol (souris) : au survol, voile sombre + catégorie en
   haut + titre en bas, en blanc. Rien au repos.
   Appareil SANS survol (tactile) : catégorie et titre affichés en
   permanence avec le voile, puisqu'aucun survol n'est possible ; un seul
   tap ouvre le projet. La bascule se fait sur la CAPACITÉ de survol de
   l'appareil (media hover), pas sur la taille de l'écran.
   ========================================================================= */

/* Le lien de la case devient le repère de positionnement de l'overlay */
.projects ul.projects li.project .project-permalink {
  position: relative;
  display: block;
}

.projects ul.projects li.project .project-thumbnail {
  margin: 0;
}

/* L'image remplit toujours toute la largeur de sa case.
   Le plugin met max-width:100% (ne pas dépasser), ce qui laisse un blanc à
   droite quand l'image source est plus petite que la case. On force width:100%
   pour combler ce blanc. Compromis assumé : une image nettement sous-
   dimensionnée sera légèrement agrandie (donc à régénérer en 800px si besoin). */
.projects ul.projects li.project .project-thumbnail img {
  width: 100%;
  height: auto;
}

/* Voile sombre, masqué au repos */
.projects ul.projects li.project .project-permalink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba( 0, 0, 0, 0.4 );   /* voile noir 40% (cahier) */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Catégorie superposée en HAUT de l'image, masquée au repos.
   Ancrage top:0 : un texte court ancré en haut grandit vers le bas, aucun
   conflit — on la laisse en positionnement absolu simple. */
.projects ul.projects li.project .project-category-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 1em 1.1em;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.75rem;          /* 12px (cahier) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Conteneur du titre : couche flex qui remplit la case et POUSSE le titre en
   bas (justify-content: flex-end). C'est la traduction correcte de l'auto-
   layout Figma "espacement auto". Le titre reste ainsi dans le flux et grandit
   vers le BAS — ce qui rend le line-clamp fiable, sans max-height ni bricolage.
   (L'ancien ancrage bottom:0 faisait grandir le titre vers le HAUT, en conflit
   avec la troncature, d'où la ligne fantôme.) */
.projects ul.projects li.project .project-title-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.projects ul.projects li.project h3 {
  margin: 0;
  padding: 1em 1.1em;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: var(--taille-xl);   /* 24px (cahier) */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  /* Plafond à 4 lignes : maintenant fiable, car le titre est dans le flux. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;                /* ← AJOUT : propriété standard (compatibilité) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Appareil AVEC survol : révélation au survol et au focus clavier */
@media ( hover: hover ) {
  .projects ul.projects li.project .project-permalink:hover::after,
  .projects ul.projects li.project .project-permalink:focus::after {
    opacity: 1;
  }

  .projects ul.projects li.project .project-permalink:hover .project-category-badge,
  .projects ul.projects li.project .project-permalink:focus .project-category-badge,
  .projects ul.projects li.project .project-permalink:hover h3,
  .projects ul.projects li.project .project-permalink:focus h3 {
    opacity: 1;
  }
}

/* Appareil SANS survol (tactile) : pas d'overlay sur l'image.
   La catégorie sort AU-DESSUS de l'image, le titre EN-DESSOUS, en texte
   normal dans le flux. L'image n'est jamais assombrie. On annule donc tout
   ce que l'overlay avait posé (voile, superposition, opacité). */
@media ( hover: none ) {

  /* On neutralise le repère de positionnement de l'overlay */
  .projects ul.projects li.project .project-permalink {
    position: static;
  }

  /* Voile supprimé */
  .projects ul.projects li.project .project-permalink::after {
    content: none;
  }

  /* Le conteneur du titre redevient un simple bloc dans le flux (plus de
     couche flex superposée), pour que le titre s'affiche sous l'image. */
  .projects ul.projects li.project .project-title-wrap {
    position: static;
    display: block;
  }

  /* Catégorie et titre : retour dans le flux, plus de superposition */
  .projects ul.projects li.project .project-category-badge,
  .projects ul.projects li.project h3 {
    position: static;
    opacity: 1;
    color: var(--couleur-texte);   /* #1E1E1E (cahier) */
    padding: 0;
  }

  /* Catégorie au-dessus de l'image */
  .projects ul.projects li.project .project-category-badge {
    display: block;
    margin: 0 0 0.4em;
  }

  /* Titre en-dessous de l'image */
  .projects ul.projects li.project h3 {
    margin: 0.5em 0 0;
  }
}


/* =========================================================================
   Fiche projet
   =========================================================================
   Structure voulue (maquette Vitry-sur-Seine), de haut en bas :
     1. image de couverture pleine largeur
     2. titre + catégorie
     3. deux colonnes : description courte (gauche ~60%) / metadata (droite ~40%)
     4. galerie pleine largeur
     5. texte long pleine largeur

   Les blocs sont tous frères dans le HTML. On les place avec des zones de
   grille nommées, uniquement à partir de 768px. En dessous, on ne fait rien :
   les blocs s'empilent naturellement dans l'ordre du HTML (couverture, titre,
   catégorie, texte court, infos, galerie, texte long), ce qui donne un
   empilement mobile correct.
   ========================================================================= */

/* Image de couverture : pleine largeur DANS le cadre du thème, en hauteur ET
   en largeur. Le thème Twenty Sixteen enveloppe la page dans #page.site avec
   une marge latérale (≈21px). Mécanisme : l'image déborde d'abord jusqu'aux
   bords de la fenêtre (marges négatives), puis le cadre #page — auquel on
   donne "overflow-x: hidden" — la rogne pile à ses propres bords intérieurs.
   Résultat : l'image remplit toute la largeur utile du site en respectant la
   marge du thème, sans la recouvrir. Si cette marge change (ou disparaît) plus
   tard, l'image suit automatiquement, sans retouche de ce code.
   En mode "couvrir", l'image remplit toute la bande et les débords sont rognés
   — l'image entière reste accessible via le carrousel au clic (lightbox). */
.mediafolio-single .single-featured {
  width: auto;
  margin-left: calc( 50% - 50vw );
  margin-right: calc( 50% - 50vw );
  height: 100svh;
}

/* Le cadre du thème borne le débordement : #page devient la référence de
   positionnement (pour l'en-tête flottant) et rogne horizontalement tout ce
   qui dépasse ses bords intérieurs — donc la couverture s'arrête sur eux. */
body.single-project #page {
  position: relative;
  overflow-x: hidden;
}

.mediafolio-single .single-featured a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.mediafolio-single .single-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile portrait : bande réduite (60svh) pour limiter le rognage agressif
   qu'imposerait un plein écran sur un format étroit et haut. */
@media ( max-width: 600px ) and ( orientation: portrait ) {
  .mediafolio-single .single-featured {
    height: 60svh;
  }
}

@media ( min-width: 768px ) {

  .mediafolio-single .project {
    display: grid;
    grid-template-columns: 495fr 356fr;   /* proportions exactes du cahier (58/42), fluides */
    grid-template-areas:
      "feature     feature"
      "title       title"
      "category    category"
      "shortdesc   meta"
      "gallery     gallery"
      "description description";
    column-gap: var(--pas-15);   /* 120px — séparation des colonnes (cahier) */
    row-gap: var(--pas-3);       /* 24px — espacement vertical, dont titre <-> catégorie */
    align-items: start;
  }

  .mediafolio-single .single-featured            { grid-area: feature; }
  .mediafolio-single .project_title              { grid-area: title; margin: 0; font-size: var(--taille-2xl); font-weight: 700; }
  .mediafolio-single .single-project-category    { grid-area: category; margin: 0; font-size: var(--taille-base); font-weight: 400; text-transform: uppercase; color: var(--couleur-texte); }
  .mediafolio-single .single-project-short-description { grid-area: shortdesc; margin: 0; font-size: var(--taille-xl); font-weight: 400; }
  .mediafolio-single .project-meta               { grid-area: meta; margin: 0; }
  .mediafolio-single .gallery.project-gallery    { grid-area: gallery; margin: 0; }
  .mediafolio-single .summary                    { grid-area: description; margin: 0; }
}


/* -------------------------------------------------------------------------
   Metadata (panneau infos) — cahier : 16px, champs espacés de 16px vertical.
   Labels en gris secondaire + majuscules (cohérent avec la maquette Figma).
   ------------------------------------------------------------------------- */
.mediafolio-single .project-meta dl.meta-fields .meta-field {
  margin-bottom: var(--pas-2);   /* 16px entre champs */
}

.mediafolio-single .project-meta dt.meta-field-label {
  font-size: var(--taille-base);      /* 16px */
  font-weight: 400;
  text-transform: uppercase;
  color: var(--couleur-texte-2);      /* gris secondaire */
  margin: 0 0 var(--pas);             /* 8px sous le label */
}

.mediafolio-single .project-meta dd.meta-field-value {
  font-size: var(--taille-base);      /* 16px */
  font-weight: 400;
  color: var(--couleur-texte);
}


/* -------------------------------------------------------------------------
   Galerie — carrousel horizontal (cahier / design Figma)
   Une seule ligne, pas de retour à la ligne. Chaque vignette a une LARGEUR
   FIXE : c'est indispensable, car le plugin force les images à width:100%
   (une seule remplirait alors tout l'écran). Une largeur fixe permet d'en
   voir plusieurs, la suivante débordant à droite — l'indice visuel qui
   signale qu'on peut défiler. Taille pilotée par --vignette-largeur /
   --vignette-hauteur (déclarées dans style.css), partagées avec les
   vignettes de la pagination inter-projets.
   ------------------------------------------------------------------------- */
.mediafolio-single .project-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pas-2);              /* 16px entre vignettes */
  overflow-x: auto;
  grid-template-columns: none;   /* neutralise la grille du plugin */
  scroll-snap-type: x proximity; /* léger accrochage au défilement */
}

.mediafolio-single .project-gallery a {
  flex: 0 0 var(--vignette-largeur);
  width: var(--vignette-largeur);
  height: var(--vignette-hauteur);
  scroll-snap-align: start;
}

.mediafolio-single .project-gallery img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   Pagination inter-projets — version sobre (flèche + label + titre)
   =========================================================================
   Retour à un design épuré après test de la version "vignette en overlay",
   jugée trop lourde par rapport à la galerie du projet. Flèche vectorielle
   (40px), label et titre empilés, gap vertical de 24px. Le titre reprend
   exactement le style des H1 du site (cohérence typographique).
   ========================================================================= */

.projects-single-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--pas-3);              /* 24px */
  margin-top: var(--pas-15);      /* 120px : séparation avec le contenu */
  /* pas de border-top : supprimé (design sobre) */
}

.projects-single-pagination a {
  display: flex;
  flex-direction: column;
  gap: var(--pas-3);              /* 24px entre flèche+label et titre */
  text-decoration: none;
  color: var(--couleur-texte-2);  /* #7C7C7C */
}

.projects-single-pagination-prev a {
  align-items: flex-start;
}

.projects-single-pagination-next a {
  align-items: flex-end;          /* bloc "suivant" aligné à droite */
  text-align: right;
}

.pagination-arrow {
  display: block;
  width: 40px;                    /* longueur cahier */
  height: 16px;
  color: var(--couleur-texte-2);  /* #7C7C7C */
}

/* La flèche par défaut pointe vers la gauche ; on la retourne pour "suivant". */
.projects-single-pagination-next .pagination-arrow {
  transform: scaleX( -1 );
}

.pagination-label {
  display: block;
  font-size: var(--taille-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-2);  /* #7C7C7C */
}

/* Le titre reprend exactement le style des H1 du site (cf. style.css) */
.pagination-title {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);   /* 32px, comme un H1 */
  font-weight: 700;
  line-height: var(--interligne-titre);
  color: var(--couleur-texte);    /* noir, contrairement au label */
}


/* =========================================================================
   Phase 4 (suite) — En-tête flottant au-dessus de la couverture
   =========================================================================
   Uniquement sur les fiches projet (body.single-project). L'en-tête du thème
   (#masthead) est sorti du flux et posé en couche supérieure, transparent,
   pour flotter par-dessus la couverture. La couverture, elle, remonte à
   top 0 : on annule l'espace que l'en-tête occupait au-dessus, pour que
   l'image démarre vraiment en haut de l'écran, derrière le logo et le menu.
   ========================================================================= */

/* L'en-tête flotte par-dessus, en haut, sur toute la largeur */
body.single-project #masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}

/* La couverture démarre tout en haut : on neutralise l'espace laissé par
   l'en-tête au-dessus du contenu. On cible le conteneur de contenu du thème
   et le wrapper du plugin pour remonter la première section (la couverture). */
body.single-project .site-content,
body.single-project .mediafolio-single {
  padding-top: 0;
  margin-top: 0;
}

/* Menu et logo lisibles par-dessus l'image de couverture.
   Sur une fiche projet, l'en-tête flotte sur des photos très variées : sur un
   fond clair (ciel, façade blanche), les éléments risquent de disparaître. On
   les "décolle" du fond avec une ombre portée.
   - Menu = texte : text-shadow.
   - Logo = image : filter drop-shadow (épouse la forme réelle du logo, parties
     transparentes comprises ; text-shadow ne fonctionne pas sur une image). */
body.single-project #masthead .site-title a,
body.single-project #masthead .main-navigation a {
  color: #fff;
  text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.6 );
}

body.single-project #masthead .custom-logo {
  filter: drop-shadow( 0 1px 4px rgba( 0, 0, 0, 0.45 ) );
}


/* =========================================================================
   Barre de filtres — pilule flottante fixe en bas (design Figma)
   =========================================================================
   La barre est fixée en bas de l'écran, toujours visible pendant le défilement.
   Police Archivo Narrow (chargée dans style.css). Entonnoir = SVG Material
   (licence Apache) intégré en CSS, affiché via un pseudo-élément — aucune
   modification du HTML du plugin. La position "fixed" détache la barre du flux,
   donc peu importe où le plugin la place dans la page.
   ========================================================================= */

/* La barre elle-même */
.mediafolio-category-filter {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX( -50% );
  z-index: 100;                             /* au-dessus de la bande décorative du parent (z-index 99) */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.325rem 0.75rem;               /* espacement interne (ajustement Denain) */
  background: rgba( 255, 255, 255, 0.8 );   /* blanc 80% (cahier) */
  border: 0 solid #000;
  border-radius: 2rem;                      /* arrondi de la pilule (ajustement Denain) */
  box-shadow: 0 4px 4px 0 rgba( 0, 0, 0, 0.25 );
}

/* Icône entonnoir (Material filter_alt) à gauche de la barre */
.mediafolio-category-filter::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E1E1E'%3E%3Cpath d='M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39c.51-.66.04-1.61-.79-1.61H5.04c-.83 0-1.3.95-.79 1.61z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* La liste des filtres, sur une seule ligne */
.mediafolio-category-filter ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque filtre — état par défaut.
   La bordure est présente mais transparente : elle réserve sa place, pour que
   l'apparition de la bordure au survol ne provoque aucun saut de mise en page. */
.mediafolio-category-filter-link {
  display: inline-flex;
  height: 2rem;
  padding: 0 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  font-family: var(--police-filtres);
  font-weight: 700;
  font-size: var(--taille-base);
  color: var(--couleur-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.6s ease-in-out;   /* motion cahier */
}

/* Survol / focus clavier */
.mediafolio-category-filter-link:hover,
.mediafolio-category-filter-link:focus {
  border-color: #000;
}

/* Sélectionné (actif) — classe .is-active posée par le plugin */
.mediafolio-category-filter-link.is-active {
  border-color: #000;
  background: var(--couleur-accent);   /* #B8FC62 */
}

/* On laisse de l'air en bas de la grille pour que la barre flottante ne
   recouvre pas les derniers projets quand on est en bas de page. */
.mediafolio-archive {
  padding-bottom: 120px;
}

/* -------------------------------------------------------------------------
   Barre de filtres — version mobile (≤ 910px)
   Même point de bascule que le menu mobile, pour un comportement cohérent.
   Pleine largeur, collée en bas, opaque, sans arrondis ni ombre flottante.
   ------------------------------------------------------------------------- */
@media ( max-width: 910px ) {

  .mediafolio-category-filter {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;               /* annule le centrage horizontal de la pilule */
    width: 100%;
    justify-content: flex-start;
    background: #ffffff;           /* opacité 100% */
    border-radius: 0;              /* plus d'arrondis */
    box-shadow: none;
    overflow-x: auto;              /* si les filtres dépassent, on peut défiler */
  }
}