/**
 * Design system du site — appliqué à toutes les pages.
 *
 * Tout est scopé sous `.wia` (et `body.wia-site`), avec des variables
 * préfixées `--wia-` : aucun conflit possible avec Astra ou une extension.
 *
 * Sommaire :
 *   1. Base & utilitaires        6. Méthode / CMS / urgence / villes
 *   2. Boutons                   7. Avis & FAQ
 *   3. Header & navigation       8. CTA final & footer
 *   4. Hero & logos clients      9. Pages internes (titre, contenu, blog)
 *   5. Grilles, cartes, tarifs  10. Formulaires, commentaires, préférences
 */

:root {
	--wia-bg:          #0B0B0C;
	--wia-bg-2:        #121214;
	--wia-surface:     #17171A;
	--wia-surface-2:   #1E1E22;
	--wia-line:        #2A2A30;
	--wia-txt:         #F4F4F5;
	--wia-muted:       #A0A0AB;
	/* Entre le texte et le gris secondaire : les entrées du menu, les
	   légendes de code, tout ce qui doit être un peu moins fort qu'un
	   titre sans descendre au gris. La proportion redonne exactement
	   #D4D4D8 sur l'ambiance actuelle, donc rien ne bouge ici — et tout
	   suit dès qu'une autre ambiance est posée. */
	--wia-txt-soft:    #D4D4D8;
	--wia-txt-soft:    color-mix(in srgb, var(--wia-muted) 38%, var(--wia-txt));

	/* Le corps du texte sur une carte : un cran sous le titre, deux au-dessus
	   du gris secondaire. */
	--wia-txt-body:    #C9C9D1;
	--wia-txt-body:    color-mix(in srgb, var(--wia-muted) 51%, var(--wia-txt));

	/* Les libellés de formulaire et les légendes. */
	--wia-txt-label:   #C4C4CC;
	--wia-txt-label:   color-mix(in srgb, var(--wia-muted) 57%, var(--wia-txt));

	/*
	 * Sur-titres, textes d'invite et métadonnées.
	 *
	 * Ils valaient #8F8F9A et #71717A — deux gris obtenus en allant vers le
	 * fond. Mesurés, ils ne passent le seuil du texte courant sur aucune
	 * ambiance claire, et le second ne le passait déjà pas sur Nuit : 4,01
	 * pour 1 sur le fond, 3,64 sur les cartes.
	 *
	 * Ce n'est pas une proportion à régler. Aller vers le fond éloigne de la
	 * lisibilité par construction, et la marge est d'autant plus mince que le
	 * gris secondaire est déjà proche du seuil : une valeur qui passe sur Nuit
	 * échoue sur Papier, et l'inverse.
	 *
	 * Ils s'arrêtent donc au gris secondaire, dont la palette garantit la
	 * lisibilité sur le fond comme sur les cartes. La hiérarchie passe par la
	 * taille et la graisse, qu'ils portent déjà — une nuance de gris ne se voit
	 * pas sur un écran mal calibré, une taille si.
	 */
	--wia-txt-dim:     var(--wia-muted);
	--wia-txt-faint:   var(--wia-muted);

	/* L'accent posé en texte sur un fond teinté. Il s'éclaircit sur une
	   ambiance sombre et s'assombrit sur une claire, parce qu'il se mélange au
	   texte du site et non à du blanc. */
	/* La couleur qui se lit posée sur l'accent. ET Astra la recalcule
	   d'après l'ambiance ; cette valeur sert quand l'extension n'est pas
	   là. Ne pas confondre avec --wia-btn-color, qui suit la forme des
	   boutons et vaut l'accent lui-même sur un bouton contour. */
	--wia-on-accent:   #0B0B0C;

	/* Le vert sémantique des pastilles de disponibilité. Il ne suit pas
	   l'accent — le vert veut dire quelque chose — mais il suit le sens de
	   lecture : il s'éclaircit sur fond sombre, s'assombrit sur fond clair. */
	--wia-success:     #4ADE80;
	--wia-success:     color-mix(in srgb, #16A34A 62%, var(--wia-txt));

	/*
	 * Les voiles.
	 *
	 * Ils écartent une surface de son fond d'un cran. Écrits en blanc, ils
	 * éclaircissaient une surface sombre — et ne faisaient rien du tout sur une
	 * surface claire : les cadres, les survols et les boutons de repli
	 * disparaissaient sans qu'aucune règle ne soit fausse.
	 *
	 * Ils vont désormais vers le texte du site : clair sur une ambiance sombre,
	 * sombre sur une ambiance claire. Un voile doit s'écarter du fond, pas
	 * aller vers le blanc.
	 */
	--wia-veil-1:      rgba(255, 255, 255, .03);
	--wia-veil-1:      color-mix(in srgb, var(--wia-txt) 3%, transparent);
	--wia-veil-2:      rgba(255, 255, 255, .05);
	--wia-veil-2:      color-mix(in srgb, var(--wia-txt) 5%, transparent);
	--wia-veil-3:      rgba(255, 255, 255, .10);
	--wia-veil-3:      color-mix(in srgb, var(--wia-txt) 10%, transparent);
	--wia-veil-4:      rgba(255, 255, 255, .16);
	--wia-veil-4:      color-mix(in srgb, var(--wia-txt) 16%, transparent);

	/* Le tiroir du menu mobile : le fond de la page, presque opaque. Écrit en
	   noir, il restait noir sous un en-tête devenu clair, avec des entrées
	   sombres dessus. */
	--wia-drawer-bg:   rgba(11, 11, 12, .985);
	--wia-drawer-bg:   color-mix(in srgb, var(--wia-bg) 98.5%, transparent);

	--wia-accent-soft: #FFB273;
	--wia-accent-soft: color-mix(in srgb, var(--wia-orange) 60%, var(--wia-txt));

	/* Le fond de l'en-tête, translucide. Écrit en dur, il gardait l'en-tête
	   noir sur une ambiance claire — avec, dessus, un menu devenu sombre. */
	--wia-header-bg:   rgba(11, 11, 12, .86);
	--wia-header-bg:   color-mix(in srgb, var(--wia-bg) 86%, transparent);

	/* Le pied de page. ET Astra le redéfinit d'après l'ambiance ; cette valeur
	   sert quand l'extension n'est pas là. */
	--wia-footer-bg:   #08080A;
	--wia-orange:      #FF7A1A;
	--wia-orange-lite: #FF8F3D;
	/* Composantes de l'accent, pour que toutes ses transparences suivent
	   la couleur choisie au lieu d'être figées. */
	--wia-accent-rgb:  255, 122, 26;
	--wia-orange-soft: rgba(var(--wia-accent-rgb), .12);
	--wia-green:       #3DD68C;
	--wia-radius:      14px;

	/* Boutons : chaque aspect est une variable, pour qu'un prereglage
	   puisse tout redefinir sans toucher aux selecteurs. */
	--wia-btn-radius:  10px;
	--wia-btn-py:      15px;
	--wia-btn-px:      28px;
	--wia-btn-weight:  700;
	--wia-btn-bg:      var(--wia-orange);
	--wia-btn-color:   #0B0B0C;
	--wia-btn-border:  transparent;
	--wia-btn-bg-h:    var(--wia-orange-lite);
	--wia-btn-color-h: #0B0B0C;
	--wia-btn-border-h: transparent;
	--wia-btn-shadow:  none;
	--wia-btn-shadow-h: none;
	--wia-btn-lift:    -1px;
	--wia-maxw:        1180px;
	--wia-base-size:   17px;
	--wia-lh:          1.65;
	--wia-header-h:    72px;
	--wia-font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- BASE ---------- */

html:has(body.wia-site) { scroll-behavior: smooth; }

body.wia-site {
	background: var(--wia-bg);
	color: var(--wia-txt);
	font-family: var(--wia-font);
	font-size: var(--wia-base-size);
	line-height: var(--wia-lh);
	-webkit-font-smoothing: antialiased;
	margin: 0;
	overflow-x: hidden;
}

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

.wia h1, .wia h2, .wia h3, .wia h4,
.wia p, .wia ul, .wia ol, .wia li,
.wia figure, .wia blockquote, .wia dl, .wia dd { margin: 0; padding: 0; }

.wia a { color: inherit; }
.wia img, .wia svg { max-width: 100%; height: auto; }

.wia h1, .wia h2, .wia h3 {
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--wia-txt);
}

.wia h1 { font-size: clamp(38px, 5.4vw, 62px); margin-bottom: 22px; }
.wia h1 em { font-style: normal; color: var(--wia-orange); }
.wia h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
.wia h3 { font-size: 20px; margin-bottom: 8px; }
.wia p  { color: var(--wia-muted); }

.wia :focus-visible {
	outline: 2px solid var(--wia-orange);
	outline-offset: 3px;
	border-radius: 4px;
}

.wia-wrap {
	max-width: var(--wia-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 480px) {
	.wia-wrap { padding: 0 18px; }
	.wia .wia-section.is-layout-constrained,
	.wia .wia-hero.is-layout-constrained { padding-left: 18px; padding-right: 18px; }
}

.wia-section {
	padding: 88px 0;
	border-top: 1px solid var(--wia-line);
}

.wia-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wia-orange);
	margin-bottom: 14px;
}

.wia-lead { font-size: 19px; max-width: 100%; }

.wia-sec-head { max-width: 100%; margin-bottom: 44px; }

.wia-link {
	color: var(--wia-orange);
	font-weight: 700;
}

/* Lien d'évitement clavier. */
.wia-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--wia-orange);
	color: var(--wia-on-accent);
	font-weight: 700;
	text-decoration: none;
}
.wia-skip:focus { left: 8px; top: 8px; }

/* ---------- BOUTONS ---------- */

.wia .wia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: var(--wia-btn-py) var(--wia-btn-px);
	border-radius: var(--wia-btn-radius);
	font-weight: var(--wia-btn-weight);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}

.wia .wia-btn--primary {
	background: var(--wia-btn-bg);
	color: var(--wia-btn-color);
	border-color: var(--wia-btn-border);
	box-shadow: var(--wia-btn-shadow);
}
.wia .wia-btn--primary:hover,
.wia .wia-btn--primary:focus-visible {
	background: var(--wia-btn-bg-h);
	color: var(--wia-btn-color-h);
	border-color: var(--wia-btn-border-h);
	box-shadow: var(--wia-btn-shadow-h);
	transform: translateY(var(--wia-btn-lift));
}

.wia .wia-btn--ghost {
	border-color: var(--wia-line);
	color: var(--wia-txt);
	background: var(--wia-veil-1);
}
.wia .wia-btn--ghost:hover,
.wia .wia-btn--ghost:focus-visible { border-color: var(--wia-orange); color: var(--wia-orange); }

.wia .wia-btn--block { width: 100%; }

.wia-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

/* ---------- HEADER ---------- */

.wia-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--wia-header-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wia-line);
}

/* Décale le header collant sous la barre d'admin WordPress. */
body.admin-bar .wia-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .wia-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .wia-header { top: 0; }
}

.wia-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--wia-header-h);
}

.wia-logo {
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -.03em;
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Barre de navigation
   Neuf entrées et un bouton tiennent mal sur une seule ligne : les libellés
   ne doivent jamais se couper, la gouttière se resserre, et le menu bascule
   en tiroir bien avant que ça ne déborde. */

.wia-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wia-nav-list > li { position: relative; }

.wia-nav-list a {
	display: block;
	white-space: nowrap;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--wia-txt-soft);
	padding: 10px 11px;
	border-radius: 8px;
	transition: color .15s, background-color .15s;
}
.wia-nav-list a:hover,
.wia-nav-list a:focus-visible {
	color: var(--wia-orange);
	background: var(--wia-veil-2);
}
/*
 * La page ouverte.
 *
 * La couleur seule ne suffisait pas : elle se confond avec le survol, et une
 * entree survolee ressemblait alors a l'entree active. Le fond et la graisse
 * la distinguent, et la graisse tient meme pour qui ne distingue pas l'accent
 * du texte courant.
 */
.wia-nav-list .is-current > a,
.wia-nav-list .current-menu-item > a {
	color: var(--wia-orange);
	font-weight: 700;
}

.wia-nav-list > .is-current > a,
.wia-nav-list > .current-menu-item > a {
	background: var(--wia-veil-3);
	background: color-mix(in srgb, var(--wia-orange) 14%, transparent);
}

/* La rubrique qui contient la page ouverte, sans le fond : elle situe, elle
   n'annonce pas une page ouverte. */
.wia-nav-list .is-current-section > a,
.wia-nav-list .current-menu-ancestor > a { color: var(--wia-orange); }

/* Chevron dessiné en CSS pour les entrées à sous-menu. */
.wia-nav-list .menu-item-has-children > a {
	padding-right: 26px;
}
.wia-nav-list .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 11px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .65;
	transition: transform .16s;
}
.wia-nav-list .menu-item-has-children:hover > a::after,
.wia-nav-list .menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg);
	margin-top: -1px;
	opacity: 1;
}

/* Astra injecte un <button class="ast-menu-toggle"> après chaque entrée à
   enfants. Il est retiré côté PHP ; cette règle couvre le cas où une autre
   extension ferait de même. */
.wia-nav-list button,
.wia-nav-list .ast-menu-toggle { display: none !important; }

.wia-header .wia-btn {
	padding: 10px 18px;
	font-size: 14.5px;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* ---------- Icônes Font Awesome dans le menu ---------- */

.wia-nav-icon {
	font-size: 15px;
	line-height: 1;
	vertical-align: -1px;
}

/* Une entrée en icône seule doit rester une cible confortable :
   sans largeur minimale, elle se réduirait à la largeur du glyphe. */
.wia-nav-list a:has(> .screen-reader-text) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding-left: 8px;
	padding-right: 8px;
}
.wia-nav-list a:has(> .screen-reader-text) .wia-nav-icon { font-size: 16px; }

/* Repli pour les navigateurs sans :has() — l'icône reste lisible,
   simplement sans la largeur minimale. */
.wia-nav-list .wia-nav-icon + .screen-reader-text { position: absolute; }

.wia-nav-list .wia-nav-icon + .wia-nav-label { margin-left: 7px; }

/* En tiroir mobile, l'icône seule reprend un libellé visible :
   une rangée de la hauteur d'un doigt sans texte serait illisible. */
@media (max-width: 1100px) {
	.wia-nav-list a:has(> .screen-reader-text) {
		display: block;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: left;
	}
	.wia-nav-list a > .screen-reader-text {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0 0 0 9px;
		clip: auto;
		clip-path: none;
		overflow: visible;
		white-space: normal;
	}
}

/* ---------- Sous-menus ---------- */

.wia-nav-list .sub-menu {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

@media (min-width: 1101px) {
	.wia-nav-list .sub-menu {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 5;
		min-width: 230px;
		padding: 8px;
		margin-top: 10px;
		display: grid;
		gap: 2px;
		background: var(--wia-surface);
		border: 1px solid var(--wia-line);
		border-radius: 12px;
		box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .95);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .16s, transform .16s, visibility .16s;
	}
	/* Pont invisible : évite que le survol se perde dans la gouttière. */
	.wia-nav-list .menu-item-has-children::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 12px;
	}
	.wia-nav-list li:hover > .sub-menu,
	.wia-nav-list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.wia-nav-list .sub-menu a {
		white-space: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 1.4;
		padding: 9px 12px;
	}
}

/* ---------- Bouton hamburger ---------- */

.wia-burger {
	display: none;
	width: 44px;
	height: 40px;
	border: 1px solid var(--wia-line);
	border-radius: 9px;
	background: var(--wia-veil-1);
	color: var(--wia-txt);
	cursor: pointer;
	padding: 0;
	place-items: center;
	flex: 0 0 auto;
}
.wia-burger-bars,
.wia-burger-bars::before,
.wia-burger-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .18s, opacity .18s;
}
.wia-burger-bars { position: relative; }
.wia-burger-bars::before,
.wia-burger-bars::after { content: ""; position: absolute; left: 0; }
.wia-burger-bars::before { top: -6px; }
.wia-burger-bars::after  { top: 6px; }
.wia-burger[aria-expanded="true"] .wia-burger-bars { background: transparent; }
.wia-burger[aria-expanded="true"] .wia-burger-bars::before { transform: translateY(6px) rotate(45deg); }
.wia-burger[aria-expanded="true"] .wia-burger-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Bascule en tiroir sous 1100 px : au-delà de neuf entrées, la barre
   horizontale déborde avant cette largeur. */
@media (max-width: 1100px) {
	.wia-burger { display: grid; }
	.wia-header .wia-nav > .wia-btn { display: none; }

	.wia-nav-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--wia-drawer-bg);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--wia-line);
		padding: 0 24px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .24s ease;
	}
	.wia-nav-menu.is-open {
		max-height: calc(100vh - 72px);
		overflow: auto;
		overscroll-behavior: contain;
	}

	.wia-nav-container { max-width: var(--wia-maxw); margin: 0 auto; }

	.wia-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	/* Les entrees debordent de douze pixels et les reprennent en marge
	   interieure : rien ne bouge tant qu'aucun fond n'est peint, et la ligne
	   active peut alors s'etendre au-dela du texte. */
	.wia-nav-list > li {
		border-bottom: 1px solid var(--wia-line);
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px;
		padding-right: 12px;
	}
	.wia-nav-list > li:last-child { border-bottom: 0; }

	/* Au doigt il n'y a ni survol ni curseur : cette ligne est la seule chose
	   qui dise ou l'on est. */
	.wia-nav-list > li.is-current,
	.wia-nav-list > li.current-menu-item {
		background: var(--wia-veil-3);
		background: linear-gradient(90deg, color-mix(in srgb, var(--wia-orange) 16%, transparent), transparent 70%);
		box-shadow: inset 3px 0 0 var(--wia-orange);
		border-radius: 6px;
	}

	.wia-nav-list > li.is-current > a,
	.wia-nav-list > li.is-current > .wia-row > a,
	.wia-nav-list > li.current-menu-item > a {
		color: var(--wia-orange);
		font-weight: 700;
	}

	.wia-nav-list > li.is-current-section:not(.is-current) {
		box-shadow: inset 3px 0 0 var(--wia-line);
		box-shadow: inset 3px 0 0 color-mix(in srgb, var(--wia-orange) 45%, transparent);
	}

	.wia-nav-list .sub-menu .is-current > a,
	.wia-nav-list .sub-menu .current-menu-item > a {
		color: var(--wia-orange);
		font-weight: 700;
	}
	.wia-nav-list a {
		padding: 15px 0;
		font-size: 16px;
		border-radius: 0;
		white-space: normal;
	}
	.wia-nav-list a:hover,
	.wia-nav-list a:focus-visible { background: none; }

	/* En tiroir, les sous-menus sont dépliés : pas de survol au doigt. */
	.wia-nav-list .menu-item-has-children > a::after { display: none; }
	.wia-nav-list .menu-item-has-children > a { padding-right: 0; }
	.wia-nav-list .sub-menu {
		padding: 0 0 10px 14px;
		border-left: 2px solid var(--wia-line);
		margin-bottom: 12px;
	}
	.wia-nav-list .sub-menu a {
		padding: 9px 0;
		font-size: 14.5px;
		font-weight: 500;
		color: var(--wia-muted);
	}

	.wia-nav-menu .wia-btn { margin: 18px 0 22px; width: 100%; }
}

@media (min-width: 1101px) {
	.wia-nav-menu { display: contents; }
	.wia-nav-menu > .wia-btn { display: none; }
}

/* ---------- HERO ---------- */

.wia-hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0 84px;
	background:
		radial-gradient(900px 460px at 78% 18%, rgba(var(--wia-accent-rgb), .16), transparent 62%),
		radial-gradient(700px 420px at 8% 92%, rgba(var(--wia-accent-rgb), .07), transparent 60%),
		var(--wia-bg);
}
.wia-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(var(--wia-veil-4) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(circle at 60% 40%, #000 10%, transparent 72%);
	mask-image: radial-gradient(circle at 60% 40%, #000 10%, transparent 72%);
}
.wia-hero .wia-wrap { position: relative; z-index: 2; }

.wia-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 960px) {
	.wia-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.wia-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border-radius: 99px;
	background: var(--wia-orange-soft);
	border: 1px solid rgba(var(--wia-accent-rgb), .34);
	color: var(--wia-accent-soft);
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 24px;
}

.wia-hero .wia-lead { font-size: 20px; margin-bottom: 32px; color: var(--wia-txt-body); }

.wia-trust {
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
	padding-top: 26px;
	border-top: 1px solid var(--wia-line);
}
.wia-trust strong {
	display: block;
	font-size: 26px;
	font-weight: 900;
	color: var(--wia-txt);
	line-height: 1.1;
}
.wia-trust span { font-size: 13.5px; color: var(--wia-muted); }

.wia-hero-card {
	background: linear-gradient(160deg, var(--wia-surface), var(--wia-bg));
	border: 1px solid var(--wia-line);
	border-radius: 18px;
	padding: 30px;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .9);
}
.wia-hero-card h2 { font-size: 17px; margin-bottom: 4px; letter-spacing: 0; }
.wia-hero-card > p { font-size: 14px; margin-bottom: 20px; }
.wia-hero-card ul { list-style: none; display: grid; gap: 13px; }
.wia-hero-card li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	color: var(--wia-txt-soft);
}
.wia-fine { font-size: 12.5px; text-align: center; margin-top: 12px; }

/* ---------- LOGOS CLIENTS ---------- */

.wia-logos {
	padding: 40px 0;
	border-top: 1px solid var(--wia-line);
	background: var(--wia-bg-2);
}
.wia-logos > .wia-wrap > p {
	text-align: center;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 22px;
}
.wia-logo-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	list-style: none;
}
.wia-logo-chip {
	padding: 11px 20px;
	border: 1px solid var(--wia-line);
	border-radius: 9px;
	background: var(--wia-surface);
	font-size: 14px;
	font-weight: 700;
	color: var(--wia-txt-dim);
	letter-spacing: .02em;
}

/* ---------- GRILLES & CARTES ---------- */

.wia-grid { display: grid; gap: 20px; }
.wia-g2 { grid-template-columns: repeat(2, 1fr); }
.wia-g3 { grid-template-columns: repeat(3, 1fr); }
.wia-g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
	.wia-g3, .wia-g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.wia-g2, .wia-g3, .wia-g4 { grid-template-columns: 1fr; }
}

.wia-card {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: var(--wia-radius);
	padding: 28px;
	transition: border-color .2s, transform .2s;
}
.wia-card:hover { border-color: rgba(var(--wia-accent-rgb), .45); transform: translateY(-3px); }
.wia-card p { font-size: 15px; }
.wia-card p + p { margin-top: 14px; }

.wia-ico {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--wia-orange-soft);
	border: 1px solid rgba(var(--wia-accent-rgb), .28);
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 16px;
}

.wia-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wia-orange);
	text-decoration: none;
}
.wia-more:hover, .wia-more:focus-visible { text-decoration: underline; }

.wia-tag {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(61, 214, 140, .13);
	color: var(--wia-success);
	border: 1px solid rgba(61, 214, 140, .3);
	margin-bottom: 12px;
}

/* ---------- TARIFS ---------- */

.wia-price-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 960px) { .wia-price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wia-price-grid { grid-template-columns: 1fr; } }

.wia-price {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: var(--wia-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
}
.wia-price.is-featured {
	border-color: var(--wia-orange);
	background: linear-gradient(170deg, rgba(var(--wia-accent-rgb), .09), var(--wia-surface));
}
.wia-price h3 { font-size: 17px; margin-bottom: 10px; }
.wia-price-from {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wia-orange);
	margin-bottom: 4px;
	font-weight: 700;
}
.wia-price-amount {
	font-size: 32px;
	font-weight: 900;
	color: var(--wia-txt);
	letter-spacing: -.03em;
	line-height: 1.15;
}
.wia-price-amount small {
	font-size: 13px;
	font-weight: 600;
	color: var(--wia-muted);
	letter-spacing: 0;
}
.wia-price ul {
	list-style: none;
	margin-top: 18px;
	display: grid;
	gap: 9px;
	font-size: 14.5px;
	color: var(--wia-txt-label);
}
.wia-price li::before { content: "— "; color: var(--wia-orange); }

/* ---------- MÉTHODE ---------- */

.wia-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
@media (max-width: 1000px) { .wia-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wia-steps { grid-template-columns: 1fr; } }

.wia-step {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: var(--wia-radius);
	padding: 24px;
	position: relative;
}
.wia-step h3 { font-size: 16px; }
.wia-step p  { font-size: 14.5px; }

/* ---------- CMS ---------- */

.wia-cms { background: var(--wia-bg-2); }
.wia-cms .wia-card { background: var(--wia-surface-2); }

/* ---------- URGENCE ---------- */

.wia-urgence {
	background:
		linear-gradient(140deg, rgba(var(--wia-accent-rgb), .14), rgba(var(--wia-accent-rgb), .02)),
		var(--wia-surface);
	border: 1px solid rgba(var(--wia-accent-rgb), .3);
	border-radius: 18px;
	padding: 44px;
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: 40px;
	align-items: center;
}
@media (max-width: 860px) {
	.wia-urgence { grid-template-columns: 1fr; padding: 32px; }
}
.wia-urgence h2 { font-size: clamp(26px, 3vw, 36px); }
.wia-urgence > div > p { font-size: 17px; max-width: 62ch; }
.wia-urgence-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}
.wia-urgence-tags li {
	font-size: 13.5px;
	padding: 6px 13px;
	border-radius: 7px;
	background: var(--wia-veil-2);
	border: 1px solid var(--wia-line);
	color: var(--wia-txt-label);
}
.wia-urgence-actions { display: grid; gap: 12px; }

/* ---------- VILLES ---------- */

.wia-villes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	list-style: none;
}
.wia-villes a {
	display: inline-block;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	padding: 9px 17px;
	border-radius: 8px;
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	color: var(--wia-txt-label);
	transition: border-color .16s, color .16s;
}
.wia-villes a:hover,
.wia-villes a:focus-visible { border-color: var(--wia-orange); color: var(--wia-orange); }

/* ---------- AVIS ---------- */

.wia-quote {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: var(--wia-radius);
	padding: 26px;
}
.wia-stars {
	color: var(--wia-orange);
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}
.wia-quote blockquote {
	font-size: 15.5px;
	color: var(--wia-txt-soft);
	font-style: italic;
	margin-bottom: 16px;
}
.wia-quote cite {
	font-size: 13.5px;
	color: var(--wia-muted);
	font-style: normal;
	font-weight: 600;
}

/* ---------- FAQ ---------- */

.wia-faq-item {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}
.wia-faq-item[open] { border-color: rgba(var(--wia-accent-rgb), .4); }
.wia-faq-item > summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 24px;
	font-weight: 700;
	font-size: 16.5px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
}
.wia-faq-item > summary::-webkit-details-marker { display: none; }
.wia-faq-item > summary::after {
	content: "+";
	color: var(--wia-orange);
	font-size: 22px;
	font-weight: 400;
	flex: 0 0 auto;
	line-height: 1;
}
.wia-faq-item[open] > summary::after { content: "\2212"; }
.wia-faq-answer {
	padding: 0 24px 22px;
	font-size: 15.5px;
	color: var(--wia-muted);
	max-width: 100%;
}

/* ---------- CTA FINAL ---------- */

.wia-final {
	text-align: center;
	background:
		radial-gradient(700px 340px at 50% 0%, rgba(var(--wia-accent-rgb), .15), transparent 65%),
		var(--wia-bg-2);
}
.wia-final h2 { margin-bottom: 16px; }
.wia-final > .wia-wrap > p { margin: 0 auto 30px; max-width: 60ch; }
.wia-final .wia-cta-row { justify-content: center; }

/* ---------- FOOTER ---------- */

.wia-footer {
	background: var(--wia-footer-bg);
	border-top: 1px solid var(--wia-line);
	padding: 56px 0 30px;
	font-size: 14.5px;
}
.wia-f-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 34px;
	margin-bottom: 38px;
}
@media (max-width: 860px) { .wia-f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .wia-f-grid { grid-template-columns: 1fr; } }

.wia-footer h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	/* Le texte le plus fort de la palette, et non du blanc : sur un pied de
	   page devenu clair, « blanc » voulait dire invisible. */
	color: var(--wia-txt);
	margin-bottom: 14px;
}
.wia-footer ul { list-style: none; display: grid; gap: 9px; }
.wia-footer a { color: var(--wia-muted); text-decoration: none; }
.wia-footer a:hover, .wia-footer a:focus-visible { color: var(--wia-orange); }
.wia-footer .wia-logo { color: var(--wia-txt); font-size: 17px; }
.wia-f-about { margin-top: 12px; font-size: 14px; max-width: 34ch; }
/* Widgets placés sous le logo : ils reprennent l'espacement des autres
   colonnes, sans hériter de la largeur de lecture du chapô. */
.wia-f-brand-widgets { margin-top: 22px; }

.wia-f-bottom {
	border-top: 1px solid var(--wia-line);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	color: var(--wia-txt-faint);
	font-size: 13px;
}

/* ---------- PAGES INTERNES : BANDEAU DE TITRE ---------- */

.wia-page-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 56px;
	background:
		radial-gradient(760px 380px at 20% 10%, rgba(var(--wia-accent-rgb), .13), transparent 62%),
		var(--wia-bg);
	border-bottom: 1px solid var(--wia-line);
}
.wia-page-hero h1 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 0; }
.wia-page-hero .wia-lead { margin-top: 18px; color: var(--wia-txt-body); }

.wia-featured {
	margin-bottom: 36px;
	border-radius: var(--wia-radius);
	overflow: hidden;
	border: 1px solid var(--wia-line);
}
.wia-featured img { display: block; width: 100%; }

.wia-note { font-size: 15px; color: var(--wia-muted); margin-top: 24px; }
.wia-final .wia-note { margin-top: 26px; }

/* ---------- PAGES INTERNES : CONTENU ÉDITORIAL ---------- */

.wia-entry {
	/* Pleine largeur, sans indirection. Le conteneur .wia-wrap borne deja
	   la ligne ; une seconde limite ici n'apportait que de la confusion.
	   L'extension peut la ramener a une colonne de lecture, mais c'est
	   alors un choix explicite. */
	max-width: 100%;
	font-size: var(--wia-base-size, 17px);
	color: var(--wia-txt-body);
	/* Sans cela, une URL ou un mot tres long deborde du conteneur sur
	   mobile et fait defiler toute la page horizontalement. */
	overflow-wrap: break-word;
	word-break: break-word;
}
.wia-entry > *:first-child { margin-top: 0; }
.wia-entry > *:last-child  { margin-bottom: 0; }

/* `.wia p` cible directement l'élément : il faut le contrer explicitement. */
.wia .wia-entry p,
.wia .wia-entry li,
.wia .wia-entry td { color: var(--wia-txt-body); }

.wia-entry p,
.wia-entry ul,
.wia-entry ol,
.wia-entry dl,
.wia-entry table,
.wia-entry pre,
.wia-entry figure { margin: 0 0 1.4em; }

.wia-entry h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 2em 0 .6em; }
.wia-entry h3 { font-size: 21px; margin: 1.8em 0 .5em; }
.wia-entry h4 { font-size: 17px; font-weight: 700; margin: 1.6em 0 .4em; color: var(--wia-txt); }

/* Les boutons sont exclus : sans cette exception, un bouton plein recevrait
   du texte orange sur fond orange, donc illisible.

   `wia-plain` est l'exception ouverte : tout lien qui la porte garde son
   propre habillage. Elle sert aux blocs ajoutés à la fin du contenu — une
   carte d'article suggéré est dans le corps de texte sans en faire partie, et
   la souligner en orange la ferait lire comme un lien de paragraphe. Nommer
   l'intention plutôt que chaque extension évite d'écrire ici la classe de
   celles qui viendront. */
.wia-entry a:not(.wp-element-button):not(.wia-btn):not(.wp-block-button__link):not(.wia-plain) {
	color: var(--wia-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wia-entry a:not(.wp-element-button):not(.wia-btn):not(.wp-block-button__link):not(.wia-plain):hover {
	color: var(--wia-orange-lite);
}

.wia-entry ul,
.wia-entry ol { padding-left: 1.35em; }
.wia-entry li { margin-bottom: .5em; }
.wia-entry ul li { list-style: disc; }
.wia-entry ol li { list-style: decimal; }
.wia-entry li::marker { color: var(--wia-orange); }

.wia-entry strong { color: var(--wia-txt); }

.wia-entry blockquote {
	margin: 1.6em 0;
	padding: 20px 26px;
	border-left: 3px solid var(--wia-orange);
	background: var(--wia-surface);
	border-radius: 0 var(--wia-radius) var(--wia-radius) 0;
	font-style: italic;
	color: var(--wia-txt-soft);
}
.wia-entry blockquote p:last-child { margin-bottom: 0; }

.wia-entry code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--wia-surface-2);
	border: 1px solid var(--wia-line);
	color: var(--wia-accent-soft);
}
.wia-entry pre {
	padding: 20px 22px;
	border-radius: var(--wia-radius);
	background: var(--wia-surface-2);
	border: 1px solid var(--wia-line);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}
.wia-entry pre code { padding: 0; border: 0; background: none; color: var(--wia-txt-soft); }

.wia-entry img,
.wia-entry video,
.wia-entry iframe { max-width: 100%; height: auto; border-radius: 10px; }

.wia-entry figcaption,
.wia-entry .wp-caption-text {
	font-size: 13.5px;
	color: var(--wia-muted);
	text-align: center;
	margin-top: 8px;
}

.wia-entry hr {
	border: 0;
	border-top: 1px solid var(--wia-line);
	margin: 2.4em 0;
}

/* Tableaux : scroll horizontal plutôt que débordement de page. */
.wia-entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}
.wia-entry th,
.wia-entry td {
	padding: 12px 14px;
	border: 1px solid var(--wia-line);
	text-align: left;
}
.wia-entry th { background: var(--wia-surface); color: var(--wia-txt); font-weight: 700; }

/* Classes d'alignement du cœur de WordPress. */
.wia-entry .alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.wia-entry .alignright { float: right; margin: 0 0 1em 1.5em; }
.wia-entry .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wia-entry .alignwide  {
	/* En pleine largeur, le bloc occupe deja tout l'espace : le decalage
	   negatif le pousserait hors du conteneur. L'extension redefinit ces
	   deux valeurs quand la prose passe en colonne de lecture. */
	max-width: var(--wia-alignwide-maxw, 100%);
	margin-left: var(--wia-alignwide-ml, 0);
}
.wia-entry .alignfull  { max-width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
@media (max-width: 782px) {
	.wia-entry .alignleft,
	.wia-entry .alignright { float: none; margin: 0 0 1em; }
	.wia-entry .alignwide { max-width: 100%; margin-left: 0; }
}

/* ---------- BLOG : CARTES & PAGINATION ---------- */

.wia-post-card { display: flex; flex-direction: column; }
.wia-post-thumb {
	display: block;
	margin: -28px -28px 20px;
	border-radius: var(--wia-radius) var(--wia-radius) 0 0;
	overflow: hidden;
}
.wia-post-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.wia-post-meta {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wia-muted);
	margin-bottom: 10px;
}

.wia .wia-post-title { font-size: 19px; margin-bottom: 10px; }
.wia-post-title a { text-decoration: none; }
.wia-post-title a:hover { color: var(--wia-orange); }

.wia-post-card .wia-more { margin-top: auto; padding-top: 14px; }

.wia-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
}
.wia-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px solid var(--wia-line);
	background: var(--wia-surface);
	color: var(--wia-txt-label);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .16s, color .16s;
}
.wia-pagination a.page-numbers:hover { border-color: var(--wia-orange); color: var(--wia-orange); }
.wia-pagination .page-numbers.current {
	background: var(--wia-orange);
	border-color: var(--wia-orange);
	color: var(--wia-on-accent);
}
.wia-pagination .page-numbers.dots { border-color: transparent; background: none; }

.wia-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--wia-line);
	font-size: 15px;
	font-weight: 600;
}
.wia-post-nav a { color: var(--wia-txt-label); text-decoration: none; }
.wia-post-nav a:hover { color: var(--wia-orange); }
.wia-post-nav-next { margin-left: auto; text-align: right; }

.wia-post-tags { margin-top: 32px; }
.wia-post-tags a { text-decoration: none; color: inherit; }
.wia-post-tags li:hover { border-color: var(--wia-orange); }

/* ---------- RECHERCHE ---------- */

.wia-search {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 560px;
}
.wia-search-input {
	flex: 1 1 220px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px solid var(--wia-line);
	background: var(--wia-surface);
	color: var(--wia-txt);
	font: inherit;
	font-size: 16px;
}
.wia-search-input::placeholder { color: var(--wia-txt-faint); }
.wia-search-input:focus { outline: none; border-color: var(--wia-orange); }

.wia-searchform { margin-bottom: 40px; }

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

/* ---------- COMMENTAIRES ---------- */

/*
 * Le bloc entier respire : il suit un article, et rien ne le separait de sa
 * derniere ligne.
 */
.wia-comments {
	max-width: 100%;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--wia-line);
}

.wia .wia-comments-title {
	font-size: 22px;
	margin: 0 0 24px;
}

.wia-comment-list {
	list-style: none;
	display: grid;
	gap: 18px;
	margin: 0 0 48px;
	padding: 0;
}

/*
 * Les reponses se decalent, mais moins sur mobile : vingt-quatre pixels par
 * niveau finissent par ne laisser qu'un tiers de la largeur au troisieme.
 */
.wia-comment-list ol {
	list-style: none;
	margin: 18px 0 0 24px;
	padding: 0;
	display: grid;
	gap: 18px;
}

@media (max-width: 600px) {
	.wia-comment-list ol { margin-left: 12px; }
}

.wia-comment-list .comment-body {
	background: var(--wia-surface);
	border: 1px solid var(--wia-line);
	border-radius: var(--wia-radius);
	padding: 22px 24px;
	font-size: 15.5px;
	color: var(--wia-txt-body);
}

.wia-comment-list .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wia-comment-list .comment-author img { border-radius: 50%; }
.wia-comment-list .fn { font-style: normal; font-weight: 700; color: var(--wia-txt); }
.wia-comment-list .comment-meta { font-size: 13px; color: var(--wia-muted); margin-bottom: 12px; }
.wia-comment-list .comment-meta a { color: inherit; text-decoration: none; }

/*
 * « Repondre » et « Modifier » sont des actions, pas des mots dans une phrase.
 * En faire de petits boutons les detache du commentaire qu'ils suivent, et
 * donne au doigt une cible qui n'est pas un lien de quinze pixels.
 */
.wia-comment-list .reply {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.wia-comment-list .reply a,
.wia-comment-list .comment-edit-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	border: 1px solid var(--wia-line);
	border-radius: 999px;
	background: var(--wia-veil-1);
	color: var(--wia-txt);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}

.wia-comment-list .reply a:hover,
.wia-comment-list .reply a:focus-visible,
.wia-comment-list .comment-edit-link:hover,
.wia-comment-list .comment-edit-link:focus-visible {
	border-color: var(--wia-orange);
	color: var(--wia-orange);
	background: rgba(var(--wia-accent-rgb), .10);
}

/* ---------- Formulaire de commentaire ---------- */

/*
 * Le formulaire suit soit la liste des commentaires, soit le filet du haut.
 * Dans les deux cas il lui faut de l air : colle, il se lisait comme la suite
 * du dernier commentaire.
 */
.comment-respond { margin-top: 0; }

.wia-comment-list + .comment-respond { margin-top: 8px; }

/*
 * Le titre et le lien d'annulation partagent la ligne. Colle au titre, le lien
 * se lisait comme la fin de la phrase — « Repondre a Marie Annuler ».
 */
.comment-respond .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 10px;
}

.comment-respond .comment-reply-title small { font-size: 14px; font-weight: 400; }

.comment-respond #cancel-comment-reply-link {
	color: var(--wia-muted);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.comment-respond #cancel-comment-reply-link:hover,
.comment-respond #cancel-comment-reply-link:focus-visible { color: var(--wia-orange); }

.comment-respond .wia-note,
.comment-form .comment-notes {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--wia-muted);
}

.comment-form .logged-in-as {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--wia-muted);
}

/*
 * Deux colonnes, et tout occupe la ligne entiere sauf le nom et l'adresse.
 * La regle est posee sur tous les enfants puis reprise pour ces deux-la : si
 * une extension retire un champ ou en ajoute un, la grille tient toujours.
 * Un conteneur ouvert dans un champ et referme dans un autre — ce que fait le
 * theme parent — se casse des qu'un des deux disparait.
 */
.wia-comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.wia-comment-form > * { grid-column: 1 / -1; }

.wia-comment-form .comment-form-author,
.wia-comment-form .comment-form-email { grid-column: span 1; }

@media (max-width: 620px) {
	.wia-comment-form .comment-form-author,
	.wia-comment-form .comment-form-email { grid-column: 1 / -1; }
}

/*
 * Les paragraphes du formulaire ne sont que des enveloppes : rien ne doit s'y
 * peindre. La bordure du cadre blanc, elle, ne venait pas d'ici mais d'un
 * `fieldset` pose par le theme parent — c'est le balisage qui a change, pas
 * cette regle.
 */
.wia-comment-form p,
.wia-comment-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	min-width: 0;
}

.wia-comment-form legend { display: none; }

.wia-comment-form .wia-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wia-txt-label);
}

.wia-comment-form .wia-req { color: var(--wia-orange); }

.wia-comment-form input[type="text"],
.wia-comment-form input[type="email"],
.wia-comment-form input[type="url"],
.wia-comment-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 13px 16px;
	border-radius: 10px;
	border: 1px solid var(--wia-line);
	background: var(--wia-surface);
	color: var(--wia-txt);
	font: inherit;
	font-size: 16px;
}

.wia-comment-form textarea {
	min-height: 190px;
	resize: vertical;
}

/*
 * Le focus se voit sans deplacer quoi que ce soit : une bordure qui s'epaissit
 * ferait sauter la mise en page d'un pixel a chaque passage d'un champ a
 * l'autre.
 */
.wia-comment-form input:focus,
.wia-comment-form textarea:focus {
	outline: none;
	border-color: var(--wia-orange);
	box-shadow: 0 0 0 3px rgba(var(--wia-accent-rgb), .18);
}

.wia-comment-form ::placeholder { color: var(--wia-muted); opacity: 1; }

/*
 * La case est plus haute que sa ligne de texte : elle s'aligne sur le haut,
 * non sur le milieu, sinon la phrase flotte au-dessus d'elle des qu'elle
 * passe sur deux lignes.
 */
.wia-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wia-muted);
}

.wia-comment-form .comment-form-cookies-consent input {
	flex: none;
	margin: 2px 0 0;
	width: 17px;
	height: 17px;
	accent-color: var(--wia-orange);
}

.wia-comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: inherit;
	cursor: pointer;
}

/*
 * Le bouton se detache du dernier champ, et ne s'etire pas : un bouton pleine
 * largeur annonce une action plus lourde qu'elle ne l'est, et sur un grand
 * ecran son libelle finit perdu au milieu d'un rectangle vide.
 */
.wia-comment-form .form-submit {
	justify-self: start;
	margin: 10px 0 0;
}

.wia .wia-comment-form .form-submit input[type="submit"] {
	min-height: 48px;
	width: auto;
}

@media (max-width: 620px) {
	.wia-comment-form { gap: 16px; }
	.wia-comment-form .form-submit { justify-self: stretch; }
	.wia .wia-comment-form .form-submit input[type="submit"] { width: 100%; }
}

/* ==========================================================================
   ÉDITEUR DE BLOCS — raccords
   Les sections du design sont insérées depuis l'éditeur sous forme de blocs
   natifs. Ce chapitre raccorde le balisage réel de Gutenberg au design
   system : c'est ici que se règlent les questions de spécificité, car les
   sélecteurs de base (`.wia p`, `.wia h2`) ciblent l'élément et l'emportent
   sinon sur les classes utilitaires.
   ========================================================================== */

/* Les sections issues de l'éditeur portent leur propre mise en page
   contrainte : il leur faut la gouttière horizontale de .wia-wrap. */
.wia .wia-section.is-layout-constrained,
.wia .wia-hero.is-layout-constrained {
	padding-left: 24px;
	padding-right: 24px;
}

/* Utilitaires appliqués à des <p> : contrer `.wia p { color }`. */
.wia .wia-eyebrow  { color: var(--wia-orange); }
.wia .wia-badge    { color: var(--wia-accent-soft); }
.wia .wia-lead     { color: var(--wia-txt-body); }
.wia .wia-fine     { color: var(--wia-muted); }
.wia .wia-price-amount {
	color: var(--wia-txt);
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0;
}
.wia .wia-price-from {
	color: var(--wia-orange);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 4px;
}

/* Chiffres clés du hero. */
.wia .wia-stat-value {
	color: var(--wia-txt);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
}
.wia .wia-stat-label {
	color: var(--wia-muted);
	font-size: 13.5px;
	margin: 0;
}
.wia .wia-trust { gap: 34px; }

.wia .wia-more-wrap { margin-top: 14px; margin-bottom: 0; }

/* Les grilles multi-colonnes sont désormais des `core/columns` : on laisse
   le bloc gérer l'empilement responsive et on n'ajuste que l'espacement. */
.wia .wia-hero-grid,
.wia .wia-price-grid,
.wia .wia-steps { gap: 20px; flex-wrap: wrap; }

.wia .wia-price-grid > .wp-block-column,
.wia .wia-steps > .wp-block-column { flex-basis: 220px; }

/* Cartes, tarifs et étapes en tant que colonnes de bloc. */
.wia .wp-block-column.wia-card,
.wia .wp-block-column.wia-price,
.wia .wp-block-column.wia-step,
.wia .wp-block-column.wia-hero-card { align-self: stretch; }

/* Numérotation automatique des étapes. */
.wia .wia-steps { counter-reset: wia-step; }
.wia .wia-step { counter-increment: wia-step; }
.wia .wia-step::before {
	content: counter(wia-step);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-bottom: 14px;
	border-radius: 8px;
	border: 1px solid rgba(var(--wia-accent-rgb), .4);
	background: var(--wia-orange-soft);
	color: var(--wia-orange);
	font-size: 13px;
	font-weight: 900;
}

/* Listes de blocs utilisées en pastilles : neutraliser le retrait natif. */
.wia .wia-villes,
.wia .wia-urgence-tags,
.wia .wia-logo-row { padding-left: 0; list-style: none; }
.wia .wia-villes li { list-style: none; }
.wia .wia-urgence-tags li { list-style: none; }

.wia .wia-hero-card ul { padding-left: 0; list-style: none; }
.wia .wia-hero-card li {
	list-style: none;
	padding-left: 22px;
	position: relative;
}
.wia .wia-hero-card li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wia-orange);
	font-weight: 800;
}

.wia .wia-price ul { padding-left: 0; }
.wia .wia-price li { list-style: none; }

/* Boutons natifs alignés sur le design system. */
.wia .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wia-btn-py) var(--wia-btn-px);
	border: 1px solid var(--wia-btn-border);
	border-radius: var(--wia-btn-radius);
	background: var(--wia-btn-bg);
	color: var(--wia-btn-color);
	font-weight: var(--wia-btn-weight);
	box-shadow: var(--wia-btn-shadow);
	text-decoration: none;
	transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.wia .wp-block-button__link:hover,
.wia .wp-block-button__link:focus-visible {
	background: var(--wia-btn-bg-h);
	color: var(--wia-btn-color-h);
	border-color: var(--wia-btn-border-h);
	box-shadow: var(--wia-btn-shadow-h);
	transform: translateY(var(--wia-btn-lift));
}

.wia .is-style-outline > .wp-block-button__link,
.wia .wp-block-button__link.is-style-outline {
	background: var(--wia-veil-1);
	border-color: var(--wia-line);
	color: var(--wia-txt);
}
.wia .is-style-outline > .wp-block-button__link:hover,
.wia .wp-block-button__link.is-style-outline:hover {
	border-color: var(--wia-orange);
	color: var(--wia-orange);
	background: var(--wia-veil-1);
}

/* Blocs natifs divers. */
.wia .wp-block-details > summary { cursor: pointer; }
.wia .wp-block-image img { border-radius: 10px; }
.wia .wp-block-separator { border-color: var(--wia-line); }
.wia .wp-block-quote {
	border-left: 3px solid var(--wia-orange);
	padding-left: 22px;
	font-style: italic;
}

/* ---------- MENUS : logo image et pied de page ---------- */
/* La navigation principale est traitée plus haut, chapitre HEADER. */

.wia-logo--image img {
	display: block;
	max-height: 44px;
	width: auto;
}

.wia-f-nav { margin-bottom: 26px; }
.wia-f-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 14px;
}
.wia-f-nav-list a { text-decoration: none; }

/* ---------- WIDGETS DU PIED DE PAGE ---------- */

.wia-f-grid { grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 860px) { .wia .wia-f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .wia .wia-f-grid { grid-template-columns: 1fr; } }

.wia-widget + .wia-widget { margin-top: 26px; }
.wia .wia-widget-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wia-txt);
	margin-bottom: 14px;
}
.wia-widget ul { list-style: none; padding-left: 0; display: grid; gap: 9px; }
.wia-widget a { text-decoration: none; }

/* ---------- PRÉFÉRENCES UTILISATEUR ---------- */

@media (prefers-reduced-motion: reduce) {
	html:has(body.wia-site) { scroll-behavior: auto; }
	.wia *,
	.wia *::before,
	.wia *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.wia-card:hover,
	.wia .wia-btn--primary:hover { transform: none; }
}

@media print {
	.wia-header, .wia-burger, .wia-cta-row { display: none !important; }
	body.wia-site { background: #fff; color: #000; }
}
