/* olwhyde/main_site/static/main_site/css/menu.css   */

/* ============================================================ */
/* === MENU OLWHYDE — FEUILLE DE STYLE DEDIEE ===              */
/* ============================================================ */
/* Extrait de base_site.html le 23/05/2026                      */
/* Contient : correction RTL arabe, navigation principale,      */
/* mega menus desktop pleine largeur, accordeon mobile burger,  */
/* bouton deconnexion differencie.                              */
/* Breakpoint nav horizontale / burger : 1076 px                */
/* ============================================================ */


/* ===== CORRECTION AMELIOREE POUR LE MENU EN ARABE (RTL) ===== */
        html[dir="rtl"] .main-nav { direction: ltr; }
        html[dir="rtl"] .main-nav ul li a,
        html[dir="rtl"] .main-nav ul li button.nav-logout-button { direction: rtl; text-align: right; }

		/* ============================================== */
		/* === MENU OLWHYDE — DIRECTION ARTISTIQUE === */
		/* Palette : violet profond #3B3881, doré #C9A55B, blanc dominant */
		/* Typo : Fraunces pour le logo, Inter pour les entrees */
		/* ============================================== */
		
		/* === Import des polices Olwhyde === */
		@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
		
		/* === Reset doux pour le menu === */
		.main-nav, .main-nav ul, .main-nav li, .main-nav a, .main-nav button {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
		}

        /* === NAVIGATION PRINCIPALE === */
        .main-nav {
			width: 92%;
			max-width: 1280px;
			margin: 0 auto;
			padding: 18px 0 4px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			border-bottom: 1px solid rgba(201, 165, 91, 0.35);
		}
		
		/* Logo "Olwhyde" en Fraunces, violet profond */
        .main-nav .logo a {
			color: #3B3881;
			font-family: 'Fraunces', Georgia, serif;
			font-size: 1.9em;
			font-weight: 600;
			text-decoration: none;
			letter-spacing: 0.5px;
			transition: color 0.2s ease;
		}
		.main-nav .logo a:hover { color: #C9A55B; }
		
		/* Liste du menu (mobile par defaut) */
        .main-nav ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
			display: none;
			flex-direction: column;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: #fff;
			border-top: 1px solid rgba(201, 165, 91, 0.25);
			box-shadow: 0 6px 18px rgba(59, 56, 129, 0.08);
			z-index: 1000;
		}
        .main-nav ul.menu-ouvert { display: flex; }
        .main-nav ul li { margin-left: 0; width: 100%; text-align: left; }
        
		/* Entrees du menu : violet profond, hover dore */
        .main-nav ul li a {
			color: #3B3881;
			text-decoration: none;
			font-size: 0.98em;
			font-weight: 500;
			padding: 14px 22px;
			border-radius: 0;
			transition: color 0.18s ease, background-color 0.18s ease;
			display: block;
			border-bottom: 1px solid rgba(201, 165, 91, 0.12);
		}
        .main-nav ul li:last-child a { border-bottom: none; }
        .main-nav ul li a:hover,
		.main-nav ul li button.nav-logout-button:hover {
			background-color: rgba(201, 165, 91, 0.08);
			color: #C9A55B;
		}
		
		/* Bouton deconnexion : style aligne sur les autres entrees */
        button.nav-logout-button {
			background-color: transparent;
			color: #3B3881;
			border: none;
			padding: 14px 22px;
			border-radius: 0;
			cursor: pointer;
			font-size: 0.98em;
			font-weight: 500;
			font-family: 'Inter', sans-serif;
			transition: color 0.18s ease, background-color 0.18s ease;
			width: 100%;
			text-align: left;
			border-bottom: 1px solid rgba(201, 165, 91, 0.12);
		}

        /* === Hamburger icone (mobile) === */
        .hamburger-icon {
			display: block;
			background: none;
			border: none;
			cursor: pointer;
			padding: 10px;
			margin-left: auto;
		}
        .hamburger-icon span {
			display: block;
			width: 26px;
			height: 2.5px;
			background-color: #3B3881;
			margin: 5px 0;
			transition: all 0.3s ease-in-out;
			border-radius: 2px;
		}
        .hamburger-icon.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .hamburger-icon.is-active span:nth-child(2) { opacity: 0; }
        .hamburger-icon.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

        /* === DESKTOP : menu horizontal === */
        @media (min-width: 1076px) {
            .main-nav ul {
				display: flex;
				flex-direction: row;
				position: static;
				width: auto;
				background-color: transparent;
				border-top: none;
				box-shadow: none;
				align-items: center;
			}
            .main-nav ul li {
				margin-left: 6px;
				width: auto;
				border-bottom: none;
				text-align: center;
			}
            .main-nav ul li a {
				padding: 8px 14px;
				border-radius: 6px;
				border-bottom: none;
				font-size: 0.96em;
				white-space: nowrap;
			}
            .main-nav ul li a:hover {
				background-color: rgba(201, 165, 91, 0.1);
				color: #C9A55B;
			}
            button.nav-logout-button {
				border: 1px solid rgba(59, 56, 129, 0.2);
				padding: 7px 14px;
				width: auto;
				border-bottom: 1px solid rgba(59, 56, 129, 0.2);
				border-radius: 6px;
				text-align: center;
				margin-bottom: 2px;
			}
            button.nav-logout-button:hover {
				background-color: rgba(201, 165, 91, 0.1);
				color: #C9A55B;
				border-color: #C9A55B;
			}
            .hamburger-icon { display: none; }
        }

        /* === MENU DEROULANT (Astro, Stats, Tarifs, Autres) === */
        .dropdown { position: relative; display: inline-block; }
        .dropdown-content {
			display: none;
			position: absolute;
			background-color: #fff;
			min-width: 230px;
			box-shadow: 0 8px 24px rgba(59, 56, 129, 0.12);
			border: 1px solid rgba(201, 165, 91, 0.2);
			border-radius: 8px;
			z-index: 100;
			white-space: nowrap;
			padding: 6px 0;
			margin-top: 4px;
			overflow: hidden;
		}
        .dropdown-content a {
			color: #3B3881;
			padding: 11px 18px;
			text-decoration: none;
			display: block;
			text-align: left;
			font-size: 0.94em;
			border-bottom: none;
			transition: background-color 0.15s ease, color 0.15s ease;
		}
        .dropdown-content a:hover {
			background-color: rgba(201, 165, 91, 0.1);
			color: #C9A55B;
		}
        .dropdown:hover .dropdown-content { display: block; }
        .dropbtn {
			display: inline-block;
			color: #3B3881;
			text-align: center;
			padding: 8px 14px;
			text-decoration: none;
			cursor: pointer;
		}
		
		/* === SOUS-SOUS-MENU (Lecons, Histoire, etc.) === */
        .dropdown-submenu { position: relative; }
        .dropdown-submenu-content {
			display: none;
			position: absolute;
			left: 100%;
			top: 0;
			min-width: 240px;
			background-color: #fff;
			box-shadow: 0 8px 24px rgba(59, 56, 129, 0.12);
			border: 1px solid rgba(201, 165, 91, 0.2);
			border-radius: 8px;
			z-index: 101;
			padding: 6px 0;
			margin-left: 2px;
		}
        .dropdown-submenu:hover .dropdown-submenu-content { display: block; }
        .dropdown-submenu a.submenu-toggle {
			display: block;
			padding: 11px 18px;
			color: #3B3881;
			text-decoration: none;
			font-size: 0.94em;
			transition: background-color 0.15s ease, color 0.15s ease;
		}
        .dropdown-submenu a.submenu-toggle:hover {
			background-color: rgba(201, 165, 91, 0.1);
			color: #C9A55B;
		}
		
		/* === Accent dore pour l'entree "Devenir Pionnier" dans le sous-menu Tarifs === */
		.dropdown-content a.nav-pionnier-accent {
			color: #C9A55B;
			font-weight: 600;
		}
		.dropdown-content a.nav-pionnier-accent:hover {
			background-color: rgba(201, 165, 91, 0.15);
			color: #b89148;
		}
		
		/* =============================================================== */
		/* === MEGA MENU — PLEINE LARGEUR DE CONTENU, RESPONSIVE 3 PALIERS === */
		/* Architecture : le panneau s'ancre sur la nav (pas sur le li),     */
		/* occupe la meme largeur que la barre de navigation, donc ne peut  */
		/* jamais deborder par les cotes. Trois paliers :                   */
		/*   - Desktop ≥ 1100px : panneau 3 colonnes, voiles lumineux       */
		/*   - Tablette 769-1099px : panneau 2 colonnes, meme rendu         */
		/*   - Mobile ≤ 768px : accordeon vertical dans le burger, 1 col    */
		/* =============================================================== */
		
		/* La nav devient un repere de positionnement pour les panneaux */
		.main-nav { position: relative; }
		
		/* Le li mega-menu n'est plus le repere des panneaux (qui s'ancrent
		   sur la nav), mais il garde position: relative pour les survols */
		.dropdown.mega-menu { position: static; }
		
		/* Sur desktop : le panneau s'ancre sur la NAV, pas sur le li.
		   Largeur = 100% de la nav. C'est ce qui garantit qu'il ne peut
		   jamais deborder par les cotes. */
		@media (min-width: 769px) {
			.dropdown.mega-menu .mega-panel {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				width: auto;
				background-color: #fff;
				background-image:
					radial-gradient(ellipse at bottom left, rgba(201, 165, 91, 0.07) 0%, transparent 50%),
					linear-gradient(180deg, #ffffff 0%, #ffffff 100%) /* voile bleu desactive : linear-gradient(180deg, #EAF4FD 0%, #ffffff 30%) */;
				box-shadow: 0 16px 40px rgba(59, 56, 129, 0.16);
				border: 1px solid rgba(201, 165, 91, 0.25);
				border-radius: 12px;
				z-index: 100;
				padding: 28px 36px;
				margin-top: 0;
				box-sizing: border-box;
			}
			.dropdown.mega-menu:hover .mega-panel,
			.dropdown.mega-menu .mega-panel:hover {
				display: block;
			}
			
			/* Pont invisible : zone-tampon entre la nav et le panneau,
			   evite que le hover se rompe quand la souris descend */
			.dropdown.mega-menu .mega-panel::after {
				content: "";
				position: absolute;
				top: -12px;
				left: 0;
				right: 0;
				height: 12px;
				background: transparent;
			}
			
			/* Fine ligne doree-mauve degradee en haut du panneau */
			.dropdown.mega-menu .mega-panel::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 2px;
				background: linear-gradient(90deg, transparent 0%, #C9A55B 20%, #4FABF4 50%, #C9A55B 80%, transparent 100%);
				opacity: 0.6;
				border-radius: 12px 12px 0 0;
			}
		}
		
		/* Grilles internes : 1/2/3 colonnes selon palette demandee.
		   Pour les panneaux a 1 colonne (cas Tarifs) : on centre le bloc
		   dans le panneau pleine largeur. Sinon le contenu apparait colle
		   a gauche et laisse un grand vide a droite, ce qui rompt
		   visuellement l'equilibre du panneau. Largeur max limitee a
		   ~340px pour rester lisible. */
		.mega-panel-grid-1 {
			display: block;
			max-width: 340px;
			margin-left: auto;
			margin-right: auto;
		}
		.mega-panel-grid-2 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 36px;
		}
		.mega-panel-grid-3 {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 36px;
		}
		/* Indispensable : permet aux colonnes de se retracter sous leur
		   contenu intrinseque (un mot long ne fera plus exploser la grille) */
		.mega-panel-grid-2 > div,
		.mega-panel-grid-3 > div {
			min-width: 0;
		}
		
		/* Separateurs verticaux entre colonnes : degrade dore-mauve */
		.mega-panel-grid-3 > div + div,
		.mega-panel-grid-2 > div + div {
			padding-left: 36px;
			border-left: 1px solid;
			border-image: linear-gradient(180deg, transparent 0%, rgba(201, 165, 91, 0.4) 30%, rgba(79, 171, 244, 0.35) 70%, transparent 100%) 1;
		}
		
		/* Palier TABLETTE : 769-1099px → les grilles 3 colonnes passent
		   a 2 colonnes pour laisser respirer le contenu */
		@media (min-width: 769px) and (max-width: 1099px) {
			.mega-panel-grid-3 {
				grid-template-columns: 1fr 1fr;
				gap: 28px;
			}
			/* Reset des separateurs : seule la 2e colonne en a un, jamais la 3e */
			.mega-panel-grid-3 > div + div {
				padding-left: 28px;
			}
			.mega-panel-grid-3 > div:nth-child(3) {
				grid-column: 1 / -1;
				padding-left: 0;
				border-left: none;
				border-top: 1px solid;
				border-image: linear-gradient(90deg, transparent 0%, rgba(201, 165, 91, 0.4) 30%, rgba(79, 171, 244, 0.35) 70%, transparent 100%) 1;
				padding-top: 22px;
				margin-top: 6px;
			}
			.dropdown.mega-menu .mega-panel {
				padding: 24px 28px;
			}
		}
		
		/* Titre de colonne (PRESENTATIONS, CALCULER, etc.) */
		.mega-col-title {
			font-family: 'Inter', sans-serif;
			font-size: 0.7em;
			font-weight: 600;
			letter-spacing: 1.6px;
			color: #C9A55B;
			text-transform: uppercase;
			margin: 0 0 14px 0;
			padding-bottom: 8px;
			border-bottom: 1px solid rgba(201, 165, 91, 0.3);
		}
		
		/* Item du mega menu : titre + description */
		.dropdown.mega-menu .mega-panel .mega-item {
			display: block;
			padding: 9px 10px;
			margin: 0 -10px;
			border-radius: 6px;
			text-decoration: none;
			color: #3B3881;
			transition: background-color 0.15s ease, transform 0.15s ease;
			white-space: normal !important;
			text-align: left;
		}
		.dropdown.mega-menu .mega-panel .mega-item-title,
		.dropdown.mega-menu .mega-panel .mega-item-desc {
			white-space: normal !important;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}
		.mega-item:hover {
			background-color: rgba(79, 171, 244, 0.06);
			text-decoration: none;
			transform: translateX(2px);
		}
		.mega-item + .mega-item { margin-top: 4px; }
		.mega-item-title {
			display: block;
			font-family: 'Inter', sans-serif;
			font-size: 0.96em;
			font-weight: 600;
			color: #3B3881;
			margin-bottom: 4px;
			line-height: 1.3;
		}
		.mega-item-desc {
			display: block;
			font-family: 'Inter', sans-serif;
			font-size: 0.82em;
			color: #6b6577;
			line-height: 1.5;
			font-weight: 400;
		}
		.mega-item:hover .mega-item-title { color: #C9A55B; }
		
		/* Accent sur "Devenir Pionnier" : titre en mauve Fraunces italique */
		.mega-item.mega-item-accent .mega-item-title {
			color: #4FABF4;
			font-family: 'Fraunces', Georgia, serif;
			font-style: italic;
			font-weight: 500;
			font-size: 1.08em;
			letter-spacing: 0.3px;
		}
		.mega-item.mega-item-accent:hover {
			background-color: rgba(79, 171, 244, 0.1);
		}
		.mega-item.mega-item-accent:hover .mega-item-title {
			color: #a04788;
		}
		.mega-item.mega-item-accent .mega-item-desc { color: #6b6577; }
		
		/* =============================================================== */
		/* === MOBILE / TABLETTE (≤ 1075px) : accordeon vertical burger  === */
		/* === Esthetique transposee du desktop : voiles lumineux,       === */
		/* === fine ligne doree-mauve, separateurs subtils, rose Olwhyde === */
		/* =============================================================== */
		@media (max-width: 1075px) {
			/* Espace blanc en bas du menu burger, sous le dernier element,
			   pour que le bouton Deconnexion ne touche pas le contenu de la page */
			.main-nav ul.menu-ouvert {
				padding-bottom: 24px;
			}
			
			/* Panneau de mega-menu : redevient inline dans le flux du burger,
			   garde les voiles lumineux mauve/dore du desktop pour la magie */
			.dropdown.mega-menu .mega-panel {
				display: none;
				position: static;
				width: 100%;
				min-width: 0;
				max-width: 100%;
				box-shadow: none;
				border: none;
				border-radius: 0;
				padding: 0;
				margin-top: 0;
				background-color: #ffffff;
				background-image:
					radial-gradient(ellipse at bottom left, rgba(201, 165, 91, 0.05) 0%, transparent 55%),
					linear-gradient(180deg, #ffffff 0%, #ffffff 100%) /* voile bleu desactive : linear-gradient(180deg, #EAF4FD 0%, #ffffff 30%) */;
				transform: none !important;
				left: auto !important;
				right: auto !important;
				overflow: visible;
				position: relative;
			}
			/* En mobile on n'utilise plus le hover : c'est le clic qui ouvre.
			   Ordre des regles important : d'abord on neutralise le hover,
			   puis on reactive l'ouverture via .is-open */
			.dropdown.mega-menu:hover .mega-panel {
				display: none;
			}
			.dropdown.mega-menu.is-open .mega-panel {
				display: block;
			}
			
			/* Fine ligne doree-mauve degradee en haut du panneau accordeon :
			   meme signature ornementale que la version desktop, signe l'ouverture */
			.dropdown.mega-menu.is-open .mega-panel::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 2px;
				background: linear-gradient(90deg, transparent 0%, #C9A55B 20%, #4FABF4 50%, #C9A55B 80%, transparent 100%);
				opacity: 0.6;
			}
			.dropdown.mega-menu .mega-panel::after { display: none; }
			
			/* Grilles internes empilees en mobile */
			.mega-panel-grid-1, .mega-panel-grid-2, .mega-panel-grid-3 {
				display: block;
				gap: 0;
			}
			/* Annule le centrage force en desktop pour le grid-1 :
			   en mobile, le bloc Tarifs doit reprendre toute la largeur */
			.mega-panel-grid-1 {
				max-width: none;
				margin-left: 0;
				margin-right: 0;
			}
			.mega-panel-grid-2 > div + div,
			.mega-panel-grid-3 > div + div {
				padding-left: 0;
				border-left: none;
				border-top: none;
				padding-top: 0;
				margin-top: 0;
			}
			
			/* Titre de section (CALCULER, ANALYSER, PRESENTATIONS...)
			   Reprend le style desktop : dore en petites capitales avec ligne doree dessous */
			.dropdown.mega-menu .mega-panel .mega-col-title {
				padding: 18px 36px 8px 36px;
				margin: 0 22px 0 22px;
				border-bottom: 1px solid rgba(201, 165, 91, 0.3);
				font-family: 'Inter', sans-serif;
				font-size: 0.7em;
				font-weight: 600;
				letter-spacing: 1.6px;
				color: #C9A55B;
				text-transform: uppercase;
				text-align: left;
			}
			
			/* Item du sous-menu : padding genereux, separateur dore tres fin */
			.dropdown.mega-menu .mega-panel .mega-item {
				padding: 13px 22px 13px 44px;
				margin: 0;
				border-radius: 0;
				border-bottom: 1px solid rgba(201, 165, 91, 0.08);
				transition: background 0.2s ease;
			}
			.mega-item:hover, .mega-item:active {
				transform: none;
				background: linear-gradient(90deg, #EAF4FD 0%, rgba(243, 238, 249, 0.4) 70%, transparent 100%);
			}
			.dropdown.mega-menu .mega-panel .mega-item .mega-item-title {
				color: #3B3881;
				font-weight: 600;
			}
			.mega-item-desc { display: none; }
			
			/* Accent rose Olwhyde sur "Devenir Pionnier" preserve */
			.mega-item.mega-item-accent:hover {
				background: linear-gradient(90deg, rgba(79, 171, 244, 0.12) 0%, rgba(79, 171, 244, 0.04) 70%, transparent 100%);
			}
			
			/* === LE FAMEUX FOND DE L'ITEM ACTIF "Astro" ouvert ===
			   Remplace le beige dore translucide par un degrade rose Olwhyde,
			   horizontal pour donner du mouvement, plus marque a gauche pour
			   reprendre la direction de lecture */
			.dropdown.mega-menu.is-open > .dropbtn {
				background: linear-gradient(90deg, #EAF4FD 0%, rgba(243, 238, 249, 0.5) 70%, transparent 100%);
				color: #4FABF4;
				border-left: 3px solid #4FABF4;
				padding-left: 19px;
			}
			
			/* Hover des entrees principales du burger (Solaire, Lunaire...) :
			   meme rose degrade que les items, pour rester coherent */
			.main-nav ul li a:hover,
			.main-nav ul li button.nav-logout-button:hover {
				background: linear-gradient(90deg, #EAF4FD 0%, rgba(243, 238, 249, 0.4) 70%, transparent 100%);
				color: #4FABF4;
			}
			
			/* === BOUTON DECONNEXION EN MOBILE ===
			   Differencie comme en desktop : bordure violette fine arrondie,
			   centre avec de l'air autour, sans trait de soulignement.
			   On marque visuellement "action de fin", pas "entree de navigation". */
			.main-nav ul li form {
				display: flex;
				justify-content: center;
				padding: 14px 22px 32px 22px;
				margin: 0;
				border-bottom: none;
			}
			.main-nav ul li button.nav-logout-button {
				width: auto;
				display: inline-block;
				padding: 10px 28px;
				border: 1px solid rgba(59, 56, 129, 0.3);
				border-radius: 8px;
				border-bottom: 1px solid rgba(59, 56, 129, 0.3);
				text-align: center;
				background-color: transparent;
			}
			.main-nav ul li button.nav-logout-button:hover {
				border-color: #4FABF4;
				background: linear-gradient(90deg, #EAF4FD 0%, rgba(243, 238, 249, 0.4) 100%);
				color: #4FABF4;
			}
		}