@charset "UTF-8";
/* ==========================================================================
   PATCH — Correction du bug d'affichage sur écrans ~15" (990px à 1650px)
   À charger APRÈS norm.css, rwd.css et rwd_smart.css (dernier dans l'ordre)
   pour que ces règles gagnent la cascade CSS.
   ========================================================================== */

@media all and (min-width: 990px) and (max-width: 1650px) {

	/* --------------------------------------------------------------------
	   1. MENU PRINCIPAL — le vrai bug
	   Cause : #block-karyans-main-menu a "width:100%" ET .head_rech a une
	   largeur fixe, tous les deux dans .navi (flex-wrap:nowrap). Les deux
	   réclament plus de place que ce que .navi possède => le menu déborde
	   et chevauche la recherche + l'icône profil.
	   Correctif : le bloc menu devient élastique (flex:1, min-width:0) et
	   défile horizontalement en interne si besoin, pendant que le bloc
	   recherche garde sa largeur réelle sans être écrasé.
	   -------------------------------------------------------------------- */
	   .ul-child-main.niv1 {
		width: max-content;
		max-width: 90vw;
	}
	.hide{
		display: none;
	}
	.siteLogo{
		display: flex;
		height: auto;
	}
	.siteSlogan{
		    margin-left: 12px;
			        width: 250px;
	}
	.espaceMembre .navi ul li{
		padding: 2px;
	}
	   .navi {
		flex-wrap: nowrap;
	}

	#block-karyans-main-menu {
		width: auto;
		flex: 1 1 auto;
		min-width: 0; /* essentiel : autorise un flex-item à rétrécir sous son contenu */
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none;
	}
	#block-karyans-main-menu::-webkit-scrollbar {
		display: none; /* Chrome / Edge / Safari */
	}

	.navi ul.ul-parent-main.niv0 {
        flex-wrap: nowrap;
        width: auto !important; /* Remplacez max-content par auto */
    }

	/* on resserre un peu les items pour que le maximum tienne sans scroll */
	.navi ul .li-0 > a,
	.navi ul .li-0 > span {
		padding: 5px 9px;
		font-size: 0.93em;
		white-space: nowrap;
	}

	/* --------------------------------------------------------------------
	   1ter. BLOC RECHERCHE TROP LARGE
	   Le texte "RECHERCHE" à côté de la loupe prend ~190px à lui seul.
	   On ne garde que l'icône (cliquable, le formulaire de recherche
	   s'ouvre exactement pareil) pour rendre toute cette largeur au menu.
	   -------------------------------------------------------------------- */
	.head_rech {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		padding-right: 14px;
		padding-left: 14px;
	}

	.head_rech .content_new_search {
		margin-left: 0;
		left: 0;
	}

	.head_rech .content_new_search .txt {
		display: none; /* on masque juste le libellé "Recherche" */
	}

	.head_rech .ic_rech {
		margin: 0;
	}

	.flexIcon {
		gap: 25px;
	}

	/* --------------------------------------------------------------------
	   1bis. "PROFIL" QUI DISPARAÎT
	   Cause : .log a "margin-left:auto" (il va à l'extrémité droite de la
	   ligne du menu) — mais cette extrémité droite est maintenant hors du
	   cadre visible puisque le menu défile horizontalement (règle n°1).
	   Correctif : on l'épingle (position:sticky) sur le bord droit de la
	   zone de défilement. Il reste donc toujours visible et cliquable,
	   quel que soit l'endroit où l'utilisateur a scrollé le menu.
	   -------------------------------------------------------------------- */
	.ul-parent-main.niv0 > .li-0.log {
		position: sticky;
		right: 0;
		z-index: 5;
		flex: 0 0 auto;
	}

	.ul-parent-main.niv0 > .li-0.log > a {
		/* fond opaque obligatoire : sinon les items qui défilent
		   dessous restent visibles par transparence sous "Profil" */
		background-color: #f6f6f6;
		box-shadow: -10px 0 10px -6px rgba(0, 0, 0, 0.12);
	}

	/* --------------------------------------------------------------------
	   2. PASTILLE DATE SUR LES CARTES ("03 09 26" qui se coupe en deux lignes)
	   Cause : .dateT a une largeur en % du parent (21% / 35%). Quand la
	   carte rétrécit (passage à 3 colonnes), "03/09/26" ne tient plus sur
	   une ligne et retombe à la ligne => effet de superposition/doublon.
	   -------------------------------------------------------------------- */
	.dateT,
	.type-accueil .dateT,
	.item .dateBox.dateSeule .dateT {
		width: auto !important;
		width: 64px!important;
		padding: 0 10px;
		white-space: nowrap;
		font-size: 0.85em;
	}

	/* --------------------------------------------------------------------
	   3. GRILLE DE CARTES (actualités accueil, etc.)
	   On élargit la règle déjà existante dans rwd.css (qui ne visait que
	   1281–1600px et .path-page-thematique) pour couvrir aussi le bloc
	   d'actualités de la page d'accueil dans toute la plage 15".
	   -------------------------------------------------------------------- */
	.items.its_4.itsMulti {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 20px 15px !important;
	}
}

/* ==========================================================================
   CORRECTIF SOUS-MENUS COUPÉS — plage 990px à 1650px
   Cause : #block-karyans-main-menu a overflow-y:hidden (règle ci-dessus),
   nécessaire pour permettre le défilement horizontal du menu (overflow-x:
   auto) sans que le menu déborde verticalement de la page. Problème : ce
   overflow-y:hidden coupe aussi l'affichage des sous-menus niv1/niv2 du
   mega-menu (mega-menu défini dans menu-patch.css : panneaux niv1/niv2,
   variantes 2-3 colonnes, variante images...) qui doivent s'afficher
   EN DESSOUS de la barre de menu.

   Solution : au survol d'un item de menu (li-0), le script menu-patch.js
   ajoute la classe .menu-overflow-open sur #block-karyans-main-menu, qui
   passe temporairement en overflow:visible — le temps que le sous-menu
   soit visible. Rien n'est déplacé dans le DOM, donc TOUTES les règles
   existantes de menu-patch.css (panneaux niv1/niv2, multi-colonnes,
   variante images, flip-left...) continuent de s'appliquer normalement,
   sans avoir à être dupliquées ici.
   ========================================================================== */
#block-karyans-main-menu.menu-overflow-open {
	overflow: visible !important;
}

/* En dessous de 990px, le menu burger mobile prend le relais normalement
   (voir rwd.css / rwd_smart.css) — aucune modification nécessaire ici. */