@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. */
@media all and (max-width: 989px) {

  .head_rech {
    display: block !important;
    width: 100%;
    border-left: none;
  }

  /* On masque complètement le bouton déclencheur "loupe + RECHERCHE" */
  .head_rech .box_act {
    display: none !important;
  }

  /* Le formulaire est affiché en permanence, plus besoin de cliquer */
  .head_rech .zone.pop.zRech {
    display: block !important;
    margin-top: 0 !important;
    position: static;
    width: 100%;
    box-shadow: none;
  }
  .head_rech .zone.pop.zRech .int {
    padding: 12px 16px;
  }

  .head_rech form.msSearch {
    display: flex;
    width: 100%;
  }
  .head_rech form.msSearch #search-keywords {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #ddd;
    padding: 8px 10px;
  }
  .head_rech form.msSearch .form-submit {
    flex: 0 0 auto;
    background: #F09328;
    color: #fff;
    border: 0;
    padding: 0 18px;
    font-weight: 600;
  }
}

/* ==========================================================================
   PATCH — Tableau "publications" (table.cols-3) mal affiché entre 768px et 989px
   Cause : dans responsive.css, la mise en forme "carte" de table.cols-3
   n'est définie que dans @media (max-width: 767px). Entre 768px et 989px
   (tablettes, petits écrans), le tableau reste en rendu desktop 3 colonnes
   et déborde horizontalement (colonne "Intro" trop large).
   Correctif : on reprend exactement le même rendu carte pour cette tranche,
   pour rester cohérent avec le seuil mobile de 989px utilisé partout ailleurs
   sur le site (menu, etc.).
   ========================================================================== */
@media all and (min-width: 768px) and (max-width: 989px) {
	table.cols-3 {
		display: block;
		width: 100%;
		border: none;
		border-collapse: collapse;
	}
	table.cols-3 thead {
		display: none;
	}
	table.cols-3 tbody,
	table.cols-3 tr {
		display: block;
		width: 100%;
	}
	table.cols-3 tr {
		margin-bottom: 20px !important;
		padding: 18px !important;
		background: #FFF !important;
		border: 1px solid #EFEFEF !important;
		border-radius: 10px !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
		height: auto !important; /* écrase le height:59px fixe de norm.css (table.cols-3 tbody tr) */
		text-align: left !important;
		color: #191919 !important;
		cursor: default !important;
	}
	table.cols-3 td {
		display: block;
		width: 100% !important;
		padding: 6px 0 !important;
		border: none !important;
	}
	table.cols-3 td.views-field-title {
		font-weight: 700;
		font-size: 1.1em;
		margin-bottom: 6px;
	}
	table.cols-3 td.views-field-title a {
		color: #1A1A1A;
		text-decoration: none;
	}
	table.cols-3 td.views-field-field-introduction p {
		margin: 0;
		font-size: 0.92em;
		color: #555;
		line-height: 1.4em;
	}
	table.cols-3 td.views-field-created {
		margin-top: 8px;
	}
	table.cols-3 td.views-field-created::before {
		content: "Date : ";
		font-weight: 700;
		color: #999;
		font-size: 0.8em;
		text-transform: uppercase;
	}
	table.cols-3 td.views-field-created time {
		font-size: 0.9em;
		color: #666;
	}
}
/* ===== FIN PATCH TABLEAU 768-989px ===== */