/* ============================================================
   ÉVOLUTIONS UX — ADAPTATIONS DES SECTIONS EXISTANTES
   ------------------------------------------------------------
   Les sections existantes reprises sur les nouveaux gabarits gardent
   leur CSS d'origine (style.css), ciblé par identifiant. Ce fichier
   n'ajoute QUE ce que le cahier des charges demande en plus et que la
   section d'origine n'avait pas : légendes, titre de vidéo, ancres,
   texte riche lisible, libellés longs de la chronologie.

   Il n'est chargé que sur les nouveaux gabarits, et chaque règle vise
   un élément qui n'existe que dans les gabarits de sections des
   évolutions : rien ici ne peut atteindre une page existante.
   ============================================================ */


/* ---- Ancres ----
   Le header est fixe : sans marge, une section atteinte par une ancre
   (« Questions fréquentes → #faq ») passerait sous lui. */
.sgt-ancre,
.section_interne[id],
.texte_riche[id],
.sgt-video[id]{ scroll-margin-top: calc(var(--h-top) + var(--h-main) + 24px); }
.sgt-ancre{ display: block; height: 0; }


/* ---- En-tête : titres dans l'ordre du cahier des charges ----
   Sur les pages existantes, la petite ligne du haut est un H1 et le grand
   titre un H2. Ici le grand titre est le H1 et la petite ligne un
   paragraphe : chacun reprend à l'identique le style de la ligne qu'il
   remplace (style.css, l. 307-308, et marges par défaut des H1 / H2). */
#bloc_principal_G2 .background .filter .contenu .sgt-entete__sur-titre{
  margin: .67em 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: normal;
}
#bloc_principal_G2 .background .filter .contenu h1.sgt-entete__titre{
  margin: .83em 0;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: normal;
}


/* ---- Bandeau de navigation ----
   Le seul bloc existant dont le rendu dépend du gabarit : style.css ne
   donne aux boutons des largeurs égales, sur toute la ligne, que sur les
   pages SGT (`.page-template-page_sgt`). Ailleurs, ils se réduisent à
   la largeur d'un mot. On reprend ici ces trois règles, à l'identique. */
#Bandeau_retour.sgt-bandeau .lien_bandeau{ justify-content: initial; }
#Bandeau_retour.sgt-bandeau .lien_bandeau a{ display: block; width: 50%; }
#Bandeau_retour.sgt-bandeau .lien_bandeau .nav-previous{ width: 100% !important; box-sizing: border-box; }


/* ---- Texte + image : le bloc contient son image ----
   Sur ordinateur, l'image de ces blocs est en position absolue (350 px de
   haut, 50 px sous le haut du bloc) : le bloc ne prend que la hauteur de
   son texte. Les pages existantes ont de longs textes ; le cahier des
   charges en prévoit de plus courts (250 à 500 caractères), et l'image
   débordait alors jusqu'à 130 px sur la section suivante (titre de la
   chronologie, photo d'une liste de PDF). Le bloc réserve donc au moins
   la hauteur de son image. Sous 1000 px, l'image est dans le flux. */
@media (min-width: 1001px){
  #Bloc_Texte_Image .contenu,
  #Bloc_Image_Texte .contenu_texte{ min-height: 400px; }
}


/* ---- Vidéo : titre et légende, posés autour de #bloc_vidéo_G2 ----
   La section d'origine est une boîte fixe dont l'iframe est en position
   absolue : on n'y touche pas, on ajoute avant et après. */
.sgt-video__titre{
  margin: 60px auto 0;
  padding: 0 8%;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 1.2;
  text-align: center;
  color: var(--sgt-noir);
}
.sgt-video__legende{
  max-width: 760px;
  margin: 0 auto 50px;
  padding: 0 8%;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: var(--sgt-texte-doux);
}


/* ---- Galerie : légende superposée en bas de la photo ----
   Les photos de #BLOC_SLIDER occupent toute la hauteur de la
   diapositive (400 px) : une légende en dessous déborderait. */
#BLOC_SLIDER .event:has(.sgt-galerie__legende){ position: relative; }
.sgt-galerie__legende{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 48px 24px 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
}


/* ---- Chronologie : libellés longs ----
   La date est affichée en 75 px, calibrée pour une année (« 2016 »).
   « 2030 · objectif » ou « Étape 1 » y déborderaient. */
.wingz_1 .owl-item .event span.sgt-chrono--long{ font-size: 44px; }


/* ============================================================
   TEXTE RICHE — reprise de #texte_mentions_légales
   ------------------------------------------------------------
   Même mise en page que l'original (colonne centrée, titre bleu),
   sous une classe propre pour pouvoir porter une ancre et exister
   plusieurs fois dans la page. Le cahier des charges marque cette
   section « CSS » : corps de texte en 16 px au moins (règle 4) et
   listes lisibles, alignées à gauche. L'original est en 14 px centré.
   ============================================================ */
.texte_riche{
  width: 60%;
  max-width: 900px;
  margin: 70px auto;
  font-family: var(--sgt-font);
  color: var(--sgt-noir);
}
.texte_riche h2{
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: var(--sgt-bleu);
}
.texte_riche__corps{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .3px;
}
.texte_riche__corps p{ margin: 0 0 1em; }
.texte_riche__corps h3,
.texte_riche__corps h4{
  margin: 1.6em 0 .5em;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--sgt-noir);
}
/* Questions de FAQ en intertitres : le premier n'a pas de marge haute */
.texte_riche__corps > h3:first-child,
.texte_riche__corps > h4:first-child{ margin-top: 0; }
/* style.css retire les puces de toute liste du site (`ul, li {
   list-style-type: none }`) : on les rétablit ici, la liste à puces
   étant l'usage même de ce bloc (missions, qualités). */
.texte_riche__corps ul,
.texte_riche__corps ol{ margin: 0 0 1.2em; padding-left: 1.4em; }
.texte_riche__corps ul{ list-style-type: disc; }
.texte_riche__corps ol{ list-style-type: decimal; }
.texte_riche__corps ul ul{ list-style-type: circle; }
.texte_riche__corps li{ margin-bottom: .45em; list-style-type: inherit; }
.texte_riche__corps ul li::marker{ color: var(--sgt-jaune); }
.texte_riche__corps a{ color: var(--sgt-bleu); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px){
  .texte_riche{ width: auto; margin: 50px 6%; }
}