/*
 * Ange-elle : feuille de style du site.
 *
 * Violet #7b5a9e, photo d'ouverture sur l'accueil, contenu pose sur des
 * cartes de verre depoli. Chargee apres wordpress.css, le CSS des blocs
 * herite de l'ancien site WordPress : couleurs, typo et espacements de base
 * vivent dans les styles globaux de ce fichier-la (variables --wp--preset--*).
 * Celui-ci ne garde que ce qui est propre au site.
 */

/* --- Photo d'ouverture de l'accueil ---------------------------------------
   La photo occupe une bande en haut de page, puis se fond dans le fond de
   page. Elle ne tapisse plus toute la hauteur en background-attachment:fixed,
   qui donnait un effet de parallaxe date, saccadait au defilement et etait
   ignore par iOS de toute facon. */
.wp-site-blocks {
	position: relative;
}

.wp-site-blocks::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 780px;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(239, 232, 245, 0.1) 0%, rgba(239, 232, 245, 0.75) 60%, var(--wp--preset--color--page) 100%),
		url('/medias/2017/07/background-3.jpeg') center top / cover no-repeat;
}

/* L'en-tete se pose sur cette bande : empiler une seconde image par-dessus
   brouillerait les deux. */
.angelle-header {
	background-image: none;
	background-color: transparent;
	box-shadow: none;
}

/* --- Verre depoli --------------------------------------------------------
   Grain tres fin commun aux cartes et a l'en-tete : un verre depoli n'est
   jamais parfaitement lisse, et les illustrations du site sont elles-memes
   legerement granuleuses. Bruit SVG violet fonce, a quelques pourcents
   d'opacite. */
:root {
	--angelle-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .2 0 0 0 0 .37 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Cartes de contenu ----------------------------------------------------
   Chaque page pose son contenu sur une carte blanche. C'est ce qui donne sa
   structure au site : sans elle, le texte flotte sur un aplat uniforme.

   Le verre : un voile plus clair en haut a gauche, d'ou vient la lumiere, un
   flou profond qui avive les couleurs de la photo, une ombre fine de contact
   sous une ombre large et douce, et un reflet sur le bord superieur. */
.angelle-card {
	position: relative;
	background:
		var(--angelle-grain),
		linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-radius: 20px;
	padding: clamp(1.15rem, 3vw, 2.25rem);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 1px 2px rgba(70, 50, 95, 0.06),
		0 18px 50px -12px rgba(70, 50, 95, 0.2);
}

/* Le bord attrape la lumiere : brillant en haut a gauche, presque invisible
   en bas a droite. Un degrade ne se pose pas sur une bordure arrondie : il est
   dessine sur un calque de 1 px d'epaisseur, evide au centre par un masque. */
.angelle-card::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.12));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

/* Navigateur sans backdrop-filter : on opacifie pour garder le texte lisible.
   Meme chose pour qui a demande moins de transparence dans son systeme (regle
   placee apres celles de l'en-tete, qu'elle doit pouvoir remplacer). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.angelle-card {
		background: rgba(255, 255, 255, 0.9);
	}
}

.page-blog .angelle-card {
	padding: clamp(1.15rem, 2.5vw, 1.75rem) clamp(1.15rem, 3vw, 2.25rem);
}

/* --- En-tete ------------------------------------------------------------- */
/* Il reste colle en haut de l'ecran. C'est l'enveloppe du template part qui
   est sticky, pas .angelle-header : sticky ne colle que dans son parent, et
   celui de .angelle-header est cette enveloppe, pas plus haute que lui.
   Sticky plutot que fixed : l'en-tete garde sa place dans le flux, rien a
   decaler sous lui. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 200;
	/* L'enveloppe deborde sous la barre une fois compactee (voir plus bas) :
	   cette bande transparente ne doit pas intercepter les clics. */
	pointer-events: none;
}

.angelle-header {
	position: relative;
	isolation: isolate;
	pointer-events: auto;
}

/* Le fond n'apparait qu'une fois la page defilee (classe posee par
   site.js) : en haut, l'en-tete reste transparent sur la photo. Il est
   porte par un pseudo-element, car un backdrop-filter sur l'en-tete lui-meme
   en ferait le bloc conteneur du menu mobile, en position fixed, qui ne
   couvrirait plus que la hauteur de l'en-tete.

   Le bas de la barre porte un filet violet de 1 px qui s'estompe aux deux
   extremites, comme un fil de lumiere : il rappelle les filets entre les
   sections sans trancher de bord a bord comme la ligne blanche d'avant. Il
   est dessine par un degrade en arriere-plan, sous une ombre tres legere. */
.angelle-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, transparent, rgba(123, 90, 158, 0.45) 30%, rgba(123, 90, 158, 0.45) 70%, transparent) bottom / 100% 1px no-repeat,
		var(--angelle-grain),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.5));
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	box-shadow: 0 6px 18px -12px rgba(70, 50, 95, 0.2);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.angelle-defile .angelle-header::before {
	opacity: 1;
}

/* --- Menu mobile ---------------------------------------------------------
   Par defaut, un plein ecran blanc avec de petits liens noirs alignes a
   droite. Il devient un panneau de verre depoli, comme l'en-tete et les
   cartes : la page se devine floutee derriere. Liens centres, plus grands, la
   page courante en violet soulignee du meme filet que l'en-tete.

   Le selecteur du fond est long parce que celui de WordPress l'est aussi : il
   faut au moins autant de classes pour le remplacer. */
.angelle-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background:
		var(--angelle-grain),
		linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(244, 238, 250, 0.78));
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
}

/* Ouverture animee. Le fondu de WordPress (0,1 s depuis la transparence) est
   trop bref pour se voir : il se lisait comme un temps de reponse. Ici le
   mouvement part sous le doigt, la croix pivotant a la place de l'icone du
   menu ; le verre se pose en fondu, puis les liens montent en cascade (cinq
   liens, voir header.html ; au-dela, ils arrivent avec le dernier). Rien
   pour qui a demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
	.angelle-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: angelle-menu-fondu 0.3s ease-out both;
	}

	.angelle-header .is-menu-open .wp-block-navigation__responsive-container-close {
		animation: angelle-menu-croix 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}

	.angelle-header .is-menu-open .wp-block-navigation-item {
		animation: angelle-menu-lien 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both;
	}

	.angelle-header .is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 0.13s;
	}

	.angelle-header .is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 0.18s;
	}

	.angelle-header .is-menu-open .wp-block-navigation-item:nth-child(4) {
		animation-delay: 0.23s;
	}

	.angelle-header .is-menu-open .wp-block-navigation-item:nth-child(n+5) {
		animation-delay: 0.28s;
	}
}

@keyframes angelle-menu-fondu {
	from {
		opacity: 0;
	}
}

@keyframes angelle-menu-croix {
	from {
		transform: rotate(-90deg);
	}
}

@keyframes angelle-menu-lien {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

/* WordPress aligne la liste a droite, sur le conteneur comme sur la liste
   elle-meme, avec des regles a quatre classes : il en faut cinq ici. */
.angelle-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: max(calc(24px + 2rem), 16vh);
	--navigation-layout-justification-setting: center;
}

.angelle-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	--navigation-layout-justification-setting: center;
	align-items: center;
	gap: 1.6rem;
}

.angelle-header .is-menu-open .wp-block-navigation-item__content {
	padding-bottom: 0.3rem;
	color: #333333;
	font-size: 1.35rem;
	font-weight: 600;
}

.angelle-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.angelle-header .is-menu-open [aria-current="page"] {
	color: var(--wp--preset--color--accent);
	background: linear-gradient(90deg, transparent, rgba(123, 90, 158, 0.6) 25%, rgba(123, 90, 158, 0.6) 75%, transparent) bottom / 100% 1px no-repeat;
}

/* Boutons d'ouverture et de fermeture du menu : un cercle de 40 px, qui se lit
   comme un bouton, autour de l'icone a trois traits (« icon »: « menu » dans
   header.html ; l'icone par defaut n'en a que deux, de longueurs inegales).
   Fond de verre, contour violet leger ; plein violet au survol. Pas de
   display ici : il passerait devant la regle qui masque l'icone du menu a
   partir de 900 px (WordPress l'affiche deja en flex). */
.angelle-header .wp-block-navigation__responsive-container-open,
.angelle-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(123, 90, 158, 0.35);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--accent);
	transition: background 0.2s ease, color 0.2s ease;
}

/* Survol reserve aux appareils a souris : sur un ecran tactile, l'etat survole
   reste affiche apres le toucher, et le cercle resterait plein. */
@media (hover: hover) {
	.angelle-header .wp-block-navigation__responsive-container-open:hover,
	.angelle-header .wp-block-navigation__responsive-container-close:hover {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
	}
}

.angelle-header .wp-block-navigation__responsive-container-open svg,
.angelle-header .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}

/* La croix a la hauteur du logo et du bouton, qui restent visibles au-dessus
   du panneau. Son centre tombe a 36 px + top (marge du panneau de 16 px,
   demi-cercle de 20 px) ; celui de la rangee de l'en-tete a 1 rem plus la
   moitie du logo, soit 2/9 de sa largeur. Une fois la page defilee, la rangee
   est centree a 32 px. */
.angelle-header .wp-block-navigation__responsive-container-close {
	display: flex;
	top: calc(var(--angelle-logo) * 2 / 9 - 20px);
}

.angelle-defile .angelle-header .wp-block-navigation__responsive-container-close {
	top: -4px;
}

/* Le logo et le bouton « Prendre rendez-vous » restent au-dessus du panneau :
   le menu garde son identite, et le rendez-vous reste a portee de main. Ils
   partagent le contexte d'empilement du panneau (celui de l'en-tete), un
   z-index plus eleve suffit. */
html.has-modal-open .angelle-header .wp-block-site-logo,
html.has-modal-open .angelle-rdv {
	position: relative;
	z-index: 100001;
}

/* Moins de transparence demandee dans le systeme : verre opaque, sans flou. */
@media (prefers-reduced-transparency: reduce) {
	.angelle-card,
	.angelle-header::before,
	.angelle-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* En defilant, la barre se compacte : logo ramene a 108 px de large (48 px
   de haut), marges de 1 a 0.5 rem. L'enveloppe recoit exactement ce qui est
   retire en padding-bottom, pour que la hauteur occupee dans le flux ne change
   pas : sinon tout le contenu remonterait d'un coup au premier defilement. Les
   trois transitions ont la meme duree pour que la somme reste constante.

   La largeur du logo en haut de page tient dans --angelle-logo : plus petite
   sur mobile, pour laisser la place au bouton « Prendre rendez-vous ». La
   compensation s'en deduit (le logo fait 80 px de haut pour 180 de large, soit
   un rapport de 4/9). */
:root {
	--angelle-logo: 180px;
}

@media (max-width: 599px) {
	:root {
		--angelle-logo: 144px;
	}
}

/* Sous 360 px, le logo garde d'emblee sa taille compacte : a 120 px, le
   logo, le bouton et l'icone du menu ne tenaient plus sur une ligne en haut
   de page, mais y tenaient une fois compactes, et ce changement de ligne
   faisait sauter le contenu. */
@media (max-width: 359px) {
	:root {
		--angelle-logo: 108px;
	}
}

.angelle-header .wp-block-site-logo img {
	width: var(--angelle-logo);
	height: auto;
	transition: width 0.25s ease;
}

.angelle-header {
	transition: padding 0.25s ease;
}

.wp-site-blocks > header.wp-block-template-part {
	transition: padding-bottom 0.25s ease;
}

.angelle-defile .angelle-header .wp-block-site-logo img {
	width: 108px;
}

/* !important : le padding d'origine est en style en ligne dans header.html. */
.angelle-defile .angelle-header {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.angelle-defile .wp-site-blocks > header.wp-block-template-part {
	padding-bottom: calc((var(--angelle-logo) - 108px) * 4 / 9 + 1rem);
}

/* Bouton « Prendre rendez-vous » : le rendez-vous a un clic de n'importe ou,
   puisque l'en-tete reste visible. Plus petit que les boutons du contenu, et
   moins haut que le logo compacte (48 px), pour ne pas changer la hauteur de
   la barre. Sur mobile, il passe devant l'icone du menu ; sous 420 px, il ne
   dit plus que « Rendez-vous ». */
.angelle-rdv .wp-block-button__link {
	min-width: 0;
	padding: 0.55em 1.1em;
	font-size: 0.9rem;
	white-space: nowrap;
}

.angelle-rdv-court {
	display: none;
}

@media (max-width: 599px) {
	.angelle-header > .wp-block-group.alignwide {
		gap: 0.75rem;
	}

	.angelle-header-actions {
		gap: 0.5rem;
	}

	.angelle-rdv {
		order: -1;
	}
}

/* Entre 600 et 900 px, le menu complet et le bouton ne tenaient plus a cote
   du logo : l'en-tete passait sur deux lignes. L'icone du menu, que WordPress
   n'affiche que sous 600 px, prend le relais jusqu'a 900. */
@media (min-width: 600px) and (max-width: 899px) {
	.angelle-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.angelle-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.angelle-header-actions {
		gap: 0.9rem;
	}

	.angelle-rdv {
		order: -1;
	}
}

@media (max-width: 419px) {
	.angelle-rdv-long {
		display: none;
	}

	.angelle-rdv-court {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.angelle-header,
	.angelle-header::before,
	.angelle-header .wp-block-site-logo img,
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* Les ancres et le focus clavier s'arretent sous la barre compactee, pas
   derriere : 48 px de logo, 1 rem de marges, 1 rem d'air. */
html {
	scroll-padding-top: calc(48px + 2rem);
}

/* Les liens de contenu prennent la couleur d'accent (styles globaux), mais le menu
   garde le gris fonce de l'ancien site. */
.angelle-header .wp-block-navigation a {
	color: #333333;
}

/* Le menu se detache : un peu de graisse, et la page courante en violet. */
.angelle-header .wp-block-navigation {
	font-weight: 600;
}

.angelle-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-2);
}

.angelle-header .wp-block-navigation .current-menu-item > a,
.angelle-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* --- Titre de l'accueil ---------------------------------------------------
   L'ancien site donnait 2.5em au titre de la page d'accueil, 3.7em au-dela de
   768 px. Les autres pages gardent le palier xx-large des styles globaux. */
body.page-accueil .wp-block-post-title {
	font-size: clamp(2rem, 4.5vw, 2.9rem);
}

/* --- Pied de page ---------------------------------------------------------
   Un aplat violet fonce ferme la page. Sur le fond lavande, le simple filet
   qui le separait du contenu ne se voyait pas. Tout y passe en blanc : le
   survol violet fonce des styles globaux y rendrait les liens invisibles, il est
   remplace par un soulignement. */
.wp-site-blocks > footer {
	background: var(--wp--preset--color--accent-2);
	color: rgba(255, 255, 255, 0.9);
}

.wp-site-blocks > footer h2,
.wp-site-blocks > footer a,
.wp-site-blocks > footer a:hover {
	color: var(--wp--preset--color--base);
}

.wp-site-blocks > footer .wp-block-navigation a:hover {
	text-decoration: underline;
}

/* has-muted-color est en !important dans les styles de WordPress. */
.wp-site-blocks > footer .has-muted-color {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Le contour de focus violet ne se verrait pas sur l'aplat. */
.wp-site-blocks > footer a:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* --- Portrait de la page "Qui suis-je ?" ----------------------------------
   Coins arrondis comme les autres images du site. Le fichier d'origine
   portait un cadre blanc incruste ; il a ete recadre (media 253). */
.page-qui-suis-je .wp-block-media-text__media img {
	border-radius: 12px;
}

/* En bref : les reperes du parcours, pour qui ne lira pas tout le recit. Meme
   encadre teinte que le sommaire des seances ; l'annee en violet dans une
   colonne fixe, pour que les lignes se lisent comme une frise. */
.angelle-en-bref {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid rgba(123, 90, 158, 0.14);
	border-radius: 16px;
	background: rgba(123, 90, 158, 0.06);
}

.angelle-en-bref h2 {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.angelle-en-bref ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.angelle-en-bref li {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.3rem 0;
	line-height: 1.45;
}

.angelle-en-bref li strong {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* --- Carte Google de la page Contact -----------------------
   Elle ne se charge qu'au clic (site.js) : en attendant, le cadre garde
   sa taille et affiche une explication et un bouton, dans l'encadre teinte du
   sommaire des seances. */
/* Le format 16/9 est porte par la carte elle-meme, pas par le cadre : sur
   mobile, l'explication et le bouton sont plus hauts que ce format, et un
   cadre fixe coupait le bas du bouton. L'explication prend simplement la
   hauteur de son contenu, avec un minimum. */
.angelle-map {
	display: flex;
}

.angelle-map > * {
	flex: 1;
}

.angelle-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

.angelle-map-attente {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 12rem;
	padding: 1.25rem;
	border: 1px solid rgba(123, 90, 158, 0.14);
	border-radius: 12px;
	background: rgba(123, 90, 158, 0.06);
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	text-align: center;
}

.angelle-map-attente p {
	max-width: 32rem;
	margin: 0;
}

/* Meme grammaire que les boutons en contour du theme. */
.angelle-map-bouton {
	min-width: 12.5rem;
	padding: calc(0.75em - 2px) calc(1.5em - 2px);
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.angelle-map-bouton:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Classes utilitaires utilisees dans le contenu des pages -------------- */
.no-underline a,
a.no-underline {
	text-decoration: none;
}

@media (max-width: 768px) {
	.flex-basis-100 > * {
		flex-basis: 100%;
	}

	.margin-top-mobile {
		margin-top: 2rem !important;
	}
}

/* --- Page « Qui suis-je ? » ------------------------------------------------
   Le bloc media-texte ecrasait seize paragraphes dans une colonne de 480 px,
   en laissant une gouttiere vide sous le portrait. On repasse en habillage :
   la photo flotte, le texte reprend toute la largeur. */
@media (min-width: 782px) {
	.page-qui-suis-je .wp-block-media-text {
		display: block;
		grid-template-columns: none;
	}

	.page-qui-suis-je .wp-block-media-text__media {
		float: left;
		width: 34%;
		margin: 0.4rem 2rem 1.25rem 0;
	}

	.page-qui-suis-je .wp-block-media-text__content {
		padding: 0;
	}

	.page-qui-suis-je .wp-block-media-text::after {
		content: '';
		display: block;
		clear: both;
	}
}

/* Sur mobile, le media-texte s'empile : WordPress garde alors une marge
   interieure de 8 % autour du texte, qui le decalait par rapport au reste de
   la page, et le portrait occupait tout l'ecran. */
@media (max-width: 781px) {
	.page-qui-suis-je .wp-block-media-text__content {
		padding: 0;
	}

	.page-qui-suis-je .wp-block-media-text__media {
		max-width: 15rem;
		margin: 0 auto 1.25rem;
	}
}

/* --- Sommaire des seances (pages Seances et Accueil) ----------------------
   Le meme sommaire sert sur les deux pages : une grille portant la classe
   .angelle-sommaire. Le .wp-block-group en tete des selecteurs n'est pas
   decoratif : il faut deux classes pour passer devant les styles de mise en
   page que WordPress generait pour la grille (wordpress.css).
   La grille est en pleine largeur alors que le reste de la page est
   contraint : sans les deux colonnes fixees ici, les bords gauches ne
   s'alignaient pas. */
@media (min-width: 760px) {
	.wp-block-group.angelle-sommaire {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Le sommaire est pose dans un encadre teinte. Ses entrees et les en-tetes de
   section ont la meme forme, vignette carree et titre violet : sans cadre, on
   ne voyait pas ou finissait le sommaire et ou commencaient les seances.
   L'encadre remplace aussi les separateurs en pointilles qui l'entouraient. */
.wp-block-group.angelle-sommaire {
	padding: clamp(1rem, 3vw, 1.75rem);
	border: 1px solid rgba(123, 90, 158, 0.14);
	border-radius: 16px;
	background: rgba(123, 90, 158, 0.06);
}

/* Les entrees du sommaire portent blockGap:0 dans leurs attributs, ce qui
   annule toute marge sur leurs enfants : l'ecart entre titre, pastille et
   description se donne par le gap du conteneur flex. */
.wp-block-group.angelle-sommaire > .wp-block-group {
	gap: 0.2rem;
}

/* Les titres du sommaire heritaient du 1.75rem des h2 : trois d'entre eux
   passaient sur deux lignes et la description tombait hors du premier regard. */
.wp-block-group.angelle-sommaire .angelle-lien-seance {
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Le titre est deja un lien vers la section : un chevron le signale, ce qui
   rend inutile le « Plus de details… » repete six fois. */
.wp-block-group.angelle-sommaire .angelle-lien-seance a::after {
	content: '\00a0\203A';
	display: inline-block;
	transition: transform 0.15s ease;
}

.wp-block-group.angelle-sommaire .angelle-lien-seance a:hover {
	text-decoration: underline;
}

.wp-block-group.angelle-sommaire .angelle-lien-seance a:hover::after {
	transform: translateX(0.2em);
}

.wp-block-group.angelle-sommaire p {
	line-height: 1.5;
}

/* Le bloc media-texte n'est pas un conteneur de mise en page WordPress : la
   remise a zero de la marge du premier enfant ne s'y applique pas, et le texte
   descendait de 16 px sous le haut de l'image. */
.wp-block-media-text__content > *:first-child {
	margin-top: 0;
}

/* Bandeau d'ouverture, commun a toutes les pages. Il vient de l'image mise en
   avant de la page. Il s'affiche dans le ratio de ses illustrations
   (1600 x 656) : recadre sur 160 px, il perdait pres de la moitie de sa
   hauteur sur ordinateur (la lune du bandeau Seances disparaissait) et ses
   cotes sur mobile. Sur mobile, le ratio reel est d'ailleurs moins haut que
   l'ancienne bande. object-fit garde la meme forme a toutes les pages si une
   future illustration n'a pas exactement ce ratio. */
.angelle-banniere {
	margin-top: 1.1rem;
	margin-bottom: 1.4rem;
}

.angelle-banniere img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1600 / 656;
	border-radius: 12px;
	object-fit: cover;
}

/* Vignettes du sommaire : l'illustration de chaque seance, carree. Elles ne
   sont pas cliquables, car le titre l'est deja, et un second lien sans libelle
   alourdirait la navigation au clavier.

   Les illustrations sont composees en carre (la colonne des chakras est
   verticale) : un recadrage en bandeau les couperait. Chaque entree est donc en
   ligne, vignette a gauche, texte a droite, a toutes les tailles d'ecran. La
   vignette sort du flux plutot que de passer le groupe en grille, pour garder
   le gap du conteneur flex. */
.wp-block-group.angelle-sommaire {
	--vignette: 5.5rem;
}

@media (min-width: 760px) {
	.wp-block-group.angelle-sommaire {
		--vignette: 7rem;
	}
}

.wp-block-group.angelle-sommaire > .wp-block-group {
	position: relative;
	flex-wrap: nowrap;
	min-height: var(--vignette);
	padding-left: calc(var(--vignette) + 1.1rem);
}

.wp-block-group.angelle-sommaire .angelle-vignette {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--vignette);
	margin: 0;
}

/* Question personnelle et Seance sur mesure ne sont pas des seances comme
   les autres : l'une est une reponse breve, l'autre combine les precedentes.
   Chacune porte une pastille qui dit pourquoi, et les deux sont posees sur
   une carte claire, le verre depoli du reste du site.

   La carte deborde de l'entree (marges negatives) au lieu de la rembourrer :
   vignettes et titres restent alignes sur ceux de la meme ligne. Le debord
   (--bord) reste sous la moitie du gap de la grille, pour laisser de l'air
   entre une carte et sa voisine ; quand deux cartes se suivent, la seconde
   descend d'autant. L'ombre interieure tient lieu de bordure, qui aurait
   decale le contenu d'un pixel. */
.wp-block-group.angelle-sommaire {
	--bord: 0.5rem;
}

@media (min-width: 760px) {
	.wp-block-group.angelle-sommaire {
		--bord: 0.7rem;
	}
}

.wp-block-group.angelle-sommaire > .angelle-speciale {
	box-sizing: border-box;
	min-height: calc(var(--vignette) + 2 * var(--bord));
	margin: calc(-1 * var(--bord));
	padding: var(--bord);
	padding-left: calc(var(--vignette) + 1.1rem + var(--bord));
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px rgba(123, 90, 158, 0.16);
}

.wp-block-group.angelle-sommaire > .angelle-speciale + .angelle-speciale {
	margin-top: var(--bord);
}

.wp-block-group.angelle-sommaire > .angelle-speciale .angelle-vignette {
	top: var(--bord);
	left: var(--bord);
}

.angelle-vignette img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

/* En-tete de section : la vignette du sommaire, en petit, a gauche du titre et
   de la ligne tarif. Elle confirme a qui arrive par le sommaire ou le pied de
   page qu'il est au bon endroit, et rythme une page surtout faite de texte.
   Les grandes images d'origine (363 px de haut) doublaient les vignettes ; a
   cette taille, le carre tient dans la hauteur du titre et ne rallonge rien.
   Meme fichier que dans le sommaire, deja en cache. */
.angelle-entete-seance {
	gap: 1.1rem;
}

.angelle-entete-seance > .wp-block-group {
	flex: 1;
	min-width: 0;
}

.angelle-picto {
	flex-shrink: 0;
	width: 5.5rem;
	margin: 0;
}

.angelle-picto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

@media (max-width: 759px) {
	.angelle-picto {
		width: 3.5rem;
	}
}

/* Tarif, duree et lieu sous le titre de chaque seance : on arrive souvent sur
   une section par une ancre, du sommaire ou du pied de page, sans avoir lu
   l'introduction. Le prix reprend le libelle et le violet du tableau de la
   page Contact, qui fait foi. */
.wp-block-heading + .angelle-infos {
	margin-top: 0.4rem;
}

.angelle-infos {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.angelle-infos strong {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Chaque citation est liee a son soin, mais en grand, avec le filet violet des
   styles globaux, elle prenait le pas sur l'explication. Petite et centree, elle
   conclut le texte juste avant le bouton de demande. */
.wp-block-quote.angelle-citation {
	margin-top: 1.5rem;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	text-align: center;
}

.wp-block-quote.angelle-citation p {
	font-size: inherit;
}

/* Fin des articles du blog : un article se terminait sur « Retour au blog »,
   sans rien proposer a qui avait envie d'aller plus loin. Meme encadre teinte
   que le sommaire des seances. */
.angelle-suite-article {
	margin-top: var(--wp--preset--spacing--60);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid rgba(123, 90, 158, 0.14);
	border-radius: 16px;
	background: rgba(123, 90, 158, 0.06);
	text-align: center;
}

.angelle-suite-article h2 {
	margin-top: 0;
	font-size: 1.4rem;
}

/* Renvoi vers les questions frequentes, sous le sommaire de la page Seances :
   colle a l'encadre dont il fait partie, et detache de la premiere seance. */
.angelle-renvoi-faq {
	margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Questions frequentes : des sections depliables, comme « Comment se passe
   la seance ? », resserrees l'une sous l'autre. */
.angelle-faq > .wp-block-details + .wp-block-details {
	margin-top: 0.6rem;
}

/* Temoignages, prets pour les premiers retours : une citation sur fond
   teinte, avec le prenom et la seance en dessous (voir le README). */
.wp-block-quote.angelle-temoignage {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-radius: 12px;
	background: rgba(123, 90, 158, 0.06);
}

.wp-block-quote.angelle-temoignage cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	font-style: normal;
}

/* Mot de la fin de l'accueil : meme voix discrete que les citations des
   seances, sous le bouton de contact. */
.angelle-mot-de-la-fin {
	margin-top: 1.5rem;
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* Qui recoit : l'introduction dit « ecrivez-moi », elle commence donc par dire
   qui. Portrait rond, nom, lien vers la page Qui suis-je. Le texte alternatif
   du portrait est vide : le nom est juste a cote, le lire deux fois
   n'apprendrait rien. */
.angelle-praticienne {
	gap: 0.9rem;
}

.angelle-praticienne .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.angelle-praticienne img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.angelle-praticienne p {
	margin: 0;
	line-height: 1.45;
}

/* Bon a savoir, sous l'introduction de la page Seances : le suivi medical et
   la place des messages recus. En un seul paragraphe gris, les trois phrases
   se lisaient mal ; ici chacune a sa ligne, sous un petit titre, dans le meme
   encadre teinte que la fin des articles. La vignette du coeur, au format des
   en-tetes de seance mais plus petite, ne doit pas faire croire a une seance
   de plus. */
.angelle-bon-a-savoir {
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(123, 90, 158, 0.14);
	border-radius: 14px;
	background: rgba(123, 90, 158, 0.06);
	font-size: 0.95rem;
	line-height: 1.5;
}

.angelle-bon-a-savoir > .wp-block-group {
	flex: 1;
	min-width: 0;
}

.angelle-bon-a-savoir .angelle-picto {
	width: 3.5rem;
}

@media (max-width: 759px) {
	.angelle-bon-a-savoir .angelle-picto {
		width: 2.75rem;
	}
}

.angelle-bon-a-savoir p {
	margin: 0;
}

.angelle-bon-a-savoir p + p {
	margin-top: 0.5rem;
}

.angelle-bon-a-savoir-titre {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Boutons de demande : ils ouvrent WhatsApp avec un message deja redige. Le
   logo le dit avant le clic, et la ligne en dessous propose l'e-mail et le
   telephone, pour que WhatsApp reste une facilite et pas un passage oblige.
   Le logo est celui du bloc « liens sociaux » de WordPress, en masque pour
   prendre la couleur du texte. */
.angelle-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
}

.angelle-whatsapp .wp-block-button__link::before {
	content: '';
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	background: currentColor;
	-webkit-mask: var(--angelle-logo-whatsapp) center / contain no-repeat;
	mask: var(--angelle-logo-whatsapp) center / contain no-repeat;
}

:root {
	--angelle-logo-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z'/%3E%3C/svg%3E");
}

.angelle-autres-canaux {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	text-align: center;
}

/* --- Page Contact ---------------------------------------------------------
   Les tarifs etaient noyes dans trois paragraphes de prose. Un tableau se
   parcourt du regard ; c'est aussi la source unique, le sommaire des seances
   n'y renvoie plus qu'une fois. */
.angelle-tarifs {
	margin-block: 1.1rem;
}

.angelle-tarifs table {
	border-collapse: collapse;
	width: 100%;
}

.angelle-tarifs td {
	/* Le style par defaut du bloc tableau encadre chaque cellule ; ici seul un
	   filet horizontal separe les lignes. */
	padding: 0.7rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--surface);
	vertical-align: top;
}

.angelle-tarifs tr:last-child td {
	border-bottom: 0;
}

.angelle-tarifs td:last-child {
	/* width:1% reduit la colonne a son contenu, nowrap l'empeche de casser
	   « Comptez environ une heure » sur deux lignes. */
	width: 1%;
	white-space: nowrap;
	text-align: right;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.angelle-precision {
	display: inline-block;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	font-weight: 400;
}

/* Deroule : la numerotation porte l'etape, elle merite d'etre visible. */
.angelle-etapes {
	padding-left: 0;
	list-style: none;
	counter-reset: etape;
}

.angelle-etapes > li {
	position: relative;
	margin-bottom: 0.7rem;
	padding-left: 2.75rem;
	counter-increment: etape;
}

.angelle-etapes > li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: 0.9rem;
	font-weight: 600;
}

.angelle-adresse {
	font-style: normal;
	line-height: 1.7;
}

/* Sur mobile, deux colonnes ne tenaient pas : le prix, qui ne passe jamais a
   la ligne, debordait a droite et ecrasait le libelle en une colonne etroite.
   Les cellules s'empilent : libelle, puis prix, chacun sur toute la largeur,
   et un seul filet par tarif. */
@media (max-width: 600px) {
	.angelle-tarifs table,
	.angelle-tarifs tbody,
	.angelle-tarifs tr,
	.angelle-tarifs td {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	.angelle-tarifs td:first-child {
		padding-bottom: 0.2rem;
		border-bottom: 0;
	}

	.angelle-tarifs td:last-child {
		width: 100%;
		padding-top: 0;
		white-space: normal;
		text-align: left;
	}
}

/* « Question personnelle » n'est pas une seance : reponse breve, a distance,
   a un tarif different. Une pastille le dit, la ou un filet laissait deviner,
   et un mot reste lisible quelle que soit la perception des couleurs. La
   Seance sur mesure a la sienne. Sur mobile, la pastille passe sur deux
   lignes : un rayon de 1em reste une pilule sur une ligne et devient un
   rectangle arrondi sur deux, la ou 999px en faisait un ovale. */
.angelle-badge {
	align-self: flex-start;
	width: fit-content;
	margin-top: 0.15rem;
	margin-bottom: 0.5rem;
	padding: 0.25em 0.85em;
	border-radius: 1em;
	line-height: 1.4;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Sections depliables ---------------------------------------------------
   <details> natif n'offre qu'un minuscule triangle systeme. On en fait un
   controle visible, ce qui rend inutile un « cliquez pour afficher ». */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 10px;
	padding: 0.75rem 1.25rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	padding: 0.25rem 0;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translateY(-0.15em);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::before {
	transform: rotate(45deg) translateY(-0.1em);
}

/* Bouton en contour : meme grammaire que la carte au trait. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Tous les boutons ont la meme taille. Le style « contour » de Twenty
   Twenty-Five ajoutait une marge interieure plus large a sa bordure de 2 px :
   a cote d'un bouton plein, « Contact & tarifs » faisait 59 px de haut contre
   49. La bordure est maintenant prise sur la marge interieure, et une largeur
   minimale egalise les boutons courts : une paire cote a cote est symetrique,
   et les trois boutons de la page Contact ont la meme largeur. */
.wp-block-button__link {
	min-width: 12.5rem;
}

/* En em, comme la marge des boutons pleins (styles globaux) : le texte des
   boutons est plus petit sur mobile, la marge doit suivre. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.75em - 2px) calc(1.5em - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Retour en haut -------------------------------------------------------
   A garder hors de toute carte : backdrop-filter ferait de celle-ci le bloc
   conteneur du bouton, qui se figerait alors sur la carte et non sur l'ecran. */
.angelle-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(70, 50, 95, 0.28);
	transition: background 0.2s ease;
}

.angelle-to-top:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

/* Remplace le script de defilement doux qui vivait dans le contenu. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --- Accessibilite ---------------------------------------------------------
   Un contour de focus visible au clavier, que les styles de lien effacaient. */
a:focus-visible,
summary:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}


/* WordPress pose aussi un contour sur tout element qui a le focus, meme apres
   un clic de souris : un cadre violet restait autour de « Comment se passe la
   seance ? » une fois la section depliee. On ne le garde que pour le clavier. */
.wp-site-blocks :focus:not(:focus-visible) {
	outline: none;
}

/* Au clavier, le contour d'une section depliable entoure tout son cadre
   arrondi, plutot que la seule ligne de titre serree contre la bordure. */
@supports selector(:has(*)) {
	.wp-block-details:has(> summary:focus-visible) {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	.wp-block-details > summary:focus-visible {
		outline: none;
	}
}