/* ==========================================================================
   Capsule.S - styles sur mesure
   Direction active : « Arche et lumiere ».
   Le blanc porte la page, l'or est rare, le terracotta agit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Convention : toute regle de rangee ou de colonne Kadence porte SES DEUX
   noms, celui du site et celui de l'editeur.

   Kadence ne construit pas ses rangees pareil des deux cotes, et ce ne sont
   pas seulement les niveaux qui changent, ce sont les classes elles-memes.

     site      .kb-row-layout-wrap > .kt-row-column-wrap > ... > .kt-inside-inner-col
     editeur   .wp-block-kadence-rowlayout > .innerblocks-wrap > ... > .kadence-inner-column-inner

   La source fait foi : la feuille EDITEUR de Kadence,
   dist/blocks-rowlayout.css, et la CSS que son script genere dans la toile,
   qui s'ecrit noir sur blanc
   `.wp-block-kadence-rowlayout.kb-row-id-X > .innerblocks-wrap.kb-grid-columns-2
   > .wp-block-kadence-column > .kadence-inner-column-inner`.
   C'est .innerblocks-wrap qui porte la grille dans l'editeur, exactement comme
   .kt-row-column-wrap la porte sur le site.

   Chacune de ces regles liste donc les deux. Aucun risque de melange :
   .innerblocks-wrap et .kadence-inner-column-inner n'existent JAMAIS sur le
   site public (verifie, zero occurrence dans style-blocks-rowlayout.css), et
   .kt-row-column-wrap n'existe jamais dans l'editeur. Chaque moitie du
   selecteur ne peut matcher que de son cote.

   Historique, parce que je me suis trompe deux fois avant de mesurer : le
   27 aout 2026, la toile affichait Les Lieux et L'equipe avec la mise en page
   effondree, titres replies lettre par lettre, et tous les bandeaux de titre
   sans leur centrage. J'ai d'abord cru a un simple niveau d'ecart, puis a une
   transformation possible a l'execution. Les deux etaient faux. La lecon :
   lire la feuille editeur du greffon avant de deduire quoi que ce soit de son
   JavaScript.
   -------------------------------------------------------------------------- */


:root {
	--capsule-blanc:        #FFFFFF;
	--capsule-creme:        #FBF4E6;
	--capsule-creme-fonce:  #F4EBDA;
	--capsule-encre:        #3A2A14;
	--capsule-encre-douce:  #57452C;
	--capsule-attenue:      #8C7A5E;
	--capsule-filet:        #E4DACB;
	--capsule-terracotta:   #C15634;
	--capsule-terracotta-f: #A9482B;
	--capsule-or:           #E6B422;

	--capsule-transition:   0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Defilement
   Fluide sans extension. `scroll-behavior` n'agit que sur les sauts d'ancre et
   les defilements demandes par script : il n'ajoute aucune inertie a la
   molette, contrairement aux greffons de \u00ab smooth scroll \u00bb qui detournent le
   defilement natif et le rendent mou sur pave tactile.
   `scroll-padding-top` empeche une ancre d'arriver sous l'en-tete colle, qui
   fait 90 px une fois retreci.
   -------------------------------------------------------------------------- */

:root {
	scroll-padding-top: 106px;
}

@media (prefers-reduced-motion: no-preference) {

	:root {
		scroll-behavior: smooth;
	}
}

@media (max-width: 1024px) {

	:root {
		scroll-padding-top: 92px;
	}
}

/* --------------------------------------------------------------------------
   En-tete
   Au repos il flotte sur la page, sans barre ni bordure.
   Au defilement il redevient blanc et pose un filet dore.
   -------------------------------------------------------------------------- */

.site-header-row-container {
	transition: background-color var(--capsule-transition),
	            box-shadow var(--capsule-transition);
}

/* Le filet dore n'apparait que lorsque l'en-tete est reellement colle. */
.site-header-row-container.item-is-stuck {
	box-shadow: 0 1px 0 0 var(--capsule-or);
}

/* --------------------------------------------------------------------------
   Navigation
   Espacement genereux, et un filet terracotta qui se deploie au survol.
   Le retrait du filet est pilote par la meme variable que le rembourrage,
   ce qui garantit qu'il epouse exactement la largeur du mot.
   -------------------------------------------------------------------------- */

.header-navigation .header-menu-container > ul > li > a {
	--capsule-nav-retrait: 18px;
	position: relative;
	padding-inline: var(--capsule-nav-retrait);
}

.header-navigation .header-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	inset-inline: var(--capsule-nav-retrait);
	bottom: calc(50% - 0.95em);
	height: 1px;
	background-color: var(--capsule-terracotta);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--capsule-transition);
}

.header-navigation .header-menu-container > ul > li > a:hover::after,
.header-navigation .header-menu-container > ul > li > a:focus-visible::after,
.header-navigation .header-menu-container > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Bouton « Devenir Capseur »
   Pilule terracotta. Aucune ombre portee : la profondeur vient de la couleur.
   -------------------------------------------------------------------------- */

.site-header .header-button {
	box-shadow: none;
	transition: background-color var(--capsule-transition),
	            transform 0.18s ease-out;
}

.site-header .header-button:active {
	transform: translateY(1px);
}

/* Dans le tiroir mobile, le bouton occupe toute la largeur. */
.header-mobile-popup .header-button {
	display: block;
	text-align: center;
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.site-header .custom-logo-link img {
	transition: opacity var(--capsule-transition);
}

.site-header .custom-logo-link:hover img {
	opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Accessibilite : tout mouvement se replie si le visiteur le demande.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.site-header-row-container,
	.header-navigation .header-menu-container > ul > li > a::after,
	.site-header .header-button,
	.site-header .custom-logo-link img {
		transition: none;
	}

	.header-navigation .header-menu-container > ul > li > a:hover::after,
	.header-navigation .header-menu-container > ul > li.current-menu-item > a::after {
		transform: scaleX(1);
	}
}

/* ==========================================================================
   Bandeau d'accueil
   Texte a gauche, deux capsules photo a droite, l'ensemble centre.
   La capsule claire porte l'espace blanc, la sombre l'espace noir. Un sceau
   dore traverse les deux sur une meme ligne horizontale : elles sont scellees
   ensemble. Au chargement, les deux se separent d'un meme point, une capsule
   qui s'ouvre en deux, ce que le site racontera ensuite au clic.
   ========================================================================== */

/* Kadence applique padding 0 et des marges negatives sur .entry-content
   .alignfull, avec une specificite superieure. On la depasse ici plutot que
   de tricher avec !important. */
.entry-content .capsule-hero.alignfull,
.capsule-hero.alignfull {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

/* Bandeau creme et colonne unique centree, repris le 22 aout sur le retour de
   Laura du 19 : les deux capsules photo etaient trop etroites pour qu'on y
   distingue quoi que ce soit, et sur fond blanc les onglets du menu se
   voyaient mal. Le creme du bandeau contre le blanc de la barre detache l'un
   de l'autre, ce que la transparence ne faisait pas.
   Meme principe que la banniere coloree des pages interieures de Connaissance
   et Partage, transposee a la charte : la couleur porte le titre, elle ne le
   concurrence pas.
   Le remplissage haut ne compense plus la hauteur de l'en-tete : celui-ci
   n'est plus transparent sur l'accueil, il occupe donc sa propre place. */
.capsule-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(74svh, 640px);
	padding-top: clamp(56px, 7vw, 92px);
	padding-bottom: clamp(56px, 7vw, 92px);
	background-color: var(--capsule-creme);
}

.capsule-hero > .wp-block-group__inner-container {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

/* --- La colonne de texte, centree --- */

.capsule-hero__texte {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

/* Sur le creme, le terracotta ne donne que 4,13:1. C'est sous le seuil de
   4,5 du texte courant, mais le seuil qui s'applique ici est celui du grand
   texte, 3:1, et ce titre ne descend jamais sous 41 px. Un lien de texte sur
   creme, lui, reste au terracotta fonce, comme dans le pied de page. */
/* Graisse allegee le 24 aout a la demande de Laura, sur ce seul titre : le
   reste du site garde sa 600. A cette taille, la 600 epaississait le mot au
   point de le rendre lourd, la 500 lui rend son elegance sans le rendre
   fragile. ⚠️ Cela ne fonctionne que parce que `functions.php` fait charger
   la graisse : Kadence ne demandait que la 600. */
.capsule-hero .capsule-hero__titre {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.2rem);
	font-weight: 500;
	line-height: 1.04;
	color: var(--capsule-terracotta);
}

/* L'accroche : une phrase posee, plus calme que le titre et plus haute que le
   surtitre. Elle donne au bandeau un troisieme palier de lecture, qui lui
   manquait entre le titre et la ligne de positionnement. */
.capsule-hero .capsule-hero__accroche {
	margin: 0;
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.3;
	color: var(--capsule-encre);
}

.capsule-hero .capsule-hero__positionnement {
	margin: clamp(14px, 1.8vw, 20px) 0 clamp(28px, 4vw, 44px);
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(0.95rem, 1.35vw, 1.15rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--capsule-encre);
}

.capsule-hero .capsule-hero__actions {
	justify-content: center;
}

/* Filet dore a capsule. Composant partage : il sert sous chaque titre du site.
   L'ornement etait un losange jusqu'au 22 aout ; c'est desormais la capsule
   elle-meme, arche a base plate posee sur le filet, comme dans le logo.
   WordPress plafonne les separateurs a 100px avec une specificite de 3
   classes, d'ou les selecteurs ci-dessous plutot qu'un !important. */
.entry-content .wp-block-separator.capsule-filet-or,
.wp-block-separator.capsule-filet-or:not(.is-style-wide) {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 1px;
	margin: clamp(22px, 3vw, 34px) 0;
	border: 0;
	background: linear-gradient(90deg, var(--capsule-or) 0%, var(--capsule-or) 82%, transparent 100%);
	opacity: 1;
	overflow: visible;
	transform-origin: left center;
}

/* La capsule repose sur le filet, elle ne le traverse pas : c'est ce qui la
   distingue du sceau de Nos Capsule.s, qui lui coupe la gelule en deux. */
.capsule-filet-or::after {
	content: "";
	position: absolute;
	left: 82%;
	top: 50%;
	width: 18px;
	height: 10px;
	background-color: var(--capsule-or);
	border-radius: 999px 999px 1px 1px;
	transform: translate(-50%, -100%);
}

/* Dans un bandeau centre, un filet qui part du bord gauche et s'efface a
   droite tirerait l'oeil de travers. Ici il rentre des deux cotes et la
   capsule se pose au milieu, sur l'axe du titre. */
/* Trois classes dans le selecteur de base (`.entry-content
   .wp-block-separator.capsule-filet-or`) : il faut au moins autant ici, sinon
   le `width: 100%` du composant l'emporte et le filet prend toute la colonne.
   C'est ce qui s'est produit le 22 aout sur la page L'equipe. */
.entry-content .capsule-hero .wp-block-separator.capsule-filet-or,
.entry-content .capsule-page-entete .wp-block-separator.capsule-filet-or,
.capsule-hero .wp-block-separator.capsule-filet-or,
.capsule-page-entete .wp-block-separator.capsule-filet-or {
	width: min(340px, 70%);
	margin-inline: auto;
	background: linear-gradient(90deg, transparent 0%, var(--capsule-or) 24%, var(--capsule-or) 76%, transparent 100%);
	transform-origin: center;
}

.capsule-hero .capsule-filet-or::after,
.capsule-page-entete .capsule-filet-or::after {
	left: 50%;
}

/* La grille repasse au blanc le 23 aout. Le creme datait du 15 aout, quand la
   crainte etait que les gelules blanches perdent leur bord sur du blanc :
   depuis, la gelule a gagne son ombre portee, qui la detache toute seule. Et
   tant que la grille restait creme, elle se confondait avec la banniere de
   titre posee le 22, si bien que la page n'avait plus d'entree visible.
   Le blanc rend cette page identique a L'equipe et a Contact : banniere creme,
   contenu blanc. Une seule regle pour toutes les pages interieures.
   Mesure faite avant de trancher : les variantes creme fonce et filet fin
   marquaient bien une limite, mais aucune des deux ne separait vraiment deux
   zones, elles ajoutaient une ligne dans un aplat continu. */
.capsule-membres-section.wp-block-kadence-rowlayout,
.capsule-membres-cta.wp-block-kadence-rowlayout {
	background-color: var(--capsule-blanc);
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
}

.capsule-membres-section.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-membres-section.wp-block-kadence-rowlayout  .innerblocks-wrap ,
.capsule-membres-cta.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-membres-cta.wp-block-kadence-rowlayout  .innerblocks-wrap {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

/* La palette globale pose du creme sur le corps de page. Sur l'accueil chaque
   section peint son propre fond, il ne se voyait donc jamais. Sur les pages
   interieures il remontait derriere tout le contenu, ce qui noyait la banniere
   de titre : le blanc porte la page, le creme reste aux bandes qui le
   demandent, la banniere et le pied de page. */
.content-area {
	background-color: var(--capsule-blanc);
}

/* Bouton en pilule, comme celui de l'en-tete. La classe capsule-bouton
   existait dans le balisage depuis le 13 aout mais n'avait jamais ete
   ecrite : le bouton heritait du rectangle par defaut de Kadence. */
.capsule-bouton .wp-block-button__link {
	padding: 15px clamp(28px, 3vw, 40px);
	border-radius: 999px;
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	letter-spacing: 0.04em;
	box-shadow: none;
	transition: background-color var(--capsule-transition),
	            transform 0.18s ease-out;
}

.capsule-bouton .wp-block-button__link:hover,
.capsule-bouton .wp-block-button__link:focus-visible {
	background-color: var(--capsule-terracotta-f);
}

.capsule-bouton .wp-block-button__link:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {

	.capsule-bouton .wp-block-button__link {
		transition: none;
	}

	.capsule-bouton .wp-block-button__link:active {
		transform: none;
	}
}

/* --- La bande de reperes ---
   Trois entrees qui disent d'un coup d'oeil ce que contient le lieu. Laura les
   a demandees expressement le 19 aout. Le filet separateur appartient a
   l'entree qui suit : pas d'element vide dans le balisage, et il disparait de
   lui-meme au retour a la ligne. */

.capsule-hero .capsule-hero__reperes {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: clamp(16px, 2.4vw, 32px);
	margin: clamp(40px, 5.5vw, 72px) 0 0;
	padding: 0;
	list-style: none;
}

.capsule-hero .capsule-hero__repere {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(10px, 1.4vw, 16px);
	margin: 0;
}

.capsule-hero .capsule-hero__repere + .capsule-hero__repere {
	padding-left: clamp(16px, 2.4vw, 32px);
	border-left: 1px solid var(--capsule-or);
}

.capsule-hero .capsule-hero__repere-icone {
	display: block;
	color: var(--capsule-or);
}

.capsule-hero .capsule-hero__repere-icone svg {
	display: block;
	height: clamp(30px, 3.2vw, 38px);
	width: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* L'espace noir est le seul aplat de la bande. A cette taille deux contours
   dores se ressembleraient : c'est le plein qui les distingue, et il raconte
   le lieu au passage. */
.capsule-hero .capsule-hero__repere--noir .capsule-hero__repere-icone {
	color: var(--capsule-encre);
}

.capsule-hero .capsule-hero__repere--noir .capsule-hero__repere-icone svg {
	fill: currentColor;
	stroke: none;
}

.capsule-hero .capsule-hero__repere-mot {
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	font-size: clamp(0.72rem, 0.95vw, 0.82rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--capsule-encre);
}

/* --- Animation ---
   Le bandeau n'a plus de photo : c'est le mouvement qui doit le tenir. Le
   titre monte, le filet s'ouvre du centre vers les deux bords, puis la
   capsule descend et vient se sceller dessus. Le geste dit la marque avant
   que la page ne l'explique.
   fill-mode backwards : l'etat final est l'etat naturel, donc si l'animation
   ne joue pas, tout reste visible. */

@keyframes capsule-monte {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes capsule-trace-centre {
	from { opacity: 0; transform: scaleX(0); }
	to   { opacity: 1; transform: scaleX(1); }
}

/* Le depassement a 62 % puis le retour a 100 % font le petit choc du sceau
   qui se pose. Sans lui la capsule se contente d'atterrir. */
@keyframes capsule-sceau-pose {
	0%   { opacity: 0; transform: translate(-50%, -340%) scaleY(0.72); }
	62%  { opacity: 1; transform: translate(-50%, -86%)  scaleY(1.14); }
	100% { opacity: 1; transform: translate(-50%, -100%) scaleY(1); }
}

.capsule-hero .capsule-filet-or             { animation: capsule-trace-centre 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }
.capsule-hero .capsule-filet-or::after      { animation: capsule-sceau-pose 0.62s cubic-bezier(0.2, 1.2, 0.4, 1) 0.86s backwards; }
.capsule-hero .capsule-hero__accroche       { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.52s backwards; }
.capsule-hero .capsule-hero__positionnement { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.64s backwards; }
.capsule-hero .capsule-hero__actions        { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.78s backwards; }

/* Les trois reperes arrivent l'un apres l'autre plutot qu'en bloc : la bande
   ferme le bandeau, elle ne doit pas y tomber d'un coup. */
.capsule-hero .capsule-hero__repere:nth-child(1) { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.98s backwards; }
.capsule-hero .capsule-hero__repere:nth-child(2) { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.10s backwards; }
.capsule-hero .capsule-hero__repere:nth-child(3) { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.22s backwards; }

/* --- Mobile --- */

@media (max-width: 900px) {

	.capsule-hero {
		min-height: 0;
	}

	.capsule-hero__texte {
		max-width: none;
	}

	.capsule-hero .capsule-hero__reperes {
		gap: 16px 18px;
	}

	.capsule-hero .capsule-hero__repere + .capsule-hero__repere {
		padding-left: 18px;
	}
}

/* Sur telephone, les trois reperes ne tenaient pas sur une ligne : le
   troisieme passait dessous en gardant son filet de gauche, qui devenait un
   trait isole en debut de ligne. Un flex ne sait pas qu'il vient de revenir a
   la ligne. Une grille de trois colonnes, elle, ne revient jamais : les mots
   se coupent en deux lignes et les filets restent a leur place. */
@media (max-width: 640px) {

	.capsule-hero .capsule-hero__reperes {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.capsule-hero .capsule-hero__repere {
		text-align: center;
	}

	.capsule-hero .capsule-hero__repere + .capsule-hero__repere {
		padding-left: 12px;
	}
}

/* --- Accessibilite --- */

@media (prefers-reduced-motion: reduce) {

	.capsule-hero .capsule-hero__titre,
	.capsule-hero .capsule-filet-or,
	.capsule-hero .capsule-filet-or::after,
	.capsule-hero .capsule-hero__accroche,
	.capsule-hero .capsule-hero__positionnement,
	.capsule-hero .capsule-hero__actions,
	.capsule-hero .capsule-hero__repere {
		animation: none;
	}
}

/* ==========================================================================
   Presentation et valeurs
   Photo en arche a gauche, texte a droite : l'inverse du bandeau, pour que
   deux sections voisines ne partagent pas la meme mise en page.
   ========================================================================== */

.entry-content .capsule-presentation.alignfull,
.capsule-presentation.alignfull {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

/* Blanche depuis le 22 aout : le bandeau ayant pris le creme, deux sections
   cremes qui se suivent n'auraient forme qu'un seul aplat. Le rythme de la
   page devient creme, blanc, terracotta, creme. */
.capsule-presentation {
	padding-top: clamp(64px, 9vw, 120px);
	padding-bottom: clamp(64px, 9vw, 120px);
	background-color: var(--capsule-blanc);
}

.capsule-presentation > .wp-block-group__inner-container {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

/* --- Photo a gauche, texte a droite --- */

.capsule-presentation__haut > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.capsule-presentation .capsule-arche--atelier {
	margin: 0;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 840 / 1184;
	overflow: hidden;
	border-radius: 999px 999px 24px 24px;
}

.capsule-presentation .capsule-arche--atelier img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.capsule-presentation__texte {
	max-width: 40rem;
}

.capsule-presentation .capsule-presentation__titre {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 2.8rem);
	line-height: 1.12;
	color: var(--capsule-terracotta);
}

.capsule-presentation .capsule-presentation__chapeau {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.6;
}

.capsule-presentation__texte p {
	max-width: 62ch;
	color: var(--capsule-encre);
}

/* --- Les six valeurs, en capsules --- */

.capsule-valeurs {
	margin-top: clamp(56px, 7vw, 96px);
}

.capsule-valeurs .capsule-valeurs__titre {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--capsule-attenue);
}

/* Largeur bornee : sur un conteneur de 1360px, trois capsules a un tiers
   chacune deviennent des barres et non plus des pastilles. */
.capsule-valeurs .capsule-valeurs__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 60rem;
	align-items: stretch;
	gap: clamp(10px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.capsule-valeurs .capsule-valeurs__liste li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 13px clamp(20px, 2.2vw, 30px);
	border: 1px solid var(--capsule-or);
	border-radius: 999px;
	background-color: var(--capsule-blanc);
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(0.95rem, 1.2vw, 1.08rem);
	color: var(--capsule-encre);
}

/* La petite capsule doree, meme signature que le filet des titres. */
.capsule-valeurs .capsule-valeurs__liste li::before {
	content: "";
	width: 10px;
	height: 7px;
	flex: none;
	background-color: var(--capsule-or);
	border-radius: 999px 999px 1px 1px;
}

/* Les six capsules sont alignees depuis le 22 aout, a la demande de Laura : le
   decalage d'une sur deux se lisait comme un defaut et non comme un rythme.
   Une grille de trois colonnes leur donne toutes la meme largeur, ce qu'un
   flex ne fait pas, chaque capsule y prenant celle de son mot.
   ⚠️ La colonne du milieu en creme est retiree le 24 aout, a la demande de
   Joel : elle ne se lisait pas comme un rythme mais comme deux valeurs
   traitees a part, cooperation et inclusion. Les six sont desormais
   identiques, et c'est le survol qui les anime.

   ⚠️ Le soulevement se fait en `translate` et non en `transform` : les
   capsules portent l'animation d'entree `capsule-pose`, qui anime `transform`
   et dont le remplissage `both` ecraserait toute valeur posee au survol.
   `translate` est une propriete independante, l'animation ne la touche pas. */
.capsule-valeurs .capsule-valeurs__liste li {
	transition: translate 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
	            border-color var(--capsule-transition);
}

.capsule-valeurs .capsule-valeurs__liste li:hover {
	translate: 0 -5px;
	border-color: var(--capsule-terracotta);
	box-shadow: 0 12px 22px -14px rgba(58, 42, 20, 0.55);
}

@media (prefers-reduced-motion: reduce) {

	.capsule-valeurs .capsule-valeurs__liste li {
		transition: none;
	}

	.capsule-valeurs .capsule-valeurs__liste li:hover {
		translate: none;
	}
}

@media (max-width: 900px) {

	.capsule-valeurs .capsule-valeurs__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {

	.capsule-valeurs .capsule-valeurs__liste {
		grid-template-columns: 1fr;
	}
}

/* La phrase de Laura ferme la section et annonce le bandeau Devenir Capseur
   qui suit. Posee, pas criee : taille de sous-titre, sans gras.
   ⚠️ Reduite le 25 aout a la demande de Joel : a 1,3rem elle montait a 20,8px
   sur grand ecran, soit plus gros que le corps de texte du site (17px). Une
   phrase qui ferme une section ne doit pas peser plus lourd que celles
   qu'elle referme. Elle passe legerement sous le corps, et se centre avec le
   reste de la section. */
.capsule-valeurs .capsule-valeurs__rejoindre {
	margin: clamp(30px, 3.8vw, 46px) auto 0;
	max-width: 42rem;
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(0.98rem, 1.15vw, 1.06rem);
	line-height: 1.62;
	color: var(--capsule-encre);
	text-wrap: balance;
}

/* --- Animation : les valeurs se posent une a une --- */

@keyframes capsule-pose {
	from { opacity: 0; transform: translateY(26px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}

/* Le retard de chaque capsule passe par une variable : la regle d'animation
   peut ainsi etre plus specifique sans ecraser les retards. */
.capsule-valeurs__liste li:nth-child(1) { --capsule-retard: 0s; }
.capsule-valeurs__liste li:nth-child(2) { --capsule-retard: 0.72s; }
.capsule-valeurs__liste li:nth-child(3) { --capsule-retard: 0.72s; }
.capsule-valeurs__liste li:nth-child(4) { --capsule-retard: 0.54s; }
.capsule-valeurs__liste li:nth-child(5) { --capsule-retard: 0.72s; }
.capsule-valeurs__liste li:nth-child(6) { --capsule-retard: 0.90s; }

/* Sans JavaScript, la classe capsule-js n'est jamais posee et tout reste
   visible : l'animation est un bonus, jamais une condition d'affichage. */
.capsule-js .capsule-valeurs .capsule-valeurs__liste li {
	opacity: 0;
}

.capsule-js .capsule-valeurs.est-visible .capsule-valeurs__liste li {
	animation: capsule-pose 1.1s cubic-bezier(0.22, 0.72, 0.28, 1) var(--capsule-retard, 0s) both;
}

/* La photo en arche se leve quand la section entre dans l'ecran. */
@keyframes capsule-leve {
	from { opacity: 0; transform: translateY(30px) scale(0.965); }
	to   { opacity: 1; transform: none; }
}

.capsule-js .capsule-presentation .capsule-arche--atelier {
	opacity: 0;
}

.capsule-js .capsule-presentation.est-visible .capsule-arche--atelier {
	animation: capsule-leve 1.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

/* --- Mobile --- */

@media (max-width: 900px) {

	.capsule-presentation__haut > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: clamp(28px, 6vw, 44px);
	}

	.capsule-presentation .capsule-arche--atelier {
		max-width: 320px;
	}

	.capsule-presentation__texte {
		max-width: none;
	}
}

/* --- Accessibilite --- */

@media (prefers-reduced-motion: reduce) {

	.capsule-js .capsule-valeurs .capsule-valeurs__liste li,
	.capsule-js .capsule-presentation .capsule-arche--atelier {
		opacity: 1;
		animation: none;
	}
}

/* ==========================================================================
   Devenir Capseur
   La seule zone de couleur pleine de la page. Une arche doree se trace au
   defilement et accueille l'invitation : rejoindre, c'est passer la porte.
   Troisieme famille de mise en page de l'accueil, apres le bandeau (texte a
   gauche) et la presentation (photo a gauche) : ici tout tient dans l'arche,
   parce que le message est lui-meme la composition.
   ========================================================================== */

.entry-content .capsule-capseur.alignfull,
.capsule-capseur.alignfull {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

.capsule-capseur {
	position: relative;
	padding-top: clamp(76px, 10vw, 132px);
	padding-bottom: clamp(76px, 10vw, 132px);
}

/* Le fond vit dans un pseudo-element pour pouvoir s'ouvrir depuis le centre.
   Sans JavaScript il reste a scaleX(1), donc la couleur est toujours la. */
.capsule-capseur::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--capsule-terracotta);
}

.capsule-capseur > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

/* --- L'arche, en trait dore --- */

/* Strictement decorative. Sur ce fond terracotta l'or ne donne que 2,33:1,
   il ne peut donc pas porter de texte ici : tout le texte reste blanc pur. */

.capsule-capseur__arche {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.capsule-capseur__arche svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.capsule-capseur__arche path {
	fill: none;
	stroke: var(--capsule-or);
	stroke-width: 1.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* La capsule du sommet, meme signature que le filet des titres. Elle bouche
   la jonction des deux moitiees de l'arche : c'est elle qui scelle. */
.capsule-capseur__arche::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 18px;
	height: 11px;
	background-color: var(--capsule-or);
	border-radius: 999px 999px 1px 1px;
	transform: translate(-50%, -58%);
}

/* --- Le contenu, pose a l'interieur de l'arche --- */

.capsule-capseur__contenu {
	position: relative;
	padding: clamp(60px, 8vw, 100px) clamp(24px, 4vw, 54px) clamp(44px, 5vw, 66px);
	text-align: center;
}

.capsule-capseur .capsule-capseur__titre {
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	color: var(--capsule-blanc);
}

.capsule-capseur .capsule-capseur__chapeau {
	margin: clamp(18px, 2.4vw, 26px) auto 0;
	max-width: 34ch;
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(1.08rem, 1.6vw, 1.26rem);
	line-height: 1.5;
	color: var(--capsule-blanc);
}

/* Blanc pur, jamais d'opacite : elle ferait tomber le contraste sous 4,5:1.
   La hierarchie passe par la taille et la graisse, pas par la transparence. */
.capsule-capseur__contenu p {
	color: var(--capsule-blanc);
}

.capsule-capseur .capsule-capseur__corps {
	margin: clamp(16px, 2vw, 22px) auto 0;
	max-width: 52ch;
	font-size: 1rem;
	line-height: 1.7;
}

.capsule-capseur .capsule-capseur__actions {
	margin-top: clamp(30px, 4vw, 44px);
	justify-content: center;
}

.capsule-capseur .capsule-capseur__actions .wp-block-button__link {
	padding: 15px 34px;
	border-radius: 999px;
	background-color: var(--capsule-blanc);
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	color: var(--capsule-terracotta);
	box-shadow: none;
	transition: background-color var(--capsule-transition),
	            transform 0.18s ease-out;
}

.capsule-capseur .capsule-capseur__actions .wp-block-button__link:hover,
.capsule-capseur .capsule-capseur__actions .wp-block-button__link:focus-visible {
	background-color: var(--capsule-creme);
	color: var(--capsule-terracotta-f);
}

.capsule-capseur .capsule-capseur__actions .wp-block-button__link:active {
	transform: translateY(1px);
}

/* --- Animation : l'arche se trace, puis le contenu se pose --- */

/* Le path porte pathLength="1", donc un seul jeu de valeurs suffit quelle que
   soit la taille reelle du trace. */

@keyframes capsule-rideau {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Nom distinct de capsule-trace, deja pris par le filet dore du bandeau.
   Deux sequences homonymes et la derniere declaree gagne partout, ce qui
   aurait silencieusement prive le filet de son animation. */
@keyframes capsule-trace-arche {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

@keyframes capsule-parait {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@keyframes capsule-sceau-sommet {
	from { opacity: 0; transform: translate(-50%, -58%) scale(0.2); }
	to   { opacity: 1; transform: translate(-50%, -58%) scale(1); }
}

/* Sans JavaScript la classe capsule-js n'existe pas : rien n'est masque et la
   section reste entierement lisible. L'animation n'est jamais une condition
   d'affichage. */

.capsule-js .capsule-capseur::before {
	transform: scaleX(0);
}

.capsule-js .capsule-capseur__arche path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.capsule-js .capsule-capseur__arche::after,
.capsule-js .capsule-capseur__contenu > .wp-block-group__inner-container > * {
	opacity: 0;
}

/* Le rideau part en premier : c'est lui qui donne le choc d'arrivee, la page
   change de couleur sous les yeux du visiteur. */
.capsule-js .capsule-capseur.est-visible::before {
	animation: capsule-rideau 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

/* Les deux traits montent ensemble et se rejoignent au sommet : deux capsules
   qui n'en forment qu'une, le concept de la marque joue litteralement. Ils
   demarrent avant la fin du rideau pour que la sequence reste tendue. */
.capsule-js .capsule-capseur.est-visible .capsule-capseur__arche path {
	animation: capsule-trace-arche 0.8s cubic-bezier(0.32, 0.05, 0.2, 1) 0.35s both;
}

/* La capsule marque la jonction, avec un leger depassement. */
.capsule-js .capsule-capseur.est-visible .capsule-capseur__arche::after {
	animation: capsule-sceau-sommet 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) 1.06s both;
}

/* Le contenu entre pendant que le trait acheve sa course, pas apres : sinon
   l'attente devient perceptible. Le retard passe par une variable, comme pour
   les valeurs, sinon la regle d'animation plus specifique ecraserait les
   retards poses ici. */
.capsule-capseur__titre   { --capsule-retard: 1.02s; }
.capsule-capseur__chapeau { --capsule-retard: 1.14s; }
.capsule-capseur__corps   { --capsule-retard: 1.26s; }
.capsule-capseur__actions { --capsule-retard: 1.40s; }

.capsule-js .capsule-capseur.est-visible .capsule-capseur__contenu > .wp-block-group__inner-container > * {
	animation: capsule-parait 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--capsule-retard, 0s) both;
}

/* --- Mobile --- */

@media (max-width: 900px) {

	.capsule-capseur > .wp-block-group__inner-container {
		max-width: 460px;
	}

	.capsule-capseur__contenu {
		padding-top: clamp(52px, 13vw, 76px);
	}

	.capsule-capseur .capsule-capseur__chapeau {
		max-width: none;
	}
}

/* --- Accessibilite --- */

@media (prefers-reduced-motion: reduce) {

	.capsule-js .capsule-capseur::before {
		transform: none;
		animation: none;
	}

	.capsule-js .capsule-capseur__arche path {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}

	.capsule-js .capsule-capseur__arche::after,
	.capsule-js .capsule-capseur__contenu > .wp-block-group__inner-container > * {
		opacity: 1;
		animation: none;
	}

	.capsule-capseur .capsule-capseur__actions .wp-block-button__link {
		transition: none;
	}
}


/* ==========================================================================
   Pied de page
   Il referme la page sur une bande creme, juste apres l'aplat terracotta de
   Devenir Capseur : deux couleurs pleines de suite se seraient confondues.
   Quatre colonnes, la premiere plus large parce qu'elle porte l'identite.
   Mesure du 18 aout : sur ce creme le terracotta #C15634 ne donne que 4,13:1,
   sous le seuil de 4,5. Les liens prennent donc #A9482B (5,26:1), qui est
   deja dans la palette. Aucun accent nouveau n'est introduit.
   ========================================================================== */

.site-footer {
	background-color: var(--capsule-creme);
	border-top: 1px solid var(--capsule-filet);
}

.site-footer .site-top-footer-wrap {
	padding-block: 72px 56px;
}

.site-footer .footer-widget-area-inner {
	color: var(--capsule-encre);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

.site-footer .footer-widget-area-inner p {
	margin: 0 0 16px;
}

.site-footer .footer-widget-area-inner p:last-child {
	margin-bottom: 0;
}

/* Le bloc raccourci de Brevo passe par wpautop, qui enveloppe le formulaire
   d'un paragraphe. Le navigateur ferme ce paragraphe avant le <form> et laisse
   deux paragraphes vides : ils sont retires ici plutot que dans le balisage,
   qui appartient au greffon. */
.site-footer .footer-widget-area-inner p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Titres de colonne
   Petites capitales espacees, la convention d'un pied de page et non un titre
   de section. En encre douce, mesuree a 8,37:1 sur le creme.
   -------------------------------------------------------------------------- */

.site-footer .footer-widget-area-inner h3 {
	margin: 0 0 20px;
	color: var(--capsule-encre-douce);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Colonne d'identite
   Le logo, pose a 180px de large, ou le mot fait environ 22px : plus lisible
   que dans l'en-tete, qui est contraint par la hauteur de la barre. Le fichier
   servi est une declinaison a 400px et non le master de 1907px, sans quoi le
   navigateur telechargerait 357 Ko pour en afficher 180.
   -------------------------------------------------------------------------- */

.site-footer .footer-widget1 .footer-widget-area-inner {
	padding-right: 32px;
}

.site-footer .capsule-footer-logo {
	margin: 0 0 14px;
}

.site-footer .capsule-footer-logo img {
	display: block;
	width: 130px;
	height: auto;
}

/* Le logo est deja un lien : il ne prend pas le filet de survol des liens de
   texte, qui se dessinerait sous l'image. */
.site-footer .capsule-footer-logo a::after {
	display: none;
}

.site-footer .capsule-footer-logo a {
	display: inline-block;
	transition: opacity var(--capsule-transition);
}

.site-footer .capsule-footer-logo a:hover,
.site-footer .capsule-footer-logo a:focus-visible {
	opacity: 0.75;
}

.site-footer .capsule-footer-signature {
	margin-bottom: 20px;
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   Liens
   Meme grammaire que la navigation de l'en-tete : un filet qui se deploie
   depuis la gauche au survol, plutot qu'un soulignement permanent.
   -------------------------------------------------------------------------- */

.site-footer .capsule-footer-liens {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .capsule-footer-liens li {
	margin: 0 0 10px;
}

.site-footer .capsule-footer-liens li:last-child {
	margin-bottom: 0;
}

.site-footer .footer-widget-area-inner a {
	position: relative;
	color: var(--capsule-encre);
	text-decoration: none;
	transition: color var(--capsule-transition);
}

.site-footer .footer-widget-area-inner a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background-color: var(--capsule-terracotta-f);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--capsule-transition);
}

.site-footer .footer-widget-area-inner a:hover,
.site-footer .footer-widget-area-inner a:focus-visible {
	color: var(--capsule-terracotta-f);
}

.site-footer .footer-widget-area-inner a:hover::after,
.site-footer .footer-widget-area-inner a:focus-visible::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Colonne d'adresse
   Le nom, l'adresse et le telephone au meme endroit : c'est ce couple que les
   moteurs lisent pour rattacher le lieu a Castelnau-le-Lez.
   -------------------------------------------------------------------------- */

.site-footer .capsule-footer-adresse,
.site-footer .capsule-footer-contact {
	font-style: normal;
}

.site-footer .capsule-footer-acces {
	color: var(--capsule-encre-douce);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Lettre d'information
   Le champ et le bouton reprennent la pilule des boutons du site. Le bouton
   est un aplat terracotta a texte blanc, mesure a 4,52:1.
   -------------------------------------------------------------------------- */

.site-footer .sib_signup_form {
	margin-top: 4px;
}

.site-footer .sib_signup_form p {
	margin: 0 0 12px;
}

.site-footer .sib_signup_form p:last-child {
	margin-bottom: 0;
}

.site-footer .sib_signup_form label {
	display: block;
	margin-bottom: 6px;
	color: var(--capsule-encre-douce);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.site-footer .sib_signup_form input[type="email"] {
	width: 100%;
	padding: 11px 18px;
	border: 1px solid var(--capsule-filet);
	border-radius: 999px;
	background-color: var(--capsule-blanc);
	color: var(--capsule-encre);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color var(--capsule-transition);
}

.site-footer .sib_signup_form input[type="email"]::placeholder {
	color: var(--capsule-attenue);
}

.site-footer .sib_signup_form input[type="email"]:focus {
	border-color: var(--capsule-terracotta);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.site-footer .sib_signup_form input[type="email"]:focus-visible {
	outline-color: var(--capsule-terracotta-f);
}

.site-footer .sib_signup_form .sib-default-btn {
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	background-color: var(--capsule-terracotta);
	color: var(--capsule-blanc);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color var(--capsule-transition);
}

.site-footer .sib_signup_form .sib-default-btn:hover,
.site-footer .sib_signup_form .sib-default-btn:focus-visible {
	background-color: var(--capsule-terracotta-f);
}

/* Le greffon affiche ses messages dans un cadre par defaut. On les ramene a la
   sobriete du reste sans toucher a ses classes d'etat. */
.site-footer .sib_signup_form .sib-alert-message {
	border-radius: 12px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Barre du bas
   Mention legale a gauche, liens obligatoires a droite, separes du reste par
   un filet neutre.
   -------------------------------------------------------------------------- */

.site-footer .site-bottom-footer-wrap {
	border-top: 1px solid var(--capsule-filet);
	padding-block: 22px;
}

.site-footer .site-bottom-footer-wrap .footer-widget-area-inner,
.site-footer .site-bottom-footer-wrap .footer-navigation {
	color: var(--capsule-encre-douce);
	font-size: 14px;
}

.site-footer .site-bottom-footer-wrap .footer-html-inner p {
	margin: 0;
}

/* Le credit passe apres la mention legale sans lui disputer la ligne. Il reste
   en encre douce et non en attenue : sur ce creme l'attenu tombe a 3,79:1. */
.site-footer .capsule-footer-credit {
	margin-top: 2px;
	font-size: 13px;
}

.site-footer .site-bottom-footer-wrap .footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .site-bottom-footer-wrap .footer-navigation a {
	color: var(--capsule-encre-douce);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Tablette et mobile
   Kadence passe en deux colonnes puis en une seule. L'arche et les marges
   suivent, et la barre du bas se recentre une fois empilee.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.site-footer .footer-widget1 .footer-widget-area-inner {
		padding-right: 0;
	}

	.site-footer .site-top-footer-wrap {
		padding-block: 56px 44px;
	}
}

@media (max-width: 719px) {
	.site-footer .site-top-footer-wrap {
		padding-block: 48px 36px;
	}

	.site-footer .capsule-footer-logo img {
		width: 120px;
	}

	/* Zone tactile : sur mobile un lien de 25px de haut se rate. Le remplissage
	   porte chaque entree a 44px sans ecarter visuellement la liste, parce que
	   la marge d'origine est reprise dans le remplissage. */
	.site-footer .capsule-footer-liens li {
		margin: 0;
	}

	.site-footer .capsule-footer-liens a {
		display: block;
		padding: 9px 0;
	}

	.site-footer .capsule-footer-liens a::after {
		bottom: 6px;
		width: auto;
		right: 0;
	}

	/* Les colonnes empilees ont besoin d'air entre elles, sinon la liste de
	   liens et l'adresse se lisent comme un seul bloc. */
	.site-footer .site-footer-top-section-1,
	.site-footer .site-footer-top-section-2,
	.site-footer .site-footer-top-section-3 {
		margin-bottom: 36px;
	}

	/* Le bouton d'inscription prend toute la largeur : a cette taille, un bouton
	   court laisse un vide a sa droite et se vise moins bien. */
	.site-footer .sib_signup_form .sib-default-btn {
		width: 100%;
	}

	.site-footer .site-bottom-footer-wrap .footer-navigation ul {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Accessibilite
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.site-footer .footer-widget-area-inner a,
	.site-footer .footer-widget-area-inner a::after,
	.site-footer .sib_signup_form input[type="email"],
	.site-footer .sib_signup_form .sib-default-btn {
		transition: none;
	}
}


/* ==========================================================================
   Pages interieures : en-tete de page
   Composant partage par toutes les pages. Depuis le 22 aout c'est une banniere
   creme sur toute la largeur, titre centre : le meme principe que le bandeau
   d'accueil, et que la banniere coloree des pages interieures de Connaissance
   et Partage. La couleur annonce la page, le blanc de la barre du menu s'en
   detache, et le titre n'a plus besoin de porter seul l'entree dans la page.
   ========================================================================== */

.capsule-page-entete.wp-block-kadence-rowlayout {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	background-color: var(--capsule-creme);
}

.capsule-page-entete.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-page-entete.wp-block-kadence-rowlayout  .innerblocks-wrap {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding: clamp(52px, 5.5vw, 78px) clamp(20px, 5vw, 72px) clamp(46px, 5vw, 70px);
	text-align: center;
}

/* Sur le creme, le terracotta donne 4,13:1 : sous le seuil du texte courant,
   au-dessus de celui du grand texte, qui est 3:1. Ce titre ne descend jamais
   sous 33 px, il reste donc conforme. */
.capsule-page-entete h1 {
	margin: 0;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(2.1rem, 4vw, 3rem);
	line-height: 1.12;
}

.capsule-page-entete .capsule-page-intro {
	max-width: 58ch;
	margin: 20px auto 0;
	color: var(--capsule-encre-douce);
	font-size: 18px;
	line-height: 1.7;
}

/* Meme entree que le bandeau d'accueil : le titre monte, le filet s'ouvre du
   centre, la capsule vient se sceller dessus. */
.capsule-page-entete .capsule-filet-or        { animation: capsule-trace-centre 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards; }
.capsule-page-entete .capsule-filet-or::after { animation: capsule-sceau-pose 0.62s cubic-bezier(0.2, 1.2, 0.4, 1) 0.84s backwards; }
.capsule-page-entete .capsule-page-intro      { animation: capsule-monte 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards; }

@media (prefers-reduced-motion: reduce) {

	.capsule-page-entete h1,
	.capsule-page-entete .capsule-filet-or,
	.capsule-page-entete .capsule-filet-or::after,
	.capsule-page-entete .capsule-page-intro {
		animation: none;
	}
}

/* ==========================================================================
   L'equipe
   Quatre membres du bureau, portrait en arche a gauche, presentation a droite.
   Rangees Kadence natives : Laura peut en dupliquer une pour ajouter quelqu'un.
   ========================================================================== */

.capsule-bureau__membre.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-bureau__membre.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: clamp(46px, 5vw, 74px);
	padding-bottom: clamp(46px, 5vw, 74px);
	align-items: start;
}

/* Un filet neutre entre deux membres plutot qu'une alternance de fonds : la
   page reste calme, et rien ne se decale si Laura en ajoute un cinquieme. */
.capsule-bureau__membre + .capsule-bureau__membre.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-bureau__membre + .capsule-bureau__membre.wp-block-kadence-rowlayout  .innerblocks-wrap {
	border-top: 1px solid var(--capsule-filet);
}

.capsule-bureau__nom {
	margin: 0;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.capsule-bureau__role {
	margin: 8px 0 24px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--capsule-terracotta-f);
}

.capsule-bureau__membre p:not(.capsule-bureau__role):not(.capsule-bureau__attente) {
	margin: 0 0 16px;
	color: var(--capsule-encre-douce);
	font-size: 17px;
	line-height: 1.75;
}

/* Ce qui manque se voit, plutot que d'etre comble au juge. Meme convention que
   les mentions legales du 18 aout et que les logos \u00ab a venir \u00bb. */
.capsule-bureau__attente {
	margin: 0;
	padding: 18px 22px;
	border: 1px dashed var(--capsule-filet);
	border-radius: 14px;
	color: var(--capsule-attenue);
	font-style: italic;
}

/* --- Le portrait, masque en arche --- */

.capsule-portrait {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 360px;
	margin-inline: auto;
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px 14px 14px;
	overflow: hidden;
	object-fit: cover;
}

.capsule-portrait--attente {
	border: 1.5px dashed rgba(58, 42, 20, 0.18);
	background-color: var(--capsule-creme);
	font-family: 'Quicksand', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(58, 42, 20, 0.36);
}

/* --- La photo d'equipe --- */

.capsule-bureau__collectif.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-bureau__collectif.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: clamp(54px, 6vw, 84px);
	padding-bottom: clamp(60px, 7vw, 96px);
	text-align: center;
	border-top: 1px solid var(--capsule-filet);
}

.capsule-bureau__collectif h2 {
	margin: 0 0 28px;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.capsule-bureau__collectif p {
	max-width: 58ch;
	margin: 28px auto 0;
	color: var(--capsule-encre-douce);
	font-size: 17px;
	line-height: 1.75;
}

/* Couchee, la capsule devient une pilule : une arche a cette largeur ne se
   lirait plus comme une arche. */
.capsule-equipe-photo {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 7;
	border-radius: 999px;
	overflow: hidden;
}

/* L'habillage d'attente est separe du gabarit depuis le 23 aout : les photos
   sont arrivees, mais la meme pilule doit pouvoir redevenir un emplacement
   vide si l'equipe change de cliche. */
.capsule-equipe-photo--attente {
	border: 1.5px dashed rgba(58, 42, 20, 0.18);
	background-color: var(--capsule-creme);
	font-family: 'Quicksand', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(58, 42, 20, 0.36);
}

/* Les deux cliches ont le meme cadrage : empiles dans la meme case de grille,
   ils se remplacent sans que rien ne bouge. C'est ce qui rend la bascule
   lisible comme une grimace et non comme un changement de photo. */
.capsule-equipe-photo__vue {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ⚠️ Bascule instantanee depuis le 24 aout, et c'est deliberé. Le fondu
   enchaine montrait un DEDOUBLEMENT : les quatre personnes ont bouge entre les
   deux prises, et la superposition a mi-course faisait apparaitre des contours
   fantomes et un voile chaud sur les carnations, que Joel a lu comme une
   teinte doree. Un fondu ne marche qu'entre deux images ou rien ne bouge.
   Ici le geste est une grimace : elle doit claquer, pas se dissoudre.
   ⚠️ Au passage, l'ancienne declaration portait une faute : `0.45s
   var(--capsule-transition)` se lisait duree 0,45 s PUIS delai 0,4 s, la
   variable contenant deja sa propre duree. La bascule partait donc avec quatre
   dixiemes de retard. Seule occurrence dans la feuille, verifiee. */
.capsule-equipe-photo__vue--b {
	opacity: 0;
}

.capsule-equipe-photo.est-basculee .capsule-equipe-photo__vue--b {
	opacity: 1;
}

/* Sur un appareil a pointeur, survoler montre toujours l'AUTRE version que
   celle affichee. Le geste reste le meme que la bascule soit verrouillee ou
   non, et le clic ne se bat jamais avec le survol : sans cette inversion, une
   photo verrouillee restait bloquee tant que le pointeur etait dessus. */
@media (hover: hover) {

	.capsule-equipe-photo:hover .capsule-equipe-photo__vue--b,
	.capsule-equipe-photo:focus-within .capsule-equipe-photo__vue--b {
		opacity: 1;
	}

	.capsule-equipe-photo.est-basculee:hover .capsule-equipe-photo__vue--b,
	.capsule-equipe-photo.est-basculee:focus-within .capsule-equipe-photo__vue--b {
		opacity: 0;
	}
}

/* ⚠️ Ajoute le 31 aout. Le tactile n'a pas de survol : le geste equivalent est
   l'appui maintenu, pose par le script sous la classe `est-pressee`. La
   grimace parait sous le doigt et se retire au relachement, exactement comme
   au survol sur un ordinateur. La regle `:active` double le script au cas ou
   un evenement de pointeur manquerait, elle ne coute rien. */
@media (hover: none) {

	.capsule-equipe-photo.est-pressee .capsule-equipe-photo__vue--b,
	.capsule-equipe-photo:has(.capsule-equipe-photo__bascule:active) .capsule-equipe-photo__vue--b {
		opacity: 1;
	}

	/* Un appui long sur une image ouvre le menu « Enregistrer l'image » d'iOS
	   et vole le geste. Les vues ne captent plus le pointeur, le bouton pose
	   par-dessus s'en charge. */
	.capsule-equipe-photo {
		-webkit-touch-callout: none;
	}

	.capsule-equipe-photo__vue {
		pointer-events: none;
		-webkit-user-select: none;
		user-select: none;
	}
}

/* Toute la pilule est cliquable, pas seulement la pastille.
   Masquee tant que le script n'a pas tourne, meme principe que le bouton de la
   carte d'acces : une invite qui ne fait rien est pire que pas d'invite. */
.capsule-equipe-photo__bascule {
	grid-area: 1 / 1;
	display: none;
	align-items: end;
	justify-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 clamp(12px, 2.2vw, 26px);
	border: 0;
	background: none;
	cursor: pointer;
}

.capsule-equipe-photo.est-interactive .capsule-equipe-photo__bascule {
	display: grid;
}

/* Kadence habille tous les <button> du site, y compris leurs etats. Sa regle
   de survol `button:hover, button:focus, button:active` compte une classe et
   un element, soit une specificite superieure au simple `.capsule-equipe-
   photo__bascule` ci-dessus : des que le pointeur entrait dans la pilule, le
   fond de survol des boutons (palette2, l'or #E6B422) se peignait par-dessus
   les deux photos et recouvrait toute la pilule. La grimace jouait bien en
   dessous, elle etait simplement masquee.
   C'est le meme piege que le carre jaune du 18 aout sur .cm-declic, neutralise
   la-bas et pas ici. Meme remede : declarer sur tous les etats, avec assez de
   classes pour passer devant. */
.capsule-equipe-photo .capsule-equipe-photo__bascule,
.capsule-equipe-photo .capsule-equipe-photo__bascule:hover,
.capsule-equipe-photo .capsule-equipe-photo__bascule:focus,
.capsule-equipe-photo .capsule-equipe-photo__bascule:active {
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	color: inherit;
}

.capsule-equipe-photo__mention {
	padding: 8px 18px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color var(--capsule-transition),
	            transform 0.18s ease-out;
}

.capsule-equipe-photo__bascule:hover .capsule-equipe-photo__mention,
.capsule-equipe-photo__bascule:focus-visible .capsule-equipe-photo__mention {
	background-color: var(--capsule-blanc);
	transform: translateY(-2px);
}

.capsule-equipe-photo__bascule:focus-visible {
	outline: 2px solid var(--capsule-terracotta);
	outline-offset: -4px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {

	.capsule-equipe-photo__mention {
		transition: none;
	}
}

/* Une photo de quatre personnes cote a cote est large par nature : sur un
   telephone la pilule se reduit a un bandeau ou plus personne n'est
   reconnaissable. Mesure faite le 23 aout sur un ecran de 390 px : 294 px de
   large, 129 px de haut. On lui rend un tiers de hauteur en debordant le
   remplissage de la rangee et en resserrant le cadrage a 2/1. Le rognage
   lateral vaut 6 % par bord, la ou les calottes de la pilule effacent deja
   les contours : personne n'est perdu au passage. */
@media (max-width: 719px) {

	.capsule-bureau__collectif .capsule-equipe-photo {
		margin-inline: -24px;
		width: calc(100% + 48px);
		aspect-ratio: 2 / 1;
	}

	.capsule-equipe-photo__mention {
		padding: 6px 14px;
		font-size: 10px;
	}
}

@media (max-width: 900px) {

	.capsule-portrait {
		max-width: 240px;
		margin-inline: auto;
	}

	.capsule-bureau__membre .kt-inside-inner-col,
	.capsule-bureau__membre .kadence-inner-column-inner {
		text-align: center;
	}

	.capsule-bureau__membre p:not(.capsule-bureau__role):not(.capsule-bureau__attente) {
		text-align: left;
	}
}
/* ==========================================================================
   Contact
   ========================================================================== */

.capsule-contact-acces.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-contact-acces.wp-block-kadence-rowlayout  .innerblocks-wrap ,
.capsule-contact-mailto.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-contact-mailto.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: 56px;
	padding-bottom: 56px;
}

.capsule-contact-acces h2,
.capsule-contact-formulaire h2,
.capsule-contact-mailto h2 {
	margin: 0 0 20px;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
}

.capsule-contact-acces h3 {
	margin: 28px 0 4px;
	color: var(--capsule-encre);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 17px;
}

/* L'adresse porte le nom, la rue et la ville : c'est ce trio que les moteurs
   rattachent au lieu. Le code postal reste sur sa ligne, demande de Laura. */
.capsule-contact-adresse {
	margin-bottom: 14px;
	font-size: 17px;
	line-height: 1.6;
}

.capsule-contact-coordonnees {
	font-size: 17px;
	line-height: 1.6;
}

.capsule-contact-coordonnees a {
	color: var(--capsule-terracotta-f);
	text-decoration: none;
	border-bottom: 1px solid var(--capsule-filet);
	transition: border-color var(--capsule-transition);
}

.capsule-contact-coordonnees a:hover,
.capsule-contact-coordonnees a:focus-visible {
	border-bottom-color: var(--capsule-terracotta-f);
}

/* --------------------------------------------------------------------------
   La carte, chargee au clic
   Tant que personne ne clique, rien ne part chez Google. La facade n'est donc
   pas une image de carte, qui serait un mensonge : c'est une invitation, dans
   la matiere du site.
   -------------------------------------------------------------------------- */

.capsule-carte {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid var(--capsule-filet);
	background-color: var(--capsule-creme);
	min-height: 420px;
	display: flex;
}

.capsule-carte.est-chargee {
	display: block;
	background-color: var(--capsule-blanc);
}

.capsule-carte iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* --------------------------------------------------------------------------
   Le formulaire
   Bande creme : c'est la respiration qui separe l'acces du message, et elle
   evite que la page se lise comme une seule colonne de texte.
   Regle de rayon tenue : pilule pour les controles d'une ligne, rayon de carte
   pour les blocs. Le bouton reste la pilule terracotta du site.
   -------------------------------------------------------------------------- */

.capsule-contact-formulaire {
	background-color: var(--capsule-creme);
}

.capsule-contact-formulaire.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-contact-formulaire.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: 64px;
	padding-bottom: 64px;
}

.capsule-contact-formulaire .wpforms-container {
	max-width: 680px;
	margin: 28px 0 0;
}

.capsule-contact-formulaire .wpforms-field {
	padding: 0 0 20px;
}

.capsule-contact-formulaire .wpforms-field-label {
	display: block;
	margin-bottom: 7px;
	color: var(--capsule-encre-douce);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.capsule-contact-formulaire .wpforms-field-sublabel {
	color: var(--capsule-attenue);
	font-size: 13px;
}

.capsule-contact-formulaire input[type="text"],
.capsule-contact-formulaire input[type="email"],
.capsule-contact-formulaire input[type="tel"],
.capsule-contact-formulaire select {
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--capsule-filet);
	border-radius: 999px;
	background-color: var(--capsule-blanc);
	color: var(--capsule-encre);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--capsule-transition);
}

.capsule-contact-formulaire textarea {
	width: 100%;
	min-height: 160px;
	padding: 16px 20px;
	border: 1px solid var(--capsule-filet);
	border-radius: 20px;
	background-color: var(--capsule-blanc);
	color: var(--capsule-encre);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color var(--capsule-transition);
}

.capsule-contact-formulaire input:focus,
.capsule-contact-formulaire select:focus,
.capsule-contact-formulaire textarea:focus {
	border-color: var(--capsule-terracotta);
	outline: 2px solid transparent;
}

.capsule-contact-formulaire input:focus-visible,
.capsule-contact-formulaire select:focus-visible,
.capsule-contact-formulaire textarea:focus-visible {
	outline: 2px solid var(--capsule-terracotta-f);
	outline-offset: 2px;
}

.capsule-contact-formulaire .wpforms-submit {
	padding: 13px 34px;
	border: 0;
	border-radius: 999px;
	background-color: var(--capsule-terracotta);
	color: var(--capsule-blanc);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--capsule-transition);
}

.capsule-contact-formulaire .wpforms-submit:hover,
.capsule-contact-formulaire .wpforms-submit:focus-visible {
	background-color: var(--capsule-terracotta-f);
}

/* Les messages d'erreur du greffon : lisibles, sans cadre rouge criard. */
.capsule-contact-formulaire .wpforms-error {
	margin-top: 6px;
	color: var(--capsule-terracotta-f);
	font-size: 14px;
	font-weight: 600;
}

.capsule-contact-formulaire .wpforms-required-label {
	color: var(--capsule-terracotta-f);
}

/* --------------------------------------------------------------------------
   Les liens de messagerie
   Secours pour qui prefere ecrire depuis sa propre boite. Presentes en pilules
   a contour, la declinaison secondaire du bouton du site.
   -------------------------------------------------------------------------- */

.capsule-contact-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.capsule-contact-liens li {
	margin: 0;
}

.capsule-contact-liens a {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid var(--capsule-terracotta);
	border-radius: 999px;
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--capsule-transition), color var(--capsule-transition);
}

.capsule-contact-liens a:hover,
.capsule-contact-liens a:focus-visible {
	background-color: var(--capsule-terracotta);
	color: var(--capsule-blanc);
}

/* --------------------------------------------------------------------------
   Tablette et mobile
   Kadence Blocks bascule a 767px, contrairement au pied de page du theme qui
   bascule a 719px : chaque partie suit le point de rupture de son systeme.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.capsule-page-entete.wp-block-kadence-rowlayout  .kt-row-column-wrap,
	.capsule-page-entete.wp-block-kadence-rowlayout  .innerblocks-wrap {
		padding-top: 64px;
	}

	.capsule-page-entete h1 {
		font-size: 38px;
	}
}

@media (max-width: 767px) {
	.capsule-page-entete.wp-block-kadence-rowlayout  .kt-row-column-wrap,
	.capsule-page-entete.wp-block-kadence-rowlayout  .innerblocks-wrap {
		padding-top: 48px;
	}

	.capsule-page-entete h1 {
		font-size: 32px;
	}

	.capsule-page-entete .capsule-page-intro {
		font-size: 17px;
	}

	.capsule-contact-acces h2,
	.capsule-contact-formulaire h2,
	.capsule-contact-mailto h2 {
		font-size: 25px;
	}

	/* ⚠️ Corrige le 31 aout. La hauteur fixe ne doit porter que sur la carte
	   Google, jamais sur le conteneur au repos : celui-ci porte aussi la facade
	   (logo, bouton, mention de consentement), qui mesure environ 480 px sur un
	   telephone. Avec `height: 320px` et `overflow: hidden` sur .capsule-carte,
	   la facade etait coupee AUX DEUX BOUTS : le dome du logo en haut, et la
	   phrase de consentement Google tranchee en plein milieu en bas. C'est cette
	   phrase qui informe le visiteur avant qu'il accepte le traceur.
	   Le conteneur reprend donc une hauteur libre, seul l'iframe reste borne. */
	.capsule-carte {
		min-height: 320px;
		height: auto;
	}

	.capsule-carte iframe {
		min-height: 320px;
		height: 320px;
	}

	/* Zone tactile : chaque lien de messagerie occupe toute la largeur, plus
	   sur a viser qu'une pilule etroite au milieu d'une ligne. */
	.capsule-contact-liens a {
		display: block;
		text-align: center;
	}

	.capsule-contact-liens li {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Accessibilite
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.capsule-carte-bouton,
	.capsule-contact-liens a,
	.capsule-contact-coordonnees a,
	.capsule-contact-formulaire input,
	.capsule-contact-formulaire select,
	.capsule-contact-formulaire textarea,
	.capsule-contact-formulaire .wpforms-submit {
		transition: none;
	}
}


/* --- La facade et son repli --- */

.capsule-carte-facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	padding: 36px 28px;
	text-align: center;
}

/* Le bouton n'apparait que si le script tourne : un bouton qui ne fait rien
   est pire que pas de bouton. Le lien en dessous, lui, marche toujours. */
.capsule-carte-bouton {
	display: none;
}

.capsule-carte.est-interactive .capsule-carte-bouton {
	display: inline-block;
	padding: 11px 26px;
	border: 1px solid var(--capsule-terracotta);
	border-radius: 999px;
	background: transparent;
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--capsule-transition), color var(--capsule-transition);
}

.capsule-carte.est-interactive .capsule-carte-bouton:hover,
.capsule-carte.est-interactive .capsule-carte-bouton:focus-visible {
	background-color: var(--capsule-terracotta);
	color: var(--capsule-blanc);
}

/* La mention de Google : elle doit se lire avant le clic, pas apres. Elle est
   donc posee sous le bouton et non releguee en pied de page. */
.capsule-carte-note {
	max-width: 42ch;
	margin: 0;
	color: var(--capsule-encre-douce);
	font-size: 13px;
	line-height: 1.6;
}

.capsule-carte-lien {
	color: var(--capsule-encre-douce);
	font-size: 14px;
}

@media (max-width: 767px) {
	.capsule-carte-facade {
		padding: 28px 20px;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.capsule-carte.est-interactive .capsule-carte-bouton {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   La capsule du logo, dessinee puis remplie
   La facade ne montre ni croquis d'itineraire ni portique : elle montre la
   capsule de la marque, dome plein a base plate, plus large que haute, telle
   qu'elle est dans le logo. Un portique en trait fin, plus haut que large et
   ouvert en bas, se lisait comme une stele : c'est le meme piege que l'arche
   a deux battants ecartee le 15 aout.
   Le geste construit le symbole sous les yeux : le contour se trace, l'or
   monte et le remplit, le filet souligne se pose. A la fin, c'est le logo.
   -------------------------------------------------------------------------- */

.capsule-symbole {
	width: 100%;
	max-width: 250px;
	height: auto;
}

/* ⚠️ Deplacee ici le 31 aout. Cette regle vivait plus haut, dans le bloc
   telephone de la carte d'acces. La declaration globale ci-dessus, ecrite
   APRES elle et de meme specificite (une classe), la neutralisait : le logo
   gardait ses 250 px sur telephone. Elle n'avait jamais rien fait depuis le
   27 aout. Une regle dans une media query ne gagne pas parce qu'elle est dans
   une media query, elle gagne si elle vient apres. */
@media (max-width: 767px) {

	.capsule-symbole {
		max-width: 200px;
	}
}

/* Le logo lui-meme depuis le 27 aout, a la place de la capsule redessinee.
   La version dessinee construisait le symbole trait par trait ; elle est
   conservee dans les sauvegardes du projet, fichier
   facade-carte-svg-dessine-avant-27aout2026.svg. Joel a tranche pour le vrai
   fichier : c'est le logo de la marque et non une approximation, et il porte
   le mot en plus du dome. L'animation devient donc une pose, pas un trace. */

.capsule-symbole-anime {
	opacity: 0;
}

/* La lueur suit la silhouette reelle du PNG et non un rectangle : drop-shadow
   travaille sur le canal alpha, contrairement a box-shadow. Un seul
   aller-retour, le geste doit se remarquer sans clignoter.
   `filter` coute un repaint la ou transform et opacity n'en coutent pas :
   assumable ici, un seul element de 250 px qui joue une fois. */
.capsule-symbole-anime.est-visible {
	animation: capsule-logo-pose 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}

@keyframes capsule-logo-pose {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.94);
		filter: drop-shadow(0 0 0 rgba(230, 180, 34, 0));
	}
	55% {
		opacity: 1;
		transform: none;
		filter: drop-shadow(0 0 16px rgba(230, 180, 34, 0.55));
	}
	to {
		opacity: 1;
		transform: none;
		filter: drop-shadow(0 0 0 rgba(230, 180, 34, 0));
	}
}

/* Sans script la classe capsule-symbole-anime n'est jamais posee et le logo
   s'affiche simplement. Ici on couvre le cas ou elle l'est mais ou le
   visiteur demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {

	.capsule-symbole-anime,
	.capsule-symbole-anime.est-visible {
		opacity: 1;
		animation: none;
		filter: none;
		transform: none;
	}
}


/* ==========================================================================
   Nos Capsule.s : les capsules membres
   Portage du prototype valide le 18 aout (ouverture fluide). Les classes du
   prototype etaient generiques (.capsule, .haut, .nom, .lien) : elles sont
   prefixees ici, sans quoi elles entreraient en collision avec Kadence et
   avec les blocs de WordPress. Les sequences sont prefixees pour la meme
   raison, le fichier en declare deja quinze.
   Le script ne cible que des classes, jamais des index : Laura peut donc
   ajouter une septieme capsule sans que rien ne se decale.
   ========================================================================== */

:root {
	/* ressort : leger depassement, reserve aux petits mouvements de sceau ou il
	   est joli et ne coute rien. Jamais sur une hauteur, ou son retour arriere
	   se sent comme un a-coup. */
	--capsule-ressort: cubic-bezier(.22, 1.3, .36, 1);
	/* elan : sans depassement, pour l'ouverture. */
	--capsule-elan: cubic-bezier(.16, 1, .3, 1);
}


  /* La grille des capsules. Cette regle manquait au portage : l'extraction du
     prototype commencait au commentaire ci-dessous, donc apres la declaration
     de la grille. Sans display:grid, chaque capsule prenait toute la largeur. */
  /* Largeur bornee le 23 aout a la demande de Joel : les capsules faisaient
     351 px sur un ecran de 1440, elles passent a 316. On borne la grille et
     non chaque capsule, sinon les colonnes se decalent au lieu de rester
     centrees sous la banniere de titre. */
  /* ⚠️ `margin: 0 auto` ne suffisait pas : une regle de Kadence en
     `.entry-content ul` compte une classe et un element, soit une specificite
     superieure a cette seule classe, et remettait la marge a zero. Mesure du
     24 aout : la grille etait a 140 px du bord gauche et 293 du droit. La
     regle `.entry-content .capsule-membres` plus bas la recentre.
     Meme famille que le filet centre du 22 aout : quand une declaration ne
     prend pas, compter les classes avant de chercher ailleurs. */
  .capsule-membres {
    list-style: none; margin: 0 auto; padding: 0; max-width: 63rem;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 34px 30px; align-items: start;
  }

/* ================= la capsule ================= */
  /* forme de Laura : gélule verticale, deux moitiés scellées par un bandeau au centre.
     border-radius 9999px se borne à la demi-largeur : on obtient le stade, pas une ellipse. */
  .capsule-membre {
    position: relative; list-style: none; min-width: 0;
    display: grid; grid-template-rows: auto auto auto;
    background: var(--capsule-blanc); border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(58,42,20,.06), 0 24px 44px -26px rgba(58,42,20,.5);
    /* la hauteur n'est plus animee ici : voir .cm-milieu. Animer grid-template-rows
       force un recalcul complet du gabarit a chaque image, et comme la capsule
       vit dans une grille de 3 colonnes, ce recalcul remontait au parent.
       C'est ce qui produisait le blocage au demarrage.
       contain: layout isole ce qui se passe dedans du reste de la grille. */
    contain: layout;
    transition: transform .3s var(--capsule-ressort);
  }

  /* ⚠️ `min-width: 0` ajoute le 31 aout. Les elements de grille valent
     `min-width: auto` par defaut, ce qui les empeche de descendre sous leur
     largeur min-content. Combine au `max-width: none` du logo plus bas, le
     logo imposait sa largeur intrinseque a la moitie haute : mesure en
     emulation iPhone, elle sortait de 6 a 13 px du blanc de la capsule selon
     le logo, et comme `.cm-bande` est calee dessus en absolu, LA BANDE DOREE
     DEPASSAIT. Seules les capsules a logo charge debordaient, celles sans logo
     tombaient pile a 226 px : c'est ce qui a designe le coupable. */
  .cm-haut, .cm-bas { min-width: 0; position: relative; aspect-ratio: 1 / .84; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform .5s var(--capsule-ressort); }
  .cm-haut { padding: 13% 9% 8%; border-radius: 9999px 9999px 0 0; }
  .cm-bas  { padding: 12% 13% 15%; gap: 7px; border-radius: 0 0 9999px 9999px; }

  /* le bandeau : c'est le sceau, et c'est là qu'on clique.
     Chaque moitié en porte la sienne, elles se séparent en s'ouvrant. */
  /* Sceau entierement dore depuis le 22 aout. Il etait terracotta sur 62 %
   puis or : Laura trouvait que les deux couleurs ensemble faisaient trop. */
/* Affine le 23 aout : 11 px par moitie faisaient une bande de 22 px, trop
   large sur une capsule qui vient elle-meme de retrecir. 8 px par moitie. */
.cm-bande { position: absolute; left: 0; right: 0; height: 8px; background: var(--capsule-or); transition: transform .5s var(--capsule-ressort); }
  .cm-bande.h { bottom: 0; }
  .cm-bande.b { top: 0; }

  /* Le logo occupe tout le haut de la capsule, dans la limite du rembourrage
   qui l'empeche de mordre sur le dome. Demande de Laura du 19 aout : il
   tenait dans un cadre de 160 x 118 px, perdu au milieu de la coupole.
   Le rayon adoucit les logos carres a fond plein, qui sinon poseraient un bloc
   a angles vifs dans une forme ronde. ⚠️ Musiquant etait l'exemple de ce cas :
   son logo a ete redecoupe en rond le 23 aout, le rayon ne le concerne plus.
   La regle reste en place pour tout logo carre a venir. */
/* max-width ramene a 100% le 31 aout : `none` etait la seconde moitie du
   debordement decrit plus haut sur .cm-haut. Il servait a neutraliser la regle
   `img { max-width: 100% }` de Kadence, mais la boite fait deja 100% de large,
   donc la contrainte ne change rien au cas normal et borne le cas fautif. */
.cm-logo { width: 100%; max-width: 100%; height: 100%; object-fit: contain; border-radius: 16px; transition: filter .55s ease, transform .5s var(--capsule-ressort); }
  .cm-attente { width: 100%; max-width: 190px; height: 140px; display: grid; place-items: center; border: 1.5px dashed rgba(58,42,20,.16); border-radius: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(58,42,20,.34); }

  .cm-nom { margin: 0; font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 1.06rem; line-height: 1.24; text-wrap: balance; color: var(--capsule-encre); }
  .cm-disc { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(58,42,20,.5); line-height: 1.5; }
  .cm-mention { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--capsule-terracotta); transition: opacity .3s ease; }

  /* le contenu, entre les deux moitiés */
  /* la hauteur est posee en pixels par le script, mesuree au moment du clic.
     Le retard de 220ms est porte par le CSS et non par un setTimeout : le
     moteur d'animation ne derive pas, un minuteur si, surtout quand le fil est
     occupe par la lumiere. C'etait la seconde cause des a-coups. */
  /* contain: layout paint ajoute le 27 aout. Le panneau se deplie en animant
     sa hauteur, ce qui declenche un calcul de disposition a chaque image ;
     l'isoler empeche ce calcul et son repeint de remonter au reste de la
     grille de six capsules. Aucun effet visuel : overflow est deja a hidden,
     donc le rognage de paint ne change rien a ce qui s'affiche. */
  /* ⚠️ La courbe de la descente, changee le 27 aout sur le retour de Joel :
     l'explosion lui convenait, c'est la moitie basse qui descendait par a-coups.
     Cette moitie n'est animee par rien, elle est POUSSEE par la hauteur qui
     grandit : c'est donc cette transition-la qu'il fallait traiter.
     --capsule-elan, cubic-bezier(.16, 1, .3, 1), couvre 90 % de la course dans
     le premier tiers du temps puis rampe. Sur la fin, le bord bas n'avance plus
     que d'un pixel toutes les quelques images, et c'est ce qui se lit comme une
     saccade meme quand la cadence est bonne. La courbe ci-dessous decelere
     franchement mais garde une vitesse perceptible jusqu'au bout.
     L'elan d'origine reste en place partout ailleurs, il est juste inadapte a
     une course longue portee par la mise en page. */
  .capsule-membre { --cm-descente: cubic-bezier(.33, .72, .28, 1); }

  .cm-milieu { display: grid; overflow: hidden; min-height: 0; height: 0;
    contain: layout paint;
    transition: height .52s var(--cm-descente) .22s; }
  .capsule-membre.est-ferme .cm-milieu { transition-delay: 0s; transition-duration: .42s; }
  .cm-milieu-in { min-height: 0; opacity: 0; transform: translateY(10px); transition: opacity .4s ease .3s, transform .46s var(--capsule-elan) .3s; }

  /* Le contenu monte et se revele pendant que la hauteur se calcule : ces deux
     proprietes sont composables, autant les promouvoir le temps du geste pour
     qu'elles ne partagent pas le fil avec le calcul de mise en page.
     Retire des la fin, comme pour la lumiere : jamais de will-change au repos. */
  .capsule-membre.est-en-mouvement .cm-milieu-in {
    will-change: opacity, transform;
  }
  .cm-dedans { padding: 26px 13% 28px; text-align: center; }
  .cm-dedans p { margin: 0 0 18px; font-size: .99rem; color: rgba(58,42,20,.82); }
  .cm-lien { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--capsule-terracotta); text-decoration: none; border-bottom: 2px solid rgba(193,86,52,.35); padding-bottom: 3px; transition: border-color .22s ease, gap .22s ease; }
  .cm-lien:hover { border-color: var(--capsule-terracotta); gap: 14px; }
  .cm-lien.vide { color: rgba(58,42,20,.4); border-color: rgba(58,42,20,.16); cursor: default; }

  /* le déclencheur : au centre, sur le bandeau */
  /* Le declencheur, au centre sur le bandeau.
   Kadence habille tous les <button> du site : fond, bordure, ombre. Le
   background:none du prototype ne suffit donc plus, il faut neutraliser
   explicitement chaque propriete et sur tous les etats, sinon le bouton
   reapparait en aplat des que la capsule s'ouvre et qu'il occupe 46% de la
   hauteur. C'est le carre jaune vu le 18 aout. */
  .capsule-membre .cm-declic,
  .capsule-membre .cm-declic:hover,
  .capsule-membre .cm-declic:focus,
  .capsule-membre .cm-declic:active {
    position: absolute; left: 0; right: 0; top: 50%; height: 46px;
    transform: translateY(-50%);
    background: none; background-color: transparent; background-image: none;
    border: 0; box-shadow: none; padding: 0; margin: 0;
    color: inherit; font: inherit; cursor: pointer; z-index: 5;
  }
  .cm-declic:focus-visible { outline: 3px solid var(--capsule-terracotta); outline-offset: -3px; border-radius: 8px; }
  .cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ================= la lumière qui sort du sceau ================= */
  /* tout est ancré sur le bas de la moitié haute, c'est-à-dire sur la couture */
  .cm-lueur, .cm-halo, .cm-onde, .cm-etincelles { position: absolute; pointer-events: none; }

  /* Le flou est retire le 27 aout, avec l'accord de Joel. Un filter: blur sur un
     element qui bouge oblige le navigateur a refiltrer la zone a chaque image,
     en plein pendant que la hauteur du panneau se calcule. Les arrets du
     degrade sont adoucis pour rendre le meme fondu sans le filtre : le blanc
     central s'etale de 42 a 58 % au lieu d'un point unique a 50 %. */
  .cm-lueur {
    left: -5%; right: -5%; bottom: -2px; height: 4px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(230,180,34,.35) 10%, rgba(255,255,255,.85) 42%, #fff 50%, rgba(255,255,255,.85) 58%, rgba(230,180,34,.35) 90%, rgba(255,255,255,0));
    opacity: 0; z-index: 7;
  }
  .cm-halo {
    left: 50%; bottom: 0; width: 330px; height: 168px;
    margin: 0 0 -84px -165px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.98) 0%, rgba(255,240,205,.9) 22%, rgba(246,220,154,.6) 44%, rgba(230,180,34,0) 74%);
    opacity: 0; transform: scale(.18); z-index: 6;
  }
  .cm-onde {
    left: 50%; bottom: 0; width: 150px; height: 60px;
    margin: 0 0 -30px -75px; border-radius: 50%;
    border: 1.5px solid rgba(230,180,34,.8);
    opacity: 0; transform: scale(.3); z-index: 6;
  }
  .cm-etincelles { left: 50%; bottom: 0; width: 0; height: 0; z-index: 8; }
  /* six eclats au lieu de dix, plus petits, et sans box-shadow : une lueur
     peinte autour de chaque point coute un repaint par image et par eclat,
     pour un effet plus epais que lumineux. Le degrade radial rend le meme
     halo en une seule passe de composition. */
  .cm-etincelles i {
    position: absolute; left: 0; top: 0;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, var(--capsule-or) 0 38%, rgba(230,180,34,0) 72%);
  }
  .cm-etincelles i:nth-child(even) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: radial-gradient(circle, var(--capsule-terracotta) 0 38%, rgba(193,86,52,0) 72%); }
  .cm-etincelles i:nth-child(3n)   { background: radial-gradient(circle, rgba(230,180,34,.5) 0 38%, rgba(246,220,154,0) 72%); }
  /* projections : surtout le long de la couture, quelques-unes en biais */
  /* plus rasantes qu'avant : la lumiere file le long de la couture au lieu de
     partir dans toutes les directions, ce qui faisait gerbe de feu d'artifice */
  .cm-etincelles i:nth-child(1)  { --dx: -186px; --dy:   -6px; }
  .cm-etincelles i:nth-child(2)  { --dx:  186px; --dy:    5px; }
  .cm-etincelles i:nth-child(3)  { --dx: -134px; --dy:   18px; }
  .cm-etincelles i:nth-child(4)  { --dx:  140px; --dy:  -16px; }
  .cm-etincelles i:nth-child(5)  { --dx:  -88px; --dy:  -26px; }
  .cm-etincelles i:nth-child(6)  { --dx:   94px; --dy:   27px; }

  /* Quatre eclats au lieu de six depuis le 27 aout, accord de Joel. Les deux
     retires sont les plus courts (5 et 6, a moins de 95 px) : ce sont ceux
     qu'on remarque le moins et ils partaient les plus proches du centre, la ou
     le halo les couvrait deja. On les masque en CSS plutot que de toucher au
     balisage des six capsules, et la regle reste reversible d'une ligne. */
  .cm-etincelles i:nth-child(n+5) { display: none; }

  /* au survol, le sceau joue : on comprend que ça s'ouvre au centre */
  /* l'ombre n'est plus animee : un repaint par image sur un flou de 44px, pour
     un ecart que l'oeil ne voit pas. Seul le transform bouge. */
  .capsule-membre:not(.est-ouverte):hover { transform: translateY(-3px); }
  .capsule-membre:not(.est-ouverte):hover .cm-bande.h,
  .capsule-membre:not(.est-ouverte):has(.cm-declic:focus-visible) .cm-bande.h { transform: translateY(-3px); }
  .capsule-membre:not(.est-ouverte):hover .cm-bande.b,
  .capsule-membre:not(.est-ouverte):has(.cm-declic:focus-visible) .cm-bande.b { transform: translateY(3px); }

  /* ================= phase 1 : le déclic, sur place ================= */
  .capsule-membre.est-declenchee .cm-bande.h { animation: cm-sceau-h .44s var(--capsule-ressort); }
  .capsule-membre.est-declenchee .cm-bande.b { animation: cm-sceau-b .44s var(--capsule-ressort); }
  .capsule-membre.est-declenchee .cm-haut    { animation: cm-pousse-h .44s var(--capsule-ressort); }
  .capsule-membre.est-declenchee .cm-bas     { animation: cm-pousse-b .44s var(--capsule-ressort); }
  .capsule-membre.est-declenchee .cm-lueur       { animation: cm-lueur .52s ease-out; }
  .capsule-membre.est-declenchee .cm-halo        { animation: cm-halo .82s cubic-bezier(.16,.85,.3,1); }
  .capsule-membre.est-declenchee .cm-onde        { animation: cm-onde .74s cubic-bezier(.12,.8,.3,1) .04s; }
  .capsule-membre.est-declenchee .cm-etincelles i { animation: cm-etincelle .78s cubic-bezier(.13,.86,.28,1) .03s; }
  .capsule-membre.est-declenchee             { animation: cm-sursaut .46s var(--capsule-ressort); }

  /* will-change pose UNIQUEMENT pendant le declic, jamais au repos (27 aout).
     La lueur porte un filter: blur, et le halo un degrade radial de 330 px :
     anime sans promotion, chacun se repeint a chaque image, en plein pendant
     que la hauteur du panneau se calcule. Promus le temps du geste, ils sont
     rasterises une fois et seul leur transform bouge ensuite.
     ⚠️ Ne jamais laisser cette declaration en permanence : un will-change
     permanent reserve de la memoire graphique pour les six capsules a la fois
     et produit l'inverse de l'effet recherche. */
  .capsule-membre.est-declenchee .cm-lueur,
  .capsule-membre.est-declenchee .cm-halo,
  .capsule-membre.est-declenchee .cm-onde,
  .capsule-membre.est-declenchee .cm-etincelles i {
    will-change: transform, opacity;
  }

  @keyframes cm-sceau-h  { 0%,100% { transform: none; } 52% { transform: translateY(-15px); } }
  @keyframes cm-sceau-b  { 0%,100% { transform: none; } 52% { transform: translateY(15px); } }
  @keyframes cm-pousse-h { 0%,100% { transform: none; } 52% { transform: translateY(-12px); } }
  @keyframes cm-pousse-b { 0%,100% { transform: none; } 52% { transform: translateY(12px); } }
  @keyframes cm-sursaut  { 0%,100% { transform: none; } 40% { transform: scale(1.018); } }
  @keyframes cm-lueur {
    0%   { opacity: 0; transform: scaleX(.12); }
    18%  { opacity: 1; transform: scaleX(1.06); }
    100% { opacity: 0; transform: scaleX(1.18); }
  }
  @keyframes cm-halo {
    0%   { opacity: 0;   transform: scale(.2); }
    22%  { opacity: .82; transform: scale(1); }
    48%  { opacity: .5;  transform: scale(1.26); }
    100% { opacity: 0;   transform: scale(1.7); }
  }
  @keyframes cm-onde {
    0%   { opacity: .7; transform: scale(.3); }
    100% { opacity: 0;  transform: scale(2.6); }
  }
  @keyframes cm-etincelle {
    0%   { opacity: 0;   transform: translate(0, 0) scale(.3); }
    10%  { opacity: 1;   transform: translate(calc(var(--dx) * .22), calc(var(--dy) * .22)) scale(1.3); }
    62%  { opacity: .92; transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)) scale(.8); }
    100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(.3); }
  }

  /* ================= phase 2 : la capsule s'ouvre ================= */
  /* la bascule est calée sur le pic de lumière, qui la masque */
  /* .capsule-membre.est-ouverte ne touche plus au gabarit : la hauteur vit sur .cm-milieu */
  .capsule-membre.est-ouverte .cm-milieu-in { opacity: 1; transform: none; }
  .capsule-membre.est-ouverte .cm-mention { opacity: 0; }
  .capsule-membre.est-ouverte .cm-declic,
  .capsule-membre.est-ouverte .cm-declic:hover { top: 0; height: 46%; transform: none; }
  .capsule-membre.est-ouverte .cm-logo { transform: scale(1.04); }

  
@media (max-width: 900px) { .capsule-membres { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    /* ⚠️ Plafond ramene de 320 a 260 px le 31 aout. Chaque moitie de la gelule
       porte `aspect-ratio: 1 / .84`, donc la capsule entiere mesure 1,68 fois sa
       largeur : a 320 px elle faisait 540 px de haut, soit les deux tiers d'un
       ecran de telephone pour une seule capsule, logo minuscule perdu au centre.
       A 260 px elle retombe a 437 px. On resserre la largeur plutot que d'aplatir
       le rapport de forme : la gelule verticale est la forme voulue par Laura,
       c'est l'echelle qui etait fausse, pas le dessin. */
    .capsule-membres { grid-template-columns: 1fr; gap: 30px; max-width: 260px; margin: 0 auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .cm-lueur, .cm-halo, .cm-onde, .cm-etincelles { display: none; }
  }


/* --------------------------------------------------------------------------
   L'appel a l'action de Nos Capsule.s
   Centre, contrairement au reste du site qui part du bord gauche : ici il n'y a
   qu'une phrase et un bouton, et la grille de capsules au dessus est elle-meme
   symetrique. Un bloc aligne a gauche sous une grille centree paraitrait tombe.
   -------------------------------------------------------------------------- */

.capsule-membres-cta  .kt-row-column-wrap,
.capsule-membres-cta  .innerblocks-wrap {
	padding-top: 12px;
	padding-bottom: 72px;
}

.capsule-membres-cta .kt-inside-inner-col,
.capsule-membres-cta .kadence-inner-column-inner {
	text-align: center;
}

.capsule-membres-cta-texte {
	max-width: 46ch;
	margin: 0 auto 22px;
	color: var(--capsule-encre);
	font-size: 18px;
	line-height: 1.6;
}

.capsule-membres-actions {
	justify-content: center;
}

/* ==========================================================================
   Revelation des titres
   Un titre qui monte en fondu se remarque a peine. Ici il se decouvre derriere
   une ligne, comme un rideau qui se leve : le mot existe deja, c'est le regard
   qui y accede. Geste unique, repris sur chaque titre du site, ce qui evite
   d'inventer une animation par section.
   Deux proprietes seulement, `clip-path` et `transform` : ce sont les seules
   que le navigateur sait animer sans repeindre la page a chaque image.
   Le retrait de 18 % en bas laisse passer les jambages et le filet dore, qui
   seraient sinon coupes pendant toute la course.
   ========================================================================== */

@keyframes capsule-leve-titre {
	from { clip-path: inset(100% 0 -18% 0); transform: translateY(0.3em); }
	to   { clip-path: inset(0 0 -18% 0);    transform: none; }
}

/* Les deux titres de banniere, joues au chargement de la page. */
.capsule-hero .capsule-hero__titre,
.capsule-page-entete h1 {
	animation: capsule-leve-titre 1.05s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Les titres de section, joues a l'arrivee dans l'ecran. Sans JavaScript la
   classe capsule-js n'existe pas : rien n'est masque, tout reste lisible. */
.capsule-js .capsule-presentation .capsule-presentation__titre,
.capsule-js .capsule-capseur .capsule-capseur__titre,
.capsule-js .capsule-bureau__membre .capsule-bureau__nom,
.capsule-js .capsule-bureau__collectif h2 {
	clip-path: inset(100% 0 -18% 0);
}

.capsule-js .capsule-presentation.est-visible .capsule-presentation__titre,
.capsule-js .capsule-bureau__membre.est-visible .capsule-bureau__nom,
.capsule-js .capsule-bureau__collectif.est-visible h2 {
	animation: capsule-leve-titre 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Le titre de Devenir Capseur garde le retard de la sequence de l'arche, qui
   se trace avant lui. Regle posee apres celle qui anime tous les enfants du
   bloc, pour la depasser sans toucher aux retards. */
.capsule-js .capsule-capseur.est-visible .capsule-capseur__titre {
	animation: capsule-leve-titre 1s cubic-bezier(0.16, 1, 0.3, 1) var(--capsule-retard, 0s) both;
}

/* --- L'equipe : le contenu suit son titre --- */

.capsule-js .capsule-bureau__membre .capsule-portrait,
.capsule-js .capsule-bureau__membre .capsule-bureau__role,
.capsule-js .capsule-bureau__membre p:not(.capsule-bureau__role),
.capsule-js .capsule-bureau__membre .capsule-bureau__attente,
.capsule-js .capsule-bureau__collectif .capsule-equipe-photo,
.capsule-js .capsule-bureau__collectif p {
	opacity: 0;
}

.capsule-js .capsule-bureau__membre.est-visible .capsule-portrait {
	animation: capsule-leve 1.2s cubic-bezier(0.22, 0.9, 0.3, 1) 0.06s both;
}

.capsule-js .capsule-bureau__membre.est-visible .capsule-bureau__role {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}

.capsule-js .capsule-bureau__membre.est-visible p:not(.capsule-bureau__role),
.capsule-js .capsule-bureau__membre.est-visible .capsule-bureau__attente {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s both;
}

.capsule-js .capsule-bureau__collectif.est-visible .capsule-equipe-photo {
	animation: capsule-leve 1.2s cubic-bezier(0.22, 0.9, 0.3, 1) 0.1s both;
}

.capsule-js .capsule-bureau__collectif.est-visible p {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

/* --- Les Lieux : chaque espace se decouvre a son arrivee (27 aout) ---
   Les Lieux etait la seule page interieure sans revelation au defilement : son
   bandeau de titre s'animait au chargement, puis plus rien. Aucune animation
   nouvelle n'est inventee ici, on reprend mot pour mot la grammaire de
   L'equipe : le nom se leve derriere sa ligne, la photo monte, le reste suit
   en cascade. Les deux espaces sont observes separement, donc le second se
   decouvre quand on arrive dessus et pas en meme temps que le premier : c'est
   ce qui fait lire le zigzag comme une progression. */

.capsule-js .capsule-lieu .capsule-lieu__nom,
.capsule-js .capsule-lieu-bande h2,
.capsule-js .capsule-lieu-infos h2 {
	clip-path: inset(100% 0 -18% 0);
}

.capsule-js .capsule-lieu .capsule-lieu__photo,
.capsule-js .capsule-lieu .capsule-lieu__accroche,
.capsule-js .capsule-lieu p:not(.capsule-lieu__accroche),
.capsule-js .capsule-lieu .capsule-lieu__faits,
.capsule-js .capsule-lieu-bande p,
.capsule-js .capsule-lieu-infos p,
.capsule-js .capsule-lieu-infos .wp-block-buttons {
	opacity: 0;
}

.capsule-js .capsule-lieu.est-visible .capsule-lieu__nom,
.capsule-js .capsule-lieu-bande.est-visible h2,
.capsule-js .capsule-lieu-infos.est-visible h2 {
	animation: capsule-leve-titre 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.capsule-js .capsule-lieu.est-visible .capsule-lieu__photo {
	animation: capsule-leve 1.2s cubic-bezier(0.22, 0.9, 0.3, 1) 0.06s both;
}

.capsule-js .capsule-lieu.est-visible .capsule-lieu__accroche {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}

.capsule-js .capsule-lieu.est-visible p:not(.capsule-lieu__accroche) {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s both;
}

/* Le filet dore des faits monte avec sa liste : il est peint en ::before sur
   .capsule-lieu__faits, donc il suit son opacite sans regle supplementaire. */
.capsule-js .capsule-lieu.est-visible .capsule-lieu__faits {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.48s both;
}

.capsule-js .capsule-lieu-bande.est-visible p,
.capsule-js .capsule-lieu-infos.est-visible p {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

.capsule-js .capsule-lieu-infos.est-visible .wp-block-buttons {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s both;
}

/* --- Accessibilite --- */

@media (prefers-reduced-motion: reduce) {

	.capsule-hero .capsule-hero__titre,
	.capsule-page-entete h1 {
		animation: none;
		clip-path: none;
	}
}


/* ==========================================================================
   Billetterie HelloAsso, chargee au clic
   Meme mecanique que la carte d'acces du 18 aout : tant que personne ne
   clique, aucune requete ne part chez HelloAsso et aucun cookie tiers n'est
   depose. La facade n'imite pas le formulaire, ce serait un mensonge : c'est
   une invitation, dans la matiere du site.

   ⚠️ La hauteur est posee a la main. HelloAsso n'ajuste pas la hauteur de son
   iframe au contenu, c'est le reproche recurrent sur son forum de
   developpeurs. `data-hauteur` permet donc de la regler formulaire par
   formulaire, une fois le vrai formulaire sous les yeux. Trop courte, on a un
   ascenseur dans le cadre ; trop longue, du vide en dessous.
   ========================================================================== */

.capsule-billetterie {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: 340px;
	border: 1px solid var(--capsule-filet);
	border-radius: 20px;
	background-color: var(--capsule-creme);
}

.capsule-billetterie.est-chargee {
	display: block;
	background-color: var(--capsule-blanc);
}

.capsule-billetterie iframe {
	display: block;
	width: 100%;
	height: var(--capsule-billetterie-hauteur, 760px);
	border: 0;
}

/* --- La facade --- */

.capsule-billetterie-facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding: 40px 28px;
	text-align: center;
}

.capsule-billetterie-titre {
	margin: 0;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	line-height: 1.2;
}

.capsule-billetterie-info {
	margin: 0;
	color: var(--capsule-encre-douce);
	font-size: 16px;
	line-height: 1.6;
}

/* Le bouton n'apparait que si le script tourne ET qu'une adresse de
   billetterie est renseignee : un bouton qui ne fait rien est pire que pas de
   bouton. Meme regle que la carte d'acces. */
.capsule-billetterie-bouton {
	display: none;
}

.capsule-billetterie.est-interactive .capsule-billetterie-bouton {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background-color: var(--capsule-terracotta);
	color: var(--capsule-blanc);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color var(--capsule-transition),
	            transform 0.18s ease-out;
}

.capsule-billetterie.est-interactive .capsule-billetterie-bouton:hover,
.capsule-billetterie.est-interactive .capsule-billetterie-bouton:focus-visible {
	background-color: var(--capsule-terracotta-f);
	transform: translateY(-1px);
}

/* La mention doit se lire AVANT le clic, pas apres : elle est donc sous le
   bouton et non releguee en pied de page. Meme parti pris que pour Google. */
.capsule-billetterie-note {
	max-width: 46ch;
	margin: 0;
	color: var(--capsule-encre-douce);
	font-size: 13px;
	line-height: 1.6;
}

/* Le repli. Il marche sans JavaScript, sans clic prealable, et sur les
   navigateurs qui refusent les iframes tierces. */
.capsule-billetterie-lien {
	color: var(--capsule-encre-douce);
	font-size: 14px;
}

/* Ce qui manque se voit, plutot que d'etre comble au juge. Meme convention
   que les logos « a venir » et que les mentions legales. */
.capsule-billetterie-attente {
	margin: 0;
	padding: 14px 20px;
	border: 1px dashed var(--capsule-filet);
	border-radius: 14px;
	color: var(--capsule-attenue);
	font-style: italic;
	font-size: 14px;
}

.capsule-billetterie.est-interactive .capsule-billetterie-attente {
	display: none;
}

/* Confirmation posee par le script quand HelloAsso annonce la fin du
   paiement. HelloAsso affiche deja son propre remerciement dans le cadre :
   cette bande sert a le dire dans la voix du site, au-dessus du cadre, la ou
   le visiteur regarde. */
.capsule-billetterie-merci {
	display: none;
	margin: 0;
	padding: 16px 22px;
	background-color: var(--capsule-creme);
	border-bottom: 1px solid var(--capsule-filet);
	color: var(--capsule-encre);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	text-align: center;
}

.capsule-billetterie.est-payee .capsule-billetterie-merci {
	display: block;
}

@media (max-width: 767px) {

	.capsule-billetterie-facade {
		padding: 30px 20px;
		gap: 13px;
	}

	/* Empilees, les etapes du formulaire sont plus hautes : sans ce
	   supplement, l'ascenseur interieur apparait systematiquement. */
	.capsule-billetterie iframe {
		height: var(--capsule-billetterie-hauteur-mobile, 900px);
	}
}



/* ==========================================================================
   Devenir Capseur
   Rangees Kadence, comme Les Lieux, L'equipe et Contact : Laura peut ajouter
   une rangee ou modifier un texte sans toucher a la composition.
   ⚠️ La rangee du formulaire porte la classe `capsule-contact-formulaire`,
   nee sur la page Contact le 18 aout. Le nom est un vestige de son lieu de
   naissance : le composant est desormais partage par les deux pages, et tout
   son habillage de champs vaut ici sans etre duplique.
   ========================================================================== */

.capsule-adhesion.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-adhesion.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: clamp(46px, 5vw, 74px);
	padding-bottom: clamp(46px, 5vw, 74px);
}

/* Une bande creme au milieu de la page : c'est la respiration qui empeche les
   cinq sections de se lire comme une seule colonne de texte. Meme role que le
   creme du pied de page. */
.capsule-adhesion--creme.wp-block-kadence-rowlayout {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	background-color: var(--capsule-creme);
}

.capsule-adhesion--creme.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-adhesion--creme.wp-block-kadence-rowlayout  .innerblocks-wrap {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

.capsule-adhesion h2 {
	margin: 0 0 22px;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.capsule-adhesion p {
	max-width: 68ch;
	margin: 0 0 16px;
	color: var(--capsule-encre-douce);
	font-size: 17px;
	line-height: 1.75;
}

/* --- Ce que vous partagez --- */

.capsule-partage {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 34px;
}

.capsule-partage li {
	position: relative;
	padding-left: 26px;
	color: var(--capsule-encre-douce);
	font-size: 16px;
	line-height: 1.7;
}

/* Une capsule doree en guise de puce : le motif de la marque plutot qu'un
   point noir. Elle ne porte aucun texte, la regle sur l'or est tenue. */
.capsule-partage li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 0;
	width: 9px;
	height: 13px;
	border-radius: 999px;
	background-color: var(--capsule-or);
}

.capsule-partage strong {
	color: var(--capsule-encre);
	font-weight: 600;
}

/* --- Comment ca se passe --- */

.capsule-etapes {
	counter-reset: etape;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	max-width: 72ch;
}

.capsule-etapes li {
	position: relative;
	padding-left: 56px;
	color: var(--capsule-encre-douce);
	font-size: 16px;
	line-height: 1.7;
}

/* Le numero vit dans une capsule couchee, en contour terracotta : l'or ne
   porte jamais de texte, et un chiffre est du texte. */
.capsule-etapes li::before {
	counter-increment: etape;
	content: counter(etape);
	position: absolute;
	top: -2px;
	left: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 30px;
	border: 1px solid var(--capsule-terracotta);
	border-radius: 999px;
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.capsule-etapes strong {
	color: var(--capsule-encre);
	font-weight: 600;
}

@media (max-width: 767px) {

	.capsule-partage {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.capsule-etapes li {
		padding-left: 48px;
	}
}



/* ==========================================================================
   Les Lieux
   Deux espaces, deux rangees Kadence en zigzag : photo a gauche pour le blanc,
   a droite pour le noir. Le zigzag evite que la page se lise comme une liste,
   et il reprend la composition de la presentation d'accueil.
   ========================================================================== */

.capsule-lieu.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-lieu.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: clamp(48px, 5.5vw, 84px);
	padding-bottom: clamp(48px, 5.5vw, 84px);
	align-items: center;
}

/* L'arche est la forme signature. ⚠️ Elle passe en carre le 24 aout : une
   piece se lit en largeur, pas en hauteur. Le cadrage 3/4 d'origine coupait
   la profondeur de l'espace noir, on n'y voyait qu'un pan de mur et deux
   fauteuils. Au carre, le parquet s'enfonce jusqu'a la scene. Le dome occupe
   alors la moitie haute exactement, ce qui donne l'arche la plus franche. */
.capsule-lieu__photo {
	display: block;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 999px 999px 20px 20px;
}

.capsule-lieu__nom {
	margin: 0;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	line-height: 1.12;
}

/* L'accroche reprend le mot de Laura, en petites capitales dorees comme les
   fonctions du bureau. Elle annonce l'ambiance avant la description. */
.capsule-lieu__accroche {
	margin: 10px 0 22px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--capsule-terracotta-f);
}

.capsule-lieu p:not(.capsule-lieu__accroche) {
	max-width: 60ch;
	margin: 0 0 16px;
	color: var(--capsule-encre-douce);
	font-size: 17px;
	line-height: 1.75;
}

/* Le filet des faits reprend l'or du site plutot que la bordure neutre.
   C'etait la seule ligne de separation de la page a ne pas suivre la grammaire
   des autres, et sur une page qui n'a que deux blocs elle se remarquait. Meme
   degrade que le filet des titres, sans la capsule : l'ornement du dome
   appartient aux titres, il n'a pas a se repeter au-dessus d'une liste. */
.capsule-lieu__faits {
	position: relative;
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 0;
	display: grid;
	gap: 8px;
}

.capsule-lieu__faits::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--capsule-or) 0%, var(--capsule-or) 82%, transparent 100%);
}

.capsule-lieu__faits li {
	color: var(--capsule-encre-douce);
	font-size: 15px;
	line-height: 1.6;
}

.capsule-lieu__faits strong {
	color: var(--capsule-encre);
	font-weight: 600;
}

/* La bande creme separe les deux espaces de ce qui les reunit. Meme role que
   la respiration du pied de page et de Devenir Capseur. */
.capsule-lieu-bande.wp-block-kadence-rowlayout {
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	width: var(--global-vw, 100vw);
	max-width: var(--global-vw, 100vw);
	background-color: var(--capsule-creme);
}

.capsule-lieu-bande.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-lieu-bande.wp-block-kadence-rowlayout  .innerblocks-wrap {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding: clamp(48px, 5.5vw, 78px) clamp(20px, 5vw, 72px);
}

.capsule-lieu-infos.wp-block-kadence-rowlayout  .kt-row-column-wrap,
.capsule-lieu-infos.wp-block-kadence-rowlayout  .innerblocks-wrap {
	padding-top: clamp(46px, 5vw, 74px);
	padding-bottom: clamp(46px, 5vw, 74px);
}

.capsule-lieu-bande h2,
.capsule-lieu-infos h2 {
	margin: 0 0 20px;
	color: var(--capsule-terracotta);
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.capsule-lieu-bande p,
.capsule-lieu-infos p {
	max-width: 68ch;
	margin: 0 0 16px;
	color: var(--capsule-encre-douce);
	font-size: 17px;
	line-height: 1.75;
}

@media (max-width: 1024px) {

	/* Empilees, les deux rangees doivent remettre la photo au-dessus du texte.
	   Sans cette regle, la rangee inversee garderait sa photo en dessous et
	   les deux espaces ne se liraient plus pareil. */
	.capsule-lieu--inverse.wp-block-kadence-rowlayout  .kt-row-column-wrap,
	.capsule-lieu--inverse.wp-block-kadence-rowlayout  .innerblocks-wrap {
		flex-direction: column-reverse;
	}

	.capsule-lieu__photo {
		max-width: 340px;
		margin-bottom: 28px;
	}
}



/* Recentrage de la grille des capsules, voir le commentaire sur
   `.capsule-membres` : deux classes battent la regle de Kadence.
   ⚠️ 31 aout : cette regle ne reprenait que la MARGE. Le REMPLISSAGE restait
   celui de `.entry-content ul`, l'indentation de liste de Kadence, qui gagne
   pour la meme raison de specificite. Mesure en emulation iPhone : la grille
   etait bien centree, mais la capsule vivait a 34 px de son bord gauche et
   collee au bord droit, soit 99 px de marge a gauche et 65 a droite dans un
   ecran de 390. Invisible en bureau ou 34 px se noient dans 1008, criant sur
   un telephone. Meme famille que la marge : quand une declaration ne prend
   pas, compter les classes. */
.entry-content .capsule-membres {
	margin-inline: auto;
	padding-inline: 0;
}

/* ==========================================================================
   L'animation d'entrée — « La porte », posée le 25 août 2026
   --------------------------------------------------------------------------
   L'écran entier est la capsule : elle se forme, son sceau se descelle, les
   deux moitiés s'écartent et emportent les volets avec elles. C'est le
   mécanisme exact de la gélule de Nos Capsule.s joué à l'échelle de la page,
   ce qui APPREND l'interaction au visiteur au lieu de décorer. Durée 1,15 s.

   Retour de Laura du 24 août : fond blanc. Le crème avait été écarté parce
   qu'il est celui du bandeau d'accueil : le voile s'écartait sur la même
   teinte et rien ne semblait s'ouvrir.

   ⚠️ Le voile n'existe que si le JavaScript tourne : il est injecté par le
   script, jamais écrit côté serveur. C'est l'inverse de l'implémentation de
   La Petite Académie, dont la classe est posée en PHP : si leur script casse,
   leur site reste invisible pour toujours.

   ⚠️ Le corps de la page n'est JAMAIS masqué (pas d'opacity: 0 ni de
   display: none dessus). Le voile se contente de le recouvrir. Chrome ne fait
   pas de test d'occultation, un élément peint sous un calque opaque reste
   compté comme affiché : le LCP n'est donc pas dégradé. C'est la façon de
   masquer qui coûte cher, pas la durée.

   Toutes les classes sont préfixées « ci- » (capsule intro). Les noms du
   prototype (.intro, .volet, .demi, .bande) étaient trop génériques pour
   cohabiter avec un thème et des extensions.
   ========================================================================== */

.capsule-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-rows: 50% 50%;
	/* le visiteur peut cliquer et défiler à travers dès la première image */
	pointer-events: none;
}

.capsule-intro[hidden] { display: none; }

.ci-volet {
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
	background: var(--capsule-blanc);
	will-change: transform;
}

.ci-volet--haut { align-items: flex-end; }
.ci-volet--bas  { align-items: flex-start; }

/* Une seule mesure gouverne la capsule, tout le reste s'en déduit.
   Rapport 1/.84 par moitié, repris tel quel de la gélule du site. */
.ci-demi {
	position: relative;
	width: var(--ci-capsule, min(300px, 46vw, 34vh));
	aspect-ratio: 1 / .84;
	display: grid;
	place-items: center;
	background: var(--capsule-blanc);
	opacity: 0;
	will-change: transform, opacity;
}

/* La coupole EST la moitié haute, pas une image posée dessus : un
   border-radius sur une demie de rapport 1/.84 donne le dôme du logo.
   Il suffisait de la peindre. L'ouverture sépare donc la coupole de son mot,
   c'est-à-dire qu'elle déchire le lockup en deux. */
.ci-demi--haut {
	border-radius: 9999px 9999px 0 0;
	box-shadow: 0 -18px 40px -22px rgba(58, 42, 20, .5);
	padding-bottom: calc(var(--ci-capsule, min(300px, 46vw, 34vh)) * .09);
	background: var(--capsule-or);
}

.ci-demi--bas {
	border-radius: 0 0 9999px 9999px;
	box-shadow: 0 18px 40px -22px rgba(58, 42, 20, .5);
	padding-top: calc(var(--ci-capsule, min(300px, 46vw, 34vh)) * .07);
}

/* Le sceau. Chaque moitié porte le sien, ils se séparent en s'ouvrant : c'est
   ce qui fait lire une ouverture plutôt qu'un simple écartement.
   ⚠️ Il ne peut pas rester dans l'or de la charte : sur la coupole dorée les
   deux ors sont le même et il disparaît. Il prend l'or soutenu du mot,
   #C48C2F, déjà présent dans le logo : aucun accent nouveau. */
.ci-sceau {
	position: absolute;
	left: 0;
	right: 0;
	height: calc(var(--ci-capsule, min(300px, 46vw, 34vh)) * .032);
	background: #C48C2F;
	transform: scaleX(0);
	transform-origin: center;
}

.ci-sceau--h { bottom: 0; }
.ci-sceau--b { top: 0; }

.ci-mot {
	display: block;
	height: auto;
	width: calc(var(--ci-capsule, min(300px, 46vw, 34vh)) * .64);
}

/* La lueur qui court le long de la ligne de séparation quand le sceau se
   descelle. Un bord franc, pas un dégradé : ce n'est pas le contraste qui
   rend le geste visible, c'est le mouvement. */
.ci-lueur {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--ci-capsule, min(300px, 46vw, 34vh)) * 1.02);
	height: 3px;
	translate: -50% -50%;
	background: linear-gradient(90deg, transparent, #FFF6D8 40%, #FFF6D8 60%, transparent);
	opacity: 0;
	z-index: 2;
}

/* La chronologie. --ci-v vaut 1 à la vitesse de référence. */
.capsule-intro.joue .ci-demi--haut { animation: ci-pose calc(.30s / var(--ci-v, 1)) cubic-bezier(.16, 1, .3, 1) both, ci-ouvre-h calc(.16s / var(--ci-v, 1)) ease-out calc(.50s / var(--ci-v, 1)) forwards; }
.capsule-intro.joue .ci-demi--bas  { animation: ci-pose calc(.30s / var(--ci-v, 1)) cubic-bezier(.16, 1, .3, 1) both, ci-ouvre-b calc(.16s / var(--ci-v, 1)) ease-out calc(.50s / var(--ci-v, 1)) forwards; }
.capsule-intro.joue .ci-sceau       { animation: ci-trace calc(.30s / var(--ci-v, 1)) cubic-bezier(.16, 1, .3, 1) calc(.16s / var(--ci-v, 1)) both; }
.capsule-intro.joue .ci-lueur       { animation: ci-eclat calc(.26s / var(--ci-v, 1)) ease-out calc(.48s / var(--ci-v, 1)) both; }
.capsule-intro.joue .ci-volet--haut { animation: ci-part-h calc(.53s / var(--ci-v, 1)) cubic-bezier(.7,0,.2,1) calc(.62s / var(--ci-v, 1)) both; }
.capsule-intro.joue .ci-volet--bas  { animation: ci-part-b calc(.53s / var(--ci-v, 1)) cubic-bezier(.7,0,.2,1) calc(.62s / var(--ci-v, 1)) both; }

@keyframes ci-pose {
	from { opacity: 0; transform: translateY(10px) scale(.94); }
	to   { opacity: 1; transform: none; }
}

@keyframes ci-trace {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes ci-eclat {
	0%   { opacity: 0; transform: scaleX(.2); }
	40%  { opacity: 1; transform: scaleX(1); }
	100% { opacity: 0; transform: scaleX(1.5); }
}

@keyframes ci-ouvre-h { from { transform: none; } to { transform: translateY(-9px); } }
@keyframes ci-ouvre-b { from { transform: none; } to { transform: translateY(9px); } }
@keyframes ci-part-h  { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes ci-part-b  { from { transform: none; } to { transform: translateY(100%); } }

/* Le script ne pose déjà pas le voile quand le visiteur demande moins de
   mouvement. Cette règle est la ceinture en plus des bretelles. */
@media (prefers-reduced-motion: reduce) {
	.capsule-intro { display: none; }
}

/* --------------------------------------------------------------------------
   « Nos valeurs » centrée, 25 août 2026

   Trois demandes de Joel, et une mesure qui lui donne raison sur la première.

   ⚠️ Le sur-titre était en --capsule-attenue (#8C7A5E), qui ne donne que
   4,15:1 sur blanc, sous le seuil de 4,5. Il ne se voyait pas, et ce n'était
   pas une impression. Il prend #A9482B, mesuré à 5,76:1, déjà la couleur des
   liens du pied de page depuis le 18 août : aucun accent nouveau. Le
   terracotta de la charte passait à 4,52:1, tout juste, et il aurait mis un
   second rouge vif à côté des titres de section.

   Le séparateur n'est pas un trait nouveau : c'est le filet doré à capsule du
   site, dans sa variante centrée. ⚠️ Le sélecteur de base du composant compte
   trois classes ; celui-ci doit en compter autant, sinon son width: 100%
   l'emporte et le filet prend toute la colonne. C'est exactement ce qui
   s'était produit le 22 août sur la page L'équipe.
   -------------------------------------------------------------------------- */

.capsule-valeurs {
	text-align: center;
}

.capsule-valeurs .capsule-valeurs__titre {
	color: #A9482B;
}

/* Le filet, dans sa variante centrée. Quatre classes dans le sélecteur. */
.entry-content .capsule-valeurs .wp-block-separator.capsule-filet-or,
.capsule-valeurs .wp-block-separator.capsule-filet-or {
	width: min(340px, 70%);
	margin-inline: auto;
	background: linear-gradient(90deg, transparent 0%, var(--capsule-or) 24%, var(--capsule-or) 76%, transparent 100%);
	transform-origin: center;
}

.capsule-valeurs .capsule-filet-or::after {
	left: 50%;
}

/* La grille était bornée à 60rem mais posée à gauche : elle gardait tout son
   vide du même côté. */
.capsule-valeurs .capsule-valeurs__liste {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Page Activites : la grille des cartes
   Ajout du 28 aout 2026.

   Structure : des rangees Kadence a deux colonnes, une carte par colonne.
   Le conteneur interne de la colonne EST la carte, ce qui evite d'inventer une
   classe de colonne et laisse Laura dupliquer une rangee pour ajouter deux
   activites, conformement a l'architecture editoriale du 14 aout.

   Chaque regle de rangee porte SES DEUX noms, celui du site et celui de
   l'editeur, conformement a la convention en tete de ce fichier.

   AUCUNE animation de revelation ici, et c'est deliberé.
   Verifie le 28 aout : capsule-s.js n'observe que .capsule-valeurs,
   .capsule-presentation, .capsule-capseur, .capsule-carte, .capsule-membre,
   .capsule-equipe-photo et .capsule-billetterie. Aucun selecteur d'activite.
   Poser opacity: 0 en attendant une classe est-visible que personne ne pose
   rendrait donc les huit cartes invisibles pour toujours. Le jour ou la
   section sera inscrite dans le script, la grammaire a reprendre est celle de
   Les Lieux : capsule-monte sur le contenu, capsule-leve-titre sur les titres.
   --------------------------------------------------------------------------- */

.capsule-activites + .capsule-activites {
	margin-block-start: 28px;
}

/* La carte. Site puis editeur. */
.capsule-activites .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
.capsule-activites .innerblocks-wrap > .wp-block-kadence-column > .kadence-inner-column-inner {
	height: 100%;
	padding: 34px 32px 30px;
	background: var(--capsule-blanc);
	border: 1px solid var(--capsule-filet);
		border-radius: 20px;

	/* Rendu explicitement flex pour que la marge automatique du lien fonctionne.
	   Kadence pose bien flex-direction: column sur ce conteneur, mais pas le
	   display: flex qui va avec, donc la marge auto restait sans effet. */
	display: flex;
	flex-direction: column;
}
/* Le titre porte le filet dore et son losange, meme grammaire que le reste du
   site, mais aligne a gauche et non centre : une carte se lit en colonne. */
.capsule-activite__titre {
	position: relative;
	margin: 0 0 16px;
	padding-block-end: 15px;
	color: var(--capsule-terracotta);
	font-size: clamp(19px, 2.1vw, 22px);
	line-height: 1.24;
}

.capsule-activite__titre::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 2px;
	background: var(--capsule-or);
}

.capsule-activite__titre::before {
	content: "";
	position: absolute;
	left: 50px;
	bottom: -2px;
	width: 6px;
	height: 6px;
	background: var(--capsule-or);
	transform: rotate(45deg);
}

.capsule-activite__texte {
	margin: 0 0 20px;
	color: var(--capsule-encre-douce);
}

/* Les lignes de renseignement. L'intitule passe au-dessus de sa valeur : en
   colonne etroite, un intitule en ligne casse la lecture des la premiere
   valeur un peu longue. */
.capsule-activite__meta {
	margin: 0 0 12px;
	color: var(--capsule-encre-douce);
	font-size: 15px;
	line-height: 1.5;
}

.capsule-activite__meta strong {
	display: block;
	margin-block-end: 2px;
	color: var(--capsule-attenue);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* L'encadre d'attente, meme role que .capsule-bureau__attente mais dans une
   carte : il dit franchement ce qui manque plutot que de laisser un trou. */
.capsule-activite__attente {
	margin: 0 0 20px;
	padding: 13px 17px;
	background: var(--capsule-creme);
	border-radius: 12px;
	color: var(--capsule-attenue);
	font-size: 15px;
	line-height: 1.5;
	font-style: italic;
}

/* Les creneaux d'un atelier. Liste sans puce, un groupe et son horaire par
   ligne. Le filet remplace la puce : il separe sans ajouter de signe, et la
   colonne reste calme meme avec cinq lignes. L'intitule passe au-dessus de
   son horaire pour la meme raison que dans __meta : en colonne etroite, une
   valeur un peu longue casse la lecture si l'intitule reste en ligne. */
.capsule-activite__creneaux {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.45;
}

.capsule-activite__creneaux li {
	padding-block: 7px;
	border-block-end: 1px solid var(--capsule-filet);
	color: var(--capsule-encre-douce);
}

.capsule-activite__creneaux li:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.capsule-activite__creneaux strong {
	display: block;
	color: var(--capsule-encre);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
}

.capsule-activite__lien {
	margin: 22px 0 0;
}

.capsule-activite__lien a {
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	text-decoration: none;
	padding-block-end: 2px;
	border-block-end: 1px solid var(--capsule-or);
	transition: color var(--capsule-transition);
}

.capsule-activite__lien a:hover,
.capsule-activite__lien a:focus-visible {
	color: var(--capsule-terracotta);
}

/* Kadence Blocks empile a 767px. On resserre le rembourrage et l'ecart, une
   carte pleine largeur sur telephone n'a pas besoin d'autant de marge. */
@media (max-width: 767px) {

	.capsule-activites .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
	.capsule-activites .innerblocks-wrap > .wp-block-kadence-column > .kadence-inner-column-inner {
		padding: 28px 24px 26px;
	}

	.capsule-activites + .capsule-activites {
		margin-block-start: 20px;
	}
}

/* Le lien est poussé au bas de la carte. Kadence met déjà la colonne en
   colonne flex : une marge automatique suffit. Sans cela, une carte courte
   posée à côté d'une longue laisse son vide APRES le lien, ce qui se lit comme
   un oubli ; le vide placé avant se lit comme une respiration. */
.capsule-activites .capsule-activite__lien {
	margin-block-start: auto;
	padding-block-start: 22px;
}

/* ---------------------------------------------------------------------------
   Accueil : le bloc « Ce qu'on vient faire ici »
   Ajout du 28 aout 2026.

   Quatrieme famille de mise en page de l'accueil, apres le bandeau (texte a
   gauche), la presentation (photo a gauche) et Devenir Capseur (tout centre
   dans l'arche). Ici : un chapeau centre, puis une grille alignee a gauche.
   Le contraste entre les deux est ce qui distingue cette section des trois
   autres sans inventer de forme nouvelle.

   Fond BLANC, et c'est un choix de sequence : la presentation qui precede est
   creme, Devenir Capseur qui suit est un aplat terracotta. Le blanc separe les
   deux, sinon le creme toucherait le terracotta.

   L'or reste rare : un filet de 40px par vignette, aucun aplat. Le filet
   s'allonge au survol, meme geste que la navigation de l'en-tete.
   --------------------------------------------------------------------------- */

.capsule-activites-accueil {
	background: var(--capsule-blanc);
	padding-block: clamp(64px, 8vw, 104px);
}

.capsule-activites-accueil__contenu {
	max-width: 68rem;
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 2rem);
	text-align: center;
}

.capsule-activites-accueil__titre {
	margin: 0;
	color: var(--capsule-terracotta);
	font-size: clamp(26px, 3.2vw, 36px);
	line-height: 1.2;
}

/* Le filet dore, variante centree. Meme traitement que sous Nos valeurs. */
.entry-content .capsule-activites-accueil .wp-block-separator.capsule-filet-or,
.capsule-activites-accueil .wp-block-separator.capsule-filet-or {
	width: min(340px, 70%);
	margin-inline: auto;
	background: linear-gradient(90deg, transparent 0%, var(--capsule-or) 24%, var(--capsule-or) 76%, transparent 100%);
	transform-origin: center;
}

.capsule-activites-accueil .capsule-filet-or::after {
	left: 50%;
}

.capsule-activites-accueil__chapeau {
	max-width: 40rem;
	margin: 0 auto;
	color: var(--capsule-encre-douce);
}

/* --- La grille des quatre vignettes --- */

/* WordPress insere un .wp-block-group__inner-container au rendu, entre le
   groupe et ses enfants. Une grille posee sur le groupe n'a donc qu'un seul
   element : ce conteneur. display: contents l'efface de la mise en page et fait
   remonter les vignettes au rang d'elements de grille. Dans l'editeur ce
   conteneur n'existe pas, la regle ne selectionne rien et la grille du groupe
   s'applique directement : les deux cotes sont couverts. */
.capsule-activites-accueil__grille > .wp-block-group__inner-container {
	display: contents;
}

.capsule-activites-accueil__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 30px 24px;
	margin-block-start: clamp(56px, 6vw, 76px);
	padding-block-start: 42px;
}

/* La carte, reprise de la page Rencontres et expos de Connaissance & Partage a
   la demande de Joel, transposee dans la charte capsule.s.
   Deux ecarts assumes avec le modele : le fond de section reste BLANC et la
   carte est CREME, l'inverse du modele, parce que la presentation qui precede
   est deja creme et que deux cremes qui se touchent se confondent. Et le
   medaillon porte un pictogramme cercle d'or au lieu d'un emoji, la charte
   n'employant pas d'emoji. */
/* align-self explicite : l'etirement est le defaut d'une grille, mais Joel a
   vu la quatrieme carte plus haute que les trois autres et je n'ai pas su le
   reproduire. On ne laisse donc pas la hauteur reposer sur un implicite. */
.capsule-activite-vignette {
	position: relative;
	align-self: stretch;
	padding: 58px 22px 30px;
	background: var(--capsule-creme);
	border-radius: 20px;
	text-align: center;
	box-shadow: 0 14px 34px -22px rgba(58, 42, 20, 0.45);
	transition: transform var(--capsule-transition), box-shadow var(--capsule-transition);
}

/* Le medaillon deborde en haut de la carte. Blanc pour se detacher du creme,
   cercle d'or parce que l'or decore. Le pictogramme est a l'encre : l'or ne
   porte jamais de trait fin lisible, il ne donne que 1,92:1 sur blanc. */
.capsule-activite-vignette::before {
	content: "";
	position: absolute;
	top: -42px;
	left: 50%;
	width: 84px;
	height: 84px;
	border: 1px solid var(--capsule-or);
	border-radius: 50%;
	background-color: var(--capsule-blanc);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38px 38px;
	transform: translateX(-50%);
	box-shadow: 0 8px 20px -14px rgba(58, 42, 20, 0.5);
}

/* Sur le site, et non dans l'editeur, une regle exterieure pose une marge
   basse de 32px sur toutes les cartes sauf la derniere et remet leur marge
   haute a zero. Mesure le 28 aout sur un apercu reconstruit avec le vrai
   <head> du site : les trois premieres cartes faisaient 191px dans une rangee
   de 223, la quatrieme 223. L'etirement d'une grille retire les marges de la
   hauteur disponible, donc une marge basse creuse la carte d'autant.
   On neutralise les marges verticales, et la place du medaillon est prise par
   le rembourrage haut de la grille, qu'aucune regle exterieure ne touche.
   Trois classes dans le selecteur : la regle exterieure bat un simple nom. */
.capsule-activites-accueil__grille .wp-block-group.capsule-activite-vignette {
	margin-block: 0;
}

.capsule-activite-vignette--peinture::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233A2A14%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c-4.9%200-8.8%203.6-8.8%208s3.9%208%208.8%208c1.1%200%201.8-.7%201.8-1.6%200-.4-.2-.8-.5-1.1-.2-.3-.4-.6-.4-1%200-.9.7-1.6%201.6-1.6h1.6c2.6%200%204.7-2%204.7-4.6C20.8%205.9%2017%203%2012%203Z%27%2F%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%2710.4%27%20r%3D%271%27%20fill%3D%27%233A2A14%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%277.6%27%20r%3D%271%27%20fill%3D%27%233A2A14%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%279.2%27%20r%3D%271%27%20fill%3D%27%233A2A14%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.capsule-activite-vignette--theatre::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233A2A14%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.6h14v6.7c0%204.3-3.1%207.7-7%207.7s-7-3.4-7-7.7V4.6Z%27%2F%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%2710.4%27%20r%3D%27.95%27%20fill%3D%27%233A2A14%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2714.5%27%20cy%3D%2710.4%27%20r%3D%27.95%27%20fill%3D%27%233A2A14%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M9.3%2014.2c1.6%201.4%203.8%201.4%205.4%200%27%2F%3E%3C%2Fsvg%3E"); }
.capsule-activite-vignette--spectacles::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233A2A14%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%206.6h17v3.7a1.8%201.8%200%200%200%200%203.6v3.7h-17v-3.7a1.8%201.8%200%200%200%200-3.6Z%27%2F%3E%3Cpath%20d%3D%27M14.6%206.6v11%27%20stroke-dasharray%3D%271.7%201.7%27%2F%3E%3C%2Fsvg%3E"); }
.capsule-activite-vignette--entreprise::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233A2A14%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.8%204.6h16.4v10.2H3.8z%27%2F%3E%3Cpath%20d%3D%27M12%2014.8v3.6%27%2F%3E%3Cpath%20d%3D%27M8.6%2018.4h6.8%27%2F%3E%3Cpath%20d%3D%27M7.4%2011.6%2010.4%208.6l2%202%203.8-4.2%27%2F%3E%3C%2Fsvg%3E"); }

.capsule-activite-vignette__nom {
	margin: 0 0 10px;
	font-size: clamp(16.5px, 1.45vw, 18.5px);
	line-height: 1.3;
}

.capsule-activite-vignette__nom a {
	color: var(--capsule-terracotta);
	text-decoration: none;
	transition: color var(--capsule-transition);
}

/* La carte entiere devient cliquable sans imbriquer de lien dans un groupe,
   ce que Gutenberg ne sait pas faire nativement. */
.capsule-activite-vignette__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.capsule-activite-vignette p {
	margin: 0;
	color: var(--capsule-encre-douce);
	font-size: 15px;
	line-height: 1.55;
}

/* Survol : la carte se souleve, le medaillon monte avec elle. */
.capsule-activite-vignette:hover,
.capsule-activite-vignette:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 22px 42px -22px rgba(58, 42, 20, 0.5);
}

.capsule-activite-vignette:hover .capsule-activite-vignette__nom a,
.capsule-activite-vignette:focus-within .capsule-activite-vignette__nom a {
	color: var(--capsule-terracotta-f);
}

.capsule-activites-accueil__lien {
	margin-block-start: clamp(38px, 4.4vw, 54px);
}

.capsule-activites-accueil__lien a {
	color: var(--capsule-terracotta-f);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	text-decoration: none;
	padding-block-end: 3px;
	border-block-end: 1px solid var(--capsule-or);
	transition: color var(--capsule-transition);
}

.capsule-activites-accueil__lien a:hover,
.capsule-activites-accueil__lien a:focus-visible {
	color: var(--capsule-terracotta);
}

@media (max-width: 1024px) {

	.capsule-activites-accueil__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 22px;
	}
}

@media (max-width: 600px) {

	.capsule-activites-accueil__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Revelation au defilement ---
   Grammaire reprise mot pour mot de Nos valeurs : le titre se leve derriere sa
   ligne, le reste monte en cascade. Le selecteur .capsule-activites-accueil est
   ajoute a la liste observee dans capsule-s.js ; sans cela, la classe
   capsule-js masquerait un contenu que rien ne reveillerait. */

.capsule-js .capsule-activites-accueil .capsule-activites-accueil__titre {
	clip-path: inset(100% 0 -18% 0);
}

.capsule-js .capsule-activites-accueil .wp-block-separator,
.capsule-js .capsule-activites-accueil .capsule-activites-accueil__chapeau,
.capsule-js .capsule-activites-accueil .capsule-activite-vignette,
.capsule-js .capsule-activites-accueil .capsule-activites-accueil__lien {
	opacity: 0;
}

.capsule-js .capsule-activites-accueil.est-visible .capsule-activites-accueil__titre {
	animation: capsule-leve-titre 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.capsule-js .capsule-activites-accueil.est-visible .wp-block-separator {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s both;
}

.capsule-js .capsule-activites-accueil.est-visible .capsule-activites-accueil__chapeau {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.24s both;
}

.capsule-js .capsule-activites-accueil.est-visible .capsule-activite-vignette {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.capsule-js .capsule-activites-accueil.est-visible .capsule-activite-vignette:nth-child(1) { animation-delay: 0.34s; }
.capsule-js .capsule-activites-accueil.est-visible .capsule-activite-vignette:nth-child(2) { animation-delay: 0.42s; }
.capsule-js .capsule-activites-accueil.est-visible .capsule-activite-vignette:nth-child(3) { animation-delay: 0.50s; }
.capsule-js .capsule-activites-accueil.est-visible .capsule-activite-vignette:nth-child(4) { animation-delay: 0.58s; }

.capsule-js .capsule-activites-accueil.est-visible .capsule-activites-accueil__lien {
	animation: capsule-monte 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s both;
}