/**
 * Nom du fichier : stylerepere.css
 * Version : v4.3 - 05/04/2026
 *
 * === CONTEXTE (pour l'IA) ===
 * But du code : Feuille de style complémentaire au style de base du CMS REPERECOM
 * Demande utilisateur : Nettoyage des reliquats de l'ancien site
 * 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: #949494 !important;
}

/* Rubrique sélectionnée dans le menu */
.primary-menu ul li.current > a,
.primary-menu div ul li.current > a {
	color: #000 !important;
}

/* Menu réduit (sticky header) : pas de bordure */
#header.sticky-header #header-wrap {
	border: none !important;
}

/* ============================================
   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.90) !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 : garder transparent, pas de fond --- */
body.dark #header,
body.dark #header #header-wrap,
body.dark #header.transparent-header #header-wrap {
	background-color: transparent !important;
	border-bottom: none !important;
}

/* --- Menu sticky (après scroll) : fond sombre + ombre --- */
body.dark #header.sticky-header #header-wrap {
	background-color: #131318 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
	            0 1px 3px rgba(0, 0, 0, 0.4) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* --- Sous-menus déroulants : fond profond --- */
body.dark .sub-menu-container,
body.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;
}

/* --- 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;
}

/* --- Menu : rubrique sélectionnée en mode sombre --- */
body.dark .primary-menu ul li.current > a,
body.dark .primary-menu div ul li.current > a {
	color: #ffffff !important;
}

/* --- Menu : survol en mode sombre --- */
body.dark .primary-menu ul li > a:hover {
	color: #b0b0b8 !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, à côté du logo.
   Responsive : au-dessus du logo en mobile, aligné flex en desktop.
   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;
	border-radius: 6px;
}

/* Ombre intérieure par pseudo-élément (au-dessus des images) */
.banniere-pub-header .ban-container::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	z-index: 5;
}

/* 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 : intégralité visible, pas de déformation, pas de dépassement */
.banniere-pub-header .ban-item img {
	display: block;
	width: auto;
	height: auto;
	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;
}

/* Mobile : bannière au-dessus du logo, hauteur responsive, pleine largeur */
@media (max-width: 991.98px) {
	.banniere-pub-header {
		order: -1;
		width: 100vw;
		margin-left: calc(-1 * (100vw - 100%) / 2);
		text-align: center;
	}

	/* Le conteneur adopte un ratio proportionnel au lieu d'une hauteur fixe */
	.banniere-pub-header .ban-container {
		height: auto !important;
		aspect-ratio: 728 / 90;
		border-radius: 0;
	}

	/* Les items owl et items simples s'adaptent au conteneur */
	.banniere-pub-header .ban-item {
		height: auto !important;
		aspect-ratio: 728 / 90;
	}

	/* Le carrousel owl lui-même doit suivre */
	.banniere-pub-header .ban-owl-carousel {
		height: auto !important;
	}

	/* Owl-carousel force des hauteurs fixes sur ses conteneurs internes */
	.banniere-pub-header .ban-owl-carousel .owl-stage-outer,
	.banniere-pub-header .ban-owl-carousel .owl-stage,
	.banniere-pub-header .ban-owl-carousel .owl-item {
		height: auto !important;
	}

	/* Les images suivent la largeur disponible */
	.banniere-pub-header .ban-item img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: 100%;
		height: auto;
	}
}

/* Desktop : alignement flex à côté du logo */
@media (min-width: 992px) {
	.banniere-pub-header {
		display: flex;
		align-items: center;
	}
}

/* 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)
   Contraint la hauteur du logo à 80px max. Ratio d'origine préservé.
   ============================================ */

#logo img {
	max-height: 120px;
	width: auto;
	height: auto;
}

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

.separateur-menu {
	height: 1px;
	border: none;
	background: linear-gradient(to right,
		transparent 0%,
		rgba(0, 0, 0, 0.15) 33%,
		rgba(0, 0, 0, 0.15) 66%,
		transparent 100%);
	margin: 0;
}

/* En mode dark : la ligne est claire au lieu de sombre */
body.dark .separateur-menu {
	background: linear-gradient(to right,
		transparent 0%,
		rgba(255, 255, 255, 0.15) 33%,
		rgba(255, 255, 255, 0.15) 66%,
		transparent 100%);
}

/* Ligne dégradée sous le menu : même div que .agency-gradient-line (dessus),
   mais positionnée en bottom: 0. Ajoutée dans menuhorizontal.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,
		rgba(0, 0, 0, 0.15) 15%,
		rgba(0, 0, 0, 0.15) 85%,
		transparent);
	pointer-events: none;
}

/* Mode dark : ligne claire (cohérent avec .agency-gradient-line dark) */
body.dark .agency-gradient-line-bottom {
	background: linear-gradient(to right,
		transparent,
		rgba(255, 255, 255, 0.15) 15%,
		rgba(255, 255, 255, 0.15) 85%,
		transparent);
}

/* ============================================
   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.dark.mode-diaporama.menu-ouvert #header {
		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;
}

/* Le clone (placeholder) qui évite le saut de contenu doit aussi tenir compte du décalage */
body.has-admin-toolbar #header.sticky-header .header-wrap-clone {
	margin-top: var(--admin-toolbar-h);
}

/* --- 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. Le #top-bar est masqué en mobile (remplacé par cette barre).
   Compatible avec safe-area-inset-bottom (iPhone à encoche).
   ============================================ */

/* --- Masquer le top-bar sur mobile (remplacé par la bottom bar) --- */
@media (max-width: 991.98px) {
	#top-bar {
		display: none !important;
	}

	/* 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;
}