/* =====================================================================
   Charte « Simpla » — DOM simple, grille Bootstrap NATIVE (chargée via le
   marqueur [BOOTSTRAP] du gabarit-head). La structure interne du contenu est
   générée par la balise {CONTENU}.

   PERSONNALISATION : tout passe par les variables :root ci-dessous
   (couleurs, espacements, rayons, police). Changer une charte = changer
   ces tokens, sans toucher au reste du fichier.
   ===================================================================== */

:root {
	/* — Couleurs de marque — */
	--simpla-primaire:        #1a5276;
	--simpla-primaire-fonce:  #134060;
	--simpla-accent:          #e67e22;

	/* — Neutres — */
	--simpla-texte:           #2b3640;
	--simpla-texte-doux:      #5a6b78;
	--simpla-fond:            #ffffff;
	--simpla-fond-doux:       #f4f7f9;
	--simpla-bordure:         #e2e8ec;

	/* — En-tête — */
	--simpla-topbar-fond:     var(--simpla-primaire-fonce);
	--simpla-topbar-texte:    #ffffff;
	--simpla-header-fond:     #ffffff;

	/* — Menu principal — */
	--simpla-menu-texte:       var(--simpla-primaire);
	--simpla-menu-actif-fond:  var(--simpla-primaire);
	--simpla-menu-actif-texte: #ffffff;

	/* — Pied de page — */
	--simpla-footer-fond:     var(--simpla-primaire);
	--simpla-footer-texte:    #ffffff;

	/* — Mise en page — */
	--simpla-rayon:           10px;
	--simpla-police:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	font-family: var(--simpla-police);
	color: var(--simpla-texte);
	background: var(--simpla-fond);
}

a            { color: var(--simpla-primaire); }
a:hover      { color: var(--simpla-primaire-fonce); }

/* ====================== En-tête (sticky) ====================== */

.simpla-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--simpla-header-fond);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.simpla-topbar {
	background: var(--simpla-topbar-fond);
	color: var(--simpla-topbar-texte);
	font-size: .85rem;
}
.simpla-topbar a { color: var(--simpla-topbar-texte); }

.simpla-topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	min-height: 38px;
}

.simpla-bar       { padding: .5rem 0; }
.simpla-logo img  { max-height: 96px; width: auto; height: auto; }

/* ====================== Menu principal horizontal ======================
   Sélecteurs volontairement spécifiques (tag + classe enchaînés) : la charte
   doit reprendre la main sur le CSS compilé hérité (css_0/css_<tpl>) qui se
   charge après ce fichier. Tout reste piloté par les tokens :root.            */

.simpla-nav ul.menu-principal-horizontal {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: .2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

.simpla-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item {
	position: relative;
	background: transparent;
}

.simpla-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item > a.menu-principal-horizontal-item-titre {
	display: block;
	padding: .55rem .9rem;
	border-radius: var(--simpla-rayon);
	background: transparent;
	color: var(--simpla-menu-texte);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.simpla-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:hover > a.menu-principal-horizontal-item-titre {
	background: var(--simpla-menu-actif-fond);
	color: var(--simpla-menu-actif-texte);
}

/* Sous-menus : déroulants au survol (desktop) */
@media (min-width: 992px) {
	.simpla-nav ul.menu-principal-horizontal ul.menu-principal-horizontal-submenu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 210px;
		margin: 0;
		padding: .35rem;
		background: #fff;
		border: 1px solid var(--simpla-bordure);
		border-radius: var(--simpla-rayon);
		box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s, transform .15s, visibility .15s;
		z-index: 1040;
	}
	.simpla-nav ul.menu-principal-horizontal > li.menu-principal-horizontal-item:hover > ul.menu-principal-horizontal-submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.simpla-nav ul.menu-principal-horizontal-submenu {
	list-style: none;
}
.simpla-nav ul.menu-principal-horizontal-submenu a {
	display: block;
	padding: .5rem .75rem;
	border-radius: 6px;
	background: transparent;
	color: var(--simpla-texte);
	text-decoration: none;
}
.simpla-nav ul.menu-principal-horizontal-submenu a:hover {
	background: var(--simpla-fond-doux);
	color: var(--simpla-primaire);
}

/* Sur mobile : menu empilé, sous-menus toujours visibles (pas de survol tactile) */
@media (max-width: 991.98px) {
	.simpla-nav ul.menu-principal-horizontal { flex-direction: column; justify-content: flex-start; }
	.simpla-nav ul.menu-principal-horizontal-submenu { position: static; opacity: 1; visibility: visible; transform: none; flex-direction: column; width: 100%; box-shadow: none; border: 0; padding-left: 1rem; }
}

/* ====================== Slider / bandeau ({BANDEAU}) ====================== */

.simpla-slider img { display: block; width: 100%; height: auto; }

/* ====================== Corps de page ====================== */

.simpla-main {
	padding: 2.5rem 0;
	min-height: 40vh;
}

.simpla-page-title {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--simpla-primaire);
	border-left: 4px solid var(--simpla-accent);
	padding-left: .7rem;
	margin-bottom: 1.5rem;
}

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

.simpla-footer {
	background: var(--simpla-footer-fond);
	color: var(--simpla-footer-texte);
	padding: 2.5rem 0 1rem;
	margin-top: 2.5rem;
}
.simpla-footer a { color: var(--simpla-footer-texte); text-decoration: underline; }

.simpla-footer .copyright {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: .85rem;
	text-align: center;
}