/* ============================================================
   BLOC governance_board — Gouvernance, trio de portraits (03 / 05)
   Port fidèle de .governance / .board-card (maquette 2026-06-10).

   Ce fichier ne contient QUE le visuel propre au bloc.
   Mutualisé dans common.css (ne PAS redéfinir ici) :
     - .section-num (base mono cuivre)
     - le reveal .board-card.is-in-view + [data-scrub] > * (états cachés)
     - .section-statement / --light + ses fragments
     - [data-title-wipe] .mission-line / __phrase / __wipe, [data-lead-slide]
   ============================================================ */
.governance {
  padding: var(--pad-section) 0;
  background: var(--c-bg-cream);
}
/* Marge propre au numéro de section dans ce bloc (la base est dans common.css). */
.governance .section-num {
  margin-bottom: clamp(20px, 3vh, 40px);
}
.governance__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-blue);
  margin: 0 0 clamp(16px, 2vh, 28px);
  /* 24ch (≈ 1140px au pic de taille) au lieu du 18ch de la maquette source :
     les lignes du titre sont des .mission-line en white-space:nowrap +
     overflow:hidden, et la ligne 1 « Une gouvernance garante » (≈ 20ch
     rendus) dépassait 18ch → le « te » de « garante » était rogné.
     24ch laisse de la marge pour FR/EN sans approcher la largeur du .wrap. */
  max-width: 24ch;
}
/* Mot-clé en Playfair italic cuivre (ligne 2, emphase). */
.governance__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
}
.governance__lead {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 60ch;
  margin: 0 0 clamp(60px, 8vh, 100px);
}
.governance__board {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(60px, 8vh, 100px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.board-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: clamp(24px, 3vh, 36px) 0;
  position: relative;
  border-top: 1px solid rgba(142, 117, 71, 0.25);
  transition: border-color 0.4s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.board-card:hover { border-top-color: var(--c-copper); }
.board-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(142, 117, 71, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(142, 117, 71, 0.2);
  border-bottom-right-radius: clamp(40px, 6vw, 90px);
  /* overflow visible : le bouton LinkedIn peut chevaucher le bord bas. */
  overflow: visible;
  transition: background 0.4s, border-color 0.4s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.board-card:hover .board-card__photo {
  background: rgba(142, 117, 71, 0.15);
  border-color: var(--c-copper);
}
.board-card__initials {
  font-family: var(--ff-mono);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  letter-spacing: 0.15em;
  color: var(--c-copper);
  font-weight: 500;
}
/* Vraie photo : remplit le carré, suit le coin bas-droit arrondi, reste sous le
   bouton LinkedIn. La carte garde overflow:visible pour le bouton qui déborde :
   le zoom est clippé via un masque local sur le conteneur de l'image. */
.board-card__photo--has-img {
  background: transparent;
}
.board-card__img-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-bottom-right-radius: clamp(40px, 6vw, 90px);
}
.board-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
  /* Désaturation LÉGÈRE au repos (pas de N&B total) + image douce. */
  filter: grayscale(0.32) saturate(0.92) contrast(1.01);
  transform: scale(1.001); /* base pour un zoom net au survol */
  transition: filter 0.6s cubic-bezier(0.24, 0.43, 0.15, 0.97),
              transform 0.7s cubic-bezier(0.24, 0.43, 0.15, 0.97);
  will-change: transform;
}
.board-card:hover .board-card__img {
  filter: grayscale(0) saturate(1) contrast(1.02);
  transform: scale(1.06); /* léger zoom au rollover */
}
.board-card__name {
  margin: clamp(20px, 2.8vh, 34px) 0 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  color: var(--c-blue);
  letter-spacing: -0.01em;
}
.board-card__role {
  margin: clamp(2px, 0.4vh, 5px) 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--c-copper);
}
/* Bouton LinkedIn forme Scale : chevauche la PHOTO en bas-droite, AVANT la
   courbure du coin (décalé à gauche de la courbure border-bottom-right-radius). */
.board-card__linkedin-shape {
  position: absolute;
  z-index: 2;
  bottom: clamp(-14px, -1.4vh, -10px);
  right: clamp(40px, 6vw, 90px);
  width: clamp(44px, 4.4vw, 60px);
  height: clamp(44px, 4.4vw, 60px);
  border-radius: 50% 50% 50% 0;
  background: var(--c-copper);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(10, 22, 38, 0.18);
  transition: background 0.4s cubic-bezier(0.24, 0.43, 0.15, 0.97),
              transform 0.4s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.board-card__linkedin-shape:hover {
  background: #a08754;
  transform: scale(1.05);
}
.board-card__linkedin-shape svg {
  width: 48%;
  height: 48%;
}

/* --- Responsive (seuil unifié 1024px : tablette = mobile) --- */
@media (max-width: 1024px) {
  .governance__board { grid-template-columns: 1fr; gap: 0; }
  /* Sécurité titre sur petits écrans : au plancher de taille (2rem), une ligne
     comme « Une gouvernance garante » peut dépasser la largeur dispo. Les
     .mission-line étant en nowrap + overflow:hidden, le texte serait rogné.
     On autorise le retour à la ligne (même approche que .hero__title mobile
     dans la maquette) → la bande wipe couvre la ligne sur sa hauteur réelle. */
  .governance__title { max-width: 100%; }
  .governance__title .mission-line { width: 100%; max-width: 100%; height: auto; }
  .governance__title .mission-line__phrase { white-space: normal; }
}
/* Tablette 600-1024px : 2 colonnes (le desktop 3 col > 1024px reste intact). */
@media (min-width: 600px) and (max-width: 1024px) {
  .governance__board { grid-template-columns: repeat(2, 1fr); }
}
/* Désactivation des effets hover sur écrans tactiles (évite états collés iOS/Android). */
@media (hover: none) {
  .board-card:hover { border-top-color: rgba(142, 117, 71, 0.25); }
  .board-card:hover .board-card__photo {
    background: rgba(142, 117, 71, 0.08);
    border-color: rgba(142, 117, 71, 0.2);
  }
}