/*
Theme Name: Hypnose Auray
Theme URI: https://hypnose-auray.fr
Description: Theme enfant de Twenty Twenty-Five pour le cabinet d'hypnose de Frederic Gindre a Auray. Direction « Cabinet » : un seul accent, deux polices a roles stricts, texte aligne a gauche en colonne de lecture.
Author: Ancoris
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hypnose-auray
*/

/* Tout ce qui peut l'etre vit dans theme.json.
   Cette feuille ne porte que ce que theme.json ne sait pas exprimer. */

/* Colonne de lecture : theme.json fixe la largeur en rem, on la cale sur le nombre
   de caracteres, qui est la vraie mesure du confort de lecture. */
.is-layout-constrained > .entry-content,
.hy-prose {
	--hy-col: 68ch;
}

/* Les chiffres qui s'alignent en colonne (horaires, note des avis). */
.hy-tabular,
.hy-horaires {
	font-variant-numeric: tabular-nums;
}

/* Grille des horaires du pied de page : jour / creneaux. */
.hy-horaires {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.8rem;
}

.hy-horaires dt {
	font-weight: 600;
}

.hy-horaires dd {
	margin: 0;
}

/* Le focus clavier doit rester visible partout. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Liste de liens en repertoire (bloc « Que cherchez-vous ? ») :
   un lien par ligne, separe par un filet, sans puce. */
.is-style-hy-liens {
	list-style: none;
	padding-left: 0;
}

.is-style-hy-liens li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 0.55rem;
}

.is-style-hy-liens a {
	text-decoration: none;
}

.is-style-hy-liens a:hover,
.is-style-hy-liens a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Photo d'accroche : la legende se detache sur la photo, en bas a gauche,
   et porte l'adresse du cabinet. Le lien mene a la carte.
   ------------------------------------------------------------------ */
.hy-photo-adresse {
	position: relative;
}

.hy-photo-adresse figcaption {
	position: absolute;
	left: 0;
	bottom: 1.2rem;
	margin: 0;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-soft);
	box-shadow: var(--wp--preset--shadow--douce);
}

.hy-photo-adresse figcaption a {
	color: inherit;
	text-decoration: none;
}

.hy-photo-adresse figcaption a:hover,
.hy-photo-adresse figcaption a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.hy-photo-adresse figcaption {
		position: static;
		box-shadow: none;
	}
}

/* ------------------------------------------------------------------
   Motifs de consultation : les intitules font une ou deux lignes selon
   le motif. Sans hauteur reservee, les descriptions ne demarrent pas au
   meme endroit d'une colonne a l'autre.
   ------------------------------------------------------------------ */
@media (min-width: 782px) {
	.hy-motifs h3 {
		min-height: 2.9em;
	}
}


/* ------------------------------------------------------------------
   Pied de page sur fond vert profond
   ------------------------------------------------------------------
   Les liens heritent du vert d'accent du theme, illisible sur #0F5A61 : ils passent en
   blanc, soulignes discretement pour rester identifiables sans la couleur.
*/
footer.wp-block-group.has-accent-deep-background-color a {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 0.18em;
}

footer.wp-block-group.has-accent-deep-background-color a:hover,
footer.wp-block-group.has-accent-deep-background-color a:focus-visible {
	text-decoration-color: #FFFFFF;
}

/* Un filet blanc franc couperait la page : on le pose a 18 % d'opacite. */
.hy-filet-clair {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: none;
}

/* Les creneaux du pied de page, en clair. */
footer .hy-horaires dt { color: #D9EAEB; }
footer .hy-horaires dd { color: #FFFFFF; }

/* ------------------------------------------------------------------
   Questions frequentes en accordeon
   ------------------------------------------------------------------
   `<details>` et `<summary>` natifs : aucun JavaScript, l'ouverture au clavier et la
   restitution par les lecteurs d'ecran sont gerees par le navigateur, et le texte reste
   dans le document — donc lisible par les moteurs et les assistants, meme replie.
*/
.hy-faq {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.hy-faq details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.hy-faq summary {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 1.15rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
	line-height: 1.35;
	color: var(--wp--preset--color--accent-deep);
	list-style: none;
}

/* Le chevron par defaut de Safari et de Chrome. */
.hy-faq summary::-webkit-details-marker { display: none; }
.hy-faq summary::marker { content: ""; }

/* Chevron maison, pilote par l'etat ouvert/ferme du navigateur. */
.hy-faq summary::after {
	content: "";
	margin-left: auto;
	flex: 0 0 auto;
	width: 0.58em;
	height: 0.58em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.12em);
	transition: transform 0.18s ease;
}

.hy-faq details[open] summary::after {
	transform: rotate(-135deg) translateY(-0.12em);
}

.hy-faq summary:hover { color: var(--wp--preset--color--accent); }

.hy-faq details > :not(summary) {
	margin: 0 0 1.15rem;
	max-width: 62ch;
	color: var(--wp--preset--color--contrast-soft);
}

@media (prefers-reduced-motion: reduce) {
	.hy-faq summary::after { transition: none; }
}

/* ------------------------------------------------------------------
   Encart « Informations pratiques », en bas de chaque page
   ------------------------------------------------------------------ */
.hy-pratique {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 46rem) {
	.hy-pratique { grid-template-columns: 1.05fr 1fr; }
}

.hy-pratique table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.hy-pratique th,
.hy-pratique td {
	padding: 0.72rem 0;
	text-align: left;
	vertical-align: baseline;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.hy-pratique th {
	width: 11rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-faint);
}

.hy-pratique td { color: var(--wp--preset--color--contrast); }

.hy-pratique tr:last-child th,
.hy-pratique tr:last-child td { border-bottom: 0; }

/* Sur le vert clair de la bande de fin, le gris discret du theme tombe a 3,07:1 en
   petit corps : les libelles passent en texte adouci, a 6,26:1. */
.hy-fin .hy-pratique th,
.hy-fin .hy-precision {
	color: var(--wp--preset--color--contrast-soft);
}

.hy-precision {
	font-size: 0.82em;
	color: var(--wp--preset--color--contrast-soft);
}

/* Les filets du tableau, sur fond colore. */
.hy-fin .hy-pratique th,
.hy-fin .hy-pratique td {
	border-bottom-color: rgba(21, 33, 31, 0.14);
}

/* L'adresse, mise en avant : c'est l'information que l'on vient chercher. */
.hy-pratique .hy-adresse {
	margin: 0 0 1.4rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.18rem, 1.1rem + 0.4vw, 1.42rem);
	line-height: 1.35;
	color: var(--wp--preset--color--accent-deep);
}

/* ------------------------------------------------------------------
   Bandes pleine largeur : pas de blanc entre deux fonds
   ------------------------------------------------------------------
   Deux sections colorees qui se suivent etaient separees par l'espacement de bloc du
   theme : un filet blanc apparaissait entre elles, et entre la derniere bande et le
   pied de page. Elles doivent se toucher — l'alternance des fonds suffit a marquer la
   rupture, et le rythme vient du padding interne de chaque bande.

   Cela ne concerne QUE les bandes pleine largeur : les encarts arrondis posés dans le
   corps du texte gardent leurs marges.
*/
.wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background {
	margin-block-start: 0;
}

main > .wp-block-group.alignfull.has-background:last-child {
	margin-block-end: 0;
}

/* PIEGE : dans le DOM, le `footer` porte `wp-block-template-part`, PAS
   `wp-block-group` — le groupe colore est a l'interieur. Un selecteur
   `footer.wp-block-group` ne matche donc rien, et l'espacement de
   `.wp-site-blocks > *` continue de s'appliquer. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Le `main` ajoutait sa propre marge basse sous la derniere bande. */
main.wp-block-group > :last-child {
	margin-block-end: 0;
}

/* Un titre de section en tete de bande n'a pas besoin de la marge superieure :
   le padding de la bande l'a deja detache. */
.wp-block-group.alignfull.has-background > h2:first-child,
.wp-block-group.alignfull.has-background > .wp-block-group:first-child > h2:first-child {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------
   Video verticale
   ------------------------------------------------------------------
   Une video au format portrait (9/16) affichee sur toute la largeur de la colonne
   depasse le millier de pixels de haut : elle chasse tout le reste de la page. On la
   ramene a une largeur de telephone, centree.
*/
.hy-video-verticale {
	max-width: 22rem;
	margin-inline: auto;
}

/* L'image d'ouverture d'une page de service : meme hauteur quelle que soit la source,
   pour que les quatre pages se ressemblent malgre des formats d'origine inegaux. */
.hy-ouverture img {
	width: 100%;
	max-height: 26rem;
	object-fit: cover;
	border-radius: 3px;
}

/* ------------------------------------------------------------------
   Air entre les paragraphes
   ------------------------------------------------------------------
   L'espacement de bloc du theme vaut 1,35 rem, soit environ 22 px. Avec un corps de
   19 px et un interligne de 33 px, l'ecart entre deux paragraphes etait PLUS PETIT
   qu'une ligne : rien ne les separait a l'oeil, le texte formait un pave.

   On ne touche pas a l'espacement global — il tient les groupes serres, boutons et
   listes — on ouvre seulement entre deux blocs de texte qui se suivent, a un peu plus
   d'une ligne. Mesure avant : 30 px. Apres : 42 px.
*/
/* PIEGE DE SPECIFICITE : WordPress pose son espacement de bloc avec
   `:where(.is-layout-flow) > :where(*+*)`, de specificite ZERO. Une regle ecrite
   elle aussi en `:where()` ne la bat pas — a specificite egale, c'est l'ordre de
   chargement qui tranche, et il n'est pas garanti. Les selecteurs ci-dessous portent
   donc une vraie classe, hors `:where()`. Mesure : 22 px avant, 42 px apres. */
.entry-content > p + p,
.entry-content > p + ul,
.entry-content > p + ol,
.entry-content > ul + p,
.entry-content > ol + p,
.entry-content > figure + p,
.entry-content > p + figure,
.hy-bande > p + p,
.hy-bande > p + ul,
.hy-bande > ul + p,
.hy-fin > p + p {
	margin-block-start: 2.6rem;
}

/* Les elements d'une meme liste restent groupes : c'est une enumeration, pas une
   succession de paragraphes. */
.wp-block-list li + li {
	margin-block-start: 0.55rem;
}

/* ------------------------------------------------------------------
   Chapô d'introduction d'une section de questions
   ------------------------------------------------------------------
   Une phrase qui explique pourquoi la section existe, avant la première question.
   Traitée en citation plutôt qu'en paragraphe courant : filet à gauche, corps un peu
   plus grand, italique léger. Elle se distingue du texte qu'elle introduit sans se
   confondre avec un titre.
*/
.hy-chapo {
	margin-block: 0 2.4rem;
	padding-left: 1.3rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.04rem, 1rem + 0.25vw, 1.2rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
	max-width: 60ch;
}

@media (max-width: 600px) {
	.hy-chapo {
		padding-left: 1rem;
	}
}

/* ------------------------------------------------------------------
   Témoignage
   ------------------------------------------------------------------
   La citation est posée sur un fond clair plutôt que sur un filet : elle se distingue
   ainsi du chapô d'introduction, qui porte déjà un filet vert, et se lit comme une
   parole rapportée et non comme une intention de l'auteur.
*/
.wp-block-quote.is-style-plain {
	margin-block: 0 2.6rem;
	padding: 1.6rem 1.8rem;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--surface-2);
}

.wp-block-quote.is-style-plain > p:first-of-type {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.06rem, 1rem + 0.3vw, 1.24rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.wp-block-quote.is-style-plain > p:not(:first-of-type):not(:empty) {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.92rem;
	font-style: normal;
	color: var(--wp--preset--color--contrast-soft);
}

.wp-block-quote.is-style-plain .hy-precision {
	font-size: 0.82rem;
}

@media (max-width: 600px) {
	.wp-block-quote.is-style-plain {
		padding: 1.3rem 1.2rem;
	}
}

/* ------------------------------------------------------------------
   La note Google, en bas à droite du témoignage
   ------------------------------------------------------------------
   Le témoignage devient une grille à deux colonnes : la citation occupe toute la
   largeur, la signature se cale en bas à gauche et la note Google en bas à droite.
   Les deux se lisent alors comme un même pied de citation — la parole d'un côté, sa
   source et son volume de l'autre — au lieu de deux blocs empilés.
*/
.hy-temoignage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 2rem;
	row-gap: 1.2rem;
	align-items: end;
}

.hy-temoignage > p:first-of-type {
	grid-column: 1 / -1;
}

.hy-temoignage > p:not(:first-of-type):not(:empty) {
	grid-column: 1;
	margin-bottom: 0;
}

/* `wpautop` enveloppe le code court de deux paragraphes vides : ils ouvriraient une
   rangee de grille fantome sous la signature. */
.entry-content p:empty {
	display: none;
}

.hy-temoignage > .hy-note-google {
	grid-column: 2;
	justify-self: end;
}

/* Sous 640 px la pastille passe sous la signature : à deux colonnes, les étoiles
   seraient écrasées et le nombre d'avis reviendrait à la ligne. */
@media (max-width: 640px) {
	.hy-temoignage {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-temoignage > p:first-of-type,
	.hy-temoignage > p:not(:first-of-type):not(:empty),
	.hy-temoignage > .hy-note-google {
		grid-column: 1;
		justify-self: start;
	}
}

.hy-note-google__bloc {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	font-family: var(--wp--preset--font-family--sans);
	font-style: normal;
	line-height: 1.35;
	text-align: right;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-soft);
}

@media (max-width: 640px) {
	.hy-note-google__bloc {
		align-items: flex-start;
		text-align: left;
	}
}

.hy-note-google__nombre {
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.hy-note-google__source {
	display: inline-flex;
	align-items: center;
	gap: 0.34rem;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}

.hy-note-google .hy-g {
	width: 0.95em;
	height: 0.95em;
	flex: none;
}

.hy-note-google__lien {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	color: var(--wp--preset--color--accent-deep);
}

a.hy-note-google__bloc:hover .hy-note-google__lien,
a.hy-note-google__bloc:focus-visible .hy-note-google__lien {
	text-decoration-thickness: 2px;
}

/* Les étoiles : un rang gris, et par-dessus un rang doré rogné à la part de la note.
   Une note de 4,8 remplit donc 96 % de la largeur, sans qu'on ait à dessiner de demie
   étoile.

   RESERVE ASSUMEE : un doré d'étoile sur fond clair n'atteint pas le rapport de 3:1
   exigé des éléments graphiques porteurs d'information, et l'assombrir assez pour y
   arriver lui ferait perdre ce qui le rend lisible comme une note. C'est pour cela que
   la note est AUSSI écrite — « Basée sur 64 avis » à l'écran, « Note de 5 sur 5 » dans
   l'intitulé lu par les lecteurs d'écran : l'information ne repose jamais sur la seule
   couleur des étoiles. */
.hy-etoiles {
	position: relative;
	display: block;
	width: 5.9em;
	height: 1.18em;
	font-size: 0.95rem;
}

.hy-etoiles__fond,
.hy-etoiles__note {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 0.08em;
	overflow: hidden;
}

.hy-etoiles svg {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.hy-etoiles__fond svg {
	fill: rgba(21, 33, 31, 0.17);
}

.hy-etoiles__note svg {
	fill: #F2A20C;
}

/* ------------------------------------------------------------------
   Le mot de Frédéric : la pastille et le chapô
   ------------------------------------------------------------------
   Le chapô est écrit à la première personne. Posé seul, il se confond avec la citation
   d'un patient quelques lignes plus haut. Le portrait lève l'ambiguïté d'un coup d'œil :
   ici c'est le praticien qui parle, et le filet vert reste la frontière entre son
   visage et sa phrase.
*/
.hy-mot {
	margin-block: 0 2.4rem;
	gap: 1.4rem;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.hy-mot .hy-chapo {
	margin-block: 0;
}

.hy-mot .hy-pastille {
	flex: none;
	margin: 0.2rem 0 0;
}

.hy-mot .hy-pastille img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 600px) {
	.hy-mot {
		gap: 1rem;
	}

	.hy-mot .hy-pastille img {
		width: 52px;
		height: 52px;
	}
}

/* La note seule, quand la page n'a pas de témoignage : elle reprend le fond clair de la
   citation pour que la page garde le même repère visuel, mais aligné à gauche — il n'y a
   plus de signature en face à qui répondre. */
.hy-note-google--autonome {
	width: fit-content;
	max-width: 100%;
	margin-block: 0 2.6rem;
	padding: 1.3rem 1.8rem;
	border-radius: 3px;
	background: var(--wp--preset--color--surface-2);
}

.hy-note-google--autonome .hy-note-google__bloc {
	align-items: flex-start;
	text-align: left;
}

/* ------------------------------------------------------------------
   La bande de fin colle au contenu
   ------------------------------------------------------------------
   Le thème applique son espacement de bloc entre le dernier élément du contenu et la
   bande « Prendre rendez-vous », soit 21,6 px. Invisible quand la page se termine sur du
   blanc, le filet se voit dès que la dernière section est elle aussi sur fond coloré :
   deux bandes de la même teinte séparées par une ligne claire se lisent comme un défaut.
   La bande porte son propre rembourrage haut, rien ne se retrouve à l'étroit.
*/
.hy-fin {
	margin-top: 0;
}

/* ------------------------------------------------------------------
   L'encart sur fond foncé
   ------------------------------------------------------------------
   Posé à l'intérieur d'une bande, et non à sa place : la bande garde son titre, son
   introduction et sa photo sur fond clair, seul le contenu qu'on vient chercher passe sur
   le vert foncé. C'est le vert du pied de page, pas un ton inventé pour l'occasion.
   Contraste mesuré sur ce fond : 7,6:1 pour le texte, 6,4:1 pour les titres d'ouvrages.
*/
.hy-encart {
	margin-block: 2.2rem;
	padding: 1.9rem 2.1rem;
}

.hy-encart > *:first-child {
	margin-top: 0;
}

.hy-encart > *:last-child {
	margin-bottom: 0;
}

.hy-encart ul {
	margin: 0;
	padding-left: 1.1rem;
}

.hy-encart li {
	margin-block: 0.75rem;
}

.hy-encart li::marker {
	color: var(--wp--preset--color--accent-soft);
}

.hy-encart em {
	color: var(--wp--preset--color--accent-soft);
}

/* Le titre de niveau 2 est vert foncé sur tout le site : posé sur ce fond il
   disparaîtrait. Même chose pour la légende de photo, qui hérite d'un gris pâle calculé
   pour un fond clair. Contrastes mesurés sur #0F5A61 : 7,35:1 pour le titre et le texte,
   6,37:1 pour les italiques et la légende. */
.hy-encart h2,
.hy-encart h3 {
	color: var(--wp--preset--color--base);
}

.hy-encart h2:first-child {
	margin-top: 0;
}

.hy-encart figcaption {
	color: var(--wp--preset--color--accent-soft);
}

.hy-encart strong {
	color: var(--wp--preset--color--surface);
}

/* L'image gagne le même rayon que l'encart, en retrait de ses bords. */
.hy-encart figure.wp-block-image {
	margin-block: 1.8rem 0;
}

@media (max-width: 600px) {
	.hy-encart {
		padding: 1.4rem 1.3rem;
	}
}

/* ------------------------------------------------------------------
   Deux bandes de la même teinte qui se suivent
   ------------------------------------------------------------------
   Leurs rembourrages s'additionnent : près de 200 px de vide, sans la moindre rupture de
   couleur pour le justifier. La seconde perd donc son rembourrage haut — elle n'en a pas
   besoin, celui de la première joue déjà ce rôle. Cas réel : la section des lectures, dont
   la bande est passée au blanc pour porter l'encart foncé, suit une bande blanche.
*/
.hy-bande.has-surface-background-color + .hy-bande.has-surface-background-color,
.hy-bande.has-surface-2-background-color + .hy-bande.has-surface-2-background-color {
	/* `!important` est ici le seul moyen : WordPress écrit l'espacement d'un bloc en style
	   en ligne sur l'élément, et aucun sélecteur de feuille de style ne passe devant. */
	padding-top: 0 !important;
}