/* ==========================================================
   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;
}
/* --- Grilles événements / projets : vignettes sur toute la largeur de la colonne --- */
/* 3 par ligne sur ordinateur, 2 sur tablette, 1 sur téléphone */
#crea .og-grid,
#portfolio .og-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;       /* l'aperçu ouvert n'étire pas les autres vignettes de la ligne */
  margin: 0 !important;
}
#crea .og-grid li,
#portfolio .og-grid li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}
#crea .og-grid li > a img,
#portfolio .og-grid li > a img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  #crea .og-grid,
  #portfolio .og-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  #crea .og-grid,
  #portfolio .og-grid {
    grid-template-columns: 1fr;
  }
}
/* Annule les marges négatives de la rangée Bootstrap autour des vignettes
   → vignettes alignées sur la colonne, comme les titres et l'aperçu */
#crea .portfolio-holder,
#portfolio .portfolio-holder {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Titres de section alignés sur le bord des vignettes */
#crea .portfolio-holder > .col-12,
#portfolio .portfolio-holder > .col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

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

/* --- Le panneau --- */
/* Ordinateur : 2 colonnes (photos 1/3 Ã  gauche, texte 2/3 Ã  droite)
   Téléphone  : couverture, puis texte, puis galerie (voir la fin de cette section)
   Dans les deux cas, UN SEUL défilement pour l'ensemble photos + texte */

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

/* Contenu du panneau : 2 colonnes côte à côte, un seul défilement */
/* (la hauteur du panneau est fixée par le script : on fait défiler l'intérieur) */
.og-expander-inner {
  box-sizing: border-box !important;
  height: 100% !important;
  padding: 50px 40px !important;
  overflow-y: auto !important;
  display: flex !important;
  align-items: flex-start;
  gap: 40px;
}

/* --- Colonne de gauche : couverture + crédit + galerie (crea) --- */

.og-fullimg {
  display: block !important;
  flex: 0 0 33.333%;
  width: 33.333% !important;
  height: auto !important;
  float: none !important;
  overflow: visible !important;
}

/* Photo de couverture : toute la largeur de la colonne, clic = agrandir */
.og-fullimg > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* Crédit sous la couverture (nom du fichier, ou credit: dans le .md) */
.og-credit {
  text-align: left;
  font-size: 0.75rem;
  color: #603d9d;
  margin: 8px 0 0;
}

/* Galerie sous la couverture (crea) : 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 * 110) */
.og-galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
}

/* 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 --- */

/* Le texte prend le reste de la largeur ; pas de défilement séparé */
.og-details {
  flex: 1 1 auto;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  float: none !important;
  padding: 0 !important;
}

/* 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;
}

/* --- Aperçu sur téléphone et petite tablette --- */
/* une seule colonne, dans l'ordre : couverture, crédit, texte, galerie
   (display: contents « déplie » la colonne photos pour pouvoir glisser le texte au milieu) */
@media (max-width: 830px) {
  .og-expander-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 30px 20px !important;
  }
  .og-fullimg {
    display: contents !important;
  }
  /* Couverture et son crédit masqués : la vignette juste au-dessus montre déjà la photo
     (elle reste dans l'agrandissement, en 1re position du diaporama) */
  .og-fullimg > img,
  .og-credit {
    display: none !important;
  }
  .og-details {
    order: 3;
    width: 100% !important;
    margin-top: 20px;
  }
  .og-galerie {
    order: 4;
    margin-top: 20px;
  }
  .og-details h3 {
    font-size: 1.3rem;
  }
}
/* Ordinateur : le CONTENU de l'aperçu (photos + texte) a la même largeur
   que la colonne de la page ; seul le fond bleu va d'un bord à l'autre */
@media (min-width: 831px) {
  .og-expander-inner {
    max-width: var(--largeur-site);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* --- Flèches projet précédent / suivant dans l'aperçu (crea uniquement) --- */
.og-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  padding: 10px 20px;
  background: none;
  border: 0;
  color: #b388ff;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.og-fleche:hover { opacity: 1; }
.og-fleche:focus { outline: none; }
.og-fleche-prec { left: 10px; }
.og-fleche-suiv { right: 10px; }

/* Téléphone : flèches en bas du panneau, pour ne pas recouvrir le texte */
@media (max-width: 830px) {
  .og-fleche {
    top: auto;
    bottom: 10px;
    transform: none;
    font-size: 2.2rem;
  }
}

/* Croix de fermeture de l'aperçu */
.og-close::before,
.og-close::after {
  background: #b388ff !important;
}
.og-close:hover::before,
.og-close:hover::after {
  background: #ffffff !important;   /* couleur au survol */
}


/* ==============================
   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: 0.9rem;
  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 --- */
/* (la mise en page 1/3 – 2/3 est commune à tous les aperçus : voir section 5) */

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

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

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

/* --- Étiquettes des projets dans l'aperçu de l'équipe (projets: dans le .md du membre) --- */
.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;
}

/* ==============================
   11. MENU
   ============================== */

/* --- Ordinateur (992 px et plus) --- */
@media (min-width: 992px) {

  /* Barre toujours transparente, même au défilement */
  .menu-container,
  .menu-container-transparent,
  .menu-normal {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Liens du menu : HAUT*/
  .menu-item a {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase;      /* none = tel qu'écrit dans hugo.toml */
    letter-spacing: 0.05em;
    color: #ffffff !important;      /* couleur une fois la page défilée (sur fond clair) */
  }

  /* Liens menu en dessous du fond de démarrage */
  .menu-item-transparent.menu-item a {
    color: #b388ff !important;
    text-shadow: 0 1px 4px rgba(255, 140, 0, 0.8);
  }

  /* Soulignement au survol : HAUT */
  .desktop-menu .hvr-underline-from-left:before {
    background: #ffffff !important;
  }

  /* Soulignement au survol : en dessous du fond de démarrage */
  .desktop-menu .menu-item-transparent.hvr-underline-from-left:before {
    background: #b388ff !important;
  }
}

/* --- Téléphone et tablette (moins de 992 px) --- */
@media (max-width: 991px) {

  /* Barre du haut (logo + bouton menu) */
  .mobile-menu {
    background: #ffffff !important;
  }

  /* Panneau qui s'ouvre au toucher du bouton menu */
  .menu-slider {
    background: transparent !important;
  }

  /* Liens du panneau */
  .mobile-menu-list a,
  .mobile-menu-item a {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    color: #b388ff !important;
    text-shadow: 0 1px 4px rgba(255, 140, 0, 0.8);
 
  }

  /* Icônes des réseaux sociaux du panneau */
  .mobile-menu-icons .fa,
  .mobile-menu-icons .fab,
  .mobile-menu-icons .fas {
    color: #b388ff !important;
  }
}

  /* Bouton du menu mobile : barres (menu fermé) et croix (menu ouvert) */
  .mobile-menu-nav .menu-link span,
  .mobile-menu-nav .menu-link span::before,
  .mobile-menu-nav .menu-link span::after {
    background-color: #b388ff !important;
  }
  .mobile-menu-nav .menu-link,
  .mobile-menu-nav .menu-link i {
    color: #b388ff !important;   /* si le bouton est une icône (police) */
  }

/* ==============================
   12. BANDEAU D'ACCUEIL (hero)
   ============================== */

/* Téléphone : phrase sous « GRAVE » affichée en entier, SANS animation
   (l'animation « clip » faisait varier la hauteur du bandeau → la page sautait) */
@media (max-width: 767px) {
  .cd-headline.clip .cd-words-wrapper {
    width: auto !important;        /* annule la largeur animée par le script */
    overflow: visible !important;
  }
  .cd-headline.clip .cd-words-wrapper::after {
    display: none !important;      /* masque le curseur clignotant */
  }
  .cd-headline.clip b {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;   /* la phrase peut passer sur 2 lignes, sans bouger */
  }
}

/* Voile par-dessus l'image de fond du bandeau d'accueil */
/* rgba(rouge, vert, bleu, intensité) : intensité 0 = aucun voile, 1 = couleur pleine */
.header::after {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* L'image de fond elle-même : pleinement opaque, sans filtre */
.hero-image img {
  opacity: 1 !important;
  filter: none !important;
}

/* Canvas de l'effet « grille de pixels », posé exactement sur l'image de fond */
.grille-pixels {
  position: absolute;
  display: block;
  pointer-events: none;   /* ne bloque ni les clics ni le défilement */
}