/* Pages de services : Éducation et ses 4 sous-pages, Centre aéré (service), Dog wash.
   Recette du 05/11/2026 (branche feature/recette-services), fidélité aux maquettes Claude Design
   (build/src/). Chargée après core-blocks.css par includes/pages-services.php. Chaque règle est bornée à
   un style de groupe propre à ces pages : rien ne change ailleurs. */

/* ---------- Cartes « Nos centres » (maquettes Education Canine et Education Service, section centres) :
   carte blanche bordée, rayon 12, marge 20 ; nom du centre (Outfit 20), puis région (12 px, capitales espacées,
   encre secondaire ; v0.38.0 : plus en surtitre), « Voir le centre → » (14 px / 500, accent foncé) ; pas de
   pictogramme ; toute la carte est cliquable (lien étiré). Grille auto-fit de 200 px, écart 12. ---------- */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd.cnd-icon-list.cnd-icon-list--grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__item {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
	transition: border-color .2s;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__item:hover {
	border-color: var(--brand-border);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__icon {
	display: none;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__content {
	gap: 6px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-3);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__title {
	font-size: 20px;
	line-height: 1.2;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__meta {
	margin-top: 6px;
	padding-top: 0;
	font-size: 14px;
	font-weight: 500;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__meta a {
	color: var(--brand-strong);
	text-decoration: none;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__meta a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__meta a:focus-visible {
	outline: none;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-centres-cartes .cnd-icon-list__meta a:focus-visible::after {
	outline: 2px solid var(--focus, var(--brand-strong));
	outline-offset: 2px;
}

/* ---------- Hero de la page Éducation (maquette Education Canine) : H1 au barème « md » (28 à 46 px) mais
   sur 20 caractères, comme la maquette (« Votre centre d'éducation / canine pour chiens et chiots »). ---------- */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-hero-20ch .cnd.cnd-hero.cnd-hero--immersive h1.cnd-hero__title {
	max-width: 20ch;
}

/* ---------- Sous-pages Éducation (maquette Education Service) ---------- */

/* Objectifs et « pour qui » : texte et photo centrés verticalement ; listes à puces rondes accent (●),
   14 px, écart 10 ; photo rayon 16. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-puces-accent > .wp-block-columns {
	align-items: center !important; /* v0.38.0 : le cœur force « normal !important » */
	gap: 32px 40px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-image img {
	border-radius: 16px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-list.is-style-cnd-coches {
	font-size: var(--t-small);
	line-height: 1.5;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-list.is-style-cnd-coches > li {
	padding-left: 20px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-list.is-style-cnd-coches > li + li {
	margin-top: 10px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-list.is-style-cnd-coches > li::before {
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
	-webkit-mask: none;
	mask: none;
}

/* Prérequis : coche dans un cercle bordé accent (24 px), comme la maquette. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis.is-style-cnd-carte-section .wp-block-list.is-style-cnd-coches > li {
	padding-left: 36px;
	min-height: 24px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis.is-style-cnd-carte-section .wp-block-list.is-style-cnd-coches > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 1.5px solid var(--brand);
	border-radius: 50%;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis.is-style-cnd-carte-section .wp-block-list.is-style-cnd-coches > li::before {
	left: 5px;
	top: 4px;
	width: 14px;
	height: 14px;
}

/* Format : pastilles d'infos teintées (durée, fréquence) en ligne, 14 px, rayon 12. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-infos-teintees {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-infos-teintees > p {
	flex: 1 1 240px;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--brand-tint-2);
	border-radius: 12px;
	background: var(--brand-tint);
	font-size: var(--t-small);
	line-height: 1.5;
	color: var(--ink);
}

/* Citation : carte blanche bordée, rayon 16, marge 32 ; portrait rond de 80 px ; citation Outfit 20. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-image {
	flex: 0 0 80px;
	margin: 0;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-image img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	background: var(--brand-tint);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-group {
	flex: 1 1 320px;
	min-width: 0;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-group > p:first-child {
	margin: 0 0 10px;
	max-width: none;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.35;
	color: var(--ink);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-group > p:last-child {
	margin: 0;
	font-size: var(--t-small);
	color: var(--ink-3);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation > .wp-block-group > p:last-child strong {
	font-weight: 600;
	color: var(--ink);
}
@media (max-width: 899px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-citation {
		padding: 24px 20px;
	}
}

/* Recette du 05/11 (2e passe), mesures de la maquette Education Service :
   - prérequis : colonne titre de 320 px au plus, écart 24/40, d'où 3 colonnes de coches à 1440 ;
   - photos des sections objectifs et « pour qui » : 400 px de haut (260 en mobile), recadrées ;
   - listes à puces : 16 px au-dessus, 20 px dessous ; pastilles d'infos sans mesure de lecture ;
   - « Ce que votre chiot va apprendre » : cartes blanches bordées (rayon 12, marge 16/20), coche
     simple de 16 px, grille de 260 px. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis .wp-block-group.is-style-cnd-entete {
	gap: 24px 40px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis .wp-block-group.is-style-cnd-entete > :first-child {
	flex: 1 1 220px;
	max-width: 320px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #prerequis .wp-block-group.is-style-cnd-entete > .wp-block-list.is-style-cnd-coches {
	flex: 2 1 400px;
	max-width: none; /* Sans la mesure de lecture (618 px), la grille passe à 3 colonnes à 1440. */
	gap: 10px 24px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-image img {
	width: 100%;
	height: 400px;
	aspect-ratio: auto !important;
	object-fit: cover;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-list.is-style-cnd-coches {
	margin: 16px 0 20px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group.is-style-cnd-infos-teintees > p {
	max-width: none;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-advantages.cnd-advantages--compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-advantages.cnd-advantages--compact .cnd-advantage {
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	box-shadow: none;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-advantages.cnd-advantages--compact .cnd-advantage__check {
	width: auto;
	height: auto;
	margin-top: 2px;
	border: 0;
	background: none;
	color: var(--brand-strong);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-advantages.cnd-advantages--compact .cnd-advantage__title {
	padding-top: 0;
	color: var(--ink);
}
@media (max-width: 899px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .is-style-cnd-puces-accent .wp-block-image img {
		height: 260px;
	}
}

/* Tarifs de l'Éducation au modèle du Centre aéré : 6 cartes sur 3 colonnes (3 + 3) au lieu de 4 + 2. */
@media (min-width: 900px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper)[data-branch="education"] #tarifs .cnd.cnd-pricing-cards.cnd-pricing-cards--prix-tete {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper)[data-branch="education"] #tarifs .cnd.cnd-pricing-cards.cnd-pricing-cards--prix-tete {
	row-gap: 28px;
}

/* ---------- Centre aéré (maquette Centre Aere) ---------- */

/* Carte « Juliette » : bordure neutre et rayon 20 ; photo de 340 px de haut (rayon 16) ; marges 32, puis 24 / 20
   sous 900 px. v0.38.0 : surtitre retiré (ici et dans « Notre approche » du dog wash). */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #responsable.wp-block-group.is-style-cnd-carte-section {
	border-color: var(--line);
	border-radius: 20px;
	padding: 32px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #responsable .wp-block-image img {
	height: 340px;
	width: 100%;
	aspect-ratio: auto !important;
	border-radius: 16px;
}
@media (max-width: 899px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #responsable.wp-block-group.is-style-cnd-carte-section {
		padding: 24px 20px;
	}
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #responsable .wp-block-image img {
		height: 245px;
	}
}

/* Format des sous-pages Éducation : étapes en 4 colonnes, numéro dans une pastille ronde (40 px, teinte et
   bordure accent, chiffre seul en 18 px), titre 17 px, texte 14 px ; trait d'union teinté derrière les
   pastilles en bureau. Le chiffre vient d'un compteur CSS (le bloc écrit « 1. »). */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps {
	position: relative;
	gap: 16px;
	counter-reset: cnd-format;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps .cnd-step {
	position: relative;
	border-radius: 12px;
	padding: 24px;
	counter-increment: cnd-format;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps .cnd-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	box-sizing: border-box;
	border: 1.5px solid var(--brand);
	border-radius: 50%;
	background: var(--brand-tint);
	font-size: 0;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps .cnd-step__number::before {
	content: counter(cnd-format);
	font-size: 18px;
	line-height: 1;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps .cnd-step__title {
	font-size: 17px;
	margin-bottom: 6px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps .cnd-step__text {
	font-size: var(--t-small);
}
@media (min-width: 900px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #format .cnd.cnd-steps::before {
		content: "";
		position: absolute;
		left: 40px;
		right: 40px;
		top: 44px;
		height: 1px;
		background: var(--brand-tint-2);
	}
}

/* ---------- Dog wash (maquette Dog Wash) ---------- */

/* Bandeau « Venez sans rendez-vous… » : marges 32, rayon 16, titre Outfit 22 ; « Infos pratiques » en 22. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #avantages .wp-block-group.is-style-cnd-bandeau-action {
	margin-top: 24px;
	padding: 32px;
	border-radius: 16px;
	gap: 16px 32px;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #avantages .wp-block-group.is-style-cnd-bandeau-action > h3,
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #apropos.is-style-cnd-infos > h3 {
	font-size: 22px;
	line-height: 1.3;
}
@media (max-width: 899px) {
	:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) #avantages .wp-block-group.is-style-cnd-bandeau-action {
		padding: 24px 20px;
	}
}

/* ---------- Dog wash : tarifs (v0.36.0) ----------
   Tableau à une colonne de prix (tranche de poids | prix) : sur ordinateur, à la largeur d'une colonne de
   lecture plutôt que sur toute la page ; sous 768 px, le bloc le présente déjà en une carte. */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper)[data-branch="dogwash"] #tarifs .cnd-compare {
	max-width: 560px;
}
