/* =========================================================
   Base — overrides GeneratePress
   Typographie, couleurs de fond, liens, listes à puces.
   ========================================================= */

/* --- Corps de texte + sticky footer ---
   GP place header ET footer EN DEHORS de #page → le conteneur flex doit être body.
   body → header (naturel) + #page (flex:1) + footer (naturel) = 100vh minimum. */
body {
	background-color: var(--ra-creme);
	color: var(--ra-noir);
	font-family: var(--ra-font-corps);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: var(--ra-header-h);
}

#page {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* Sans width: 100%, margin: auto de .grid-container force #page à se
	   dimensionner sur son contenu en contexte flex — les pages avec CSS Grid
	   ou tableau restent plus étroites que les pages à texte long. */
	width: 100%;
}

.site-content {
	flex: 1;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ra-font-titres);
	color: var(--ra-noir);
}

h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h2 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

/* --- Liens --- */
a {
	color: var(--ra-rouge);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--ra-rouge-hover);
}

/* --- Navigation principale (desktop) --- */

.main-navigation { align-self: stretch; }

.main-navigation .inside-navigation {
	display: flex;
	align-items: stretch;
	height: 100%;
	padding: 0;
}

.main-navigation .menu {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Liens de premier niveau */
.main-navigation .menu > .menu-item > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1rem;
	font-family: var(--ra-font-titres);
	font-size: 1rem;
	color: var(--ra-noir);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.14s;
}

.main-navigation .menu > .menu-item:hover > a,
.main-navigation .menu > .menu-item:focus-within > a,
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current-menu-ancestor > a {
	color: var(--ra-rouge) !important;
}

/* Dropdown ardoise */
.main-navigation .sub-menu {
	background-color: var(--ra-ardoise);
	border: none;
	box-shadow: none !important;
	padding: 0;
	min-width: 210px;
}

.main-navigation .sub-menu .menu-item > a,
.main-navigation .sub-menu .menu-item > a:visited {
	display: block;
	padding: 0.75rem 1.25rem 0.75rem 1rem;
	font-family: var(--ra-font-titres);
	font-size: 0.8125rem;
	color: var(--ra-blanc-85) !important;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: color 0.13s, border-color 0.13s, background-color 0.13s;
}

.main-navigation .sub-menu .menu-item:hover > a,
.main-navigation .sub-menu .menu-item > a:focus {
	color: var(--ra-blanc) !important;
	border-left-color: var(--ra-rouge);
	background-color: rgba(255, 255, 255, 0.05);
}

.main-navigation .sub-menu .current-menu-item > a {
	color: var(--ra-blanc) !important;
	border-left-color: var(--ra-rouge);
}

/* --- Navigation mobile --- */
@media (max-width: 1250px) {

	/* Barres rouges */
	.menu-toggle {
		color: var(--ra-rouge) !important;
	}

	/* Bouton repositionné dans la zone header via fixed */
	#site-navigation .menu-toggle {
		position: fixed;
		top: calc(var(--ra-admin-bar-h) + (var(--ra-header-h) - 44px) / 2);
		right: 1rem;
		width: 44px;
		padding: 10px;
		z-index: 202;
	}

	/* Panneau sous le header */
	#site-navigation {
		position: fixed !important;
		top: calc(var(--ra-admin-bar-h) + var(--ra-header-h)) !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 190;
		max-height: calc(100vh - var(--ra-admin-bar-h) - var(--ra-header-h));
		overflow-y: auto;
		background-color: var(--ra-ardoise) !important;
		margin: 0 !important;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.28s ease;
	}

	#site-navigation.toggled {
		clip-path: inset(0 0 0% 0) !important;
	}

	#site-navigation.toggled .main-nav > ul > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#site-navigation.toggled .main-nav > ul > li > a {
		display: block;
	}

	#site-navigation.toggled .main-nav a {
		color: var(--ra-blanc-85) !important;
	}

	#site-navigation.toggled .main-nav > ul > li > a {
		border-left: 3px solid transparent;
	}

	#site-navigation.toggled .main-nav a:hover,
	#site-navigation.toggled .main-nav li[class*="current-menu"] > a {
		color: var(--ra-blanc) !important;
	}

	#site-navigation.toggled .main-nav > ul > li[class*="current-menu"] > a {
		border-left-color: var(--ra-rouge) !important;
	}

	/* Sous-menus — indentation */
	#site-navigation.toggled .main-nav ul ul.toggled-on li a {
		padding-left: 2.5rem !important;
	}

	/* Item fictif (href="#") : flèche rouge */
	#site-navigation.toggled .main-nav > ul > li:has(> a[href="#"]) .dropdown-menu-toggle {
		color: var(--ra-rouge) !important;
	}
}

/* --- Navigation --- */
.menu-item-has-children .dropdown-menu-toggle {
	padding-right: 10px;
}

/* --- Listes à puces : motif balle de tennis de table ---
   Utilise un disque plein (•) comme base ; sera remplacé par
   une illustration SVG balle aux lots suivants si nécessaire. */
ul:not([class]) li::marker,
.entry-content ul li::marker {
	color: var(--ra-rouge);
}

/* --- Fond des cartes / sections blanches --- */
.inside-article,
.widget,
.site-main .page,
.site-main .post {
	background-color: var(--ra-blanc);
}

/* --- Barre d'admin WordPress (admin connecté uniquement) ---
   WP ajoute .admin-bar sur <body> et html { margin-top } selon la hauteur de la barre.
   On surcharge --ra-admin-bar-h pour que tous les éléments fixed s'ajustent via la variable. */
.admin-bar                              { --ra-admin-bar-h: 32px; }
@media screen and (max-width: 782px)   { .admin-bar { --ra-admin-bar-h: 46px; } }
/* WP passe la barre en position:absolute à ≤600px — on la force fixed pour éviter le bandeau vide. */
@media screen and (max-width: 600px) { #wpadminbar { position: fixed !important; } }

/* --- Header --- */
.site-header {
	position: fixed;
	top: var(--ra-admin-bar-h);
	left: 0;
	right: 0;
	z-index: 200;
	background-color: var(--ra-blanc);
}

.inside-header {
	padding: 4px 20px;
}

.inside-header.grid-container {
	max-width: 100%;
}

.main-title,
.site-description {
	display: none;
}

/* --- Boutons GP --- */
/* GP 3.x code ses couleurs en dur dans main.min.css (pas de CSS vars).
   Les surcharges de boutons seront ajoutées ici au fur et à mesure des lots. */

/* --- tarteaucitron — masquer "En savoir plus" du bandeau, conservé dans la popup --- */
#tarteaucitronPrivacyUrl { display: none; }

/* --- tarteaucitron — layout bandeau : texte gauche, boutons droite ---
   Sélecteur d'attribut : le flex ne s'applique que quand tarteaucitron
   affiche le bandeau (style="display: block") — évite d'écraser le
   display:none appliqué par JS une fois le choix fait. */
#tarteaucitronAlertBig[style*="display: block"],
#tarteaucitronAlertBig[style*="display:block"] {
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.75rem 0.5rem !important;
	padding: 0.75rem 2rem !important;
}

#tarteaucitronDisclaimerAlert {
	flex: 1 1 200px !important;
}