/*
Theme Name: La Note Ronron
Author: La Note Ronron
Description: Thème sur mesure pour La Note Ronron, toilettage félin itinérant et soins doux à domicile (Rouen).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: lanoteronron
*/

/* ==========================================================================
   Couleurs, polices, mesures
   ========================================================================== */
:root {
	--creme: #FBF7F0;
	--creme-fonce: #F3EADB;
	--blanc: #FFFDF9;
	--sauge: #9AB09A;
	--sauge-clair: #DCE5D9;
	--sauge-fonce: #56705A;
	--terracotta: #E08D79;
	--terracotta-clair: #F7E1D8;
	--terracotta-fonce: #B5543A;
	--encre: #2F3E31;
	--encre-doux: #4B5B4D;

	--f-titre: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
	--f-texte: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-manuscrite: Caveat, "Segoe Print", cursive;

	--contenu: 720px;
	--large: 1180px;
	--gouttiere: clamp(16px, 4vw, 40px);
	--section: clamp(56px, 8vw, 104px);
	--rayon: 26px;
	--rayon-s: 14px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--creme);
	color: var(--encre);
	font-family: var(--f-texte);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--terracotta-fonce); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--encre); }

:focus-visible { outline: 3px solid var(--terracotta-fonce); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
	font-family: var(--f-titre);
	color: var(--encre);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .45em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
h4 { font-size: 1.1rem; }

p, ul, ol { margin: 0 0 1em; }
p { text-wrap: pretty; }
:where(p, ul, ol, figure):last-child { margin-bottom: 0; }

strong { font-weight: 800; }

.lien-evitement {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: 10px;
}
.lien-evitement:focus { top: 12px; }

.icone { width: 1.25em; height: 1.25em; flex: none; }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-family: var(--f-titre); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
	padding: .78em 1.45em .72em;
	border: 2px solid var(--terracotta-fonce); border-radius: 999px;
	background: var(--terracotta-fonce); color: var(--blanc);
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,
.wp-block-button .wp-block-button__link:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }

.btn--contour,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--encre); border-color: var(--encre);
}
.btn--contour:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--encre); color: var(--creme); }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 1.6em 0; }
.wp-block-buttons:not(:last-child) { margin-bottom: 1.4em; }

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */
.entete {
	position: sticky; top: 0; z-index: 20; background: var(--creme); border-bottom: 1.5px solid var(--sauge-clair);
	box-shadow: 0 4px 20px -16px rgba(47, 62, 49, 0);
	transition: box-shadow .25s ease, padding .25s ease;
}
.entete.est-colle { box-shadow: 0 10px 24px -18px rgba(47, 62, 49, .55); }
.entete__interieur {
	max-width: calc(var(--large) + 2 * var(--gouttiere));
	margin: 0 auto; padding: 12px var(--gouttiere);
	display: flex; align-items: center; gap: 20px;
}

.marque { display: flex; align-items: center; gap: 12px; margin-right: auto; color: inherit; text-decoration: none; }
.marque__chat { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--sauge); }
.marque__texte { display: flex; flex-direction: column; }
.marque__nom {
	font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; line-height: 1;
	text-transform: uppercase; letter-spacing: .02em; color: var(--terracotta-fonce);
}
.marque__baseline { font-size: .84rem; color: var(--encre-doux); margin-top: 5px; }

.navigation { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 2px; }
.menu a {
	display: block; padding: 8px 10px; border-radius: 999px; white-space: nowrap;
	color: var(--encre); font-weight: 700; font-size: .93rem; text-decoration: none;
}
.menu a:hover { background: var(--sauge-clair); color: var(--encre); }
.menu .current-menu-item > a,
.menu .current_page_item > a { background: var(--sauge-clair); }
.navigation__rdv { margin-left: 6px; font-size: .95rem; padding: .6em 1.1em .56em; white-space: nowrap; }

.nav-bouton {
	display: none; align-items: center; gap: 8px;
	font: 700 1rem var(--f-titre); color: var(--encre);
	background: var(--sauge-clair); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.nav-bouton .icone { width: 22px; height: 22px; }
.nav-bouton__fermer, .nav-bouton[aria-expanded="true"] .nav-bouton__ouvrir { display: none; }
.nav-bouton[aria-expanded="true"] .nav-bouton__fermer { display: block; }

@media (max-width: 1340px) {
	.js .nav-bouton { display: inline-flex; }
	.js .navigation {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 14px;
		padding: 12px var(--gouttiere) 28px; background: var(--creme);
		border-bottom: 1.5px solid var(--sauge-clair); box-shadow: 0 18px 30px -24px rgba(47, 62, 49, .5);
	}
	.js .navigation.est-ouverte { display: flex; }
	.menu { flex-direction: column; flex-wrap: wrap; }
	.menu a { padding: 12px 14px; font-size: 1.12rem; border-radius: var(--rayon-s); white-space: normal; }
	.navigation__rdv { margin: 0; }
	html:not(.js) .entete__interieur { flex-wrap: wrap; }
	html:not(.js) .menu { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 480px) {
	.marque__chat { width: 48px; height: 48px; }
	.marque__nom { font-size: 1.2rem; }
	.marque__baseline { display: none; }
}

/* ==========================================================================
   Mise en page du contenu (blocs de l'éditeur)
   ========================================================================== */
.contenu > * { width: min(100% - 2 * var(--gouttiere), var(--contenu)); margin-inline: auto; }
.contenu > .alignwide { width: min(100% - 2 * var(--gouttiere), var(--large)); }
.contenu > .alignfull { width: 100%; }

.contenu { padding-block: var(--section); }
.contenu--accueil { padding-top: 0; }
.contenu > :first-child.alignfull { margin-top: calc(-1 * var(--section)); }
.contenu--accueil > :first-child.alignfull { margin-top: 0; }
.contenu > :last-child.alignfull { margin-bottom: calc(-1 * var(--section)); }

.contenu > .alignwide,
.contenu > .alignfull { margin-block: var(--section); }
.contenu > .alignfull + .alignfull { margin-top: calc(-1 * var(--section)); }
.contenu > h2 { margin-top: var(--section); }
.contenu > :first-child { margin-top: 0; }
.contenu > h2 + .alignwide { margin-top: 1.4em; }

/* Bandes de couleur pleine largeur */
.bande { padding: var(--section) var(--gouttiere); }
.bande > * { max-width: var(--large); margin-inline: auto; }
.bande > p, .bande > .wp-block-buttons { max-width: 62ch; }
.bande--sauge { background: var(--sauge); }
.bande--sauge-clair { background: var(--sauge-clair); }
.bande--creme { background: var(--creme-fonce); }
.bande--terracotta { background: var(--terracotta-clair); }

/* Titre de section centré, souligné du cœur dessiné des dépliants */
.titre-section { text-align: center; max-width: 24ch; margin-inline: auto; margin-bottom: 1.1em; }
.titre-section::after {
	content: ""; display: block; width: 140px; height: 24px; margin: 12px auto 0;
	background: url("assets/deco/coeur-trait.svg") center / contain no-repeat;
}
.intro-section { text-align: center; max-width: 60ch; margin: -.4em auto 2.2em; font-size: 1.1rem; }

.wp-block-image { margin: 0 0 1em; }
.wp-block-image img { border-radius: var(--rayon-s); display: block; }
.wp-element-caption { margin-top: .6em; font-size: .92rem; color: var(--encre-doux); text-align: center; }

.contenu ul:not([class*="zones"], .coordonnees, .reseaux, .liste-pattes, .liste-emoji) { padding-left: 1.2em; }
.contenu li + li { margin-top: .35em; }

/* Bandeau de titre des pages intérieures (rayons du logo autour du titre) */
.bandeau-titre { background: var(--sauge); padding: clamp(40px, 7vw, 76px) var(--gouttiere) clamp(44px, 7vw, 80px); text-align: center; }
.bandeau-titre__titre { position: relative; display: inline-block; margin: 0; padding-inline: clamp(44px, 6vw, 64px); }
.bandeau-titre__titre::before,
.bandeau-titre__titre::after {
	content: ""; position: absolute; top: 50%; width: clamp(30px, 4vw, 42px); aspect-ratio: 40 / 36;
	translate: 0 -50%; background: url("assets/deco/rayons.svg") center / contain no-repeat;
}
.bandeau-titre__titre::before { left: 0; }
.bandeau-titre__titre::after { right: 0; scale: -1 1; }
.bandeau-titre__chapo { max-width: 58ch; margin: 16px auto 0; font-size: 1.15rem; font-weight: 600; }

/* ==========================================================================
   Accueil
   ========================================================================== */
.hero { padding: clamp(28px, 5vw, 64px) var(--gouttiere) 0; overflow: hidden; }
.hero .wp-block-columns.hero__colonnes {
	max-width: var(--large); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(20px, 4vw, 64px); align-items: end;
}
.hero__colonnes > .wp-block-column { margin: 0; }
.hero__texte { padding-bottom: clamp(40px, 7vw, 96px); align-self: center; }

.hero__titre {
	font-family: var(--f-manuscrite); font-weight: 700; color: var(--terracotta-fonce);
	font-size: clamp(3rem, 1.6rem + 5.2vw, 5.6rem); line-height: .96; letter-spacing: -.005em;
	margin-bottom: .3em;
}
.hero__sous-titre { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.3; }
.hero__zone { display: flex; align-items: center; gap: .55em; margin-top: 1.6em; font-weight: 700; color: var(--encre-doux); }
.hero__zone::before {
	content: ""; width: 1.4em; height: 1.4em; flex: none; background: var(--terracotta-fonce);
	-webkit-mask: url("assets/icons/pin.svg") center / contain no-repeat; mask: url("assets/icons/pin.svg") center / contain no-repeat;
}

/* L'arche sauge qui « continue » dans la bande suivante, le chat en déborde */
.hero__visuel { position: relative; align-self: end; }
.hero__visuel::before {
	content: ""; position: absolute; inset: 14% 3% 0; border-radius: 999px 999px 0 0; background: var(--sauge);
}
.hero__visuel::after {
	content: ""; position: absolute; top: 4%; right: 0; width: clamp(54px, 8vw, 84px); aspect-ratio: 1;
	background: url("assets/deco/coeur-rayons.svg") center / contain no-repeat;
}
.hero__chat { position: relative; margin: 0; }
.hero__chat img { display: block; width: 100%; max-width: 470px; margin-inline: auto; border-radius: 0; }

@media (max-width: 781px) {
	.hero .wp-block-columns.hero__colonnes { grid-template-columns: 1fr; }
	.hero__texte { padding-bottom: 0; }
	.hero__visuel { max-width: 380px; width: 88%; margin-inline: auto; }
}

/* Points forts (pictogrammes) */
.pictos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.picto { position: relative; background: var(--creme); border-radius: var(--rayon); padding: 26px 18px 24px; text-align: center; }
.picto::before { content: ""; display: block; width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; background: var(--sauge-clair); }
.picto::after {
	content: ""; position: absolute; top: 43px; left: 50%; width: 44px; height: 44px; translate: -50% 0;
	background: var(--encre); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.picto h3 { font-size: 1.16rem; margin-bottom: .35em; }
.picto p { font-size: .97rem; line-height: 1.5; color: var(--encre-doux); }
@media (max-width: 1000px) { .pictos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .picto:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pictos { grid-template-columns: 1fr; } }

.ico-caisse { --ico: url("assets/icons/caisse.svg"); }
.ico-voiture { --ico: url("assets/icons/voiture.svg"); }
.ico-colombe { --ico: url("assets/icons/colombe.svg"); }
.ico-coeurs { --ico: url("assets/icons/coeurs.svg"); }
.ico-maison { --ico: url("assets/icons/maison.svg"); }
.ico-peigne { --ico: url("assets/icons/peigne.svg"); }
.ico-flacon { --ico: url("assets/icons/flacon.svg"); }
.ico-ciseaux { --ico: url("assets/icons/ciseaux.svg"); }
.ico-cadeau { --ico: url("assets/icons/cadeau.svg"); }
.ico-patte { --ico: url("assets/icons/patte.svg"); }
.ico-stethoscope { --ico: url("assets/icons/stethoscope.svg"); }
.ico-bouclier { --ico: url("assets/icons/bouclier.svg"); }
.ico-table { --ico: url("assets/icons/table.svg"); }
.ico-horloge { --ico: url("assets/icons/horloge.svg"); }
.ico-feuille { --ico: url("assets/icons/feuille.svg"); }

/* Texte + photos en arches */
.wp-block-columns.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.duo > .wp-block-column { margin: 0; }
.duo__photos { position: relative; padding-bottom: 12%; }
.duo__photos .wp-block-image { margin: 0; }
.duo__photos .wp-block-image:first-child img { width: 82%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 999px 999px var(--rayon) var(--rayon); }
.duo__photos .wp-block-image + .wp-block-image {
	position: absolute; right: 0; bottom: 0; width: 46%;
}
.duo__photos .wp-block-image + .wp-block-image img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 8px solid var(--creme); }
.duo__texte .citation-manuscrite { margin-block: 1.2em; }
@media (max-width: 781px) { .wp-block-columns.duo { grid-template-columns: 1fr; } .duo--inverse .duo__photos { order: -1; } }

.citation-manuscrite {
	font-family: var(--f-manuscrite); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.2;
	color: var(--terracotta-fonce); padding-left: 18px; border-left: 3px solid var(--terracotta);
}

/* Zone d'intervention */
.zones { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.zones--seul { display: block; max-width: 340px; margin-inline: auto; }
.zones__schema { width: 100%; height: auto; display: block; font-family: var(--f-texte); }
.zones__devis { fill: var(--creme-fonce); stroke: var(--terracotta); stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; }
.zones__niveau1 { fill: var(--terracotta-clair); stroke: var(--terracotta); stroke-width: 1.6; }
.zones__inclus { fill: var(--sauge); stroke: var(--sauge-fonce); stroke-width: 1.6; }
.zones__rayon { stroke: var(--encre); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.zones__repere { stroke: var(--encre); stroke-width: 2; stroke-linecap: round; }
.zones__km { font-size: 13px; font-weight: 800; fill: var(--encre); }
.zones__centre { fill: var(--terracotta-fonce); stroke: var(--creme); stroke-width: 3; }
.zones__ville { font-family: var(--f-titre); font-size: 20px; font-weight: 700; fill: var(--encre); }
.zones__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zones__ligne { display: flex; gap: 14px; align-items: flex-start; background: var(--blanc); border-radius: var(--rayon-s); padding: 16px 18px; }
.zones__ligne > span:last-child { display: flex; flex-direction: column; }
.zones__ligne strong { font-family: var(--f-titre); font-size: 1.1rem; }
.zones__prix { font-weight: 800; color: var(--terracotta-fonce); }
.zones__pastille { width: 22px; height: 22px; flex: none; border-radius: 50%; margin-top: 3px; border: 1.6px solid var(--sauge-fonce); background: var(--sauge); }
.zones__ligne--niveau1 .zones__pastille { background: var(--terracotta-clair); border-color: var(--terracotta); }
.zones__ligne--devis .zones__pastille { background: var(--creme-fonce); border: 1.6px dashed var(--terracotta); }
@media (max-width: 700px) { .zones { grid-template-columns: 1fr; } .zones__schema { max-width: 320px; margin-inline: auto; } }

.wp-block-columns.zone-accueil { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.zone-accueil > .wp-block-column { margin: 0; }
@media (max-width: 781px) { .wp-block-columns.zone-accueil { grid-template-columns: 1fr; } }

/* Avis */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.avis-carte { background: var(--blanc); border-radius: var(--rayon); padding: 26px 26px 24px; display: flex; flex-direction: column; }
.avis-carte::before {
	content: "“"; font-family: var(--f-titre); font-weight: 800; font-size: 4.2rem; line-height: .7;
	color: var(--terracotta); height: .45em; margin-bottom: .1em;
}
.avis-carte .avis-texte { font-size: 1.05rem; flex: 1; }
.avis-carte .avis-auteur { font-weight: 800; color: var(--encre-doux); margin: 1em 0 0; font-size: .95rem; }
.etiquette {
	display: inline-block; align-self: flex-start; margin: 0 0 .9em;
	font-size: .8rem; font-weight: 800; line-height: 1.2; color: var(--terracotta-fonce);
	background: var(--terracotta-clair); padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 900px) { .avis { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Appel à l'action */
.appel { text-align: center; }
.appel > * { max-width: 60ch; margin-inline: auto; }
.appel .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   Prestations
   ========================================================================== */
.offerts {
	display: flex; gap: 16px; align-items: center;
	background: var(--sauge-clair); border-radius: var(--rayon); padding: 20px 26px;
	font-weight: 700; font-size: 1.08rem;
}
.offerts::before {
	content: ""; width: 40px; height: 40px; flex: none; background: var(--terracotta-fonce);
	-webkit-mask: url("assets/icons/cadeau.svg") center / contain no-repeat; mask: url("assets/icons/cadeau.svg") center / contain no-repeat;
}

.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.formule {
	position: relative; display: flex; flex-direction: column;
	background: var(--blanc); border: 2px solid var(--sauge-clair); border-radius: var(--rayon); padding: 28px 26px 26px;
}
.formule::after {
	content: ""; position: absolute; top: 26px; right: 24px; width: 42px; height: 42px;
	background: var(--sauge-fonce); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.formule h3 { font-size: 1.45rem; padding-right: 52px; margin-bottom: .1em; }
.formule .formule__precision { font-size: .92rem; color: var(--encre-doux); margin-bottom: .2em; }
.formule .formule__prix { font-family: var(--f-titre); font-weight: 800; font-size: 2.7rem; line-height: 1; color: var(--terracotta-fonce); margin: .35em 0 .25em; }
.formule .formule__duree { display: flex; align-items: center; gap: .45em; font-weight: 800; color: var(--encre-doux); padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1.5px dashed var(--sauge); }
.formule .formule__duree::before {
	content: ""; width: 1.2em; height: 1.2em; background: currentColor;
	-webkit-mask: url("assets/icons/horloge.svg") center / contain no-repeat; mask: url("assets/icons/horloge.svg") center / contain no-repeat;
}
.formule > p:last-child { font-size: .99rem; }
@media (max-width: 900px) { .formules { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.supplement { border: 2px dashed var(--terracotta); border-radius: var(--rayon); padding: 20px 26px; background: var(--blanc); }
.supplement p + p { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--sauge); }

.avantages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.avantage { background: var(--terracotta-clair); border-radius: var(--rayon); padding: 24px 26px; }
.avantage .avantage__valeur { font-family: var(--f-titre); font-weight: 800; font-size: 1.9rem; line-height: 1.1; color: var(--terracotta-fonce); margin-bottom: .2em; }
@media (max-width: 700px) { .avantages { grid-template-columns: 1fr; } }

/* Les étapes d'une séance (vraie séquence : numérotées) */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.etape { counter-increment: etape; background: var(--creme); border-radius: var(--rayon); padding: 22px 22px 24px; }
.etape::before {
	content: counter(etape); display: block; font-family: var(--f-manuscrite); font-weight: 700;
	font-size: 2.6rem; line-height: 1; color: var(--terracotta-fonce); margin-bottom: 8px;
}
.etape h3 { font-size: 1.15rem; }
.etape p { font-size: .97rem; line-height: 1.55; }

.reglement { display: flex; gap: 18px; align-items: flex-start; background: var(--creme-fonce); border-radius: var(--rayon); padding: 24px 26px; }
.reglement::before {
	content: ""; width: 38px; height: 38px; flex: none; background: var(--sauge-fonce);
	-webkit-mask: url("assets/icons/carte.svg") center / contain no-repeat; mask: url("assets/icons/carte.svg") center / contain no-repeat;
}

/* ==========================================================================
   À propos
   ========================================================================== */
.valeurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.valeur { position: relative; background: var(--creme); border-radius: var(--rayon); padding: 26px 24px 24px 24px; }
.valeur::before {
	content: ""; display: block; width: 46px; height: 46px; margin-bottom: 14px;
	background: var(--terracotta-fonce); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
@media (max-width: 860px) { .valeurs { grid-template-columns: 1fr; } }

.partenaires { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); background: var(--creme-fonce); border-radius: var(--rayon); padding: clamp(26px, 4vw, 48px); }
.partenaires h2::before {
	content: ""; display: block; width: 48px; height: 48px; margin-bottom: 12px; background: var(--sauge-fonce);
	-webkit-mask: url("assets/icons/stethoscope.svg") center / contain no-repeat; mask: url("assets/icons/stethoscope.svg") center / contain no-repeat;
}
@media (max-width: 781px) { .partenaires { grid-template-columns: 1fr; } }

.liste-pattes { list-style: none; padding: 0; }
.liste-pattes li { position: relative; padding-left: 34px; }
.liste-pattes li + li { margin-top: .8em; }
.liste-pattes li::before {
	content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; background: var(--sauge-fonce);
	-webkit-mask: url("assets/icons/patte.svg") center / contain no-repeat; mask: url("assets/icons/patte.svg") center / contain no-repeat;
}

/* ==========================================================================
   Galerie
   ========================================================================== */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.galerie .wp-block-image { margin: 0; }
.galerie .wp-block-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); }
@media (max-width: 860px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .galerie { gap: 10px; } .galerie .wp-element-caption { font-size: .82rem; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.wp-block-columns.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.contact > .wp-block-column { margin: 0; border-radius: var(--rayon); padding: clamp(24px, 3.5vw, 40px); }
.contact__infos { background: var(--sauge-clair); }
.contact__formulaire { background: var(--blanc); border: 2px solid var(--sauge-clair); }
@media (max-width: 860px) { .wp-block-columns.contact { grid-template-columns: 1fr; } }

.coordonnees { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 18px; }
.coordonnees li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.coordonnees .icone { width: 26px; height: 26px; margin-top: 2px; color: var(--terracotta-fonce); }
.coordonnees li > span { display: flex; flex-direction: column; }
.coordonnees li > span > span { font-size: .95rem; color: var(--encre-doux); }
.coordonnees a { color: var(--encre); }
.coordonnees .lien-tel { font-family: var(--f-titre); font-size: 1.5rem; line-height: 1.2; text-decoration: none; }

.form-rdv__aide { font-size: .93rem; color: var(--encre-doux); }
.form-rdv__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 1.4em; }
.champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 800; font-size: .97rem; }
.champ__facultatif { font-weight: 600; color: var(--encre-doux); }
.champ input, .champ textarea {
	width: 100%; font: inherit; color: var(--encre);
	background: var(--creme); border: 1.5px solid #B7C5B5; border-radius: 12px; padding: 11px 14px;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--terracotta-fonce); box-shadow: 0 0 0 3px var(--terracotta-clair); background: var(--blanc); }
.champ--erreur input { border-color: var(--terracotta-fonce); }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-rdv .btn { width: 100%; font-size: 1.12rem; }
.form-rdv__rappel {
	margin-top: 1.1em; padding: 14px 16px; border-radius: var(--rayon-s); background: var(--sauge-clair);
	font-weight: 700; font-size: .98rem;
}
.form-rdv__rgpd { font-size: .86rem; color: var(--encre-doux); margin-top: .9em; }
@media (max-width: 560px) { .form-rdv__grille { grid-template-columns: 1fr; } }

.notice { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--rayon-s); padding: 16px 18px; margin-bottom: 1.4em; }
.notice .icone { width: 26px; height: 26px; }
.notice ul { margin: .4em 0 0; padding-left: 1.2em; }
.notice--ok { background: var(--sauge-clair); }
.notice--erreur { background: var(--terracotta-clair); color: #7A2E1C; display: block; }

/* ==========================================================================
   Charte, FAQ, pages légales
   ========================================================================== */
.charte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.charte__bloc { background: var(--blanc); border: 2px solid var(--sauge-clair); border-radius: var(--rayon); padding: clamp(22px, 3vw, 34px); }
.charte__bloc h2 { font-size: 1.45rem; }
.liste-emoji { list-style: none; padding: 0; }
.liste-emoji li + li { margin-top: .75em; }
@media (max-width: 860px) { .charte { grid-template-columns: 1fr; } }

.wp-block-details { border-bottom: 1.5px solid var(--sauge); }
.wp-block-details:first-of-type { border-top: 1.5px solid var(--sauge); }
.wp-block-details summary {
	position: relative; list-style: none; cursor: pointer;
	font-family: var(--f-titre); font-weight: 700; font-size: 1.18rem; line-height: 1.3;
	padding: 20px 52px 20px 0;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: ""; position: absolute; right: 8px; top: 50%; width: 24px; height: 24px; translate: 0 -50%;
	background: var(--terracotta-fonce); transition: rotate .2s ease;
	-webkit-mask: url("assets/icons/plus.svg") center / contain no-repeat; mask: url("assets/icons/plus.svg") center / contain no-repeat;
}
.wp-block-details[open] summary::after { rotate: 45deg; }
.wp-block-details > :not(summary) { margin: 0 0 1.4em; padding-right: 52px; }
.wp-block-details + .wp-block-details { margin-top: 0; }

.page-mentions-legales-cgv .contenu h2,
.page-cgu .contenu h2 { font-size: 1.7rem; margin-top: 1.8em; }
.page-mentions-legales-cgv .contenu h3,
.page-cgu .contenu h3 { font-size: 1.2rem; margin-top: 1.5em; }
.a-completer { background: var(--terracotta-clair); color: #7A2E1C; padding: 0 6px; border-radius: 6px; font-weight: 700; }

/* ==========================================================================
   404
   ========================================================================== */
.page-404 { text-align: center; padding: var(--section) var(--gouttiere); max-width: 640px; margin: 0 auto; }
.page-404 img { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 24px; display: block; box-shadow: 0 0 0 4px var(--creme), 0 0 0 6px var(--sauge); }
.page-404__boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied { background: var(--encre); color: var(--creme); padding: clamp(48px, 7vw, 80px) var(--gouttiere) 0; }
.pied a { color: var(--creme); }
.pied a:hover { color: var(--terracotta); }
.pied :focus-visible { outline-color: var(--terracotta); }
.pied__interieur { max-width: var(--large); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1.3fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.pied__marque img { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 3px var(--encre), 0 0 0 5px var(--sauge); }
.pied__nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; color: var(--terracotta); margin: 14px 0 4px; }
.pied__slogan { font-family: var(--f-manuscrite); font-size: 1.45rem; line-height: 1.2; color: var(--sauge-clair); }
.pied__titre { color: var(--creme); font-size: 1.15rem; margin-bottom: .9em; }
.pied__liste, .pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .98rem; }
.pied__liste li { display: flex; gap: 10px; align-items: flex-start; }
.pied__liste .icone { margin-top: 3px; color: var(--sauge); }
.pied__conditions { font-size: .88rem; color: var(--sauge-clair); margin-top: 1.2em; }
.pied__copyright { max-width: var(--large); margin: clamp(36px, 5vw, 56px) auto 0; padding: 20px 0 28px; border-top: 1px solid rgba(220, 229, 217, .25); font-size: .9rem; color: var(--sauge-clair); }
@media (max-width: 960px) { .pied__interieur { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__interieur { grid-template-columns: 1fr; } }

.reseaux { list-style: none; margin: 0 0 1em; padding: 0; display: flex; gap: 10px; }
.reseaux a, .reseaux__bientot {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(220, 229, 217, .12); color: var(--creme);
}
.reseaux a:hover { background: var(--terracotta); color: var(--encre); }
.reseaux__bientot { opacity: .55; }
.reseaux .icone { width: 22px; height: 22px; }

/* ==========================================================================
   Préférences d'accessibilité
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Animations : apparition au défilement et parallax léger
   ========================================================================== */
[id] { scroll-margin-top: 96px; }

.animation-prete .reveal {
	opacity: 0; transform: translateY(26px);
	transition: opacity .7s ease, transform .7s ease;
}
.animation-prete .reveal.est-visible { opacity: 1; transform: translateY(0); }
.animation-prete .reveal--groupe > * { transition-delay: calc(var(--retard, 0) * 90ms); }

.hero__chat img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.animation-prete .reveal { opacity: 1; transform: none; transition: none; }
}

/* Sur fond sauge, le cœur dessiné passe en terracotta foncé pour rester lisible */
.bande--sauge .titre-section::after,
.bande--sauge-clair .titre-section::after { background-image: url("assets/deco/coeur-trait-fonce.svg"); }

/* Liens dans les bandes colorées : vert encre (le terracotta y manque de contraste) */
.bande a:not(.wp-block-button__link) { color: var(--encre); font-weight: 800; }
.bande a:not(.wp-block-button__link):hover { color: var(--terracotta-fonce); }
.etiquette { color: #8A3824; }

/* Pictogrammes en lignes compactes sur téléphone */
@media (max-width: 520px) {
	.pictos { gap: 10px; }
	.picto { text-align: left; padding: 18px 18px 18px 92px; min-height: 96px; }
	.picto::before { position: absolute; left: 16px; top: 18px; width: 60px; height: 60px; margin: 0; }
	.picto::after { left: 46px; top: 32px; width: 32px; height: 32px; }
}