/* =====================================================================
   Socle commun des chartes 4.7 (TemplateMaker) — chargé par le gabarit-head
   de chaque charte AVANT son global.css. Pas de charte.json : non proposé
   dans « Choix du visuel ».

   Contient le code qui serait sinon répété dans chaque charte : menu principal
   (robuste face au JS du noyau), menu smartphone, menu de pied de page,
   couleurs des modules, focus clavier.

   Tout est piloté par les variables --socle-* ci-dessous. Une charte les relie
   à ses propres tokens dans son :root (ex. --socle-menu-texte: var(--claro-menu-texte)),
   ce qui garde l'éditeur « Couleurs de la charte » fonctionnel.

   Conteneurs attendus dans le gabarit-body : .charte-nav autour de
   {MENU-PRINCIPAL-H}, .charte-footer sur le pied de page.
   ===================================================================== */

:root {
	/* — Base — */
	--socle-primaire:               #1a5276;
	--socle-sur-primaire:           #ffffff;
	--socle-texte:                  #2b3640;
	--socle-fond:                   #ffffff;
	--socle-fond-doux:              #f4f7f9;
	--socle-bordure:                #e2e8ec;
	--socle-rayon:                  0;
	--socle-transition:             .2s ease-out;
	--socle-focus:                  2px solid var(--socle-primaire);

	/* — Menu principal — */
	--socle-menu-alignement:        right;        /* left | center | right */
	--socle-menu-espace:            .2rem;        /* entre deux entrées */
	--socle-menu-texte:             var(--socle-primaire);
	--socle-menu-taille:            1rem;
	--socle-menu-graisse:           600;
	--socle-menu-casse:             none;         /* none | uppercase */
	--socle-menu-hauteur:           0;            /* hauteur mini d'une entrée */
	--socle-menu-padding:           .55rem .9rem;
	--socle-menu-rayon:             var(--socle-rayon);
	--socle-menu-survol-fond:       var(--socle-primaire);
	--socle-menu-survol-texte:      var(--socle-sur-primaire);

	/* — Sous-menus — */
	--socle-sousmenu-largeur:       210px;
	--socle-sousmenu-padding:       0;
	--socle-sousmenu-fond:          var(--socle-fond);
	--socle-sousmenu-bordure:       1px solid var(--socle-bordure);
	--socle-sousmenu-rayon:         var(--socle-rayon);
	--socle-sousmenu-ombre:         0 10px 28px rgba(0, 0, 0, .13);
	--socle-sousmenu-texte:         var(--socle-texte);
	--socle-sousmenu-lien-padding:  .5rem .75rem;
	--socle-sousmenu-lien-rayon:    0;
	--socle-sousmenu-survol-fond:   var(--socle-fond-doux);
	--socle-sousmenu-survol-texte:  var(--socle-primaire);

	/* — Menu smartphone (bascule automatique, js/websee.js) — */
	--socle-mobile-cible:           44px;         /* hauteur mini des zones tactiles (RGAA) */
	--socle-mobile-bouton-fond:     var(--socle-primaire);
	--socle-mobile-bouton-texte:    var(--socle-sur-primaire);
	--socle-mobile-fond:            var(--socle-fond);
	--socle-mobile-bordure:         0;
	--socle-mobile-texte:           var(--socle-menu-texte);
	--socle-mobile-graisse:         var(--socle-menu-graisse);
	--socle-mobile-separateur:      1px solid var(--socle-bordure);
	--socle-mobile-sousmenu-fond:   var(--socle-fond-doux);
	--socle-mobile-sousmenu-texte:  var(--socle-texte);
	--socle-mobile-sousmenu-graisse: 400;
	--socle-mobile-sousmenu-survol: var(--socle-primaire);

	/* — Pied de page — */
	--socle-pied-separateur:        " | ";        /* entre les liens du menu de pied ; "" pour aucun */

	/* — Modules (titres de groupes, liens, sondage, agenda…) — */
	--socle-module-fond:            var(--socle-primaire);
	--socle-module-texte:           var(--socle-sur-primaire);
	--socle-module-lien:            var(--socle-primaire);
}

/* ============================== Focus clavier (RGAA) ============================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible      { outline: var(--socle-focus); outline-offset: 2px; }

/* ====================== Menu principal horizontal ({MENU-PRINCIPAL-H}) ======================
   Sélecteurs volontairement spécifiques (tag + classe enchaînés) : le socle doit
   reprendre la main sur style2.css et sur le CSS perso compilé (css_0/css_<tpl>)
   qui se charge après.                                                          */

.charte-nav ul.menu-principal-horizontal {
	/* display : NON déclaré — piloté par menu_resolution() (js/websee.js), qui force
	   display:block puis bascule sur le menu smartphone dès que le menu passe sur
	   2 lignes. Les entrées sont donc en inline-block (un flex serait écrasé). */
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: var(--socle-menu-alignement);
	background: transparent;
}

.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	float: none;
	margin: 0 calc(var(--socle-menu-espace) / 2);
	background: transparent;
}

.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item > a.menu-principal-horizontal-item-titre {
	display: flex;
	align-items: center;
	min-height: var(--socle-menu-hauteur);
	padding: var(--socle-menu-padding);
	border-radius: var(--socle-menu-rayon);
	background: transparent;
	color: var(--socle-menu-texte);
	font-size: var(--socle-menu-taille);
	font-weight: var(--socle-menu-graisse);
	text-transform: var(--socle-menu-casse);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--socle-transition), color var(--socle-transition);
}

.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:hover > a.menu-principal-horizontal-item-titre,
.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:focus-within > a.menu-principal-horizontal-item-titre {
	background: var(--socle-menu-survol-fond);
	color: var(--socle-menu-survol-texte);
}

/* Sous-menus : ouverts au survol ET au clavier/tap (:focus-within, RGAA).
   `!important` assumé : open_submenu() (js/websee.js, clic sur un groupe) pose un
   display en ligne qui, sinon, laisse un sous-menu collé ouvert ou bloque tous les
   survols (display:none en ligne). La CSS reprend la main sur l'état d'ouverture.  */
.charte-nav ul.menu-principal-horizontal ul.menu-principal-horizontal-submenu {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: var(--socle-sousmenu-largeur);
	margin: 0;
	padding: var(--socle-sousmenu-padding);
	list-style: none;
	text-align: left;
	background: var(--socle-sousmenu-fond);
	border: var(--socle-sousmenu-bordure);
	border-radius: var(--socle-sousmenu-rayon);
	box-shadow: var(--socle-sousmenu-ombre);
	z-index: 1040;
}
.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:hover > ul.menu-principal-horizontal-submenu,
.charte-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:focus-within > ul.menu-principal-horizontal-submenu {
	display: block !important;
}

.charte-nav li.menu-principal-horizontal-submenu-item { background: transparent; }
.charte-nav a.menu-principal-horizontal-submenu-item-titre {
	display: block;
	padding: var(--socle-sousmenu-lien-padding);
	border-radius: var(--socle-sousmenu-lien-rayon);
	background: transparent;
	color: var(--socle-sousmenu-texte);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color var(--socle-transition), color var(--socle-transition);
}
.charte-nav a.menu-principal-horizontal-submenu-item-titre:hover,
.charte-nav a.menu-principal-horizontal-submenu-item-titre:focus-visible {
	background: var(--socle-sousmenu-survol-fond);
	color: var(--socle-sousmenu-survol-texte);
}

/* ====================== Menu smartphone ======================
   Affiché par menu_resolution() (js/websee.js) quand le menu horizontal ne tient
   plus sur une ligne ; volets ouverts/fermés par le script de MenuGenerator.      */

.charte-nav .menu-principal-smartphone-menu {
	float: none;
	width: 100%;
	padding: 0;
	text-align: left;
}

.charte-nav a.menu-principal-smartphone-menu-dropdown {
	display: flex;
	width: auto;   /* style2.css : width 100% + padding = débordement */
	align-items: center;
	gap: .6rem;
	min-height: var(--socle-mobile-cible);
	padding: 0 1rem;
	border-radius: var(--socle-menu-rayon);
	background: var(--socle-mobile-bouton-fond);
	color: var(--socle-mobile-bouton-texte);
	font-size: var(--socle-menu-taille);
	font-weight: 600;
	text-decoration: none;
}
.charte-nav .menu-principal-smartphone-menu-dropdown::before { float: none; margin: 0; }

.charte-nav ul.menu-principal-smartphone {
	margin: .5rem 0 0;
	padding: 0;
	font-size: var(--socle-menu-taille);
	background: var(--socle-mobile-fond);
	border: var(--socle-mobile-bordure);
	border-radius: var(--socle-menu-rayon);
	overflow: hidden;
}
.charte-nav ul.menu-principal-smartphone li               { padding: 0; }
.charte-nav li.menu-principal-smartphone-item            { border-bottom: var(--socle-mobile-separateur); }
.charte-nav li.menu-principal-smartphone-item:last-child { border-bottom: 0; }
.charte-nav li.menu-principal-smartphone-item-separator  { display: none; }

.charte-nav a.menu-principal-smartphone-item-titre,
.charte-nav a.menu-principal-smartphone-submenu-item-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--socle-mobile-cible);
	padding: 0 1rem;
	color: var(--socle-mobile-texte);
	font-weight: var(--socle-mobile-graisse);
	text-decoration: none;
}
.charte-nav a.menu-principal-smartphone-item-titre.active,
.charte-nav a.menu-principal-smartphone-item-titre:hover {
	background: var(--socle-menu-survol-fond);
	color: var(--socle-menu-survol-texte);
}
.charte-nav .menu-principal-smartphone-item-with-sub .menu-principal-smartphone-item-titre::after { float: none; }

.charte-nav ul.menu-principal-smartphone-submenu            { background: var(--socle-mobile-sousmenu-fond); }
.charte-nav li.menu-principal-smartphone-submenu-item       { padding-left: 0; }
.charte-nav a.menu-principal-smartphone-submenu-item-titre  {
	padding-left: 2rem;
	color: var(--socle-mobile-sousmenu-texte);
	font-weight: var(--socle-mobile-sousmenu-graisse);
}
.charte-nav a.menu-principal-smartphone-submenu-item-titre:hover { color: var(--socle-mobile-sousmenu-survol); }

/* ============================== Pied de page ============================== */

.charte-footer .menu-pied-de-page-submenu-item::after            { content: var(--socle-pied-separateur); padding-right: 4px; }
.charte-footer .menu-pied-de-page-submenu-item:last-child::after { content: ""; }

/* ============================== Modules ============================== */

.un-lien-liste,
.sondage-bar-vote,
.sondage-bar-your-vote,
.telechargement-groupe-nom,
.un-article-detail-popup-header,
.calendrier-titre,
.phototheque-classic-nom,
.phototheque-legende-nom,
.liens-liste-groupe-titre {
	background-color: var(--socle-module-fond);
	color: var(--socle-module-texte);
}
.un-lien-liste-contenu      { color: var(--socle-module-lien); }

.un-lien-liste-header,
.un-lien-liste-footer,
a.un-lien-liste-email, a.un-lien-liste-website, a.un-lien-liste-geloc-icon,
a.un-lien-liste-telephone-fixe, a.un-lien-liste-telephone-fax, a.un-lien-liste-telephone-portable,
.un-lien-liste-email::before, .un-lien-liste-website::before, .un-lien-liste-geloc-icon::before,
.un-lien-liste-telephone-fixe::before, .un-lien-liste-telephone-fax::before,
.un-lien-liste-telephone-portable::before { color: var(--socle-module-texte); }

table.ui-datepicker-calendar tbody td.specialDay a {
	border: 1px solid var(--socle-module-fond);
	background: var(--socle-module-fond);
	color: var(--socle-module-texte);
}