/* =============================================================================
   YCÉO MOBILITÉ — Feuille de style principale
   Couleurs, typographies et composants extraits du site d'origine
   (variables --iris--global--color-*, --iris--h1/h2/h3--*, --iris--button--*)
   ========================================================================= */

:root{
	--c-dark:      #1a1a1a;
	--c-white:     #ffffff;
	--c-teal:      #00a7b5;   /* couleur principale (bandeaux, boutons, liens) */
	--c-teal-dark: #23a7b5;
	--c-green:     #009513;
	--c-lime:      #aed500;
	--c-sky-light: #bde3e8;
	--c-sky:       #d2ecef;
	--c-sky-pale:  #e9f6f7;   /* fond des encarts "bleu ciel" */

	--font-heading: 'Montserrat', sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	--radius-form: 6px;
	--radius-card: 6px;
	--radius-button: 18px;

	--content-width: 800px;
	--wide-width: 1220px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	font-family:var(--font-body);
	font-size:18px;
	line-height:1.6;
	color:var(--c-dark);
	background:#fff;
}

img{ max-width:100%; height:auto; display:block; }

.entry-content iframe{ max-width:100%; }

@media (max-width:600px){
	.entry-content iframe{
		max-width:100%;
		width:100%;
		aspect-ratio:4/3;
		height:auto;
	}
}

a{ color:var(--c-teal); text-decoration:underline; }
a:hover{ color:var(--c-dark); }

h1,h2,h3,h4,h5,h6{
	font-family:var(--font-heading);
	font-weight:700;
	color:#283a2c;
	line-height:1.25;
	margin:1.4em 0 .6em;
}
h1{ font-size:2.5rem; }
h2{ font-size:3rem; }
h3{ font-size:2rem; }
h4{ font-size:1.6rem; }
h5{ font-size:1.4rem; }

@media (max-width:782px){
	h1{ font-size:1.75rem; }
	h2{ font-size:1.5rem; }
	h3{ font-size:1.25rem; }
}

.container{
	max-width:var(--wide-width);
	margin:0 auto;
	padding:0 24px;
}

.sr-only{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;border:0;
}

.skip-links__item{
	position:absolute; left:-9999px; top:0;
	background:#000; color:#fff; padding:10px 16px; z-index:10000;
}
.skip-links__item:focus{ left:10px; top:10px; }

/* =============================================================================
   HEADER / NAVIGATION
   ========================================================================= */
.site-header{ position:relative; z-index:200; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); }

.navbar{
	max-width:var(--wide-width);
	margin:0 auto;
	display:flex;
	align-items:center;
	gap:24px;
	padding:12px 24px;
}

.logo{ margin:0; }
.logo__item{ display:flex; align-items:center; text-decoration:none; }
.logo img{ max-height:96px; width:auto; }
.logo__text{
	font-family:var(--font-heading); font-weight:800; font-size:1.4rem;
	color:var(--c-teal); text-decoration:none;
}

.menu{ flex:1; }
.menu__wrapper{
	list-style:none; margin:0; padding:0;
	display:flex; align-items:center; gap:6px;
	flex-wrap:wrap;
}
.menu__item{
	position:relative;
}
.menu__item__link{
	display:inline-flex; align-items:center; gap:4px;
	padding:10px 14px;
	font-weight:600; font-size:.95rem;
	color:var(--c-dark);
	text-decoration:none;
	cursor:pointer;
	border-radius:4px;
}
.menu__item__link:hover,
.menu__item:hover > .menu__item__link{ color:var(--c-teal); background:var(--c-sky-pale); }
.menu__item__more{ font-size:.7rem; color:var(--c-teal); }

.menu__item__submenu{
	display:none;
	position:absolute; left:0; top:100%;
	background:#fff;
	box-shadow:0 12px 28px rgba(0,0,0,.15);
	border-radius:0 0 8px 8px;
	padding:20px;
	min-width:280px;
	z-index:300;
}
.menu__item:hover > .menu__item__submenu,
.menu__item:focus-within > .menu__item__submenu{ display:block; }

.submenu__colonne{ display:flex; flex-direction:column; gap:4px; }
.submenu__title{
	font-weight:700; color:var(--c-teal); margin-top:10px;
	text-decoration:none; display:block;
}
.submenu__sub-list{ list-style:none; margin:0 0 8px; padding:0; }
.submenu__item a{ text-decoration:none; color:var(--c-dark); padding:6px 8px; display:block; border-radius:4px; }
.submenu__item a:hover{ background:var(--c-sky-pale); color:var(--c-teal); }

.navbar__icons{ display:flex; align-items:center; gap:4px; }
.navbar__icon{
	display:flex; align-items:center; justify-content:center;
	width:60px; height:60px; border-radius:50%;
	color:var(--c-dark); text-decoration:none;
	border:none; background:transparent; cursor:pointer;
	position:relative;
}
.navbar__icon:hover{ background:var(--c-sky-pale); color:var(--c-teal); }
.navbar__icon .dashicons{ font-size:40px; width:40px; height:40px; }
.navbar__icon__image{ width:40px; height:40px; object-fit:contain; display:block; }

/* Info-bulle personnalisée au survol/focus (remplace l'infobulle native du navigateur) */
.navbar__icon[data-tooltip]::after{
	content:attr(data-tooltip);
	position:absolute;
	top:calc(100% + 10px);
	left:50%;
	transform:translateX(-50%) translateY(-6px);
	background:var(--c-teal);
	color:#fff;
	font-size:.8rem;
	font-weight:600;
	white-space:nowrap;
	padding:6px 12px;
	border-radius:6px;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .15s ease, transform .15s ease;
	z-index:400;
}
.navbar__icon[data-tooltip]::before{
	content:"";
	position:absolute;
	top:calc(100% + 4px);
	left:50%;
	transform:translateX(-50%) translateY(-6px);
	border:6px solid transparent;
	border-bottom-color:var(--c-teal);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .15s ease, transform .15s ease;
	z-index:400;
}
.navbar__icon[data-tooltip]:hover::after,
.navbar__icon[data-tooltip]:hover::before,
.navbar__icon[data-tooltip]:focus-visible::after,
.navbar__icon[data-tooltip]:focus-visible::before{
	opacity:1;
	visibility:visible;
	transform:translateX(-50%) translateY(0);
}

.menu-toggle{
	display:none; background:none; border:none; cursor:pointer;
	flex-direction:column; gap:5px; padding:8px;
}
.menu-toggle__bar{ width:26px; height:3px; background:var(--c-dark); border-radius:2px; }

.menu-close-btn{ display:none; }

@media (max-width:1024px){
	.menu-toggle{ display:flex; margin-left:auto; }
	.menu-close-btn{
		display:flex; align-items:center; justify-content:center;
		position:absolute; top:45px; right:20px;
		width:40px; height:40px; border-radius:50%;
		background:var(--c-sky-pale); color:var(--c-teal);
		border:none; font-size:28px; line-height:1; cursor:pointer;
		z-index:10;
	}
	.menu{
		position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(85vw,360px);
		background:#fff; transform:translateX(100%); transition:transform .25s ease;
		overflow-y:auto; box-shadow:-8px 0 24px rgba(0,0,0,.15); padding:80px 20px 40px;
	}
	.menu.is-open{ transform:translateX(0); }
	.menu__wrapper{ flex-direction:column; align-items:stretch; }
	.menu__item__submenu{ position:static; box-shadow:none; padding:8px 0 8px 12px; }
	.navbar__icons{ display:none; }
}

.search-modal{
	position:fixed; inset:0; background:rgba(0,0,0,.6);
	display:flex; align-items:flex-start; justify-content:center;
	padding-top:10vh; z-index:500;
}
.search-modal[hidden]{ display:none; }
.search-modal__inner{ background:#fff; padding:32px; border-radius:8px; width:min(90vw,480px); position:relative; }
.search-modal__close{ position:absolute; top:8px; right:12px; border:none; background:none; font-size:1.6rem; cursor:pointer; }
.search-form{ display:flex; gap:8px; }
.search-form input[type="search"]{ flex:1; padding:12px; border:1px solid var(--c-sky); border-radius:var(--radius-form); }
.search-form button{ background:var(--c-teal); color:#fff; border:none; padding:0 20px; border-radius:var(--radius-form); cursor:pointer; }

/* =============================================================================
   BANDEAU DE TITRE (teal), FIL D'ARIANE
   ========================================================================= */
.page-header{
	background:var(--c-teal);
	color:#fff;
	padding:32px 0 16px;
	margin-bottom:40px;
}
.page-header__title{ color:#fff; margin:.2em 0 0; }

.breadcrumbs{ margin:0; font-size:.9rem; }
.breadcrumbs a{ color:#fff; text-decoration:underline; }
.breadcrumbs .breadcrumb_last{ color:#fff; opacity:.85; }

/* =============================================================================
   CONTENU / TYPOGRAPHIE ÉDITEUR
   ========================================================================= */
.content-area,
.page-header .container{ max-width:1037px; } /* -15% par rapport à --wide-width (1220px) */
.content-area{ padding-bottom:60px; }
.entry-content > *:first-child{ margin-top:0; }

/* Alignement "Large" (alignwide) : le bloc revient à 1220px, largeur du header,
   sans toucher les bords de l'écran. Disponible directement dans la barre d'outils
   de chaque bloc compatible dans l'éditeur (grâce à add_theme_support('align-wide')). */
.entry-content .alignwide{
	width:var(--wide-width);
	max-width:var(--wide-width);
	margin-left:calc(50% - (var(--wide-width) / 2));
	margin-right:calc(50% - (var(--wide-width) / 2));
}
/* Sécurité sur petits écrans : au-delà de 1220px de large, on repasse
   en pleine largeur d'écran pour éviter tout débordement horizontal. */
@media (max-width:1240px){
	.entry-content .alignwide{
		width:100%;
		max-width:100vw;
		margin-left:calc(50% - 50vw);
		margin-right:calc(50% - 50vw);
		padding-left:24px;
		padding-right:24px;
	}
}

/* Alignement "Pleine largeur" (alignfull) : le bloc s'étend bord à bord de l'écran,
   quelle que soit la taille de la fenêtre. */
.entry-content .alignfull{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* Liens dans le contenu (pages/articles + encarts) : gras, bleu, sans soulignement */
.entry-content a{ color:var(--c-teal); font-weight:700; text-decoration:none; }
.entry-content a:hover,
.encart__text a:hover{ color:var(--c-dark); }

/* Listes à puces dans le contenu (pages/articles + encarts) : puce ronde bleue + interligne
   Ciblage restreint au bloc "Liste" (wp-block-list) pour ne pas affecter d'autres structures
   en <ul>/<li> comme le bloc Query Loop (liste d'articles). */
.entry-content .wp-block-list,
.encart__text ul{
	list-style:none;
	margin:1em 0;
	padding-left:0;
}
.entry-content .wp-block-list li,
.encart__text li{
	position:relative;
	padding-left:1.6em;
	margin-bottom:0.9em;
	line-height:1.5;
}
.entry-content .wp-block-list li::before,
.encart__text li::before{
	content:"";
	position:absolute;
	left:0;
	top:0.5em;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--c-teal);
}

/* Tableaux (wp:table) */
.entry-content table{
	width:100%;
	border-collapse:collapse;
	margin:1.5em 0;
	border:none;
}
.entry-content table thead{
	border:none;
	border-bottom:none;
}
.entry-content table thead th{
	background:var(--c-teal);
	color:#fff;
	font-weight:700;
	text-align:center;
	padding:14px 16px;
	border:none;
}
.entry-content table td,
.entry-content table th{
	padding:14px 16px;
	text-align:left;
	border:none;
}
.entry-content table tbody td,
.entry-content table tbody th{
	background:transparent !important;
}
.entry-content table tbody tr,
.entry-content table.is-style-stripes tbody tr,
.entry-content table tbody tr:nth-child(odd),
.entry-content table.is-style-stripes tbody tr:nth-child(odd){
	background:#ffffff !important;
}
.entry-content table tbody tr:nth-child(even),
.entry-content table.is-style-stripes tbody tr:nth-child(even){
	background:#f2f2f2 !important;
}
.entry-content table tbody td:first-child{
	font-weight:700;
}

/* Séparateur (core/separator) : trait centré, largeur ~4cm, couleur principale du thème,
   quel que soit le style choisi dans l'éditeur (Large, Pointillés...) */
.entry-content hr,
.entry-content .wp-block-separator{
	width:160px;
	max-width:160px;
	height:0;
	margin:2em auto;
	border:none;
	border-top:2px solid var(--c-teal);
	background:none;
	opacity:1;
}

/* wp:media-text (image + texte d'intro, comme sur la page abonnement) */
.wp-block-media-text{
	display:grid; grid-template-columns:34% auto; gap:32px; align-items:center;
	margin-bottom:32px;
}
.wp-block-media-text__media img{ border-radius:8px; }
@media (max-width:600px){
	.wp-block-media-text{ grid-template-columns:1fr; }
}

/* wp:columns */
.wp-block-columns{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:24px; }
.wp-block-column{ flex:1 1 280px; }

/* =============================================================================
   BOUTONS (core/button) — reproduit is-style-download / is-style-arrow
   ========================================================================= */
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:12px; }

.wp-block-button__link,
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:var(--c-teal);
	color:#fff !important;
	font-weight:600;
	font-size:1rem;
	padding:16px 22px;
	border-radius:var(--radius-button);
	text-decoration:none !important;
	text-align:center;
	border:none;
	cursor:pointer;
	transition:background .15s ease;
}
.wp-block-button__link:hover,
.btn:hover{ background:#008a96; }

.wp-block-button.is-style-download .wp-block-button__link::before{
	content:"";
	display:inline-block;
	width:1.1em;
	height:1.1em;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
.wp-block-button.is-style-arrow .wp-block-button__link::before{
	content:"";
	display:inline-block;
	width:1.73em;
	height:1.73em;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg>");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

/* variante fantôme / contour, si besoin dans l'éditeur */
.wp-block-button.is-style-outline .wp-block-button__link{
	background:transparent; color:var(--c-teal) !important;
	border:2px solid var(--c-teal);
}

/* =============================================================================
   ENCART (bloc ACF "Encart / Highlight") — les fameuses cartes bleu ciel
   ========================================================================= */
.encart{
	background:var(--c-sky-pale);
	border-radius:var(--radius-card);
	padding:28px 32px;
	height:100%;
}
.encart--dark{ background:#222; color:#fff; }
.encart--dark .encart__title{ color:#fff; }
.encart--teal{ background:var(--c-teal); color:#fff; }
.encart--teal .encart__title{ color:#fff; }
.encart--teal .encart__text a,
.encart--teal .encart__link{ color:#fff; }

.encart__thumbnail{ margin-bottom:16px; }
.encart__thumbnail img{ border-radius:6px; }

.encart__title{
	color:var(--c-teal-dark);
	font-size:1.375rem;
	margin:0 0 12px;
}
.encart__text{ margin-bottom:16px; }
.encart__text a{ color:var(--c-teal); font-weight:700; text-decoration:none; }

.encart__link{
	display:inline-flex; align-items:center; gap:8px;
	font-weight:700; color:var(--c-teal); text-decoration:underline;
}
.encart__link__icon{ font-size:.7em; }

/* Style de bloc "Groupe" personnalisé : Encart bleu ciel (is-style-card-sky)
   -> pratique pour construire une carte tarif sans passer par le bloc ACF */
.wp-block-group.is-style-card-sky{
	background:var(--c-sky-pale);
	border-radius:var(--radius-card);
	padding:28px 32px;
}
.wp-block-group.is-style-card-sky h1,
.wp-block-group.is-style-card-sky h2,
.wp-block-group.is-style-card-sky h3,
.wp-block-group.is-style-card-sky h4{ color:var(--c-teal-dark); }

/* =============================================================================
   TARIFS / CARTES PRODUIT (offre + visuel de carte, comme "Titres occasionnels")
   ========================================================================= */
.tarif-card{
	background:var(--c-sky-pale);
	border-radius:var(--radius-card);
	padding:28px 32px;
	display:flex; flex-direction:column; gap:16px;
}
.tarif-card__title{ color:var(--c-teal-dark); margin:0; }
.tarif-card__price{ font-weight:700; }
.tarif-card__visual{ margin-top:auto; }
.tarif-card__visual img{ border-radius:6px; }

/* =============================================================================
   BOÎTES DE TÉLÉCHARGEMENT (grille "Commune de ...")
   ========================================================================= */
.download-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	gap:16px; margin:24px 0;
}
.download-grid .wp-block-button__link{ width:100%; }

/* =============================================================================
   PRÉ-FOOTER (utile / partager)
   ========================================================================= */
.prefooter{
	display:flex; flex-wrap:wrap; gap:40px;
	border-top:1px solid var(--c-sky); margin-top:48px; padding-top:24px;
}
.prefooter__bloc__label{ font-weight:700; margin-bottom:8px; }
.prefooter__bloc__vote{ display:flex; gap:8px; }
.vote-btn{
	border:1px solid var(--c-sky); background:#fff; border-radius:6px;
	padding:8px 14px; cursor:pointer; font-size:1.1rem;
}
.prefooter__bloc__share{ display:flex; gap:8px; }
.prefooter__bloc__share a{
	display:flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:50%;
	background:var(--c-sky-pale); color:var(--c-teal); text-decoration:none; font-weight:700;
}

/* =============================================================================
   BLOG / CARTES ARTICLE
   ========================================================================= */
.post-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:32px; }
.post-card{ background:var(--c-sky-pale); border-radius:var(--radius-card); overflow:hidden; }
.post-card__thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-card__body{ padding:20px; }
.post-card__title{ font-size:1.25rem; margin-top:0; }
.post-card__title a{ color:var(--c-teal-dark); text-decoration:none; }
.pagination{ margin-top:32px; display:flex; gap:8px; }

/* =============================================================================
   FOOTER
   ========================================================================= */
.footer{ background:#000; color:#fff; margin-top:60px; font-size:.75rem; }
.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

.footer__content{
	display:flex; flex-wrap:wrap; gap:48px;
	padding:56px 24px;
}
.footer__content__col{ flex:0 0 260px; }
.footer__col{ flex:1 1 600px; }

.footer__content__address__logo{ max-height:56px; width:auto; margin-bottom:12px; display:block; }
.footer__content__address__title{ font-weight:700; margin-bottom:6px; }
.footer__content__address__street,
.footer__content__address__city{ opacity:.85; }
.footer__content__address__phone{ display:block; margin:8px 0 16px; font-weight:700; }
.footer__content__address .btn{
	margin-top:8px;
	background:#fff;
	color:var(--c-teal) !important;
}
.footer__content__address .btn:hover{ background:#e6e6e6; }

.footer__content__socials{ display:flex; gap:10px; margin-top:20px; }
.social-icon{
	width:36px; height:36px; border-radius:50%;
	background:#fff;
	display:flex; align-items:center; justify-content:center;
}

.footer__content__wrapper{
	display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.footer__content__navigation__title{ font-size:.9rem; font-weight:700; margin-bottom:14px; color:#fff; }
body .footer .footer__content__navigation__list,
body .footer .footer__content__navigation__list li{
	list-style:none !important;
	list-style-type:none !important;
	list-style-image:none !important;
}
body .footer .footer__content__navigation__list li::before,
body .footer .footer__content__navigation__list li::marker{
	content:none !important;
	display:none !important;
}
.footer__content__navigation__list{ margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.footer__content__navigation__list a{ opacity:.85; font-size:.75rem; font-weight:400; }
.footer__content__navigation__list a:hover{ opacity:1; }

@media (max-width:900px){
	.footer__content__wrapper{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
	.footer__content__wrapper{ grid-template-columns:1fr; }
}

.footer__bottom{
	border-top:1px solid var(--c-teal);
	border-bottom:1px solid var(--c-teal);
	padding:20px 0;
}
.footer__bottom__row{
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
	align-items:center; font-size:.75rem;
}
.footer__copyright{ display:flex; flex-wrap:wrap; gap:16px; }
.footer__copyright__item a{ opacity:.7; }

/* =============================================================================
   FORMULAIRES (Formidable / commentaires / recherche)
   ========================================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], textarea, select{
	background:var(--c-sky-pale);
	border:none;
	border-radius:var(--radius-form);
	height:50px;
	padding:0 16px;
	width:100%;
	font-family:var(--font-body);
	font-size:1rem;
}
textarea{ height:auto; padding:12px 16px; min-height:140px; }
label{ font-weight:600; display:block; margin-bottom:6px; }

/* =============================================================================
   ANTI-FLASH (FOUC) — Bloc "Galerie avancée" Kadence en mode diaporama.
   Ce bloc utilise la librairie Splide (kt-blocks-carousel splide). Avant que
   son script ait fini de s'initialiser, toutes les slides s'affichent
   empilées les unes sous les autres. On les masque temporairement (sauf la
   première) tant que l'initialisation n'est pas terminée — Splide ajoute
   alors la classe "is-initialized" sur l'élément racine ".splide".
   ========================================================================= */
.kt-blocks-carousel.splide:not(.is-initialized) .splide__slide:not(:first-child){
	display:none;
}
.kt-blocks-carousel .splide__list{
	list-style:none;
	margin:0;
	padding:0;
}