/* =============================================================
   BLOC mission_pictos — Domaines d'intervention + méthode
   Port fidèle de .mission-extras (maquette 2026-06-10, style.css 1254-1410).
   Dépendances communes (NE PAS redéfinir) :
   - variables :root (--mission-stack-gap, --c-copper, --c-blue, --ff-body) → common.css
   - .section-statement / __intro / __item / __sep + reveal → common.css
   - animation de la conclusion → scroll-engine.js ([data-section-statement])

   Note archi K2 : sur la home, cette section est dans la .bg-fade-zone (fondu
   bleu nuit → bleu Master, cf. components.css + scroll-engine.js). Le fond
   solide ci-dessous est le FALLBACK hors-zone, neutralisé dans .bg-fade-zone.
   ============================================================= */

.mission-extras {
  position: relative;
  background: var(--c-bg-deep);   /* fallback hors-zone ; neutralisé dans .bg-fade-zone */
  color: #fff;
  /* Padding-top = --mission-stack-gap = espace identique aux gaps internes. */
  padding: var(--mission-stack-gap) 0 clamp(64px, 10vh, 140px);
}
.mission-extras__inner {
  display: flex;
  flex-direction: column;
  /* Gap uniforme entre TOUS les frères directs : titre1, pictos1, titre2,
     pictos2, section-statement. */
  gap: var(--mission-stack-gap);
  max-width: min(92vw, 1320px);
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 40px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Retour à la ligne réservé au mobile (masqué en desktop). Activé en @media. */
.br-mobile { display: none; }

.mission-pictos__title {
  text-align: center;
  font-family: var(--ff-body);
  font-size: clamp(1.15rem, 1.7vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-copper);
  margin: 0;
  line-height: 1.25;
  /* État initial : invisible + décalé. Animation pilotée frame par frame en JS
     (mission-pictos.js) selon la position dans le viewport. */
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
/* Espace supplémentaire avant le 2e titre-groupe (modif client). Le titre qui
   suit directement une grille de pictos reçoit une marge haute en plus du gap. */
.mission-pictos + .mission-pictos__title {
  margin-top: clamp(40px, 6vh, 96px);
}

/* Grille 3 colonnes avec column-gap réduit (icônes rapprochées). */
.mission-pictos {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(6px, 0.8vw, 18px);
  row-gap: clamp(24px, 4vh, 48px);
  align-items: start;
  width: 100%;
  max-width: min(86vw, 1080px);
}
.mission-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 24px);
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  letter-spacing: 0;
  line-height: 1.35;
  /* État initial : invisible + décalé (animé par mission-pictos.js). */
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  will-change: opacity, transform;
}
.mission-picto__label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  display: block;
  max-width: 22ch;
}
.mission-picto__label strong {
  display: block;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
/* Icônes des 6 pictos : rond goutte (= bouton scroll-up), fond BLANC, liseré
   DORÉ (cuivre), icône BLEU FONCÉ. */
.mission-picto__icon {
  width: clamp(84px, 7.2vw, 148px);
  height: clamp(84px, 7.2vw, 148px);
  border: 2px solid var(--c-copper);
  border-radius: 50% 50% 50% 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blue);
  background: #fff;
  flex-shrink: 0;
}
.mission-picto__icon svg {
  width: 56%;
  height: 56%;
}

/* =================== RESPONSIVE (≤ 1024px) =================== */
@media (max-width: 1024px) {
  /* Pictos en TRIANGLE pointe-bas : 2 icônes sur la 1ère ligne, la 3e centrée
     en dessous. Chaque groupe a exactement 3 pictos. */
  .mission-pictos {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(28px, 7vw, 44px);
    column-gap: clamp(16px, 5vw, 32px);
  }
  .mission-pictos .mission-picto:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50%;
  }
  .mission-pictos__title {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    line-height: 1.25;
  }
  .br-mobile { display: inline !important; }
}