/* ----------------------- */
/* ----------------------- */
/* -- STYLES RÉCURRENTS -- */
/* ----------------------- */
/* ----------------------- */

/*
DESCRIPTION :

Des styles qui sont appliqués de telle façon à ce qu'ils concernent des éléments et des conteneurs récurrents dans l'HTML, mais différenciés des éléments et conteneurs généraux par des identifiants qui les distinguent.
*/

/* ----------------------- */
/* ----------------------- */
/* -- Styles d'éléments -- */

.contenu_cache,
.invisible_hors_clc:not(#sorties .invisible_hors_clc) {
   display: none;
}

/* ----------------------------- */
.clair a:not(.bouton):focus-visible,
.clair a:not(.bouton):hover {
   background: var(--couleur-sombre);
   color: var(--couleur-claire);
}

/* ----------------------------- */
.clair .contenu_bloc{
   background: var(--couleur-claire);
   color: var(--couleur-sombre);
}

/* ----------------------------- */
.bloc ol,
.bloc ul {
   display: flex;
   flex-direction: column;
   gap: var(--espacement-XL);
}

/* ----------------------------- */
.icone {
   width: var(--espacement-XL);
   height: var(--espacement-XL);
}

/* ----------------------------- */
.ligne_separation {
   text-wrap: nowrap;
   overflow: hidden;
}

/* ----------------------------- */
.surligne {
   display: inline;
   padding: var(--espacement-XS) 0;
   /**/
   box-decoration-break: clone;
   background: var(--couleur-claire);
   color: var(--couleur-sombre);
}

.clair .surligne {
   background: var(--couleur-sombre);
   color: var(--couleur-claire);
}

.clair header .surligne {
   background: transparent;
}

/* ----------------------------- */
aside[role="navigation"] ul,
aside[role="navigation"] ol {
   flex-direction: row;
   flex-wrap: wrap;
}

/* ----------------------------- */
.separateur_protocole::before,
.chevron::before,
.chevron_double::before,
.curseur::after {
   position: relative;
   display: inline-block;
}

.chevron::before,
.chevron_double::before {
   margin-right: var(--espacement-S);
}

.chevron::before {
   content: ">";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}

.chevron_double::before {
   content: ">>";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}

.separateur_protocole::before {
   content: "://";
   /* Le contenu vide après le slash est celui qui est interprété par les lecteurs d'écran, l'avoir vide permet d'éviter que les lecteurs ne lisent le contenu du pseudoélément */
}


/* ------------------------ */
/* ------------------------ */
/* -- Styles de sections -- */

.bloc {
   gap: 0;
   width: fit-content;
}

/* ----------------------------- */
.bloc header:first-child {
   margin-right: var(--espacement-M);
   /**/
   color: var(--couleur-sombre);
}

/* ----------------------------- */
.bloc .contenu_bloc{
   display: flex;
   flex-direction: column;
   gap: var(--espacement-XL);
   padding: var(--espacement-2XL) var(--espacement-M);
   /**/
   outline: var(--bordure);
}

/* ----------------------------- */
/* Ce style permet d'éviter les flashs de chargement du contenu des modules dans la CLC */
#sorties module-sortie {
   scroll-margin-top: var(--espacement-4XL);
}

/* ----------------------------- */
.realisation > header {
   display: flex;
   flex-direction: column;
   gap: var(--espacement-XL);
}

/* ----------------------------- */
.galerie .contenu_bloc{
   padding: var(--espacement-XL);
}

/* ----------------------------- */
.galerie li {
   display: flex;
   flex-wrap: wrap;
   gap: var(--espacement-XL);
   align-items: flex-start;
}

@container (width < 832px) {
   .galerie li.duo {
      flex-direction: column;
   }
}

/* ----------------------------- */
.galerie img {
   flex: 0 1 auto;
   width: auto;
   height: auto;
   min-width: 256px;
   max-width: 100%;
   max-height: calc(100vh - 2 * (var(--espacement-2XL) + 2 * var(--espacement-XL)));
   object-fit: contain;
}

.galerie li.duo figure {
   flex: 1 1 0;
   height: auto;
}