/**
 * Nom du fichier : stylerepere.css
 * Version : v5.5 - 03/10/2026 00:50
 *
 * Modifications v5.5 : .header-wrap-clone de nouveau affichée en permanence (annule
 *   la v5.2) : sans elle le contenu remonte sous le menu. Hauteur exacte fixée en JS.
 *
 * Modifications v5.4 : suppression du margin-top admin sur .header-wrap-clone (bande
 *   vide sous le menu collé quand la barre d'administration est affichée).
 *
 * Modifications v5.3 : menu collé (sticky) sans ombre ni bordure (bande sombre
 *   apparaissant d'un coup au scroll) ; la hauteur de .header-wrap-clone est calée
 *   sur celle de #header-wrap par hautpage.php v2.2 (plus de saut ni d'espace vide).
 *
 * Modifications v5.2 : .header-wrap-clone masquée hors sticky (bande vide sous le menu).
 *
 * Modifications v5.1 : couleurs du header issues de la configuration du site
 *   (configsite.php → accesbdd.php → $couleur, injectée par hautpage.php en
 *   --mh-couleur) : survol + rubrique active du menu, bordure haute des sous-menus,
 *   lettres-repères et liens vedette du méga-menu, lignes de séparation (couleur du
 *   site mélangée à de la transparence : --mh-ligne-couleur). Les couleurs de texte
 *   restent celles de la config typographie (--font-menu-color, etc.).
 *
 * Modifications v5.0 : NETTOYAGE du header (avec hautpage.php v2.0 et
 *   menuhorizontal.php v2.0). Retour au balisage natif Canvas, suppression des
 *   surcouches contradictoires :
 *   - Thème du header : clé "#header.dark" / "#top-bar.dark" (classe Canvas native,
 *     pilotée par $config_header_sombre) au lieu de "body.dark #header…".
 *     body.dark reste utilisé pour le thème de la PAGE.
 *   - Semi-transparences sombres : top-bar 0.30, ligne logo 0.50, barre de menu
 *     0.85 (rendu identique à 0.50 + 0.70 superposés). Plus de fond posé sur tout
 *     le #header → plus de débordement sous la ligne du menu (remplace la v4.6).
 *   - "li.menu-item{display:flex}" + zone de clic pleine hauteur limités au desktop :
 *     corrige à la source les sous-menus mobiles ouverts à droite et les flèches
 *     décentrées (les correctifs mobiles en !important de hautpage.php sont supprimés).
 *   - Top-bar visible en mobile (colonne droite masquée par d-none d-lg-flex).
 *   - Logo : hauteur pilotée par --mh-logo-h-desktop / --mh-logo-h-mobile
 *     (ancien max-height:120px + margin-top:-15px supprimé).
 *   - Bannière : centrée au-dessus du logo (ancien order:-1 / flex latéral retirés).
 *   - CSS déplacé depuis les PHP : bouton zoom (.mh-az-*), clignotement admin,
 *     bouton "Votre page", badge NEWS, override lecteur podcast, .mh-ico-20,
 *     anti-bande blanche du sticky (#header-wrap will-change, desktop).
 *   - Couleur du sticky : variables --mh-sticky-bg / --mh-sticky-bg-sombre.
 *
 * Modifications v4.5 : object-fit:cover (v4.4) recadrait l'image → retour à
 *   object-fit:contain sur .banniere-pub-header .ban-item img (desktop ET
 *   mobile) : l'image reste toujours visible en intégralité dans la taille
 *   donnée (largeur/hauteur définies dans contenu_style_banniere.php), quitte
 *   à laisser un espace vide sur les côtés ou en haut/bas si son ratio ne
 *   correspond pas exactement au conteneur. Cadre arrondi et ombrage restent
 *   supprimés (inchangé depuis v4.4).
 *
 * Modifications v4.4 : Bannière header (SECTION 14, .banniere-pub-header) :
 *   suppression du cadre arrondi (border-radius) et de l'ombrage intérieur
 *   (pseudo-élément ::after) sur demande utilisateur. L'image ne respecte
 *   plus son ratio d'origine avec bandes vides (object-fit:contain) mais
 *   remplit exactement la taille donnée dans contenu_style_banniere.php
 *   ($banniere_largeur/$banniere_hauteur en desktop, $banniere_largeur_mobile/
 *   $banniere_hauteur_mobile en mobile), recadrée si besoin (object-fit:cover).
 *   Retrait de l'aspect-ratio forcé (728/90) en mobile qui entrait en conflit
 *   avec la taille exacte demandée par les nouvelles variables mobile.
 *
 * Modifications : Suppression .bloc-admin-bas (plus utilisé depuis barre admin fixe),
 *   suppression section diaporama commentée, suppression #box (inutilisé),
 *   regroupement des deux blocs :root.
 *   v4.3 : Ajout du menu mobile bottom bar style application (section 18).
 *   Barre fixe en bas d'écran sur mobile uniquement, avec 3-4 icônes
 *   (Accueil, Réseaux sociaux, Partage, Contact). Le top-bar est masqué
 *   sur mobile car ses fonctions sont reprises par la bottom bar.
 *   v4.2 : Déplacement de 3 blocs CSS statiques depuis menuhorizontal.php (rec 28) :
 *   logo header, séparateur menu, et diaporama trigger (~100 lignes).
 *   Aucun changement visuel — styles identiques, maintenant cacheables.
 *
 * === DESCRIPTION UTILISATEUR ===
 * Styles personnalisés du site. Chargé après style.css et colors.php.
 * Les styles dynamiques (couleur, fond de page) restent dans index.php car ils
 * dépendent de variables PHP ($couleur, $fondpage, etc.)
 */

/* ============================================
   SECTION 1 : TYPOGRAPHIE
   ============================================ */

/* Titres : poids normal par défaut (personnalisable via le CMS) */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal !important;
}

/* ============================================
   SECTION 1b : TITRES SÉMANTIQUES (SEO)
   Les balises h1-h6 sont utilisées pour la structure sémantique
   mais doivent conserver l'apparence visuelle d'origine (div/span).
   Ces classes annulent les styles par défaut des headings.
   ============================================ */

/* Texte de rubrique (haut de page) — visuellement identique à un div */
.h-rubrique {
	display: block;
	font-size: inherit;
	font-weight: inherit !important;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

/* Titre d'article — visuellement identique au style .titre existant */
.h-article {
	display: inline;
	font-size: inherit;
	font-weight: inherit !important;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

/* Chapeau et texte — visuellement identiques à un div */
.h-chapeau,
.h-texte {
	display: block;
	font-size: inherit;
	font-weight: inherit !important;
	line-height: inherit;
	margin: 0;
	padding: 0;
}

/* Classe utilitaire pour remplacer la balise <center> dépréciée */
.text-center {
	text-align: center;
}

/* Zones éditables en mode inline : span se comporte comme un block
   quand il est à l'intérieur d'un heading (h1, h2, h3...)
   car <div> n'est pas valide dans un heading HTML */
.bloc-texte-block {
	display: block;
}

/* Police pour l'interface admin */
.policeadmin {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" !important;
}

/* Paragraphes : reset des marges internes, line-height lisible (WCAG: min 1.5) */
p {
	padding: 0 !important;
	border: 0 !important;
	vertical-align: baseline !important;
	line-height: 1.4 !important;
	font-size: 1em;
}

/* Liens : style par défaut gras + souligné */
a {
	font-weight: bold;
	text-decoration: underline;
}

/* ============================================
   SECTION 2 : NAVIGATION / MENU
   ============================================ */

/* Liens du menu principal : typographie configurable via variables CSS
   Les variables --font-menu-* sont générées par accesbdd.php depuis la config admin.
   Toutes les propriétés sont en !important pour résister aux CSS des pages intérieures
   (articles, modules) qui peuvent redéfinir a, li, ul de façon globale. */
.menu-link {
	font-family: var(--font-menu) !important;
	font-weight: var(--font-menu-weight, bold) !important;
	font-size: var(--font-menu-size, 14px) !important;
	color: var(--font-menu-color, inherit) !important;
	text-transform: none !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
}

/* Isolation du header : empêche les CSS des pages intérieures de perturber
   les propriétés héritées dans le bloc #header (font-size sur li/a/ul notamment). */
#header,
#header #header-wrap,
#header .primary-menu,
#header .primary-menu ul,
#header .primary-menu li {
	font-size: revert !important;
	line-height: revert !important;
	letter-spacing: revert !important;
}

/* Hauteur compacte de la barre de navigation : colle au texte avec une petite marge.
   Canvas impose une min-height et un padding vertical importants sur header-wrap
   et sur les liens de premier niveau — on les réduit ici. */
#header-wrap {
	min-height: unset !important;
}
#header-wrap .header-row {
	min-height: unset !important;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
#header .primary-menu > ul > li > a.menu-link {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	line-height: 1.2 !important;
}

/* ============================================
   SECTION 2b : TYPOGRAPHIE DU CONTENU
   ============================================ */

/* Texte de rubrique (haut de page) et intérieur des articles */
.h-rubrique,
.h-chapeau,
.h-texte,
#chapeau,
#texte {
	font-family: var(--font-contenu, inherit);
	font-weight: var(--font-contenu-weight, inherit) !important;
	font-size: var(--font-contenu-size, inherit);
	color: var(--font-contenu-color, inherit);
}

/* Force l'héritage de couleur pour les <span> imbriqués dans les blocs de contenu.
   Sans cette règle, les styles du framework (dark.css / style.css) peuvent
   appliquer une couleur différente sur les <span>, causant une incohérence
   entre les textes avec et sans balise <span> dans le chapeau/texte. */
.h-rubrique span,
.h-chapeau span,
.h-texte span,
#chapeau span,
#texte span {
	color: inherit !important;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
}

/* Titres d'articles (h2 en liste, h1 en page article) */
.h-article,
.h-article a {
	font-family: var(--font-titres, inherit) !important;
	font-weight: var(--font-titres-weight, inherit) !important;
	font-size: var(--font-titres-size, inherit);
	color: var(--font-titres-color, inherit);
}

/* Survol des liens du menu */
.primary-menu ul li > a:hover {
	color: var(--mh-couleur, #949494) !important; /* couleur du site (config) */
}

/* Rubrique sélectionnée dans le menu */
.primary-menu ul li.current > a,
.primary-menu div ul li.current > a {
	color: var(--mh-couleur, #000) !important; /* couleur du site (config) */
}

/* ============================================
   SECTION 3 : MISE EN PAGE
   ============================================ */

/* Fond transparent pour le conteneur principal */
.transparent {
	background-color: transparent !important;
}

/* Conteneurs transparents */
.container,
#stretched,
#full-header {
	background-color: transparent !important;
}

/* La section #content reçoit son fond via $fondarticle (inline style).
   Elle reste transparente en mode sombre (body.dark #content ci-dessous). */

/* Correction : le dernier bloc de grille ne doit pas être coupé.
   Isotope positionne les items en absolute et peut sous-estimer la hauteur
   du conteneur (surtout quand les boutons admin ajoutent de la hauteur après
   le calcul). On force overflow:visible sur les wrappers et on ajoute un
   padding-bottom de sécurité sur la grille. */
section#content,
section#content .content-wrap {
	overflow: visible !important;
}

#portfolio.portfolio {
	padding-bottom: 60px;
}

/* Images centrées horizontalement dans les blocs articles */
.portfolio-image {
	text-align: center;
}

/* Marge interne du titre et du texte dans les blocs articles */
.portfolio-desc {
	padding: 15px 12px !important;
}

.portfolio-image img {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

/* Overlay cliquable sur toute la surface de l'image.
   Le lien unique (<a>) remplit tout le conteneur overlay,
   l'icône reste centrée visuellement. */
.portfolio-image .bg-overlay-content {
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.portfolio-image .bg-overlay-content > a.overlay-trigger-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: transparent !important;
}

.portfolio-image .bg-overlay-content > a.overlay-trigger-icon > i {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-size: 18px;
	transition: transform 0.2s ease;
}

.portfolio-image .bg-overlay-content > a.overlay-trigger-icon:hover > i {
	transform: scale(1.15);
}

/* ============================================
   SECTION 3c : LIGHT THEME — FONDS
   Rend #wrapper transparent pour laisser apparaître l'image de fond du body.
   Sans cette règle, Canvas applique un fond blanc opaque sur #wrapper qui
   cache complètement l'image (contrairement au mode dark qui est déjà corrigé).
   ============================================ */

/* Voile blanc sur #wrapper : laisse l'image de fond du body transparaître très discrètement.
   0.90 = image très atténuée (10% visible). Ajuster vers 0.85 pour plus d'image, 0.95 pour moins.
   Le voile est ici et non sur #content, pour que $fondarticle (inline style) reste prioritaire
   sur les pages incluant contenu.php. */
#wrapper {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

/* #content et .content-wrap transparents : le voile blanc de #wrapper suffit.
   $fondarticle peut injecter un fond opaque via inline style — on l'écrase ici. */
#content,
.content-wrap {
	background-color: transparent !important;
}

/* Quand vidéo en fond de page, le CMS injecte un fond blanc sur le .container
   enfant de .content-wrap via inline style — on l'écrase. */
section#content.transparent .container {
	background-color: transparent !important;
}

/* ============================================
   SECTION 3b : DARK THEME — FONDS & MENU
   Palette sombre moderne, ombre sous le menu.
   Le header reste transparent (pas de fond).
   ============================================ */

/* --- Page & corps : fond plus profond --- */
body.dark {
	background-color: #101014 !important;
}

/* Wrapper global — cohérent avec le body */
body.dark #wrapper {
	background-color: transparent !important;
}

/* Header sombre (fonds, sticky, sous-menus, couleurs du menu) : voir SECTION 2c,
   piloté par la classe Canvas .dark sur #header (v5.0). */

/* --- Section contenu / zones de contenu --- */
/* body.dark #content,
body.dark .content-wrap {
	background-color: transparent !important;
} */
/* --- Section contenu : fond noir semi-transparent sous le contenu --- */
body.dark #content {
	background-color: rgba(0, 0, 0, 0.445) !important;
}

body.dark .content-wrap {
	background-color: transparent !important;
}
/* Footer dark : géré en section 8 */

/* --- Cartes / blocs articles : transparent en mode clair pour laisser voir le fond de page --- */
.portfolio-item .grid-inner {
	background-color: transparent !important;
}

/* --- Cartes / blocs articles : fond subtil en mode sombre --- */
body.dark .portfolio-item .grid-inner {
	background-color: rgba(255, 255, 255, 0.025) !important;
}

/* --- Séparateur horizontal adapté au dark --- */
body.dark hr {
	background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
}

/* --- Fond article en mode dark (override du rgba inline) --- */
body.dark .ifondarticle,
body.dark [style*="background-color: rgba(0, 0, 0"] {
	background-color: rgba(0, 0, 0, 0.35) !important;
}

/* ============================================
   SECTION 4 : VIDÉO
   ============================================ */

/* Conteneur vidéo responsive (ratio dynamique via JS) */
.video-container {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 1);
}

.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ============================================
   SECTION 5 : ARTICLES EN MODE PLEINE PAGE
   ============================================ */

/* Quand un article est affiché en entier, les images reprennent leur largeur naturelle */
/* Note : la classe .article-entier-images est ajoutée dynamiquement par PHP sur <body> */
.article-entier-images img {
	width: auto !important;
}

/* ============================================
   SECTION 7 : ADMINISTRATION
   ============================================ */

/* Marge autour du bloc de boutons admin */
.bloc-admin {
	margin: 60px;
}

/* Message "visite non comptabilisée" pour l'admin */
.admin-visite-info {
	text-align: center;
	color: #ff0000;
}

/* Zone de login centrée */
.zone-login {
	margin-top: 30px;
	margin-bottom: 100px;
}

/* ============================================
   SECTION 8 : FOOTER
   Footer compact : une seule bande avec transition en dégradé depuis la page.
   Infos site à gauche, bouton Partager à droite.
   ============================================ */

/* Footer en aplat semi-transparent avec une fine ligne de transition en haut.
   Le dégradé ne couvre que les 14 premiers px (invisible sous le contenu),
   le reste est un aplat uni. */
#footer {
	background: linear-gradient(to bottom,
		transparent 0px,
		rgba(0, 0, 0, 0.72) 14px,
		rgba(0, 0, 0, 0.72) 100%) !important;
	padding-top: 10px !important;
	border-top: none !important;
}

/* Copyrights : bande compacte */
#copyrights {
	padding: 10px 0 !important;
	background: transparent !important;
	border-top: none !important;
}

/* Textes du footer */
#footer .footer-lien-admin,
#footer .footer-lien-admin a,
#footer .footer-lien-reperecom,
#footer .footer-avis-google a {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	text-decoration: none;
	margin: 0;
}

#footer .footer-lien-admin a:hover,
#footer .footer-lien-reperecom:hover,
#footer .footer-avis-google a:hover {
	color: rgba(255, 255, 255, 0.85);
}

/* Bouton Partager — plus grand, à droite */
.footer-btn-partager {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 22px;
	border-radius: 25px;
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.80) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.20);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
}

.footer-btn-partager i {
	font-size: 18px;
	line-height: 1;
}

.footer-btn-partager:hover {
	background: rgba(255, 255, 255, 0.20);
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.40);
	text-decoration: none !important;
}

/* Mode sombre : footer plus profond, garde la transition */
body.dark #footer {
	background: linear-gradient(to bottom,
		transparent 0px,
		#0b0b0e 14px,
		#0b0b0e 100%) !important;
	border-top: none !important;
}

body.dark #copyrights {
	background: transparent !important;
}

/* ============================================
   SECTION 9 : NOTIFICATION COPIE LIEN
   ============================================ */

/* Notification "Lien copié" qui apparaît en haut à droite */
#copyNotification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 10px 15px;
	border-radius: 5px;
	z-index: 9999;
	display: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SECTION 11 : ÉLÉMENTS DÉCORATIFS
   ============================================ */

/* Séparateur horizontal avec dégradé */
hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* ============================================
   SECTION 12 : BOUTONS MODERNES 3D
   ============================================ */

/* Variables CSS globales (boutons 3D + barre admin) */
:root {
	/* Barre d'administration */
	--admin-toolbar-h: 0px;

	/* Boutons modernes 3D — palette 1 */
	--color-start-1: #e83e8c;
	--color-end-1: #5e60ce;
	--color-active-start-1: #d23277;
	--color-active-end-1: #4b4cb3;
	--color-pulse-1: rgba(232, 62, 140, 0.4);

	--color-start-2: #3498db;
	--color-end-2: #2ecc71;
	--color-active-start-2: #2980b9;
	--color-active-end-2: #27ae60;
	--color-pulse-2: rgba(52, 152, 219, 0.4);

	--color-start-3: #ff7700;
	--color-end-3: #ffbb00;
	--color-active-start-3: #e56b00;
	--color-active-end-3: #e5a800;
	--color-pulse-3: rgba(255, 119, 0, 0.4);

	--color-start-4: #e74c3c;
	--color-end-4: #ff9500;
	--color-active-start-4: #c0392b;
	--color-active-end-4: #e67e22;
	--color-pulse-4: rgba(231, 76, 60, 0.4);

	--color-start-5: #1abc9c;
	--color-end-5: #4cd137;
	--color-active-start-5: #16a085;
	--color-active-end-5: #44bd32;
	--color-pulse-5: rgba(26, 188, 156, 0.4);
}

/* Style de base du bouton 3D */
.bouton-moderne-3d {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 32px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	color: white;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
		0 6px 6px rgba(0, 0, 0, 0.2),
		inset 0 2px 2px rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	transform-style: preserve-3d;
	transform: perspective(1000px) translateZ(0);
	background: linear-gradient(135deg, var(--color-start-1) 0%, var(--color-end-1) 100%);
}

/* Palettes de couleurs */
.bouton-moderne-3d[data-color="1"] { background: linear-gradient(135deg, var(--color-start-1) 0%, var(--color-end-1) 100%); }
.bouton-moderne-3d[data-color="2"] { background: linear-gradient(135deg, var(--color-start-2) 0%, var(--color-end-2) 100%); }
.bouton-moderne-3d[data-color="3"] { background: linear-gradient(135deg, var(--color-start-3) 0%, var(--color-end-3) 100%); }
.bouton-moderne-3d[data-color="4"] { background: linear-gradient(135deg, var(--color-start-4) 0%, var(--color-end-4) 100%); }
.bouton-moderne-3d[data-color="5"] { background: linear-gradient(135deg, var(--color-start-5) 0%, var(--color-end-5) 100%); }

/* Effet de lumière supérieure */
.bouton-moderne-3d::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
	border-radius: 12px 12px 0 0;
	pointer-events: none;
}

/* Effet de halo au survol */
.bouton-moderne-3d::before {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	border-radius: 50%;
	opacity: 0;
	transition: transform 0.5s ease, opacity 0.5s ease;
	pointer-events: none;
}

.bouton-moderne-3d .texte,
.bouton-moderne-3d .icone {
	position: relative;
	z-index: 2;
	transition: transform 0.3s ease;
}

/* Survol */
.bouton-moderne-3d:hover {
	transform: perspective(1000px) translateZ(10px) scale(1.05);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4),
		0 10px 10px rgba(0, 0, 0, 0.3),
		inset 0 2px 2px rgba(255, 255, 255, 0.3);
}

.bouton-moderne-3d[data-color="1"]:hover { background: linear-gradient(135deg, var(--color-start-1) 15%, var(--color-end-1) 85%); }
.bouton-moderne-3d[data-color="2"]:hover { background: linear-gradient(135deg, var(--color-start-2) 15%, var(--color-end-2) 85%); }
.bouton-moderne-3d[data-color="3"]:hover { background: linear-gradient(135deg, var(--color-start-3) 15%, var(--color-end-3) 85%); }
.bouton-moderne-3d[data-color="4"]:hover { background: linear-gradient(135deg, var(--color-start-4) 15%, var(--color-end-4) 85%); }
.bouton-moderne-3d[data-color="5"]:hover { background: linear-gradient(135deg, var(--color-start-5) 15%, var(--color-end-5) 85%); }

.bouton-moderne-3d:hover::before {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.bouton-moderne-3d:hover .texte { transform: translateX(-4px); }
.bouton-moderne-3d:hover .icone { transform: translateX(4px) scale(1.2); }

/* Clic */
.bouton-moderne-3d:active {
	transform: perspective(1000px) translateZ(0) translateY(4px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3),
		0 3px 3px rgba(0, 0, 0, 0.2),
		inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.bouton-moderne-3d[data-color="1"]:active { background: linear-gradient(135deg, var(--color-active-start-1) 0%, var(--color-active-end-1) 100%); }
.bouton-moderne-3d[data-color="2"]:active { background: linear-gradient(135deg, var(--color-active-start-2) 0%, var(--color-active-end-2) 100%); }
.bouton-moderne-3d[data-color="3"]:active { background: linear-gradient(135deg, var(--color-active-start-3) 0%, var(--color-active-end-3) 100%); }
.bouton-moderne-3d[data-color="4"]:active { background: linear-gradient(135deg, var(--color-active-start-4) 0%, var(--color-active-end-4) 100%); }
.bouton-moderne-3d[data-color="5"]:active { background: linear-gradient(135deg, var(--color-active-start-5) 0%, var(--color-active-end-5) 100%); }

/* Animations de pulsation */
@keyframes pulse-1 { 0% { box-shadow: 0 0 0 0 var(--color-pulse-1); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-2 { 0% { box-shadow: 0 0 0 0 var(--color-pulse-2); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-3 { 0% { box-shadow: 0 0 0 0 var(--color-pulse-3); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-4 { 0% { box-shadow: 0 0 0 0 var(--color-pulse-4); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-5 { 0% { box-shadow: 0 0 0 0 var(--color-pulse-5); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.bouton-moderne-3d[data-color="1"]:hover { animation: pulse-1 1.5s infinite; }
.bouton-moderne-3d[data-color="2"]:hover { animation: pulse-2 1.5s infinite; }
.bouton-moderne-3d[data-color="3"]:hover { animation: pulse-3 1.5s infinite; }
.bouton-moderne-3d[data-color="4"]:hover { animation: pulse-4 1.5s infinite; }
.bouton-moderne-3d[data-color="5"]:hover { animation: pulse-5 1.5s infinite; }

/* ============================================
   SECTION 14 : BANNIÈRE PUBLICITAIRE HEADER
   (rec 2, v4.1 — déplacé depuis contenu_style_banniere.php)
   Carrousel de bannières dans le header, centré au-dessus du logo (v5.0).
   Mobile : pleine largeur d'écran.
   Masqué en mode diaporama plein écran.
   ============================================ */

/* --- Conteneur bannière header --- */
.banniere-pub-header {
	line-height: 0;
}

.banniere-pub-header .ban-container {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	/* Cadre arrondi retiré (demande utilisateur) */
	border-radius: 0;
}

/* Ombre intérieure retirée (demande utilisateur) : pseudo-élément neutralisé */
.banniere-pub-header .ban-container::after {
	content: none;
}

/* Chaque item owl : centrage flex pour l'image */
.banniere-pub-header .ban-item {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.banniere-pub-header .ban-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Image : toujours visible en intégralité dans la taille donnée (largeur/
   hauteur définies dans contenu_style_banniere.php), jamais recadrée
   (object-fit:contain) — un espace vide peut apparaître sur les côtés ou en
   haut/bas si le ratio de l'image ne correspond pas exactement au conteneur. */
.banniere-pub-header .ban-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Placeholder shimmer pendant le chargement */
.banniere-pub-header .ban-placeholder {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: banShimmer 1.5s infinite;
	pointer-events: none;
}

.banniere-pub-header .ban-container.ban-loaded .ban-placeholder {
	display: none;
}

@keyframes banShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Owl : pas de padding/margin parasite dans le conteneur bannière */
.banniere-pub-header .owl-carousel .owl-stage-outer {
	overflow: hidden;
}

/* Masquer flèches et pagination owl même si Canvas les injecte */
.banniere-pub-header .owl-nav,
.banniere-pub-header .owl-dots {
	display: none !important;
}

/* Hauteur fixe du owl-stage pour éviter les sauts pendant la transition */
.banniere-pub-header .ban-owl-carousel .owl-stage {
	display: flex;
	align-items: center;
}

/* Centrage horizontal (au-dessus du logo) */
.banniere-pub-header {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

/* Mobile : pleine largeur d'écran, taille exacte pilotée par
   $banniere_largeur_mobile / $banniere_hauteur_mobile (contenu_style_banniere.php) */
@media (max-width: 991.98px) {
	.banniere-pub-header {
		width: 100vw;
		margin-left: calc(-1 * (100vw - 100%) / 2);
		text-align: center;
	}

	/* Plus d'aspect-ratio forcé ni de cadre arrondi : la taille exacte vient
	   du style inline (largeur/hauteur mobile définies dans le PHP). */
	.banniere-pub-header .ban-container {
		border-radius: 0;
	}

	/* Les images sont toujours visibles en intégralité (contain, pas de recadrage) */
	.banniere-pub-header .ban-item img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* Cachée en mode diaporama */
body.mode-diaporama .banniere-pub-header {
	display: none !important;
}

/* ============================================
   SECTION 15 : LOGO HEADER
   (rec 28, v4.2 — déplacé depuis menuhorizontal.php)
   Logo seul centré. Hauteur max = variables injectées par hautpage.php
   ($config_logo_hauteur_desktop / $config_logo_hauteur_mobile). Ratio préservé.
   ============================================ */

.mh-ligne-logo .header-row {
	min-height: 0;
}

.mh-ligne-logo #logo img {
	width: auto;
	height: auto !important;
	max-width: 90vw;
	max-height: var(--mh-logo-h-mobile, 110px) !important;
}

@media (min-width: 992px) {
	.mh-ligne-logo #logo img {
		max-height: var(--mh-logo-h-desktop, 150px) !important;
	}
}

/* ============================================
   SECTION 16 : SÉPARATEUR MENU
   (rec 28, v4.2 — déplacé depuis menuhorizontal.php)
   Ligne fine avec fondu transparent sur les bords.
   ============================================ */

/* #header + !important : passe devant « body.dark hr » (section 3b) qui imposait
   sinon son propre dégradé blanc en mode page sombre. */
#header .separateur-menu {
	height: 1px;
	border: none;
	background-color: transparent;
	background-image: linear-gradient(to right,
		transparent 0%,
		var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 33%,
		var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 66%,
		transparent 100%) !important;
	margin: 0;
}

/* Ligne dégradée sous le menu : même div que .agency-gradient-line (dessus),
   mais positionnée en bottom: 0. Ajoutée dans hautpage.php juste avant
   la fermeture de #header-wrap. On supprime aussi le border-bottom de Canvas. */
#header,
#header-wrap {
	border-bottom: none !important;
}

.agency-gradient-line-bottom {
	position: absolute;
	bottom: 0;
	left: 5%;
	right: 5%;
	height: 1px;
	background: linear-gradient(to right,
		transparent,
		var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 15%,
		var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 85%,
		transparent);
	pointer-events: none;
}

/* ============================================
   SECTION 17 : TRIGGER MENU DIAPORAMA
   (rec 28, v4.2 — déplacé depuis menuhorizontal.php)
   Bouton fixe en haut à gauche, visible seulement en mode diaporama (desktop).
   top: calc() utilise --admin-toolbar-h pour se décaler sous la barre admin.
   ============================================ */

.diaporama-menu-trigger {
	display: none; /* Caché par défaut */
	position: fixed;
	top: calc(20px + var(--admin-toolbar-h, 0px));
	left: 20px;
	z-index: 99999; /* Sous la barre admin (100000) mais au-dessus de tout le reste */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.2s ease;
	backdrop-filter: blur(6px);
}

.diaporama-menu-trigger:hover {
	background-color: rgba(0, 0, 0, 0.65);
	transform: scale(1.08);
}

.diaporama-menu-trigger i {
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

/* Mode diaporama actif (desktop uniquement) : cache header, affiche trigger */
@media (min-width: 992px) {

	body.mode-diaporama #top-bar,
	body.mode-diaporama #header {
		display: none !important;
	}

	body.mode-diaporama .header-wrap-clone {
		display: none !important;
	}

	body.mode-diaporama .diaporama-menu-trigger {
		display: flex;
	}

	/* Menu déplié en mode diaporama : header fixé sous la barre admin */
	body.mode-diaporama.menu-ouvert #header {
		display: block !important;
		position: fixed;
		top: var(--admin-toolbar-h, 0px);
		left: 0;
		right: 0;
		z-index: 99998;
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(10px);
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
		animation: menuSlideDown 0.3s ease;
	}

	@keyframes menuSlideDown {
		from { opacity: 0; transform: translateY(-20px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Dark mode : fonds sombres */
	body.dark.mode-diaporama .diaporama-menu-trigger {
		background-color: rgba(255, 255, 255, 0.15);
		border-color: rgba(255, 255, 255, 0.1);
	}

	body.dark.mode-diaporama .diaporama-menu-trigger:hover {
		background-color: rgba(255, 255, 255, 0.3);
	}

	body.mode-diaporama.menu-ouvert #header.dark {
		background: rgba(20, 20, 25, 0.97);
	}
}

/* ============================================
   SECTION 13 : BARRE D'ADMINISTRATION FIXE
   Version 4.0 - 19/03/2026
   Barre compacte toujours visible en haut de page.
   Z-index très élevé pour passer devant les diapos plein écran.
   ============================================ */

/* --- Conteneur principal de la barre --- */
.admin-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000; /* Au-dessus de tout : diapo, modales, menus */
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	line-height: 1;
}

/* --- Bouton toggle (visible uniquement sur mobile) --- */
.admin-toolbar__toggle {
	display: none; /* Masqué sur desktop */
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: none;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease;
}

.admin-toolbar__toggle:hover,
.admin-toolbar__toggle:focus {
	background: rgba(255, 255, 255, 0.25);
	outline: none;
}

.admin-toolbar__toggle i {
	font-size: 16px;
}

/* --- Conteneur des boutons --- */
.admin-toolbar__buttons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}

/* --- Bouton individuel --- */
.admin-toolbar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 6px;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	border: none;
}

.admin-toolbar__btn i {
	font-size: 14px;
	flex-shrink: 0;
}

.admin-toolbar__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
	filter: brightness(1.1);
	color: #fff !important;
	text-decoration: none !important;
}

.admin-toolbar__btn:active {
	transform: translateY(0);
	filter: brightness(0.95);
}

/* --- Variantes de couleurs (cohérentes avec styleadmin.css) --- */
.admin-toolbar__btn--primary {
	background: #4a89dc; /* --primary de styleadmin.css */
}

.admin-toolbar__btn--warning {
	background: #f39c12; /* --warning de styleadmin.css */
}

.admin-toolbar__btn--success {
	background: #2ecc71; /* --success de styleadmin.css */
}

.admin-toolbar__btn--info {
	background: #3498db; /* --info de styleadmin.css */
}

.admin-toolbar__btn--help {
	background: transparent;
	color: rgba(255, 255, 255, 0.7) !important;
	padding: 7px 10px;
	font-weight: 400;
}

.admin-toolbar__btn--help:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff !important;
	box-shadow: none;
}

/* --- Séparateur flexible (pousse les boutons de droite) --- */
.admin-toolbar__spacer {
	flex: 1 1 auto;
}

/* --- Variante secondaire (Menu Admin) --- */
.admin-toolbar__btn--secondary {
	background: #6c757d;
}

/* --- Variante danger (Déconnexion) --- */
.admin-toolbar__btn--danger {
	background: #e74c3c;
}

/* --- Compatibilité avec le sticky header du site (Canvas framework) ---
   Quand la classe .has-admin-toolbar est ajoutée au body par le JS,
   le header sticky est décalé vers le bas de la hauteur de la barre admin.
   La variable --admin-toolbar-h est calculée dynamiquement par le JS.
   IMPORTANT : ne PAS toucher aux z-index du #header ni du #header-wrap,
   car Canvas en a besoin en interne pour sa mécanique sticky/shrink.
   La barre admin (z-index: 100000) passe naturellement devant (Canvas
   utilise ~199-299 pour le header).
   ------------------------------------------------------------------- */

/* Le header-wrap en mode sticky doit se placer sous la barre admin */
body.has-admin-toolbar #header.sticky-header #header-wrap {
	top: var(--admin-toolbar-h) !important;
}

/* v5.4 : plus de margin-top sur .header-wrap-clone en sticky. Le body a déjà un
   padding-top de la hauteur de la barre admin : cette marge en plus créait une bande
   vide sous le menu collé (visible uniquement connecté en admin). */

/* --- RESPONSIVE : tablettes (< 1024px) --- */
@media (max-width: 1024px) {
	.admin-toolbar__btn span {
		/* On garde les labels mais on réduit un peu */
		font-size: 11px;
	}

	.admin-toolbar__btn {
		padding: 7px 10px;
		gap: 4px;
	}
}

/* --- RESPONSIVE : mobile (< 768px) --- */
@media (max-width: 768px) {
	.admin-toolbar {
		flex-wrap: wrap;
		padding: 6px 10px;
	}

	/* Le toggle devient visible */
	.admin-toolbar__toggle {
		display: flex;
	}

	/* Les boutons sont masqués par défaut */
	.admin-toolbar__buttons {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding-top: 6px;
		gap: 4px;
	}

	/* Quand le menu est ouvert */
	.admin-toolbar__buttons--open {
		display: flex;
	}

	.admin-toolbar__btn {
		padding: 12px 16px;
		font-size: 14px;
		border-radius: 8px;
		justify-content: flex-start;
	}

	.admin-toolbar__btn i {
		font-size: 16px;
		width: 20px;
		text-align: center;
	}

	.admin-toolbar__btn--help {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 10px;
		margin-top: 2px;
	}

	/* Le spacer est inutile en colonne : on le masque */
	.admin-toolbar__spacer {
		display: none;
	}

	/* Séparateur visuel avant les boutons Menu Admin / Déconnexion */
	.admin-toolbar__btn--secondary {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 12px;
		margin-top: 4px;
	}
}

/* --- RESPONSIVE : petit mobile (< 480px) --- */
@media (max-width: 480px) {
	.admin-toolbar {
		padding: 5px 8px;
	}

	.admin-toolbar__toggle {
		font-size: 13px;
		padding: 8px 12px;
	}

	.admin-toolbar__btn {
		padding: 11px 14px;
		font-size: 13px;
	}
}

/* ============================================
   SECTION 18 : MENU MOBILE BOTTOM BAR
   (v4.3 — barre de navigation fixe en bas sur mobile)
   Style application native : toujours visible, ne scroll pas.
   Masquée en desktop.
   Compatible avec safe-area-inset-bottom (iPhone à encoche).
   ============================================ */

/* --- Mobile : la top-bar reste visible (colonne droite masquée en HTML via
   d-none d-lg-flex). Espace en bas du body pour la bottom bar. --- */
@media (max-width: 991.98px) {
	/* Espace en bas du body pour ne pas cacher le contenu derrière la barre */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* --- Barre principale --- */
.mobile-bottom-bar {
	display: none; /* Masquée en desktop */
}

@media (max-width: 991.98px) {
	.mobile-bottom-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99990;
		height: calc(64px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		align-items: stretch;
		justify-content: space-around;
		/* Mode clair par défaut */
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	}

	/* Mode dark */
	body.dark .mobile-bottom-bar {
		background: rgba(20, 20, 25, 0.97);
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
	}
}

/* --- Bouton individuel --- */
.mobile-bottom-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 8px 4px;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s ease;
	border: none;
	background: transparent;
	position: relative;
	/* Mode clair */
	color: #666;
}

.mobile-bottom-bar__item:hover,
.mobile-bottom-bar__item:active {
	text-decoration: none !important;
	opacity: 0.7;
}

body.dark .mobile-bottom-bar__item {
	color: #aaa;
}

/* --- Icône --- */
.mobile-bottom-bar__icon {
	font-size: 22px;
	line-height: 1;
	margin-bottom: 3px;
}

/* --- Label --- */
.mobile-bottom-bar__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* --- Popup réseaux sociaux --- */
.mobile-social-popup {
	display: none;
	position: fixed;
	bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	left: 0;
	right: 0;
	z-index: 99991;
	padding: 16px 12px;
	/* Mode clair */
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
	animation: mbbSlideUp 0.25s ease;
}

body.dark .mobile-social-popup {
	background: rgba(30, 30, 35, 0.98);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.mobile-social-popup.mbb-open {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Lien réseau dans le popup */
.mobile-social-popup__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s ease;
	/* Mode clair */
	color: #333;
	background: rgba(0, 0, 0, 0.04);
}

.mobile-social-popup__link:hover {
	background: rgba(0, 0, 0, 0.08);
	text-decoration: none !important;
	color: #333;
}

body.dark .mobile-social-popup__link {
	color: #ddd;
	background: rgba(255, 255, 255, 0.06);
}

body.dark .mobile-social-popup__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.mobile-social-popup__link i {
	font-size: 20px;
	width: 24px;
	text-align: center;
}

/* Overlay derrière le popup (ferme au tap) */
.mobile-social-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99989;
	background: rgba(0, 0, 0, 0.3);
}

.mobile-social-overlay.mbb-open {
	display: block;
}

@keyframes mbbSlideUp {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Masquer la bottom bar en mode diaporama */
body.mode-diaporama .mobile-bottom-bar,
body.mode-diaporama .mobile-social-popup,
body.mode-diaporama .mobile-social-overlay {
	display: none !important;
}
/* ============================================================
   SECTION 2c : MÉGA-MENU ALPHABÉTIQUE + HEADER (déporté v6.0)
   ------------------------------------------------------------
   Styles déplacés depuis menuhorizontal.php (HTML allégé, mis en
   cache par le navigateur) + nouveau méga-menu classé par lettre.
   ============================================================ */

/* --- Variables réglables du méga-menu (modifie ici l'apparence) --- */
:root {
	/* Valeurs par défaut (surchargées depuis menuhorizontal.php via :root inline) */
	--megamenu-font-size: 11.5px;   /* taille liens méga-menu  — réglable : $config_megamenu_taille_texte */
	--megamenu-line-gap:  2px;      /* espace vertical méga    — réglable : $config_megamenu_line_gap */
	--sousmenu-font-size: 13px;     /* taille liens sous-menu simple — réglable : $config_sousmenu_taille_texte */
	--sousmenu-line-gap:  5px;      /* espace vertical simple  — réglable : $config_sousmenu_line_gap */
	--mega-largeur: 760px;           /* largeur du panneau méga-menu sur grand écran (px) */
	--mega-lettre-taille: 20px;      /* taille des lettres-repères A, B, 0-9... */
	--mega-lettre-couleur: var(--mh-couleur, #296AF5);  /* lettres-repères = couleur du site (config) */
	--mega-vedette-couleur: var(--mh-couleur, #ffc107); /* lueur des liens vedette = couleur du site (config) */
}

/* --- Fonds du header ---
   Clair : tout transparent (l'image de fond de page reste visible).
   Sombre (#header.dark / #top-bar.dark, classe Canvas) : noirs semi-transparents.
   Le fond 0.50 est posé sur la LIGNE LOGO seulement (pas sur tout #header) : il ne
   peut donc plus déborder sous la barre de menu. Barre de menu : 0.85 = rendu
   identique à l'ancien 0.50 + 0.70 superposés. */
#top-bar,
#header,
#header-wrap {
	background-color: transparent !important;
}
#top-bar.dark                { background-color: rgba(0, 0, 0, 0.30) !important; }
#header.dark .mh-ligne-logo  { background-color: rgba(0, 0, 0, 0.50); }
#header.dark #header-wrap    { background-color: rgba(0, 0, 0, 0.85) !important; }

/* --- Barre collée en haut (sticky) : fond opaque (couleurs = config hautpage.php) --- */
#header.sticky-header #header-wrap {
	background-color: var(--mh-sticky-bg, #ffffff) !important;
	border: none !important;
}
#header.dark.sticky-header #header-wrap {
	background-color: var(--mh-sticky-bg-sombre, #131318) !important;
	box-shadow: none !important;
	border: none !important;
}

/* --- v5.5 : réserve de place du menu (.header-wrap-clone, mécanisme natif Canvas) ---
   #header-wrap est hors du flux (il se pose par-dessus la suite de la page). Le clone
   occupe sa place et pousse le contenu SOUS le menu. Sa hauteur est fixée en JS par
   hautpage.php = hauteur réelle de #header-wrap (donc ni bande en trop, ni
   chevauchement, ni saut au passage en sticky). Il reste transparent : le menu
   (#header-wrap) le recouvre exactement. */
.header-wrap-clone {
	display: block !important;
	background-color: transparent !important;
}

/* --- Header sombre : sous-menus et couleurs des liens --- */
#header.dark .sub-menu-container,
#header.dark .mega-menu-content {
	background-color: #18181e !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
/* Survol / rubrique active : couleur du site dans les 2 thèmes (SECTION 2) */

/* Bordure haute des sous-menus simples et du menu ">>" = couleur du site
   (ex-style inline border-top-color:#$couleur de menuhorizontal.php) */
.primary-menu > ul > li:not(.mega-menu) > .sub-menu-container {
	border-top-color: var(--mh-couleur) !important;
}

/* --- Sous-menus collés au lien (pas d'espace parasite) --- */
.primary-menu > ul > li.menu-item .sub-menu-container,
.primary-menu > ul > li.menu-item .mega-menu-content {
	margin-top: 0 !important;
}

/* --- DESKTOP uniquement : zone de clic pleine hauteur + pont vers le sous-menu ---
   Limité au desktop : en mobile, display:flex sur le <li> faisait s'ouvrir les
   sous-menus à DROITE du lien et décentrait les flèches. */
@media (min-width: 992px) {
	.primary-menu > ul > li.menu-item {
		display: flex !important;
		align-items: stretch !important;
		position: relative;
	}
	.primary-menu > ul > li.menu-item > a.menu-link {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		position: relative;
	}
	.primary-menu > ul > li.menu-item > a.menu-link::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -14px;       /* ajuster si le décalage du dropdown change */
		height: 14px;
		background: transparent;
		pointer-events: auto;
		display: block;
	}

	/* Anti-bande blanche intermittente sous le menu collé (défaut de repaint Chrome).
	   UNIQUEMENT sur #header-wrap (sur #header, cela casserait le sticky) et en
	   desktop (en mobile, cela casserait les menus en position:fixed). */
	#header-wrap {
		backface-visibility: hidden;
		will-change: transform;
	}
}

/* --- Icônes 20px dans le menu (ex-style inline) --- */
.primary-menu .mh-ico-20 {
	font-size: 20px;
}

/* --- Clignotement : rubrique gérée par l'éditeur connecté --- */
@keyframes mh-clignote-rouge {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
.mh-admin-blink {
	display: inline-block;
	animation: mh-clignote-rouge 1s infinite;
	background: #ff0000 !important;
	color: #fff !important;
	font-weight: bold;
	border-radius: 4px;
	padding: 4px 10px !important;
}

/* --- Bouton "Votre page" (éditeur cantonné à une rubrique) --- */
.mh-votre-page-btn {
	background: #ff0000 !important;
	color: #fff !important;
	font-weight: bold;
	border-radius: 4px;
	padding: 4px 10px !important;
}

/* --- Badge "NEWS" : reste dans le flux du texte --- */
.mh-badge-new {
	display: inline !important;
	color: #ff0000 !important;
	font-weight: bold !important;
	font-size: 0.75em;
}

/* --- Lecteur podcast en boucle (podcast.php : voile z-index 9000, lecteur 9600) ---
   Header remonté au-dessus UNIQUEMENT dans ce mode (un z-index permanent provoque
   un liseré blanc d'1px), et atténué tant qu'il n'est pas survolé.
   opacity et non filter : filter casserait les menus mobiles en position:fixed. */
body[class*="pboucle-actif-"] #header {
	z-index: 10000 !important;
	opacity: 0.35;
	transition: opacity 0.5s ease;
}
body[class*="pboucle-actif-"] #header-wrap {
	z-index: 10001 !important;
}
body[class*="pboucle-actif-"] #header:hover,
body[class*="pboucle-actif-"] #header:focus-within {
	opacity: 1;
}

/* --- Top-bar : bouton accessibilité (zoom A / A+ / A++) --- */
.mh-az-sep {
	display: inline-block;
	width: 1px;
	height: 20px;
	background: currentColor;
	opacity: .35;
	margin: 0 10px;
	vertical-align: middle;
}
.mh-az-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 6px;
	padding: 2px 8px;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	color: inherit;
}
.mh-az-btn:hover {
	opacity: .75;
}
.mh-az-btn .mh-az-lbl {
	font-weight: 700;
	min-width: 1.6em;
	text-align: center;
}

/* --- Top-bar en mobile ---
   position + z-index : sinon le <header> (qui suit dans le DOM) passe dessus et
   intercepte les taps. Liens : zone de tap confortable (40px). */
@media (max-width: 991.98px) {
	#top-bar {
		position: relative;
		z-index: 500;
	}
	.mh-topbar-gauche a {
		display: inline-flex !important;
		align-items: center;
		min-height: 40px;
	}
}

/* --- Ligne de séparation en dégradé (style Agency) --- */
#header-wrap { position: relative; }
#header-wrap.sticky-header { position: fixed !important; }
.agency-gradient-line {
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	height: 1px;
	background: linear-gradient(to right,
			transparent,
			var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 15%,
			var(--mh-ligne-couleur, rgba(127, 127, 127, 0.25)) 85%,
			transparent);
	pointer-events: none;
}
/* --- Titre du méga-menu (en haut du panneau) --- */
.mega-menu-content .mega-alpha-titre {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 10px 4px 6px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(127, 127, 127, 0.20);
}

/* --- Largeur confortable du panneau méga-menu --- */
li.mega-menu .mega-menu-content {
	min-width: var(--mega-largeur);
}

/* --- Lettre-repère (A, B, 0-9...) en tête de groupe dans une colonne --- */
.mega-menu-content .mega-menu-letter {
	list-style: none;
	margin: 6px 0 2px !important;
	padding: 0 !important;
}
.mega-menu-content .mega-menu-letter:first-child {
	margin-top: 0 !important;
}
.mega-menu-content .mega-menu-letter > span {
	display: block;
	font-size: var(--mega-lettre-taille);
	font-weight: 800;
	line-height: 1;
	color: var(--mega-lettre-couleur);
	text-transform: uppercase;
	border-bottom: 2px solid rgba(127, 127, 127, 0.25);
	padding-bottom: 2px;
}
/* Reprise d'une lettre en haut de colonne (effet annuaire) : atténuée */
.mega-menu-content .mega-menu-letter-suite > span {
	opacity: 0.55;
}

/* --- Méga-menu : taille police + interligne (variables PHP config) --- */
.mega-menu-content .sub-menu-container .menu-link {
	font-size: var(--megamenu-font-size) !important;
	line-height: 1.15 !important;
	padding-top: var(--megamenu-line-gap) !important;
	padding-bottom: var(--megamenu-line-gap) !important;
}
.mega-menu-content .sub-menu-container > li.menu-item {
	margin: 0 !important;
}

/* --- Sous-menu simple (≤9 items) et menu ">>" : police + interligne séparés ---
   Sélecteur : <li> sans classe .mega-menu → capture les dropdowns classiques
   et le menu supplémentaire ">>", mais PAS les colonnes du méga-menu. */
.primary-menu > ul > li:not(.mega-menu) .sub-menu-container .menu-link {
	font-size: var(--sousmenu-font-size) !important;
	line-height: 1.2 !important;
	padding-top: var(--sousmenu-line-gap) !important;
	padding-bottom: var(--sousmenu-line-gap) !important;
}
.primary-menu > ul > li:not(.mega-menu) .sub-menu-container > li.menu-item {
	margin: 0 !important;
}

/* --- Lien mis en avant : variation de lumière continue --- */
.menu-lien-vedette {
	animation: vedetteRespire 2.2s ease-in-out infinite;
	border-radius: 6px;
}
@keyframes vedetteRespire {
	0%, 100% { text-shadow: none; background: transparent; }
	50% {
		text-shadow: 0 0 8px var(--mega-vedette-couleur);
		background: color-mix(in srgb, var(--mega-vedette-couleur) 16%, transparent);
	}
}
/* Repli si color-mix non géré par le navigateur */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	@keyframes vedetteRespire {
		0%, 100% { text-shadow: none; }
		50% { text-shadow: 0 0 9px var(--mega-vedette-couleur); }
	}
}
/* Accessibilité : on coupe l'animation si l'utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
	.menu-lien-vedette { animation: none; }
}

/* --- Responsive : largeur du panneau sur écrans moyens --- */
@media (max-width: 1200px) {
	li.mega-menu .mega-menu-content { min-width: 560px; }
}
@media (max-width: 992px) {
	li.mega-menu .mega-menu-content { min-width: 0; }
	.mega-menu-content .mega-menu-letter > span { font-size: 17px; }
}

/* ============================================
   SECTION 19 : ÉGALISEUR BOUTON "EN DIRECT" (menuhorizontal1.php)
   Mini équaliseur CSS blanc, 5 barres, remplace l'ancien equalizer.gif.
   Préfixe .mh-eq- pour éviter tout conflit avec l'égaliseur 20 barres
   de 64_contenu_style_caroussel_emission_page1.php (préfixe .radio-).
   ============================================ */
/* Centre tout le contenu du bouton (icône + texte) dans le cercle,
   sans dépendre des hacks margin-top précédents */
.mh-eq-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px !important;
}
.mh-eq-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	line-height: 1;
	gap: 7px;
}
.mh-eq-wrap strong {
	font-size: 0.9em;
	line-height: 1;
	letter-spacing: 0.3px;
}

.mh-eq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 24px;
	height: 20px;
}
.mh-eq .mh-eq-bar {
	width: 3px;
	background: #ffffff;
	border-radius: 1px;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
}
.mh-eq .mh-eq-bar:nth-child(1) { height: 40%; animation: mh-eq-bar1 0.6s ease-in-out infinite; }
.mh-eq .mh-eq-bar:nth-child(2) { height: 70%; animation: mh-eq-bar2 0.75s ease-in-out infinite; }
.mh-eq .mh-eq-bar:nth-child(3) { height: 100%; animation: mh-eq-bar3 0.5s ease-in-out infinite; }
.mh-eq .mh-eq-bar:nth-child(4) { height: 55%; animation: mh-eq-bar4 0.65s ease-in-out infinite; }
.mh-eq .mh-eq-bar:nth-child(5) { height: 30%; animation: mh-eq-bar5 0.8s ease-in-out infinite; }

@keyframes mh-eq-bar1 {
	0%   { transform: scaleY(0.3); }
	50%  { transform: scaleY(1.4); }
	100% { transform: scaleY(0.4); }
}
@keyframes mh-eq-bar2 {
	0%   { transform: scaleY(1.1); }
	40%  { transform: scaleY(0.4); }
	70%  { transform: scaleY(1.5); }
	100% { transform: scaleY(0.9); }
}
@keyframes mh-eq-bar3 {
	0%   { transform: scaleY(0.6); }
	45%  { transform: scaleY(1.6); }
	100% { transform: scaleY(0.5); }
}
@keyframes mh-eq-bar4 {
	0%   { transform: scaleY(1.3); }
	35%  { transform: scaleY(0.5); }
	65%  { transform: scaleY(1.2); }
	100% { transform: scaleY(0.7); }
}
@keyframes mh-eq-bar5 {
	0%   { transform: scaleY(0.4); }
	55%  { transform: scaleY(1.3); }
	100% { transform: scaleY(0.6); }
}

/* Accessibilité : on coupe l'animation si l'utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
	.mh-eq .mh-eq-bar { animation: none; height: 60% !important; }
}

/* ==========================================================================
   QUIZZ / SONDAGE A-B DANS LE TEXTE DES ARTICLES
   Version 2 - 02/09/2026 (boutons vert / rouge + barre de resultat)
   --------------------------------------------------------------------------
   Le quizz est un bloc HTML range dans le champ texte (ou chapeau) de
   l'article, insere depuis la saisie d'article (bouton "Ajouter un quizz") :

       <div class="quizz-rg">
         <p class="quizz-rg-question">Ma question ?</p>
         <p class="quizz-rg-a">Choix A</p>
         <p class="quizz-rg-b">Choix B</p>
       </div>

   La barre de resultats (.quizz-rg-resultat) est ajoutee automatiquement par
   le JavaScript de ../votes/quizz.php, juste apres le bloc.

   PRINCIPE DE LA BARRE : une seule barre horizontale sur toute la largeur du
   bloc. Le fond de la barre est ROUGE (part de B) ; un remplissage VERT part
   de la gauche et occupe le pourcentage de A. Les deux pourcentages sont
   colles aux extremites (A a gauche, B a droite) : ils restent lisibles meme
   quand une part est toute petite. Sans aucun vote : 50 / 50.

   Classes ajoutees dynamiquement par le JavaScript :
     .quizz-rg-votable   -> le visiteur peut cliquer (site public)
     .quizz-rg-admin     -> mode redacteur : clic desactive, compteurs visibles
     .quizz-rg-vote-fait -> le visiteur a deja vote
     .quizz-rg-choisi    -> la reponse choisie par le visiteur

   COULEURS : pour changer le vert et le rouge, modifier les variables
   ci-dessous une seule fois (elles sont utilisees par les boutons ET la barre).
   ========================================================================== */

:root {
	--quizz-rg-vert: #21A03C;
	/* couleur du choix A (boutons + partie gauche de la barre) */
	--quizz-rg-vert-clair: #2fbd4d;
	/* survol du bouton A */
	--quizz-rg-rouge: #D32F2F;
	/* couleur du choix B (boutons + fond de la barre) */
	--quizz-rg-rouge-clair: #e84545;
	/* survol du bouton B */
}

/* --- Conteneur du quizz ------------------------------------------------- */
.quizz-rg {
	margin: 25px auto 5px auto;
	padding: 18px 18px 10px 18px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.03);
	max-width: 100%;
}

/* --- Question ----------------------------------------------------------- */
.quizz-rg-question {
	font-weight: 700;
	font-size: 1.05em;
	text-align: center;
	margin: 0 0 14px 0;
}

/* --- Les deux choix : deux vrais boutons pleins, vert et rouge ----------- */
.quizz-rg-a,
.quizz-rg-b {
	display: block;
	margin: 10px auto;
	padding: 13px 18px;
	max-width: 480px;
	text-align: center;
	border-radius: 8px;
	border: 3px solid transparent;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.3;
	color: #FFFFFF !important;
	/* texte blanc, y compris si le theme du site impose une couleur */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
	transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Choix A = vert */
.quizz-rg-a {
	background: var(--quizz-rg-vert);
}

/* Choix B = rouge */
.quizz-rg-b {
	background: var(--quizz-rg-rouge);
}

/* Curseur main + survol : uniquement quand le vote est encore possible */
.quizz-rg-votable .quizz-rg-a,
.quizz-rg-votable .quizz-rg-b {
	cursor: pointer;
}

.quizz-rg-votable:not(.quizz-rg-vote-fait) .quizz-rg-a:hover {
	background: var(--quizz-rg-vert-clair);
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
}

.quizz-rg-votable:not(.quizz-rg-vote-fait) .quizz-rg-b:hover {
	background: var(--quizz-rg-rouge-clair);
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
}

.quizz-rg-votable:not(.quizz-rg-vote-fait) .quizz-rg-a:active,
.quizz-rg-votable:not(.quizz-rg-vote-fait) .quizz-rg-b:active {
	transform: scale(0.98);
}

/* Reponse choisie par le visiteur : bordure blanche + halo */
.quizz-rg-choisi {
	border-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

/* Apres le vote, le choix non retenu s'efface un peu */
.quizz-rg-vote-fait .quizz-rg-a,
.quizz-rg-vote-fait .quizz-rg-b {
	cursor: default;
	opacity: 0.55;
}

.quizz-rg-vote-fait .quizz-rg-choisi {
	opacity: 1;
}

/* --- Barre de resultats (ajoutee par le JavaScript) ---------------------- */
.quizz-rg-resultat {
	margin: 6px auto 25px auto;
	max-width: 100%;
}

.quizz-rg-barre {
	position: relative;
	display: block;
	width: 100%;
	/* barre pleine largeur du bloc */
	height: 34px;
	border-radius: 17px;
	overflow: hidden;
	/* le FOND de la barre represente la part de B (rouge) */
	background: var(--quizz-rg-rouge);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) inset;
}

/* Le remplissage represente la part de A (vert) : il grandit depuis la gauche */
.quizz-rg-remplissage {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	/* valeur de depart avant calcul par le JavaScript */
	background: var(--quizz-rg-vert);
	transition: width .6s ease;
}

/* Les pourcentages restent colles aux extremites, quelle que soit la largeur
   des parts (sinon "A 5%" ne tiendrait pas dans une part de 5%) */
.quizz-rg-etiquette {
	position: absolute;
	top: 0;
	height: 34px;
	line-height: 34px;
	font-weight: 700;
	font-size: 0.95em;
	color: #FFFFFF;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

.quizz-rg-etiquette-a {
	left: 14px;
}

.quizz-rg-etiquette-b {
	right: 14px;
}

/* --- Messages sous la barre --------------------------------------------- */
.quizz-rg-message {
	text-align: center;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.75;
	margin-top: 6px;
	min-height: 1em;
}

/* Compteur detaille : genere uniquement pour un redacteur connecte */
.quizz-rg-info-admin {
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	margin-top: 4px;
	opacity: 0.9;
}

/* --- Mode sombre --------------------------------------------------------- */
body.dark .quizz-rg {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
}

/* --- Mobile / tactile ---------------------------------------------------- */
@media (max-width: 575.98px) {

	.quizz-rg {
		padding: 14px 12px 8px 12px;
	}

	.quizz-rg-a,
	.quizz-rg-b {
		padding: 14px 12px;
		/* zone de clic confortable au doigt */
	}

	.quizz-rg-barre {
		height: 30px;
		border-radius: 15px;
	}

	.quizz-rg-etiquette {
		height: 30px;
		line-height: 30px;
		font-size: 0.85em;
	}

	.quizz-rg-etiquette-a {
		left: 10px;
	}

	.quizz-rg-etiquette-b {
		right: 10px;
	}
}

/* Accessibilite : pas d'animation si l'utilisateur reduit les mouvements */
@media (prefers-reduced-motion: reduce) {
	.quizz-rg-remplissage {
		transition: none;
	}
}
/* ============================================
   SECTION 12 BIS : LIENS AFFICHES EN BOUTONS
   A COLLER A LA FIN DE stylerepere.css
   Classes posees par TinyMCE (liste "Classe" de la fenetre Lien).
   Le lien reste un <a> normal, seul son habillage change.
   ============================================ */

/* === CONFIGURATION : couleurs des boutons de lien ===
   Chaque bouton est un degrade : couleur de debut -> couleur de fin.
   Modifie librement ces valeurs hexadecimales pour changer les couleurs. */
:root {
	--lienbtn-1-debut: #e83e8c;	/* 1 : rose */
	--lienbtn-1-fin:   #5e60ce;	/*     vers violet */
	--lienbtn-2-debut: #3498db;	/* 2 : bleu */
	--lienbtn-2-fin:   #2ecc71;	/*     vers vert */
	--lienbtn-3-debut: #ff7700;	/* 3 : orange */
	--lienbtn-3-fin:   #ffbb00;	/*     vers jaune */
	--lienbtn-4-debut: #e74c3c;	/* 4 : rouge */
	--lienbtn-4-fin:   #ff9500;	/*     vers orange */
	--lienbtn-5-debut: #1abc9c;	/* 5 : turquoise */
	--lienbtn-5-fin:   #4cd137;	/*     vers vert clair */
	--lienbtn-6-debut: #4b5563;	/* 6 : gris fonce */
	--lienbtn-6-fin:   #1f2937;	/*     vers gris tres fonce */

	/* Reglages communs a tous les boutons de lien */
	--lienbtn-rayon: 10px;		/* arrondi des angles : 0 = carre, 50px = pilule */
	--lienbtn-padding: 12px 26px;	/* espace interieur : haut/bas puis gauche/droite */
	--lienbtn-taille: 16px;		/* taille du texte du bouton */
}

/* Style de base commun.
   inline-flex = le bouton reste dans le fil du texte (contrairement a flex qui
   prendrait toute la largeur). Les !important annulent la regle globale
   "a { font-weight:bold; text-decoration:underline; }" du haut de la feuille. */
.lien-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--lienbtn-padding);
	margin: 6px 4px;
	max-width: 100%;
	border-radius: var(--lienbtn-rayon);
	font-size: var(--lienbtn-taille);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .25),
		inset 0 2px 2px rgba(255, 255, 255, .22);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
	background: linear-gradient(135deg, var(--lienbtn-1-debut) 0%, var(--lienbtn-1-fin) 100%);
}

/* Les 6 palettes de couleurs */
.lien-bouton-1 { background: linear-gradient(135deg, var(--lienbtn-1-debut) 0%, var(--lienbtn-1-fin) 100%); }
.lien-bouton-2 { background: linear-gradient(135deg, var(--lienbtn-2-debut) 0%, var(--lienbtn-2-fin) 100%); }
.lien-bouton-3 { background: linear-gradient(135deg, var(--lienbtn-3-debut) 0%, var(--lienbtn-3-fin) 100%); }
.lien-bouton-4 { background: linear-gradient(135deg, var(--lienbtn-4-debut) 0%, var(--lienbtn-4-fin) 100%); }
.lien-bouton-5 { background: linear-gradient(135deg, var(--lienbtn-5-debut) 0%, var(--lienbtn-5-fin) 100%); }
.lien-bouton-6 { background: linear-gradient(135deg, var(--lienbtn-6-debut) 0%, var(--lienbtn-6-fin) 100%); }

/* Reflet lumineux sur la moitie haute, comme les boutons 3D existants */
.lien-bouton::after {
	content: '';
	position: absolute;
	inset: 0 0 50% 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .28), transparent);
	border-radius: var(--lienbtn-rayon) var(--lienbtn-rayon) 0 0;
	pointer-events: none;
}
.lien-bouton { position: relative; overflow: hidden; }

/* Le texte doit passer au-dessus du reflet */
.lien-bouton > * { position: relative; z-index: 2; }

/* Survol (souris) : le bouton se souleve legerement */
.lien-bouton:hover {
	transform: translateY(-2px) scale(1.03);
	filter: brightness(1.08);
	box-shadow: 0 12px 22px rgba(0, 0, 0, .3),
		inset 0 2px 2px rgba(255, 255, 255, .25);
	color: #fff !important;
	text-decoration: none !important;
}

/* Appui (clic ou doigt) : le bouton s'enfonce */
.lien-bouton:active {
	transform: translateY(1px) scale(.985);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

/* Variante pleine largeur : le bouton occupe toute la largeur du texte */
.lien-bouton-large {
	display: flex;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Mobile : tous les boutons passent en pleine largeur pour rester faciles a toucher */
@media (max-width: 600px) {
	.lien-bouton {
		display: flex;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 14px 20px;
	}
}