/* ==========================================================
   CUSTOM.CSS — GRAVE   (fichier : assets/css/custom.css)
   Retouches du thème port-hugo (le thème lui-même n'est pas modifié)

   Sommaire
   0. Réglages généraux (largeur du site)
   1. Typographie générale
   2. Section about
   3. Justification des textes
   4. Grilles de la page d'accueil (événements, projets)
   5. Aperçu au clic (panneau sous les vignettes)
   6. Agrandissement des photos (GLightbox)
   7. Direction + équipe (deux colonnes)
   8. Équipe : vignettes, filtre violet, aperçu
   9. Page projet
   10. Blocs performance (shortcode « projet »)
   ========================================================== */


/* ==============================
   0. RÉGLAGES GÉNÉRAUX
   ============================== */

/* Largeur max des sections de la page d'accueil */
/* en % = proportionnelle à l'écran (ex. 85% = 7,5% de marge de chaque côté) */
/* ou en px pour une largeur fixe (ex. 1140px) */
/* ATTENTION : ne définir cette variable qu'UNE SEULE FOIS dans le fichier */
:root {
  --largeur-site: 77%;
}

/* Toutes les sections de la page d'accueil : centrées, largeur max commune */
#about .container,
#equipe .container,
#crea .container-fluid,
#portfolio .container-fluid {
  max-width: var(--largeur-site) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Réglages au cas par cas (facultatif) : décommente (Cmd+/) et ajuste */
/* #about .container           { max-width: 1000px !important; } */
/* #equipe .container          { max-width: 1200px !important; } */
/* #crea .container-fluid      { max-width: 1140px !important; } */
/* #portfolio .container-fluid { max-width: 1140px !important; } */


/* ==============================
   1. TYPOGRAPHIE GÉNÉRALE
   ============================== */

/* Police Sofia Pro (Adobe Fonts) partout sur le site */
/* !important : le thème impose Rubik sur certains titres */
/* les icônes Font Awesome (.fa, .fas, .fab…) sont exclues */
/* graisses disponibles : 300, 400, 500, 600, 700, 900 (+ italiques) */
body *:not(.fa):not(.fas):not(.fab):not(.far):not(.fal) {
  font-family: "sofia-pro", sans-serif !important;
}

/* Titres de section de la page d'accueil : même style partout */
/* (Direction, L'équipe, Projets, Événements) */
.direction-equipe h2,
.portfolio h2 {
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: #260649 !important;
  text-transform: uppercase !important;  /* tout en capitales ; none = tel qu'écrit */
  letter-spacing: 0.05em !important;
  text-align: left !important;
  margin: 0 0 25px !important;
}


/* ==============================
   2. SECTION ABOUT (page d'accueil)
   ============================== */

/* Titre « GRAVE » */
.about-me .text-holder h1 {
  font-weight: 700;
  font-size: 3rem;
  color: #260649;
}

/* Texte de présentation (vient de content/_index.md) */
.about-me .text-holder p {
  font-weight: 600;
  color: #000;
}

/* Image de about : taille dans sa colonne */
.about-me .about-me-images img {
  width: 55% !important;   /* % de la largeur de sa colonne */
  height: auto;
  display: block;
  margin-left: auto;       /* calée à droite ; mets margin: 0 auto pour la centrer */
}


/* ==============================
   3. JUSTIFICATION DES TEXTES
   ============================== */

/* About + direction + page projet + aperçu */
/* hyphens: manual = pas de césure automatique */
.about-me .text-holder p,
.direction-texte p,
.projet-texte p,
.projet-description p,
.og-details p {
  text-align: justify;
  hyphens: manual;
}


/* ==============================
   4. GRILLES DE LA PAGE D'ACCUEIL (événements, projets)
   ============================== */

/* Cache la description dans la grille (elle ne sert qu'à l'aperçu) */
.og-grid .hidden {
  display: none;
}

/* Vignettes des événements et projets alignées à gauche (au lieu de centrées) */
#crea .og-grid,
#portfolio .og-grid {
  text-align: left !important;
  padding: 0 !important;
}

/* Titres de ces sections alignés à gauche aussi */
#crea .portfolio-holder .text-center,
#portfolio .portfolio-holder .text-center {
  text-align: left !important;
}

/* Sous-titres « À venir » / « Passés » dans la section événements */
.sous-titre-grille {
  font-weight: 600;
  font-size: 1.1rem;
  color: #260649;
  margin: 30px 0 20px;
}

/* --- Titre par-dessus l'image des vignettes (événements, projets) --- */

/* La vignette sert de repère pour placer le titre */
#crea .og-grid li > a,
#portfolio .og-grid li > a {
  position: relative;
  display: block;
}

/* Le titre, en blanc, en bas à gauche de l'image */
.vignette-titre {
  position: absolute;
  left: 12px;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-weight: 900;
  font-style: italic;
  font-size: 0.85rem;
  text-align: left;
  text-shadow: 0 1px 4px rgba(99, 93, 99, 0.6);  /* léger ombrage : reste lisible sur une zone claire */
  pointer-events: none;   /* le clic passe à travers et ouvre l'aperçu */
}

/* Pas de soulignement ni de bleu de lien, même au survol */
.og-grid li > a,
.og-grid li > a:hover {
  text-decoration: none !important;
}


/* ==============================
   5. APERÇU AU CLIC (panneau qui s'ouvre sous les vignettes)
   ============================== */

/* --- Le panneau --- */

/* Fond du panneau */
.og-expander {
  background: #160644;
}

/* Marges haut/bas, comptées DANS la hauteur du panneau */
/* hauteur forcée sinon la marge du bas est coupée */
.og-expander-inner {
  box-sizing: border-box !important;
  height: 100% !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* --- Colonne de gauche : image seule (+ crédit) OU grille de la galerie (crea) --- */

/* Image puis crédit l'un sous l'autre, centrés, dans les marges */
.og-fullimg {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100% !important;
}

/* Grande image seule (projets sans galerie) : ne dépasse jamais la place disponible */
.og-fullimg > img {
  max-height: calc(100% - 30px) !important;
  width: auto !important;
}

/* Crédit sous la grande image (nom du fichier, ou credit: dans le .md) */
.og-credit {
  align-self: flex-start;   /* calé à gauche de la colonne */
  text-align: left;
  font-size: 0.75rem;
  color: #603d9d;
  margin: 18px 20px 0;
}

/* Aperçu AVEC galerie (crea) : la colonne devient une grille, alignée en haut */
/* défilement si beaucoup d'images */
.og-fullimg.avec-galerie {
  justify-content: flex-start !important;
  overflow-y: auto;
}

/* Grille « justifiée » : photos sans recadrage, même hauteur par ligne, largeur remplie */
/* (la hauteur visée des lignes se règle dans hugrid.custom.js : ratio * 140) */
.og-galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

/* Empêche la dernière ligne d'être étirée si elle n'a qu'une ou deux photos */
.og-galerie::after {
  content: "";
  flex-grow: 999;
}

.og-galerie img {
  min-width: 0;
  height: auto;
  object-fit: cover;
  cursor: zoom-in;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.og-galerie img:hover {
  opacity: 1;
}

/* --- Colonne de droite : textes --- */

/* Défilement si le texte est trop long (au lieu d'être coupé) */
.og-details {
  height: 100%;
  overflow-y: auto;
  padding-right: 15px;   /* espace pour la barre de défilement */
}

/* Titre du projet */
.og-details h3 {
  font-weight: 900;
  font-style: italic;
  font-size: 1.7rem;
  color: #fff;
}

/* Projets crea : artistes (semi-bold) */
.og-details .apercu-artistes {
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0;
}

/* Projets crea : type et année (regular) */
.og-details .apercu-infos {
  font-weight: 400;
  font-style: normal;
  color: #fff;
  margin-bottom: 15px;
}

/* Résumé (texte avant <!--more--> dans le fichier .md) */
.og-details p {
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
}

/* --- Bouton --- */

/* Bouton « VOIR LE PROJET » / « VOIR LE SITE » */
.og-details a {
  font-weight: 500;
  font-size: 0.8rem;
  color: #dfd9ea;
  border-color: #dfd9ea;
}

/* Bouton masqué si ni page ni lien externe (lien = #) */
.og-details a[href="#"] {
  display: none !important;
}


/* ==============================
   6. AGRANDISSEMENT DES PHOTOS (GLightbox)
   galerie de l'aperçu (crea) et galeries des pages projet
   ============================== */

/* Photo : 80 % max de la fenêtre, en largeur comme en hauteur */
.glightbox-container .gslide-image img {
  max-width: 80vw !important;
  max-height: 80vh !important;
}

/* Pas de cadre blanc sous la photo : le crédit est posé directement sur le fond sombre */
.glightbox-clean .gslide-description {
  background: transparent !important;
}
.glightbox-clean .gdesc-inner {
  padding: 10px 0 0 !important;
}

/* Crédit en blanc, petit */
.glightbox-clean .gslide-desc {
  color: #fff !important;
  font-size: 0.8rem !important;
  text-align: left;
}

/* Pas d'ombre autour de la photo */
.glightbox-clean .gslide-media {
  box-shadow: none !important;
}


/* ==============================
   7. DIRECTION + ÉQUIPE (deux colonnes)
   ============================== */

/* Marges haut/bas de la section */
.direction-equipe {
  padding: 80px 0;
}

/* Photo de la direction, au-dessus du texte */
.direction-image {
  display: block;
  width: 66%;
  margin-bottom: 20px;
}

/* Crédit photo sous l'image de la direction */
.direction-credit {
  font-size: 0.75rem;
  color: #666;
  margin: -12px 0 20px;
}

/* Texte de la direction (justification : voir section 3) */
.direction-texte p {
  font-weight: 500;
  font-size: 1rem;
  color: #000;
}

/* Vignettes de l'équipe alignées à gauche dans leur colonne */
.equipe-colonne .og-grid {
  text-align: left;
  padding: 0;
}

/* Aperçu de l'équipe : s'ouvre sur toute la largeur des deux colonnes */
/* (l'aperçu se cale sur le premier parent positionné : on le déplace de la colonne à la rangée) */
.direction-equipe .equipe-colonne,
.direction-equipe .equipe-colonne .og-grid {
  position: static;
}
.direction-equipe .row {
  position: relative;
}

/* L'aperçu passe au-dessus de la colonne direction */
.direction-equipe .og-expander {
  z-index: 10;
}


/* ==============================
   8. ÉQUIPE : VIGNETTES, FILTRE VIOLET, APERÇU
   ============================== */

/* --- Nom et légende sous chaque photo --- */

/* Nom */
.vignette-equipe .equipe-nom {
  font-weight: 600;
  font-size: 1rem;
  color: #53109b;
  margin: 10px 0 0;
  text-align: left;
}

/* Légende (rôle) */
.vignette-equipe .equipe-legende {
  font-weight: 400;
  font-size: 0.85rem;
  color: #53109b;
  margin: 2px 0 0;
  text-align: left;
}

/* --- Filtre violet sur les photos --- */

/* Fond violet derrière chaque photo = couleur des zones sombres */
.vignette-equipe > a {
  display: block;
  background: #53109b;
}

/* Photo en noir et blanc, fusionnée avec le fond violet */
.vignette-equipe > a img {
  filter: grayscale(100%) contrast(0.9);
  mix-blend-mode: plus-lighter;
  transition: filter 0.3s;
}

/* Au survol : la photo retrouve ses vraies couleurs */
.vignette-equipe > a:hover img {
  filter: none;
  mix-blend-mode: normal;
}

/* --- Aperçu de l'équipe --- */

/* Image 1/3, texte 2/3 (les autres aperçus restent en moitiés) */
.direction-equipe .og-fullimg {
  width: 33.333% !important;
}
.direction-equipe .og-details {
  width: 66.666% !important;
  padding-left: 30px !important;   /* espace entre l'image et le texte */
  box-sizing: border-box !important;
}

/* Nom du membre (titre de l'aperçu) */
.direction-equipe .og-details h3 {
  font-weight: 900;
  font-style: normal;
  font-size: 1.33rem;
}

/* Texte de présentation */
.direction-equipe .og-details p {
  font-size: 1rem;
  line-height: 1.3;
}

/* Bouton (s'il est affiché) */
.direction-equipe .og-details a {
  font-size: 1rem;
}

/* --- Étiquettes des projets dans l'aperçu de l'équipe --- */
.og-details .equipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
  text-align: left !important;
}

/* Étiquette (lien ou simple texte) : petit cadre arrondi */
.og-details .equipe-tags .tag {
  display: inline-block;
  padding: 3px 10px !important;
  margin: 0 !important;
  border: 1px solid #b388ff !important;
  border-radius: 20px;
  font-size: 0.75rem !important;
  font-weight: 500;
  color: #fff !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Au survol (étiquettes avec lien) */
.og-details .equipe-tags a.tag:hover {
  background: #b388ff !important;
  color: #160644 !important;
}


/* ==============================
   9. PAGE PROJET (layouts/portfolio/single.html et layouts/crea/single.html)
   ============================== */

/* --- Mise en page générale --- */

/* Marges de la page : haut / côtés / bas */
.projet {
  padding: 20px 0 80px;
}

/* Largeur max du contenu (plus petit = plus de marge sur les côtés) */
.projet .container {
  max-width: 1200px;
}

/* --- Lien « ← Retour » --- */

/* Fixé à gauche de l'écran, reste visible au scroll */
.projet-retour {
  position: fixed;
  top: 130px;        /* sous le menu */
  left: 30px;
  z-index: 100;      /* passe au-dessus du contenu */
  font-weight: 600;
  color: #260649;
}
.projet-retour:hover {
  color: #7b2ff7;
  text-decoration: none;
}

/* Sur mobile : en bas à gauche, en petit bouton, pour ne pas recouvrir le texte */
@media (max-width: 991px) {
  .projet-retour {
    top: auto;
    bottom: 20px;
    left: 20px;
    background: #260649;
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
  }
}

/* --- Haut de page --- */

/* Titre (ex. GRAVISSIME 1) : grande marge en haut, sinon le menu fixe le recouvre */
.projet h1 {
  font-weight: 700;
  color: #260649;
  margin: 120px 0 30px;
}

/* Image (1/3) + introduction (2/3) côte à côte */
.projet-haut {
  margin-bottom: 60px;
  align-items: flex-start;   /* texte aligné en haut de l'image */
}

/* Image du projet : toute la largeur de sa colonne */
.projet-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Introduction (texte avant <!--more-->), mise en avant */
.projet-intro p {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}

/* --- Suite du texte --- */

/* Texte après <!--more--> (programme détaillé…) */
.projet-texte {
  margin-bottom: 60px;
}

/* --- Galerie en bas de page --- */

/* Grille de vignettes (le nombre de colonnes s'adapte à l'écran) */
.projet-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 40px;
}
.projet-galerie img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s;
}
.projet-galerie a:hover img {
  opacity: 0.8;
}


/* ==============================
   10. BLOCS PERFORMANCE (shortcode « projet » : image à gauche, texte à droite)
   ============================== */

/* Espace entre chaque performance + texte aligné en haut */
.projet-bloc {
  margin-bottom: 70px;
  align-items: flex-start;
}

/* Image de la performance */
.projet-bloc img {
  margin-bottom: 20px;
}

/* Titre de la performance (ex. TYZANE 8MM) : bold italique */
.projet-titre {
  font-weight: 700;
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: 5px;
}

/* Noms des artistes : semi-bold */
.projet-artistes {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0;
}

/* Type d'œuvre et année : regular */
.projet-infos {
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 20px;
}