/*
Theme Name: Belandscape V2
Theme URI: https://belandscape.ch
Author: Belandscape Studio
Author URI: https://belandscape.ch
Description: Thème officiel Belandscape — Architectes paysagistes & Urbanistes. Design épuré, palette ivoire/vert, typographie Nunito.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: https://belandscape.ch
Text Domain: belandscape
Tags: landscape, architecture, portfolio, custom-post-types, responsive
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — PALETTE BELANDSCAPE
   ============================================================ */
:root {
  --brand:       #345853;
  --brand-dark:  #263f3b;
  --brand-mid:   #4a7a74;
  --brand-sage:  #7aaa9e;
  --brand-mist:  #c2d8d5;
  --ivory:       #f5f2eb;
  --ivory-dark:  #ede8de;
  --sand:        #d6cdb8;
  --ochre:       #b5935a;
  --ink:         #1a2e2b;
  --ink-mid:     #3d5e5a;
  --ink-light:   #7a9e9a;

  /* Spacing */
  --pad-x:       52px;
  --pad-x-sm:    20px;

  /* Transitions */
  --tr:          .2s ease;
  --tr-slow:     .5s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ivory);
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--brand-sage);
}

.sec-title {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}

.sec-link {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--brand);
  border-bottom: 1px solid var(--brand-mist);
  padding-bottom: 2px;
  transition: color var(--tr);
}

.sec-link:hover {
  color: var(--brand-dark);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-primary {
  display: inline-block;
  padding: 13px 28px;
  background: var(--brand);
  color: var(--ivory);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
  transition: background var(--tr);
}

.btn-primary:hover {
  background: var(--brand-dark);
  color: var(--ivory);
}

.btn-ghost {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 2px;
  transition: color var(--tr), border-color var(--tr);
}

.btn-ghost:hover {
  color: var(--brand);
  border-color: var(--brand-mist);
}

/* ============================================================
   SCREEN-READER ONLY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================
   TEAM CARD — VERSION ANTI-CONFLIT
   ========================================================== */

.team-card {
    position: relative;
    perspective: 1200px;
}

/* CONTENEUR */
.team-card-inner {
    position: relative;
    width: 100%;
    height: 320px;

    transform-style: preserve-3d !important;
    transition: transform .7s ease;
}

/* HOVER */
.team-card:hover .team-card-inner {
    transform: rotateY(180deg);
}

/* FACES */
.team-card-front,
.team-card-back {
    position: absolute;
    inset: 0;

    display: flex;

    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    transform-style: preserve-3d !important;
}

/* FRONT */
.team-card-front {
    transform: rotateY(0deg);
    z-index: 2;

    align-items: flex-end;

    background: linear-gradient(
        160deg,
        #4d756d 0%,
        #345853 45%,
        #2b4743 100%
    );
    color: var(--ivory);
}

/* LA BANDE DÉGRADÉE */
.team-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Dégradé du transparent vers le sombre en bas */
    background: linear-gradient(
        to bottom, 
        transparent 50%, 
        rgba(26, 46, 43, 0.8) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* BACK */
.team-card-back {
    transform: rotateY(180deg);

    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    background: linear-gradient(
        160deg,
        #4d756d 0%,
        #345853 45%,
        #2b4743 100%
    );

    color: #F5F2EB;
    display: flex;
    padding: 20px;
}

/* IMAGE */
.team-card-front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    pointer-events: none;
}

/* TEXTE BACK */
.team-card-back .back-quote {
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
    max-width: 95%;
    justify-content: center;
    text-align: center;
}

/* Agrandir l'émoji */
.back-emoji {
    font-size: 50px; /* Ajuste la taille selon ton envie */
    margin-bottom: 10px;
}

/* Style du nom sur la face arrière */
.back-name {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    color: var(--ivory);
}

/* Style du nom sur la face arrière */
.back-name {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    color: var(--ivory);
}

/* Décaler le texte du bord (Nom, Role, Badge) */
.card-front-content {
    padding: 30px; /* Augmente cette valeur pour décaler davantage du bord */
    width: 100%;
    z-index: 2;
    position: relative;
}

/* Style pour le remplaçant de l'image (Initiales) */
.no-photo-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* On utilise un dégradé de ta palette pour le fond */
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
    color: var(--ivory);
    z-index: 0;
}

.no-photo-initials span {
    font-size: 80px; /* Taille des initiales */
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0.3; /* Effet élégant en filigrane */
    text-transform: uppercase;
}

/* Conteneur de la grille (nom utilisé dans ton front-page.php) */
.home-proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
  grid-auto-rows: 280px;                /* Hauteur fixe pour l'équilibre visuel */
  gap: 24px;
  padding: 0 var(--pad-x);
  margin-bottom: 60px;
}

/* Les petites vignettes */
.proj-card.proj-card-small {
  grid-column: span 1;
  grid-row: span 1;
}

/* Les grosses vignettes (2 colonnes de large, 2 lignes de haut) */
.proj-card.proj-card-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* IMPORTANT : Forcer l'image à remplir tout l'espace de la grande case */
.proj-card.proj-card-large .proj-card-img, 
.proj-card.proj-card-large .proj-card-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Responsive : On repasse en 1 colonne sur mobile */
@media (max-width: 768px) {
  .home-proj-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .proj-card.proj-card-large, 
  .proj-card.proj-card-small {
    grid-column: span 1;
    grid-row: span 1;
  }
}}

/* ============================================================
   DESIGN CARTE PROJET (Vignette)
   Titres blancs sur image avec dégradé
   ============================================================ */

/* --- Correction de la Carte --- */
.proj-card {
    position: relative;
    height: 100%;
    min-height: 280px; /* Force une hauteur minimum */
    background: #000;  /* Fond noir pour que le dégradé ressorte mieux */
}

.proj-card-inner {
    display: block;
    height: 100%;
    position: relative;
}

/* Supprimer la bande ivoire */
.proj-card .proj-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: none !important; /* SUPPRIME LE FOND IVOIRE */
    padding: 30px 24px !important;
    z-index: 5;
    color: #ffffff !important; /* Force le texte en blanc */
}

/* Forcer le texte en blanc */
.proj-card .proj-name, 
.proj-card .proj-cat, 
.proj-card .proj-loc {
    color: #ffffff !important;
}

/* Création du dégradé noir par-dessus l'image */
.proj-card-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dégradé de rien vers noir sur le tiers bas de l'image */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
}

/* On s'assure que l'image prend toute la place */
.proj-card-img {
    width: 100%;
    height: 100%;
}

.proj-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Suppression de l'ancienne bande grise/verte au survol --- */

/* On désactive l'ancien arrière-plan au survol */
.proj-card-inner:hover {
    background: none !important;
}

/* Optionnel : Un bel effet de zoom léger sur l'image au survol */
.proj-card:hover .proj-card-img img {
    transform: scale(1.05);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Transition fluide pour l'image */
.proj-card-img img {
    transition: transform 0.6s ease;
}

/* On s'assure que l'overlay dégradé ne change pas de couleur */
.proj-card-inner:hover .proj-card-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%) !important;
}

/* Si tu avais un masque de couleur qui s'activait, on le neutralise */
.proj-card-inner::before, 
.proj-card-inner::after {
    display: none !important; /* Supprime les éléments décoratifs fantômes */
}

/* --- Correction de la Carte Projet (Nettoyage Final) --- */

/* 1. On s'assure que le bloc d'infos prend toute la hauteur pour flotter par-dessus */
.proj-card .proj-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Prend toute la hauteur */
    background: transparent !important; /* Force le fond transparent (pas d'ivoire) */
    
    /* On place le texte en bas de ce grand bloc */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pousse le texte en bas */
    
    padding: 30px !important;
    color: #ffffff !important; /* Force le texte en blanc */
    z-index: 5;
}

/* 2. C'est ICI qu'on supprime la bande verte/grise de la capture d'écran */
.proj-card .proj-info::before, 
.proj-card .proj-info::after {
    display: none !important; /* MASQUE TOUTES LES ANCIENNES BANDES GÊNANTES */
    content: none !important;
}

/* 3. On force les titres en blanc */
.proj-card .proj-name, 
.proj-card .proj-cat, 
.proj-card .proj-loc {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Légère ombre pour la lisibilité */
}

/* 4. On s'assure que le dégradé noir est bien en place sur l'image */
.proj-card-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dégradé de transparent vers noir sur le tiers bas */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
}