/*
 * En-tête de la maquette de l'accueil (docs/maquettes/accueil-2026-10-13), repris seul de la branche
 * accueil-premium le 20/10/2026, sur toutes les pages. Grand écran : logo, menu et outils sur une ligne,
 * recherche en bouton rond qui s'ouvre, langue en pastille, bouton rouge « Espace investisseurs »,
 * en-tête qui reste visible au défilement. Téléphone et tablette : loupe, langue et menu en pastilles
 * rondes (trois traits au lieu de « MENU »). Chargée après bandeau-defilant.css.
 */
@media only screen and (min-width: 1025px){
	/* style.css fixe body à la hauteur de l'écran : l'en-tête, collé dans body, repartait après un écran de défilement */
	body{
		height:auto;
	}
	/* Reste visible au défilement ; le bandeau boursier, lui, défile (décalage posé par script.js) */
	#header{
		position:sticky;
		top:0;
		background:rgba(255,255,255,.94);
		-webkit-backdrop-filter:saturate(180%) blur(14px);
		backdrop-filter:saturate(180%) blur(14px);
		border-bottom:1px solid transparent;
		transition:border-color .2s, box-shadow .2s;
	}
	#header.defile{
		border-bottom-color:#ebe6e4;
		box-shadow:0 8px 30px rgba(0,0,0,.05);
	}

	/* Une seule ligne : logo | menu | recherche, langue, bouton */
	#header .center-desk{
		display:flex;
		align-items:center;
		gap:40px;
		height:84px;
	}
	#header .center-desk:after{
		display:none;
	}
	#header .logo{
		flex:none;
		width:176px;
		height:auto;
		padding:0;
	}
	#header .mobile-header{
		display:contents;
	}
	#header .marge-lang,
	#header .bt-mobile,
	#header .loupe-mobile{
		display:none;
	}

	/* Menu : rubriques en pastilles, sans chevron ni filet */
	#header #nav-top{
		order:1;
		align-self:stretch;
		margin-right:auto;
		border-top:none;
	}
	#header #nav-top > ul{
		position:static;
		height:100%;
		gap:6px;
		justify-content:flex-start;
	}
	#header #nav-top > ul > li{
		flex:none;
		display:flex;
		align-items:center;
	}
	#header #nav-top > ul > li > a,
	#header #nav-top > ul > li > p{
		height:auto;
		line-height:20px;
		padding:10px 14px;
		border-radius:20px;
		font-size:13px;
		font-weight:600;
		letter-spacing:.06em;
		color:#1d1d1b;
		transition:color .2s, background-color .2s;
	}
	#header #nav-top > ul > li > a:after,
	#header #nav-top > ul > li > p:after{
		display:none;
	}
	#header #nav-top > ul > li.sm a span,
	#header #nav-top > ul > li.sm p span{
		padding-right:0;
		background:none;
	}
	#header #nav-top > ul > li:hover > a,
	#header #nav-top > ul > li:hover > p{
		color:#e40520;
		background:#fbf1f2;
	}
	/* Sous-menus : panneau sous toute la ligne de l'en-tête */
	#header #nav-top > ul > li .sousmenu{
		top:100%;
		left:0;
		width:100%;
	}

	/* Recherche : bouton rond ; au clic, le champ s'ouvre vers la gauche (la loupe reste à droite) */
	#header .search-head{
		order:2;
		position:relative;
		top:auto;
		right:auto;
		flex:none;
		width:42px;
		height:42px;
	}
	#header .search-head input[type="text"]{
		position:absolute;
		top:0;
		right:0;
		left:auto;
		width:42px;
		height:42px;
		line-height:40px;
		padding:0 0 0 42px;
		border:1px solid #ebe6e4;
		border-radius:21px;
		background:#fff;
		color:transparent;
		cursor:pointer;
		transition:width .25s ease, border-color .2s, box-shadow .2s;
		z-index:2;
	}
	#header .search-head input::placeholder{
		color:transparent;
	}
	#header .search-head:hover input[type="text"]{
		border-color:#e40520;
	}
	#header .search-head:focus-within input[type="text"]{
		width:260px;
		padding:0 42px 0 16px;
		color:#323232;
		cursor:text;
		border-color:#e40520;
		box-shadow:0 0 0 3px rgba(228,5,32,.08);
	}
	#header .search-head:focus-within input::placeholder{
		color:#8a8a8a;
	}
	#header .search-head button{
		position:absolute;
		top:12px;
		right:12px;
		left:auto;
		width:18px;
		height:18px;
		background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / 18px auto;
		border:none;
		z-index:3;
		cursor:pointer;
	}
	/* Loupe fine et foncée comme la maquette, rouge au survol */
	#header .search-head:hover button,
	#header .search-head:focus-within button{
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e40520' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	}

	/* Langue en pastille ronde */
	#header .lang-desk{
		order:3;
		position:static;
		flex:none;
		width:42px;
		height:42px;
		line-height:40px;
		border:1px solid #ebe6e4;
		border-radius:50%;
		color:#1d1d1b;
		font-size:12px;
		font-weight:600;
		letter-spacing:0;
		text-align:center;
	}
	#header .lang-desk:hover{
		background:#fff;
		border-color:#e40520;
		color:#e40520;
	}

	/* Bouton rouge « Espace investisseurs » */
	#header .entete-bouton{
		order:4;
		flex:none;
		display:inline-flex;
		align-items:center;
		height:42px;
		padding:0 20px;
		margin-left:-30px;
		border-radius:21px;
		background:#e40520;
		color:#fff;
		font-size:13px;
		font-weight:600;
		letter-spacing:.02em;
		transition:background-color .2s, transform .2s;
	}
	#header .entete-bouton:hover{
		background:#b8031a;
		color:#fff;
		transform:translateY(-1px);
	}
	#header .search-head,
	#header .lang-desk{
		margin-left:-30px;
	}
	#header .search-head{
		margin-left:0;
	}
}

/* Écrans moyens : tout tient sur la ligne (logo plus petit, rubriques plus serrées, puis bouton masqué).
   Seulement sous 1 200 px, là où la taille de la maquette ne tient plus : au-dessus (écran 1920 à 150 % = 1 280 px),
   mêmes tailles que la maquette (20/10/2026). */
@media only screen and (min-width: 1025px) and (max-width: 1200px){
	#header .center-desk{gap:24px}
	#header .logo{width:150px}
	#header #nav-top > ul{gap:2px}
	#header #nav-top > ul > li > a,
	#header #nav-top > ul > li > p{padding:10px 10px;letter-spacing:.04em}
	#header .lang-desk,
	#header .entete-bouton{margin-left:-14px}
}
@media only screen and (min-width: 1025px) and (max-width: 1150px){
	#header .entete-bouton{display:none}
}

/* Langue de la barre mobile : seulement sur téléphone et tablette */
#header .entete-langue{
	display:none;
}

/* Petit écran et tablette : barre de la maquette, le bouton rouge n'existe que sur grand écran */
@media only screen and (max-width: 1024px){
	#header .entete-bouton{
		display:none;
	}
	/* Loupe, langue et menu : pastilles rondes de 42 px, filet clair, rouge au survol */
	#header .bt-mobile,
	#header .loupe-mobile,
	#header .entete-langue{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:42px;
		height:42px;
		padding:0;
		border:1px solid #ebe6e4;
		border-radius:50%;
		background-color:#fff;
		background-repeat:no-repeat;
		background-position:center;
		transition:border-color .2s, color .2s;
	}
	#header .bt-mobile{
		right:3%;
		font-size:0;
		line-height:0;
		color:transparent;
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
		background-size:20px auto;
	}
	#header .entete-langue{
		display:block;
		right:calc(3% + 52px);
		line-height:40px;
		color:#1d1d1b;
		font-size:12px;
		font-weight:600;
		text-align:center;
	}
	#header .loupe-mobile{
		right:calc(3% + 104px);
		background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
		background-size:18px auto;
	}
	#header .bt-mobile:hover,
	#header .loupe-mobile:hover,
	#header .entete-langue:hover{
		border-color:#e40520;
		color:#e40520;
	}
}