/* ==========================================================================
   DRIVAT - Feuille de style maison
   1. Palette de reference (tokens)
   2. Header / mega-menu
   3. Hero Elementor pleine largeur
   4. Garde-fou anti-debordement
   5. Logo
   6. Kit de composants de page (.drv-*)
   ========================================================================== */

/* ==========================================================================
   1. PALETTE "BLEU CONFIANCE"
   Toute nouvelle couleur posee sur Drivat doit sortir de cette liste.
   Contrastes verifies : #1C65C8 sur blanc 5,61:1 (AA), #3E4B5E sur blanc
   8,85:1 (AAA), blanc sur #0F1E3D 16,49:1 (AAA).
   ========================================================================== */
:root {
	/* ------------------------------------------------------------------
	   RAMPE ACCENT - une seule teinte (258 deg), chroma plafonne a 0,17.
	   Le plafond est le reglage qui separe un bleu de startup d'un bleu
	   d'institution : #2563EB montait a 0,215 de chroma, ce qui passe sur
	   un lien de 12 px mais crie des qu'on l'emploie comme aplat repete
	   (18 pastilles de secteur alignees). Le 900 est le navy du logo :
	   la marque est le bas de la rampe, rien n'est invente.
	   ------------------------------------------------------------------ */
	--drv-blue-25: #F8FBFF;
	--drv-blue-50: #F0F7FF;
	--drv-blue-100: #E2EDFD;
	--drv-blue-200: #C9DCF9;
	--drv-blue-300: #A5C5F3;
	--drv-blue-400: #71A0E5;
	--drv-blue-500: #4481DA;
	--drv-blue-600: #1C65C8;	/* action : boutons, etat actif, focus - 5,61:1 */
	--drv-blue-700: #094EA6;	/* liens et pictogrammes - 7,92:1 */
	--drv-blue-800: #16305F;
	--drv-blue-900: #0F1E3D;	/* navy du logo - 16,49:1 */
	--drv-blue-950: #06142B;

	/* RAMPE NEUTRE - meme teinte (258 deg), chroma quasi nul. Les gris
	   deviennent les cousins du bleu au lieu d'etre des gris importes de
	   trois sources differentes. */
	--drv-n-25: #FAFBFD;
	--drv-n-50: #F5F7FB;
	--drv-n-100: #EBEEF2;
	--drv-n-200: #DCE0E6;
	--drv-n-300: #C7CDD5;
	--drv-n-400: #959EAA;
	--drv-n-500: #747E8D;
	--drv-n-600: #566172;
	--drv-n-700: #3E4B5E;
	--drv-n-800: #253348;
	--drv-n-900: #0E1E35;

	/* ROLES - c'est par ces noms que le reste de la feuille appelle la
	   palette. Regle d'usage : 600/700 pour l'action et l'etat, 50/100
	   pour les fonds calmes, 700 pour les pictogrammes, neutres pour
	   tout le reste. Aucun hex ne doit reapparaitre en dur plus bas. */
	--drv-navy: var(--drv-blue-900);
	--drv-navy-2: var(--drv-blue-800);
	--drv-navy-soft: var(--drv-blue-200);

	--drv-ink: var(--drv-n-900);		/* titres - 16,72:1 */
	--drv-text: var(--drv-n-700);		/* corps - 8,85:1 */
	--drv-muted: #667181;			/* secondaire - 4,95:1 */
	--drv-border: var(--drv-n-200);
	--drv-surface: var(--drv-n-50);
	--drv-white: #FFFFFF;

	--drv-tile: var(--drv-blue-100);	/* fond de pastille d'icone */
	--drv-glyph: var(--drv-blue-700);	/* pictogramme - 6,70:1 sur la pastille */

	/* Reserve aux badges Premium / Verifie et aux etoiles d'avis. Seul
	   token hors famille (70 deg) : c'est assume, il ne sert jamais
	   d'accent general. */
	--drv-amber: #F59E0B;

	--drv-radius: 16px;
	--drv-shadow: 0 1px 2px rgba(14, 30, 53, 0.04), 0 12px 32px -12px rgba(14, 30, 53, 0.14);
}

/* ==========================================================================
   2. HEADER - une seule ligne : logo | navigation | compte
   Rappel du bug corrige : le selecteur "#header #navigation.style-1 ul"
   touchait aussi les ul.sub-menu, qui partaient en ligne horizontale hors
   ecran. Les regles sont limitees au UL DE PREMIER NIVEAU ("> ul").
   ========================================================================== */
@media (min-width: 1200px) {

	#header .container {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 1500px !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
		gap: 20px !important;
	}

	#header .left-side {
		display: flex !important;
		align-items: center !important;
		float: none !important;
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	#header .right-side {
		display: flex !important;
		align-items: center !important;
		float: none !important;
		width: auto !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}

	#header #logo {
		float: none !important;
		margin-right: 36px !important;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
	}

	#header #navigation.style-1 {
		float: none !important;
		margin-top: 0 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	#header #navigation.style-1 > ul {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#header #navigation.style-1 > ul > li {
		float: none !important;
		white-space: nowrap !important;
		position: relative;
	}

	#header .header-widget {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		height: auto !important;
		top: 0 !important;
		white-space: nowrap !important;
	}

	#header .header-widget > a.sign-in,
	#header .header-widget > a.button {
		margin: 0 !important;
	}

	/* ---------- Menus deroulants ---------- */
	#header #navigation.style-1 ul li ul.sub-menu {
		display: block !important;
		flex-wrap: wrap !important;
		min-width: 260px;
		max-width: calc(100vw - 48px);
		padding: 10px 0 !important;
		background: var(--drv-white) !important;
		border: 1px solid rgba(14, 30, 53, 0.06) !important;
		border-radius: 14px !important;
		box-shadow: 0 18px 45px -12px rgba(14, 30, 53, 0.22), 0 4px 12px rgba(14, 30, 53, 0.06) !important;
	}

	#header #navigation.style-1 ul li ul.sub-menu li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		white-space: normal !important;
	}

	#header #navigation.style-1 ul li ul.sub-menu li > a {
		display: block !important;
		padding: 9px 20px !important;
		line-height: 1.35 !important;
		font-weight: 500;
		color: var(--drv-text) !important;
		opacity: 1 !important;
		transition: background 0.18s ease, color 0.18s ease, padding 0.18s ease;
	}

	#header #navigation.style-1 ul li ul.sub-menu li > a:hover {
		background: rgba(28, 101, 200, 0.07) !important;
		color: var(--drv-blue-700) !important;
		padding-left: 24px !important;
	}

	#header #navigation.style-1 > ul > li:nth-last-child(-n+2) > ul.sub-menu {
		left: auto !important;
		right: 0 !important;
	}

	/* ---------- Mega-menu ---------- */
	#header #navigation.style-1 > ul > li.has-megamenu {
		position: static !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) {
		display: block !important;
		left: 50% !important;
		right: auto !important;
		width: min(1180px, calc(100vw - 48px)) !important;
		max-width: none !important;
		padding: 26px 10px !important;
		background: var(--drv-white) !important;
		border: 1px solid rgba(14, 30, 53, 0.06) !important;
		border-radius: 18px !important;
		box-shadow: 0 28px 60px -18px rgba(14, 30, 53, 0.28), 0 6px 16px rgba(14, 30, 53, 0.06) !important;
		transform: translate3d(-50%, 24px, 0) !important;
	}

	#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) {
		transform: translate3d(-50%, 12px, 0) !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 4px 6px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
	}

	#header #navigation.style-1 .mega-menu.three-columns:not(.mm-panel) > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	#header #navigation.style-1 .mega-menu.two-columns:not(.mm-panel) > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li {
		display: block !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 18px !important;
		white-space: normal !important;
		border-right: 1px solid rgba(14, 30, 53, 0.07) !important;
		border-radius: 0 !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li:last-child {
		border-right: none !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li > a {
		display: block !important;
		margin: 0 0 10px !important;
		padding: 0 0 10px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		color: var(--drv-ink) !important;
		opacity: 1 !important;
		white-space: normal !important;
		border-bottom: 1px solid rgba(14, 30, 53, 0.07) !important;
		background: none !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul {
		display: block !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: normal !important;
		border: none !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li > a {
		display: block !important;
		padding: 6px 0 !important;
		font-size: 14px !important;
		line-height: 1.35 !important;
		font-weight: 400 !important;
		color: var(--drv-text) !important;
		opacity: 1 !important;
		background: none !important;
		transition: color 0.18s ease, transform 0.18s ease;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li > a:hover {
		color: var(--drv-blue-600) !important;
		transform: translateX(3px);
	}

}

/* ==========================================================================
   3. HERO / SECTIONS ELEMENTOR PLEINE LARGEUR
   Le conteneur du hero est en flex-direction:row et, dans cette version
   d'Elementor, --container-widget-width est declaree mais jamais utilisee :
   un widget seul dans un conteneur "row" se dimensionne sur son contenu.
   ========================================================================== */
#wrapper > .elementor > .e-con.e-parent {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#wrapper > .elementor > .e-con.e-parent > .elementor-widget:only-child,
.elementor-177 .elementor-element.elementor-element-d7hero02 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}

.elementor-177 .elementor-element.elementor-element-d7hero02 > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

.main-search-container.elementor-main-search-container {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.main-search-container.elementor-main-search-container:before {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
}

/* ==========================================================================
   4. GARDE-FOU : plus aucun debordement horizontal
   overflow-x: clip (et non hidden) pour ne pas casser position: sticky
   ========================================================================== */
#wrapper {
	overflow-x: clip;
}

/* ==========================================================================
   5. LOGO
   ========================================================================== */
#logo img {
	max-height: 52px !important;
}

#header.cloned #logo img {
	max-height: 40px !important;
}

/* ==========================================================================
   6. KIT DE COMPOSANTS DE PAGE
   --------------------------------------------------------------------------
   Utilisation : dans le contenu d'une page WordPress, encadrer le tout par
   <div class="drv"> ... </div>. Les sections en pleine largeur utilisent
   .drv-bleed (elles sortent du conteneur 1140px du theme).

   Composants disponibles :
     .drv-hero            en-tete de page (fond navy)
     .drv-section         section (variante .drv-section--alt = fond gris)
     .drv-head            titre + chapo de section
     .drv-grid --2/--3/--4  grille de cartes
     .drv-card            carte (icone, titre, texte)
     .drv-steps           etapes numerotees
     .drv-split           deux colonnes texte / encadre
     .drv-list            liste a coches
     .drv-faq             accordeon (details/summary)
     .drv-cta             bandeau d'appel a l'action
     .drv-btn             bouton (--ghost, --light)
     .drv-note            encadre d'information
     .drv-kpi             chiffres cles
   ========================================================================== */

.drv {
	color: var(--drv-text);
	font-size: 16px;
	line-height: 1.65;
}

.drv *,
.drv *:before,
.drv *:after {
	box-sizing: border-box;
}

.drv h1,
.drv h2,
.drv h3,
.drv h4 {
	color: var(--drv-ink);
	margin: 0 0 14px;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.drv h2 { font-size: 34px; font-weight: 600; }
.drv h3 { font-size: 19px; font-weight: 600; }
.drv p { margin: 0 0 16px; }
.drv p:last-child { margin-bottom: 0; }

.drv a {
	color: var(--drv-blue-600);
	text-decoration: none;
}

.drv a:hover { color: var(--drv-blue-700); }

/* ---------- Pleine largeur ---------- */
.drv-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.drv-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: 24px;
}

.drv-inner--narrow { max-width: 860px; }

/* ---------- Hero ---------- */
.drv-hero {
	background: linear-gradient(135deg, var(--drv-navy) 0%, var(--drv-navy-2) 100%);
	color: var(--drv-navy-soft);
	padding-block: 96px 88px;
	position: relative;
	overflow: hidden;
}

.drv-hero:after {
	content: "";
	position: absolute;
	inset-block-start: -220px;
	inset-inline-end: -180px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(28, 101, 200, 0.38) 0%, rgba(28, 101, 200, 0) 68%);
	pointer-events: none;
}

.drv-hero > .drv-inner { position: relative; z-index: 1; }

.drv-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.drv-hero h1 {
	color: #FFFFFF;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 18px;
	max-width: 18ch;
}

.drv-hero .drv-lead {
	font-size: 19px;
	line-height: 1.6;
	max-width: 62ch;
	margin: 0 0 30px;
	color: var(--drv-navy-soft);
}

.drv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* ---------- Boutons ---------- */
.drv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: var(--drv-blue-600);
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.drv-btn:hover {
	background: var(--drv-blue-700);
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(28, 101, 200, 0.7);
}

.drv-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: #FFFFFF !important;
}

.drv-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

.drv-btn--light {
	background: #FFFFFF;
	color: var(--drv-navy) !important;
}

.drv-btn--light:hover {
	background: var(--drv-blue-100);
	color: var(--drv-navy) !important;
	box-shadow: none;
}

.drv-btn--outline {
	background: transparent;
	border-color: var(--drv-border);
	color: var(--drv-ink) !important;
}

.drv-btn--outline:hover {
	background: var(--drv-surface);
	border-color: var(--drv-n-300);
	color: var(--drv-ink) !important;
	box-shadow: none;
}

/* ---------- Sections ---------- */
.drv-section { padding-block: 72px; }
.drv-section--tight { padding-block: 48px; }
.drv-section--alt { background: var(--drv-surface); }
.drv-section--navy { background: var(--drv-navy); color: var(--drv-navy-soft); }
.drv-section--navy h2,
.drv-section--navy h3 { color: #FFFFFF; }

.drv-head { margin-bottom: 38px; max-width: 68ch; }
.drv-head--center { margin-inline: auto; text-align: center; }
.drv-head .drv-lead { font-size: 18px; margin: 0; color: var(--drv-text); }
.drv-section--navy .drv-head .drv-lead { color: var(--drv-navy-soft); }

/* ---------- Grilles et cartes ---------- */
.drv-grid { display: grid; gap: 22px; }
.drv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.drv-card {
	background: var(--drv-white);
	border: 1px solid var(--drv-border);
	border-radius: var(--drv-radius);
	padding: 28px 26px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.drv-card:hover {
	transform: translateY(-3px);
	border-color: var(--drv-blue-200);
	box-shadow: var(--drv-shadow);
}

.drv-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: var(--drv-blue-50);
	color: var(--drv-blue-600);
	font-size: 19px;
}

.drv-card h3 { margin-bottom: 8px; }
.drv-card p { font-size: 15px; margin: 0; }

.drv-section--navy .drv-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.drv-section--navy .drv-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: none;
}

.drv-section--navy .drv-card p { color: var(--drv-navy-soft); }

.drv-section--navy .drv-card__icon {
	background: rgba(28, 101, 200, 0.22);
	color: var(--drv-blue-300);
}

/* ---------- Etapes numerotees ---------- */
.drv-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
	counter-reset: drvstep;
}

.drv-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drv-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.drv-steps > li {
	position: relative;
	margin: 0;
	padding: 30px 26px 26px;
	list-style: none;
	background: var(--drv-white);
	border: 1px solid var(--drv-border);
	border-radius: var(--drv-radius);
}

.drv-steps > li:before {
	counter-increment: drvstep;
	content: "0" counter(drvstep);
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--drv-blue-600);
}

.drv-steps h3 { margin-bottom: 8px; }
.drv-steps p { font-size: 15px; margin: 0; }

/* ---------- Deux colonnes ---------- */
.drv-split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.drv-panel {
	background: var(--drv-blue-50);
	border: 1px solid var(--drv-blue-200);
	border-radius: var(--drv-radius);
	padding: 30px 28px;
}

.drv-panel h3 { margin-bottom: 14px; }

/* ---------- Liste a coches ---------- */
.drv-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.drv-list > li {
	position: relative;
	margin: 0 0 11px;
	padding-inline-start: 30px;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.55;
}

.drv-list > li:before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--drv-blue-50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232563EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.drv-section--navy .drv-list > li { color: var(--drv-navy-soft); }

.drv-section--navy .drv-list > li:before {
	background-color: rgba(28, 101, 200, 0.3);
}

/* ---------- Chiffres cles ---------- */
.drv-kpi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-top: 42px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--drv-radius);
	overflow: hidden;
}

.drv-kpi > div {
	background: rgba(15, 30, 61, 0.6);
	padding: 22px 24px;
}

.drv-kpi strong {
	display: block;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 4px;
}

.drv-kpi span {
	font-size: 14px;
	color: var(--drv-navy-soft);
}

/* ---------- Encadre ---------- */
.drv-note {
	display: block;
	padding: 20px 24px;
	border-radius: 14px;
	border: 1px solid var(--drv-blue-200);
	border-inline-start: 3px solid var(--drv-blue-600);
	background: var(--drv-blue-50);
	font-size: 15.5px;
	color: var(--drv-ink);
}

/* ---------- FAQ ---------- */
.drv-faq { border-top: 1px solid var(--drv-border); }

.drv-faq > details {
	border-bottom: 1px solid var(--drv-border);
	background: transparent;
}

.drv-faq > details > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	color: var(--drv-ink);
	transition: color 0.18s ease;
}

.drv-faq > details > summary::-webkit-details-marker { display: none; }
.drv-faq > details > summary:hover { color: var(--drv-blue-600); }

.drv-faq > details > summary:after {
	content: "+";
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--drv-blue-600);
	transition: transform 0.2s ease;
}

.drv-faq > details[open] > summary:after {
	content: "\2212";
}

.drv-faq > details > div {
	padding: 0 4px 22px;
	font-size: 15.5px;
	max-width: 80ch;
}

/* ---------- Bandeau CTA ---------- */
.drv-cta {
	background: linear-gradient(135deg, var(--drv-navy) 0%, var(--drv-navy-2) 100%);
	color: var(--drv-navy-soft);
	padding-block: 64px;
	text-align: center;
}

.drv-cta h2 { color: #FFFFFF; font-size: 32px; }
.drv-cta p { max-width: 60ch; margin-inline: auto; font-size: 17px; }
.drv-cta .drv-actions { justify-content: center; margin-top: 26px; }

/* ---------- Tableau ---------- */
.drv-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--drv-white);
	border: 1px solid var(--drv-border);
	border-radius: var(--drv-radius);
	overflow: hidden;
	font-size: 15px;
}

.drv-table th,
.drv-table td {
	padding: 15px 18px;
	text-align: start;
	border-bottom: 1px solid var(--drv-border);
	vertical-align: top;
}

.drv-table thead th {
	background: var(--drv-surface);
	color: var(--drv-ink);
	font-weight: 600;
}

.drv-table tbody tr:last-child td { border-bottom: none; }

.drv-scroll { overflow-x: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.drv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.drv-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.drv-hero h1 { font-size: 40px; }
	.drv h2 { font-size: 30px; }
	.drv-split { gap: 34px; }
}

@media (max-width: 782px) {
	.drv-hero { padding-block: 66px 58px; }
	.drv-hero h1 { font-size: 32px; max-width: none; }
	.drv-hero .drv-lead { font-size: 17px; }
	.drv h2 { font-size: 26px; }
	.drv-section { padding-block: 52px; }
	.drv-grid--2,
	.drv-grid--3,
	.drv-grid--4,
	.drv-steps--3,
	.drv-steps--4,
	.drv-split { grid-template-columns: 1fr; }
	.drv-kpi { grid-template-columns: 1fr; }
	.drv-inner { padding-inline: 20px; }
	.drv-actions .drv-btn { width: 100%; }
}


/* ==========================================================================
   7. PAGES LEGALES (.drv-legal)
   Colonne de lecture etroite, titres calibres pour un texte juridique.
   ========================================================================== */
.drv-legal { font-size: 15.5px; line-height: 1.75; }
.drv-legal h2 { font-size: 22px; font-weight: 600; margin: 42px 0 12px; padding-top: 26px; border-top: 1px solid var(--drv-border); }
.drv-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.drv-legal h3 { font-size: 17px; font-weight: 600; margin: 26px 0 8px; }
.drv-legal h4 { font-size: 15.5px; font-weight: 600; margin: 20px 0 6px; }
.drv-legal p { margin: 0 0 14px; }
.drv-legal ul, .drv-legal ol { margin: 0 0 18px; padding-inline-start: 22px; }
.drv-legal li { margin-bottom: 7px; }
.drv-legal strong { color: var(--drv-ink); }
.drv-legal table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14.5px; }
.drv-legal th, .drv-legal td { padding: 10px 12px; border: 1px solid var(--drv-border); text-align: start; vertical-align: top; }
.drv-legal th { background: var(--drv-surface); font-weight: 600; color: var(--drv-ink); }
.drv-meta { display: block; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--drv-border); font-size: 14px; color: var(--drv-muted); }
.drv-legal-foot { margin-top: 46px; }

/* =========================================================
   8. Tarifs - cartes de prix
   ========================================================= */
.drv-plans{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;margin:0 0 10px}
.drv-plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.drv-plans--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.drv-plan{display:flex;flex-direction:column;background:var(--drv-white);border:1px solid var(--drv-border);border-radius:var(--drv-radius);padding:28px 22px 24px;position:relative}
.drv-plan--best{border-color:var(--drv-blue-600);box-shadow:0 1px 2px rgba(14, 30, 53,.04),0 18px 44px -18px rgba(28, 101, 200,.38)}
.drv-plan--dark{background:var(--drv-navy);border-color:var(--drv-navy-2)}
.drv-plan--dark .drv-plan__name,.drv-plan--dark .drv-plan__amount{color:#fff}
.drv-plan--dark .drv-plan__sub,.drv-plan--dark .drv-plan__per{color:var(--drv-navy-soft)}
.drv-plan--dark .drv-plan__list li{color:var(--drv-blue-100)}
.drv-plan--dark .drv-plan__alt{color:var(--drv-amber)}
.drv-plan__badge{position:absolute;top:-11px;left:22px;background:var(--drv-blue-600);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;line-height:1.5}
.drv-plan__name{font-size:18px;font-weight:700;color:var(--drv-ink);margin:0 0 5px;letter-spacing:-.01em}
.drv-plan__sub{font-size:13px;color:var(--drv-muted);margin:0 0 18px;line-height:1.45;min-height:38px}
.drv-plan__price{display:flex;align-items:baseline;gap:5px;margin:0}
.drv-plan__amount{font-size:38px;font-weight:800;color:var(--drv-ink);line-height:1;letter-spacing:-.02em}
.drv-plan__per{font-size:14px;color:var(--drv-muted);font-weight:600}
.drv-plan__alt{font-size:12.5px;color:var(--drv-blue-700);font-weight:600;margin:8px 0 20px;min-height:19px}
.drv-plan__list{list-style:none;margin:0 0 22px;padding:0;flex:1 1 auto}
.drv-plan__list li{position:relative;padding:0 0 0 26px;margin:0 0 9px;font-size:14px;color:var(--drv-text);line-height:1.45}
.drv-plan__list li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background-color:var(--drv-blue-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px}
.drv-plan__list li.is-off{color:var(--drv-muted)}
.drv-plan__list li.is-off::before{background-color:var(--drv-n-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23959EAA' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");background-size:9px}
.drv-plan--dark .drv-plan__list li::before{background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.drv-plan .drv-btn{width:100%;justify-content:center;text-align:center;display:flex}
.drv-plan__note{font-size:12px;color:var(--drv-muted);margin:10px 0 0;text-align:center}
.drv-plan--dark .drv-plan__note{color:var(--drv-navy-soft)}
.drv-commission{display:inline-flex;align-items:baseline;gap:6px;background:var(--drv-blue-50);border:1px solid var(--drv-blue-100);border-radius:10px;padding:8px 12px;margin:0 0 18px}
.drv-commission strong{font-size:20px;font-weight:800;color:var(--drv-blue-700);line-height:1}
.drv-commission span{font-size:12.5px;color:var(--drv-text);font-weight:600}
.drv-plan--dark .drv-commission{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.drv-plan--dark .drv-commission strong{color:var(--drv-amber)}
.drv-plan--dark .drv-commission span{color:var(--drv-blue-100)}
.drv-switch{display:flex;justify-content:center;gap:8px;margin:0 0 30px;font-size:13.5px;color:var(--drv-muted)}
.drv-switch strong{color:var(--drv-blue-700)}
@media(max-width:1024px){.drv-plans,.drv-plans--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:782px){.drv-plans,.drv-plans--3,.drv-plans--2{grid-template-columns:1fr}.drv-plan__sub{min-height:0}.drv-plan__alt{min-height:0}}

/* ==========================================================================
   9. PAGES D'ANNONCES, CARTES ET GALERIES
   Mise en page native retenue : pp_listings_top_layout = grid_sidebar
   ("Listing Grid - Split Page with Sidebar (No Map)"). La carte Google est
   reservee aux fiches d'annonces (#singleListingMap), elle n'apparait plus
   sur les listes.
   Rien ici ne surcharge un template de plugin : uniquement de la mise en
   forme, donc rien ne casse a la mise a jour de Listeo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Colonne de filtres
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout .full-page-container.full-page-jobs .full-page-sidebar {
	background: var(--drv-white);
	border-right: 1px solid var(--drv-border);
}

.grid_sidebar-archive-listings-layout .full-page-sidebar .widget-title {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--drv-muted);
	margin-bottom: 22px !important;
}

.grid_sidebar-archive-listings-layout .full-page-content-container {
	background: var(--drv-surface);
}

/* --------------------------------------------------------------------------
   9.2 Bandeau de titre et tri
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout .full-page-jobs .filters-container {
	padding: 28px 30px 16px;
}

.grid_sidebar-archive-listings-layout .split-grid-title-row {
	align-items: center;
	gap: 24px;
}

.grid_sidebar-archive-listings-layout .split-grid-title .page-title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--drv-ink);
	letter-spacing: -.01em;
}

@media (max-width: 1024px) {
	.grid_sidebar-archive-listings-layout .split-grid-title .page-title {
		font-size: 24px;
	}
}

.grid_sidebar-archive-listings-layout .split-grid-sort-control .sort-by-select .select2-container {
	min-width: 210px;
}

/* --------------------------------------------------------------------------
   9.3 Grille des annonces
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout #listeo-listings-container.new-grid-layout-nl {
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 26px;
	padding: 0 30px 40px;
}

@media (max-width: 782px) {
	.grid_sidebar-archive-listings-layout .full-page-jobs .filters-container {
		padding: 20px 18px 12px;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container.new-grid-layout-nl {
		padding: 0 18px 32px;
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   9.4 Carte d'annonce premium
   Le theme pose "box-shadow: none" et une bordure #e0e0e0 hors charte :
   d'ou les !important, limites a ces deux proprietes.
   -------------------------------------------------------------------------- */
.listing-card-nl {
	border: 1px solid var(--drv-border) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(14, 30, 53, .04) !important;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.listing-card-container-nl:hover .listing-card-nl {
	transform: translateY(-4px);
	box-shadow: var(--drv-shadow) !important;
	border-color: var(--drv-n-300) !important;
}

.new-grid-layout-nl .listing-image-container-nl {
	border-radius: 0 !important;
}

/* Zoom lent de la photo au survol. Le wrapper porte deja un translateX
   pilote en JS : on ne touche donc que l'image, jamais le wrapper. */
.slider-image-nl {
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.listing-card-container-nl:hover .slider-image-nl {
	transform: scale(1.035);
}

/* Fleches de la mini-galerie : verre depoli, meilleur contraste */
.slider-arrow-nl {
	width: 34px !important;
	height: 34px !important;
	background-color: rgba(255, 255, 255, .92) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--drv-ink) !important;
	box-shadow: 0 2px 10px rgba(14, 30, 53, .18) !important;
}

.slider-arrow-nl:hover {
	background-color: var(--drv-white) !important;
	color: var(--drv-blue-600) !important;
}

.slider-arrow-nl.left-nl {
	left: 12px;
}

.slider-arrow-nl.right-nl {
	right: 12px;
}

/* Sur ecran tactile il n'y a pas de survol : les fleches resteraient
   invisibles et la mini-galerie inutilisable. On les affiche toujours. */
@media (hover: none) {

	.slider-arrow-nl {
		opacity: 1 !important;
		transform: translate(0, -50%) !important;
	}
}

/* --------------------------------------------------------------------------
   9.5 Galerie de la fiche annonce (mode "grid", agrandissement au clic)
   -------------------------------------------------------------------------- */
#single-listing-grid-gallery {
	border-radius: var(--drv-radius);
	overflow: hidden;
}

#single-listing-grid-gallery a.slg-gallery-img img,
#single-listing-grid-gallery a.slg-gallery-img-single img {
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

#single-listing-grid-gallery a.slg-gallery-img:hover img,
#single-listing-grid-gallery a.slg-gallery-img-single:hover img {
	transform: scale(1.03);
}

/* Bouton "Voir toutes les photos" */
.slg-button {
	bottom: 22px !important;
	right: 22px !important;
	background: rgba(255, 255, 255, .94) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--drv-ink) !important;
	padding: 10px 20px !important;
	border: 1px solid rgba(14, 30, 53, .08) !important;
	box-shadow: 0 4px 16px rgba(14, 30, 53, .18) !important;
}

.slg-button:hover {
	background: var(--drv-ink) !important;
	color: var(--drv-white) !important;
	border-color: var(--drv-ink) !important;
}

/* Carte de la fiche annonce */
#singleListingMap-container {
	border-radius: var(--drv-radius);
	overflow: hidden;
	border: 1px solid var(--drv-border);
}

#getDirection {
	border-radius: 50px;
	font-weight: 600;
}

/* ==========================================================================
   10. SELECTEUR DE DISPOSITION GRILLE / LISTE
   Le markup est celui attendu par ajax.search.min.js (.layout-switcher >
   a[data-layout]), la bascule se fait uniquement par ajout/retrait de la
   classe "new-grid-layout-nl" sur #listeo-listings-container : aucune
   requete, aucun rechargement.
   Le theme stylise deja .layout-switcher en boutons ronds gris avec des
   selecteurs prefixes "body", d'ou les "body" et les !important ci-dessous.
   ========================================================================== */

/* Le titre et le selecteur se partagent la ligne, le tri reste a droite. */
.grid_sidebar-archive-listings-layout .split-grid-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex: 1 1 auto;
	min-width: 0;
}

.grid_sidebar-archive-listings-layout .split-grid-title .page-title {
	min-width: 0;
}

body .drv-layout-switcher {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}

body .drv-layout-switcher a,
body .drv-layout-switcher a.active {
	width: 38px;
	height: 38px;
	line-height: 36px !important;
	margin: 0;
	border-radius: 10px !important;
	border: 1px solid var(--drv-border) !important;
	background-color: var(--drv-white) !important;
	color: var(--drv-muted) !important;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body .drv-layout-switcher a:hover {
	border-color: var(--drv-blue-600) !important;
	background-color: var(--drv-blue-50) !important;
	color: var(--drv-blue-600) !important;
}

body .drv-layout-switcher a.active {
	border-color: var(--drv-blue-600) !important;
	background-color: var(--drv-blue-600) !important;
	color: var(--drv-white) !important;
}

/* Retraits communs aux deux vues (la section 9 ne visait que la grille). */
.grid_sidebar-archive-listings-layout #listeo-listings-container:not([data-style="compact"]) {
	padding: 0 30px 40px;
}

/* --------------------------------------------------------------------------
   Vue liste : carte horizontale
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-card-nl {
	flex-direction: row;
}

.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-image-container-nl {
	width: 34%;
	max-width: 340px;
	min-width: 200px;
	min-height: 210px;
	height: auto;
	border-radius: 0;
}

.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-details-nl {
	flex: 1 1 auto;
	min-width: 0;
}

/* En liste la carte est large : on laisse respirer le contenu. */
.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-features-nl,
.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-amenities-nl {
	margin-top: 10px;
}

/* Sous 992 px la carte horizontale devient illisible : on repasse en vertical
   quelle que soit la vue choisie. Le theme masque deja le selecteur sous
   768 px. */
@media (max-width: 992px) {

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not([data-style="compact"]) .listing-card-nl {
		flex-direction: column;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not([data-style="compact"]) .listing-image-container-nl {
		width: 100%;
		max-width: none;
		height: 220px;
		min-height: 180px;
	}
}

@media (max-width: 782px) {

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not([data-style="compact"]) {
		padding: 0 18px 32px;
	}

	.grid_sidebar-archive-listings-layout .split-grid-title {
		gap: 12px;
	}
}

/* ==========================================================================
   11. HEADER - CORRECTIFS DE CADRAGE
   Bloc ajoute apres coup. Il reprend les selecteurs de la section 2 et gagne
   par simple ordre de cascade (meme specificite, plus bas dans le fichier).
   La section 2 n'est pas modifiee : retirer ce bloc suffit a revenir en
   arriere.
   11.1 le panneau du mega-menu ne peut plus depasser l'ecran
   11.2 cinq colonnes : les 13 familles tiennent en 3 rangees
   11.3 header du tableau de bord : gouttiere de la colonne laterale
   11.4 logo plus grand, et lisible sur fond sombre
   ========================================================================== */
@media (min-width: 1200px) {

	/* --- 11.1 Cadrage du panneau --------------------------------------
	   Le panneau etait positionne par rapport a <nav id="navigation"> et
	   non a la page : centre sur le menu, il sortait de l'ecran a gauche.
	   On neutralise le positionnement de <nav>, le bloc conteneur devient
	   #header .container, et le panneau se cale sur ses bords internes :
	   bord gauche aligne sur le logo, bord droit sur les boutons compte. */
	#header .container {
		position: relative !important;
	}

	/* Ce n'est pas <nav> qui servait d'ancrage mais son <ul> : style.css pose
	   "#navigation ul { position: relative }" (1 seul ID, sans !important,
	   donc facile a battre, mais il fallait le viser). On neutralise les
	   quatre niveaux entre le panneau et le conteneur pour que le bloc
	   conteneur soit a coup sur #header .container.
	   Verifie en rejouant la cascade : offsetParent du panneau = DIV.container,
	   panneau a 40 px de chaque bord. Aucun de ces quatre elements n'a de
	   transform, qui creerait sinon un bloc conteneur malgre position:static. */
	#header .left-side,
	#header #navigation.style-1,
	#header #navigation.style-1 > ul,
	#header #navigation.style-1 > ul > li.has-megamenu {
		position: static !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) {
		position: absolute !important;
		top: 100% !important;
		left: 40px !important;
		right: 40px !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 94px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		padding: 20px 24px !important;
		transform: translate3d(0, 18px, 0) !important;
		scrollbar-width: thin;
		scrollbar-color: rgba(14, 30, 53, 0.22) transparent;
	}

	/* La barre d'administration WordPress descend le header de 32 px. */
	body.admin-bar #header #navigation.style-1 .mega-menu:not(.mm-panel) {
		max-height: calc(100vh - 126px) !important;
	}

	#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) {
		transform: translate3d(0, 8px, 0) !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel)::-webkit-scrollbar {
		width: 8px;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel)::-webkit-scrollbar-thumb {
		background: rgba(14, 30, 53, 0.18);
		border-radius: 8px;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel)::-webkit-scrollbar-track {
		background: transparent;
	}

	/* --- 11.2 Cinq colonnes, maille resserree ------------------------- */
	/* Colonnes equilibrees. En grille 5 x 3 la derniere rangee laissait deux
	   cases vides et les filets verticaux s'arretaient a des hauteurs
	   differentes. Le multi-colonnes repartit les 13 familles sur les cinq
	   colonnes en egalisant les hauteurs ; break-inside empeche qu'une
	   famille soit coupee entre deux colonnes. Hauteur mesuree : 442 px,
	   constante de 1280 a 1920 px, sans barre de defilement. */
	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul {
		display: block !important;
		grid-template-columns: none !important;
		column-count: 5;
		column-gap: 34px;
		gap: 0 !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		padding: 0 !important;
		margin: 0 0 20px !important;
		border-right: none !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li:last-child {
		margin-bottom: 0 !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) > ul > li > a {
		margin: 0 0 6px !important;
		padding: 0 0 6px !important;
		font-size: 13px !important;
		letter-spacing: 0.01em !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li > a {
		padding: 3px 0 !important;
		font-size: 12.5px !important;
		line-height: 1.32 !important;
	}

	/* --- 11.3 Tableau de bord ----------------------------------------- */
	/* header-dashboard.php sort <header class="fixed fullwidth dashboard"> et
	   le theme reserve 305px a gauche pour la colonne laterale fixe. La
	   section 2 imposait padding-left:40px a TOUS les headers : le logo et le
	   menu passaient sous la colonne. */
	#header-container.dashboard #header .container {
		max-width: none !important;
		width: 100% !important;
	}
}

@media (min-width: 1200px) and (max-width: 1365px) {
	#header-container.dashboard #header .container {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

@media (min-width: 1366px) {
	#header-container.dashboard #header .container {
		padding-left: 305px !important;
		padding-right: 40px !important;
	}
}

/* --- 11.4 Logo -------------------------------------------------------- */
/* Le SVG v4 a un cadrage serre (l'encre occupe 86% de la hauteur contre 55%
   avant) : a 46px il est nettement plus grand qu'a 52px en v3. */
#logo img {
	max-height: 46px !important;
	width: auto !important;
}

#header.cloned #logo img {
	max-height: 38px !important;
	max-width: 210px !important;
}

#header-container.dashboard #logo img {
	max-height: 38px !important;
}

@media (max-width: 1024px) {
	#logo img {
		max-height: 38px !important;
	}
}

/* Header transparent : le logo clair reste lisible meme au-dessus d'une zone
   claire de la photo du hero. */
.transparent-header #header:not(.cloned) #logo img {
	filter: drop-shadow(0 1px 6px rgba(15, 30, 61, 0.45));
}

/* ==========================================================================
   12. MENUS DEROULANTS : CONFORT DE POINTAGE ET COULEUR DES SOUS-CATEGORIES
   12.1 le panneau ne se ferme plus des qu'on quitte l'intitule
   12.2 sous-categories en bleu doux
   ========================================================================== */
:root {
	/* Bleu adouci pour les liens secondaires. Contraste sur blanc : 4,73:1 (AA).
	   Le bleu de marque #2563EB (5,17:1) est trop sature quand 54 liens sont
	   affiches cote a cote. */
	--drv-blue-soft: var(--drv-blue-700);

	/* Ardoise bleutee des libelles de secteurs. Contraste sur blanc :
	   8,93:1, contre 17,75:1 pour --drv-ink. Assez lisible pour un libelle
	   court, assez doux pour ne pas trancher comme du noir. */
	--drv-slate: var(--drv-n-700);
}

@media (min-width: 1200px) {

	/* --- 12.1 Delai de fermeture --------------------------------------
	   Entre le bas de l'intitule et le haut du panneau il reste une quinzaine
	   de pixels : la souris quittait le survol avant d'atteindre le panneau,
	   qui se refermait aussitot. Le panneau reste desormais visible 400 ms
	   apres la sortie, sans aucun delai a l'ouverture.
	   Une passerelle en pseudo-element n'etait pas envisageable : le panneau
	   porte overflow-y:auto, qui rognerait un ::before place au-dessus, et un
	   ::after sur l'intitule ecraserait le chevron pose par le theme.
	   Mesure : encore visible 300 ms apres la sortie, referme a 700 ms. */
	#header #navigation.style-1 .mega-menu:not(.mm-panel) {
		transition: opacity 0.2s ease 0.4s, visibility 0.2s ease 0.4s, transform 0.2s ease 0.4s !important;
	}

	#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) {
		transition-delay: 0s !important;
		transform: translate3d(0, 6px, 0) !important;
	}

	/* meme confort pour les menus deroulants simples */
	#header #navigation.style-1 > ul > li > ul.sub-menu {
		transition: opacity 0.2s ease 0.4s, visibility 0.2s ease 0.4s, transform 0.2s ease 0.4s !important;
	}

	#header #navigation.style-1 > ul > li:hover > ul.sub-menu {
		transition-delay: 0s !important;
	}

	/* --- 12.2 Sous-categories en bleu doux ----------------------------- */
	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li > a {
		color: var(--drv-blue-soft) !important;
	}

	#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul li > a:hover {
		color: var(--drv-blue-700) !important;
	}
}

/* ==========================================================================
   13. HERO DE L'ACCUEIL
   Widget Listeo "listeo-homebanner" (element Elementor d7hero02).
   Balisage :
     .main-search-container.elementor-main-search-container.container-overlay-solid
       > .main-search-inner            (position:relative, top:50%, translateY(-50%))
           > .container > .row > .col-md-12
               > h1 (+ span.typed-words) + h4 + form#listeo_core-search-form
           > .row > .col-md-12
               > h5.highlighted-categories-headline + .highlighted-categories

   Le conteneur a une HAUTEUR FIXE et .main-search-inner est centre par
   translateY(-50%) : on regle donc la respiration du hero par la hauteur du
   conteneur, jamais en passant le conteneur en flex (cela casserait le
   centrage).

   Photo : uploads/2026/09/drivat-hero-quartier-affaires.jpg (2400x1100),
   definie cote Elementor (background_image du widget).
   ========================================================================== */

.main-search-container.elementor-main-search-container {
	height: auto !important;
	min-height: clamp(640px, 80vh, 820px);
	position: relative;
}

/* Le centrage natif (top:50% + translateY(-50%)) fait remonter le contenu
   SOUS le header transparent des que le bloc depasse la hauteur du
   conteneur : le titre chevauchait le logo. On repasse en flux normal avec
   un retrait haut superieur a la hauteur du header, et le conteneur grandit
   avec son contenu. Mesure a 1351 px : titre a 182 px du haut, header
   termine a 104 px. */
.elementor-main-search-container .main-search-inner {
	top: 0 !important;
	transform: none !important;
	padding-top: clamp(150px, 18vh, 210px) !important;
	padding-bottom: 64px !important;
}

/* --- 13.1 Voile --------------------------------------------------------
   Elementor pose un voile plat #0F1E3DBF. Un aplat uniforme ecrase la photo.
   On le remplace par un degrade a quatre arrets : sombre en haut pour que le
   header transparent reste lisible, plus clair au milieu pour laisser
   respirer la photo, sombre en bas pour le bandeau de secteurs et la jonction
   avec la section suivante. */
.main-search-container.elementor-main-search-container:before {
	background: linear-gradient(
		180deg,
		rgba(8, 17, 36, 0.84) 0%,
		rgba(12, 25, 51, 0.66) 30%,
		rgba(15, 30, 61, 0.58) 56%,
		rgba(9, 19, 40, 0.86) 100%
	) !important;
}

/* Halo bleu de la charte : profondeur sans retoucher la photo. */
.main-search-container.elementor-main-search-container > .main-search-inner:before {
	content: "";
	position: absolute;
	inset: -40vh -50vw;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(60% 55% at 78% 22%, rgba(28, 101, 200, 0.28) 0%, rgba(28, 101, 200, 0) 65%);
}

/* --- 13.2 Titres ------------------------------------------------------- */
.elementor-main-search-container .main-search-inner h1 {
	font-size: clamp(30px, 3.2vw, 46px) !important;
	line-height: 1.08 !important;
	font-weight: 600 !important;
	letter-spacing: -0.025em !important;
	max-width: 26ch;
	margin: 0 auto 20px !important;
	text-shadow: 0 2px 30px rgba(5, 12, 26, 0.5);
}

.elementor-main-search-container .main-search-inner h1 .typed-words {
	color: var(--drv-blue-300);
	white-space: nowrap;
}

.elementor-main-search-container .main-search-inner h4 {
	font-size: clamp(15.5px, 1.3vw, 18.5px) !important;
	line-height: 1.62 !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.86) !important;
	max-width: 64ch;
	margin: 0 auto !important;
	text-shadow: 0 1px 16px rgba(5, 12, 26, 0.45);
}

/* --- 13.3 Barre de recherche -------------------------------------------
   Le theme en fait une pilule blanche (radius 50, padding 9, max-height 68).
   On garde la forme et on travaille l'ombre, la hauteur et le bouton. */
.elementor-main-search-container .main-search-input {
	margin-top: 40px !important;
	padding: 10px !important;
	max-height: 76px !important;
	max-width: 1020px;
	margin-left: auto !important;
	margin-right: auto !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	box-shadow: 0 28px 64px -24px rgba(5, 12, 26, 0.8), 0 2px 8px rgba(5, 12, 26, 0.18) !important;
}

.elementor-main-search-container .main-search-input input,
.elementor-main-search-container .main-search-input input:focus {
	height: 48px !important;
	line-height: 48px !important;
	font-size: 15.5px !important;
}

.elementor-main-search-container .main-search-input-item {
	border-right-color: rgba(14, 30, 53, 0.1) !important;
}

.elementor-main-search-container .main-search-input button.button {
	height: 52px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 0 38px !important;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 22px -10px rgba(28, 101, 200, 0.9);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.elementor-main-search-container .main-search-input button.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -12px rgba(28, 101, 200, 1);
}

/* --- 13.4 Bandeau de secteurs ------------------------------------------ */
.elementor-main-search-container .highlighted-categories-headline {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 46px 0 18px !important;
}

.elementor-main-search-container .main-search-inner .highlighted-category {
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 14px !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.elementor-main-search-container .main-search-inner .highlighted-category:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.32) !important;
	transform: translateY(-3px);
}

.elementor-main-search-container .main-search-inner .highlighted-category i {
	color: var(--drv-blue-300) !important;
}

.elementor-main-search-container .main-search-inner .highlighted-category h4 {
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: #FFFFFF !important;
	margin-bottom: 0 !important;
}

/* --- 13.5 Mobile -------------------------------------------------------- */
@media (max-width: 992px) {

	.elementor-main-search-container .main-search-inner {
		padding-top: 120px !important;
		padding-bottom: 44px !important;
	}

	.elementor-main-search-container .main-search-input {
		max-height: none !important;
		border-radius: 18px !important;
	}

	.elementor-main-search-container .highlighted-categories-headline {
		margin-top: 34px !important;
	}
}

/* ==========================================================================
   14. ACCUEIL - SECTION SECTEURS EN CARROUSEL
   Widget Listeo "listeo-taxonomy-grid" (element Elementor d7cat03).

   Le widget embarque deja un carrousel, mais son script commence par
   "if (window.innerWidth >= 992) return;" : il ne s'active jamais sur
   ordinateur. Le reglage "Mobile Carousel" du widget a donc ete vide (le
   wrapper prend la classe .no-mobile-carousel, le script du plugin passe son
   tour) et le defilement est repris ici en natif : overflow-x.
   Molette, trackpad, doigt et clavier fonctionnent sans JavaScript ; le
   fichier js/drivat-category-carousel.js ajoute les fleches et le defilement
   automatique.

   Pas de scroll-snap : il se battrait avec le defilement automatique, qui fait
   avancer le rail de quelques dixiemes de pixel a chaque image.

   Reglages Elementor associes : number = 20 (les 18 familles tiennent),
   only_top = yes, show_counter vide (un alignement de "0" dessert une
   marketplace qui demarre : a reactiver quand le catalogue sera fourni).
   ========================================================================== */

.taxonomy-slider-wrapper.drv-cat-carousel {
	position: relative;
	margin-inline: -12px;
}

.drv-cat-carousel .categories-boxes-container,
.drv-cat-carousel .categories-boxes-container-alt {
	/* Le theme pose width:calc(100% + 20px) et left:-20px sur ce conteneur
	   (style.css:12181) : sans ce rappel, le rail demarre 20 px a gauche du
	   bloc et le decalage se voit sur la premiere carte. */
	width: 100% !important;
	left: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 10px 12px 24px !important;
	margin: 0 !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.drv-cat-carousel .categories-boxes-container::-webkit-scrollbar,
.drv-cat-carousel .categories-boxes-container-alt::-webkit-scrollbar {
	display: none;
}

/* --- 14.1 Carte secteur, sans cadre -------------------------------------
   Dix-huit rectangles bordes alignes font catalogue, pas plateforme. Seule la
   pastille d'icone structure la carte ; un fond n'apparait qu'au survol. */
.drv-cat-carousel .category-small-box {
	flex: 0 0 auto;
	width: 172px !important;
	margin: 0 !important;
	padding: 20px 12px 18px !important;
	background-color: transparent !important;
	border: 0;
	border-radius: 16px;
	box-shadow: none;
	transform: none;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.drv-cat-carousel .category-small-box:hover {
	background-color: var(--drv-blue-50) !important;
	box-shadow: none;
	transform: translateY(-3px);
}

/* --- 14.2 Icone --------------------------------------------------------
   Le customizer pose "color: #2563EB" sur .category-small-box i (couleur
   principale du theme). A dix-huit exemplaires en ligne, ce bleu sature
   sature justement l'oeil : le bleu de marque est garde pour le survol, et le
   repos prend --drv-blue-soft (#4F73B3) dans une pastille froide neutre. */
.drv-cat-carousel .category-small-box i {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 54px;
	height: 54px !important;
	margin: 0 0 14px !important;
	border-radius: 15px;
	background: var(--drv-tile);
	color: var(--drv-blue-soft) !important;
	font-size: 21px !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.drv-cat-carousel .category-small-box:hover i {
	background: var(--drv-blue-600);
	color: var(--drv-white) !important;
}

.drv-cat-carousel .category-small-box h4 {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.005em;
	color: var(--drv-slate) !important;
	margin: 0 !important;
}

.drv-cat-carousel .category-small-box:hover h4 {
	color: var(--drv-blue-700) !important;
}

.drv-cat-carousel .category-box-counter {
	display: none !important;
}

/* Les clones servent la boucle sans couture : invisibles pour le clavier et
   les lecteurs d'ecran, identiques a l'oeil. */
.drv-cat-carousel .drv-cat-clone {
	pointer-events: auto;
}

/* --- 14.3 Fondus de bord (accueil uniquement, fond blanc) --------------- */
.taxonomy-slider-wrapper.drv-cat-carousel:before,
.taxonomy-slider-wrapper.drv-cat-carousel:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 64px;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.taxonomy-slider-wrapper.drv-cat-carousel:before {
	left: 0;
	background: linear-gradient(to right, var(--drv-white) 14%, rgba(255, 255, 255, 0) 100%);
}

.taxonomy-slider-wrapper.drv-cat-carousel:after {
	right: 0;
	background: linear-gradient(to left, var(--drv-white) 14%, rgba(255, 255, 255, 0) 100%);
}

.taxonomy-slider-wrapper.drv-cat-carousel.is-start:before,
.taxonomy-slider-wrapper.drv-cat-carousel.is-end:after,
.taxonomy-slider-wrapper.drv-cat-carousel.is-static:before,
.taxonomy-slider-wrapper.drv-cat-carousel.is-static:after {
	opacity: 0;
}

/* --- 14.4 Fleches ------------------------------------------------------- */
.drv-cat-nav {
	position: absolute;
	top: calc(50% - 12px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--drv-border);
	border-radius: 50%;
	background: var(--drv-white);
	box-shadow: 0 8px 20px -8px rgba(14, 30, 53, 0.3);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.drv-cat-nav:before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--drv-ink);
	border-right: 2px solid var(--drv-ink);
}

.drv-cat-nav--prev { left: -8px; }
.drv-cat-nav--prev:before { transform: rotate(-135deg); margin-left: 3px; }
.drv-cat-nav--next { right: -8px; }
.drv-cat-nav--next:before { transform: rotate(45deg); margin-right: 3px; }

.drv-cat-nav:hover {
	border-color: var(--drv-blue-600);
	transform: translateY(-50%) scale(1.06);
}

.drv-cat-carousel.is-start .drv-cat-nav--prev,
.drv-cat-carousel.is-end .drv-cat-nav--next,
.drv-cat-carousel.is-static .drv-cat-nav {
	opacity: 0;
	pointer-events: none;
}

/* --- 14.5 Mobile -------------------------------------------------------- */
@media (max-width: 767px) {

	.drv-cat-carousel .category-small-box {
		width: 142px !important;
		padding: 16px 10px 14px !important;
	}

	.drv-cat-carousel .category-small-box i {
		width: 46px;
		height: 46px !important;
		font-size: 18px !important;
		margin-bottom: 11px !important;
	}

	.drv-cat-carousel .category-small-box h4 {
		font-size: 13.5px !important;
	}

	/* au doigt, les fleches ne servent a rien */
	.drv-cat-nav { display: none; }
}

/* ==========================================================================
   15. PAGE D'ANNONCES - BANDEAU DE SECTEURS
   Gabarit split : .slider-container > button.nav-button.prev
                     + #categorySlider.category-slider > .category-item
                     + button.nav-button.next
   Le rail est rempli en JavaScript par listeo-core apres le chargement, et son
   script le deplace en transform:translateX. On neutralise ce transform, on
   masque ses deux boutons (leurs ecouteurs restent inertes puisque plus
   personne ne peut cliquer dessus, donc sa position interne reste a zero et
   son transform reste un no-op), et le meme carrousel Drivat prend le relais.

   Ici les elements sont des FILTRES, pas des liens : ils portent des
   ecouteurs de clic poses par listeo-core, que cloneNode ne copierait pas.
   Le defilement automatique passe donc en va-et-vient plutot qu'en boucle
   clonee (voir js/drivat-category-carousel.js).
   ========================================================================== */

.slider-container.drv-cat-carousel {
	overflow: visible !important;
	min-height: 0 !important;
	max-width: none !important;
}

.slider-container.drv-cat-carousel > .nav-button {
	display: none !important;
}

.drv-cat-carousel .category-slider {
	transform: none !important;
	transition: none !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 6px 30px 8px !important;
	margin: 0 !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.drv-cat-carousel .category-slider::-webkit-scrollbar {
	display: none;
}

/* justify-content: flex-start, sinon le theme centre verticalement le
   contenu de chaque carte et les pastilles se retrouvent a des hauteurs
   differentes selon que le libelle tienne sur une, deux ou trois lignes. */
.drv-cat-carousel .category-item {
	flex: 0 0 118px;
	justify-content: flex-start !important;
	margin: 0 !important;
	padding: 12px 8px 10px !important;
	border-radius: 14px;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.drv-cat-carousel .category-item:hover,
.drv-cat-carousel .category-item.active {
	background-color: var(--drv-blue-50) !important;
	transform: translateY(-3px);
}

/* Centrage : le theme empile sur ces icones des reglages contradictoires
   (height:32px + margin-top:5px + display:block pour .fa et .sl,
   font-size:35px pour le selecteur generique), et les deux familles
   utilisees n'ont pas les memes metriques : Font Awesome pour les
   secteurs, Simple Line Icons pour l'entree "Toutes". Plutot que de
   corriger chaque cas, on fait remplir toute la pastille par la balise
   <i> et on centre le glyphe en flex : le resultat ne depend plus des
   metriques de la police. overflow:hidden coupe tout debordement
   residuel. */
.drv-cat-carousel .category-item .icon-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
	border-radius: 14px;
	background: var(--drv-tile);
	overflow: hidden;
	line-height: 1 !important;
	transition: background-color 0.25s ease;
}

.drv-cat-carousel .category-item .icon-container > i,
.drv-cat-carousel .category-item .icon-container > i.fa,
.drv-cat-carousel .category-item .icon-container > i.fas,
.drv-cat-carousel .category-item .icon-container > i.sl {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	text-align: center !important;
	color: var(--drv-blue-soft) !important;
	transition: color 0.25s ease;
}

/* Certains termes peuvent porter une icone SVG ou une image a la place. */
.drv-cat-carousel .category-item .icon-container svg,
.drv-cat-carousel .category-item .icon-container img {
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	fill: var(--drv-blue-soft) !important;
	color: var(--drv-blue-soft) !important;
}

.drv-cat-carousel .category-item:hover .icon-container svg,
.drv-cat-carousel .category-item.active .icon-container svg {
	fill: var(--drv-white) !important;
	color: var(--drv-white) !important;
}

.drv-cat-carousel .category-item:hover .icon-container,
.drv-cat-carousel .category-item.active .icon-container {
	background: var(--drv-blue-600);
}

.drv-cat-carousel .category-item:hover .icon-container i,
.drv-cat-carousel .category-item.active .icon-container i {
	color: var(--drv-white) !important;
}

.drv-cat-carousel .category-name {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 2.6em;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--drv-slate) !important;
}

.drv-cat-carousel .category-item:hover .category-name,
.drv-cat-carousel .category-item.active .category-name {
	color: var(--drv-blue-700) !important;
}

.slider-container.drv-cat-carousel .drv-cat-nav {
	width: 36px;
	height: 36px;
	top: 50%;
}

.slider-container.drv-cat-carousel .drv-cat-nav--prev { left: -4px; }
.slider-container.drv-cat-carousel .drv-cat-nav--next { right: -4px; }

@media (max-width: 767px) {
	.drv-cat-carousel .category-item { flex: 0 0 104px; }
	.drv-cat-carousel .category-slider { padding-inline: 10px !important; }
}


/* --------------------------------------------------------------------------
   16. CARTES D'ANNONCES DU CARROUSEL D'ACCUEIL

   Le theme dimensionne l'image en "height: 40vw" plafonne a 300 px : sur un
   ecran large la carte depasse 500 px de haut, et trois cartes suffisent a
   remplir la section. En carrousel on veut l'inverse — quatre annonces
   embrassees d'un coup d'oeil, chacune reduite a ce qui decide d'un clic :
   photo, titre, lieu, prix.

   L'extrait et la rangee d'equipements sont le gras a retirer. A 290 px de
   large ils ne se lisent pas : ils allongent. Les masquer est ce qui rend
   la carte compacte, pas la reduction des marges.

   Portee volontairement limitee au widget : les cartes de la page annonces
   ne bougent pas.
   -------------------------------------------------------------------------- */

/* Slick empile des <div> flottants de hauteurs inegales : en flex, les
   quatre cartes d'une vue s'alignent sur la plus haute. */
.elementor-widget-listeo-listings-carousel .slick-track {
	display: flex !important;
	align-items: stretch;
}
.elementor-widget-listeo-listings-carousel .slick-slide {
	height: auto !important;
}
.elementor-widget-listeo-listings-carousel .slick-slide > div,
.elementor-widget-listeo-listings-carousel .fw-carousel-item {
	height: 100%;
}
.elementor-widget-listeo-listings-carousel .fw-carousel-item {
	padding: 0 9px;
}

/* 16.1 Image : hauteur fixe au lieu de 40vw. */
.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-image-container-nl,
.elementor-widget-listeo-listings-carousel .new-grid-layout-nl .listing-image-container-nl {
	height: 172px !important;
	min-height: 172px !important;
	max-height: 172px !important;
}

/* 16.2 Corps de carte resserre. */
.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-card-nl .details-main-col-nl {
	padding: 15px 17px 14px !important;
	justify-content: flex-start;
}
.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-card-nl .details-sidebar-col-nl {
	padding: 11px 17px !important;
	zoom: 1;
	border-top: 1px solid var(--drv-border) !important;
}
.elementor-widget-listeo-listings-carousel .listing-badges-nl {
	margin-bottom: 8px !important;
	gap: 4px;
}

/* Titre sur deux lignes maximum, hauteur reservee : sans cela une annonce a
   titre court et une a titre long desalignent tout ce qui suit. */
.elementor-widget-listeo-listings-carousel .listing-title-nl {
	font-size: 15.5px !important;
	line-height: 21px !important;
	font-weight: 600 !important;
	color: var(--drv-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}
.elementor-widget-listeo-listings-carousel .listing-location-nl {
	font-size: 13px !important;
	line-height: 18px !important;
	color: var(--drv-muted) !important;
	margin: 6px 0 0 !important;
}

/* 16.3 Ce qu'on retire. */
.elementor-widget-listeo-listings-carousel .listing-excerpt-nl,
.elementor-widget-listeo-listings-carousel .listing-amenities-nl,
.elementor-widget-listeo-listings-carousel .listing-features-nl {
	display: none !important;
}

/* 16.4 Prix et note : la ligne qui decide. */
.elementor-widget-listeo-listings-carousel .price-nl {
	font-size: 15.5px !important;
	font-weight: 600 !important;
	color: var(--drv-navy) !important;
}
.elementor-widget-listeo-listings-carousel .price-period-nl {
	font-size: 12px !important;
	color: var(--drv-muted) !important;
}
.elementor-widget-listeo-listings-carousel .rating-text-nl {
	font-size: 12.5px !important;
	color: var(--drv-text) !important;
}
.elementor-widget-listeo-listings-carousel .listing-category-tag-nl {
	font-size: 11px !important;
	padding: 4px 9px !important;
}

/* 16.5 Sous 1024 px le carrousel retombe a deux cartes puis une : elles
   redeviennent larges, l'image peut donc respirer. */
@media (max-width: 1024px) {
	.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-image-container-nl,
	.elementor-widget-listeo-listings-carousel .new-grid-layout-nl .listing-image-container-nl {
		height: 200px !important;
		min-height: 200px !important;
		max-height: 200px !important;
	}
	.elementor-widget-listeo-listings-carousel .listing-title-nl {
		font-size: 16.5px !important;
		line-height: 22px !important;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   17. MOBILE

   17.1 Le rail des secteurs ne doit rien devoir au JavaScript.

   Jusqu'ici toute la mise en rail de la section 2 etait accrochee a la classe
   .drv-cat-carousel, posee par js/drivat-category-carousel.js. Si ce script ne
   s'execute pas - fichier en cache, erreur anterieure dans la page, navigateur
   restrictif - la bande retombe sur le style d'origine du theme :
   flex-wrap: wrap, donc une grille. C'est exactement ce qui se voyait sur
   mobile.

   On reprend donc les regles du rail sur .no-mobile-carousel, une classe rendue
   par le serveur, toujours presente. Le JavaScript ne sert plus qu'a ce qui est
   accessoire : les fleches et le defilement automatique. Un rail qui depend
   d'un script pour exister est un rail qui disparait un jour.
   -------------------------------------------------------------------------- */

/* Le plugin pose overflow:hidden sur ce wrapper sous 991 px ; il rognerait le
   rail et ses ombres de bord. */
.taxonomy-slider-wrapper.no-mobile-carousel {
	position: relative;
	overflow: visible !important;
}

.taxonomy-slider-wrapper.no-mobile-carousel .categories-boxes-container,
.taxonomy-slider-wrapper.no-mobile-carousel .categories-boxes-container-alt {
	width: 100% !important;
	left: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 10px;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	padding: 10px 12px 24px !important;
	margin: 0 !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.taxonomy-slider-wrapper.no-mobile-carousel .categories-boxes-container::-webkit-scrollbar,
.taxonomy-slider-wrapper.no-mobile-carousel .categories-boxes-container-alt::-webkit-scrollbar {
	display: none;
}

.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box,
.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box-alt {
	flex: 0 0 auto !important;
	width: 172px !important;
	margin: 0 !important;
	padding: 20px 12px 18px !important;
	background-color: transparent !important;
	border: 0;
	border-radius: 16px;
	box-shadow: none;
	transform: none;
}
.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box i {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 54px;
	height: 54px !important;
	margin: 0 0 14px !important;
	border-radius: 15px;
	background: var(--drv-tile);
	color: var(--drv-glyph) !important;
	font-size: 21px !important;
}
.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box h4 {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--drv-slate) !important;
	margin: 0 !important;
}
.taxonomy-slider-wrapper.no-mobile-carousel .category-box-counter {
	display: none !important;
}

@media (max-width: 767px) {
	.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box,
	.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box-alt {
		width: 142px !important;
		padding: 16px 10px 14px !important;
	}
	.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box i {
		width: 46px;
		height: 46px !important;
		font-size: 18px !important;
		margin-bottom: 11px !important;
	}
	.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box h4 {
		font-size: 13.5px !important;
	}
}

/* --------------------------------------------------------------------------
   17.2 Cartes d'annonces sur mobile.

   Sous 768 px le carrousel n'affiche plus qu'une carte, pleine largeur : le
   compactage pense pour quatre colonnes ne se voyait pas. On raccourcit donc
   la photo et on resserre encore, pour que la carte tienne dans l'ecran sans
   obliger a faire defiler pour atteindre le prix.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-image-container-nl,
	.elementor-widget-listeo-listings-carousel .new-grid-layout-nl .listing-image-container-nl {
		height: 165px !important;
		min-height: 165px !important;
		max-height: 165px !important;
	}
	.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-card-nl .details-main-col-nl {
		padding: 13px 15px 11px !important;
	}
	.elementor-widget-listeo-listings-carousel .listing-card-container-nl .listing-card-nl .details-sidebar-col-nl {
		padding: 10px 15px !important;
	}
	/* Une seule carte par vue : plus besoin de reserver deux lignes de titre
	   pour aligner des voisines. */
	.elementor-widget-listeo-listings-carousel .listing-title-nl {
		font-size: 16px !important;
		line-height: 21px !important;
		min-height: 0;
	}
	.elementor-widget-listeo-listings-carousel .fw-carousel-item {
		padding: 0 6px;
	}
}

/* --------------------------------------------------------------------------
   18. PAGE ANNONCES - VUE LISTE

   Listeo pilote cette carte avec des REQUETES DE CONTENEUR, pas des media
   queries : .listing-card-container-nl porte "container-type: inline-size",
   et le theme empile le contenu des que le conteneur passe sous 800 px.

       @container (max-width: 800px) { ... .listing-details-nl { flex-direction: column } }

   En vue grille, "container-type: normal" desactive ces requetes : elles ne
   jouent jamais. En vue liste elles sont actives, et la colonne de resultats
   du gabarit split ne fait que 760 px. La requete se declenche donc en
   permanence : le bloc de description et la colonne prix s'empilent sous la
   photo au lieu de se ranger a cote, et le plafond "max-height: 320px" pose
   par le theme rogne ce qui depasse - d'ou les chevauchements.

   Mesure du rejeu local avant correction, a 1440 px :
       conteneur 760 px, flex-direction: column, la colonne prix commence
       sous la colonne principale (y 225 contre 1), carte plafonnee a 320 px.
   Apres :
       flex-direction: row, colonne prix a droite (x 931), carte 200 px,
       aucun debordement.

   Les requetes de conteneur ne se "decommandent" pas : on ne peut que
   surcharger leurs declarations. D'ou les !important ci-dessous, qui ne sont
   pas de la paresse mais le seul levier disponible.

   Portee : uniquement la vue liste du gabarit split. La grille, la vue
   compacte et le carrousel d'accueil ne sont pas touches.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {

	/* Le plafond de hauteur du theme, combine a notre overflow:hidden de la
	   section 9.4, coupait le prix sur les annonces a description longue. */
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-card-nl {
		max-height: none !important;
		min-height: 200px;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-details-nl {
		flex-direction: row !important;
		align-items: stretch !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-image-container-nl {
		width: 30% !important;
		max-width: 290px !important;
		min-width: 210px !important;
		min-height: 190px !important;
		height: auto !important;
		border-radius: 0 !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-main-col-nl {
		padding: 20px 22px !important;
		justify-content: center;
		min-width: 0;
	}

	/* Un filet vertical separe le prix de la description : en vue liste un
	   filet horizontal couperait la carte en deux dans le mauvais sens. */
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-sidebar-col-nl {
		flex: 0 0 168px !important;
		width: 168px !important;
		max-width: 168px !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		justify-content: space-between !important;
		border-top: 0 !important;
		border-left: 1px solid var(--drv-border) !important;
		padding: 20px 22px !important;
		zoom: 1;
	}
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-sidebar-upper-nl {
		align-items: flex-end !important;
		text-align: right;
	}

	/* Titre et extrait bornes : sans cela une annonce bavarde fait une carte
	   deux fois plus haute que sa voisine et la liste perd son rythme. */
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-title-nl {
		font-size: 18px !important;
		line-height: 24px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-excerpt-nl {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 10px 0 0 !important;
		color: var(--drv-muted) !important;
	}
}

/* --------------------------------------------------------------------------
   19. MOBILE - UN SEUL AFFICHAGE : LA GRILLE

   Sur un ecran etroit, la vue liste ne peut pas tenir sa promesse : ranger
   photo, description et prix cote a cote demande de la largeur. Elle retombe
   donc sur une carte empilee, c'est-a-dire exactement la grille, en moins
   propre. Proposer le choix revient a exposer une mise en page degradee.

   On retire donc le selecteur sous 992 px. Et comme la preference d'affichage
   suit le visiteur d'un ecran a l'autre, celui qui a choisi la liste sur
   ordinateur arriverait sur mobile avec un conteneur en mode liste : on le
   fait rendre exactement comme la grille, en CSS, sans dependre du script.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

	.drv-layout-switcher,
	.layout-switcher {
		display: none !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-card-nl {
		flex-direction: column !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-image-container-nl {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 200px !important;
		min-height: 200px !important;
		border-radius: 0 !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .listing-details-nl {
		flex-direction: column !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-main-col-nl {
		padding: 16px 18px !important;
	}

	/* Le filet redevient horizontal : en colonne, un filet vertical n'a plus
	   rien a separer. */
	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-sidebar-col-nl {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		border-left: 0 !important;
		border-top: 1px solid var(--drv-border) !important;
		padding: 12px 18px !important;
	}

	.grid_sidebar-archive-listings-layout #listeo-listings-container:not(.new-grid-layout-nl):not([data-style="compact"]) .details-sidebar-upper-nl {
		align-items: flex-start !important;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   20. PAGE ANNONCES - GRILLE A TROIS CARTES

   La grille tenait en deux colonnes de 337 px, avec des cartes de 564 px de
   haut : une seule rangee remplissait l'ecran. Trop peu d'annonces embrassees
   d'un coup d'oeil pour une place de marche.

   Le nombre de colonnes etait laisse a "auto-fill, minmax(310px, 1fr)", donc
   dependant de la largeur exacte de la colonne de resultats - qui varie avec
   le gabarit et les reglages du filtre lateral. On fixe donc trois colonnes
   explicitement : le resultat ne depend plus d'un calcul de place.

   La photo est ce qui pesait : 250 px de haut pour une carte de 225 px de
   large. Elle passe a 148 px, et l'extrait disparait - a cette largeur il ne
   se lit pas, il allonge. Restent la photo, le titre, le lieu, les attributs
   et le prix : ce qui decide d'un clic.

   Mesure du rejeu local, colonne de 760 px :
       avant  2 par rangee, carte 337 x 564
       apres  3 par rangee, carte 225 x 299

   Le titre reserve deux lignes : sans cela une annonce a titre court et une a
   titre long desalignent le lieu, les attributs et le prix de toute la rangee.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
	.grid_sidebar-archive-listings-layout #listeo-listings-container.new-grid-layout-nl {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 18px !important;
		padding: 0 24px 36px !important;
	}
}

.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-image-container-nl {
	height: 148px !important;
	min-height: 148px !important;
	max-height: 148px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .details-main-col-nl {
	padding: 14px 15px 12px !important;
	justify-content: flex-start !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .details-sidebar-col-nl {
	padding: 10px 15px !important;
	height: auto !important;
	zoom: 1 !important;
	border-top: 1px solid var(--drv-border) !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-title-nl {
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
	color: var(--drv-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-location-nl {
	font-size: 12.5px !important;
	line-height: 17px !important;
	color: var(--drv-muted) !important;
	margin: 5px 0 0 !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-excerpt-nl {
	display: none !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-features-nl {
	margin-top: 8px !important;
	font-size: 11.5px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .price-nl {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--drv-navy) !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .rating-text-nl {
	font-size: 12px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-badges-nl {
	margin-bottom: 7px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-category-tag-nl {
	font-size: 11px !important;
	padding: 4px 9px !important;
}

/* Sous 993 px la grille reprend la main d'elle-meme : deux colonnes, puis une
   seule sous 480 px. La photo peut alors respirer. */
@media (max-width: 992px) {
	.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-image-container-nl {
		height: 190px !important;
		min-height: 190px !important;
		max-height: 190px !important;
	}
	.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-title-nl {
		font-size: 16px !important;
		line-height: 21px !important;
		min-height: 42px;
	}
}

/* --------------------------------------------------------------------------
   21. GRILLE - L'ESSENTIEL, ET RIEN DE PLUS

   La carte ne doit porter que ce qui decide d'un clic : la photo, le titre,
   le lieu, deux attributs et le prix. Tout le reste appartient a la fiche.

   Deux attributs au maximum, et sur une seule ligne : au-dela, la rangee
   passe sur deux lignes et fait grandir toute la grille, puisque les cartes
   d'une meme rangee s'alignent sur la plus haute. C'est la regle qui tient
   la hauteur, plus que le grignotage des marges.

   Un bloc vide ne doit pas laisser sa marge derriere lui : les selecteurs
   :empty evitent les trous sur les annonces sans badge ni attribut.

   Le titre garde deux lignes. C'est lui, la description essentielle : sur une
   annonce automobile ou immobiliere, l'annee, le kilometrage ou la surface
   tiennent sur la seconde ligne. Le passer a une ligne ferait gagner 18 px
   supplementaires, au prix de ces informations - arbitrage laisse a Said.

   Mesure du rejeu local, carte de 225 px de large :
       564 px a l'origine, 299 px apres la mise en trois colonnes,
       281 px ici. Photo inchangee a 148 px, comme demande.
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .details-main-col-nl {
	padding: 12px 15px 10px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .details-sidebar-col-nl {
	padding: 7px 15px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-title-nl {
	font-size: 14px !important;
	line-height: 18px !important;
	min-height: 36px;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-location-nl {
	font-size: 12px !important;
	line-height: 15px !important;
	margin: 4px 0 0 !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-features-nl {
	margin-top: 6px !important;
	font-size: 11px !important;
	line-height: 15px !important;
	flex-wrap: nowrap !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-features-nl > *:nth-child(n+3) {
	display: none !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-badges-nl:empty,
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-features-nl:empty,
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-amenities-nl:empty {
	display: none !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .rating-text-nl {
	font-size: 11.5px !important;
}
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .price-nl {
	font-size: 14.5px !important;
	line-height: 18px !important;
}

/* --------------------------------------------------------------------------
   22. CARTES - RELIEF

   Trois cartes compactes sur un fond clair se distinguaient mal : la bordure
   #DCE0E6 et l'ombre a 4 % disparaissaient a l'oeil. Le constat est juste.

   La reponse retenue n'est pas une bordure plus epaisse. A cette taille, un
   trait de 2 px se lit comme une case de tableau et entre en concurrence avec
   l'ombre : les deux se brouillent. On garde donc un filet d'un pixel, mais
   d'un cran plus soutenu (n-300), et on donne a l'ombre le travail de
   detacher la carte :

       - une ombre de contact courte, qui pose la carte sur le fond ;
       - une ombre portee large et tres diluee, qui la souleve.

   C'est la combinaison qu'emploient les interfaces de reference : un filet
   net et une ombre douce, jamais un cadre epais.

   Au survol, la bordure passe au bleu clair de la rampe : la carte ne fait
   pas que se soulever, elle se designe.
   -------------------------------------------------------------------------- */
.listing-card-nl {
	border: 1px solid var(--drv-n-300) !important;
	box-shadow:
		0 1px 2px rgba(14, 30, 53, 0.06),
		0 8px 20px -8px rgba(14, 30, 53, 0.12) !important;
}

.listing-card-container-nl:hover .listing-card-nl {
	border-color: var(--drv-blue-300) !important;
	box-shadow:
		0 2px 4px rgba(14, 30, 53, 0.08),
		0 18px 36px -14px rgba(14, 30, 53, 0.20) !important;
}

/* Dans le carrousel de l'accueil les cartes glissent : une ombre trop large
   baverait sur la voisine au moment du defilement. */
.elementor-widget-listeo-listings-carousel .listing-card-nl {
	box-shadow:
		0 1px 2px rgba(14, 30, 53, 0.06),
		0 6px 16px -8px rgba(14, 30, 53, 0.10) !important;
}

/* --------------------------------------------------------------------------
   23. PAGE ANNONCES - LE SOL

   Une carte blanche sur une page blanche n'a rien qui l'en separe : le seul
   recours est d'epaissir son contour jusqu'a ce qu'on la voie, et on repare
   alors un manque de fond par un exces de trait. C'est ce qui donne l'effet
   catalogue.

   On pose donc un sol. La zone de resultats prend la marche neutre-50 de la
   rampe - deja le fond de la section 3 de l'accueil, donc rien de nouveau
   dans le systeme - et la colonne de filtres reste blanche. La separation
   entre "les filtres" et "les annonces" se fait alors sans une seule bordure.

   Le blanc de la carte devient une information : du papier pose sur une
   table. L'ombre peut redescendre d'un cran, elle n'a plus tout le travail.

   Le fond est pose sur la rangee entiere, pas sur la colonne de resultats :
   celle-ci s'arrete avec son contenu et laisserait une bande blanche en bas
   de page sur les recherches a peu de resultats.
   -------------------------------------------------------------------------- */
body.grid_sidebar-archive-listings-layout .full-page-jobs {
	/* neutre-100 et non neutre-50 : le theme posait deja un blanc casse
	   (#fafafa, #f9f9f9) sur cette zone. Un sol qui ne se distingue pas
	   du precedent ne separe rien. */
	background-color: var(--drv-n-100);
}

body.grid_sidebar-archive-listings-layout .full-page-sidebar {
	background-color: var(--drv-white);
	border-right: 1px solid var(--drv-n-200);
}

@media (max-width: 992px) {
	/* En colonne unique, un filet a droite n'a plus rien a separer. */
	body.grid_sidebar-archive-listings-layout .full-page-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--drv-n-200);
	}
}

/* L'ombre redescend : le sol fait desormais la separation. */
body.grid_sidebar-archive-listings-layout .listing-card-nl {
	box-shadow:
		0 1px 2px rgba(14, 30, 53, 0.05),
		0 4px 12px -6px rgba(14, 30, 53, 0.08) !important;
}
body.grid_sidebar-archive-listings-layout .listing-card-container-nl:hover .listing-card-nl {
	box-shadow:
		0 2px 4px rgba(14, 30, 53, 0.07),
		0 14px 28px -12px rgba(14, 30, 53, 0.16) !important;
}

/* --------------------------------------------------------------------------
   24. LE SOL, AU BON ETAGE - ET L'ETIQUETTE DE CATEGORIE

   La teinte posee en section 23 sur .full-page-jobs ne se voyait pas : la
   chaine reelle est

       #wrapper > .full-page-container.full-page-jobs
                > .full-page-content-container
                > .full-page-content-inner
                > .full-page-job-listings-container
                > #listeo-listings-container

   et l'un des etages intermediaires repeint en blanc par-dessus. Un fond pose
   trop haut dans l'arbre est masque par le premier descendant opaque : c'est
   pour cela que la page restait blanche alors que la regle etait bien servie.

   On pose donc la teinte sur la colonne de resultats elle-meme, et on rend
   transparents les deux etages qui la recouvraient.

   24.2 : l'etiquette de categorie deborde de la photo - elle affiche le
   chemin complet ("Art, Luxe & Collection, Montres & Joaillerie") et sortait
   du cadre sur toutes les cartes. On la borne, en lui laissant la place du
   bouton favori.
   -------------------------------------------------------------------------- */
body.grid_sidebar-archive-listings-layout .full-page-content-container {
	background-color: var(--drv-n-100) !important;
}
body.grid_sidebar-archive-listings-layout .full-page-content-inner,
body.grid_sidebar-archive-listings-layout .full-page-job-listings-container {
	background: transparent !important;
}

/* L'etiquette ne doit jamais sortir de la photo. Le bouton favori occupe le
   coin droit : on lui reserve sa place plutot que de laisser les deux se
   chevaucher. */
.listing-card-nl .listing-category-tag-nl {
	display: inline-block;
	max-width: calc(100% - 56px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}

/* --------------------------------------------------------------------------
   25. GRILLE - LA RANGEE DE PICTOGRAMMES D'EQUIPEMENTS

   Sous les attributs, la carte affichait encore quatre pictogrammes gris :
   acces handicape, climatisation, couverts, wifi... A 225 px de large et sans
   libelle, ils ne se lisent pas. Le visiteur voit quatre petites formes
   identiques d'une annonce a l'autre, qui ne l'aident pas a choisir et qui
   ajoutent une ligne a chaque carte.

   C'est le dernier element non essentiel de la carte : il appartient a la
   fiche, ou il a la place d'etre legende. En vue liste il reste, la carte y
   est assez large pour le porter.
   -------------------------------------------------------------------------- */
.grid_sidebar-archive-listings-layout .new-grid-layout-nl .listing-amenities-nl {
	display: none !important;
}

/* --------------------------------------------------------------------------
   26. SECTION DES OFFRES - L'ETAT VIDE

   Tant qu'aucune offre n'est publiee, cette section affiche un message a la
   place d'une grille. Un etat vide n'est pas un accident a cacher : c'est un
   ecran a part entiere, et il se dessine. Laisse brut, il ressemble a une
   panne ; mis en forme, il dit que la plateforme est prete et qu'elle attend
   ses premieres offres.
   -------------------------------------------------------------------------- */
.listeo-coupons-no-results {
	max-width: 620px;
	margin: 8px auto 40px !important;
	padding: 34px 32px !important;
	border: 1px dashed var(--drv-blue-200);
	border-radius: var(--drv-radius);
	background: var(--drv-blue-25);
	color: var(--drv-text);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

/* La barre d'onglets ne sert a rien quand il n'y a rien a filtrer. */
.coupons-container:has(.listeo-coupons-no-results) .coupons-nav-item {
	display: none !important;
}

/* ============================================================
   27. SECTION 6 - LECTURE COMPLETE DE CHAQUE CARTE (PC)
   Les cartes se collent au meme point : une carte n'est
   lisible jusqu'au bout que si sa hauteur tient sous ce point
   de collage. Mesure avant correction : carte de 650 a 715 px
   collee a 150 px, donc 820 a 865 px d'ecran necessaires alors
   qu'un portable en offre 730 a 800 - la fin etait coupee.
   Le collage (96 px) et la hauteur de carte (560 px) sont
   regles cote Elementor ; ici on resserre la typographie pour
   que le contenu tienne avec de la respiration.
   ============================================================ */

@media (min-width: 992px) {
	.elementor-widget-listeo-feature-stack .listeo-feature-stack__card-inner {
		padding: clamp(24px, 2.6vw, 36px) !important;
		gap: clamp(28px, 3.4vw, 48px) !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__content {
		gap: 20px !important;
		padding: 0 !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__content-top {
		gap: 16px !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__content-bottom {
		gap: 18px !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__heading {
		font-size: clamp(26px, 2.6vw, 36px) !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack p.listeo-feature-stack__copy {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	/* L'image remplit toute sa colonne : sa hauteur plancher n'a
	   plus a imposer celle de la carte. */
	.elementor-widget-listeo-feature-stack .listeo-feature-stack__media {
		min-height: 0 !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__card {
		margin-bottom: 20px !important;
	}
}

/* Ecran bas : fenetre reduite, portable 13 pouces. Un cran de plus. */
@media (min-width: 992px) and (max-height: 700px) {
	.elementor-widget-listeo-feature-stack .listeo-feature-stack {
		--lfs-sticky-top: 78px !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__card-inner {
		min-height: min(80vh, 480px) !important;
		padding: 22px !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack__heading {
		font-size: clamp(24px, 2.2vw, 30px) !important;
	}

	.elementor-widget-listeo-feature-stack .listeo-feature-stack p.listeo-feature-stack__copy {
		font-size: 15px !important;
	}
}

/* ============================================================
   28. SECTION 7 - LIGNE DE COUVERTURE DU VISITEUR
   Sous le chapeau, une ligne nomme trois zones du pays d'ou
   vient le visiteur : « En Allemagne : Bavière, Berlin,
   Rhénanie-du-Nord-Westphalie et 82 autres zones déjà
   cartographiées. » Elle est ecrite par le navigateur apres
   reponse de la route REST : servie vide, elle reste masquee
   si la detection echoue, et n'interfere donc jamais avec le
   cache de page.
   ============================================================ */

.drv-zones {
	max-width: 760px;
	margin: 16px auto 0;
	color: var(--drv-muted);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

.drv-zones-lien {
	border-bottom: 1px solid var(--drv-blue-200);
	color: var(--drv-blue-700);
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.drv-zones-lien:hover,
.drv-zones-lien:focus {
	border-bottom-color: var(--drv-blue-600);
	color: var(--drv-blue-800);
}

@media (max-width: 767px) {
	.drv-zones {
		padding: 0 18px;
		font-size: 14px;
	}
}


/* ============================================================
   29. SECTION 7 - CARTES DE SECTEUR
   Sept cartes concretes, une par sous-categorie reellement
   pourvue en annonces. L'icone de la categorie est posee en
   filigrane dans l'angle : elle signe la carte sans voler la
   place du texte.
   ============================================================ */

.elementor-element-d7trs03 .carousel-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--drv-n-200);
	box-shadow: 0 1px 2px rgba(14, 30, 53, .05), 0 10px 26px -12px rgba(14, 30, 53, .16);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.elementor-element-d7trs03 .carousel-card:hover {
	border-color: var(--drv-blue-300);
	box-shadow: 0 1px 2px rgba(14, 30, 53, .06), 0 18px 38px -14px rgba(14, 30, 53, .24);
	transform: translateY(-4px);
}

.drv-secteur-icone {
	position: absolute;
	z-index: 0;
	top: -14px;
	right: -10px;
	color: var(--drv-blue-100);
	font-size: 96px;
	line-height: 1;
	pointer-events: none;
}

.elementor-element-d7trs03 .carousel-card > *:not(.drv-secteur-icone) {
	position: relative;
	z-index: 1;
}

/* ============================================================
   30. SECTION 8 - GRILLE DU BLOG SUR QUATRE COLONNES
   Le widget de Listeo sort du Bootstrap en
   .listeo-post-grid-wrapper > .row > .col-md-4, donc trois
   cartes par rangee et la quatrieme seule en dessous.
   On repasse la rangee en grille CSS a quatre colonnes.

   PIEGE : Bootstrap pose un clearfix sur .row au moyen de
   ::before et ::after. Dans un conteneur en display:grid, ces
   deux pseudo-elements deviennent des cases a part entiere :
   la premiere case reste vide, les trois premieres cartes
   glissent d'un cran et la quatrieme retombe a la ligne. Il
   faut donc les neutraliser, sinon la grille compte six
   elements au lieu de quatre.
   ============================================================ */

@media (min-width: 992px) {
	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		margin: 0;
	}

	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row::before,
	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row::after {
		display: none;
	}

	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row > .col-md-4 {
		width: 100%;
		max-width: none;
		flex: none;
		padding: 0;
		float: none;
	}

	/* La ligne du bouton « voir le blog » reprend toute la largeur. */
	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row > .col-md-12 {
		grid-column: 1 / -1;
		padding: 0;
		float: none;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-container {
		margin-bottom: 0;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item {
		height: 360px;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-content {
		bottom: 24px;
		padding: 0 24px;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-content h3 {
		font-size: 17px;
		line-height: 25px;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-content span,
	.elementor-widget-listeo-posts-grid .blog-compact-item-content p {
		font-size: 14px;
		line-height: 22px;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-content p {
		margin-top: 5px;
	}
}

/* Tablette : deux cartes par rangee plutot qu'une seule pleine largeur. */
@media (min-width: 768px) and (max-width: 991px) {
	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
		margin: 0;
	}

	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row::before,
	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row::after {
		display: none;
	}

	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row > .col-md-4 {
		width: 100%;
		max-width: none;
		padding: 0;
		float: none;
	}

	.elementor-widget-listeo-posts-grid .listeo-post-grid-wrapper > .row > .col-md-12 {
		grid-column: 1 / -1;
		padding: 0;
		float: none;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item-container {
		margin-bottom: 0;
	}

	.elementor-widget-listeo-posts-grid .blog-compact-item {
		height: 380px;
	}
}

/* Mobile : une carte par rangee, un peu plus basse qu'a l'origine. */
@media (max-width: 767px) {
	.elementor-widget-listeo-posts-grid .blog-compact-item {
		height: 320px;
	}
}

/* ==========================================================================
   31. Section 9 — double appel a l'action (d7cta)
   ========================================================================== */

.elementor-element-d7cta01 {
	position: relative;
}

/* Filet haut : marque la rupture avec la section precedente sans widget. */
.elementor-element-d7cta01::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--drv-blue-600) 0%, var(--drv-blue-800) 50%, var(--drv-navy) 100%);
	content: "";
	z-index: 2;
}

.elementor-element-d7cta01b,
.elementor-element-d7cta01c {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px) !important;
}

/* Halo : la lumiere vient de la jointure, ce qui relie les deux panneaux. */
.elementor-element-d7cta01c::after {
	position: absolute;
	top: -40%;
	left: -18%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(28, 101, 200, .38) 0%, rgba(28, 101, 200, 0) 70%);
	content: "";
	pointer-events: none;
}

/* Les deux colonnes occupent toute la hauteur : les deux boutons se posent
   alors sur la meme ligne, quelle que soit la longueur des textes. */
.elementor-element-d7cta01b > .e-con-inner,
.elementor-element-d7cta01c > .e-con-inner {
	flex-grow: 1;
}

.drv-cta-kicker {
	margin-bottom: 14px;
}
.drv-cta-kicker .elementor-heading-title {
	color: var(--drv-blue-700);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-transform: uppercase;
}
.elementor-element-d7cta01c .drv-cta-kicker .elementor-heading-title {
	color: #8FB6EE;
}

.elementor-element-d7cta02 .elementor-heading-title,
.elementor-element-d7cta05 .elementor-heading-title {
	max-width: 22ch;
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 500;
	line-height: 1.16;
}

.drv-cta-texte {
	max-width: 46ch;
	margin-top: 16px;
	color: var(--drv-text);
	font-size: 16px;
	line-height: 1.65;
}
.elementor-element-d7cta01c .drv-cta-texte {
	color: #C9DCF9;
}
.drv-cta-texte p {
	margin: 0;
}

.drv-cta-points {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.drv-cta-points li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
}
/* Coche dessinee en CSS : aucune dependance a une police d'icones. */
.drv-cta-points li::before {
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--drv-blue-100);
	content: "";
}
.drv-cta-points li::after {
	position: absolute;
	top: 7px;
	left: 6px;
	width: 5px;
	height: 9px;
	border: solid var(--drv-blue-700);
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}
.elementor-element-d7cta01c .drv-cta-points li::before {
	background: rgba(255, 255, 255, .12);
}
.elementor-element-d7cta01c .drv-cta-points li::after {
	border-color: #8FB6EE;
}

.elementor-element-d7cta04,
.elementor-element-d7cta07 {
	margin-top: auto;
	padding-top: 28px;
}
.elementor-element-d7cta04 .elementor-button,
.elementor-element-d7cta07 .elementor-button {
	padding: 15px 28px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}
.elementor-element-d7cta04 .elementor-button {
	box-shadow: 0 10px 24px -12px rgba(9, 78, 166, .55);
}
.elementor-element-d7cta07 .elementor-button {
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}
.elementor-element-d7cta04 .elementor-button:hover,
.elementor-element-d7cta07 .elementor-button:hover {
	transform: translateY(-2px);
}

.drv-cta-lien-secondaire {
	margin-top: 14px;
	color: var(--drv-muted);
	font-size: 14px;
	line-height: 1.5;
}
.drv-cta-lien-secondaire p {
	margin: 0;
}
.drv-cta-lien-secondaire a {
	padding-bottom: 1px;
	border-bottom: 1px solid var(--drv-blue-200);
	color: var(--drv-blue-700);
}
.drv-cta-lien-secondaire a:hover {
	border-bottom-color: var(--drv-blue-700);
}
.elementor-element-d7cta01c .drv-cta-lien-secondaire {
	color: #9FBDE8;
}
.elementor-element-d7cta01c .drv-cta-lien-secondaire a {
	border-bottom-color: rgba(255, 255, 255, .32);
	color: #C9DCF9;
}
.elementor-element-d7cta01c .drv-cta-lien-secondaire a:hover {
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
}

@media (max-width: 991px) {
	.elementor-element-d7cta04,
	.elementor-element-d7cta07 {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.elementor-element-d7cta02 .elementor-heading-title,
	.elementor-element-d7cta05 .elementor-heading-title {
		max-width: none;
		font-size: 24px;
	}
	.elementor-element-d7cta01c::after {
		display: none;
	}
}

/* ==========================================================================
   32. Pied de page — marine profond, quatre colonnes
   --------------------------------------------------------------------------
   Le fond est un cran plus sombre que le marine de l'appel a l'action qui le
   precede (#0F1E3D) : sans cela les deux blocs se confondent et la page ne se
   ferme pas. Les regles portent sur #footer quel que soit son modificateur
   (light / dark), pour ne dependre d'aucun reglage de page.
   ========================================================================== */

#footer,
#footer.light,
#footer.dark {
	position: relative;
	background: #0B1730 !important;
	background-image: none !important;
	color: #9FB3D1;
}

#footer::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--drv-blue-600) 0%, var(--drv-blue-800) 55%, #0B1730 100%);
	content: "";
}

#footer > .container {
	padding-top: clamp(44px, 5vw, 66px);
	padding-bottom: 0;
}

#footer .footer-widget {
	margin-bottom: 34px;
}

#footer h4,
#footer .footer-widget h4 {
	margin: 0 0 20px;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

#footer .footer-widget ul.menu,
#footer .footer-widget .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer .footer-widget .menu li {
	margin: 0 0 11px;
	padding: 0;
	border: 0;
	list-style: none;
}
#footer .footer-widget .menu li::before {
	content: none;
}
#footer .footer-widget .menu li a {
	display: inline-block;
	padding: 0;
	border: 0;
	color: #9FB3D1;
	font-size: 14.5px;
	line-height: 1.45;
	transition: color .15s ease;
}
#footer .footer-widget .menu li a:hover {
	color: #FFFFFF;
}

/* --- Colonne d'identite --- */
#footer .widget_media_image {
	margin-bottom: 18px;
}
#footer .widget_media_image img {
	width: auto;
	max-width: 215px;
	height: auto;
	margin: 0;
}

.drv-footer-baseline {
	max-width: 34ch;
	margin: 0 0 14px;
	color: #9FB3D1;
	font-size: 14.5px;
	line-height: 1.65;
}
.drv-footer-contact {
	margin: 0;
	font-size: 14.5px;
}
.drv-footer-contact a {
	padding-bottom: 1px;
	border-bottom: 1px solid rgba(255, 255, 255, .26);
	color: #C9DCF9;
}
.drv-footer-contact a:hover {
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
}

/* --- Barre basse ---
   Listeo passe le texte de la barre dans wp_kses : seuls a, br, em et strong
   survivent. La mise en page ne peut donc pas reposer sur des paragraphes. */
#footer .footer-new-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	margin-top: 6px;
	padding: 22px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, .10);
}
#footer .footer-new-bottom-left {
	color: #7E93B4;
	font-size: 13.5px;
	line-height: 2;
}
#footer .footer-new-bottom-left a {
	margin: 0 2px;
	color: #9FB3D1;
	font-size: 13.5px;
}
#footer .footer-new-bottom-left a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
#footer .new-footer-social-icons {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer .new-footer-social-icons a {
	color: #9FB3D1;
}
#footer .new-footer-social-icons a:hover {
	color: #FFFFFF;
}

@media (max-width: 991px) {
	#footer .footer-widget {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	#footer > .container {
		padding-top: 40px;
	}
	#footer .footer-new-bottom-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}
	.drv-footer-baseline {
		max-width: none;
	}
}

/* ==========================================================================
   33. Logo v5 — tailles
   --------------------------------------------------------------------------
   Le verrouillage v5 comporte une signature sous le filet : a hauteur egale,
   les capitales sont plus petites que sur le v4. On compense de six pixels.
   ========================================================================== */

#header-container #logo img {
	max-height: 52px !important;
	max-width: 250px !important;
}

#header-container.cloned #logo img,
#header-container.fixed.dashboard #logo img {
	max-height: 42px !important;
	max-width: 235px !important;
}

@media (max-width: 1024px) {
	#header-container #logo img {
		max-height: 42px !important;
	}
}

/* ==========================================================================
   34. Surfaces, cartes et elevations de la page d'accueil
   --------------------------------------------------------------------------
   Avant ce bloc, chaque widget Listeo apportait son propre systeme : rayons de
   5, 6, 12, 16 et 20 px, trois formules d'ombre differentes dont une teintee
   au gris neutre, des bordures presentes ici et absentes la, et un rythme
   vertical de 0, 50, 60 et 70 px selon la section. Une page premium se
   reconnait moins a la qualite d'une carte qu'a la constance de toutes.

   Le systeme tient en trois grandeurs : un rayon, deux elevations, une
   bordure. Tout le reste en decoule.

   Exception assumee : les 18 pastilles de secteurs (section 2) restent sans
   cadre — dix-huit rectangles bordes alignes font catalogue, pas plateforme.
   Decision documentee dans claude/accueil-secteurs-carrousel-drivat.md.
   ========================================================================== */

:root {
	/* Rythme vertical unique pour toutes les bandes de l'accueil. */
	--drv-band: clamp(56px, 6vw, 88px);

	/* Un seul rayon pour les cartes, un pour les elements internes. */
	--drv-r-lg: 16px;
	--drv-r-md: 12px;
	--drv-r-sm: 10px;

	/* Deux elevations, teintees au navy de marque : une au repos, une au
	   survol. Aucune troisieme valeur n'est autorisee. */
	--drv-elev-0: 0 1px 2px rgba(14, 30, 53, .05);
	--drv-elev-1: 0 1px 2px rgba(14, 30, 53, .05), 0 8px 20px -12px rgba(14, 30, 53, .14);
	--drv-elev-2: 0 2px 4px rgba(14, 30, 53, .07), 0 18px 36px -16px rgba(14, 30, 53, .20);

	--drv-ease-card: 200ms cubic-bezier(.22, .61, .25, 1);
}

/* --------------------------------------------------------------------------
   34.1 Rythme vertical et fonds
   Les sections alternent blanc et gris tres pale. L'alternance existait deja,
   mais avec quatre rembourrages differents : c'est le rembourrage, pas la
   couleur, qui donnait l'impression de bricolage.
   -------------------------------------------------------------------------- */

.elementor-element-d7cat01,
.elementor-element-d7lst01,
.elementor-element-d7off01,
.elementor-element-d7pro01,
.elementor-element-d7fst01,
.elementor-element-d7trs01 {
	padding-top: var(--drv-band) !important;
	padding-bottom: var(--drv-band) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Le blog est decoupe en deux sections Elementor (titre puis grille) :
   la bande se referme sur la seconde. */
.elementor-element-d7blg01 {
	padding-top: var(--drv-band) !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}
.elementor-element-d7blg04 {
	padding-top: 0 !important;
	padding-bottom: var(--drv-band) !important;
	margin: 0 !important;
}

/* Bandes claires. */
.elementor-element-d7cat01,
.elementor-element-d7off01,
.elementor-element-d7fst01,
.elementor-element-d7blg01,
.elementor-element-d7blg04 {
	background-color: #FFFFFF;
}

/* Bandes posees. */
.elementor-element-d7lst01,
.elementor-element-d7pro01,
.elementor-element-d7trs01 {
	background-color: var(--drv-n-50) !important;
}

/* --------------------------------------------------------------------------
   34.2 Section 3 — cartes d'annonces
   -------------------------------------------------------------------------- */

.elementor-widget-listeo-listings-carousel .listing-card-nl {
	border: 1px solid var(--drv-n-200) !important;
	border-radius: var(--drv-r-lg) !important;
	box-shadow: var(--drv-elev-1) !important;
	transition: transform var(--drv-ease-card), box-shadow var(--drv-ease-card), border-color var(--drv-ease-card) !important;
}
.elementor-widget-listeo-listings-carousel .listing-card-container-nl:hover .listing-card-nl {
	transform: translateY(-3px);
	border-color: var(--drv-blue-200) !important;
	box-shadow: var(--drv-elev-2) !important;
}
.elementor-widget-listeo-listings-carousel .listing-image-container-nl {
	border-radius: calc(var(--drv-r-lg) - 1px) calc(var(--drv-r-lg) - 1px) 0 0 !important;
}

/* --------------------------------------------------------------------------
   34.3 Section 4 — offres : l'etat vide devient un panneau, pas un orphelin
   -------------------------------------------------------------------------- */

.elementor-widget-listeo-coupons-display .listeo-coupons-no-results {
	max-width: 680px;
	margin: 8px auto 0;
	padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 40px);
	border: 1px solid var(--drv-n-200);
	border-radius: var(--drv-r-lg);
	background: var(--drv-n-25, #FAFBFD);
	box-shadow: var(--drv-elev-0);
	text-align: center;
}
.elementor-widget-listeo-coupons-display .listeo-coupons-no-results p {
	margin: 0;
	color: var(--drv-muted);
	font-size: 15.5px;
	line-height: 1.65;
}
.elementor-widget-listeo-coupons-display .coupons-nav-item {
	border-radius: var(--drv-r-sm);
}

/* --------------------------------------------------------------------------
   34.4 Section 5 — cartes « pourquoi Drivat »
   L'ombre d'origine (rgb(17 17 17 / 7%)) etait teintee au gris neutre : seule
   ombre de la page a ne pas suivre le navy de marque.
   -------------------------------------------------------------------------- */

.elementor-widget-listeo-animated-icon-boxes .listeo-animated-icon-boxes__card {
	border: 1px solid var(--drv-n-200);
	border-radius: var(--drv-r-lg);
	background: #FFFFFF;
	box-shadow: var(--drv-elev-1);
}
.elementor-widget-listeo-animated-icon-boxes .listeo-animated-icon-boxes__card:hover {
	border-color: var(--drv-blue-200);
	box-shadow: var(--drv-elev-2);
}

/* --------------------------------------------------------------------------
   34.5 Section 6 — pile de fonctionnalites
   Le plugin impose border-radius: 12px !important sur la carte.
   -------------------------------------------------------------------------- */

.elementor-widget-listeo-feature-stack .listeo-feature-stack__card {
	border-radius: var(--drv-r-lg) !important;
	box-shadow: var(--drv-elev-1);
}
.elementor-widget-listeo-feature-stack .listeo-feature-stack__card-inner {
	border: 1px solid var(--drv-n-200);
	border-radius: var(--drv-r-lg);
}
.elementor-widget-listeo-feature-stack .listeo-feature-stack__media {
	border-radius: var(--drv-r-md);
}

/* --------------------------------------------------------------------------
   34.6 Section 7 — cartes de secteurs
   Le widget expose son propre jeton de rayon : on le branche sur le systeme
   plutot que de le surcharger.
   -------------------------------------------------------------------------- */

.elementor-element-d7trs03 {
	--carousel-radius: var(--drv-r-lg);
}
.elementor-element-d7trs03 .carousel-card {
	border: 1px solid var(--drv-n-200);
	border-radius: var(--drv-r-lg);
	box-shadow: var(--drv-elev-1);
	transition: transform var(--drv-ease-card), box-shadow var(--drv-ease-card), border-color var(--drv-ease-card);
}
.elementor-element-d7trs03 .carousel-card:hover {
	border-color: var(--drv-blue-200);
	box-shadow: var(--drv-elev-2);
}

/* --------------------------------------------------------------------------
   34.7 Section 8 — cartes d'articles
   Cartes photo : une bordure y serait invisible, l'elevation fait le travail.
   -------------------------------------------------------------------------- */

.elementor-widget-listeo-posts-grid .blog-compact-item-container,
.elementor-widget-listeo-posts-grid .blog-compact-item,
.elementor-widget-listeo-posts-grid .blog-compact-item::before,
body .elementor-widget-listeo-posts-grid .blog-compact-item img {
	border-radius: var(--drv-r-lg) !important;
}
.elementor-widget-listeo-posts-grid .blog-compact-item {
	box-shadow: var(--drv-elev-1);
	transition: transform var(--drv-ease-card), box-shadow var(--drv-ease-card);
}
.elementor-widget-listeo-posts-grid .blog-compact-item-container:hover .blog-compact-item {
	transform: translateY(-3px);
	box-shadow: var(--drv-elev-2);
}

/* --------------------------------------------------------------------------
   34.8 Section 9 — appel a l'action
   Les deux panneaux sont pleine largeur : pas de rayon, mais le bouton clair
   reprend le rayon du systeme.
   -------------------------------------------------------------------------- */

.elementor-element-d7cta04 .elementor-button,
.elementor-element-d7cta07 .elementor-button {
	border-radius: var(--drv-r-md) !important;
}

/* --------------------------------------------------------------------------
   34.9 Section 2 — pastilles d'icones : seul le rayon rejoint le systeme
   -------------------------------------------------------------------------- */

.taxonomy-slider-wrapper.no-mobile-carousel .category-small-box i {
	border-radius: var(--drv-r-md);
}

/* --------------------------------------------------------------------------
   34.10 Mobile
   Sous 768 px les cartes occupent presque toute la largeur : un grand rayon
   et une ombre large les feraient flotter. Les trois grandeurs du systeme
   descendent d'un cran, et tout en decoule.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--drv-band: clamp(40px, 9vw, 56px);
		--drv-r-lg: 14px;
		--drv-r-md: 10px;
		--drv-elev-1: 0 1px 2px rgba(14, 30, 53, .05), 0 6px 14px -10px rgba(14, 30, 53, .13);
		--drv-elev-2: 0 2px 4px rgba(14, 30, 53, .07), 0 12px 24px -12px rgba(14, 30, 53, .18);
	}

	/* Au doigt, le survol n'existe pas : la levitation ne doit pas rester
	   collee apres un appui. */
	.elementor-widget-listeo-listings-carousel .listing-card-container-nl:hover .listing-card-nl,
	.elementor-widget-listeo-posts-grid .blog-compact-item-container:hover .blog-compact-item {
		transform: none;
	}

	/* Gouttiere laterale garantie : une carte ne touche jamais le bord. */
	.elementor-element-d7lst01 .listing-card-container-nl,
	.elementor-element-d7trs01 .carousel-card {
		margin-left: 2px;
		margin-right: 2px;
	}

	.elementor-widget-listeo-coupons-display .listeo-coupons-no-results {
		margin-left: 4px;
		margin-right: 4px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--drv-band: clamp(48px, 7vw, 68px);
	}
}

/* ==========================================================================
   35. Hero — bandeau de reassurance et secteurs mis en avant
   --------------------------------------------------------------------------
   Le bandeau est injecte juste apres le formulaire par
   themes/listeo/drivat/hero.php (filtre elementor/widget/render_content) :
   le widget Listeo n'offre aucun champ pour cela, et on ne modifie pas le
   gabarit du plugin, qui serait perdu a la mise a jour.

   Trois affirmations, aucune promesse chiffree : sur une plateforme qui
   demarre, un compteur invente serait la seule chose que le visiteur pourrait
   verifier — et donc la seule qui pourrait le decevoir.
   ========================================================================== */

.drv-hero-reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 30px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.drv-hero-reassurance li {
	position: relative;
	padding-left: 26px;
	color: rgba(255, 255, 255, .88);
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: .1px;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(14, 30, 53, .35);
}

/* Coche dessinee en CSS : aucune dependance a une police d'icones. */
.drv-hero-reassurance li::before {
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	content: "";
}
.drv-hero-reassurance li::after {
	position: absolute;
	top: 5px;
	left: 6px;
	width: 5px;
	height: 9px;
	border: solid var(--drv-blue-300);
	border-width: 0 2px 2px 0;
	content: "";
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Pastilles de secteurs
   Huit pastilles au lieu de quatre : la rangee doit se replier proprement.
   Les libelles sont raccourcis cote PHP (drivat/hero.php) ; ici on ne regle
   que la geometrie.
   -------------------------------------------------------------------------- */

.elementor-main-search-container .main-search-inner .highlighted-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.elementor-main-search-container .main-search-inner .highlighted-category {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 !important;
	padding: 7px 16px !important;
	float: none !important;
}
.elementor-main-search-container .main-search-inner .highlighted-category i {
	float: none !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1 !important;
}
.elementor-main-search-container .main-search-inner .highlighted-category h4 {
	top: 0 !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

@media (max-width: 991px) {
	.drv-hero-reassurance {
		gap: 9px 22px;
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   Mobile : le hero ne doit pas s'allonger
   Une pastille par ligne, c'est ce que donne le nom complet d'une famille :
   « Services professionnels & B2B » depasse 200 px, deux ne tiennent jamais
   cote a cote sur un telephone. Avec les libelles courts et ces metriques,
   les huit pastilles tiennent sur trois lignes.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.drv-hero-reassurance {
		gap: 8px 16px;
		margin-top: 18px;
	}
	.drv-hero-reassurance li {
		padding-left: 22px;
		font-size: 13px;
	}
	.drv-hero-reassurance li::before {
		width: 16px;
		height: 16px;
	}
	.drv-hero-reassurance li::after {
		top: 4px;
		left: 5px;
		width: 4px;
		height: 8px;
	}

	.elementor-main-search-container .highlighted-categories-headline {
		margin: 26px 0 12px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-categories {
		gap: 7px;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category {
		gap: 6px;
		padding: 6px 12px !important;
		border-radius: 12px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category i {
		font-size: 12.5px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category h4 {
		font-size: 12.5px !important;
	}
}

@media (max-width: 360px) {
	.elementor-main-search-container .main-search-inner .highlighted-category {
		padding: 5px 10px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category h4 {
		font-size: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   35.1 Pastilles : une seule ligne sur ordinateur, trois sur telephone
   Mesure faite en rejouant les regles reelles du theme :
   1366 px → 1 ligne | 768 px → 2 | 414 px → 3 | 390 px → 3 | 360 px → 3.
   Avant les libelles courts, le telephone affichait une pastille par ligne,
   soit huit lignes et un hero deux fois trop haut.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.elementor-main-search-container .main-search-inner .highlighted-categories {
		gap: 10px;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category {
		padding: 7px 14px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category h4 {
		font-size: 13.5px !important;
	}
}

@media (max-width: 375px) {
	.elementor-main-search-container .main-search-inner .highlighted-categories {
		gap: 6px;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category {
		gap: 5px;
		padding: 5px 9px !important;
	}
	.elementor-main-search-container .main-search-inner .highlighted-category i,
	.elementor-main-search-container .main-search-inner .highlighted-category h4 {
		font-size: 11.5px !important;
	}
}

/* --------------------------------------------------------------------------
   35.2 Hero — titre de signature et parcours en quatre temps
   Le titre est desormais une affirmation courte (« L'excellence reunie ») que
   le secteur en rotation vient terminer. Il peut donc grossir : c'est la
   taille qui fait la voix.
   -------------------------------------------------------------------------- */

.elementor-main-search-container .main-search-inner h1 {
	max-width: 21ch;
	font-size: clamp(34px, 4.4vw, 56px) !important;
	line-height: 1.08 !important;
}

.drv-hero-parcours {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.drv-hero-parcours li {
	position: relative;
	color: var(--drv-blue-300);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Puce de separation : elle ne s'affiche pas en debut de ligne apres un
   repli, mais l'ecart suffit a separer les etapes. */
.drv-hero-parcours li + li::before {
	position: absolute;
	top: 50%;
	left: -12px;
	width: 3px;
	height: 3px;
	margin-top: -1px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .38);
	content: "";
}

@media (max-width: 767px) {
	.elementor-main-search-container .main-search-inner h1 {
		max-width: none;
	}
	.drv-hero-parcours {
		gap: 7px 16px;
		margin-top: 14px;
	}
	.drv-hero-parcours li {
		font-size: 11px;
		letter-spacing: .14em;
	}
	.drv-hero-parcours li + li::before {
		left: -10px;
	}
}

/* --------------------------------------------------------------------------
   35.3 Hero — la composition en trois etages
   --------------------------------------------------------------------------
   1. L'affirmation  : « Découvrir l'excellence » + le secteur en rotation
   2. La promesse    : « Explorez, comparez, choisissez »  (h2, greffe)
   3. La preuve      : la ligne de signature                (h3, ex-sous-titre)

   Le parcours en quatre temps (.drv-hero-parcours, section 35.2) n'est plus
   rendu : la promesse le remplace. Ses regles restent en place, sans effet,
   pour pouvoir y revenir sans reecrire quoi que ce soit.
   -------------------------------------------------------------------------- */

.elementor-main-search-container .main-search-inner h1 {
	margin-bottom: 0 !important;
}

.drv-hero-promesse {
	margin: 14px 0 0 !important;
	color: rgba(255, 255, 255, .95);
	font-size: clamp(19px, 2.1vw, 27px) !important;
	font-weight: 400 !important;
	letter-spacing: -.005em;
	line-height: 1.25 !important;
	text-shadow: 0 1px 8px rgba(14, 30, 53, .35);
}

.elementor-main-search-container .main-search-inner h3.drv-hero-chapo {
	max-width: 62ch;
	margin: 12px auto 0 !important;
	color: rgba(255, 255, 255, .8);
	font-size: clamp(15px, 1.15vw, 17px) !important;
	font-weight: 300 !important;
	letter-spacing: 0;
	line-height: 1.6 !important;
	text-transform: none;
}

@media (max-width: 767px) {
	.drv-hero-promesse {
		margin-top: 12px !important;
		font-size: 18px !important;
	}
	.elementor-main-search-container .main-search-inner h3.drv-hero-chapo {
		max-width: none;
		margin-top: 10px !important;
		font-size: 14.5px !important;
	}
}

/* ==========================================================================
   36. Menu — le temps de viser, et la categorie en cours qui se voit
   --------------------------------------------------------------------------
   Le delai de fermeture passe de 0,4 s a 0,9 s pour le mega-menu et 0,75 s
   pour les menus deroulants simples : entre l'intitule et le panneau il y a un
   trou de quelques pixels, et une diagonale un peu large sort de la zone
   sensible. L'ouverture, elle, reste instantanee (delai remis a zero au
   survol).

   Pour les menus deroulants simples, le trou est en plus comble par une
   passerelle transparente : elle appartient au panneau, qui n'a pas
   d'overflow — contrairement au mega-menu, ou un pseudo-element place
   au-dessus de la boite serait rogne par overflow-y: auto.
   ========================================================================== */

#header #navigation.style-1 .mega-menu:not(.mm-panel) {
	transition: opacity .22s ease .9s, visibility .22s ease .9s, transform .22s ease .9s !important;
}

#header #navigation.style-1 > ul > li > ul.sub-menu {
	transition: opacity .22s ease .75s, visibility .22s ease .75s, transform .22s ease .75s !important;
}

#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel),
#header #navigation.style-1 > ul > li:hover > ul.sub-menu {
	transition-delay: 0s !important;
}

/* Passerelle : le trou au-dessus du panneau devient une zone de survol. */
#header #navigation.style-1 > ul > li > ul.sub-menu::before {
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 24px;
	background: transparent;
	content: "";
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   36.1 La categorie en cours
   Sur une archive de categorie, la page est filtree mais rien ne le montrait :
   le menu deroulant affichait « Tous les secteurs » et aucune pastille du
   bandeau n'etait marquee. Voir themes/listeo/drivat/recherche.php.
   -------------------------------------------------------------------------- */

.drilldown-menu.drv-categorie-active .menu-label {
	color: var(--drv-blue-700) !important;
	font-weight: 500 !important;
}

.category-slider .category-item.active,
#categorySlider .category-item.active {
	border-color: var(--drv-blue-300) !important;
	background: var(--drv-blue-50) !important;
}

.category-slider .category-item.active .icon-container,
#categorySlider .category-item.active .icon-container {
	background: var(--drv-blue-600) !important;
}

.category-slider .category-item.active .icon-container i,
#categorySlider .category-item.active .icon-container i {
	color: #FFFFFF !important;
}

.category-slider .category-item.active span,
.category-slider .category-item.active p,
#categorySlider .category-item.active span,
#categorySlider .category-item.active p {
	color: var(--drv-blue-700) !important;
	font-weight: 500 !important;
}


/* ==========================================================================
   37. Menu — le panneau doit rester cliquable pendant qu'il se ferme
   --------------------------------------------------------------------------
   La section 36 retardait la disparition du panneau. Insuffisant, pour deux
   raisons trouvees dans style.css :

     #navigation ul li ul,
     #navigation ul li .mega-menu        { pointer-events: none; }
     #navigation ul li:hover ul,
     #navigation ul li:hover .mega-menu  { pointer-events: all; }

   1. pointer-events ne s'anime pas. Des que la souris quitte l'intitule, le
      panneau devient traversant SUR-LE-CHAMP alors qu'il reste visible 0,9 s.
      Le curseur ne peut donc plus y entrer : le survol n'est jamais repris et
      le panneau finit de disparaitre — d'ou l'impression qu'il « part vite ».
      Pire : un clic pendant cette seconde traverse le panneau visible et
      atterrit sur ce qui se trouve dessous (une pastille de secteur, une
      carte). On croit cliquer sur une sous-categorie, c'est une autre page qui
      s'ouvre.

   2. Les listes internes (#navigation ul li .mega-menu ul) portent leur propre
      visibility: hidden, sans transition : le contenu du panneau disparaissait
      d'un coup pendant que le cadre, lui, s'effacait lentement.

   visibility: hidden suffit a rendre un element non cliquable : laisser
   pointer-events actif en permanence ne capture donc aucun clic fantome une
   fois le panneau ferme.

   Enfin, le panneau ne descend plus de 6 px a l'ouverture — ce decalage
   creait un vrai trou entre l'en-tete et le panneau. Il remonte desormais a sa
   place : meme animation, aucun interstice a traverser.

   Mesure locale, avec les regles reelles du theme, sur un lien du panneau
   pendant la fermeture :
     avant  — element sous le curseur : le contenu de la page ; trou : 6 px
     apres  — element sous le curseur : le lien vise ;        trou : 0 px
   ========================================================================== */

#header #navigation.style-1 .mega-menu:not(.mm-panel),
#header #navigation.style-1 .mega-menu:not(.mm-panel) ul,
#header #navigation.style-1 > ul > li > ul.sub-menu,
#header #navigation.style-1 > ul > li > ul.sub-menu ul {
	pointer-events: auto !important;
}

#header #navigation.style-1 .mega-menu:not(.mm-panel) ul {
	transition: opacity .22s ease .9s, visibility .22s ease .9s !important;
}

#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) ul {
	transition-delay: 0s !important;
}

#header #navigation.style-1 .mega-menu:not(.mm-panel) {
	transform: translate3d(0, -6px, 0) !important;
}

#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) {
	transform: translate3d(0, 0, 0) !important;
}

/* ==========================================================================
   38. Menu — le flottant qui faisait cliquer sur la famille suivante
   --------------------------------------------------------------------------
   Symptome : dans le panneau « Explorer », cliquer sur une sous-categorie de la
   premiere famille d'une colonne ouvrait la DEUXIEME famille ; cliquer dans la
   deuxieme ouvrait la troisieme. La derniere famille de chaque colonne, elle,
   fonctionnait — parce qu'aucune famille ne la suivait.

   Cause : style.css pose

     #navigation ul { float: left; }

   sur TOUTES les listes du menu. Dans le panneau, la section 2 remet bien
   float: none sur la liste de premier niveau et sur ses <li>, mais jamais sur
   la liste des sous-categories. Chaque <ul class="sub-menu"> flottait donc.

   Un flottant sort du flux : le <li> de la famille suivante commencait
   immediatement sous le titre de la precedente, et sa BOITE recouvrait toute
   la hauteur de la liste flottante — 100 px au lieu de 24 — pendant que son
   TEXTE, lui, etait repousse sous le flottant. Le titre de la famille N+1
   recouvrait ainsi les liens de la famille N : c'est lui qui recevait le clic.

   Mesure locale (markup et CSS reels, 67 liens du panneau) :
     avant  — 32 liens sur 67 ouvraient une autre page
     apres  — 0

   Effet de bord bienvenu : les familles d'une meme colonne sont enfin
   correctement espacees. Elles se chevauchaient.
   ========================================================================== */

#header #navigation.style-1 .mega-menu:not(.mm-panel) ul,
#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul,
#header #navigation.style-1 .mega-menu:not(.mm-panel) li {
	float: none !important;
}
/* ==========================================================================
   41. LE PANNEAU NE CAPTE LA SOURIS QUE LORSQU'IL EST OUVERT
   --------------------------------------------------------------------------
   LE DEFAUT CORRIGE ICI

   La section 37 avait pose `pointer-events: auto` sur le panneau et sur toutes
   ses listes, sans condition. C'etait la reponse a un vrai probleme — le
   panneau restait visible mais traversable, et les clics tombaient sur la page
   dessous — mais la reponse etait trop large.

   Listeo cache le panneau ferme avec `visibility: hidden`, ce qui suffit
   normalement a le rendre insensible a la souris. Sauf que la section 4 de
   cette feuille force `visibility: visible` sur les sous-listes du panneau
   (`.mega-menu ul ul`), pour que les colonnes se composent correctement. Une
   fille `visible` dans une mere `hidden` reste, elle, bien rendue et bien
   testee au survol — et `opacity: 0` n'y change rien : l'opacite n'empeche
   jamais le test de survol.

   Resultat mesure, panneau ferme et souris ailleurs : les points situes juste
   sous l'en-tete (400,112 et 700,112) renvoyaient un `LI` du mega-menu. Un
   calque invisible couvrait le haut de chaque page. Le survoler declenchait
   `#navigation ul li:hover`, donc l'ouverture d'Explorer, et interceptait les
   clics destines au hero et aux autres entrees du menu.

   LA REGLE

   Le panneau ne capte la souris que pendant que son entree de menu est
   survolee — ce que Listeo prevoyait, avec une specificite trop faible pour
   passer devant la section 37. Le trajet de l'intitule vers le panneau reste
   continu : le panneau remonte de 6 px sur l'intitule et porte une passerelle
   de 12 px en pseudo-element, donc le survol n'est jamais perdu en chemin —
   c'est ce qui permet de conditionner sans reveiller le defaut d'origine.

   Mesure apres correction : les memes points renvoient la page, et la descente
   de l'intitule jusqu'a un lien de troisieme niveau aboutit toujours.
   ========================================================================== */

#header #navigation.style-1 .mega-menu:not(.mm-panel),
#header #navigation.style-1 .mega-menu:not(.mm-panel) ul,
#header #navigation.style-1 .mega-menu:not(.mm-panel) ul ul,
#header #navigation.style-1 > ul > li > ul.sub-menu,
#header #navigation.style-1 > ul > li > ul.sub-menu ul {
	pointer-events: none !important;
}

#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel),
#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) ul,
#header #navigation.style-1 > ul > li:hover .mega-menu:not(.mm-panel) ul ul,
#header #navigation.style-1 > ul > li:hover > ul.sub-menu,
#header #navigation.style-1 > ul > li:hover > ul.sub-menu ul,
#header #navigation.style-1 > ul > li:focus-within .mega-menu:not(.mm-panel),
#header #navigation.style-1 > ul > li:focus-within .mega-menu:not(.mm-panel) ul,
#header #navigation.style-1 > ul > li:focus-within .mega-menu:not(.mm-panel) ul ul,
#header #navigation.style-1 > ul > li:focus-within > ul.sub-menu,
#header #navigation.style-1 > ul > li:focus-within > ul.sub-menu ul {
	pointer-events: auto !important;
}

/* ==========================================================================
   42. Inscription Drivat : particulier ou societe
   Deux voies dans un seul formulaire. Les champs d entreprise n existent
   visuellement que pour une societe ; le reste du formulaire est celui de
   Listeo, simplement mis aux formes de Drivat.
   ========================================================================== */

/* Le champ de type de compte porte une enveloppe vide quand il sert de titre :
   Listeo rend un h4 puis un label sans contenu. Seul le h4 nous interesse. */
.sign-in-form .drv-enveloppe-titre,
.listeo-registration-form .drv-enveloppe-titre {
	display: none !important;
}

.sign-in-form .listeo_core-registration-separator,
.listeo-registration-form .listeo_core-registration-separator {
	margin: 22px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var(--drv-n-200, #DCE0E6);
	color: var(--drv-n-500, #667181);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sign-in-form .listeo_core-registration-separator:first-child,
.listeo-registration-form .listeo_core-registration-separator:first-child {
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}

.sign-in-form .listeo_core-registration-separator[hidden],
.listeo-registration-form .listeo_core-registration-separator[hidden],
.sign-in-form .drv-champ-societe[hidden],
.listeo-registration-form .drv-champ-societe[hidden] {
	display: none !important;
}

/* Les deux cartes de choix, posees par le script a la place du menu deroulant. */
.drv-cartes-type {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 2px 0 18px;
}

.drv-carte-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 14px 13px;
	border: 1.5px solid var(--drv-n-200, #DCE0E6);
	border-radius: var(--drv-r-md, 12px);
	background: #FFF;
	color: var(--drv-n-700, #3E4B5E);
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.drv-carte-type:hover {
	border-color: var(--drv-a-400, #6B9BE8);
}

.drv-carte-type i {
	font-size: 19px;
	line-height: 1;
	color: var(--drv-n-500, #667181);
	transition: color .16s ease;
}

.drv-carte-type strong {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--drv-n-900, #0E1E35);
}

.drv-carte-type span {
	font-size: 12.5px;
	color: var(--drv-n-500, #667181);
}

.drv-carte-type.is-active {
	border-color: var(--drv-a-600, #1C65C8);
	background: var(--drv-a-50, #EFF4FF);
	box-shadow: 0 0 0 3px rgba(28, 101, 200, .10);
}

.drv-carte-type.is-active i,
.drv-carte-type.is-active strong {
	color: var(--drv-a-600, #1C65C8);
}

/* Une fois les cartes en place, le menu deroulant reste dans le document
   pour les technologies d assistance, mais sort du flux visuel. Si le script
   ne s execute pas, la classe n est jamais posee et le menu reste visible. */
.drv-type-compte.drv-cartes-actives {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}

/* Le bloc entreprise se distingue du reste sans se couper du formulaire. */
.sign-in-form .drv-champ-societe,
.listeo-registration-form .drv-champ-societe {
	animation: drv-apparition .18s ease both;
}

@keyframes drv-apparition {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sign-in-form .drv-champ-societe,
	.listeo-registration-form .drv-champ-societe {
		animation: none;
	}
}

@media (max-width: 480px) {
	.drv-cartes-type {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   43. Depot d annonce : le choix du type
   Cartes compactes, icone a gauche, deux lignes de texte a droite. Les six
   types tiennent sur deux rangees : on choisit sans faire defiler la page.
   ========================================================================== */

.drv-etape-type .add-listing-headline {
	margin-bottom: 4px;
	padding-bottom: 0;
	border-bottom: 0;
	background: transparent;
}

.drv-etape-type .add-listing-headline h3 {
	margin: 0 0 6px;
	color: var(--drv-n-900, #0E1E35);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.012em;
	line-height: 1.25;
}

.drv-etape-chapeau {
	max-width: 60ch;
	margin: 0 0 20px;
	color: var(--drv-n-500, #667181);
	font-size: 14px;
	line-height: 22px;
}

.drv-grille-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	margin: 0;
}

a.listing-type.drv-carte-type-annonce {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 14px;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 15px 42px 15px 16px !important;
	border: 1.5px solid var(--drv-n-200, #DCE0E6) !important;
	border-radius: var(--drv-r-md, 12px) !important;
	background: #FFF !important;
	box-shadow: none !important;
	color: var(--drv-n-700, #3E4B5E) !important;
	text-align: left !important;
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}

a.listing-type.drv-carte-type-annonce:hover,
a.listing-type.drv-carte-type-annonce:focus-visible {
	border-color: var(--drv-a-600, #1C65C8) !important;
	box-shadow: 0 8px 20px -14px rgba(14, 30, 53, .5);
}

a.listing-type.drv-carte-type-annonce:focus-visible {
	outline: 3px solid rgba(28, 101, 200, .2);
	outline-offset: 2px;
}

.drv-icone-type {
	flex: 0 0 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	border-radius: 11px;
	background: var(--drv-a-50, #EFF4FF);
	color: var(--drv-a-600, #1C65C8);
	transition: background-color .16s ease;
}

.drv-icone-type svg,
.drv-icone-type img {
	width: 24px;
	height: 24px;
	display: block;
}

a.listing-type.drv-carte-type-annonce:hover .drv-icone-type {
	background: var(--drv-a-100, #DCE8FB);
}

.drv-texte-carte-type {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.drv-grille-types .listing-type h3 {
	margin: 0 !important;
	color: var(--drv-n-900, #0E1E35) !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

.drv-texte-type {
	display: block;
	margin: 0 !important;
	color: var(--drv-n-500, #667181) !important;
	font-size: 12.5px !important;
	line-height: 18px !important;
	text-align: left !important;
}

.drv-fleche-type {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .16s ease, transform .16s ease;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C65C8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

a.listing-type.drv-carte-type-annonce:hover .drv-fleche-type,
a.listing-type.drv-carte-type-annonce:focus-visible .drv-fleche-type {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	.drv-grille-types {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.drv-etape-type .add-listing-headline h3 {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.listing-type.drv-carte-type-annonce,
	.drv-fleche-type {
		transition: none;
	}
}

/* ==========================================================================
   44. Depot d annonce : le choix de la formule
   Une carte par formule — mensuel et annuel reunis dans l en-tete — trois par
   rangee, et le bouton de validation dans chaque carte. On choisit et on
   avance, sans jamais chercher le bouton en bas de page.
   ========================================================================== */

.drv-groupe-formules {
	margin: 0 0 30px;
}

.drv-groupe-formules:last-of-type {
	margin-bottom: 8px;
}

.drv-titre-formules {
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--drv-n-900, #0E1E35) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	letter-spacing: -.008em;
	line-height: 1.3 !important;
}

.drv-chapeau-formules {
	max-width: 74ch;
	margin: 0 0 18px;
	color: var(--drv-n-500, #667181);
	font-size: 13px;
	line-height: 20px;
}

.drv-grille-formules {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 !important;
	align-items: stretch;
}

/* ---- la carte ---- */

.drv-carte-formule {
	position: relative;
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 26px 22px 22px !important;
	border: 1.5px solid var(--drv-n-200, #DCE0E6) !important;
	border-radius: 18px !important;
	background: #FFF !important;
	box-shadow: 0 1px 2px rgba(14, 30, 53, .04) !important;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.drv-carte-formule:hover {
	border-color: var(--drv-a-400, #6B9BE8) !important;
	box-shadow: 0 14px 34px -22px rgba(14, 30, 53, .6) !important;
	transform: translateY(-2px);
}

.drv-carte-formule.best-value-plan {
	border-color: var(--drv-a-600, #1C65C8) !important;
	box-shadow: 0 0 0 3px rgba(28, 101, 200, .1), 0 14px 34px -24px rgba(14, 30, 53, .6) !important;
}

.drv-carte-formule.best-value-plan::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 110px;
	content: "";
	border-radius: 18px 18px 0 0;
	background: linear-gradient(180deg, rgba(28, 101, 200, .07), rgba(28, 101, 200, 0));
	pointer-events: none;
}

.drv-carte-formule.pricing-package--disabled {
	border-style: dashed !important;
	background: var(--drv-n-50, #F5F7FB) !important;
	box-shadow: none !important;
}

.drv-carte-formule.pricing-package--disabled:hover {
	border-color: var(--drv-n-200, #DCE0E6) !important;
	box-shadow: none !important;
	transform: none;
}

.drv-ruban-formule {
	position: absolute;
	top: -11px;
	left: 22px;
	z-index: 2;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--drv-a-600, #1C65C8);
	box-shadow: 0 6px 14px -8px rgba(28, 101, 200, .9);
	color: #FFF;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---- en-tete : nom et les deux prix ---- */

.drv-entete-formule {
	position: relative;
	z-index: 1;
	margin: 0 0 14px !important;
	padding: 0 0 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--drv-n-100, #EEF1F6) !important;
	background: transparent !important;
}

.drv-entete-formule h4 {
	margin: 0 0 8px !important;
	color: var(--drv-n-900, #0E1E35) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: -.004em;
	line-height: 1.3 !important;
}

.drv-prix-formule {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.drv-prix-principal {
	display: block;
	color: var(--drv-n-900, #0E1E35);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.drv-prix-principal .amount,
.drv-prix-principal ins,
.drv-prix-principal bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
}

.drv-prix-principal .woocommerce-Price-currencySymbol {
	font-size: .72em;
	font-weight: 600;
}

/* WooCommerce Subscriptions accroche « / mois » au prix : on le calme. */
.drv-prix-principal .subscription-details {
	color: var(--drv-n-500, #667181);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
}

.drv-prix-secondaire {
	display: block;
	margin-top: 5px;
	color: var(--drv-n-500, #667181);
	font-size: 13px;
	line-height: 19px;
}

.drv-prix-secondaire .amount,
.drv-prix-secondaire bdi {
	color: var(--drv-n-700, #3E4B5E) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.drv-prix-secondaire .subscription-details {
	font-size: 13px;
}

.drv-economie {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(16, 148, 96, .1);
	color: #0E7A4E;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .01em;
}

/* ---- corps ---- */

.drv-resume-formule {
	margin: 0 0 12px !important;
	padding: 0 !important;
	color: var(--drv-n-500, #667181) !important;
	font-size: 12.5px !important;
	line-height: 19px !important;
}

.drv-restriction-formule {
	margin: 0 0 12px !important;
	padding: 9px 11px !important;
	border: 0 !important;
	border-left: 3px solid var(--drv-w-400, #E0A138) !important;
	border-radius: 0 8px 8px 0 !important;
	background: rgba(224, 161, 56, .09) !important;
	color: var(--drv-n-700, #3E4B5E) !important;
	font-size: 12px !important;
	line-height: 18px !important;
}

.drv-points-formule {
	margin: 0 0 14px !important;
	padding: 0 !important;
	list-style: none !important;
}

.drv-points-formule li {
	position: relative;
	margin: 0 0 7px !important;
	padding: 0 0 0 23px !important;
	border: 0 !important;
	color: var(--drv-n-700, #3E4B5E) !important;
	font-size: 12.5px !important;
	line-height: 18px !important;
	list-style: none !important;
}

.drv-points-formule li:last-child {
	margin-bottom: 0 !important;
}

.drv-points-formule li::before {
	position: absolute;
	left: 0;
	top: 1px;
	width: 15px;
	height: 15px;
	content: "";
	border-radius: 50%;
	background-color: var(--drv-a-50, #EFF4FF);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C65C8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.drv-detail-formule {
	margin: 0 0 16px;
}

.drv-detail-formule > summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--drv-a-600, #1C65C8);
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.drv-detail-formule > summary::-webkit-details-marker {
	display: none;
}

.drv-detail-formule > summary::after {
	width: 12px;
	height: 12px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	transition: transform .16s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C65C8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.drv-detail-formule[open] > summary::after {
	transform: rotate(180deg);
}

.drv-detail-formule .drv-points-formule {
	margin-top: 11px !important;
	margin-bottom: 0 !important;
}

/* ---- pied de carte : periode et bouton ---- */

.drv-choix-formule {
	margin: auto 0 0 !important;
	padding: 16px 0 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.drv-radio-seul {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

.drv-periodes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	margin: 0 0 10px;
	padding: 3px;
	border-radius: 11px;
	background: var(--drv-n-50, #F5F7FB);
}

.drv-periodes input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

.drv-periodes label {
	display: block !important;
	margin: 0 !important;
	padding: 7px 6px !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--drv-n-500, #667181) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.drv-periodes input[type="radio"]:checked + label {
	background: #FFF !important;
	box-shadow: 0 1px 3px rgba(14, 30, 53, .12);
	color: var(--drv-a-600, #1C65C8) !important;
}

.drv-periodes input[type="radio"]:focus-visible + label {
	outline: 2px solid rgba(28, 101, 200, .4);
	outline-offset: 1px;
}

.drv-cta-formule,
button.button.drv-cta-formule {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	border: 1.5px solid var(--drv-a-600, #1C65C8) !important;
	border-radius: 11px !important;
	background: #FFF !important;
	color: var(--drv-a-600, #1C65C8) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.drv-cta-formule:hover,
button.button.drv-cta-formule:hover {
	background: var(--drv-a-600, #1C65C8) !important;
	color: #FFF !important;
}

.drv-carte-formule.best-value-plan .drv-cta-formule {
	background: var(--drv-a-600, #1C65C8) !important;
	color: #FFF !important;
}

.drv-carte-formule.best-value-plan .drv-cta-formule:hover {
	background: var(--drv-a-700, #17529F) !important;
	border-color: var(--drv-a-700, #17529F) !important;
}

.drv-indisponible {
	display: block;
	padding: 11px 14px;
	border: 1.5px dashed var(--drv-n-200, #DCE0E6);
	border-radius: 11px;
	color: var(--drv-n-500, #667181);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

/* ---- formules deja possedees ---- */

.drv-formules-possedees {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	margin: 0 0 26px;
}

.drv-formules-possedees label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.drv-formules-possedees .package-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border: 1.5px solid var(--drv-n-200, #DCE0E6);
	border-radius: 14px;
	background: #FFF;
	transition: border-color .16s ease, background-color .16s ease;
}

.drv-formules-possedees input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.drv-formules-possedees input[type="radio"]:checked + .package-checkbox {
	border-color: var(--drv-a-600, #1C65C8);
	background: var(--drv-a-50, #EFF4FF);
}

.drv-formules-possedees .package-checkbox i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--drv-n-300, #B6BECB);
	font-size: 13px;
}

.drv-formules-possedees input[type="radio"]:checked + .package-checkbox i {
	color: var(--drv-a-600, #1C65C8);
}

.drv-formules-possedees .owned-package-name strong {
	display: block;
	color: var(--drv-n-900, #0E1E35);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.drv-formules-possedees .owned-package-desc {
	display: block;
	margin-top: 2px;
	color: var(--drv-n-500, #667181);
	font-size: 12.5px;
	line-height: 18px;
}

/* ---- barre collante ---- */

.drv-barre-action {
	position: sticky;
	bottom: 0;
	z-index: 12;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.drv-barre-interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 16px;
	border: 1px solid var(--drv-n-200, #DCE0E6);
	border-radius: 14px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 10px 28px -18px rgba(14, 30, 53, .5);
	-webkit-backdrop-filter: saturate(160%) blur(6px);
	backdrop-filter: saturate(160%) blur(6px);
}

.drv-barre-choix {
	margin: 0 !important;
	min-width: 0;
	line-height: 1.25;
}

.drv-barre-etiquette {
	display: block;
	color: var(--drv-n-500, #667181);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.drv-barre-choix strong {
	display: block;
	overflow: hidden;
	color: var(--drv-n-900, #0E1E35);
	font-size: 14.5px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drv-barre-bouton {
	flex: 0 0 auto;
	margin: 0 !important;
}

.drv-barre-bouton .button {
	margin: 0 !important;
	padding: 11px 20px !important;
	border-radius: 11px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

@media (max-width: 1099px) {
	.drv-grille-formules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 640px) {
	.drv-grille-formules {
		grid-template-columns: 1fr;
	}

	.drv-carte-formule {
		padding: 22px 18px 18px !important;
	}

	.drv-barre-interieur {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.drv-barre-bouton .button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drv-carte-formule,
	.drv-cta-formule,
	.drv-periodes label {
		transition: none;
	}

	.drv-carte-formule:hover {
		transform: none;
	}
}