/* ============================================================
   STYLE-PROJETS.CSS — Styles propres à la page projets
   Contient : en-tête de page, grille de projets, cartes
   ============================================================ */


/* ── 1. EN-TÊTE DE PAGE ──────────────────────────────────── */

.page-entete {
  padding    : 10rem 3rem 5rem;
  border-bottom : 1px solid var(--bordure);
}

.page-surtitre {
  font-size      : 0.65rem;
  font-weight    : 600;
  letter-spacing : 0.25em;
  text-transform : uppercase;
  color          : var(--or);

  display     : flex;
  align-items : center;
  gap         : 1rem;
  margin-bottom : 1.5rem;
}

.page-surtitre::before {
  content    : '';
  width      : 2.5rem;
  height     : 1px;
  background : var(--or);
  display    : block;
  flex-shrink: 0;
}

.page-titre {
  font-family    : var(--police-serif);
  font-size      : clamp(2.8rem, 5vw, 5rem);
  font-weight    : 300;
  line-height    : 1.1;
  color          : var(--texte);
}

.page-titre em {
  font-style : italic;
  color      : var(--or);
}


/* ── 2. GRILLE DE PROJETS (MODIFIÉE EN 2 COLONNES) ─────────
   Affichage propre et moderne sur 2 colonnes égales.
   ─────────────────────────────────────────────────────────── */

.projets-contenu {
  padding : 5rem 3rem;
}

.grille-projets {
  display               : grid;
  grid-template-columns : 1fr 1fr;    /* 2 colonnes parfaitement égales */
  gap                   : 2px;       /* Augmenté l'espacement  */
}


/* ── 3. CARTE PROJET ─────────────────────────────────────── */

.carte-projet {
  position   : relative;
  overflow   : hidden;
  background : var(--bg-carte);
  cursor     : pointer;
}

/* Les variantes d'extensions asymétriques ont été désactivées 
   pour garantir la structure stricte à 2 colonnes */
.carte-projet.haute {
  grid-row : span 1;
}

.carte-projet.large {
  grid-column : span 1;
}

/* Contenu visuel de la carte */
.carte-visuel {
  width       : 100%;
  height      : 100%;
  min-height  : 450px; /* Augmenté pour donner un aspect de catalogue premium en 2 colonnes */
  position    : relative;
  transition  : transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Uniformisation des hauteurs pour éviter les décalages */
.carte-projet.haute .carte-visuel  { min-height: 450px; }
.carte-projet.large .carte-visuel  { min-height: 450px; }

/* Zoom léger au survol */
.carte-projet:hover .carte-visuel {
  transform : scale(1.03);
}

/* ── Motif décoratif en fond de chaque carte ─────────────── */

.carte-motif {
  position : absolute;
  inset    : 0;
  opacity  : 0.4;
}

.carte-projet[data-projet="peronesis"] .carte-motif {
  background : repeating-linear-gradient(
    -55deg,
    transparent, transparent 18px,
    rgba(155, 111, 212, 0.07) 18px,
    rgba(155, 111, 212, 0.07) 19px
  );
}

.carte-projet[data-projet="apollon"] .carte-motif {
  background :
    radial-gradient(ellipse at 60% 40%, rgba(155, 111, 212, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(155, 111, 212, 0.06) 0%, transparent 50%);
}

.carte-projet[data-projet="projet-3"] .carte-motif {
  background :
    repeating-linear-gradient(0deg,   transparent, transparent 22px, rgba(155, 111, 212, 0.06) 22px, rgba(155, 111, 212, 0.06) 23px),
    repeating-linear-gradient(90deg,  transparent, transparent 22px, rgba(155, 111, 212, 0.06) 22px, rgba(155, 111, 212, 0.06) 23px);
}

/* Label centré visible avant le survol */
.carte-label-placeholder {
  position   : absolute;
  inset      : 0;
  display    : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap        : 0.5rem;
  z-index    : 1;
}

.placeholder-lettre {
  font-family  : var(--police-serif);
  font-size    : 4rem;
  font-weight  : 300;
  font-style   : italic;
  color        : rgba(155, 111, 212, 0.2);
  line-height  : 1;
}

.placeholder-hint {
  font-size      : 0.6rem;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : rgba(155, 111, 212, 0.15);
}


/* ── 4. OVERLAY AU SURVOL ────────────────────────────────── */

.carte-overlay {
  position    : absolute;
  inset       : 0;
  background  : rgba(16, 12, 20, 0.88);

  display         : flex;
  flex-direction  : column;
  justify-content : flex-end;
  padding         : 2rem;

  opacity    : 0;
  transition : opacity 0.35s ease;
  z-index    : 2;
}

.carte-projet:hover .carte-overlay {
  opacity : 1;
}

.overlay-categorie {
  font-size      : 0.6rem;
  font-weight    : 600;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  color          : var(--or);
  margin-bottom  : 0.5rem;
}

.overlay-nom {
  font-family   : var(--police-serif);
  font-size     : 1.8rem;
  font-weight   : 300;
  color         : var(--texte);
  line-height   : 1.1;
  margin-bottom : 0.5rem;
}

.overlay-description {
  font-size   : 0.8rem;
  color       : var(--texte-attenue);
  line-height : 1.5;
}


/* ── 5. BAS DE PAGE ──────────────────────────────────────── */

.projets-pied {
  margin-top  : 4rem;
  padding-top : 3rem;
  border-top  : 1px solid var(--bordure);
  text-align  : center;
}

.projets-pied-label {
  font-size      : 0.65rem;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--texte-attenue);
  margin-bottom  : 1.5rem;
}


/* ── 6. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {

  .page-entete,
  .projets-contenu {
    padding : 8rem 1.5rem 3rem;
  }

  /* Sur mobile : on passe sur 1 seule colonne */
  .grille-projets {
    grid-template-columns : 1fr;
    gap : 16px;
  }

  .carte-visuel,
  .carte-projet.haute .carte-visuel,
  .carte-projet.large .carte-visuel {
    min-height : 350px; /* Un poil plus court sur mobile pour éviter de trop scroller */
  }
}