/*
 * Styles du thème EOLE.
 *
 * Les valeurs (hauteurs, marges intérieures, tailles) sont relevées sur le
 * site de production (thème HealthFlex) pour que la refonte soit fidèle.
 * Tout ce qui peut être exprimé dans theme.json y est : ce fichier ne traite
 * que ce que les blocs ne savent pas faire.
 */

/* --------------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */

:root {
	--eole-ombre-carte: 0 2px 12px rgba(0, 0, 0, 0.08);
	--eole-section: 128px; /* marge intérieure verticale d'une section */
	--eole-chevron: 32px;  /* profondeur des séparateurs en chevron */
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* En-tête, contenu et pied de page se touchent : chaque section porte sa
 * propre marge intérieure, comme en production. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* La bannière et la section de contenu se touchent : chacune porte sa propre
 * marge intérieure. La classe est nécessaire — le cœur pose l'écart via un
 * sélecteur de classe généré, qui l'emporterait sur « main > * + * ». */
main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* Une section pleine largeur qui ouvre ou clôt le contenu d'une page absorbe
 * la marge grise du conteneur : elle vient alors au contact de la bannière
 * et du bandeau d'appel, sans liseré. */
.eole-page__contenu > .wp-block-post-content > .alignfull:first-child {
	margin-top: calc(var(--eole-section) * -1);
}

/* L'encoche du bandeau d'appel prolonge la section qui le précède : elle doit
 * donc en reprendre la couleur. Gris par défaut, orange lorsque la page se
 * termine par le bandeau de contact — sans quoi un triangle clair se découpe
 * sur l'aplat. */
.eole-appel {
	--eole-chevron-couleur: var(--wp--preset--color--muted);
}

body:has(.eole-contact) .eole-appel {
	--eole-chevron-couleur: var(--wp--preset--color--accent);
}

/* Le bandeau d'appel remonte sur la marge grise que la dernière section
 * laisse en bas de page : sans cela, une bande claire vide le sépare du
 * contenu. Ses 128 px de marge intérieure préservent la respiration. */
.eole-appel {
	margin-top: calc(var(--eole-section) * -1);
}

/* Les sections pleine largeur s'enchaînent sans intervalle : c'est leur
 * marge intérieure qui fait l'espacement, et les chevrons ont besoin de
 * déborder directement sur la section suivante. */
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .eole-encarts + .alignfull {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 * En-tête — 172 px de haut, logo 120 px, menu Montserrat 13 px
 * ----------------------------------------------------------------------- */

.eole-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.admin-bar .eole-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.eole-header .wp-block-site-logo img {
	max-height: 120px;
	width: auto;
}

.eole-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 10px;
}

.eole-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 0;
	box-shadow: var(--eole-ombre-carte);
	min-width: 16rem;
	padding-block: 8px;
}

.eole-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 15px;
	text-transform: none;
}

/* --------------------------------------------------------------------------
 * Bannière d'accueil — 640 px, titre Montserrat 56/900 sur voile sombre
 * ----------------------------------------------------------------------- */

.eole-hero {
	min-height: 640px;
}

/* Le contenu de la bannière est calé sur la largeur du site pour que le
 * panneau s'aligne sur le reste de la page. */
.eole-hero .wp-block-cover__inner-container {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	width: 100%;
}

/* Le panneau est calé à gauche, sur le bord du conteneur.
 * Le « !important » est nécessaire : la mise en page contrainte du cœur de
 * WordPress impose « margin-left/right: auto !important » à ses enfants. */
.eole-hero__panneau {
	background-color: rgba(0, 0, 0, 0.5);
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 600px;
	padding: 30px;
}

.eole-hero__panneau > * {
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Bannières des pages intérieures — 300 px, deux bandes translucides
 * collées en bas : le titre sur voile clair, le sous-titre sur voile orange.
 * ----------------------------------------------------------------------- */

.eole-banniere {
	min-height: 300px;
}

.eole-banniere .wp-block-cover__inner-container {
	width: 100%;
}

.eole-banniere__bande {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.eole-banniere__bande--titre {
	background-color: rgba(242, 242, 242, 0.5);
	padding: 16px 0 13px;
}

.eole-banniere__bande--titre :is(h1, .wp-block-post-title, .wp-block-query-title) {
	color: #000;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 39px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
}

.eole-banniere__bande--soustitre {
	background-color: rgba(234, 62, 17, 0.5);
	padding: 10px 0;
}

.eole-banniere__bande--soustitre p,
.eole-banniere__bande--soustitre .wp-block-post-date {
	color: #fff;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}

/* Le contenu des bandes reste aligné sur la largeur du site. */
.eole-banniere__bande > * {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	padding-inline: 15px;
}

/* --------------------------------------------------------------------------
 * Séparateurs en chevron
 *
 * Reproduction de « sep_angled_positive » : deux triangles de 32 px, l'un
 * miroir de l'autre, qui forment une pointe douce entre deux sections.
 *
 * Trois variantes, parce qu'un élément n'a que deux pseudo-éléments :
 *   chevron-bas    la section déborde en pointe sur celle qui suit
 *   chevron-haut   la section remonte en pointe sur celle qui précède
 *   encoche-haut   la section précédente semble déborder dans celle-ci
 *                  (même rendu que chevron-bas, mais dessiné par la suivante)
 * ----------------------------------------------------------------------- */

.is-style-chevron-bas,
.is-style-chevron-haut,
.is-style-encoche-haut {
	position: relative;
}

.is-style-chevron-bas::before,
.is-style-chevron-bas::after,
.is-style-chevron-haut::before,
.is-style-chevron-haut::after,
.is-style-encoche-haut::before,
.is-style-encoche-haut::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	pointer-events: none;
	z-index: 2;
}

.is-style-chevron-bas::after,
.is-style-chevron-haut::after,
.is-style-encoche-haut::after {
	transform: rotateY(180deg);
}

.is-style-chevron-bas::before,
.is-style-chevron-haut::before,
.is-style-encoche-haut::before {
	left: 0;
}

.is-style-chevron-bas::after,
.is-style-chevron-haut::after,
.is-style-encoche-haut::after {
	right: 0;
}

/* La couleur du chevron est celle de la section qui le projette. */
.is-style-chevron-bas::before,
.is-style-chevron-bas::after {
	bottom: calc(var(--eole-chevron) * -1);
	border-width: var(--eole-chevron) 0 0 50vw;
	border-top-color: var(--eole-chevron-couleur, var(--wp--preset--color--muted));
}

.is-style-chevron-haut::before,
.is-style-chevron-haut::after {
	top: calc(var(--eole-chevron) * -1);
	border-width: 0 0 var(--eole-chevron) 50vw;
	border-bottom-color: var(--eole-chevron-couleur, var(--wp--preset--color--muted));
}

.is-style-encoche-haut::before,
.is-style-encoche-haut::after {
	top: 0;
	border-width: var(--eole-chevron) 0 0 50vw;
	border-top-color: var(--eole-chevron-couleur, var(--wp--preset--color--muted));
}

/* --------------------------------------------------------------------------
 * Encarts d'accueil — 4 tuiles qui remontent de 120 px sur la bannière
 * ----------------------------------------------------------------------- */

/* La rangée déborde de 15 px de chaque côté pour occuper 1170 px,
 * la largeur du conteneur de production. */
/* La rangée fait 1170 px — la largeur du conteneur de production, soit un
 * peu plus que la colonne de texte. Le « !important » contourne la largeur
 * imposée par la mise en page contrainte du cœur de WordPress. */
.eole-encarts {
	margin-inline: auto !important;
	margin-top: -120px;
	max-width: 1170px !important;
	position: relative;
	z-index: 10;
}

.eole-encarts.wp-block-columns {
	align-items: stretch;
	gap: 0;
}

.eole-encart::before,
.eole-encart::after {
	background-color: inherit;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	width: 100%;
}

.eole-encart::before {
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	top: -6px;
}

.eole-encart::after {
	bottom: -6px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.eole-encart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 30px 20px;
	text-align: center;
	transition: transform 0.25s ease;
}

.eole-encart:hover,
.eole-encart:focus-within {
	transform: translateY(-3px);
}

.eole-encart .wp-block-image {
	margin: 0 auto;
}

.eole-encart .wp-block-image img {
	height: 80px;
	width: 80px;
	object-fit: contain;
}

.eole-encart__titre {
	color: #fff;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
}

.eole-encart p {
	font-size: 13px;
	margin: 0;
}

/* Le bouton reste collé en bas pour que les 4 tuiles s'alignent. */
.eole-encart .wp-block-buttons {
	justify-content: center;
	margin-top: auto;
}

/* Bouton « btn-xs » : petit, anguleux, dans la couleur opposée à la tuile. */
.eole-encart .wp-block-button__link {
	border-radius: 3px 3px 0 0;
	font-size: 10px;
	padding: 4px 10px;
}

/* --------------------------------------------------------------------------
 * Cartes tarifs — titre Montserrat 33/900, prix Varela Round 30/800
 * ----------------------------------------------------------------------- */

.eole-tarif {
	background-color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-align: center;
}

/* La carte est un conteneur flex : les marges automatiques que la mise en
 * page contrainte impose à ses enfants les centreraient en les rétrécissant.
 * On rend donc la pleine largeur à chaque bandeau. */
.eole-tarif > * {
	/* « border-box » est indispensable ici : sans lui, width:100% s'ajoute
	   aux 30 px de marge intérieure et le bandeau dépasse la carte, ce qui
	   décale visuellement son texte. */
	box-sizing: border-box;
	margin-inline: 0 !important;
	max-width: none !important;
	width: 100%;
}

.eole-tarif__titre {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 33px;
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
	padding: 30px;
}

.eole-tarif__prix {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--base);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0;
	padding: 10px 30px;
}

.eole-tarif .wp-block-buttons {
	justify-content: center;
	margin: 0;
	padding: 30px;
}

/* --------------------------------------------------------------------------
 * Liste d'articles — pas de carte blanche : titre, pastilles, lien
 * ----------------------------------------------------------------------- */

.eole-carte {
	display: flex;
	flex-direction: column;
	gap: 15px;
	height: 100%;
	padding-bottom: 34px;
}

.eole-carte__image img {
	display: block;
	width: 100%;
}

.eole-carte__titre {
	font-family: var(--wp--preset--font-family--alt);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
}

.eole-carte__titre a {
	color: var(--wp--preset--color--contrast);
}

.eole-carte__titre a:hover,
.eole-carte__titre a:focus {
	color: var(--wp--preset--color--primary);
}

.eole-carte__infos {
	align-items: center;
}

.eole-carte__info {
	color: #fff;
	font-size: 15px;
	padding: 10px;
}

.eole-carte__info a {
	color: #fff;
}

.eole-carte__info--date {
	background-color: var(--wp--preset--color--accent);
}

.eole-carte__info--categorie {
	background-color: var(--wp--preset--color--primary);
}

/* Le lien « En lire plus » reprend l'allure d'un bouton. */
.eole-carte__lien {
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary);
	border-radius: 30px;
	color: #fff;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 13px;
	font-weight: 700;
	margin-top: auto;
	padding: 8px 24px;
	text-decoration: none;
	text-transform: uppercase;
}

.eole-carte__lien:hover,
.eole-carte__lien:focus {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Page d'article — titre, pastilles, contenu, sans bannière photo
 * ----------------------------------------------------------------------- */

.eole-article__titre {
	font-family: var(--wp--preset--font-family--alt);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 13px;
}

.eole-article__infos {
	align-items: stretch;
	margin-block-end: 30px;
}

.eole-article__info {
	color: #fff;
	font-size: 15px;
	margin: 0;
	padding: 10px;
}

.eole-article__info a {
	color: #fff;
}

.eole-article__info--date {
	background-color: var(--wp--preset--color--accent);
}

/* L'auteur reprend la couleur de la date, atténuée : c'est ainsi que les
   deux se distinguent en production. */
.eole-article__info--auteur {
	background-color: rgba(239, 79, 38, 0.75);
}

.eole-article__info--categorie {
	background-color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
 * Pied de page — 100 px de marge intérieure, titres Montserrat 18/400
 * ----------------------------------------------------------------------- */

/* Le titre de chaque colonne est prolongé par un filet, comme en
 * production. */
.eole-footer :is(h2, h3, h4) {
	align-items: center;
	color: #fff;
	display: flex;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 18px;
	font-weight: 400;
	gap: 15px;
	margin: 0 0 20px;
}

.eole-footer :is(h2, h3, h4)::after {
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	content: "";
	flex: 1;
}

/* Les liens du menu sont en petites capitales ; ceux des coordonnées
 * gardent la couleur d'accent. */
.eole-footer__liens a,
.eole-footer__liens button {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 3px 0;
	text-transform: uppercase;
}

.eole-footer__liens button {
	font-family: inherit;
}

/* La bande de copyright est claire et alignée à gauche. */
.eole-footer__bas p {
	margin: 0;
}

.eole-footer a {
	color: var(--wp--preset--color--primary);
}

.eole-footer a:hover,
.eole-footer a:focus {
	color: #fbc02d;
}

.eole-coordonnees,
.eole-footer__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eole-coordonnees li,
.eole-footer__liens li {
	margin-block: 6px;
}

.eole-coordonnees__item {
	background-repeat: no-repeat;
	background-position: left 0.2em;
	background-size: 1em;
	padding-left: 1.75em;
}

.eole-coordonnees__item--tel {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2359a1a0'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

.eole-coordonnees__item--mail {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2359a1a0'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

.eole-coordonnees__item--adresse {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2359a1a0'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* Liste des derniers articles : vignette carrée à gauche, badge de date
 * par-dessus, titre et extrait à droite — la disposition « média » de la
 * production. */
.eole-actu {
	min-height: 65px;
	padding-left: 85px;
	position: relative;
}

/* Carré de repli quand l'article n'a pas d'image à la une. */
.eole-actu::before {
	background: rgba(0, 0, 0, 0.3);
	content: "";
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 65px;
}

.eole-actu__photo {
	height: 65px;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 65px;
}

.eole-actu__photo img {
	height: 65px;
	object-fit: cover;
	width: 65px;
}

.eole-actu__date {
	background: rgba(0, 0, 0, 0.4);
	text-transform: uppercase;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	left: 0;
	margin: 0;
	padding: 5px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 65px;
	z-index: 2;
}

.eole-actu__titre {
	font-family: var(--wp--preset--font-family--base);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	margin: 2px 0 0;
}

.eole-actu__titre a {
	color: var(--wp--preset--color--primary);
}

.eole-actu__titre a:hover,
.eole-actu__titre a:focus {
	color: #fbc02d;
}

.eole-actu__extrait {
	font-size: 13px;
	margin: 0;
}

.eole-actu__extrait p {
	margin: 0;
}

/* Les icônes reprennent la taille et la couleur de la production. */
.eole-footer__reseaux .wp-block-social-link {
	margin: 0;
}

.eole-footer__reseaux .wp-block-social-link-anchor svg {
	height: 30px;
	width: 30px;
}

/* --------------------------------------------------------------------------
 * Formulaires Gravity Forms
 * ----------------------------------------------------------------------- */

.eole-formulaire .gform_wrapper .gform_required_legend {
	font-size: 13px;
}

.eole-formulaire .gform_wrapper input:not([type="submit"]),
.eole-formulaire .gform_wrapper textarea,
.eole-formulaire .gform_wrapper select {
	border: 1px solid var(--wp--preset--color--muted-dark);
	border-radius: 0;
	width: 100%;
}

.eole-formulaire .gform_wrapper .gform_footer input[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 30px;
	color: #fff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--alt);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 24px;
	text-transform: uppercase;
}

.eole-formulaire .gform_wrapper .gform_footer input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
 * Variantes de blocs
 * ----------------------------------------------------------------------- */

.wp-block-button.is-style-contour .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	color: #fff;
}

.wp-block-button.is-style-contour .wp-block-button__link:hover,
.wp-block-button.is-style-contour .wp-block-button__link:focus {
	background-color: #fff;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
 * Diaporama de la bannière d'accueil
 *
 * Les diapositives sont empilées en grille ; seule l'active est visible.
 * « visibility » plutôt que « display » : les diapositives masquées sortent
 * ainsi de l'ordre de tabulation et de l'arbre d'accessibilité.
 * ----------------------------------------------------------------------- */

.eole-diapo {
	display: grid;
	/* Sans cela, la colonne implicite prend la largeur du contenu le plus
	 * large et la bannière déborde sur les petits écrans. */
	grid-template-columns: minmax(0, 1fr);
	position: relative;
}

/* La mise en page en flux ajoute un écart entre les diapositives ; dans une
 * grille, cet écart allonge la bannière de 30 px. */
.eole-diapo > * {
	margin-block: 0 !important;
}

.eole-diapo > .wp-block-cover {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.6s ease;
	visibility: hidden;
}

/* Sans JavaScript, la première diapositive reste affichée. */
.eole-diapo > .wp-block-cover:first-child,
.eole-diapo[data-actif="0"] > .wp-block-cover:nth-child(1),
.eole-diapo[data-actif="1"] > .wp-block-cover:nth-child(2),
.eole-diapo[data-actif="2"] > .wp-block-cover:nth-child(3) {
	opacity: 1;
	visibility: visible;
}

.eole-diapo[data-actif]:not([data-actif="0"]) > .wp-block-cover:first-child {
	opacity: 0;
	visibility: hidden;
}

.eole-diapo__commandes {
	align-items: center;
	bottom: 145px;
	display: flex;
	gap: 15px;
	justify-content: center;
	left: 50%;
	margin: 0 !important;
	position: absolute;
	transform: translateX(-50%);
	z-index: 3;
}

.eole-diapo__fleche,
.eole-diapo__point {
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
}

/* Les flèches sont hors flux : dans la grille, elles allongeraient la
 * bannière au lieu de se poser dessus. */
.eole-diapo__fleche {
	border-radius: 50%;
	height: 34px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	z-index: 4;
}

.eole-diapo__fleche--precedent {
	left: 15px;
}

.eole-diapo__fleche--suivant {
	right: 15px;
}

.eole-diapo__fleche::before {
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	content: "";
	height: 9px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 9px;
}

.eole-diapo__fleche--precedent::before {
	transform: translate(-40%, -50%) rotate(135deg);
}

.eole-diapo__fleche--suivant::before {
	transform: translate(-60%, -50%) rotate(-45deg);
}

.eole-diapo__points {
	display: flex;
	gap: 8px;
}

.eole-diapo__point {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.eole-diapo[data-actif="0"] .eole-diapo__point[data-index="0"],
.eole-diapo[data-actif="1"] .eole-diapo__point[data-index="1"],
.eole-diapo[data-actif="2"] .eole-diapo__point[data-index="2"] {
	background: var(--wp--preset--color--primary);
}

.eole-diapo__fleche:hover,
.eole-diapo__fleche:focus-visible,
.eole-diapo__point:hover,
.eole-diapo__point:focus-visible {
	background: var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * Accessibilité
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * Tablette et mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 991px) {
	:root {
		--eole-section: 80px;

		/* La marge de section est posée en préréglage dans les gabarits :
		 * on la réduit à la source pour qu'elle reste cohérente avec les
		 * rattrapages négatifs calculés sur --eole-section. */
		--wp--preset--spacing--60: 80px;

		/* Les classes de taille de WordPress sont en « !important » :
		 * on adapte la valeur à la source plutôt que de lutter contre. */
		--wp--preset--font-size--display: 40px;
		--wp--preset--font-size--hero-sub: 24px;
		--wp--preset--font-size--xxx-large: 32px;
		--wp--preset--font-size--plan: 27px;
	}

	.eole-encarts {
		margin-top: -60px;
	}

	.eole-tarif__titre {
		font-size: 27px;
		padding: 20px;
	}

	.eole-carte__titre,
	.eole-banniere__bande--titre :is(h1, .wp-block-post-title, .wp-block-query-title) {
		font-size: 30px;
	}
}

@media (max-width: 781px) {
	:root {
		--eole-section: 48px;
		--eole-chevron: 20px;
		--wp--preset--spacing--60: 48px;

		--wp--preset--font-size--display: 32px;
		--wp--preset--font-size--hero-sub: 20px;
		--wp--preset--font-size--xxx-large: 27px;
		--wp--preset--font-size--plan: 24px;
	}

	.eole-header .wp-block-site-logo img {
		max-height: 64px;
	}

	/* Le bloc « Bannière » pose sa hauteur en style en ligne : il faut passer
	 * devant pour raccourcir la bannière sur petit écran. */
	.eole-hero {
		min-height: 420px !important;
	}

	/* La bannière repasse en pleine largeur : plus de panneau centré sur une
	 * grille de 1140 px, et des tailles de titre qui tiennent sur un écran. */
	.eole-hero .wp-block-cover__inner-container {
		max-width: none;
	}

	.eole-hero__panneau {
		max-width: none;
		padding: 20px;
	}

	/* Les tuiles s'empilent et reprennent la largeur du contenu. */
	.eole-encarts {
		margin-inline: 0 !important;
		margin-top: 0;
		max-width: none !important;
	}

	.eole-banniere__bande--titre :is(h1, .wp-block-post-title, .wp-block-query-title) {
		font-size: 26px;
	}

	.eole-banniere__bande--soustitre p {
		font-size: 15px;
	}

	.eole-carte__titre,
	.eole-tarif__titre {
		font-size: 24px;
	}

	.eole-tarif__prix {
		font-size: 24px;
	}

	.eole-footer .wp-block-columns {
		gap: 40px;
	}

	/* Les cartes tarifs passent sur une colonne : à deux, les titres longs
	 * débordaient de l'écran. */
	.eole-tarifs {
		grid-template-columns: 1fr !important;
	}

	.eole-tarif {
		min-width: 0;
	}
}

/* Le numero d'appel reste un lien (utile sur mobile) mais se lit comme du
 * texte, comme sur la production. */
.eole-appel a {
	color: #fff;
	text-decoration: none;
}

.eole-appel a:hover,
.eole-appel a:focus {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
 * Finition
 *
 * Tout ce qui suit relève du confort de lecture et de la vie du site : un
 * peu de profondeur, des réactions au survol, des apparitions discrètes.
 * Rien ici ne change la structure ni les couleurs de la charte.
 * ======================================================================== */

:root {
	--eole-ombre-douce: 0 1px 2px rgba(20, 20, 20, 0.04), 0 6px 20px -8px rgba(20, 20, 20, 0.12);
	--eole-ombre-portee: 0 2px 4px rgba(20, 20, 20, 0.05), 0 14px 34px -14px rgba(20, 20, 20, 0.22);
	--eole-arrondi: 6px;
	--eole-transition: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
 * Confort de lecture
 * ----------------------------------------------------------------------- */

/* Une ligne de texte au-delà de 75 caractères fatigue : on borne les
 * paragraphes courants sans toucher aux blocs mis en page. */
.eole-page__contenu .wp-block-post-content > p,
.eole-page__contenu .wp-block-post-content > ul,
.eole-page__contenu .wp-block-post-content > ol,
.eole-article__contenu > p {
	max-width: 68ch;
}

.wp-block-list li + li {
	margin-block-start: 0.35em;
}

/* --------------------------------------------------------------------------
 * Liens : un soulignement qui se déplie plutôt qu'un trait qui surgit
 * ----------------------------------------------------------------------- */

.wp-block-post-content a:not(.wp-element-button):not([class*="wp-block-"]),
.eole-article a:not(.wp-element-button) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	text-decoration: none;
	transition: background-size var(--eole-transition), color var(--eole-transition);
}

.wp-block-post-content a:not(.wp-element-button):not([class*="wp-block-"]):hover,
.wp-block-post-content a:not(.wp-element-button):not([class*="wp-block-"]):focus-visible,
.eole-article a:not(.wp-element-button):hover,
.eole-article a:not(.wp-element-button):focus-visible {
	background-size: 100% 1px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * En-tête : se resserre au défilement
 * ----------------------------------------------------------------------- */

.eole-header {
	transition: padding var(--eole-transition), box-shadow var(--eole-transition);
}

.eole-header .wp-block-site-logo img {
	transition: max-height var(--eole-transition);
}

.eole-header--reduit {
	box-shadow: 0 6px 24px -14px rgba(20, 20, 20, 0.5);
	padding-block: 10px !important;
}

.eole-header--reduit .wp-block-site-logo img {
	max-height: 68px;
}

/* --------------------------------------------------------------------------
 * Boutons : un léger soulèvement, rien de plus
 * ----------------------------------------------------------------------- */

.wp-element-button,
.eole-carte__lien,
.eole-externe__charger {
	transition: background-color var(--eole-transition), transform var(--eole-transition),
		box-shadow var(--eole-transition);
}

.wp-element-button:hover,
.eole-carte__lien:hover,
.eole-externe__charger:hover {
	box-shadow: 0 8px 18px -10px rgba(20, 20, 20, 0.55);
	transform: translateY(-2px);
}

.wp-element-button:active,
.eole-carte__lien:active {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
 * Tuiles d'accueil
 * ----------------------------------------------------------------------- */

.eole-encart {
	transition: transform var(--eole-transition), filter var(--eole-transition);
}

.eole-encart:hover,
.eole-encart:focus-within {
	filter: saturate(1.08);
	transform: translateY(-6px);
	z-index: 2;
}

.eole-encart .wp-block-image img {
	transition: transform var(--eole-transition);
}

.eole-encart:hover .wp-block-image img,
.eole-encart:focus-within .wp-block-image img {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
 * Cartes : tarifs, articles, formulaire
 * ----------------------------------------------------------------------- */

.eole-tarif {
	border-radius: var(--eole-arrondi);
	box-shadow: var(--eole-ombre-douce);
	transition: transform var(--eole-transition), box-shadow var(--eole-transition);
}

.eole-tarif:hover,
.eole-tarif:focus-within {
	box-shadow: var(--eole-ombre-portee);
	transform: translateY(-4px);
}

.eole-carte__image {
	border-radius: var(--eole-arrondi);
	overflow: hidden;
}

.eole-carte__image img {
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.eole-carte:hover .eole-carte__image img,
.eole-carte:focus-within .eole-carte__image img {
	transform: scale(1.05);
}

.eole-formulaire {
	border-radius: var(--eole-arrondi);
	box-shadow: var(--eole-ombre-portee);
}

.eole-page__contenu .wp-block-image img,
.eole-article .wp-block-image img {
	border-radius: var(--eole-arrondi);
}

/* --------------------------------------------------------------------------
 * Champs de formulaire
 * ----------------------------------------------------------------------- */

.gform_wrapper input:not([type="submit"]),
.gform_wrapper textarea,
.gform_wrapper select,
.eole-antispam__reponse {
	border-radius: 4px !important;
	transition: border-color var(--eole-transition), box-shadow var(--eole-transition);
}

.gform_wrapper input:not([type="submit"]):focus,
.gform_wrapper textarea:focus,
.eole-antispam__reponse:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(89, 161, 160, 0.25);
	outline: none;
}

/* --------------------------------------------------------------------------
 * Bannière d'accueil : très lent rapprochement sur la diapositive active
 * ----------------------------------------------------------------------- */

.eole-diapo > .wp-block-cover img.wp-block-cover__image-background {
	transform: scale(1);
	transition: transform 9s linear, opacity 0.6s ease;
}

.eole-diapo[data-actif="0"] > .wp-block-cover:nth-child(1) img.wp-block-cover__image-background,
.eole-diapo[data-actif="1"] > .wp-block-cover:nth-child(2) img.wp-block-cover__image-background {
	transform: scale(1.06);
}

/* --------------------------------------------------------------------------
 * Apparition au défilement
 *
 * La classe est posée par assets/js/animations.js, qui ne s'exécute pas si
 * les animations sont bridées : sans JavaScript, tout reste visible.
 * ----------------------------------------------------------------------- */

.eole-apparait {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: opacity, transform;
}

.eole-apparait--vu {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.eole-apparait {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
 * Page Contact
 *
 * Trois accès directs en haut — téléphone, courriel, adresse — puis deux
 * panneaux blancs posés sur l'aplat orange. Les champs de saisie ne flottent
 * plus à même la couleur : ils reposent sur du blanc, ce qui les rend
 * nettement plus lisibles.
 * ======================================================================== */

/* --- Accès directs ------------------------------------------------------ */

.eole-contact__rapide {
	gap: 20px;
}

.eole-contact__acces {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--eole-arrondi);
	padding: 20px 20px 20px 66px;
	position: relative;
	transition: background-color var(--eole-transition), transform var(--eole-transition);
}

.eole-contact__acces:hover,
.eole-contact__acces:focus-within {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-3px);
}

.eole-contact__acces::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 26px;
	content: "";
	height: 26px;
	left: 22px;
	position: absolute;
	top: 24px;
	width: 26px;
}

.eole-contact__acces--tel::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

.eole-contact__acces--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

.eole-contact__acces--adresse::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.eole-contact__etiquette {
	font-size: 13px;
	letter-spacing: 0.04em;
	margin: 0 0 2px;
	opacity: 0.85;
	text-transform: uppercase;
}

.eole-contact__valeur {
	font-family: var(--wp--preset--font-family--alt);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: break-word;
}

/* Une adresse de courriel est plus longue qu'un numéro : on la pose un cran
   plus petit plutôt que de la laisser se couper. */
.eole-contact__acces--mail .eole-contact__valeur {
	font-size: 15px;
}

.eole-contact__valeur a {
	color: #fff;
	text-decoration: none;
}

.eole-contact__valeur a:hover,
.eole-contact__valeur a:focus-visible {
	text-decoration: underline;
}

/* --- Panneaux ----------------------------------------------------------- */

.eole-contact__panneau {
	background: #fff;
	border-radius: var(--eole-arrondi);
	box-shadow: var(--eole-ombre-portee);
	color: var(--wp--preset--color--contrast);
	padding: 36px;
}

.eole-contact__titre {
	font-size: 27px;
	margin: 0 0 8px;
}

.eole-contact__intro {
	margin: 0 0 24px;
	opacity: 0.85;
}

/* Le formulaire repose sur du blanc : ses libellés reprennent la couleur du
   texte courant au lieu du blanc imposé par l'aplat orange. */
.eole-contact__panneau .gform_wrapper :is(label, legend, .gfield_required, .gform_required_legend),
.eole-contact__panneau a {
	color: var(--wp--preset--color--contrast);
}

.eole-contact__panneau .gform_wrapper input:not([type="submit"]),
.eole-contact__panneau .gform_wrapper textarea {
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted-dark);
}

/* --- Plan et trajets ---------------------------------------------------- */

.eole-contact__plan {
	border-radius: var(--eole-arrondi);
	margin-block-end: 24px;
	overflow: hidden;
}

.eole-contact__plan iframe {
	display: block;
}

.eole-contact__trajets-titre {
	font-family: var(--wp--preset--font-family--alt);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.eole-trajets {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eole-trajets li {
	align-items: baseline;
	border-block-end: 1px solid var(--wp--preset--color--muted);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0;
	padding: 8px 0;
}

.eole-trajets li:last-child {
	border-block-end: 0;
}

.eole-trajets strong {
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

.eole-contact__itineraire .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.eole-contact__itineraire .wp-block-button__link:hover,
.eole-contact__itineraire .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

@media (max-width: 781px) {
	.eole-contact__panneau {
		padding: 24px;
	}
}