/*
Theme Name: Chien Chien (Kadence Child — Kaliciel)
Theme URI: https://kaliciel.eu
Description: Thème enfant sur-mesure pour "chien chien." (Enora Seveno, éducatrice comportementaliste canine), basé sur Kadence. Développé par Kaliciel.
Author: Kaliciel
Author URI: https://kaliciel.eu
Template: kadence
Version: 1.0.0
Text Domain: chien-chien
*/

/* La couleur, la typographie et les espacements globaux sont gérés dans
   theme.json (onglet "Styles" de l'éditeur de site). Ce fichier ne contient
   que : l'accessibilité transverse, et le style des blocs sur-mesure
   (hero, tarifs, contact) qui ne peuvent pas tout faire en JSON. */

/* ===================== Accessibilité ===================== */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: #2d3e8d;
	color: #fff;
	padding: 12px 20px;
	z-index: 100000;
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 6px 0;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 0;
}

:focus-visible {
	outline: 3px solid #2d3e8d;
	outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Titres : Paytone One partout, quelle que soit la version du modèle
   (pattern) d'origine de la section. Un titre qui reçoit une autre police
   dans l'éditeur (réglage Typographie du bloc) garde son choix. */
.entry-content :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
}

/* Texte courant : la police "Texte courant" s'applique à tout le site
   (Apparence > Polices du site). */
body,
button,
input,
select,
textarea {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
}
/* Par défaut, tout texte courant suit la charte (police "Texte courant"),
   même si Kadence ou un bloc posé à la main impose une autre police. Les
   titres, les menus et les éléments du thème ont leurs propres règles,
   plus précises, qui restent prioritaires. */
html body :is(p, li, td, th, dd, figcaption, blockquote, label):not([class*="kaliciel-"]):not([style*="font-family"]):not(header *, nav *, #mobile-drawer *),
html body :is(p, li, td, th, dd, figcaption, blockquote, label):not([class*="kaliciel-"]):not([style*="font-family"]):not(header *, nav *, #mobile-drawer *) :is(a, strong, em, b, i, span, mark):not([style*="font-family"]) {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif) !important;
}
/* Anciennes sections collées avec la police du système écrite sur chaque
   bloc : remplacée par la police de la charte. */
[style*="Ubuntu"] {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif) !important;
}
/* Les sections déjà posées ont gardé la police écrite directement sur
   chaque bloc : ces règles la remplacent par le réglage du site. */
[style*="Paytone One"] {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif) !important;
}
[style*="Quicksand"] {
	font-family: var(--cc-font-accroche, "Quicksand", sans-serif) !important;
}
[style*="Work Sans"] {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif) !important;
}

/* Évite tout interstice blanc entre deux sections pleine largeur qui se suivent. */
.wp-block-group.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* ===================== Photos des sections (patterns) ===================== */
/* Neutralise toute bordure/ombre que Kadence pourrait appliquer par défaut
   aux images, pour un rendu net correspondant à la maquette. */
.kaliciel-photo img {
	border: none !important;
	box-shadow: none !important;
	border-radius: 12px;
}
/* Même hauteur pour toutes les photos de section, quelle que soit la
   taille d'origine du fichier — évite les cadres de tailles différentes
   entre À propos / Histoire / Approche. */
.kaliciel-photo.has-fixed-height img {
	height: var(--kaliciel-img-h);
	width: auto;
}
/* Photo réglée en hauteur : l'image garde ses proportions et la colonne
   s'ajuste à sa largeur (le texte occupe le reste). Plafond en largeur
   d'écran pour ne jamais déborder. */
@media (min-width: 782px) {
	.wp-block-column:has(.kaliciel-photo.has-fixed-height) {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.kaliciel-photo.has-fixed-height img {
		max-width: 60vw;
	}
}
/* Mobile : toutes les photos de section ont la même largeur (celle de
   l'écran) et gardent leurs proportions d'origine (aucun recadrage), donc elles sont alignées d'une section à
   l'autre, quelle que soit la taille réglée sur ordinateur. */
@media (max-width: 781px) {
	/* La colonne et la figure prennent exactement toute la largeur du
	   contenu, sans marge ni décalage, pour que le bord gauche des photos
	   soit le même que celui des textes. */
	.wp-block-columns > .wp-block-column:has(.kaliciel-photo) {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Sur mobile, la photo passe toujours après le texte, quel que soit
	   son côté sur ordinateur. */
	.wp-block-columns > .wp-block-column:has(.kaliciel-photo) {
		order: 2;
	}
	.kaliciel-photo,
	.kaliciel-photo.has-fixed-height {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box;
	}
	.kaliciel-photo img,
	.kaliciel-photo.has-fixed-height img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain;
	}
}
.kaliciel-photo {
	margin: 0;
}
.kaliciel-photo-fixed img {
	width: 100%;
	height: 520px;
	object-fit: cover;
}
@media (max-width: 600px) {
	.kaliciel-photo-fixed img {
		height: auto;
		object-fit: contain;
	}
}

/* Petit logo dans les sections Tarifs / Contact (icône seule, pas le
   logo complet avec texte utilisé dans le hero). La largeur réelle vient
   du style inline posé par le bloc Image — ceci ne sert que de filet de
   sécurité si jamais aucune largeur n'est définie. Redimensionnable
   librement depuis le champ "Largeur" du bloc, ou par glisser des poignées. */
.kaliciel-mini-logo {
	/* Les navigateurs posent une marge par défaut sur <figure> (1em en haut,
	   40px sur les côtés) : sans ce reset, le logo paraît décalé par
	   rapport au texte juste à côté, même avec un alignement correct. */
	margin: 0;
}
:where(.kaliciel-mini-logo) img {
	/* Taille par défaut seulement : dès qu'on règle la largeur du bloc, la
	   valeur choisie (écrite sur l'image) la remplace. */
	width: 90px;
	height: auto;
	object-fit: contain;
}
/* Aucun plafond de largeur sur ordinateur : un pourcentage de la colonne
   (qui s'adapte justement à l'image) bloquait l'agrandissement. Sur
   mobile, l'image ne dépasse jamais l'écran. */
.kaliciel-mini-logo.kaliciel-mini-logo img {
	max-width: none;
}
@media (max-width: 781px) {
	.kaliciel-mini-logo.kaliciel-mini-logo img {
		max-width: 100%;
	}
}
/* La colonne qui porte le logo s'adapte à sa taille au lieu d'imposer
   une largeur fixe : le logo peut être agrandi sans être coincé. */
@media (min-width: 782px) {
	.wp-block-column:has(.kaliciel-mini-logo) {
		flex: 0 0 auto !important;
		width: auto !important;
	}
}
.wp-block-group:has(.kaliciel-mini-logo) {
	flex-wrap: wrap;
}
/* Garantit que l'emplacement reste visible/cliquable dans l'éditeur
   tant qu'aucune image n'a été choisie, quelle que soit sa largeur. */
.kaliciel-mini-logo.is-placeholder,
.kaliciel-mini-logo:empty {
	min-height: 64px;
	min-width: 64px;
	display: block;
}

/* ===================== Bloc Hero (kaliciel/hero) ===================== */

.kaliciel-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--chien-bleu, #2d3e8d);
	text-align: center;
	/* Sans photo : un bandeau bleu de hauteur raisonnable. */
	min-height: 320px;
	padding: 2rem;
}
/* Avec photo : l'image dicte la hauteur du bandeau. Elle occupe toute la
   largeur et garde ses proportions d'origine — aucun recadrage, aucun
   redimensionnement forcé. Pour changer le cadrage, il suffit de
   remplacer le fichier image. Le logo/l'accroche se superposent au centre. */
.kaliciel-hero.has-image {
	display: block;
	min-height: 0;
	padding: 0;
}
.kaliciel-hero__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}
.kaliciel-hero__media {
	position: relative;
}
/* Le logo est centré dans la PHOTO elle-même (du haut au bas de l'image,
   sous le menu transparent compris), et non dans le bandeau. */
.kaliciel-hero.has-image .kaliciel-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	padding: 0 1rem;
	box-sizing: border-box;
	z-index: 1;
}
/* Dégradé renforcé juste en haut de la photo (là où le fond est clair
   et où passent le texte/menu blancs), qui s'estompe vite pour ne pas
   assombrir toute l'image. */
.kaliciel-hero::before,
.kaliciel-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.3) 18%,
		rgba(0, 0, 0, 0.1) 38%,
		rgba(0, 0, 0, 0) 60%
	);
	pointer-events: none;
}
.kaliciel-hero:has(> .kaliciel-hero__media)::before {
	display: none;
}
.kaliciel-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 100%;
}
.kaliciel-hero__logo {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
/* Le logo rétrécit avec la fenêtre : il ne dépasse jamais 60 % de la hauteur
   de la photo. La hauteur de la photo vaut (largeur écran ÷ proportions de
   la photo) ; la largeur max du logo en découle grâce à ses propres
   proportions. Le réglage « Taille du logo » reste la taille maximale. */
.kaliciel-hero.has-image {
	--kaliciel-hero-eff: var(--kaliciel-hero-ratio, 2);
}
.kaliciel-hero .kaliciel-hero__logo {
	width: min(
		var(--kaliciel-logo-w, 220px),
		calc(60vw * var(--kaliciel-logo-ratio, 0.9) / var(--kaliciel-hero-eff, 2))
	) !important;
}
.kaliciel-hero .kaliciel-hero__tagline:empty {
	display: none;
}
/* Mobile : la photo garde ses proportions d'origine (aucun recadrage).
   Pour la rendre plus haute (avec recadrage latéral), mettre par exemple
   --kaliciel-hero-zoom: 1.75 sur .kaliciel-hero. */
@media (max-width: 781px) {
	.kaliciel-hero.has-image {
		--kaliciel-hero-eff: calc(var(--kaliciel-hero-ratio, 2) / var(--kaliciel-hero-zoom, 1));
	}
	.kaliciel-hero__image {
		aspect-ratio: var(--kaliciel-hero-eff);
		object-fit: cover;
		object-position: center;
	}
	.kaliciel-hero .kaliciel-hero__tagline {
		font-size: 1rem;
	}
}
.kaliciel-hero__logo-fallback {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	font-size: 2.5rem;
	color: #fff;
	margin: 0 0 0.5rem;
}
.kaliciel-hero .kaliciel-hero__tagline {
	font-family: var(--cc-font-accroche, "Quicksand", sans-serif);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	margin: 0;
	padding: 0;
}

/* ===================== Module Tarifs (CPT "tarif") ===================== */

.kaliciel-tarifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	/* "Voir plus" ouvre maintenant une fenêtre modale (plus de dépliage sur
	   place), donc rien n'empêche d'étirer toutes les cartes d'une même
	   ligne à la hauteur de la plus grande — comportement par défaut de la
	   grille, volontairement conservé pour un rendu uniforme. */
}
.kaliciel-tarif-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.kaliciel-tarif-card.is-mise-en-avant {
	border: 2px solid #d12e2d;
	box-shadow: 0 4px 18px rgba(209, 46, 45, 0.2);
}
.kaliciel-tarif-card__visuel {
	width: var(--kaliciel-card-visuel, 56px);
	max-width: 100%;
	height: auto;
	margin: 0 0 0.75rem;
}
.kaliciel-tarif-card__titre {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	/* Réglable dans le panneau "Couleurs de la carte" du bloc ; la valeur
	   d'origine reste le repli pour les cartes pas encore retouchées. */
	color: var(--kaliciel-card-titre, #2d3e8d);
	font-size: 1.1rem;
	line-height: 1.3;
	/* Deux lignes réservées, titre calé en haut : tous les titres démarrent
	   à la même hauteur et les prix restent alignés d'une carte à l'autre. */
	min-height: 2.6em;
	display: block;
	margin: 0 0 0.5rem;
}
.kaliciel-tarif-card__prix {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	color: var(--kaliciel-card-prix, #d12e2d);
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
}
.kaliciel-tarif-card__details {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
	font-size: 0.95rem;
	color: var(--kaliciel-card-texte, #1a1a1a);
}
.kaliciel-tarif-card__details p:last-child {
	margin-bottom: 0;
}
/* Le troncage n'est JAMAIS appliqué par défaut (texte toujours visible et
   éditable normalement dans l'éditeur). C'est le script front-end
   (view.js) qui ajoute la classe "is-clamped" sur une carte, et seulement
   si sa description dépasse réellement 3 lignes une fois affichée. */
.kaliciel-tarif-card.is-clamped .kaliciel-tarif-card__details {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.kaliciel-tarif-card.has-more {
	cursor: pointer;
}
.kaliciel-tarif-card.has-more:focus-visible {
	outline: 3px solid #2d3e8d;
	outline-offset: 2px;
}
/* Le bas de chaque carte (« Voir plus », « Réserver ») est aligné sur la
   hauteur de la carte la plus haute de la rangée. */
.kaliciel-tarif-card {
	display: flex;
	flex-direction: column;
}
.kaliciel-tarif-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: auto;
	padding-top: 1rem;
}
.kaliciel-tarif-card__actions:empty {
	display: none;
}
.kaliciel-tarif-card .kaliciel-tarif-card__more.kaliciel-tarif-card__more {
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kaliciel-card-titre, #2d3e8d);
	cursor: pointer;
	text-decoration: none;
}
.kaliciel-tarif-card .kaliciel-tarif-card__more:hover,
.kaliciel-tarif-card .kaliciel-tarif-card__more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kaliciel-tarif-card .kaliciel-tarif-card__reserve.kaliciel-tarif-card__reserve {
	min-height: 40px;
	margin-left: auto;
	padding: 0.35rem 1.1rem;
	font-size: 0.95rem;
}

/* Fenêtre modale : affiche le texte complet d'un forfait sans jamais
   changer la taille de sa carte dans la grille/le carrousel. */
.kaliciel-tarif-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.kaliciel-tarif-modal-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}
.kaliciel-tarif-modal {
	position: relative;
	background: var(--kaliciel-modal-bg, #ffffff);
	border-radius: 12px;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.kaliciel-tarif-modal .kaliciel-tarif-modal__close {
	/* Sélecteur doublé + remise à zéro : le thème parent (Kadence) stylise
	   tous les <button> (fond rouge, marges internes, ombre...), ce qui
	   écrasait l'icône et laissait un rond plein sans croix. */
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	background: rgba(0, 0, 0, 0.07);
	color: var(--kaliciel-modal-texte, #1a1a1a);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.kaliciel-tarif-modal .kaliciel-tarif-modal__close svg {
	flex: none;
	display: block;
	width: 18px;
	height: 18px;
}
.kaliciel-tarif-modal .kaliciel-tarif-modal__close:hover {
	background: var(--kaliciel-modal-texte, #1a1a1a);
	color: var(--kaliciel-modal-bg, #ffffff);
	box-shadow: none;
}
.kaliciel-tarif-modal .kaliciel-tarif-modal__close:focus-visible {
	outline: 3px solid var(--kaliciel-modal-texte, #2d3e8d);
	outline-offset: 2px;
}
.kaliciel-tarif-modal__titre {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	color: var(--kaliciel-modal-titre, #2d3e8d);
	font-size: 1.3rem;
	margin: 0 1.5rem 0.5rem 0;
}
.kaliciel-tarif-modal__prix {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	color: var(--kaliciel-modal-prix, #d12e2d);
	font-size: 1.5rem;
	margin: 0 0 1rem;
}
.kaliciel-tarif-modal__details {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--kaliciel-modal-texte, #1a1a1a);
}
.kaliciel-tarif-modal__details p:last-child {
	margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
	.kaliciel-tarif-modal-overlay {
		transition: none;
	}
}

.kaliciel-tarifs.is-carousel {
	display: flex;
	flex-wrap: nowrap;
	/* "stretch" (valeur par défaut de flex) égalise la hauteur de toutes
	   les cartes visibles sur la hauteur de la plus grande — plus de souci
	   depuis que "Voir plus" ouvre une modale au lieu de déplier la carte. */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
	/* Masque la barre de défilement native pour un rendu plus "app mobile" :
	   la navigation se fait avec les flèches ou en glissant, pas en regardant
	   une barre grise. Le défilement reste utilisable au clavier/trackpad. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.kaliciel-tarifs.is-carousel::-webkit-scrollbar {
	display: none;
	height: 0;
}
.kaliciel-tarifs.is-carousel {
	--kaliciel-cols: 4;
}
.kaliciel-tarifs.is-carousel .kaliciel-tarif-card {
	flex: 0 0 calc( (100% - (var(--kaliciel-cols) - 1) * 1.5rem) / var(--kaliciel-cols) );
	scroll-snap-align: start;
}
@media (max-width: 1023px) {
	.kaliciel-tarifs.is-carousel {
		--kaliciel-cols: 2;
	}
}
@media (max-width: 600px) {
	.kaliciel-tarifs.is-carousel {
		--kaliciel-cols: 1;
	}
}
.kaliciel-carousel-nav {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}
.kaliciel-carousel-nav .kaliciel-carousel-btn {
	/* Sélecteur renforcé + remise à zéro : sans ça, le style des boutons du
	   thème parent (marges internes, ombre...) décentrait les flèches. */
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: var(--kaliciel-arrow-bg, #ffffff);
	color: var(--kaliciel-arrow-color, #2d3e8d);
	border: 2px solid var(--kaliciel-arrow-color, #2d3e8d);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.kaliciel-carousel-nav .kaliciel-carousel-btn svg {
	flex: none;
	display: block;
	width: 20px;
	height: 20px;
}
/* Au survol, les deux couleurs s'inversent : toujours lisible quel que soit le choix. */
.kaliciel-carousel-nav .kaliciel-carousel-btn:hover,
.kaliciel-carousel-nav .kaliciel-carousel-btn:focus-visible {
	background: var(--kaliciel-arrow-color, #2d3e8d);
	color: var(--kaliciel-arrow-bg, #ffffff);
	box-shadow: none;
}

/* ===================== Module Contact (kaliciel/contact) ===================== */

.kaliciel-contact {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
	/* Même corps de texte que les liens légaux de la colonne de gauche. */
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}
/* Kadence ajoute une marge/retrait aux listes du contenu : on les retire
   pour que les coordonnées s'alignent exactement avec les liens du dessous. */
.kaliciel-contact.kaliciel-contact {
	margin: 0 !important;
	padding: 0 !important;
}
.kaliciel-contact > li {
	margin: 0;
	padding: 0;
}
.kaliciel-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: inherit;
	text-decoration: none;
	/* Couleur réglable dans le panneau de réglages du bloc "Coordonnées"
	   (Couleur des liens), avec un vérificateur de contraste intégré.
	   Par défaut : un bleu éclairci plutôt que le bleu de marque
	   #2d3e8d — sur ce fond rose foncé, le bleu de marque tombe autour de
	   1,3:1 de contraste (illisible), contre ~4,9:1 pour ce ton. */
	color: var(--kaliciel-contact-color, #c7d6ff);
}
.kaliciel-contact a:hover,
.kaliciel-contact a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kaliciel-contact-icon {
	flex-shrink: 0;
}

/* Liens de bas de page (mentions légales, politique de confidentialité...)
   sous les coordonnées, alignés à gauche comme elles et dans la même police.
   Pour en ajouter un : dans le paragraphe, taper le texte, le sélectionner
   et lui donner un lien. Ils s'enchaînent et passent à la ligne si besoin,
   sans jamais déplacer le logo (qui est dans sa propre colonne). */
.kaliciel-footer-legal.kaliciel-footer-legal,
.kaliciel-contact.kaliciel-contact ~ p {
	margin: 0;
	padding: 0;
	font-family: var(--cc-font-corps, "Work Sans", sans-serif) !important;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
}
/* Le premier paragraphe sous les coordonnées prend un peu d'air. */
.kaliciel-contact.kaliciel-contact + p {
	margin-top: 1.25rem;
}
.kaliciel-footer-legal a,
.kaliciel-contact ~ p a {
	display: block;
	width: fit-content;
	margin: 0 0 0.6rem;
	color: inherit;
	font-family: inherit !important;
	text-decoration: none !important;
}
/* Typographie strictement identique pour toutes les lignes du pied de page
   (liens légaux à gauche, coordonnées à droite). */
.kaliciel-footer-legal,
.kaliciel-footer-legal a,
.kaliciel-contact,
.kaliciel-contact li,
.kaliciel-contact a,
.kaliciel-contact ~ p,
.kaliciel-contact ~ p a {
	font-family: var(--cc-font-corps, "Work Sans", sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
/* Aucun soulignement imposé par l'éditeur sur ces liens. */
.kaliciel-footer-legal a *,
.kaliciel-contact ~ p a * {
	text-decoration: none !important;
}
.kaliciel-footer-legal a:last-child,
.kaliciel-contact ~ p a:last-child {
	margin-bottom: 0;
}
/* Pied de page déjà posé avec l'ancienne disposition (coordonnées et liens
   dans la même colonne) : sur le site, les liens passent à gauche et les
   coordonnées à droite, sans réinsérer la section. */
@media (min-width: 782px) {
	.wp-block-column:has(> .kaliciel-contact):has(> p) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
		align-content: start;
	}
	.wp-block-column:has(> .kaliciel-contact):has(> p) > .kaliciel-contact {
		grid-column: 2;
		grid-row: 1 / span 6;
	}
	.wp-block-column:has(> .kaliciel-contact):has(> p) > p {
		grid-column: 1;
		margin-top: 0 !important;
	}
}
/* Sur mobile, les coordonnées passent avant les liens légaux. */
@media (max-width: 781px) {
	.wp-block-column:has(> .kaliciel-contact):not(:has(> p)) {
		order: -1;
	}
	.wp-block-column:has(> .kaliciel-contact):has(> p) > .kaliciel-contact {
		order: -1;
	}
}
/* Pied de page sur mobile : les coordonnées occupent toute la largeur en
   haut ; dessous, les trois liens (mentions légales, politique de
   confidentialité, créé par) à gauche et le logo à droite, centré
   verticalement par rapport aux liens. Fonctionne que les liens soient
   dans leur propre colonne ou dans celle des coordonnées. */
@media (max-width: 781px) {
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 1.75rem 1rem;
		/* Liens et logo reposent sur la même ligne de base : leurs bas
		   sont alignés. */
		align-items: end;
	}
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Colonne des coordonnées seule (nouvelle disposition). */
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column:has(> .kaliciel-contact):not(:has(> p)) {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	/* Ancienne disposition : coordonnées + liens dans la même colonne, dont
	   les enfants rejoignent directement la grille. */
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column:has(> .kaliciel-contact):has(> p) {
		display: contents;
	}
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column > .kaliciel-contact {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column > .kaliciel-contact ~ p {
		grid-column: 1;
		grid-row: 2;
		margin: 0 !important;
		align-self: end !important;
	}
	/* Liens dans leur propre colonne. */
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column:has(.kaliciel-footer-legal):not(:has(.kaliciel-contact)) {
		grid-column: 1;
		grid-row: 2;
		align-self: end !important;
	}
	/* Logo. */
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) > .wp-block-column:has(.kaliciel-mini-logo) {
		grid-column: 2;
		grid-row: 2;
		/* Le bas du logo s'aligne sur le bas du dernier lien. */
		align-self: end !important;
		justify-self: end;
		margin-bottom: 0.3rem !important;
	}
	.wp-block-columns:has(.kaliciel-contact):has(.kaliciel-mini-logo) .kaliciel-mini-logo img {
		display: block;
	}
}
.kaliciel-footer-legal a:hover,
.kaliciel-footer-legal a:focus-visible,
.kaliciel-contact ~ p a:hover,
.kaliciel-contact ~ p a:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}


/* ===================== Bouton "Remonter en haut" ===================== */
.kaliciel-back-to-top {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kaliciel-top-bg, #8d355d);
	color: var(--kaliciel-top-color, #ffffff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.kaliciel-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.kaliciel-back-to-top svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.kaliciel-back-to-top:hover,
.kaliciel-back-to-top:focus-visible {
	background: var(--kaliciel-top-color, #ffffff);
	color: var(--kaliciel-top-bg, #8d355d);
	outline: 3px solid var(--kaliciel-top-bg, #8d355d);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.kaliciel-back-to-top {
		transition: none;
	}
}


/* ===================== Menu et en-tête : même police que les titres ===================== */
.site-header .site-title,
.site-header .site-title a,
.site-header .menu-item > a,
.site-header .kadence-menu-item a,
.site-header .header-navigation a,
.site-header .header-html,
.site-header .header-button,
.site-header .header-button-wrap .button,
.site-header .header-html a,
.site-header [class*="header-html"] a,
.mobile-navigation a,
#mobile-drawer .menu-item > a,
#mobile-drawer .drawer-nav a {
	font-family: var(--cc-font-titres, "Paytone One", sans-serif) !important;
	font-weight: 400;
}

/* ===================== En-tête pleine largeur ===================== */
/* Le contenu de l'en-tête (numéro à gauche, menu à droite) s'étend jusqu'aux
   bords de l'écran, avec une marge régulière, au lieu de rester dans la
   largeur centrale du site. Pour une marge plus grande ou plus petite,
   changer la valeur de --kaliciel-header-gutter. */
.site-header .site-container,
.site-header .site-header-row-container-inner > .site-container {
	--kaliciel-header-gutter: 1.5rem;
	max-width: none;
	padding-left: var(--kaliciel-header-gutter);
	padding-right: var(--kaliciel-header-gutter);
}

/* ===================== Pied de page : marges latérales sur mobile ===================== */
/* Mêmes marges latérales (2 rem) que les autres sections du site, pour que
   le texte ne colle jamais au bord de l'écran, quel que soit le réglage de
   la section. */
@media (max-width: 781px) {
	.wp-block-group:has(.kaliciel-contact) {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
		box-sizing: border-box;
	}
}

/* ===================== Bouton et formulaire de rendez-vous ===================== */

/* Bouton : couleurs, police, taille et arrondi viennent des réglages du bloc
   « Bouton rendez-vous » (variables posées sur le bouton), avec des valeurs
   de repli si aucune n'est définie. Le sélecteur est doublé pour passer
   devant les styles de bouton de Kadence. */
.kaliciel-rdv {
	margin: 1.5rem 0;
}
.kaliciel-rdv--left {
	text-align: left;
}
.kaliciel-rdv--center {
	text-align: center;
}
.kaliciel-rdv--right {
	text-align: right;
}
.kaliciel-rdv-btn.kaliciel-rdv-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.5rem 2rem;
	border: 2px solid var(--kaliciel-rdv-border, transparent);
	border-radius: var(--kaliciel-rdv-radius, 999px);
	background: var(--kaliciel-rdv-bg, #d12e2d);
	color: var(--kaliciel-rdv-color, #ffffff);
	font-family: var(--kaliciel-rdv-font, var(--cc-font-titres, "Paytone One", sans-serif));
	font-size: var(--kaliciel-rdv-size, 1.15rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s, transform 0.15s;
}
.kaliciel-rdv-btn.kaliciel-rdv-btn:hover {
	filter: brightness(1.08);
}
.kaliciel-rdv-btn.kaliciel-rdv-btn:focus-visible {
	outline: 3px solid var(--kaliciel-rdv-bg, #d12e2d);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #ffffff;
}
.kaliciel-rdv-btn.kaliciel-rdv-btn:disabled {
	opacity: 0.65;
	cursor: wait;
}
@media (prefers-reduced-motion: reduce) {
	.kaliciel-rdv-btn.kaliciel-rdv-btn {
		transition: none;
	}
}

/* Fenêtre du formulaire. */
html.kaliciel-rdv-open {
	overflow: hidden;
}
dialog.kaliciel-rdv-dialog {
	width: min(660px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #ffffff;
	color: #1a1a1a;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	overflow: auto;
	font-family: var(--cc-font-corps, "Work Sans", sans-serif);
}
dialog.kaliciel-rdv-dialog::backdrop {
	background: rgba(20, 24, 50, 0.62);
}
.kaliciel-rdv-dialog__box {
	position: relative;
	padding: 2rem 2.25rem 1.9rem;
}
.kaliciel-rdv-dialog .kaliciel-rdv-dialog__close {
	appearance: none;
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #2d3e8d;
	border-radius: 50%;
	background: #ffffff;
	color: #2d3e8d;
	box-shadow: none;
	cursor: pointer;
}
.kaliciel-rdv-dialog .kaliciel-rdv-dialog__close:hover,
.kaliciel-rdv-dialog .kaliciel-rdv-dialog__close:focus-visible {
	background: #2d3e8d;
	color: #ffffff;
}
.kaliciel-rdv-dialog__title {
	margin: 0;
	padding-right: 3.5rem;
	color: #2d3e8d;
	font-family: var(--cc-font-titres, "Paytone One", sans-serif);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
}
.kaliciel-rdv-dialog__intro {
	margin: 0.6rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
}
.kaliciel-rdv-dialog__hint {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: #4a4a4a;
}
.kaliciel-rdv-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin-top: 1.25rem;
}
.kaliciel-rdv-field--full,
.kaliciel-rdv-error {
	grid-column: 1 / -1;
}
.kaliciel-rdv-form label {
	display: block;
	margin: 0 0 0.35rem;
	color: #2d3e8d;
	font-size: 0.95rem;
	font-weight: 600;
}
.kaliciel-rdv-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 0.65rem 0.85rem;
	border: 2px solid #6b6b6b;
	border-radius: 10px;
	background: #ffffff;
	color: #1a1a1a;
	font-family: inherit;
	font-size: 1rem;
	box-shadow: none;
}
.kaliciel-rdv-form textarea {
	resize: vertical;
}
.kaliciel-rdv-form :is(input, select, textarea):focus {
	border-color: #2d3e8d;
	outline: 3px solid #2d3e8d;
	outline-offset: 1px;
}
.kaliciel-rdv-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.kaliciel-rdv-consent input[type="checkbox"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0.1rem 0 0;
	accent-color: #2d3e8d;
}
.kaliciel-rdv-form .kaliciel-rdv-consent label {
	margin: 0;
	color: #1a1a1a;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
}
.kaliciel-rdv-consent a {
	color: #2d3e8d;
	font-weight: 600;
}
/* Champ piège anti-spam : sorti de l'écran, jamais en display:none
   (certains robots l'ignorent alors). */
.kaliciel-rdv-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.kaliciel-rdv-error {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 2px solid #b3261e;
	border-radius: 10px;
	background: #fdecea;
	color: #7a1712;
	font-size: 0.95rem;
}
.kaliciel-rdv-error[hidden] {
	display: none;
}
.kaliciel-rdv-actions {
	text-align: right;
}
.kaliciel-rdv-dialog__done {
	text-align: center;
	padding: 0.5rem 0;
}
.kaliciel-rdv-dialog__done .kaliciel-rdv-dialog__title {
	padding-right: 0;
	margin-top: 1rem;
}
.kaliciel-rdv-dialog__done .kaliciel-rdv-dialog__intro {
	margin-bottom: 1.5rem;
}
.kaliciel-rdv-dialog__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: 50%;
	background: #e7f5ec;
	color: #2f7a48;
}
.kaliciel-rdv-dialog [hidden] {
	display: none !important;
}
@media (max-width: 600px) {
	dialog.kaliciel-rdv-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.kaliciel-rdv-dialog__box {
		padding: 1.25rem 1.25rem 1.5rem;
	}
	.kaliciel-rdv-dialog__title {
		font-size: 1.6rem;
	}
	.kaliciel-rdv-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.kaliciel-rdv-actions .kaliciel-rdv-btn {
		width: 100%;
	}
}

/* « Réserver ce forfait » dans la fenêtre d'un tarif. */
.kaliciel-tarif-modal .kaliciel-tarif-modal__reserve {
	margin-top: 1.25rem;
}
.kaliciel-tarif-modal .kaliciel-tarif-modal__reserve[hidden] {
	display: none;
}

/* Barre fixe « Appeler / Prendre rendez-vous » : téléphones uniquement. */
.kaliciel-rdv-bar {
	display: none;
}
@media (max-width: 781px) {
	.kaliciel-rdv-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		display: flex;
		gap: 0.6rem;
		padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
		background: #ffffff;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
	}
	.kaliciel-rdv-bar .kaliciel-rdv-btn.kaliciel-rdv-btn {
		flex: 1.4 1 0;
		min-height: 48px;
		padding: 0.4rem 0.75rem;
		font-size: 1rem;
	}
	.kaliciel-rdv-bar .kaliciel-rdv-bar__call {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 48px;
		border: 2px solid #2d3e8d;
		border-radius: 999px;
		color: #2d3e8d;
		font-family: var(--kaliciel-rdv-font, var(--cc-font-titres, "Paytone One", sans-serif));
		font-size: 1rem;
		text-decoration: none;
	}
	.kaliciel-rdv-bar .kaliciel-rdv-bar__call:hover,
	.kaliciel-rdv-bar .kaliciel-rdv-bar__call:focus-visible {
		background: #2d3e8d;
		color: #ffffff;
	}
	/* La barre ne doit rien recouvrir : espace réservé en bas de page, et
	   bouton « Remonter en haut » placé au-dessus d'elle. */
	body.kaliciel-has-rdv-bar {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}
	body.kaliciel-has-rdv-bar .kaliciel-back-to-top {
		bottom: calc(72px + 1rem + env(safe-area-inset-bottom));
	}
	/* Le bouton « Prendre rendez-vous » placé dans la page (au-dessus des
	   tarifs) est masqué sur mobile : la barre fixe le remplace. */
	body.kaliciel-has-rdv-bar .kaliciel-rdv {
		display: none;
	}
}


/* ===================== Réglages « mobile uniquement » ===================== */
/* Posés depuis l'éditeur (panneau « Mobile uniquement » de chaque bloc).
   Sous 782 px seulement : rien ne change sur ordinateur. */
@media (max-width: 781px) {
	/* Logos (footer, section tarifs…) : largeur propre au mobile. */
	.kaliciel-mini-logo.kaliciel-mini-logo.has-mobile-width img {
		width: min(var(--kaliciel-m-w), 100%) !important;
		max-width: 100%;
	}
	/* Photos de section : largeur en pourcentage, centrées, proportions gardées. */
	.kaliciel-photo.kaliciel-photo.has-mobile-pct {
		width: var(--kaliciel-m-pct) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	/* Hero : taille du logo choisie pour le mobile. */
	.kaliciel-hero.has-mobile-logo .kaliciel-hero__logo.kaliciel-hero__logo {
		width: min(var(--kaliciel-m-logo-w), 92vw) !important;
	}
	/* Blocs standards. */
	html body .has-mobile-fs.has-mobile-fs {
		font-size: var(--kaliciel-m-fs) !important;
	}
	html body .has-mobile-align.has-mobile-align {
		text-align: var(--kaliciel-m-align) !important;
	}
	html body .has-mobile-py.has-mobile-py {
		padding-top: var(--kaliciel-m-py) !important;
		padding-bottom: var(--kaliciel-m-py) !important;
	}
	html body .has-mobile-px.has-mobile-px {
		padding-left: var(--kaliciel-m-px) !important;
		padding-right: var(--kaliciel-m-px) !important;
	}
	html body .has-mobile-gap.has-mobile-gap {
		gap: var(--kaliciel-m-gap) !important;
	}
}

/* Section Tarifs sur mobile : le chien à côté du titre est réduit de 30 %.
   Pour une autre taille, régler « Mobile uniquement » sur l'image (ce réglage
   remplace alors cette réduction). */
@media (max-width: 781px) {
	.wp-block-group:has(.kaliciel-tarifs) .kaliciel-mini-logo:not(.has-mobile-width) img {
		zoom: 0.7;
	}
}