/*
 * Lot 3 : finitions du site public (branche front-epure-lot2, commit du lot 3).
 * Chargée après epure-lot2.css. Rien ici ne change la structure des pages.
 */

/*------------------------------------------------ POLICE POPPINS SERVIE PAR LE SITE
   Avant : chargée chez Google Fonts (adresse IP des visiteurs transmise à Google, une requête de plus).
   Fichiers WOFF2 dans ../font/poppins (licence SIL OFL 1.1, voir OFL.txt). */
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-ext-300-normal.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-300-normal.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-ext-400-normal.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-400-normal.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-ext-500-normal.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-500-normal.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-ext-600-normal.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-600-normal.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-ext-700-normal.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
	font-family:'Poppins';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url(../font/poppins/poppins-latin-700-normal.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/*------------------------------------------------ NAVIGATION AU CLAVIER (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline:2px solid #e40520;
	outline-offset:2px;
}

/*------------------------------------------------ EN-TÊTE (grand écran seulement : l'en-tête mobile est un autre bloc) */
@media only screen and (min-width: 1025px){
	/* Recherche : champ arrondi et discret, loupe à l'intérieur */
	#header .search-head{
		top:34px;
		right:64px;
		width:250px;
	}
	#header .search-head input[type="text"]{
		width:250px;
		height:40px;
		line-height:38px;
		padding:0 16px 0 42px;
		border:1px solid #e3dcda;
		border-radius:20px;
		color:#323232;
		font-size:13px;
		font-weight:400;
		text-transform:none;
		transition:border-color .2s, box-shadow .2s;
	}
	#header .search-head input[type="text"]:focus{
		border-color:#e40520;
		box-shadow:0 0 0 3px rgba(228,5,32,.08);
	}
	#header .search-head input::placeholder{
		color:#8a8a8a;
		opacity:1;
	}
	#header .search-head button{
		right:auto;
		left:14px;
		top:11px;
		width:18px;
		height:18px;
		background-size:18px auto;
		z-index:1;
	}
	/* Langue : petite pastille, rouge au survol */
	#header .lang-desk{
		top:34px;
		width:48px;
		height:40px;
		line-height:38px;
		border:1px solid #e3dcda;
		border-radius:20px;
		color:#323232;
		font-size:12px;
		letter-spacing:.06em;
		transition:border-color .2s, color .2s, background-color .2s;
	}
	#header .lang-desk:hover{
		background:#fff;
		border-color:#e40520;
		color:#e40520;
	}
	/* Menu principal : filet rouge sous la rubrique survolée */
	#header #nav-top > ul > li > a,
	#header #nav-top > ul > li > p{
		position:relative;
		letter-spacing:.04em;
		transition:color .2s;
	}
	#header #nav-top > ul > li > a:after,
	#header #nav-top > ul > li > p:after{
		content:"";
		position:absolute;
		left:50%;
		bottom:-1px;
		width:0;
		height:2px;
		background:#e40520;
		transition:width .25s ease, left .25s ease;
	}
	#header #nav-top > ul > li:hover > a:after,
	#header #nav-top > ul > li:hover > p:after{
		left:25%;
		width:50%;
	}
	/* Menu déroulant refait : panneau blanc, colonnes séparées par un filet, accents rouges */
	#header #nav-top > ul > li .sousmenu{
		background:#fff;
		border-top:1px solid #efeae8;
		padding:36px 56px 20px;
		box-shadow:0 24px 48px rgba(0,0,0,.12);
	}
	#header #nav-top > ul > li .sousmenu .col{
		padding:0 24px;
		border-left:1px solid #f1ecea;
	}
	#header #nav-top > ul > li .sousmenu .col:nth-child(4n+1){
		padding-left:0;
		border-left:none;
	}
	#header #nav-top > ul > li .sousmenu .titre,
	#header #nav-top > ul > li .sousmenu .titre a{
		color:#323232;
		font-size:12px;
		letter-spacing:.08em;
	}
	#header #nav-top > ul > li .sousmenu .bloc-sm ul{
		padding-top:10px;
	}
	#header #nav-top > ul > li .sousmenu .bloc-sm li{
		line-height:1.45;
		margin-bottom:9px;
	}
	#header #nav-top > ul > li .sousmenu a{
		color:#6b6b6b;
		font-size:14px;
		transition:color .2s;
	}
	#header #nav-top > ul > li .sousmenu .titre a{
		font-size:12px;
	}
	#header #nav-top > ul > li .sousmenu a:hover,
	#header #nav-top > ul > li .sousmenu .titre a:hover{
		color:#e40520;
	}
}

/* Champ de recherche : son propre repère au clavier (bordure), pas le contour rouge */
#header .search-head input[type="text"]:focus-visible{
	outline:none;
}

/*------------------------------------------------ EN-TÊTE MOBILE ET TABLETTE (jusqu'à 1 024 px) */
@media only screen and (max-width: 1024px){
	/* Barre fermée : MENU et loupe en pastilles fines */
	.bt-mobile{
		top:50%;
		transform:translateY(-50%);
		height:38px;
		line-height:36px;
		padding:0 16px;
		border:1px solid #e3dcda;
		border-radius:19px;
		color:#323232;
		font-size:12px;
		letter-spacing:.08em;
	}
	.loupe-mobile{
		top:50%;
		transform:translateY(-50%);
		right:calc(3% + 86px);
		width:38px;
		height:38px;
		border:1px solid #e3dcda;
		border-radius:50%;
		background-position:center;
		background-size:18px auto;
	}
	/* Menu ouvert, refait : panneau blanc sur tout l'écran, logo foncé */
	/* Panneau fixé sur l'écran : il le couvre en entier même après un défilement,
	   et défile à l'intérieur quand une rubrique dépliée dépasse (la page derrière ne bouge pas) */
	.mobile-header{
		position:fixed;
		top:0;
		bottom:0;
		height:100vh;
		height:100dvh;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior:contain;
		padding-bottom:40px;
		background:#fff;
	}
	/* Menu ouvert : la page derrière ne défile plus, une seule barre de défilement */
	html.menu-mobile-ouvert,
	html.menu-mobile-ouvert body{
		overflow:hidden;
	}
	.logo-menu-mobile img{
		filter:brightness(0);
		opacity:.9;
	}
	.bt-open-nav{
		filter:brightness(0);
		opacity:.75;
	}
	#header .search-head{
		height:auto;
		padding:18px 0;
		background:#f7f4f3;
		border-top:1px solid #efeae8;
		border-bottom:1px solid #efeae8;
	}
	#header .search-head input[type="text"]{
		float:none;
		width:100%;
		height:44px;
		line-height:42px;
		padding:0 16px 0 46px;
		border:1px solid #e3dcda;
		border-radius:22px;
		background:#fff;
		color:#323232;
		font-size:14px;
		font-weight:400;
		text-transform:none;
	}
	#header .search-head input[type="text"]:focus{
		border-color:#e40520;
	}
	#header .search-head input::placeholder{
		color:#8a8a8a;
	}
	/* La loupe se place par rapport au bloc qui contient le champ (même marge de 3 %) : alignée à toutes les largeurs */
	#header .search-head .center-mobile{
		position:relative;
	}
	#header .search-head button{
		position:absolute;
		left:calc(3% + 14px);
		top:13px;
		float:none;
		width:18px;
		height:18px;
		margin:0;
		background:url(../images/loupe.png) no-repeat center / 18px auto;
		z-index:1;
	}
	#header #nav-top > ul > li{
		border-bottom-color:#efeae8;
	}
	#header #nav-top > ul > li > a,
	#header #nav-top > ul > li > p,
	#header #nav-top > ul > li:hover > p{
		color:#323232;
		letter-spacing:.06em;
	}
	#header #nav-top > ul > li.sm a span,
	#header #nav-top > ul > li.sm p span{
		background:url(../images/puce-plus.png) no-repeat right center / 11px 11px;
	}
	#header #nav-top > ul > li.sm.isopen p span{
		background-image:url(../images/puce-moins.png);
	}
	#header #nav-top > ul > li .sousmenu{
		background:none;
		box-shadow:none;
		border:none;
	}
	#header #nav-top > ul > li .sousmenu .titre,
	#header #nav-top > ul > li .sousmenu .titre a{
		color:#323232;
	}
	#header #nav-top > ul > li .sousmenu a{
		color:#6b6b6b;
	}
	#header .lang-mobile{
		width:48px;
		height:36px;
		line-height:34px;
		border:1px solid #e3dcda;
		border-radius:18px;
		color:#323232;
		font-size:12px;
		letter-spacing:.06em;
	}
}

/*------------------------------------------------ MENU LATÉRAL DES PAGES DE CONTENU
   Même esprit que le menu principal : carte blanche, rubrique active en rouge (plus d'aplat bleu) */
@media only screen and (min-width: 1025px){
	.marque .left-col .nav-marque{
		background:#fff;
		border:1px solid #efeae8;
		padding:28px 0 10px;
	}
	.marque .left-col .titre{
		font-size:20px;
		font-weight:600;
		padding-left:28px;
		margin-bottom:8px;
	}
	.marque .left-col .nav-marque ul li a{
		padding:0 28px;
		font-size:13px;
		letter-spacing:.04em;
		color:#6b6b6b;
		transition:color .2s;
	}
	.marque .left-col .nav-marque ul li a span,
	.marque .left-col .nav-marque ul li a:hover span,
	.marque .left-col .nav-marque ul li.selected a span{
		padding:16px 0;
		border-top-color:#f1ecea;
	}
	.marque .left-col .nav-marque ul li a:hover,
	.marque .left-col .nav-marque ul li a.selected:hover{
		background:none;
		color:#e40520;
	}
	.marque .left-col .nav-marque ul li.selected a,
	.marque .left-col .nav-marque ul li.sous-m.selected a{
		background:none;
		color:#323232;
	}
	.marque .left-col .nav-marque ul li.selected:not(.sous-m) > a{
		color:#e40520;
	}
	.marque .left-col .nav-marque ul li.sous-m ul{
		padding-bottom:12px;
	}
	.marque .left-col .nav-marque ul li.sous-m ul li a{
		padding:0 28px;
		color:#6b6b6b;
		letter-spacing:0;
	}
	.marque .left-col .nav-marque ul li.sous-m ul li a span{
		line-height:1.4 !important;
		padding:7px 0 7px 12px;
	}
	.marque .left-col .nav-marque ul li.sous-m ul li a:hover{
		color:#e40520;
	}
	.marque .left-col .nav-marque ul li.sous-m ul li.selected > a{
		background:#fbf1f2;
		color:#e40520;
		box-shadow:inset 3px 0 0 #e40520;
	}
	.marque .left-col .nav-marque ul li.sous-m ul li.selected a span{
		color:inherit;
	}
	/* Icônes + et − : version foncée partout (l'aplat bleu qui justifiait la version blanche a disparu) */
	.marque .left-col .nav-marque ul li.sous-m > a:hover:after,
	.marque .left-col .nav-marque ul li.sous-m.selected > a:after{
		background:url(../images/puce-plus.png) no-repeat 0 0;
	}
	.marque .left-col .nav-marque ul li.sous-m.hover > a:after,
	.marque .left-col .nav-marque ul li.sous-m.hover > a:hover:after{
		background:url(../images/puce-moins.png) no-repeat 0 0;
	}
}
@media only screen and (max-width: 1024px){
	.nav-item-mobile{
		height:52px;
		background-color:#fff;
		border:1px solid #e3dcda;
		border-radius:4px;
		padding-left:20px;
		font-size:13px;
		letter-spacing:.04em;
		color:#323232;
	}
	.marque .left-col .nav-marque ul{
		top:56px;
		background:#fff;
		border:1px solid #efeae8;
		box-shadow:0 12px 28px rgba(0,0,0,.1);
		z-index:5;
	}
}

/*------------------------------------------------ FILTRES (années, catégories) ET ENCADRÉS DE RECHERCHE */
.year-label,
.listing-actu .cat .titre-cat{
	font-size:12px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#6b6b6b;
	line-height:1.4;
	margin-bottom:10px;
}
.year-filter{
	height:38px;
	width:auto;
	min-width:130px;
	padding:0 12px;
	border:1px solid #d9d1cf;
	border-radius:4px;
	background-color:#fff;
	color:#323232;
	font-size:13px;
	font-weight:500;
	text-transform:none;
	cursor:pointer;
}
.year-filter option{
	color:#323232;
	background-color:#fff;
}
.listing-actu .cat{
	padding-top:18px;
}
.listing-actu .cat ul{
	margin-top:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.listing-actu .cat ul li{
	float:none;
	margin:0;
}
.listing-actu .cat ul li a,
.p-article .cat ul li a{
	height:auto;
	line-height:18px;
	padding:6px 14px;
	border-width:1px;
	border-radius:16px;
	font-size:11px;
	letter-spacing:.06em;
	transition:background-color .2s, color .2s;
}
/* Étiquettes des lignes de communiqués : arrondies comme les filtres */
.listing-actu .listing .article .txt .my-cat a{
	border-radius:10px;
	padding:1px 9px;
}
.agenda .bloc-filtre,
.page-carte .recherche-carte{
	background:#f7f4f3;
	border-radius:4px;
	padding:24px 32px;
}
.page-carte .myform input.text{
	height:40px;
	line-height:38px;
	width:260px;
	padding:0 16px 0 42px;
	border:1px solid #e3dcda;
	border-radius:20px;
	background:#fff;
	color:#323232;
	font-weight:400;
	text-transform:none;
}
.page-carte .myform input.text::placeholder{
	color:#8a8a8a;
}
.page-carte .myform{
	position:relative;
}
.page-carte .myform button.submit{
	position:absolute;
	left:14px;
	top:11px;
	width:18px;
	height:18px;
	margin:0;
	background:url(../images/loupe.png) no-repeat center / 18px auto;
	z-index:1;
}

/*------------------------------------------------ FORMULAIRE DE CONTACT */
.form-contact .inp-text input,
.form-contact .inp-area textarea{
	border-color:#e3dcda;
	border-radius:4px;
	transition:border-color .2s, box-shadow .2s;
}
.form-contact .inp-text input:focus,
.form-contact .inp-area textarea:focus{
	border-color:#e40520;
	box-shadow:0 0 0 3px rgba(228,5,32,.08);
}

/*------------------------------------------------ FIL D'ARIANE */
.content .ariane{
	font-size:13px;
	color:#8a8a8a;
	padding:24px 0 30px;
}
.content .ariane a{
	text-decoration:none;
	color:#6b6b6b;
	transition:color .2s;
}
.content .ariane a:hover{
	color:#e40520;
}

/*------------------------------------------------ BOUTON « RETOUR EN HAUT » : petit rond au lieu de l'image de 100 × 96 px */
.btn-return-top{
	width:44px;
	height:44px;
	right:24px;
	bottom:32px;
	border-radius:50%;
	background:#323232;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
	transition:background-color .2s, transform .2s;
}
.btn-return-top:before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:10px;
	height:10px;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	transform:translate(-50%, -25%) rotate(45deg);
}
.btn-return-top:hover{
	background:#e40520;
	transform:translateY(-2px);
}

/*------------------------------------------------ EFFETS DOUX AU SURVOL */
.home .info-home .multiple-info > a.article,
.home .info-home .multiple-info > .link{
	transition:background-color .2s;
}
.home .info-home .multiple-info > a.article:hover{
	background-color:#faf8f7;
}
.home .info-home .multiple-info > a.article:nth-child(odd):hover{
	background-color:#e8e3e2;
}
.home .info-home .multiple-info > .link .bg-color img{
	transition:transform .5s ease;
}
.home .info-home .multiple-info > .link:hover .bg-color img{
	transform:scale(1.03);
}
.home .actu-home .swiper-slide-active .article{
	transition:box-shadow .2s;
}
.home .actu-home .swiper-slide-active .article:hover{
	box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.contact .map-contact .coord a,
.article-page .entete a,
.marque .right-col a{
	text-underline-offset:3px;
	transition:color .2s;
}
#footer .grey-footer .col ul li a,
#footer .footer-bottom .white-footer li a{
	text-underline-offset:3px;
}
#footer .grey-footer .col ul li a:hover,
#footer .footer-bottom .white-footer li a:hover{
	text-decoration:underline;
}

@media (prefers-reduced-motion: reduce){
	*,
	*:before,
	*:after{
		transition:none !important;
		animation:none !important;
	}
}