/*
 * ESSAI 11/09/2026 - miroir local uniquement.
 * Bandeau clair photographique pour la page la-sageocratie.
 * Principe : le bleu nuit quitte le fond et passe dans la lettre.
 * Charge seulement sur cette page par functions.php (bloc ESSAI).
 *
 * Methode Irrinium (reglage du 11/09) : la HAUTEUR du bandeau reste celle de
 * tout le site. L'image est preparee pour lui : recadree en 3:1 sur le cercle
 * de chaises, et le filtre clair est INTEGRE AU FICHIER (blanc froid), comme
 * les bandeaux d'Irrinium. Aucun voile ajoute ici : l'image est deja claire.
 */

.sc-hero {
  background-color: #EEF2F6;                 /* repli tant que la photo manque */
  background-image: url(../images/essai/la-sageocratie-ecoute-hk.jpg);   /* ecoute en haute lumiere (04), blanc Irrinium 25 % ; ancienne 03 blanc 78 % : la-sageocratie-ecoute-blanc.jpg ; ivoire 78 % : la-sageocratie-ecoute-clair.jpg ; version 64 % : la-sageocratie-ecoute.jpg ; chaises 62 % : la-sageocratie-bandeau-62.jpg */
  background-size: cover;
  background-position: center 30%;           /* visages entiers sur grand ecran */
  color: #0E2040;
  border-bottom: 1px solid #0E2040;          /* filet bleu nuit d un pixel (choix de Yannick, 11/09) */
}
.sc-hero::before { display: none; }           /* retire le voile bleu nuit */

/* telephone : le bandeau est trop etroit pour les deux personnes ; on garde celle qui ecoute */
@media (max-width: 767px) { .sc-hero { background-position: 14% 50%; } }

.sc-hero__eyebrow {   /* eyebrow-halo */
  color: rgba(14,32,64,.70);
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.85), 0 0 36px rgba(255,255,255,.6);
  border-bottom-color: rgba(14,32,64,.22);
}

.sc-hero__title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #0E2040;
  color: #0E2040;
  text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.85), 0 0 48px rgba(255,255,255,.6);   /* halo renforce : lecture sure avec un voile plus leger */
}

/* sous-titre-lisible (11/09 soir, valide par Yannick) : graisse moyenne au lieu de fine,
   bleu nuit plein, un peu plus grand, largeur reduite pour rester dans l ovale du voile.
   font-style normal !important : la page le-livre ecrit l italique en style inline. */
.sc-hero__subtitle,
.sc-hero--sm .sc-hero__subtitle {
  color: #0E2040;
  font-weight: 500;
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-style: normal !important;
  max-width: 760px;
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.85), 0 0 36px rgba(255,255,255,.6);
}

/* citation et chapeau du bandeau : le theme les peint en blanc, invisibles sur fond clair */
.sc-hero__citation {
  color: rgba(14,32,64,.72);
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.85), 0 0 36px rgba(255,255,255,.6);
}
.sc-hero__lead {
  /* !important : sur l accueil, front-page.php ecrit la couleur blanche en style inline */
  color: rgba(14,32,64,.84) !important;
  text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.85), 0 0 36px rgba(255,255,255,.6);
}

/* hauteur-bandeau-1109 : bandeau un peu plus haut sur ordinateur (demande de Yannick),
   surtout sous le texte, pour montrer ce que font les personnes. A appliquer a TOUS
   les bandeaux des pages interieures lors de la mise en ligne (hauteur constante). */
@media (min-width: 768px)  { .sc-hero--sm { padding: 5rem 0 5rem; } }
@media (min-width: 1200px) { .sc-hero--sm { padding: 6rem 0 7rem; } }

/* hauteur-accueil-1209 (demande de Yannick) : TOUS les bandeaux a la meme hauteur que celui de
   l accueil. Mesures de l accueil : 445 px a 820, 463 px a 1024, 474 px a partir de 1280.
   La formule suit cette pente au lieu de paliers. Contenu centre verticalement. */
@media (min-width: 768px) {
  .sc-hero,
  .sc-hero--sm {
    min-height: clamp(445px, calc(393px + 6.3vw), 474px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 0 3.5rem;
  }
}

/* hauteur-telephone-1209 (demande de Yannick) : meme hauteur de bandeau sur telephone,
   environ 380 px pour l accueil et les pages avec photo. Les marges internes sont reduites
   pour que l accueil, plus charge en texte, descende de 470 px a 380 px. */
@media (max-width: 767px) {
  .sc-hero,
  .sc-hero--sm {
    min-height: 380px;
    padding: 1.5rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* image-contenu-largeur-page-1209 (demande de Yannick) : les photographies placees
   DANS le contenu des pages prennent toute la largeur de la PAGE ECRITE, c est a dire
   la meme largeur que les titres et les paragraphes des sections. La figure est fille
   du conteneur exterieur ; on lui redonne donc le retrait interieur de .sc-container
   pour que ses bords tombent exactement sur ceux du texte. */
.sc-figure-page {
  width: 100%;
  max-width: var(--sc-max-width);      /* meme largeur que .sc-container : celle du texte */
  margin: 0 auto 3.5rem;
  padding-inline: 1.25rem;
}
@media (min-width: 768px)  { .sc-figure-page { padding-inline: 2rem; } }
@media (min-width: 1200px) { .sc-figure-page { padding-inline: 2.5rem; } }

.sc-figure-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.sc-figure-page figcaption {
  margin-top: .875rem;
  font-family: Raleway, sans-serif;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(14,32,64,.62);
  text-align: center;
}

/* articles-clair-1609 : sur un article, le sous-titre du bandeau est la DATE. Le style renforce
   des sous-titres de page la rendait trop presente : on la ramene a une mention discrete. */
.single .sc-hero__subtitle {
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(14,32,64,.62);
  letter-spacing: 0.04em;
}