/* SOLOMUND — Bandeaux visuels de campagne (parts/visuel.php).
   Variante A validée : cartouche au-dessus du titre (convention du site),
   titre bicolore, chapô, image pleine largeur de la grille, ligne de base.
   Feuille séparée, chargée APRÈS site.css et custom.css (functions.php).
   site.css est du Tailwind compilé : on n'y touche jamais.

   Couleur de la seconde ligne du titre : le bleu du site (--blue), que
   custom.css a basculé sur le bleu foncé retenu. Pour revenir au bleu
   vif des affiches, une seule ligne : --visuel-bleu: #315cff; */
:root {
  --visuel-bleu: var(--blue, #315cff);
}

/* Espacement : le bandeau ne prend PAS de rembourrage haut. Il est posé
   sous une section sur fond papier qui porte déjà son rembourrage bas
   (« Notre conviction », « Trois regards », héros Formation) ; sans cela
   les deux rembourrages s'additionnent (150 + 120 px).
   Exception : .visuel-apres-bande, posé sous une section à fond propre
   (« Souveraineté », fond gris) : rembourrage haut, aucun en bas, la
   section suivante (« Exemples d'applications ») porte l'écart. */
.visuel {
  display: grid;
  gap: 32px;
  padding: 0 0 60px;
}
.visuel.visuel-apres-bande {
  padding: 60px 0 0;
}

.visuel-head {
  display: grid;
  gap: 20px;
}
.visuel .section-kicker {
  margin: 0;               /* site.css lui ajoute 36 px en bas : le gap suffit */
}

.visuel-titre {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(2.1rem, 6.2vw, 5rem);
  color: var(--ink, #141515);
}
/* Chaque partie du titre est une ligne (bloc) ; un "\n" dans le texte
   force un retour (<br>). Aucune largeur maximale ni équilibrage : sur
   bureau, les lignes tombent exactement là où le texte les coupe.
   Sur mobile, une ligne trop longue pour l'écran passe à la ligne. */
.visuel-titre span { display: block; }
.visuel-titre .visuel-bleu { color: var(--visuel-bleu); }

.visuel-chapo {
  margin: 0;
  max-width: 720px;
  font-size: 1.15rem;      /* même corps que le texte de « Une relation de confiance » */
  line-height: 1.6;
}

.visuel-image { margin: 0; }
.visuel-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2080 / 1125;
  object-fit: cover;
}

.visuel-base {
  display: grid;
  gap: 4px;
  font-size: .9rem;
  opacity: .7;
  margin-top: -12px;
}

@media (min-width: 801px) {
  .visuel {
    gap: 48px;
    padding: 0 0 120px;
  }
  .visuel.visuel-apres-bande {
    padding: 120px 0 0;
  }
  .visuel-base {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 32px;
    margin-top: -24px;
  }
}

/* Mobile : pas de recadrage. Le boîtier noir, point d'arrivée du fil
   bleu, est au bord droit des quatre visuels : un recadrage le coupe. */