/* =============================================================================
   BIG-BLOCK.CSS – 📦 Sections "hero / about / cards"
   Harmonisé le 2025-07-04
   -----------------------------------------------------------------------------
   ✔ Palette alignée sur base.css (usage de --text-color, --text-light, --bg-light)
   ✔ Indentation / commentaires uniformisés
   ✔ Aucun renommage de classe (compatibilité HTML totale)
   ✔ Keyframes conservées (évite les régressions JS/IntersectionObserver)
   ---------------------------------------------------------------------------*/

/* ────────────────────────────────────────────────────────────────────────────
   1 · BLOCK BASE
   Mobile-first · Dark par défaut
   ───────────────────────────────────────────────────────────────────────── */
.big-block {
  margin: 4rem auto;
  padding: 2rem 1rem;
  max-width: 960px;
  width: 90%;
  line-height: 1.7;
  text-align: left;
  color: var(--text-color);               /* ex-#f0f0f0 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · LIGHT THEME (texte + bg par défaut)
   ───────────────────────────────────────────────────────────────────────── */
html.light .big-block {                       /* Texte uniquement */
  color: var(--text-light);                   /* ex-#222 */
}

/* 2-bis | Option : garder le gradient bleu en mode clair
         Ajoute .keep-gradient sur le block. */
html.light .big-block.keep-gradient {
  background: linear-gradient(135deg, #eaf6ff 0%, #ffffff 60%);
}

/* 2-ter | Fond par défaut pour TOUS les autres blocks */
html.light .big-block:not(.keep-gradient) {
  background: var(--bg-light);                /* ex-#fff → variable */
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · THÉMATIQUE (variant sombre + ombre)
   ───────────────────────────────────────────────────────────────────────── */
.bg-block-theme {
  background: linear-gradient(135deg, #1e1e2f, #292947);
  box-shadow: 0 8px 24px rgb(0 0 0 / .20);
  border-radius: 12px;
}
html.light .bg-block-theme {
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / .05);
  transition: background .3s ease, box-shadow .3s ease;
}

/* ────────────────────────────────────────────────────────────────────────────
   4 · CONTENU HELPERS
   ───────────────────────────────────────────────────────────────────────── */
.big-block p         { font-size: 1.05rem; margin-bottom: 1rem; }
.big-block img       {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgb(0 0 0 / .15);
  transition: transform .3s ease;
}
.big-block img:hover { transform: scale(1.01); }
.big-block img:focus { outline: 2px solid #3498db; outline-offset: 4px; }

/* ────────────────────────────────────────────────────────────────────────────
   4-bis · HERO IMAGE – effet grayscale → couleur + zoom au hover
   ──────────────────────────────────────────────────────────────────────────── */
.hero-image img,
.portrait-grayscale {
  /* image initialement en niveaux de gris */
  filter: grayscale(1);
  transition: filter .4s ease, transform .4s ease;
}

.hero-image:hover img,
.hero-image:hover .portrait-grayscale {
  /* passage à la couleur + léger zoom */
  filter: grayscale(0);
  transform: scale(1.02);
}

/* ────────────────────────────────────────────────────────────────────────────
   5 · ANIMATIONS
   ───────────────────────────────────────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .8s ease-out forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────────────────
   6 · RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
/* Tablet ≤ 768 px */
@media (max-width: 768px) {
  .big-block   { padding: 2rem 1rem; }
  .big-block p { font-size: 1rem; }
}
/* Mobile ≤ 480 px */
@media (max-width: 480px) {
  .big-block   { padding: 1rem; }
  .big-block p { font-size: .9rem; }
}

/* Grayscale-to-color hover effect */
.big-block .hero-photo.portrait-grayscale {
  filter: grayscale(1);
  transition: filter .4s ease, transform .3s ease;
}

.big-block .hero-photo.portrait-grayscale:hover {
  filter: grayscale(0);
  transform: scale(1.02); /* léger zoom au hover */
}

/* ===================================================================
   HERO : filtre grayscale → couleur + léger zoom au hover
   =================================================================== */

/* 1. État initial de l’image */
.big-block .hero-photo.portrait-grayscale {
  filter: grayscale(100%);
  transform: scale(1);
  /* on prévient le navigateur qu’on va animer ces propriétés */
  will-change: filter, transform;
  /* transition sur filtre ET transform */
  transition: filter 0.5s ease-out, transform 0.3s ease-out;
}

/* 2. Au survol de la zone image (toute la div .hero-image) */
.big-block .hero-image:hover .hero-photo.portrait-grayscale {
  filter: grayscale(0);
  transform: scale(1.02);
}