/*---------------------------------------------------------------------------- CSS HEADER */
.is-columns-header {
	gap: 0px;
	padding: 8px 16px;
}

body.page-id-2 .is-columns-header {
	height: 72px;
}

.is-button-col {
	align-self: center !important;
}

/* Mobile par défaut */
.col-logo-archipel,
.col-logo-archipel img {
    width: 80px;
	z-index: 10;
}

/* Mobile sur la home (page ID 2) */
body.page-id-2 .col-logo-archipel,
body.page-id-2 .col-logo-archipel img {
    width: 100px;
}

/* Desktop (> 400px) */
@media (min-width: 400px) {
    .col-logo-archipel,
    .col-logo-archipel img {
        width: 100px;
    }

    body.page-id-2 .col-logo-archipel,
    body.page-id-2 .col-logo-archipel img {
        width: 140px;
    }
	
	.is-columns-header {
		padding: 8px 24px;
	}
	
	body.page-id-2 .is-columns-header {
		height: 88px;
	}
}

.is-header-button {
	padding: 4px 12px 4px 12px;
}

.is-header-button:hover {
	background-color: #ffd8da;
}

.is-don-button {
	background-color: var(--wp--preset--color--base, #fefffe);
	border-color: var(--wp--preset--color--custom-rose, #ff7e85);
	color: var(--wp--preset--color--custom-rose, #ff7e85);
	
}

.is-menu-button {
	margin-left: auto;
	background-color: var(--wp--preset--color--base, #fefffe);
	border-color: var(--wp--preset--color--accent-2, #004eaa);
	color: var(--wp--preset--color--accent-2, #004eaa);
	height: 40px;
}

.is-header-text-button {
    position: relative;
    top: 1px;    
}

.is-column-menu {
	display: flex;
}

.is-icon-don {
    position: relative;
    top: 1px;
}

/*---------------------------------------------------------------------------- CSS MEGA MENU */
/* Container général. Cache le menu par défaut */
.mega-menu {
	display: none;
    position: fixed;       /* → overlay sur tout l’écran */
	inset: 0;              /* top:0; right:0; bottom:0; left:0; */
	background: rgba(255,255,255,0.97);
	background-color: var(--wp--preset--color--accent-2, #004eaa);
	width: 100%;
	max-width: 100vw;
	height: 100%;
	box-sizing: border-box;   /* inclut le padding dans la largeur */
	overflow-x: hidden;       /* empêche tout débordement horizontal */
	overflow-y: auto;         /* scroll si le contenu est trop haut */
	z-index: 999;         /* au-dessus de tout */
	align-items: center;   /* pour centrer le contenu si tu utilises flex */
	justify-content: center;
	flex-direction: column;
	text-align: center;
	gap: 1.2rem;
	text-align: left;
}

.mega-menu.active {
	display: flex;
	justify-content: flex-start;
}

/* Header du méga-menu */
.mega-menu-header {
	display: flex;
	justify-content: center;
	background: transparent;
	width: 100%;
	border-bottom: 2px solid var(--wp--preset--color--custom-rose, #ff7e85);
}

.mega-menu-buttons {
    height: 96px;
	padding: 0 16px;
	width: 1292px;
	display: flex;
    justify-content: space-between;
	align-items: center;
}

body.page-id-2 .mega-menu-buttons {
    height: 72px;
}

/* Desktop (> 400px) */
@media (min-width: 400px) {
	.mega-menu-buttons {
		height: 116px;
		padding: 0 24px;
	}
	
	body.page-id-2 .mega-menu-buttons {
		height: 88px;
	}
}

/* Bouton fermer */
.is-close-button {
	border-color: var(--wp--preset--color--custom-rose, #ff7e85);
	color: var(--wp--preset--color--custom-rose, #ff7e85);
}

.is-bk-blue {
	background-color: var(--wp--preset--color--accent-2, #004eaa);
}

/* Par défaut : 1 colonne (mobile) */
.mega-menu-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	width: 90%;
}

/* Desktop : 2 colonnes */
@media (min-width: 1000px) {
	.mega-menu-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 4rem;
		width: 900px;
	}
}

/* Les titres de colonne */
.menu-column h3 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .5em;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--wp--preset--color--custom-rose, #ff7e85);
	color: var(--wp--preset--color--base, #fefffe);
}

/* Les listes et liens */
.menu-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-column li {
	margin: .6em 0;
}

.menu-column a {
	position: relative;
	text-decoration: none;
	color: var(--wp--preset--color--base, #fefffe);
	padding: 0 16px; /* laisser la place à la flèche */
	transition: color .2s ease;
}

/* Hover état */
.menu-column a:hover {
	color: var(--wp--preset--color--custom-rose, #ff7e85);
}

.arrow-item a {
	display: inline-flex;
	align-items: center;
}

.arrow-item a .bi {
	margin-right: 0.5em;
	font-size: 1.2em;
}

/* Texte poussé à droite pour les items fléchés dans le mega menu */
.arrow-item a .menu-text {
	margin-left: auto;
	text-align: right;
    font-size: 1.3rem;
}

/* Le footer du menu */
.mega-menu-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	gap: 2rem;
	border-top: 2px solid var(--wp--preset--color--custom-rose, #ff7e85);
	font-size: .9rem;
	color: var(--wp--preset--color--base, #fefffe);
	width: 100%;
	padding: 1.5rem 2rem;
}