@charset "UTF-8";
/* ==========================================================================
   Espace Santé du Littoral — retouches de finition (octobre 2026)
   Clickanet

   Feuille AJOUTÉE par-dessus le site Wizodo actuel : aucun texte, aucun bloc,
   aucune structure n'est modifié. Seules la finition et les mouvements changent.

   Mise en ligne (recommandée) : déposer ce fichier et esl-moderne.js par FTP
   dans photos_perso/esl/ sur wizodo.fr, puis dans le back-office du site :
     - Paramètres > CSS libre, TOUT EN HAUT (avant tout le reste) :
       @import url("https://www.wizodo.fr/photos_perso/esl/esl-moderne.css?v=1");
     - Paramètres > Généraux > champ « Google Analytics », À LA FIN :
       <script src="https://www.wizodo.fr/photos_perso/esl/esl-moderne.js?v=1"></script>
       (sans async ni defer). À chaque mise à jour d'un fichier : ?v=2, ?v=3…
   Autre possibilité : coller ce fichier à la fin du CSS libre.
   Chaque sélecteur commence par « html » : il passe devant les règles
   existantes, quel que soit l'endroit où il est chargé.
   Pour retirer une retouche, supprimer sa section (numérotée ci-dessous).

    1. Couleurs et réglages
    2. Texte : couleur, lisibilité, liens, sélection, focus clavier
    3. Titres des blocs (taille, graisse, filet)
    4. En-tête : ombre, réseaux sociaux, soulignement du menu, chevrons,
       menu compact qui reste visible au défilement (ordinateur)
    5. Sous-menus déroulants
    6. Boutons
    7. Bannières (accueil et pages intérieures, fondu vers le contenu)
    8. Bandeau vert des trois sites d'accueil (accueil)
    9. Cartes (missions, outils, pôles)
   10. Photos, documents à télécharger, carte
   11. Section « L'ESL en chiffres » (accueil) : refaite
   12. Section « Nos financeurs » (accueil) : bandeau de logos
   13. Formulaires
   14. Lettre d'information et pied de page
   15. Apparitions au défilement (plus douces)
   16. Réduction des animations (réglage du système)
   ========================================================================== */


/* 1. Couleurs et réglages ------------------------------------------------- */

:root {
	--esl-jaune: #eecd62;
	--esl-jaune-clair: #fbf3d6;
	--esl-bleu: #296197;
	--esl-bleu-clair: #4b7cb5;
	--esl-encre: #13263f;          /* remplace le noir pur des titres et survols */
	--esl-texte: #2e3b4b;          /* texte courant, un peu plus doux que le noir */
	--esl-gris: #66727f;
	--esl-filet: #e3e9f0;
	--esl-ombre: 0 1px 2px rgba(16, 44, 80, .06), 0 14px 32px -16px rgba(16, 44, 80, .28);
	--esl-ombre-forte: 0 2px 4px rgba(16, 44, 80, .06), 0 28px 50px -20px rgba(16, 44, 80, .38);
	--esl-courbe: cubic-bezier(.2, .7, .2, 1);
	--esl-rayon: 20px;
}


/* 2. Texte ---------------------------------------------------------------- */

html body {
	color: var(--esl-texte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html main p,
html main li {
	line-height: 1.7;
}

html main .bloc_texte_contenu p {
	text-wrap: pretty;             /* évite un mot seul en fin de paragraphe */
}

html h1,
html h2,
html h3 {
	text-wrap: balance;            /* lignes de titre équilibrées */
}

/* Liens dans les textes : bleu du site au lieu du bleu Bootstrap */
html main .bloc_texte_contenu a:not(.btn),
html main .formulaire_texte a,
html main .mentions_legales a {
	color: var(--esl-bleu);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(41, 97, 151, .35);
	transition: color .25s, text-decoration-color .25s;
}

html main .bloc_texte_contenu a:not(.btn):hover,
html main .formulaire_texte a:hover,
html main .mentions_legales a:hover {
	color: var(--esl-encre);
	text-decoration-color: var(--esl-jaune);
}

html ::selection {
	background: var(--esl-jaune);
	color: var(--esl-encre);
}

/* Contour visible uniquement à la navigation au clavier */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html textarea:focus-visible,
html select:focus-visible {
	outline: 3px solid rgba(41, 97, 151, .55);
	outline-offset: 3px;
}

/* Puces des listes : petit carré jaune aux angles adoucis */
html .body_secondaire main ul:not(.bloc_timeline) li::before {
	width: 7px;
	height: 7px;
	top: 9px;
	border-radius: 2px;
}


/* 3. Titres des blocs ------------------------------------------------------ */

html h2 {
	font-weight: 800;
	letter-spacing: -.03em;
}

/* un titre dont la taille est réglée dans l'éditeur (span) garde un interlettrage
   à sa mesure (sinon il hérite de celui, en pixels, du grand titre) */
html h2 span[style*="font-size"] {
	letter-spacing: -.015em;
}

html main section:not(.bloc_newsletter):not(.bloc_banner):not(.bloc_banner_petit) h2:not(.bloc18847css *),
html main .mentions_legales h1,
html main .mentions_legales h2 {
	color: var(--esl-encre);
}

/* Grands titres de l'accueil : un peu moins massifs */
html .main_accueil h2 {
	font-size: clamp(40px, 6vw, 84px);
	letter-spacing: -.04em;
}

/* le sous-titre de la bannière d'accueil garde sa taille d'origine */
html .bloc_banner .banner_bg2 h2 {
	font-size: 22px;
	letter-spacing: 0;
}

html .main h2,
html .bloc_titre_h2 h2,
html .bloc18851css h2,
html .bloc_newsletter h2 {
	font-size: clamp(32px, 4.4vw, 56px);
}

/* Filet devant les titres : fondu, terminé par un trait jaune */
html h2::before {
	height: 2px;
	border-radius: 2px;
	background:
		linear-gradient(90deg, rgba(19, 38, 63, 0) 0%, rgba(19, 38, 63, .22) 75%) left center / calc(100% - 44px) 100% no-repeat,
		linear-gradient(90deg, var(--esl-jaune), var(--esl-jaune)) right center / 32px 100% no-repeat;
}

html .body_secondaire h3 strong {
	letter-spacing: -.01em;
}

/* sur téléphone : le filet garde au moins son trait jaune (sinon, quand le titre
   remplit la ligne, il ne reste qu'un point) ; grands titres un peu réduits */
@media (max-width: 575px) {
	html .main_accueil h2::before {
		min-width: 28px;
	}

	html .main_accueil h2 {
		font-size: min(40px, 9.6vw);
		gap: 14px;
	}
}


/* 4. En-tête -------------------------------------------------------------- */

@media (min-width: 993px) {
	/* ombre douce sous la barre de menu et le cadre du logo */
	html #main_menu,
	html .logo_menu {
		box-shadow: 0 24px 40px -24px rgba(6, 30, 60, .55);
	}
}

/* Pastilles des réseaux sociaux */
html #topbar_droite a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-color: rgba(19, 38, 63, .55);
	transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--esl-courbe);
}

html #topbar_droite a:hover {
	background-color: var(--esl-encre);
	border-color: var(--esl-encre);
	color: var(--esl-jaune);
	transform: translateY(-2px);
}

html #topbar_gauche a:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Soulignement du menu : trait jaune qui se déploie au survol */
@media (min-width: 993px) {
	html #main_menu .nav-item a.main_menu_level1::before {
		content: "";
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 13px;
		height: 2px;
		border-radius: 2px;
		background: var(--esl-jaune);
		transform: scaleX(0);
		transition: transform .35s var(--esl-courbe);
	}

	html #main_menu .nav-item a.main_menu_level1:hover::before,
	html #main_menu .nav-item.active a.main_menu_level1::before,
	html #main_menu .nav-item.show a.main_menu_level1::before,
	html #main_menu .nav-item.dropdown:hover a.main_menu_level1::before {
		transform: scaleX(1);
	}

	/* l'ancien trait fin de la rubrique active est remplacé par le nouveau */
	html #main_menu .nav-item.active a.main_menu_level1:not(.dropdown-toggle)::after {
		content: none;
	}
}

/* Chevron fin à la place du triangle des rubriques à sous-menu */
html #main_menu .nav-item a.main_menu_level1.dropdown-toggle::after {
	content: "";
	position: static;
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-left: .55em;
	padding: 0;
	vertical-align: .2em;
	background: none;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s var(--esl-courbe);
}

html #main_menu .nav-item.show a.main_menu_level1.dropdown-toggle::after {
	transform: translateY(.18em) rotate(225deg);
}

@media (min-width: 993px) and (hover: hover) {
	html #main_menu .nav-item.dropdown:hover a.main_menu_level1.dropdown-toggle::after {
		transform: translateY(.18em) rotate(225deg);
	}
}


/* L'en-tête est centré par une transformation (left: 50% + translateX), qui
   empêcherait le menu compact de rester fixé à l'écran : même position, sans
   transformation (il fait déjà toute la largeur). */
html .topbar_et_menu {
	left: 0;
	transform: none;
	z-index: 1030;             /* au-dessus du contenu (sous-menus et menu compact compris) */
}

/* Menu compact : dès qu'on a défilé sous la bannière, le menu se détache en
   pilule flottante translucide, avec un petit logo (ordinateur seulement).
   La classe esl-menu-compact est posée sur <html> par assets/esl-moderne.js. */
@media (min-width: 993px) {
	html.esl-menu-compact #main_menu {
		position: fixed;
		top: 12px;
		left: 50%;
		width: min(1300px, calc(100% - 40px));
		border-radius: 999px;
		background-image: linear-gradient(to right, rgba(36, 89, 143, .95), rgba(52, 118, 178, .95));
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
		backdrop-filter: blur(14px) saturate(1.3);
		box-shadow: 0 18px 40px -18px rgba(6, 30, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
		transform: translateX(-50%);
		animation: esl-menu-arrive .45s var(--esl-courbe);
	}

	html.esl-menu-compact #main_menu .container {
		max-width: none;
		padding-left: 104px;
		padding-right: 14px;
	}

	html.esl-menu-compact #main_menu a.main_menu_level1 {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	html.esl-menu-compact #main_menu .nav-item a.main_menu_level1::before {
		bottom: 8px;
	}

	/* petit logo dans une pastille blanche, à gauche de la pilule */
	html.esl-menu-compact #main_menu::before {
		content: "";
		position: absolute;
		left: 8px;
		top: 50%;
		width: 82px;
		height: calc(100% - 14px);
		transform: translateY(-50%);
		border-radius: 999px;
		background: #fff url("../img/logo-80598b9654a782ec6f235950996e2d7d.png") center / auto 72% no-repeat;
		pointer-events: none;
	}
}

@keyframes esl-menu-arrive {
	from { opacity: 0; transform: translate(-50%, -120%); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}


/* 5. Sous-menus déroulants ------------------------------------------------- */

html #main_menu .dropdown-menu {
	border: 0;
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 0 0 1px rgba(16, 44, 80, .06), 0 24px 48px -16px rgba(10, 35, 70, .35);
	animation: esl-deroule .25s var(--esl-courbe);
}

html #main_menu .dropdown-item {
	border-radius: 10px;
	padding: 10px 14px;
	color: var(--esl-encre);
	font-size: 15px;
	white-space: normal;
	transition: background-color .2s, color .2s, padding-left .25s var(--esl-courbe);
}

html #main_menu .dropdown-item:hover,
html #main_menu .dropdown-item:focus {
	background-color: #f1f6fb;
	color: var(--esl-bleu);
	padding-left: 18px;
}

html #main_menu .dropdown-item:active {
	background-color: #e6eef7;
	color: var(--esl-encre);
}

/* page en cours (repérée par assets/esl-moderne.js) */
html #main_menu .dropdown-item.esl-ici {
	background-color: var(--esl-jaune-clair);
	color: var(--esl-encre);
	font-weight: 600;
}

@media (min-width: 993px) {
	html #main_menu .dropdown-menu {
		min-width: 280px;
		margin-top: 8px;
	}

	/* pont invisible entre la rubrique et le sous-menu (garde le survol) */
	html #main_menu .dropdown-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}
}

/* sur ordinateur, le sous-menu s'ouvre aussi au survol (le clic marche toujours) */
@media (min-width: 993px) and (hover: hover) {
	html #main_menu .nav-item.dropdown:hover > .dropdown-menu {
		display: block;
	}
}

@keyframes esl-deroule {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}


/* 6. Boutons --------------------------------------------------------------- */

html a.btn.btn-primary,
html button.btn.btn-primary {
	box-shadow: 0 10px 22px -12px rgba(150, 115, 10, .6);
	transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s var(--esl-courbe);
}

html a.btn.btn-primary:hover,
html button.btn.btn-primary:hover {
	background-color: var(--esl-encre);
	border-color: var(--esl-encre);
	box-shadow: 0 16px 28px -14px rgba(19, 38, 63, .6);
	transform: translateY(-2px);
}

html a.btn.btn-primary:not(.control-c):hover::after,
html button.btn.btn-primary:hover::after {
	color: var(--esl-encre);
}

html a.btn.btn-primary:active,
html button.btn.btn-primary:active {
	transform: translateY(0);
}

/* « Adhérez à l'ESL » */
html .navbar_secondaire a.menu9666 {
	transition: background-color .35s, color .35s, border-color .35s, transform .35s var(--esl-courbe);
}

html .navbar_secondaire a.menu9666:hover {
	transform: translateY(-1px);
}


/* 7. Bannières ------------------------------------------------------------- */

html .bloc_banner_petit_titre h1.text-left,
html .banner_bg2 h1 {
	text-shadow: 0 2px 28px rgba(0, 25, 60, .35);
}

/* sous-titres trop fins : graisse 300 au lieu de 100 */
html .banner_bg2 h2,
html .bloc_banner_petit_titre p.text-left {
	font-weight: 300;
	text-shadow: 0 1px 14px rgba(0, 25, 60, .35);
}

/* second bouton de la bannière d'accueil : version « verre » */
html .bloc_banner .banner_btn_secondaire a.btn.btn-primary {
	background-color: rgba(19, 38, 63, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 22px -12px rgba(0, 25, 60, .6);
	color: #fff;
}

html .bloc_banner .banner_btn_secondaire a.btn.btn-primary::after {
	border-color: #fff;
	color: var(--esl-encre);
}

html .bloc_banner .banner_btn_secondaire a.btn.btn-primary:hover {
	background-color: var(--esl-jaune);
	color: var(--esl-encre);
	box-shadow: 0 16px 28px -14px rgba(0, 25, 60, .6);
}

/* Pages intérieures : même fondu que l'accueil entre la bannière et le contenu.
   Les nuages (image du site) remontent un peu pour laisser voir leur bas crème,
   puis le haut de la page passe du crème au blanc, comme sous la bannière
   d'accueil. La bannière intérieure fait 400 px de haut (réglage Wizodo). */
html .bloc_banner_petit::after {
	bottom: -232px;
}

/* sur téléphone et tablette, le titre est plus bas (sous l'en-tête) : les
   nuages remontent moins */
@media (max-width: 992px) {
	html .bloc_banner_petit::after {
		bottom: -270px;
	}
}

html .body_secondaire main {
	background: linear-gradient(to bottom, #f8f6f1 0, #f8f6f1 400px, #fff 820px) no-repeat;
}

/* fil d'Ariane dans une pastille translucide */
html .bloc_banner_petit .chemin .breadcrumb {
	display: inline-flex;
	padding: 7px 16px;
	margin-top: 6px;
	border-radius: 999px;
	background-color: rgba(9, 32, 61, .28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 14px;
}

/* le CSS libre du site donne à toutes les listes des pages intérieures une
   marge basse de 8 px et un retrait de 24 px (puces) : pas dans le fil d'Ariane */
html .bloc_banner_petit .chemin .breadcrumb-item {
	margin-bottom: 0;
	padding-left: 0;
}

html .bloc_banner_petit .chemin .breadcrumb-item + .breadcrumb-item {
	padding-left: .5rem;
}

html .bloc_banner_petit .chemin .breadcrumb-item + .breadcrumb-item::before {
	content: "\203A";        /* › */
	padding: 0 .55em 0 .4em;
	opacity: .7;
}

html .bloc_banner_petit .chemin .breadcrumb a {
	text-decoration: none;
	transition: color .25s;
}

html .bloc_banner_petit .chemin .breadcrumb a:hover {
	color: var(--esl-jaune);
}

/* sur téléphone, le fil d'Ariane passe sur deux lignes : pas de pastille */
@media (max-width: 575px) {
	html .bloc_banner_petit .chemin .breadcrumb {
		padding: 0;
		background-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		font-size: 13px;
	}
}


/* 8. Bandeau vert des trois sites d'accueil -------------------------------
   Sur ordinateur, le bandeau se termine en biais, suivi de bandes de plus en
   plus fines qui s'estompent (elles apparaissent de gauche à droite).
   Le vert de fin (--esl-vert-fin) est celui du dégradé d'origine du bandeau. */

@media (min-width: 993px) {
	html .bloc18844css .liste_icones {
		--esl-vert-fin: rgb(200, 230, 120);
		/* le fond s'arrête 60 px avant le bord : la fin en biais prend le relais */
		background: linear-gradient(to right, rgb(155, 189, 79), var(--esl-vert-fin)) left top / calc(100% - 60px) 100% no-repeat;
	}

	html .bloc18844css .liste_icones > div {
		z-index: 1;
	}

	html .bloc18844css .liste_icones::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(100% - 60px);
		width: 230px;
		transform: skewX(-24deg);
		transform-origin: top left;
		background: linear-gradient(90deg,
			var(--esl-vert-fin) 0 68px, transparent 68px 82px,
			var(--esl-vert-fin) 82px 98px, transparent 98px 112px,
			var(--esl-vert-fin) 112px 124px, transparent 124px 138px,
			var(--esl-vert-fin) 138px 146px, transparent 146px 160px,
			var(--esl-vert-fin) 160px 164px, transparent 164px);
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 32%, rgba(0, 0, 0, .25) 72%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 32%, rgba(0, 0, 0, .25) 72%, transparent 100%);
		pointer-events: none;
		animation: esl-bandes 1.1s var(--esl-courbe) .5s both;
	}
}

/* Correctif (défaut du site actuel) : entre 993 et 1199 px, le bandeau est trop
   étroit, « Saint-Omer » passe à la ligne et le bandeau mord sur le titre suivant. */
@media (min-width: 993px) and (max-width: 1199px) {
	html .bloc18844css .liste_icones {
		width: 84%;
		padding: 14px 20px 14px 44px !important;
	}

	html .bloc18844css h3 {
		font-size: 19px;
	}

	html .bloc18844css p {
		font-size: 14px;
	}
}

@keyframes esl-bandes {
	from { -webkit-clip-path: inset(0 70% 0 0); clip-path: inset(0 70% 0 0); }
	to   { -webkit-clip-path: inset(0 0 0 0);   clip-path: inset(0 0 0 0); }
}


/* 9. Cartes (missions, outils, pôles) -------------------------------------- */

html .bloc_services .card {
	border: 0;
	border-radius: var(--esl-rayon);
	overflow: hidden;
	background-color: #fff;
	box-shadow: var(--esl-ombre);
	transition: transform .45s var(--esl-courbe), box-shadow .45s var(--esl-courbe);
}

html .bloc_services .bloc_services_item a:hover .card,
html .bloc_services .bloc_services_item a:focus-visible .card {
	transform: translateY(-6px);
	box-shadow: var(--esl-ombre-forte);
}

html .bloc_services .bloc_services_item a:focus-visible {
	outline: none;
}

html .bloc_services .bloc_services_item a:focus-visible .card {
	box-shadow: 0 0 0 3px rgba(41, 97, 151, .55), var(--esl-ombre-forte);
}

/* zoom de la photo plus léger et plus lent */
html .bloc_services .services_img img {
	transition: transform .9s var(--esl-courbe), opacity .7s ease;
}

html .bloc_services .bloc_services_item:hover .services_img img {
	transform: scale(1.06);
	transition: transform .9s var(--esl-courbe);
}

html .bloc_services .card-body {
	position: relative;
	z-index: 2;
	padding: 22px 22px 24px;
}

html .bloc_services .bloc_services_item a:hover .card-body {
	background-color: #fff;
}

html .bloc_services .card_texte3 {
	color: var(--esl-encre);
	letter-spacing: -.02em;
}

html .bloc_services .card_texte4 {
	color: var(--esl-gris);
	line-height: 22px;
}

/* flèche qui apparaît au survol, à cheval sur la photo */
html .bloc_services .card-body::after {
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: -22px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	background-color: var(--esl-jaune);
	color: var(--esl-encre);
	box-shadow: 0 10px 20px -10px rgba(19, 38, 63, .5);
	opacity: 0;
	transform: translateY(8px) scale(.85);
	transition: opacity .35s, transform .45s var(--esl-courbe);
}

/* lien vers un autre site : flèche oblique */
html .bloc_services .bloc_services_item a[target="_blank"] .card-body::after {
	content: "\f35d";
}

html .bloc_services .bloc_services_item a:hover .card-body::after,
html .bloc_services .bloc_services_item a:focus-visible .card-body::after {
	opacity: 1;
	transform: none;
}


/* 10. Photos, documents à télécharger, carte -------------------------------- */

html .bloc_texte img.img_bloc_texte {
	border-radius: 24px;
	box-shadow: 0 26px 50px -28px rgba(16, 44, 80, .55);
}

/* documents à télécharger : carte cliquable */
html .bloc_doc .row > .col-12 > div {
	border: 1px solid var(--esl-filet);
	border-radius: 14px;
	transition: border-color .3s, box-shadow .3s, transform .35s var(--esl-courbe);
}

html .bloc_doc .row > .col-12 > div:hover {
	border-color: rgba(75, 124, 181, .5);
	box-shadow: var(--esl-ombre);
	transform: translateY(-2px);
}

html .bloc_doc .fa-square-full {
	color: var(--esl-jaune) !important;
	border-radius: 2px;
}

html #map {
	box-shadow: 0 24px 48px -28px rgba(16, 44, 80, .5);
}

/* Correctif téléphone (défaut du site actuel) : la photo d'un bloc texte reste
   flottante et repousse les titres hors de l'écran, à droite (page « Nos
   différents lieux d'accueil » : 200 px de défilement horizontal). Sur
   téléphone et tablette, la photo passe au-dessus du texte.                */
@media (max-width: 992px) {
	html .bloc_texte .gallery-swipe {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	html .bloc_texte .gallery-swipe img.img_bloc_texte {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/* 11. Section « L'ESL en chiffres » (accueil) : refaite ------------------
   Fond bleu, six cartes : grande pastille jaune avec pictogramme, le même
   pictogramme en filigrane, chiffre plein, libellé, et un filet jaune qui
   avance pendant le comptage. Pictogrammes, comptage et filet sont posés par
   assets/esl-moderne.js ; sans script, les cartes s'affichent sans
   pictogramme, avec leurs chiffres et le filet plein.                      */

html .bloc18847css {
	background:
		radial-gradient(55% 80% at 100% 100%, rgba(110, 175, 240, .22), rgba(110, 175, 240, 0) 65%),
		linear-gradient(150deg, #10305a 0%, #1c4a7c 60%, #24599a 100%);
	color: #fff;
}

/* trame de points à la place de la photo de foule (image hébergée sur un autre site) */
html .bloc18847css::before {
	background: radial-gradient(rgba(255, 255, 255, .10) 1px, rgba(255, 255, 255, 0) 1.6px) 0 0 / 24px 24px;
	background-blend-mode: normal;
	opacity: 1;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 100%);
}

html .bloc18847css h2 {
	color: #fff;
}

html .bloc18847css h2::before {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 75%) left center / calc(100% - 44px) 100% no-repeat,
		linear-gradient(90deg, var(--esl-jaune), var(--esl-jaune)) right center / 32px 100% no-repeat;
}

/* grille des six cartes */
html .bloc18847css .liste_icones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 28px 0 -56px;      /* le bas du bloc est réglé à 130 px dans Wizodo : on le resserre */
}

html .bloc18847css .liste_icones > div {
	position: relative;
	max-width: none;
	flex: none;
	width: auto;
	margin: 0 !important;
	padding: 26px 26px 28px;
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 100%);
	border: 1px solid rgba(255, 255, 255, .13);
	box-shadow: 0 20px 40px -26px rgba(0, 10, 30, .7), inset 0 1px 0 rgba(255, 255, 255, .10);
	overflow: hidden;
	transition: transform .5s var(--esl-courbe), border-color .4s, background-color .4s;
}

html .bloc18847css .liste_icones > div:hover {
	transform: translateY(-3px);
	border-color: rgba(238, 205, 98, .45);
}

/* le pictogramme en grand filigrane, dans le coin de la carte */
html .bloc18847css .liste_icones > div[data-esl-icone]::before {
	content: attr(data-esl-icone);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: -14px;
	bottom: -26px;
	font-size: 118px;
	line-height: 1;
	color: rgba(255, 255, 255, .055);
	transform: rotate(-10deg);
	transition: transform .7s var(--esl-courbe), color .5s;
	pointer-events: none;
}

html .bloc18847css .liste_icones > div[data-esl-icone]:hover::before {
	transform: rotate(-4deg) scale(1.06);
	color: rgba(238, 205, 98, .09);
}

/* filet jaune : avance pendant le comptage (--esl-progression de 0 à 1) */
html .bloc18847css .liste_icones > div::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--esl-jaune);
	transform: scaleX(var(--esl-progression, 1));
	transform-origin: left center;
}

html .bloc18847css .liste_icones table {
	position: relative;
	z-index: 1;
	margin: 0;
}

html .bloc18847css .liste_icones td {
	line-height: 1.4 !important;
	padding: 0;
}

/* pastille à gauche, chiffre et libellé à droite */
html .bloc18847css .icone_ds_barre {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 6px;
	align-items: center;
	margin: 0;
	border: 0;
}

html .bloc18847css .icone_ds_barre[data-esl-icone] {
	grid-template-columns: auto minmax(0, 1fr);
}

html .bloc18847css .icone_ds_barre[data-esl-icone]::before {
	content: attr(data-esl-icone);
	grid-row: span 2;
	align-self: start;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 23px;
	color: var(--esl-encre);
	background-color: var(--esl-jaune);
	box-shadow: 0 0 0 7px rgba(238, 205, 98, .14), 0 12px 22px -10px rgba(0, 0, 0, .5);
	transition: transform .5s var(--esl-courbe), box-shadow .5s;
}

html .bloc18847css .liste_icones > div:hover .icone_ds_barre[data-esl-icone]::before {
	transform: rotate(-8deg) scale(1.05);
	box-shadow: 0 0 0 10px rgba(238, 205, 98, .18), 0 14px 26px -10px rgba(0, 0, 0, .55);
}

/* le chiffre : plein, blanc */
html .bloc18847css .liste_icones h3 {
	display: block;
	margin: 0;
	font-family: Montserrat, Arial, sans-serif !important;
	font-size: clamp(36px, 3.6vw, 52px);
	font-weight: 800;
	line-height: 1.05 !important;
	letter-spacing: -.03em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	-webkit-text-stroke: 0;
	color: #fff;
	-webkit-text-fill-color: #fff;
	opacity: 1;
	transform: none;
}

html .bloc18847css .liste_icones p {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, .8);
	opacity: 1;
	transform: none;
}

/* apparition des cartes l'une après l'autre (classes posées par le script) */
html .bloc18847css .esl-attente .liste_icones > div {
	opacity: 0;
	transform: translateY(20px);
}

html .bloc18847css .esl-attente .liste_icones .icone_ds_barre[data-esl-icone]::before {
	transform: scale(.6);
}

html .bloc18847css .esl-attente.esl-vu .liste_icones > div {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s ease calc(var(--esl-i, 0) * 110ms),
		transform .9s var(--esl-courbe) calc(var(--esl-i, 0) * 110ms),
		border-color .4s,
		background-color .4s;
}

html .bloc18847css .esl-attente.esl-vu .liste_icones .icone_ds_barre[data-esl-icone]::before {
	transform: none;
	transition: transform .8s cubic-bezier(.34, 1.4, .64, 1) calc(var(--esl-i, 0) * 110ms + 150ms), box-shadow .5s;
}

html .bloc18847css .esl-attente.esl-vu .liste_icones > div:hover {
	transform: translateY(-3px);
	transition: transform .5s var(--esl-courbe), border-color .4s;
}

html .bloc18847css .esl-attente.esl-vu .liste_icones > div:hover .icone_ds_barre[data-esl-icone]::before {
	transform: rotate(-8deg) scale(1.05);
	transition: transform .5s var(--esl-courbe), box-shadow .5s;
}

@media (max-width: 1199px) {
	html .bloc18847css .icone_ds_barre[data-esl-icone]::before {
		width: 52px;
		height: 52px;
		font-size: 20px;
	}
}

@media (max-width: 991px) {
	html .bloc18847css .liste_icones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 575px) {
	html .bloc18847css .liste_icones {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin-bottom: -70px;
	}

	html .bloc18847css .liste_icones > div {
		padding: 20px 20px 22px;
		border-radius: 16px;
	}

	html .bloc18847css .icone_ds_barre {
		column-gap: 16px;
	}

	html .bloc18847css .liste_icones h3 {
		font-size: 36px;
	}
}


/* 12. Section « Nos financeurs » (accueil) : bandeau de logos --------------
   Chaque logo dans une vignette blanche de même hauteur, bords du bandeau en
   fondu, flèches sobres. Le script fait défiler les logos en continu et
   lentement (pause au survol) au lieu d'avancer d'un cran toutes les 1,5 s. */

html .bloc_partenaires .customer-logos {
	margin-left: 0;
	margin-right: 0;
}

html .bloc_partenaires .slick-list {
	padding: 14px 0 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* vignettes de même hauteur */
html .bloc_partenaires .slick-track {
	display: flex;
}

html .bloc_partenaires .slick-slide {
	float: none;
	height: auto;
	margin: 0 11px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background-color: #fff;
	border: 1px solid var(--esl-filet);
	border-radius: 16px;
	box-shadow: 0 10px 22px -18px rgba(16, 44, 80, .45);
	transition: transform .45s var(--esl-courbe), box-shadow .45s, border-color .3s;
}

html .bloc_partenaires .slick-slide:hover {
	transform: translateY(-4px);
	border-color: rgba(75, 124, 181, .35);
	box-shadow: 0 18px 30px -20px rgba(16, 44, 80, .55);
}

html .bloc_partenaires .slick-slide img,
html .bloc_partenaires .slide img {
	margin-bottom: 0 !important;
	opacity: 1;
	transform: none;
}

/* légende sous certains logos */
html .bloc_partenaires .slide p {
	margin: 2px 0 2px;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--esl-gris);
	opacity: 1;
	transform: none;
}

html .bloc_partenaires .slide p small {
	font-size: inherit;
}

/* flèches (quand elles sont affichées) : ronds blancs, chevrons bleu nuit */
html .bloc_partenaires a.slick-prev,
html .bloc_partenaires a.slick-next {
	bottom: -26px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid var(--esl-filet);
	box-shadow: 0 8px 16px -10px rgba(16, 44, 80, .5);
	color: var(--esl-encre);
}

html .bloc_partenaires a.slick-prev:hover,
html .bloc_partenaires a.slick-next:hover {
	background-color: var(--esl-jaune);
	border-color: var(--esl-jaune);
	color: var(--esl-encre);
}

html .bloc_partenaires a.slick-prev::before,
html .bloc_partenaires a.slick-next::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 13px;
	color: var(--esl-encre);
}

html .bloc_partenaires a.slick-prev::before {
	content: "\f053";
}

html .bloc_partenaires a.slick-next::before {
	content: "\f054";
}


/* 13. Formulaires ----------------------------------------------------------- */

html .bloc_formulaire label {
	font-weight: 600;
	font-size: 14px;
	color: var(--esl-encre);
	margin-bottom: 6px;
}

html .bloc_formulaire .form-control {
	height: auto;
	min-height: 48px;
	padding: 11px 16px;
	border: 1px solid #d5dee8;
	border-radius: 12px;
	background-color: #fbfcfe;
	transition: border-color .25s, box-shadow .25s, background-color .25s;
}

html .bloc_formulaire textarea.form-control {
	min-height: 150px;
}

html .bloc_formulaire .form-control:focus {
	border-color: var(--esl-bleu-clair);
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(75, 124, 181, .16);
}

html .bloc_formulaire input[type="checkbox"] {
	accent-color: var(--esl-bleu);
	width: 17px;
	height: 17px;
	vertical-align: -3px;
	margin-right: 4px;
}


/* 14. Lettre d'information et pied de page ---------------------------------- */

html .bloc_newsletter .form-control {
	border: 0;
	box-shadow: 0 12px 26px -16px rgba(0, 20, 50, .6);
	transition: box-shadow .25s;
}

html .bloc_newsletter .form-control:focus {
	box-shadow: 0 0 0 4px rgba(238, 205, 98, .55), 0 12px 26px -16px rgba(0, 20, 50, .6);
}

html .bloc_newsletter .form-control::placeholder {
	color: #8a96a3;
}

html .footer {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 18px;
	padding-bottom: 14px;
	font-size: 14px;
	letter-spacing: .01em;
}

html .footer p {
	color: rgba(255, 255, 255, .82);
}

html .footer a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0);
	text-underline-offset: 4px;
	transition: text-decoration-color .3s;
}

html .footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--esl-jaune);
}


/* 15. Apparitions au défilement : plus douces --------------------------------
   Avant : montée de 60 px avec effet de zoom, et photos qui rebondissent.
   Après : légère montée et fondu, plus lents.                               */

html h1:not(.bloc_maps_full *),
html h2:not(.bloc_maps_full *),
html h3:not(.bloc_maps_full *),
html p:not(.bloc_maps_full *),
html ul:not(.bloc_maps_full *) {
	transform: translateY(22px);
	transition:
		opacity .8s ease var(--delay, 0s),
		transform .9s var(--esl-courbe) var(--delay, 0s);
}

html h1.visible:not(.bloc_maps_full *),
html h2.visible:not(.bloc_maps_full *),
html h3.visible:not(.bloc_maps_full *),
html p.visible:not(.bloc_maps_full *),
html ul.visible:not(.bloc_maps_full *) {
	transform: none;
}

html img:not(.bloc_maps_full *) {
	transform: scale(.97);
	transition: transform 1s var(--esl-courbe), opacity .8s ease;
}

html img.visible:not(.bloc_maps_full *) {
	transform: none;
}


/* 16. Réduction des animations ----------------------------------------------
   Si le visiteur a demandé moins d'animations dans les réglages de son
   appareil : tout s'affiche directement, les nuages ne défilent plus.       */

@media (prefers-reduced-motion: reduce) {
	html h1, html h2, html h3, html p, html ul, html img,
	html .navbar-nav .nav-item,
	html .banner_bg2 a,
	html .bloc_banner .shape2 {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	html .bloc18847css .esl-attente .liste_icones > div {
		opacity: 1 !important;
		transform: none !important;
	}

	html.esl-menu-compact #main_menu,
	html .bloc18844css .liste_icones::after,
	html .bloc_banner::after,
	html .bloc_banner_petit::after,
	html #main_menu .dropdown-menu {
		animation: none !important;
	}

	html *,
	html *::before,
	html *::after {
		transition-duration: .01ms !important;
	}
}

/* 17. Thème Wizodo 2027 (ajouté par convertir_esl.py) ---------------------- */

/* mises en forme posées dans l'ancien éditeur (style="…") : le filtre du moteur ne garde pas
   les style=, la conversion les change en classes (titre et horaires du bloc d'accueil) */
html .esl-t26 {
	font-size: 26px;
	letter-spacing: -.015em;
}

html .esl-t18 {
	font-size: 18px;
}

html .esl-bleu {
	color: #3b6499;
}

/* le logo garde ses proportions, quel que soit le fichier choisi (hauteur limitée par la feuille du site) */
html .logo_menu img {
	width: auto;
	height: auto;
}

/* « Infos pratiques » (Centre de santé sexuelle) : la liste dans un encadré crème, puces jaunes du site */
html .body_secondaire main .esl-infos ul {
	max-width: 760px;
	margin: 0 0 1rem;
	padding: 22px 26px 14px;
	border-radius: var(--esl-rayon);
	background-color: var(--esl-jaune-clair);
}

/* « Questions fréquentes » (module faq) : une carte par question, la réponse s'ouvre au clic */
html .esl-faq details.question {
	max-width: 900px;
	margin: 0 0 14px;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: var(--esl-ombre);
}

html .esl-faq details.question > summary {
	position: relative;
	display: block;
	padding: 18px 58px 18px 22px;
	font-weight: 700;
	color: var(--esl-encre);
	cursor: pointer;
	list-style: none;
}

html .esl-faq details.question > summary::-webkit-details-marker {
	display: none;
}

html .esl-faq details.question > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 2px solid var(--esl-bleu);
	border-bottom: 2px solid var(--esl-bleu);
	transform: rotate(45deg);
	transition: transform .3s var(--esl-courbe), margin-top .3s var(--esl-courbe);
}

html .esl-faq details.question[open] > summary::after {
	margin-top: -3px;
	transform: rotate(-135deg);
}

html .esl-faq details.question > summary:focus-visible {
	border-radius: 16px;
	outline: 3px solid rgba(41, 97, 151, .55);
	outline-offset: 2px;
}

html .esl-faq .reponse {
	padding: 0 22px 18px;
}

html .esl-faq .reponse p:last-child {
	margin-bottom: 0;
}