/**
 * cassiopeia_socle — la feuille des sites, chargée après template.min.css de Cassiopeia.
 *
 * Couleurs : uniquement les variables --socle-* posées par le modèle d'après ★ Socle → Réglages → Couleurs
 * (Service\Couleurs) : principale, secondaire, accent, texte, fond, fond sombre, et pour chacune « -contraste » (le
 * texte lisible dessus), « -survol » et « -rgb ». Les valeurs ci-dessous ne servent que si ★ Socle est absent.
 * Polices : celles du système (aucune police téléchargée).
 *
 * @version 1.7.0 (07/11/2026) L'icône du compte dans l'en-tête (.socle-compte), à droite du menu en ligne : connexion pour
 *                 un visiteur, « Mon espace » avec un point de couleur pour un compte connecté.
 * @version 1.6.0 (07/11/2026) Le bloc du bouton « Modifier » contient son flottant dans la page d'article du cœur aussi
 *                 (.com-content-article .icons) : un bloc qui suivait (section en flex) se resserrait à côté du bouton.
 * @version 1.5.0 (27/10/2026) Le fond demi-sombre (--socle-fond-demi) : la barre du haut ; le pied de page et le panneau
 *                 sur le fond sombre dans toutes les apparences, leurs filets tirés de leur texte (lisibles sur un fond
 *                 sombre comme sur un fond clair, la personne choisissant ces fonds dans sa palette) ; barre d'aperçu :
 *                 « Revenir au choix des couleurs ».
 * @version 1.4.0 (27/10/2026) La barre d'aperçu montre aussi les couleurs en aperçu (?palette=…) : leurs pastilles,
 *                 les adopter, quitter cet aperçu ; une partie par aperçu.
 * @version 1.3.0 (27/10/2026) Les apparences (★ Socle → Réglages → Apparence) : la graisse de leurs titres
 *                 (--socle-poids-titres), la barre d'aperçu (html/layouts/socle/apercu.php) ; titres du pied de page et
 *                 entrée active du panneau dans l'accent lisible sur le fond sombre (--socle-accent-sur-sombre) ;
 *                 couleurs du pied de page et du panneau par variables (--socle-pied-*, --socle-panneau-*), que les
 *                 apparences règlent.
 * @version 1.0.0 (26/10/2026) Repris de ★ Galerie 1.13.1 (tpl_cassiopeia_galerie/media/css/galerie.css) : en-tête, menu,
 *                 panneau, choix de la langue, boutons, grilles, pied de page, page d'un contenu ; annonces une à la fois
 *                 sur téléphone, reprises du site de référence (bloc « bandeau d'annonce » de sa feuille) ; sans les cartes,
 *                 fiches, filtres, formulaires d'achat, inscriptions aux vernissages ni looks de la galerie.
 * @version 1.2.0 (26/10/2026) Page hors ligne, habillage « socle » des modules, mention reCAPTCHA à la place du badge
 *                 de Google (le badge recouvrait des boutons sur téléphone ; Google admet qu'on le masque quand la
 *                 mention et ses liens sont dans la page).
 * @version 1.1.0 (26/10/2026) Survols, focus et éléments actifs : chaque zone garde sa couleur de texte, atténuée, à
 *                 la place des couleurs fixes de Cassiopeia ; Bootstrap (celui de Cassiopeia et celui de Joomla, que
 *                 charge RSForm! Pro) aux couleurs du site ; calendriers d'Events Booking aux couleurs du site ; son
 *                 tunnel d'inscription et de paiement repris du site de référence.
 */

:root {
  --socle-principale: #112855;
  --socle-principale-contraste: #FFFFFF;
  --socle-principale-survol: #0F2249;
  --socle-principale-rgb: 17, 40, 85;
  --socle-secondaire: #224FAA;
  --socle-secondaire-contraste: #FFFFFF;
  --socle-accent: #424077;
  --socle-accent-contraste: #FFFFFF;
  --socle-texte: #22262A;
  --socle-texte-rgb: 34, 38, 42;
  --socle-fond: #FFFFFF;
  --socle-fond-demi: #112855;
  --socle-fond-demi-contraste: #FFFFFF;
  --socle-fond-sombre: #112855;
  --socle-fond-sombre-contraste: #FFFFFF;

  --socle-police: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --socle-police-titres: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --socle-gouttiere: clamp(1rem, 3vw, 2rem);
  --socle-arrondi: .25rem;
  --socle-poids-titres: 700;
  --socle-filet: rgba(0, 0, 0, .1);
  --socle-fond-image: #F2F2F2;

  --cassiopeia-font-family-body: var(--socle-police);
  --cassiopeia-font-family-headings: var(--socle-police-titres);
  --cassiopeia-font-weight-headings: 700;
}

/* ------------------------------------------------------------------ base */

body.site {
  background: var(--socle-fond);
  color: var(--socle-texte);
  font-family: var(--socle-police);
  font-size: 1rem;
  line-height: 1.6;
}

.site-grid {
  grid-gap: 0 var(--socle-gouttiere);
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--socle-police-titres);
  font-weight: var(--socle-poids-titres);
  letter-spacing: -.01em;
  line-height: 1.15;
}

h1, .h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}

h2, .h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

a {
  text-underline-offset: .18em;
}

.container-component {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.socle-evitement {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

.socle-evitement:focus {
  top: 1rem;
}

/* ------------------------------------------------------------------ en-tête */

.container-header.socle-entete {
  background: var(--socle-fond);
  background-image: none;
  box-shadow: 0 1px 0 var(--socle-filet);
  color: var(--socle-texte);
}

.socle-barre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 2.5rem;
  padding: .25rem var(--socle-gouttiere);
  background: var(--socle-fond-demi);
  color: var(--socle-fond-demi-contraste);
  font-size: .875rem;
}

.socle-barre a {
  color: inherit;
}

.socle-barre__outils {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.socle-annonces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.socle-annonces__annonce a {
  font-weight: 600;
  text-decoration: none;
}

.socle-annonces__annonce a:hover,
.socle-annonces__annonce a:focus {
  text-decoration: underline;
}

.socle-entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--socle-gouttiere);
}

.container-header .navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  white-space: normal;
}

/* Un nom long (« Galleria d’arte e edizioni d’arte ») passe à la ligne au lieu de pousser le bouton du menu hors de l'écran */
.socle-marque {
  display: inline-block;
  color: var(--socle-texte);
  font-family: var(--socle-police-titres);
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.socle-marque::after {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-left: .15em;
  border-radius: 50%;
  background: var(--socle-principale);
  vertical-align: baseline;
}

.container-header .brand-logo {
  text-decoration: none;
}

.container-header .container-nav.socle-entete__nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  padding: 0;
}

/* Menu en ligne (gabarit dropdown-metismenu de Cassiopeia) et bouton du panneau */
.socle-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.socle-nav__ligne {
  display: none;
}

@media (min-width: 992px) {
  .socle-nav__ligne {
    display: block;
  }
}

/* Le menu en ligne à côté du nom du site ne tient qu'à partir de 1280 px (mesuré sur la galerie : en dessous, un nom
   long était écrasé en colonne, 41 px de large à 992 px) ; en dessous, le bouton du panneau seul */
@media (max-width: 1279.98px) {
  .socle .socle-nav__ligne {
    display: none;
  }
}

.container-header .socle-nav .metismenu > li > a,
.container-header .socle-nav .metismenu > li > button {
  color: var(--socle-texte);
  font-weight: 600;
}

.container-header .socle-nav .metismenu > li.active > a,
.container-header .socle-nav .metismenu > li > a:hover,
.container-header .socle-nav .metismenu > li > a:focus {
  color: var(--socle-principale);
}

.container-header .socle-nav .metismenu > li.active > a::after,
.container-header .socle-nav .metismenu > li > a:hover::after {
  background: var(--socle-principale);
}

/* Sous-menus du menu en ligne, ouverts par la flèche de Cassiopeia : la flèche reste à côté
   du titre (Cassiopeia la renvoie à la ligne quand l'en-tête est serré, sous le titre, où elle ne se voit plus) ; le
   sous-menu aux couleurs du site */
.container-header .socle-nav .metismenu > li {
  flex-wrap: nowrap;
}

.container-header .socle-nav .metismenu .mm-collapse {
  min-width: 13rem;
  padding: .35rem 0;
  border: 1px solid var(--socle-filet);
  background: var(--socle-fond);
  color: var(--socle-texte);
}

.container-header .socle-nav .metismenu .mm-collapse > li > a {
  color: inherit;
  font-weight: 500;
}

.container-header .socle-nav .metismenu .mm-collapse > li > a:hover,
.container-header .socle-nav .metismenu .mm-collapse > li > a:focus {
  color: var(--socle-principale);
}

/* Le compte : icône à droite du menu, vers la connexion (visiteur) ou « Mon espace » (compte connecté : point de couleur) */
.socle-compte {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--socle-texte);
  text-decoration: none;
}

.socle-compte:hover,
.socle-compte:focus {
  color: var(--socle-principale);
}

.socle-compte svg {
  width: 1.45rem;
  height: 1.45rem;
}

.socle-compte.is-connecte::after {
  content: "";
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--socle-principale);
}

.socle-burger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

.socle-burger:hover,
.socle-burger:focus-visible {
  background: var(--socle-principale-survol);
}

.socle-burger__barres {
  display: inline-flex;
  flex-direction: column;
  gap: .28rem;
}

.socle-burger__barres span {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.socle-burger--fermer .socle-burger__barres span:nth-child(1) {
  transform: translateY(.36rem) rotate(45deg);
}

.socle-burger--fermer .socle-burger__barres span:nth-child(2) {
  opacity: 0;
}

.socle-burger--fermer .socle-burger__barres span:nth-child(3) {
  transform: translateY(-.36rem) rotate(-45deg);
}

/* Panneau latéral */
.socle-panneau {
  --bs-offcanvas-width: min(26rem, 100vw);
  background: var(--socle-panneau-fond, var(--socle-fond-sombre));
  color: var(--socle-panneau-texte, var(--socle-fond-sombre-contraste));
}

.socle-panneau a {
  color: inherit;
}

.socle-panneau__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.socle-panneau__nom {
  font-family: var(--socle-police-titres);
  font-size: 1.25rem;
  font-weight: 800;
}

.socle-panneau__outils {
  margin-left: auto;
}

.socle-panneau__corps {
  padding: .5rem 1.5rem 2rem;
  overflow-y: auto;
}

.socle-panneau__menu {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.socle-panneau__entree a {
  display: block;
  padding: .7rem 0;
  border-bottom: 1px solid var(--socle-panneau-filet, color-mix(in srgb, var(--socle-fond-sombre-contraste) 14%, transparent));
  font-family: var(--socle-police-titres);
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
}

.socle-panneau__entree.is-actif a,
.socle-panneau__entree a:hover,
.socle-panneau__entree a:focus {
  color: var(--socle-panneau-actif, var(--socle-accent-sur-sombre, var(--socle-accent)));
}

/* Les pages de l'équipe du compte connecté, sous le menu : un intertitre discret, des entrées plus petites */
.socle-panneau__titre {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.socle-panneau__equipe .socle-panneau__entree a {
  padding: .5rem 0;
  font-size: 1.05rem;
}

/* Sous-menus du panneau : en retrait, plus petits */
.socle-panneau .socle-panneau__menu .socle-panneau__sousmenu {
  margin: 0 0 .35rem;
  padding: 0 0 0 1.25rem;
  list-style: none;
}

.socle-panneau .socle-panneau__menu .socle-panneau__sousmenu .socle-panneau__entree > a {
  padding: .4rem 0;
  border-bottom: 0;
  color: inherit;
  font-size: 1.05rem;
  text-decoration: none;
}

.socle-panneau .socle-panneau__menu .socle-panneau__sousmenu .socle-panneau__entree > a:hover,
.socle-panneau .socle-panneau__menu .socle-panneau__sousmenu .socle-panneau__entree > a:focus {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Choix de la langue : le sigle de la langue en cours, la liste des langues */
.socle-langues .socle-langues__bouton {
  padding: .2rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.socle-langues .dropdown-toggle::after {
  display: none;
}

.socle-langues__liste {
  min-width: 10rem;
  font-size: .9rem;
}

/* La liste est dans la barre du haut : Cassiopeia y éclaircit les liens survolés (.container-topbar a:not(.btn):hover,
   --gray-200), ce qui effaçait le nom de la langue sur le fond clair de la liste */
.container-topbar .socle-langues__liste .dropdown-item {
  color: var(--socle-texte);
}

.container-topbar .socle-langues__liste .dropdown-item:hover,
.container-topbar .socle-langues__liste .dropdown-item:focus {
  background: rgba(var(--socle-principale-rgb), .1);
  color: var(--socle-texte);
}

.container-topbar .socle-langues__liste .dropdown-item.active,
.container-topbar .socle-langues__liste .dropdown-item:active {
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

.socle-langues__sigles {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socle-langues__sigles a {
  font-weight: 700;
  text-decoration: none;
}

.socle-langues__sigles .lang-active a {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ boutons */

.socle-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  border: 2px solid var(--socle-texte);
  border-radius: 999px;
  background: transparent;
  color: var(--socle-texte);
  font-weight: 700;
  text-decoration: none;
}

.socle-bouton:hover,
.socle-bouton:focus {
  border-color: var(--socle-texte);
  background: var(--socle-texte);
  color: var(--socle-fond);
}

.socle-bouton--petit {
  padding: .35rem .9rem;
  border-width: 1px;
  font-size: .875rem;
}

/* Le bouton « Modifier » de la page d'un contenu (html/layouts/socle/modifier.php) */
.socle-modifier {
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------ pagination */

/* Pagination : sur un petit écran, les cases passent à la ligne au lieu de déborder de la page */
.pagination {
  flex-wrap: wrap;
  row-gap: .35rem;
}


/* ------------------------------------------------------------------ pied de page */

.container-footer.socle-pied {
  margin-top: 0;
  background: var(--socle-pied-fond, var(--socle-fond-sombre));
  background-image: none;
  color: var(--socle-pied-texte, var(--socle-fond-sombre-contraste));
}

.socle-pied a {
  color: inherit;
}

.socle-pied .grid-child {
  display: block;
  padding: clamp(2.5rem, 6vw, 4rem) var(--socle-gouttiere) 1.5rem;
}

.socle-pied__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 2rem;
}

.socle-pied__titre {
  margin-bottom: .75rem;
  color: var(--socle-pied-titre, var(--socle-accent-sur-sombre, var(--socle-accent)));
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.socle-pied__adresse {
  font-style: normal;
}

.socle-pied__reseaux,
.socle-pied__legales {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socle-pied__legales {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--socle-pied-filet, color-mix(in srgb, var(--socle-fond-sombre-contraste) 20%, transparent));
  font-size: .88rem;
}

.socle-pied__newsletter input[type="email"],
.socle-pied__newsletter input[type="text"] {
  border: 0;
}

.socle-pied__newsletter .btn,
.socle-pied__newsletter button[type="submit"] {
  border-color: var(--socle-principale);
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}


/* ------------------------------------------------------------------ survols, focus et éléments actifs */

/* Cassiopeia (media/templates/site/cassiopeia/css/template.css) fixe des couleurs de survol, de focus et d'élément
   actif prévues pour son en-tête et son pied foncés et pour son bleu (#010156) : un lien survolé devenait presque
   blanc sur un fond clair (barre du haut, en-tête, pied), un bouton, une case cochée ou un champ actif restait bleu.
   Ici, chaque zone garde au survol sa propre couleur de texte, atténuée, et Bootstrap prend les couleurs du site, sous
   ses deux formes : celle de Cassiopeia (variables sans préfixe) et celle de Joomla (--bs-*), que RSForm! Pro charge
   avec ses formulaires. outils/verifier-survols.py relève, à chaque construction du paquet, les règles de Cassiopeia
   qui fixent une couleur de survol ou de focus : une règle qui n'est pas traitée ici y est signalée. */

:root {
  --socle-attenue: 72%;

  --primary: var(--socle-principale);
  --primary-rgb: var(--socle-principale-rgb);
  --focus-ring-color: rgba(var(--socle-principale-rgb), .25);
  --bs-primary: var(--socle-principale);
  --bs-primary-rgb: var(--socle-principale-rgb);
  --bs-focus-ring-color: rgba(var(--socle-principale-rgb), .25);
  --bs-link-color: var(--link-color);
  --bs-link-color-rgb: var(--link-color-rgb);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-link-hover-color-rgb: var(--link-hover-color-rgb);
}

/* Un lien survolé de la barre du haut ou du pied garde la couleur de texte de sa zone, atténuée (currentColor, dans
   la propriété color, est la couleur héritée de la zone) ; Cassiopeia le passait en gris presque blanc (--gray-200) */
.container-topbar a:not(.btn):hover,
.container-topbar a:not(.btn):focus,
.container-topbar .btn-link:hover,
.container-topbar .btn-link:focus,
.container-below-top a:not(.btn):hover,
.container-below-top a:not(.btn):focus,
.container-below-top .btn-link:hover,
.container-below-top .btn-link:focus,
.footer a:not(.btn):hover,
.footer a:not(.btn):focus,
.footer .btn-link:hover,
.footer .btn-link:focus {
  color: color-mix(in srgb, currentColor var(--socle-attenue), transparent);
}

/* L'en-tête est sur le fond du site : le nom et la recherche prennent son texte (Cassiopeia : blanc, #f0f0f0 et
   #e6e6e6 au survol) */
.container-header.socle-entete .navbar-brand,
.container-header.socle-entete .navbar-brand a,
.container-header.socle-entete .navbar-brand:hover,
.container-header.socle-entete .navbar-brand:focus,
.container-header.socle-entete .mod-finder,
.container-header.socle-entete .mod-finder a:not(.jmodedit) {
  color: inherit;
}

.container-header.socle-entete .mod-finder a:not(.jmodedit):hover,
.container-header.socle-entete .mod-finder a:not(.jmodedit):focus {
  color: color-mix(in srgb, currentColor var(--socle-attenue), transparent);
}

/* Le trait sous l'entrée active ou survolée d'un menu de l'en-tête : la couleur de son texte (Cassiopeia : blanc) ;
   celui du menu du site (.socle-nav) prend la couleur principale (section « en-tête ») */
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before,
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before {
  background: currentColor;
}

/* Le bouton « haut de page » : la couleur principale, sa teinte de survol au survol (Cassiopeia : blanc sur la couleur
   de survol des liens, filet blanc) */
.back-to-top-link {
  border-color: var(--socle-principale);
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

.back-to-top-link:hover,
.back-to-top-link:focus {
  border-color: var(--socle-principale-survol);
  background: var(--socle-principale-survol);
  color: var(--socle-principale-contraste);
}

/* Boutons ; Cassiopeia règle aussi le survol de .btn-primary hors de ses variables (--cassiopeia-color-hover) */
.socle .btn-primary {
  --btn-color: var(--socle-principale-contraste);
  --btn-bg: var(--socle-principale);
  --btn-border-color: var(--socle-principale);
  --btn-hover-color: var(--socle-principale-contraste);
  --btn-hover-bg: var(--socle-principale-survol);
  --btn-hover-border-color: var(--socle-principale-survol);
  --btn-active-color: var(--socle-principale-contraste);
  --btn-active-bg: var(--socle-principale-survol);
  --btn-active-border-color: var(--socle-principale-survol);
  --btn-disabled-color: var(--socle-principale-contraste);
  --btn-disabled-bg: var(--socle-principale);
  --btn-disabled-border-color: var(--socle-principale);
  --btn-focus-shadow-rgb: var(--socle-principale-rgb);
  --bs-btn-color: var(--socle-principale-contraste);
  --bs-btn-bg: var(--socle-principale);
  --bs-btn-border-color: var(--socle-principale);
  --bs-btn-hover-color: var(--socle-principale-contraste);
  --bs-btn-hover-bg: var(--socle-principale-survol);
  --bs-btn-hover-border-color: var(--socle-principale-survol);
  --bs-btn-active-color: var(--socle-principale-contraste);
  --bs-btn-active-bg: var(--socle-principale-survol);
  --bs-btn-active-border-color: var(--socle-principale-survol);
  --bs-btn-disabled-color: var(--socle-principale-contraste);
  --bs-btn-disabled-bg: var(--socle-principale);
  --bs-btn-disabled-border-color: var(--socle-principale);
  --bs-btn-focus-shadow-rgb: var(--socle-principale-rgb);
}

.socle .btn-primary:hover,
.socle .btn-primary:focus {
  border-color: var(--socle-principale-survol);
  background-color: var(--socle-principale-survol);
  color: var(--socle-principale-contraste);
}

.socle .btn-outline-primary {
  --btn-color: var(--link-color);
  --btn-border-color: var(--socle-principale);
  --btn-hover-color: var(--socle-principale-contraste);
  --btn-hover-bg: var(--socle-principale);
  --btn-hover-border-color: var(--socle-principale);
  --btn-active-color: var(--socle-principale-contraste);
  --btn-active-bg: var(--socle-principale);
  --btn-active-border-color: var(--socle-principale);
  --btn-disabled-color: var(--link-color);
  --btn-disabled-border-color: var(--socle-principale);
  --btn-focus-shadow-rgb: var(--socle-principale-rgb);
  --bs-btn-color: var(--link-color);
  --bs-btn-border-color: var(--socle-principale);
  --bs-btn-hover-color: var(--socle-principale-contraste);
  --bs-btn-hover-bg: var(--socle-principale);
  --bs-btn-hover-border-color: var(--socle-principale);
  --bs-btn-active-color: var(--socle-principale-contraste);
  --bs-btn-active-bg: var(--socle-principale);
  --bs-btn-active-border-color: var(--socle-principale);
  --bs-btn-disabled-color: var(--link-color);
  --bs-btn-disabled-border-color: var(--socle-principale);
  --bs-btn-focus-shadow-rgb: var(--socle-principale-rgb);
}

.socle .btn-link {
  --btn-color: var(--link-color);
  --btn-hover-color: var(--link-hover-color);
  --btn-active-color: var(--link-hover-color);
  --btn-focus-shadow-rgb: var(--socle-principale-rgb);
  --bs-btn-color: var(--link-color);
  --bs-btn-hover-color: var(--link-hover-color);
  --bs-btn-active-color: var(--link-hover-color);
  --bs-btn-focus-shadow-rgb: var(--socle-principale-rgb);
}

/* Le bouton principal d'une fenêtre : Cassiopeia écrit son texte en blanc, illisible sur une couleur principale
   claire */
.socle .modal .btn-primary:not([href]),
.socle .modal .btn-primary:not([href]):hover {
  color: var(--socle-principale-contraste);
}

/* Les liens « primaires » de Bootstrap (Cassiopeia : son bleu foncé au survol, en !important comme Bootstrap) */
.socle .link-primary {
  color: var(--link-color) !important;
  text-decoration-color: var(--link-color) !important;
}

.socle .link-primary:hover,
.socle .link-primary:focus {
  color: var(--link-hover-color) !important;
  text-decoration-color: var(--link-hover-color) !important;
}

/* Champs (formulaires de RSForm! Pro, d'Events Booking, de NS Pro, « Gérer le site ») : le filet et l'anneau du champ
   actif, la case cochée, le curseur à la couleur principale ; les états valide et invalide gardent leur vert et leur
   rouge */
.socle .form-control:focus,
.socle .form-select:focus,
.socle .custom-select:focus,
.socle .form-check-input:focus {
  border-color: rgba(var(--socle-principale-rgb), .6);
  box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

.socle .form-check-input:checked,
.socle .form-check-input[type="checkbox"]:indeterminate {
  border-color: var(--socle-principale);
  background-color: var(--socle-principale);
}

/* L'interrupteur oui / non de Joomla (media/system/css/fields/switcher.css : anneau bleu #1a466b) ; son vert « oui »
   est gardé */
.socle .switcher input:focus ~ .toggle-outside {
  box-shadow: 0 0 0 .2rem rgba(var(--socle-principale-rgb), .25);
}

/* Le curseur : une règle par navigateur (une liste qui mêle -webkit- et -moz- serait ignorée en entier) */
.socle .form-range::-webkit-slider-thumb {
  background-color: var(--socle-principale);
}

.socle .form-range::-moz-range-thumb {
  background-color: var(--socle-principale);
}

.socle .form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--socle-fond), 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

.socle .form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--socle-fond), 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

.socle .form-range::-webkit-slider-thumb:active {
  background-color: var(--socle-principale-survol);
}

.socle .form-range::-moz-range-thumb:active {
  background-color: var(--socle-principale-survol);
}

/* L'option choisie d'une liste à choix multiples : la couleur principale (Cassiopeia), son texte lisible (Cassiopeia :
   blanc) */
.socle .form-select[multiple] option:checked,
.socle [multiple].custom-select option:checked {
  color: var(--socle-principale-contraste);
}

/* Listes déroulantes, onglets, pagination, listes, barres de progression, accordéons, bouton de fermeture */
.socle .dropdown-menu {
  --dropdown-link-hover-bg: rgba(var(--socle-principale-rgb), .1);
  --dropdown-link-active-color: var(--socle-principale-contraste);
  --dropdown-link-active-bg: var(--socle-principale);
  --bs-dropdown-link-hover-bg: rgba(var(--socle-principale-rgb), .1);
  --bs-dropdown-link-active-color: var(--socle-principale-contraste);
  --bs-dropdown-link-active-bg: var(--socle-principale);
}

.socle .nav-pills {
  --nav-pills-link-active-color: var(--socle-principale-contraste);
  --nav-pills-link-active-bg: var(--socle-principale);
  --bs-nav-pills-link-active-color: var(--socle-principale-contraste);
  --bs-nav-pills-link-active-bg: var(--socle-principale);
}

.socle .nav-link:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

.socle .pagination {
  --pagination-active-color: var(--socle-principale-contraste);
  --pagination-active-bg: var(--socle-principale);
  --pagination-active-border-color: var(--socle-principale);
  --pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
  --bs-pagination-active-color: var(--socle-principale-contraste);
  --bs-pagination-active-bg: var(--socle-principale);
  --bs-pagination-active-border-color: var(--socle-principale);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

.socle .list-group {
  --list-group-active-color: var(--socle-principale-contraste);
  --list-group-active-bg: var(--socle-principale);
  --list-group-active-border-color: var(--socle-principale);
  --bs-list-group-active-color: var(--socle-principale-contraste);
  --bs-list-group-active-bg: var(--socle-principale);
  --bs-list-group-active-border-color: var(--socle-principale);
}

.socle .progress,
.socle .progress-stacked {
  --progress-bar-bg: var(--socle-principale);
  --bs-progress-bar-bg: var(--socle-principale);
}

.socle .accordion {
  --accordion-active-color: var(--link-color);
  --accordion-active-bg: rgba(var(--socle-principale-rgb), .08);
  --accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
  --bs-accordion-active-color: var(--link-color);
  --bs-accordion-active-bg: rgba(var(--socle-principale-rgb), .08);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

/* La flèche d'un accordéon est un dessin aux couleurs de Cassiopeia : dessinée ici dans la couleur du texte du bouton */
.socle .accordion-button::after,
.socle .accordion-button:not(.collapsed)::after {
  background-color: currentColor;
  background-image: none;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
}

.socle .btn-close {
  --btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
  --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--socle-principale-rgb), .25);
}

/* ------------------------------------------------------------------ Events Booking : calendriers */

/* Le thème « default » d'Events Booking (media/com_eventbooking/assets/css/themes/default.css) colore ses calendriers
   en ardoise (#29363E, #3E525E) : ils prennent la couleur principale, et le texte lisible dessus */
.socle .regpro-calendarMonthHeader,
.socle .regpro-calendarDay .eb_event_link,
.socle #extcalendar .currentmonth,
.socle #extcalendar .currentday,
.socle #extcalendar .currentweek,
.socle #extcalendar .previousday,
.socle #extcalendar .previousweek,
.socle #extcalendar .nextday,
.socle #extcalendar .nextweek,
.socle .extcal_minical .extcal_navbar,
.socle td.mod_eb_mincalendar_event {
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

.socle .eb-calendar ul.eb-weekdays,
.socle #extcalendar .tableh2,
.socle .mod_eb_mincalendar_td_dayname {
  background: var(--socle-principale-survol);
  color: var(--socle-principale-contraste);
}

.socle .regpro-calendarWeekDayHeader {
  border-left-color: var(--socle-principale);
}

.socle .regpro-calendarDay {
  color: var(--socle-texte);
}

/* Le jour survolé (style.css : #DAD9CE) */
.socle .regpro-calendarDay:hover {
  background-color: rgba(var(--socle-principale-rgb), .1);
}

.socle .eb-topmenu-calendar ul li a {
  color: var(--link-color);
}

.socle .eb-topmenu-calendar ul li a:hover,
.socle .eb-topmenu-calendar ul li a.active {
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
}

/* Le calendrier FullCalendar (media/com_eventbooking/fullcalendar/main.css), par ses variables */
.socle .fc {
  --fc-button-text-color: var(--socle-principale-contraste);
  --fc-button-bg-color: var(--socle-principale);
  --fc-button-border-color: var(--socle-principale);
  --fc-button-hover-bg-color: var(--socle-principale-survol);
  --fc-button-hover-border-color: var(--socle-principale-survol);
  --fc-button-active-bg-color: var(--socle-principale-survol);
  --fc-button-active-border-color: var(--socle-principale-survol);
  --fc-event-bg-color: var(--socle-principale);
  --fc-event-border-color: var(--socle-principale);
  --fc-event-text-color: var(--socle-principale-contraste);
  --fc-today-bg-color: rgba(var(--socle-principale-rgb), .08);
  --fc-list-event-hover-bg-color: rgba(var(--socle-principale-rgb), .08);
}

.socle .fc .fc-button:focus,
.socle .fc .fc-button-primary:focus,
.socle .fc .fc-button-primary:not(:disabled):active:focus,
.socle .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--socle-principale-rgb), .25);
}

/* ------------------------------------------------------------------ Events Booking : inscription et paiement */

/* Repris du site de référence (feuille personnalisée d'Events Booking, « le tunnel d'inscription et de paiement »),
   aux couleurs du site : chaque étape sur une carte, intitulés en capitales espacées, tarifs en lignes aérées, champs
   à filet fin, bouton de la couleur principale, moyens de paiement en cartes. Les gabarits d'Events Booking ne sont
   pas touchés. */
.socle {
  --socle-filet-tunnel: rgba(var(--socle-texte-rgb), .14);
  --socle-filet-tarif: rgba(var(--socle-texte-rgb), .07);
  --socle-texte-discret: color-mix(in srgb, var(--socle-texte) 70%, var(--socle-fond));
}

.socle #eb-individual-registration-page,
.socle #eb-group-registration-page,
.socle #eb-cart-page,
.socle #eb-complete-page {
  padding: 1.5rem 1.75rem 1.65rem;
  border: 1px solid var(--socle-filet-tunnel);
  border-radius: var(--socle-arrondi);
  background: var(--socle-fond);
}

.socle #eb-individual-registration-page .eb-page-heading,
.socle #eb-group-registration-page .eb-page-heading,
.socle #eb-cart-page .eb-page-heading {
  margin: 0 0 .4rem;
  color: var(--socle-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.socle #eb-individual-registration-page .eb-message,
.socle #eb-group-registration-page .eb-message {
  margin: 0 0 .9rem;
  color: var(--socle-texte);
  font-size: .95rem;
  line-height: 1.6;
}

.socle #eb-individual-registration-page .eb-heading,
.socle #eb-group-registration-page .eb-heading,
.socle #eb-cart-page .eb-heading {
  margin: 1.4rem 0 .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--socle-filet-tunnel);
  color: var(--socle-texte);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.socle #eb-individual-registration-page .eb-heading:first-of-type {
  margin-top: 1.1rem;
}

/* Les tarifs : le tableau perd ses rayures et ses bordures */
.socle #eb-individual-registration-page table,
.socle #eb-group-registration-page table,
.socle #eb-cart-page table {
  width: 100%;
  margin: 0 0 .5rem;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

.socle #eb-individual-registration-page table thead th,
.socle #eb-group-registration-page table thead th,
.socle #eb-cart-page table thead th {
  padding: 0 .75rem .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--socle-filet-tunnel);
  background: transparent;
  color: var(--socle-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.socle #eb-individual-registration-page table tbody td,
.socle #eb-group-registration-page table tbody td,
.socle #eb-cart-page table tbody td {
  padding: .9rem .75rem .9rem 0;
  border: 0;
  border-bottom: 1px solid var(--socle-filet-tarif);
  background: transparent;
  color: var(--socle-texte);
  font-size: .95rem;
  vertical-align: middle;
}

.socle #eb-individual-registration-page table tbody tr:last-child td {
  border-bottom: 0;
}

.socle #eb-individual-registration-page .eb-ticket-type-title {
  font-weight: 600;
}

.socle #eb-individual-registration-page .eb-ticket-type-description,
.socle #eb-cart-page .eb-ticket-type-description {
  margin: .2rem 0 0;
  color: var(--socle-texte-discret);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
}

.socle #eb-individual-registration-page table tbody td + td {
  white-space: nowrap;
}

.socle #eb-individual-registration-page table tbody td:nth-child(2) {
  color: var(--link-color);
  font-weight: 700;
}

/* Les champs */
.socle #eb-individual-registration-page .form-control,
.socle #eb-individual-registration-page select,
.socle #eb-individual-registration-page textarea,
.socle #eb-group-registration-page .form-control,
.socle #eb-group-registration-page select,
.socle #eb-group-registration-page textarea {
  border: 1px solid rgba(var(--socle-texte-rgb), .25);
  border-radius: var(--socle-arrondi);
  background-color: var(--socle-fond);
  color: var(--socle-texte);
  font-size: .95rem;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.socle #eb-individual-registration-page .form-control:focus,
.socle #eb-individual-registration-page select:focus,
.socle #eb-individual-registration-page textarea:focus,
.socle #eb-group-registration-page .form-control:focus,
.socle #eb-group-registration-page select:focus,
.socle #eb-group-registration-page textarea:focus {
  border-color: rgba(var(--socle-principale-rgb), .6);
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--socle-principale-rgb), .22);
}

.socle #eb-individual-registration-page .col-form-label,
.socle #eb-individual-registration-page label,
.socle #eb-group-registration-page .col-form-label,
.socle #eb-group-registration-page label {
  color: var(--socle-texte);
  font-size: .875rem;
  font-weight: 500;
}

.socle #eb-individual-registration-page .required,
.socle #eb-individual-registration-page .formRequired {
  color: var(--danger);
}

/* Le bouton de validation : plein de la couleur principale, vide au survol */
.socle #eb-individual-registration-page #btn-submit,
.socle #eb-group-registration-page #btn-submit,
.socle #eb-cart-page #btn-submit,
.socle #eb-individual-registration-page .form-actions .btn-primary {
  display: inline-block;
  padding: .95rem 2.4rem;
  border: 1px solid var(--socle-principale);
  border-radius: var(--socle-arrondi);
  background: var(--socle-principale);
  color: var(--socle-principale-contraste);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}

.socle #eb-individual-registration-page #btn-submit:hover,
.socle #eb-individual-registration-page #btn-submit:focus,
.socle #eb-group-registration-page #btn-submit:hover,
.socle #eb-group-registration-page #btn-submit:focus,
.socle #eb-cart-page #btn-submit:hover,
.socle #eb-cart-page #btn-submit:focus,
.socle #eb-individual-registration-page .form-actions .btn-primary:hover,
.socle #eb-individual-registration-page .form-actions .btn-primary:focus {
  background: transparent;
  color: var(--link-color);
}

.socle #eb-individual-registration-page .form-actions {
  margin-top: 1.9rem;
}

/* Les moyens de paiement, en cartes */
.socle #eb-individual-registration-page .eb-payment-methods label,
.socle #eb-individual-registration-page .payment-method label,
.socle #eb-cart-page .eb-payment-methods label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .6rem;
  padding: .9rem 1rem;
  border: 1px solid var(--socle-filet-tunnel);
  border-radius: var(--socle-arrondi);
  background: color-mix(in srgb, var(--socle-accent) 5%, var(--socle-fond));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.socle #eb-individual-registration-page .eb-payment-methods label:hover,
.socle #eb-cart-page .eb-payment-methods label:hover {
  border-color: var(--socle-accent);
  background: var(--socle-fond);
}

.socle #eb-individual-registration-page .eb-payment-methods img,
.socle #eb-cart-page .eb-payment-methods img {
  width: auto;
  max-height: 28px;
}

@media (max-width: 767.98px) {
  .socle #eb-individual-registration-page,
  .socle #eb-group-registration-page,
  .socle #eb-cart-page {
    padding: 1.5rem 1.25rem 1.65rem;
  }
}

/* ------------------------------------------------------------------ page d'un contenu d'une rubrique */

/* Une colonne de lecture ; la date au-dessus du titre */
.socle-contenu {
  max-width: 46rem;
}

.socle-contenu__entete {
  margin-bottom: 1.5rem;
}

.socle-contenu__date {
  margin: 0 0 .5rem;
}

.socle-contenu__titre {
  margin: 0;
}

/* Le bouton « Modifier » (gestionnaire connecté) sur sa propre ligne : le cœur le fait flotter à droite (.float-end),
   le texte passait à côté, et un bloc qui suit (section en flex, overflow caché) se resserrait à côté du flottant ;
   le bloc contient maintenant son flottant, dans la page du cœur comme dans celle du socle */
.com-content-article .icons,
.socle-contenu .icons {
  display: flow-root;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ images des articles */

/* L'image d'un article : jamais plus large que la colonne */
.com-content-article .item-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* L'image d'un article au-dessus du texte, sur toute la largeur (le cœur la fait flotter à gauche : le texte se
   glissait dans l'espace restant) */
.com-content-article .item-image {
  float: none;
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------ annonces sur téléphone */

/* Repris du site de référence (bloc « bandeau d'annonce » de sa feuille SCSS, écrit ici en CSS) : sur téléphone (600 px et
   moins), une annonce à la fois, la suivante toutes les 5 secondes, en pause sous le doigt ou la souris. Une
   animation de cette feuille, sans script : les annonces sont empilées dans la même case, qui prend la hauteur de la
   plus haute, et la page ne bouge pas à l'affichage. La classe socle-annonces--N (N annonces, posée par le gabarit
   html/layouts/socle/entete.php) choisit l'animation de N annonces, de 2 à 8. Quand le visiteur a demandé moins
   d'animations (prefers-reduced-motion), elles s'affichent l'une sous l'autre. */
@media (max-width: 600px) {
  .socle-annonces {
    flex-direction: column;
    gap: 0;
  }

  .socle-annonces__annonce {
    padding: .2em 0;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .socle-annonces--2 {
    display: grid;
  }

  .socle-annonces--2 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-2 10s infinite;
  }

  .socle-annonces--2 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -5s;
  }

  .socle-annonces--3 {
    display: grid;
  }

  .socle-annonces--3 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-3 15s infinite;
  }

  .socle-annonces--3 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -10s;
  }

  .socle-annonces--3 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -5s;
  }

  .socle-annonces--4 {
    display: grid;
  }

  .socle-annonces--4 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-4 20s infinite;
  }

  .socle-annonces--4 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -15s;
  }

  .socle-annonces--4 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -10s;
  }

  .socle-annonces--4 .socle-annonces__annonce:nth-child(4) {
    animation-delay: -5s;
  }

  .socle-annonces--5 {
    display: grid;
  }

  .socle-annonces--5 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-5 25s infinite;
  }

  .socle-annonces--5 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -20s;
  }

  .socle-annonces--5 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -15s;
  }

  .socle-annonces--5 .socle-annonces__annonce:nth-child(4) {
    animation-delay: -10s;
  }

  .socle-annonces--5 .socle-annonces__annonce:nth-child(5) {
    animation-delay: -5s;
  }

  .socle-annonces--6 {
    display: grid;
  }

  .socle-annonces--6 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-6 30s infinite;
  }

  .socle-annonces--6 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -25s;
  }

  .socle-annonces--6 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -20s;
  }

  .socle-annonces--6 .socle-annonces__annonce:nth-child(4) {
    animation-delay: -15s;
  }

  .socle-annonces--6 .socle-annonces__annonce:nth-child(5) {
    animation-delay: -10s;
  }

  .socle-annonces--6 .socle-annonces__annonce:nth-child(6) {
    animation-delay: -5s;
  }

  .socle-annonces--7 {
    display: grid;
  }

  .socle-annonces--7 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-7 35s infinite;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -30s;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -25s;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(4) {
    animation-delay: -20s;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(5) {
    animation-delay: -15s;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(6) {
    animation-delay: -10s;
  }

  .socle-annonces--7 .socle-annonces__annonce:nth-child(7) {
    animation-delay: -5s;
  }

  .socle-annonces--8 {
    display: grid;
  }

  .socle-annonces--8 .socle-annonces__annonce {
    grid-row: 1;
    grid-column: 1;
    animation: socle-annonce-8 40s infinite;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(2) {
    animation-delay: -35s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(3) {
    animation-delay: -30s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(4) {
    animation-delay: -25s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(5) {
    animation-delay: -20s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(6) {
    animation-delay: -15s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(7) {
    animation-delay: -10s;
  }

  .socle-annonces--8 .socle-annonces__annonce:nth-child(8) {
    animation-delay: -5s;
  }

  .socle-annonces:hover .socle-annonces__annonce,
  .socle-annonces:active .socle-annonces__annonce,
  .socle-annonces:focus-within .socle-annonces__annonce {
    animation-play-state: paused;
  }
}

/* N annonces : chacune visible le Nième du tour, fondu enchaîné avec la suivante. visibility suit l'opacité : une
   annonce effacée ne reçoit pas le doigt destiné à celle qu'on voit. */
@keyframes socle-annonce-2 {
  0%,
  46% { opacity: 1; visibility: visible; }

  50%,
  96% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-3 {
  0%,
  30.67% { opacity: 1; visibility: visible; }

  33.33%,
  97.33% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-4 {
  0%,
  23% { opacity: 1; visibility: visible; }

  25%,
  98% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-5 {
  0%,
  18.4% { opacity: 1; visibility: visible; }

  20%,
  98.4% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-6 {
  0%,
  15.33% { opacity: 1; visibility: visible; }

  16.67%,
  98.67% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-7 {
  0%,
  13.14% { opacity: 1; visibility: visible; }

  14.29%,
  98.86% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

@keyframes socle-annonce-8 {
  0%,
  11.5% { opacity: 1; visibility: visible; }

  12.5%,
  99% { opacity: 0; visibility: hidden; }

  100% { opacity: 1; visibility: visible; }
}

/* ------------------------------------------------------------------ page hors ligne */

/* offline.php : une carte au centre, le nom du site, le message de la configuration, la connexion */
.socle-horsligne {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--socle-gouttiere);
}

.socle-horsligne__carte {
  width: min(32rem, 100%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--socle-filet);
  border-radius: var(--socle-arrondi);
  background: var(--socle-fond);
  text-align: center;
}

.socle-horsligne__marque {
  margin: 0 0 1rem;
}

.socle-horsligne__image {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.socle-horsligne__message {
  margin-bottom: 1.5rem;
}

.socle-horsligne__connexion {
  text-align: left;
}

.socle-horsligne__connexion label {
  display: block;
  margin: .75rem 0 .25rem;
}

.socle-horsligne__connexion .btn-primary {
  width: 100%;
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ modules habillés */

/* Le conteneur de l'habillage « socle » (html/layouts/chromes/socle.php) ne change rien à la mise en page : il ne porte
   que le suffixe de classe et, s'il est affiché, le titre du module */
.socle-module {
  display: contents;
}

/* ------------------------------------------------------------------ reCAPTCHA */

/* La mention écrite par le plugin « Captcha — reCAPTCHA v3 » sous le champ du captcha ; quand elle est dans la page, le
   badge de Google (collé en bas à droite, il recouvrait des boutons sur téléphone) est masqué — « visibility » et non
   « display » : le script de Google garde son badge en place */
.socle-recaptcha-mention {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--socle-texte-discret, inherit);
}

body:has(.socle-recaptcha-mention) .grecaptcha-badge {
  visibility: hidden;
}

/* ------------------------------------------------------------------ aperçu d'une apparence */

/* La barre d'aperçu (html/layouts/socle/apercu.php) : en bas de l'écran, au-dessus de la page, dans une présentation
   neutre qui ne change pas d'une apparence à l'autre */
.socle-apercu {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1080;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: .55rem .75rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  color: #22262a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

body:has(.socle-apercu) {
  padding-bottom: 5.5rem;
}

.socle-apercu form {
  margin: 0;
}

/* Une partie par aperçu (couleurs, apparence), l'une sous l'autre quand les deux sont en cours */
.socle-apercu__partie {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.socle-apercu__partie + .socle-apercu__partie {
  padding-top: .5rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.socle-apercu__pastilles {
  display: inline-flex;
  gap: .25rem;
  margin-right: auto;
}

.socle-apercu__pastille {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: .25rem;
}

.socle-apercu__choix,
.socle-apercu__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.socle-apercu__libelle {
  margin-right: .25rem;
  font-weight: 700;
}

.socle-apercu__liste {
  max-width: 13rem;
  padding: .3rem .5rem;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: .3rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.socle-apercu__fleche,
.socle-apercu__voir,
.socle-apercu__adopter,
.socle-apercu__revenir,
.socle-apercu__quitter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .3rem .7rem;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: .3rem;
  background: #fff;
  box-shadow: none;
  color: #22262a;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
}

.socle-apercu__fleche {
  min-width: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.socle-apercu__revenir {
  border-color: #22262a;
  background: #22262a;
  color: #fff;
}

.socle-apercu__adopter {
  border-color: #1f6f43;
  background: #1f6f43;
  color: #fff;
}

.socle-apercu a:hover,
.socle-apercu button:hover {
  border-color: rgba(0, 0, 0, .5);
}

.socle-apercu__adopter:hover {
  border-color: #18573a;
  background: #18573a;
}

@media print {
  .socle-apercu {
    display: none;
  }
}