/*
Theme Name: Jennifer Bouyol
Theme URI: https://www.jenniferbouyol.fr/
Description: Theme enfant de Hello Elementor. Porte la charte du cabinet : les deux polices servies depuis le serveur, la palette relevee au rendu, et les regles d'accessibilite.
Author: Quentin POLLET
Template: hello-elementor
Version: 1.0.0
Text Domain: jennifer-bouyol
*/

/* ==========================================================================
   1. Les polices, servies depuis le serveur

   Rozha One n'existe QU'EN 400 : demander d'autres graisses fabrique de la
   fausse graisse. Raleway est chargee en 400, 500, 600 et 700, les seules
   employees. Playfair Display et Montserrat, presentes sur l'ancien site,
   ne sont pas reprises : la premiere n'y etait jamais appliquee.
   ========================================================================== */

@font-face {
	font-family: 'Rozha One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('polices/ro-400.woff2') format('woff2');
}
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('polices/ra-400.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('polices/ra-600.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('polices/ra-700.woff2') format('woff2'); }

/* ==========================================================================
   2. La palette, relevee au RENDU de son site (pas dans le code source)

   Le bordeaux #BF0711 qu'on trouve 17 fois dans le code de Leadpages n'est
   applique nulle part : il n'existe pas ici.

   ATTENTION, mesure du 08/09/2026 : son site actuel ecrit en #8AA494 sur
   blanc (2,69:1) et en #B8C5B9 sur blanc (1,79:1). 159 textes sur 237 sont
   sous le seuil. Le sauge est donc une couleur d'APLAT, jamais d'encre.
   Pour ecrire en vert : --vert-texte (6,55:1) et --vert-fonce (9,67:1).
   ========================================================================== */

:root {
	--sauge:        #8AA494;   /* le vert du logo. APLAT SEULEMENT */
	--sauge-clair:  #B8C5B9;   /* decor seulement : 1,79:1 sur blanc */
	--vert-texte:   #4E6256;   /* 6,55:1 sur blanc, 6,13:1 sur beige */
	--vert-fonce:   #39483F;   /* 9,67:1 sur blanc. Titres et boutons */
	--beige:        #F9F7F4;   /* fonds de bloc */
	--encre:        #272018;   /* texte courant, 16,08:1 sur blanc */
	--gris:         #6B6D71;   /* texte secondaire, 5,18:1 sur blanc */
	--blanc:        #FFFFFF;

	--titre: 'Rozha One', Georgia, 'Times New Roman', serif;
	--texte: 'Raleway', -apple-system, 'Segoe UI', Roboto, sans-serif;

	--largeur: 1140px;
	--rythme: 1.7;
}

/* ==========================================================================
   3. Fondations
   ========================================================================== */

body {
	font-family: var(--texte);
	font-size: 1.0625rem;
	line-height: var(--rythme);
	color: var(--encre);
	background: var(--blanc);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--titre);
	font-weight: 400;         /* Rozha One n'a que le 400 */
	line-height: 1.18;
	color: var(--vert-fonce);
	letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
h4 { font-family: var(--texte); font-weight: 700; font-size: 1.1rem; color: var(--encre); }

/* Textes courants justifies, avec cesure : demande de Quentin, etendue aux
   sites livres. Sans hyphens, une colonne etroite se creuse de blancs. */
p, li {
	text-align: justify;
	hyphens: auto;
}
/* Ce qui ne se justifie pas : les titres, les intitules, le pied de page. */
h1, h2, h3, h4, h5, h6,
.jb-surtitre, .jb-chapo-centre,
#site-footer p, #site-footer li,
.elementor-widget-button, label, caption, th, figcaption {
	text-align: inherit;
	hyphens: manual;
}

a { color: var(--vert-texte); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--vert-fonce); }

/* Un lien deja visite reprend la couleur du theme, sinon le navigateur
   impose son violet et le contraste n'est plus celui qu'on a mesure. */
a:visited { color: var(--vert-texte); }

strong, b { font-weight: 700; color: var(--encre); }

/* ==========================================================================
   4. Accessibilite : le plancher, pas une option
   ========================================================================== */

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

.jb-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--vert-fonce);
	color: var(--blanc);
	padding: 0.8rem 1.2rem;
	font-weight: 600;
	text-decoration: none;
}
.jb-evitement,
.jb-evitement:link,
.jb-evitement:visited,
.jb-evitement:focus {
	color: var(--blanc);          /* 9,67:1. La regle « a { color } » gagnait
	                                 sinon, et le lien sortait a 1,48:1. */
}
.jb-evitement:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* ==========================================================================
   5. Aplats et blocs
   ========================================================================== */

.jb-aplat-sauge {
	background: var(--sauge);
	color: var(--encre);          /* 5,99:1 : la seule encre admise sur le sauge */
}
.jb-aplat-sauge h1, .jb-aplat-sauge h2, .jb-aplat-sauge h3 { color: var(--vert-fonce); }

.jb-aplat-beige { background: var(--beige); color: var(--encre); }

.jb-aplat-fonce { background: var(--vert-fonce); color: var(--blanc); }   /* 9,67:1 */
.jb-aplat-fonce h1, .jb-aplat-fonce h2, .jb-aplat-fonce h3, .jb-aplat-fonce a { color: var(--blanc); }

.jb-surtitre {
	font-family: var(--texte);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vert-texte);
	margin-bottom: 0.6rem;
}

/* ==========================================================================
   6. Boutons et champs

   Une bordure de champ est un composant d'interface : elle doit tenir 3:1
   (WCAG 1.4.11). Le sauge est a 2,69:1 sur blanc, donc il ne peut pas non
   plus servir de bordure de champ. C'est --vert-texte qui la porte.
   ========================================================================== */

/* ATTENTION. « _css_classes » sur un widget pose la classe sur le DIV
   englobant (.elementor-widget), pas sur le <a class="elementor-button">.
   Peindre « .jb-bouton » peignait donc un cadre autour du bouton, et
   Elementor gardait sa propre couleur a l'interieur : bouton sauge clair
   avec du texte gris, dans un cadre vert. Vu sur la capture, invisible
   pour une sonde. Il faut viser l'element, pas son conteneur. */
/* 🔴 LA COULEUR DES BOUTONS NE SE POSE PAS ICI. Elementor la reimprime en
   <style> inline APRES cette feuille, depuis la couleur « accent » du kit :
   a specificite egale, c'est lui qui parle en dernier. Une regle de couleur
   ecrite ici donnerait l'illusion de proteger sans rien peindre. Elle vit
   dans scripts/kit-elementor.php, ou l'accent porte #4E6256 (6,55:1).
   Ici : la forme seulement. */
.elementor-button,
button, input[type="submit"] {
	font-family: var(--texte);
	font-weight: 600;
	border: 2px solid transparent;   /* posee des le repos : sinon le bouton
	                                    saute de 2 px au survol */
	border-radius: 3px;
	padding: 0.85rem 1.9rem;
	text-decoration: none;
	transition: background-color .18s ease;
}
button:hover, input[type="submit"]:hover {
	background: var(--vert-fonce);
	color: var(--blanc);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
	font-family: var(--texte);
	font-size: 1rem;
	color: var(--encre);
	background: var(--blanc);
	border: 1px solid var(--vert-texte);
	border-radius: 3px;
	padding: 0.7rem 0.9rem;
	width: 100%;
}
label { font-weight: 600; color: var(--encre); display: block; margin-bottom: 0.3rem; }

/* ==========================================================================
   7. Images et media
   ========================================================================== */

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

/* ==========================================================================
   8. Telephone et tablette
   ========================================================================== */

@media (max-width: 767px) {
	body { font-size: 1rem; }
	p, li { hyphens: auto; }
	.jb-bouton, .elementor-button, button, input[type="submit"] {
		display: inline-block;
		min-height: 44px;          /* cible tactile */
	}
}

/* ==========================================================================
   9. L'en-tete

   Les classes viennent d'Elementor. Rappel mesure : un CONTENEUR porte sa
   classe par « css_classes », un WIDGET par « _css_classes ».
   ========================================================================== */

.jb-entete {
	background: var(--blanc);
	border-bottom: 1px solid #E6EAE7;
}

.jb-entete .hfe-site-logo-img { display: block; }

/* Le menu. HFE peint ses liens a sa propre couleur : on la reprend ici,
   sinon le contraste mesure n'est pas celui qui est affiche. */
.jb-menu .hfe-nav-menu a.hfe-menu-item,
.jb-menu .hfe-nav-menu a.hfe-sub-menu-item {
	font-family: var(--texte);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--vert-texte);        /* 6,55:1 */
	padding: 0.5rem 0.9rem;
	text-decoration: none;
}
.jb-menu .hfe-nav-menu a.hfe-menu-item:hover,
.jb-menu .hfe-nav-menu .current-menu-item > a.hfe-menu-item {
	color: var(--vert-fonce);        /* 9,67:1 */
}
/* 🔴 PAS de « box-shadow » ici. La page courante portait DEUX marqueurs : ce
   trait-la, pose sur toute la largeur du lien (padding compris), et le trait
   « ::after » de la section 19.5, rentre de 14 px. Deux traits de longueurs
   differentes sous le meme mot : c'est ce que Quentin a vu comme un « double
   survol ». Le marqueur de la page courante est le « ::after », et lui seul.
   Le trait reste bien present, l'information n'est pas portee par la seule
   couleur. */

.jb-bouton-entete .elementor-button { white-space: nowrap; }

/* ==========================================================================
   10. Le pied de page
   ========================================================================== */

.jb-pied {
	background: var(--beige);
	border-top: 3px solid var(--sauge);
}
.jb-pied-col p { text-align: left; }
/* Meme piege : la classe est sur le wrapper, le titre est dedans. */
.jb-pied-titre .elementor-heading-title {
	font-family: var(--texte);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vert-texte);
	line-height: 1.4;
}
.jb-pied-titre { margin-bottom: 0.7rem; }
.jb-menu-pied .hfe-nav-menu a.hfe-menu-item {
	font-family: var(--texte);
	font-size: 0.95rem;
	color: var(--vert-texte);
	padding: 0.25rem 0;
}
.jb-menu-pied .hfe-nav-menu a.hfe-menu-item:hover { color: var(--vert-fonce); }

.jb-pied-bas {
	background: var(--beige);
	border-top: 1px solid #E6EAE7;
}
.jb-copyright, .jb-copyright p {
	text-align: center;
	font-size: 0.85rem;
	color: var(--gris);              /* 4,85:1 sur le beige */
	margin: 0;
}

/* ==========================================================================
   11. Telephone : le menu passe sous le logo
   ========================================================================== */

/* ⚠️ Le « width: 100% !important » qui vivait ici ecrasait les largeurs par
   taille d'ecran posees dans entete-pied.php (48 % en tablette) : le pied a
   quatre colonnes s'empilait en quatre lignes des 880 px. Elementor les gere,
   on ne les force plus. */
@media (max-width: 880px) {
	.jb-entete { row-gap: 12px; }
}

/* ==========================================================================
   12. En-tete sur deux lignes en tablette

   Le retour a la ligne est pilote par Elementor (variable --flex-wrap, reglee
   dans scripts/entete-pied.php) : une media query « flex-wrap » ecrite ici ne
   l'atteint pas. On ne garde que l'ordre des elements.
   ========================================================================== */

@media (max-width: 1000px) {
	.jb-entete .jb-menu { order: 2; }
	.jb-entete .jb-bouton-entete { order: 3; }
}

/* ==========================================================================
   13. Le bouton burger, et les liens du pied
   ========================================================================== */

.jb-menu .hfe-nav-menu__toggle,
.jb-menu button.hfe-nav-menu__toggle {
	color: var(--vert-fonce);
	background: transparent;
	border: 2px solid var(--vert-texte);   /* 6,55:1 : un controle doit tenir 3:1 */
	border-radius: 3px;
	padding: 0.45rem 0.6rem;
	min-height: 44px;
	min-width: 44px;
}
.jb-menu .hfe-nav-menu-icon svg,
.jb-menu .hfe-nav-menu-icon i { color: var(--vert-fonce); fill: var(--vert-fonce); }

.jb-liens-pied p { text-align: left; line-height: 2.1; margin: 0; }
.jb-liens-pied a { color: var(--vert-texte); }
.jb-liens-pied a:hover { color: var(--vert-fonce); }

/* ==========================================================================
   14. Les sections de contenu
   ========================================================================== */

.jb-section h2 { margin-bottom: 1.1rem; }
.jb-section h3 { margin-bottom: .5rem; }

/* L'accroche */
.jb-h1 .elementor-heading-title { margin-bottom: .4rem; }
.jb-chapo p {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--vert-texte);      /* 6,55:1 */
	text-align: left;
	max-width: 34ch;
	margin-bottom: 1.6rem;
}
.jb-heros-image img, .jb-portrait img { border-radius: 4px; }

/* Les listes : la puce est un petit disque vert, pas une pastille sauge
   (2,69:1 : trop clair pour se distinguer du fond). */
.jb-liste ul { list-style: none; padding-left: 0; margin: 0 0 1.4rem; }
.jb-liste li {
	position: relative;
	padding-left: 1.65rem;
	margin-bottom: .7rem;
	text-align: justify;
	hyphens: auto;
}
.jb-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--vert-texte);
}

/* La phrase qui ponctue une section */
.jb-phrase {
	font-family: var(--titre);
	font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
	line-height: 1.3;
	color: var(--vert-fonce);      /* 9,67:1 */
	text-align: left;
	border-left: 4px solid var(--sauge);
	padding-left: 1.1rem;
	margin: 1.6rem 0 1.8rem;
	hyphens: manual;
}

/* La citation */
.jb-citation {
	margin: 1.6rem 0 0;
	padding: 1.4rem 1.6rem;
	background: var(--blanc);
	border-left: 4px solid var(--sauge);
	border-radius: 3px;
}
.jb-citation p {
	font-family: var(--titre);
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--vert-fonce);
	text-align: left;
	margin: 0 0 .6rem;
	hyphens: manual;
}
.jb-citation cite {
	font-family: var(--texte);
	font-style: normal;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);            /* 5,18:1 */
}

/* Les trois etapes */
.jb-etape {
	background: var(--beige);
	border-top: 3px solid var(--sauge);
	border-radius: 3px;
	padding: 1.5rem 1.4rem;
}
.jb-etape h3 { font-size: 1.2rem; }
.jb-etape p { text-align: left; margin: 0; }

/* L'appel final */
/* 🔴🔴 REGLE GENERALE DE CE SITE, apprise ici a ses depens.
   Elementor REIMPRIME les styles de widget du kit dans un <style> inline
   place APRES la feuille du theme. Une regle du theme a specificite EGALE
   perd donc toujours, quel que soit l'ordre des fichiers.
   Ici : « .jb-appel .elementor-heading-title » (0,2,0) contre l'inline
   « .elementor-widget-heading .elementor-heading-title » (0,2,0). Le titre
   sortait a 1:1, vert fonce sur vert fonce : INVISIBLE.
   Pour gagner, il faut TROIS classes : « .bloc .elementor-widget-X .cible ».
   Et un titre invisible ne se voit pas sur une capture, il se mesure. */
.jb-appel { background: var(--vert-fonce); }       /* blanc dessus : 9,67:1 */
.jb-appel .elementor-widget-heading .elementor-heading-title,
.jb-appel .elementor-widget-text-editor p,
.jb-appel h2,
.jb-appel p { color: var(--blanc); }
.jb-appel p { max-width: 52ch; }

/* Telephone : les rangees passent en colonne, deja regle cote Elementor.
   Ici on rend la marge des sections respirable. */
@media (max-width: 767px) {
	.jb-chapo p { max-width: none; }
	.jb-etape { padding: 1.2rem 1.1rem; }
}

/* ==========================================================================
   15. Les blocs des pages interieures
   ========================================================================== */

/* Le chapo pleine largeur de la page contact : le chapo du heros est bride a
   34ch pour tenir dans sa colonne, celui-ci n'a pas de colonne. */
.jb-chapo-large {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--vert-texte);      /* 6,55:1 */
	text-align: left;
	max-width: 62ch;
	margin-bottom: 0;
}

/* --- Les etapes numerotees (comment je fonctionne) ---------------------- */

.jb-etape-longue {
	border-left: 3px solid var(--sauge);
	background: var(--blanc);
	margin-bottom: 1.1rem;
	border-radius: 0 3px 3px 0;
}
.jb-num {
	font-family: var(--titre);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--sauge);           /* 2,69:1 : DECORATIF. Le numero est repete
	                                  en toutes lettres dans le titre juste en
	                                  dessous, aucune information n'est portee
	                                  par cette couleur seule. */
	margin: 0 0 .2rem;
	text-align: left;
}
.jb-num-bloc { margin-bottom: 0; }
.jb-etape-longue p { text-align: left; }
.jb-etape-longue p:last-child { margin-bottom: 0; }

/* --- Le portrait et la biographie --------------------------------------- */

.jb-bio .jb-portrait img { border-radius: 4px; }
.jb-bio-texte h3 { margin-top: 1.6rem; }
.jb-bio-texte h3:first-of-type { margin-top: 0; }

/* --- Le tarif ------------------------------------------------------------ */

.jb-tarif {
	background: var(--blanc);
	border: 2px solid var(--sauge);
	border-radius: 4px;
	padding: 1.6rem 1.2rem;
	text-align: center;
}
.jb-tarif-montant {
	font-family: var(--titre);
	font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
	line-height: 1;
	color: var(--vert-fonce);      /* 9,67:1 */
	text-align: center;
	margin: 0 0 .4rem;
}
.jb-tarif-detail {
	text-align: center;
	color: var(--vert-texte);      /* 6,55:1 */
	margin: 0;
	font-weight: 600;
}
.jb-tarif-modalites h3:first-of-type { margin-top: 0; }

/* --- Les questions frequentes -------------------------------------------- */

.jb-faq-item {
	background: var(--blanc);
	border-left: 3px solid var(--sauge);
	border-radius: 0 3px 3px 0;
	margin-bottom: 1rem;
}
.jb-faq-item p { text-align: left; }
.jb-question .elementor-heading-title { color: var(--vert-fonce); }  /* 9,67:1 */

/* --- Les coordonnees ------------------------------------------------------ */

.jb-coord {
	background: var(--beige);
	border-top: 3px solid var(--sauge);
	border-radius: 3px;
	padding: 1.4rem 1.5rem;
	margin-bottom: 1.4rem;
}
.jb-coord-titre .elementor-heading-title {
	font-family: var(--texte);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vert-texte);      /* 6,13:1 sur beige */
	margin-bottom: .6rem;
}
.jb-coord p { text-align: left; margin-bottom: .5rem; }
.jb-coord p:last-child { margin-bottom: 0; }
.jb-lien-fort, .jb-coord-fort {
	font-family: var(--titre);
	font-size: 1.28rem;
	line-height: 1.25;
	color: var(--vert-fonce);      /* 9,45:1 sur beige */
	word-break: break-word;        /* l'adresse e-mail fait 32 caracteres */
}
.jb-lien-fort:hover { color: var(--vert-texte); text-decoration: underline; }
.jb-coord-note { font-size: .93rem; color: var(--encre); }

.jb-horaires { width: 100%; border-collapse: collapse; }
.jb-horaires th, .jb-horaires td {
	padding: .28rem 0;
	font-size: .97rem;
	border-bottom: 1px solid rgba(78, 98, 86, .18);
}
.jb-horaires th { text-align: left; font-weight: 600; color: var(--encre); }
.jb-horaires td { text-align: right; color: var(--vert-texte); }  /* 6,55:1 */
.jb-horaires tr:last-child th, .jb-horaires tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   16. Le formulaire de contact

   🔴🔴 A POIDS EGAL, C'EST FORMINATOR QUI GAGNE. Sa feuille est imprimee dans
   le CORPS de la page, pendant le rendu du raccourci, donc APRES le <style>
   du <head>. Il faut peser strictement PLUS, pas autant. Les selecteurs
   ci-dessous sont longs pour cette raison, pas par gout.
   ========================================================================== */

.jb-formulaire { max-width: 700px; }

/* Les champs. Le selecteur du plugin pese (0,5,0), on passe a (0,6,0). */
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-input,
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-textarea {
	font-family: var(--texte);
	font-size: 1rem;
	color: var(--encre);
	background: var(--blanc);
	border: 1px solid var(--vert-texte);   /* le sauge tombe a 2,69:1, sous le
	                                          seuil de 3:1 des composants (WCAG
	                                          1.4.11) : une bordure de champ est
	                                          un composant, pas un decor. */
	border-radius: 3px;
	padding: .7rem .9rem;
}

/* 🔴 Le contour de focus est ETEINT par le plugin, avec un selecteur a (0,6,0).
   Les champs n'avaient AUCUN repere au clavier. On repasse au-dessus en
   (0,6,1) : un element en plus, ou une classe doublee. */
.jb-formulaire .forminator-ui.forminator-custom-form input.forminator-input:focus,
.jb-formulaire .forminator-ui.forminator-custom-form textarea.forminator-textarea:focus,
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-input.forminator-input:focus,
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-textarea.forminator-textarea:focus {
	outline: 3px solid var(--vert-fonce);
	outline-offset: 2px;
	border-color: var(--vert-fonce);
}

.jb-formulaire .forminator-ui.forminator-custom-form .forminator-label {
	font-family: var(--texte);
	font-weight: 600;
	color: var(--encre);           /* 16,08:1 */
	font-size: .97rem;
}
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-required {
	color: var(--vert-texte);      /* 6,55:1. L'asterisque rouge du plugin
	                                  tombe a 3,9:1 sur blanc. */
}
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-error-message {
	color: #A02020;                /* 6,29:1 sur blanc */
	font-weight: 600;
}

/* Le bouton. Le selecteur du plugin pese 4 classes et passe apres la charte :
   il faut monter a 5. */
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit {
	background: var(--vert-texte);  /* 6,55:1 avec du blanc dessus */
	color: var(--blanc);
	font-family: var(--texte);
	font-weight: 600;
	border: 2px solid transparent;
	border-radius: 3px;
	padding: .85rem 1.9rem;
	min-height: 48px;
}
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:hover {
	background: var(--vert-fonce);  /* 9,67:1 */
}
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:focus-visible {
	outline: 3px solid var(--vert-fonce);
	outline-offset: 3px;
}

/* La case de consentement. La coche du plugin est un caractere pose en
   ::before, colore dans son bleu meme en mode « theme ». */
.jb-formulaire .forminator-checkbox .forminator-checkbox-box {
	border-color: var(--vert-texte);
	border-radius: 2px;
}
.jb-formulaire .forminator-checkbox input:checked ~ .forminator-checkbox-box,
.jb-formulaire .forminator-checkbox input:checked + .forminator-checkbox-box {
	background: var(--vert-texte);
	border-color: var(--vert-texte);
}
.jb-formulaire .forminator-checkbox input:checked ~ .forminator-checkbox-box::before,
.jb-formulaire .forminator-checkbox input:checked + .forminator-checkbox-box::before {
	color: var(--blanc);
}
.jb-formulaire .forminator-checkbox input:focus-visible ~ .forminator-checkbox-box,
.jb-formulaire .forminator-checkbox input:focus-visible + .forminator-checkbox-box {
	outline: 3px solid var(--vert-fonce);
	outline-offset: 2px;
}
.jb-formulaire .forminator-consent,
.jb-formulaire .forminator-consent span {
	color: var(--encre);
	font-size: .95rem;
	line-height: 1.55;
}
.jb-formulaire .forminator-consent a { color: var(--vert-texte); text-decoration: underline; }

/* Le message de remerciement. */
.jb-formulaire .forminator-response-message.forminator-success {
	background: var(--beige);
	border-left: 4px solid var(--vert-texte);
	color: var(--encre);
	padding: 1.1rem 1.3rem;
	border-radius: 0 3px 3px 0;
}

/* --- Telephone ------------------------------------------------------------ */

@media (max-width: 767px) {
	.jb-etape-longue { padding: 1.1rem 1.2rem; }
	.jb-faq-item { padding: 1.1rem 1.2rem .2rem; }
	.jb-coord { padding: 1.1rem 1.2rem; }
	.jb-chapo-large { max-width: none; }
	.jb-num { font-size: 1.8rem; }
}

/* Le consentement remis en une seule etiquette (voir functions.php).
   La case doit rester alignee en haut : la phrase fait deux lignes. */
.jb-formulaire .jb-consent {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	cursor: pointer;
	padding: .2rem 0;
}
.jb-formulaire .jb-consent .forminator-checkbox-box { flex: 0 0 auto; margin-top: .18rem; }
.jb-formulaire .jb-consent-texte {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--encre);           /* 16,08:1 */
	font-weight: 400;
}
.jb-formulaire .forminator-consent__label {
	margin: .35rem 0 0 1.9rem;
	font-size: .95rem;
}
.jb-formulaire .forminator-consent__label a {
	color: var(--vert-texte);      /* 6,55:1 */
	text-decoration: underline;
}
.jb-formulaire .forminator-consent__label a:hover { color: var(--vert-fonce); }

/* 🔴 Les LIENS du bloc d'appel, oublies au premier passage.
   « .jb-appel » colorait les titres et les paragraphes en blanc, mais pas les
   liens : le numero de telephone sortait en #4E6256 sur #39483F, soit 1,48:1.
   Un texte a peu pres illisible, et personne ne le voit sur une capture — le
   vert sur vert foncé se devine encore. C'est la mesure qui l'a trouve.
   Trois classes, parce qu'Elementor reimprime la couleur des liens du kit
   dans un <style> inline place APRES cette feuille. */
.jb-appel .elementor-widget-text-editor a,
.jb-appel .elementor-widget-heading a,
.jb-appel a {
	color: var(--blanc);           /* 9,67:1 sur #39483F */
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jb-appel .elementor-widget-text-editor a:hover,
.jb-appel a:hover { color: var(--sauge-clair); }   /* 6,92:1 sur #39483F */
.jb-appel a:focus-visible { outline-color: var(--blanc); }

/* 🔴 Le consentement debordait de 623 px sur un telephone.
   Cause : « min-width: auto », la valeur PAR DEFAUT d'un element flex. La
   phrase fait 897 px d'un seul tenant tant qu'on ne l'autorise pas a se
   couper, et elle pousse son etiquette hors de l'ecran. Le remede n'est pas
   une largeur, c'est « min-width: 0 » : il rend a la phrase le droit de
   revenir a la ligne. Mesure du 08/09 : 623 px a 390, 245 px a 768. */
.jb-formulaire .jb-consent,
.jb-formulaire .forminator-checkbox__wrapper {
	min-width: 0;
	max-width: 100%;
}
.jb-formulaire .jb-consent-texte {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Il restait 76 px de debordement, a toutes les largeurs. Cause lue dans la
   chaine des parents, pas devinee : « .forminator-checkbox__wrapper » est un
   conteneur FLEX en « nowrap » chez Forminator. L'etiquette y prend toute la
   largeur, et le lien de politique de confidentialite, place sur la MEME
   ligne, part a x = 380 sur un ecran de 390. On autorise le retour a la ligne
   et on donne a chacun une ligne entiere. */
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-checkbox__wrapper {
	flex-wrap: wrap;
}
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-checkbox__wrapper > .jb-consent,
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-consent__label {
	flex: 1 1 100%;
}

/* --- Deux corrections vues a l'oeil, que la mesure ne signalait pas -------- */

/* 1. Le lien de politique de confidentialite se retrouvait A DROITE de la
   phrase, sur la meme ligne, coupe en deux. Il ne debordait pas — donc aucune
   sonde ne s'en plaignait — mais le bloc etait illisible. La cause est la
   meme que le debordement precedent : le conteneur de Forminator est en flex.
   Ici on tranche pour de bon : ce conteneur redevient un bloc, et chaque
   element prend sa ligne. */
/* Specificite : la regle de Forminator pese (0,4,0) et sa feuille est imprimee
   APRES la charte. A poids egal c'est elle qui parle en dernier — mesure du
   08/09 : « display: block » ecrit ici restait sans effet. On passe a (0,5,1)
   en ajoutant l'element « form » et l'attribut « data-design ». */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-checkbox__wrapper {
	display: block;
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-consent__label {
	margin: .45rem 0 0 1.9rem;
	text-align: left;
}

/* 2. Le tableau des horaires heritait des bordures et du fond gris du theme
   parent : quatre colonnes grises au milieu d'une carte beige. On ne garde
   que le filet horizontal, qui suffit a lire. */
.jb-coord .jb-horaires,
.jb-coord .jb-horaires th,
.jb-coord .jb-horaires td,
.jb-coord .jb-horaires tr {
	background: transparent;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}
.jb-coord .jb-horaires th,
.jb-coord .jb-horaires td { padding-left: 0; padding-right: 0; }

/* Le bouton du bloc d'appel, deux corrections vues a l'oeil.
   1. Il heritait du soulignement pose sur les liens du bloc : un bouton
      souligne n'est plus un bouton.
   2. Vert moyen sur vert fonce, il se detachait a peine du fond. Retourne en
      blanc, il porte 9,67:1 de texte et se voit de loin. */
.jb-appel .elementor-widget-button .elementor-button,
.jb-appel a.elementor-button {
	background: var(--blanc);
	color: var(--vert-fonce);      /* 9,67:1 */
	text-decoration: none;
}
.jb-appel .elementor-widget-button .elementor-button:hover,
.jb-appel a.elementor-button:hover {
	background: var(--sauge-clair);
	color: var(--vert-fonce);      /* 7,74:1 sur #B8C5B9 */
}
.jb-appel .elementor-widget-button .elementor-button:focus-visible {
	outline: 3px solid var(--blanc);
	outline-offset: 3px;
}

/* ==========================================================================
   17. Fidélité à son site actuel

   Comparaison mesurée le 08/09/2026 entre jenniferbouyol.fr et ce site.
   Ce qui collait déjà : les deux polices (Rozha One, Raleway), la longueur de
   ligne du texte courant (56 caractères des deux côtés), la palette.
   Ce qui s'en écartait, et se corrige ici.
   ========================================================================== */

/* 1. LA FORME DES BOUTONS. Les siens sont des PILULES (border-radius 10000px
   chez Leadpages), les miens étaient presque carrés (3 px). C'est le détail
   qui se reconnaît au premier coup d'oeil, avant même la couleur.
   La couleur, elle, ne se reprend PAS : son bouton d'accueil est blanc sur
   sauge, soit 2,69:1. On garde la forme, on corrige le contraste. */
.elementor-button,
button, input[type="submit"],
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit {
	border-radius: 999px;
	padding-left: 2.1rem;
	padding-right: 2.1rem;
}

/* 2. LE SAUGE EN APLAT. C'est sa couleur signature : sur sa page « comment je
   fonctionne », #8AA494 couvre la plus grande surface de la page. Il avait
   disparu de ce site, réduit à des filets — techniquement conforme, mais on
   n'y reconnaissait plus son site.
   Il revient en aplat, avec de l'ENCRE dessus (5,99:1) et non du blanc
   (2,69:1, ce qu'elle fait aujourd'hui). */
.jb-aplat-sauge {
	background: var(--sauge);
	color: var(--encre);
}
.jb-aplat-sauge .elementor-widget-heading .elementor-heading-title,
.jb-aplat-sauge h2 {
	color: var(--vert-fonce);      /* 3,66:1, et ces titres font 43 px : le
	                                  seuil des grands textes est 3:1 */
}
.jb-aplat-sauge .elementor-widget-heading h3.elementor-heading-title,
.jb-aplat-sauge h3,
.jb-aplat-sauge .elementor-widget-text-editor p,
.jb-aplat-sauge p,
.jb-aplat-sauge li {
	color: var(--encre);           /* 5,99:1 : un h3 fait 19 px, il lui faut 4,5 */
}
/* Les blocs blancs posés sur l'aplat gardent leurs propres couleurs. */
.jb-aplat-sauge .jb-tarif,
.jb-aplat-sauge .jb-citation,
.jb-aplat-sauge .jb-faq-item {
	background: var(--blanc);
}
.jb-aplat-sauge .jb-tarif .jb-tarif-montant { color: var(--vert-fonce); }
/* La barre des phrases de ponctuation : le sauge sur du sauge ne se voit pas. */
.jb-aplat-sauge .jb-phrase {
	border-left-color: var(--vert-fonce);
	color: var(--vert-fonce);
}
/* Un bouton vert moyen sur du sauge ne se détache pas (2,37:1, sous le seuil
   de 3:1 des composants). Sur l'aplat, il passe en vert profond. */
.jb-aplat-sauge .elementor-widget-button .elementor-button {
	background: var(--vert-fonce);   /* 3,66:1 contre le sauge, blanc dessus 9,67:1 */
	color: var(--blanc);
}
.jb-aplat-sauge .elementor-widget-button .elementor-button:hover {
	background: var(--encre);
}
.jb-aplat-sauge a { color: var(--vert-fonce); }
.jb-aplat-sauge .jb-liste li::before { background: var(--vert-fonce); }

/* ==========================================================================
   18. Les filets qui structurent doivent SE VOIR

   Mesuré le 08/09 par `cartes-invisibles.mjs` : les filets sauge qui délimitent
   les étapes, les questions et les cartes de valeurs pèsent 2,69:1 sur blanc et
   2,49:1 sur beige. Sous le seuil de 3:1 des composants graphiques (WCAG 1.4.11)
   ils ne délimitent rien : on voyait des blocs de texte qui flottaient, pas des
   cartes. Aucune mesure de contraste de TEXTE ne pouvait le signaler — le texte,
   lui, était parfaitement lisible.

   Le sauge reste la couleur signature, en APLAT ; il ne porte plus de structure.
   ========================================================================== */

.jb-etape-longue { border-left-color: var(--vert-texte); }   /* 6,55:1 sur blanc */
.jb-faq-item     { border-left-color: var(--vert-texte); }
.jb-phrase       { border-left-color: var(--vert-texte); }
.jb-citation     { border-left-color: var(--vert-texte); }
.jb-etape        { border-top-color: var(--vert-texte); }
.jb-coord        { border-top-color: var(--vert-texte); }    /* 6,13:1 sur beige */
.jb-tarif        { border-color: var(--vert-texte); }

/* Et sur un aplat sauge, un filet vert moyen retombe à 2,37:1 : il passe au
   vert profond, qui tient 3,66:1 contre le sauge. */
.jb-aplat-sauge .jb-etape-longue,
.jb-aplat-sauge .jb-faq-item,
.jb-aplat-sauge .jb-etape,
.jb-aplat-sauge .jb-tarif { border-color: var(--vert-fonce); }

/* Une carte beige posée sur une section beige n'existe plus. Sur les aplats,
   les cartes reprennent le blanc. */
.jb-aplat-beige .jb-etape,
.jb-aplat-beige .jb-coord,
.jb-aplat-sauge .jb-etape,
.jb-aplat-sauge .jb-coord { background: var(--blanc); }

/* ==========================================================================
   19. LE SITE VIVANT
   Retouche du 09/09/2026. Trois reproches, tous justes : textes pas assez
   respirants, images trop petites face aux blocs de texte, aucun mouvement.
   ========================================================================== */

/* --- 19.1 La respiration du texte ---------------------------------------- */

/* Un bloc de texte se lit s'il a de l'air AUTOUR et ENTRE ses lignes. Le
   rythme passe de 1,7 a 1,8, et les paragraphes gagnent une vraie marge :
   c'est ce qui separe un mur de texte d'un texte qu'on a envie de lire. */
:root { --rythme: 1.8; }

.jb-section p,
.jb-section li {
	line-height: 1.8;
	margin-bottom: 1.25rem;
}

/* Le texte courant est JUSTIFIE, avec cesure. Sans « hyphens », le justifie
   ouvre des rivieres blanches au milieu des lignes et devient moins lisible
   que le drapeau : les deux vont ensemble, toujours. */
.jb-section .elementor-widget-text-editor p,
.jb-etape-longue p,
.jb-faq-item p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: pretty;
}

/* Une ligne de plus de 75 caracteres fatigue l'oeil : il perd le debut de la
   suivante. On borne la mesure du texte courant, sans toucher aux sections
   pleine largeur. */
.jb-section > .e-con-inner > .elementor-widget-text-editor,
.jb-section > .e-con-inner > .elementor-widget-heading {
	max-width: 74ch;
}
.jb-section > .e-con-inner > .jb-liste { max-width: 78ch; }

/* Les titres respirent au-dessus, se collent a ce qu'ils annoncent. */
.jb-section h2 { margin-top: 0; margin-bottom: 1.4rem; letter-spacing: -0.01em; }
.jb-section h3 { margin-top: 2.2rem; margin-bottom: .7rem; }
.jb-section .elementor-widget:first-child h2 { margin-top: 0; }

/* Le surtitre : plus discret, mieux espace. */
.jb-surtitre {
	letter-spacing: .18em;
	font-size: .78rem;
	margin-bottom: .9rem;
}

/* Les sections gagnent de l'air. Une refonte « premium » se joue autant dans
   le vide que dans le plein. */
.jb-section { padding-top: 84px; padding-bottom: 84px; }
.jb-heros   { padding-top: 76px; padding-bottom: 76px; }

/* --- 19.2 Les images, a leur vraie place ---------------------------------- */

/* 🔴 Le reproche exact : « les images sont trop petites quand il y a de gros
   blocs de texte ». Un visuel qui occupe 40 % d'une colonne a cote de 900
   caracteres ne fait pas le poids. On lui donne une hauteur genereuse, un
   ratio stable, et « cover » pour qu'il remplisse sans se deformer. */
.jb-heros-image img,
.jb-heros-visuel img {
	width: 100%;
	height: clamp(320px, 42vw, 520px);
	object-fit: cover;
	object-position: center;
	border-radius: 6px;
	box-shadow: 0 18px 48px -24px rgba(39, 32, 24, .38);
}

/* Le portrait : plus grand, et cadre sur le visage. */
.jb-bio .jb-portrait img,
.jb-portrait img {
	width: 100%;
	height: clamp(340px, 34vw, 480px);
	object-fit: cover;
	object-position: center 22%;
	border-radius: 6px;
}

/* L'image en colonne d'une rangee : elle doit tenir toute la hauteur du texte
   qui l'accompagne, sinon elle flotte au milieu d'un vide. */
.jb-section .elementor-widget-image img {
	border-radius: 6px;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.jb-section .elementor-widget-image:hover img { transform: scale(1.015); }

/* --- 19.3 Les blocs : de la matiere, pas des rectangles ------------------- */

.jb-etape-longue,
.jb-faq-item {
	border-left-width: 4px;
	padding-left: 30px;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .35s ease, border-left-color .35s ease;
}
.jb-etape-longue:hover,
.jb-faq-item:hover {
	transform: translateX(4px);
	box-shadow: 0 10px 30px -18px rgba(39, 32, 24, .34);
	border-left-color: var(--vert-fonce);
}

.jb-etape, .jb-coord, .jb-tarif {
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.jb-etape:hover, .jb-coord:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px -20px rgba(39, 32, 24, .38);
}

/* Le numero d'etape : un vrai reperage visuel, pas un chiffre perdu. */
.jb-num {
	font-size: 2.6rem;
	line-height: .9;
	color: var(--sauge);           /* 2,69:1, DECORATIF : le numero est repete
	                                  en toutes lettres dans le titre juste en
	                                  dessous. Aucune information n'est portee
	                                  par cette couleur seule. */
	margin-bottom: .35rem;
}

/* --- 19.4 Les apparitions au defilement ----------------------------------- */

/* ⚠️ Ces regles ne masquent QUE ce que le script a marque de « jb-anim ».
   Sans JavaScript, aucune classe n'est posee et la page reste entiere.
   Voir theme/js/anim.js : le sens compte plus que l'effet. */
@media (prefers-reduced-motion: no-preference) {
	.jb-anim {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
		            transform .7s cubic-bezier(.2, .7, .3, 1);
		will-change: opacity, transform;
	}
	.jb-anim.jb-vu {
		opacity: 1;
		transform: none;
		/* 🔴 SANS CECI, LE TEXTE PARAIT OMBRE SUR TOUT LE SITE. « will-change »
		   maintient le bloc sur une couche composite meme une fois l'animation
		   finie ; le navigateur y dessine le texte en niveaux de gris au lieu
		   du lissage sous-pixel, et chaque lettre semble doublee d'un halo.
		   On rend la main des que le bloc est pose. Signale le 09/09. */
		will-change: auto;
	}
}

/* À l'impression, tout est visible : sinon on imprime des pages blanches. */
@media print {
	.jb-anim { opacity: 1 !important; transform: none !important; }
}

/* --- 19.5 L'en-tete qui vit ----------------------------------------------- */

.jb-entete {
	position: sticky;
	top: 0;
	z-index: 500;
	transition: box-shadow .3s ease, padding .3s ease, background-color .3s ease;
}
.jb-entete-compacte {
	box-shadow: 0 6px 24px -14px rgba(39, 32, 24, .4);
	backdrop-filter: saturate(140%) blur(6px);
	background: rgba(255, 255, 255, .93);
}
.jb-entete-compacte .hfe-site-logo-img {
	transform: scale(.86);
	transition: transform .3s ease;
}
.jb-entete .hfe-site-logo-img { transition: transform .3s ease; }

/* Le menu : un trait qui se dessine sous le lien survole. Plus fin qu'un
   changement de couleur, et il ne touche pas au contraste du texte. */
.jb-menu .hfe-nav-menu a.hfe-menu-item {
	position: relative;
	transition: color .25s ease;
}
.jb-menu .hfe-nav-menu a.hfe-menu-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--vert-fonce);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}
.jb-menu .hfe-nav-menu a.hfe-menu-item:hover::after,
.jb-menu .hfe-nav-menu .current-menu-item > a.hfe-menu-item::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* --- 19.6 Les boutons ------------------------------------------------------ */

/* ⚠️ La FORME et la COULEUR des boutons vivent dans le kit Elementor, qui
   ecrit « .elementor-kit-5 .elementor-button » en (0,2,0) et bat toute regle
   a une classe ecrite ici. Mesure du 09/09 : « border-radius: 999px » pose
   dans cette feuille restait sans effet. Ici, le MOUVEMENT seulement. */
.elementor-button {
	transition: background-color .28s ease, transform .28s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .28s ease;
}
.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -14px rgba(39, 32, 24, .55);
}
.elementor-button:active { transform: translateY(0); }

/* --- 19.7 Le pied de page -------------------------------------------------- */

.jb-pied { position: relative; }
.jb-pied::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sauge), var(--vert-fonce), var(--sauge));
}
.jb-menu-pied .hfe-nav-menu a.hfe-menu-item,
.jb-liens-pied a {
	transition: color .25s ease, padding-left .25s ease;
}
.jb-menu-pied .hfe-nav-menu a.hfe-menu-item:hover,
.jb-liens-pied a:hover { padding-left: 5px; }

/* --- 19.8 Telephone --------------------------------------------------------- */

@media (max-width: 767px) {
	.jb-section { padding-top: 56px; padding-bottom: 56px; }
	.jb-heros   { padding-top: 44px; padding-bottom: 44px; }
	.jb-heros-image img, .jb-heros-visuel img { height: clamp(220px, 56vw, 320px); }
	.jb-bio .jb-portrait img, .jb-portrait img { height: clamp(260px, 70vw, 360px); }
	/* Le justifie sur une colonne etroite fabrique des trous entre les mots :
	   en dessous de la tablette, on repasse au drapeau. */
	.jb-section .elementor-widget-text-editor p,
	.jb-etape-longue p, .jb-faq-item p { text-align: left; }
	.jb-etape-longue, .jb-faq-item { padding-left: 20px; }
	/* Une en-tete collante sur un petit ecran mange le contenu. */
	.jb-entete { position: static; }
}

/* ==========================================================================
   20. LE FORMULAIRE, SOIGNE

   ⚠️ RAPPEL DE SPECIFICITE, different d'Elementor : la feuille de Forminator
   est imprimee dans le CORPS de la page, pendant le rendu du raccourci, donc
   APRES le style du <head>. A poids egal, c'est elle qui parle en dernier.
   Ses selecteurs pesent (0,4,0) a (0,6,0) : les regles ci-dessous sont longues
   pour cette raison, pas par gout.
   ========================================================================== */

/* Le formulaire vit dans une carte : il se distingue du texte qui le precede
   au lieu de flotter au milieu de la page. */
.jb-formulaire {
	max-width: 720px;
	background: var(--blanc);
	border: 1px solid rgba(78, 98, 86, .22);
	border-radius: 10px;
	padding: 38px 40px 34px;
	box-shadow: 0 20px 54px -34px rgba(39, 32, 24, .42);
}

/* De l'air entre les champs. Serres, ils donnent un air de formulaire
   administratif ; espaces, un air de correspondance. */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-row {
	margin-bottom: 22px;
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-row:last-of-type {
	margin-bottom: 0;
}

/* Les libelles : au-dessus, lisibles, discrets. */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-label {
	font-family: var(--texte);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--vert-texte);      /* 6,55:1 */
	margin-bottom: .5rem;
	display: block;
}

/* Les champs : hauts, calmes, sans bordure criarde au repos. */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-input,
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea {
	font-family: var(--texte);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--encre);
	background: var(--beige);
	border: 1px solid rgba(78, 98, 86, .38);
	border-radius: 6px;
	padding: 14px 16px;
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-input:hover,
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea:hover {
	border-color: var(--vert-texte);
}
/* 🔴 Le plugin ETEINT le contour de focus avec un selecteur a (0,6,0). Les
   champs n'avaient aucun repere au clavier. On repasse au-dessus en (0,6,1) :
   un element en plus. Ne jamais remplacer le contour par une simple ombre :
   en contraste force, l'ombre disparait, le contour non. */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] input.forminator-input:focus,
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] textarea.forminator-textarea:focus {
	outline: 3px solid var(--vert-fonce);
	outline-offset: 2px;
	border-color: var(--vert-fonce);
	background: var(--blanc);
	box-shadow: 0 6px 18px -12px rgba(39, 32, 24, .4);
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea {
	min-height: 168px;
	resize: vertical;
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-input::placeholder,
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea::placeholder {
	color: #6B6D71;                /* 5,18:1 sur beige : un indice se lit aussi */
	opacity: 1;                    /* Firefox l'attenue par defaut */
}

/* Le bouton : pleine largeur sur telephone, genereux sur ordinateur. */
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit {
	background: var(--vert-fonce);   /* blanc dessus : 9,67:1 */
	color: var(--blanc);
	font-family: var(--texte);
	font-weight: 600;
	letter-spacing: .02em;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 16px 40px;
	min-height: 52px;
	margin-top: 6px;
	transition: background-color .28s ease, transform .28s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .28s ease;
}
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:hover {
	background: var(--encre);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -16px rgba(39, 32, 24, .6);
}
.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:focus-visible {
	outline: 3px solid var(--vert-fonce);
	outline-offset: 3px;
}

/* Le consentement : une ligne calme, detachee des champs. */
.jb-formulaire .forminator-field-consent {
	margin-top: 6px;
	padding-top: 20px;
	border-top: 1px solid rgba(78, 98, 86, .18);
}
.jb-formulaire .jb-consent { padding: .3rem 0; }
.jb-formulaire .jb-consent-texte { font-size: .92rem; line-height: 1.6; }
.jb-formulaire .forminator-consent__label { font-size: .92rem; }

/* Le message de remerciement : il doit se voir, c'est la preuve que ca a
   marche. */
.jb-formulaire .forminator-response-message.forminator-success {
	background: var(--beige);
	border: 1px solid var(--vert-texte);
	border-left: 4px solid var(--vert-texte);
	color: var(--encre);
	padding: 18px 22px;
	border-radius: 6px;
	font-size: 1.02rem;
}

@media (max-width: 767px) {
	.jb-formulaire { padding: 24px 20px 22px; border-radius: 8px; }
	.jb-formulaire form.forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit {
		width: 100%;
	}
}

/* ==========================================================================
   21. LE RYTHME DE LA PAGE

   🔴 Ce que la capture a montré et qu'aucune sonde ne mesurait : brider le
   texte à 74 caractères SANS le recentrer laisse une colonne collée à gauche
   et 400 px de vide à droite. La ligne devient lisible, la page devient
   bancale. Le vide n'est pas une panne, c'est le symptôme.
   ========================================================================== */

/* La colonne de texte se centre dans sa section. */
.jb-section > .e-con-inner > .elementor-widget-text-editor,
.jb-section > .e-con-inner > .elementor-widget-heading,
.jb-section > .e-con-inner > .jb-liste,
.jb-section > .e-con-inner > .elementor-widget-button {
	margin-inline: auto;
	width: 100%;
}

/* Une section de texte pur n'a pas besoin de 1140 px : à cette largeur, l'oeil
   perd le début de la ligne suivante. On resserre le contenant lui-même,
   plutôt que de laisser un widget étroit flotter dans un large. */
.jb-section:not(.jb-heros):not(.jb-bio) > .e-con-inner { max-width: 980px; }
.jb-heros > .e-con-inner, .jb-bio > .e-con-inner { max-width: 1140px; }

/* --- Les longues listes passent sur deux colonnes -------------------------
   Huit puces empilées font un mur ; huit puces sur deux colonnes se lisent
   d'un coup d'oeil et remplissent la largeur au lieu de la laisser vide.
   « break-inside » est indispensable : sans lui, une puce se coupe en deux
   entre les colonnes. La classe est posée dans le PHP, jamais devinée ici :
   une liste de trois éléments sur deux colonnes serait ridicule. */
@media (min-width: 900px) {
	.jb-liste-2col ul {
		columns: 2;
		column-gap: 3.2rem;
	}
	.jb-liste-2col li {
		break-inside: avoid;
		page-break-inside: avoid;
		text-align: left;      /* le justifié sur colonne étroite fait des trous */
	}
	.jb-section:has(> .e-con-inner > .jb-liste-2col) > .e-con-inner { max-width: 1140px; }
}

/* --- Deux volets cote a cote --------------------------------------------
   🔴 Une grille posee sur TOUTE une section (« jb-2col », retiree le 09/09)
   rangeait les blocs dans l'ordre du DOM : titre a gauche, paragraphe suivant
   a droite, suite en dessous a gauche. La lecture sautait d'une colonne a
   l'autre au milieu d'un texte suivi. Deux colonnes ne valent que pour des
   blocs INDEPENDANTS, et cela se decide bloc par bloc, dans le PHP. */
.jb-volet h3:first-child { margin-top: 0; }

/* 🔴 48 % + 48 % + 40 px de gouttiere depasse 100 % : les deux volets
   passaient a la ligne et s'empilaient, chacun sur une demi-largeur. Un
   pourcentage ignore la gouttiere ; « calc » la deduit. Mesure du 09/09. */
/* ⚠️ ET LE SELECTEUR VISE « .e-con-inner », PAS LE CONTENEUR.
   Un conteneur Elementor en mode « boxed » emboite un « .e-con-inner » qui
   porte le flex : « .jb-volets > .jb-volet » ne matche donc RIEN, et la regle
   passe inapercue. Mesure du 09/09 : les volets faisaient 460,8 px (48 %) au
   lieu de 460, et 460,8 x 2 + 40 de gouttiere = 961,6 pour 960 disponibles.
   Il manquait 1,6 px, et la ligne se cassait en deux. */
@media (min-width: 1000px) {
	.jb-volets > .e-con-inner > .jb-volet { width: calc(50% - 20px); }
}

/* --- Le héros : l'image tient sa moitié ----------------------------------- */

/* Le reproche exact : « les images sont trop petites quand il y a de gros
   blocs de texte ». Les LARGEURS ne se corrigent pas ici : Elementor les écrit
   dans « post-<id>.css » avec une classe d'élément, et les battre depuis le
   thème demanderait un « !important » qui se retournerait au premier changement
   de mise en page. Elles sont donc changées À LA SOURCE, dans les scripts de
   page (48 / 48 au lieu de 54 / 42). Ici, seulement l'alignement vertical. */
@media (min-width: 1000px) {
	.jb-heros > .e-con-inner { align-items: center; }
}

/* --- Un filet fin entre deux sections de même fond ------------------------- */

/* Deux sections blanches qui se suivent se lisent comme une seule, très
   longue. Un filet d'un pixel suffit à rendre la structure. */
.jb-section + .jb-section:not([class*="aplat"]) { border-top: 1px solid rgba(78, 98, 86, .12); }
.jb-section[class*="aplat"] + .jb-section:not([class*="aplat"]) { border-top: 0; }


/* ==========================================================================
   22. AJUSTEMENT DU RYTHME

   Mesure du 09/09 : l'accueil est passé de 6402 à 8754 px de haut. L'air
   ajouté rendait chaque section respirante et la page entière interminable —
   on scrollait sans jamais arriver. Le bon réglage est entre les deux : c'est
   la HAUTEUR TOTALE qu'il faut regarder, pas seulement l'espace autour d'un
   bloc pris isolément.
   ========================================================================== */

.jb-section { padding-top: 64px; padding-bottom: 64px; }
.jb-heros   { padding-top: 56px; padding-bottom: 64px; }

.jb-section p,
.jb-section li {
	line-height: 1.72;
	margin-bottom: 1rem;
}
.jb-liste li { margin-bottom: .8rem; }
.jb-section h3 { margin-top: 1.8rem; }

/* Les images en colonne (pas seulement celles du héros) méritent la même
   présence : une photo de 456 px de large et 300 de haut à côté de dix puces
   passe pour une vignette. */
.jb-visuel-col img,
.jb-portrait-bloc img {
	width: 100%;
	height: clamp(320px, 34vw, 470px);
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 18px 44px -26px rgba(39, 32, 24, .36);
}

/* La citation, dans la section sauge, ne doit pas flotter seule en bas. */
.jb-citation { margin-top: 1.6rem; }

@media (max-width: 999px) {
	.jb-visuel-col img, .jb-portrait-bloc img { height: clamp(240px, 52vw, 340px); }
}
@media (max-width: 767px) {
	.jb-section { padding-top: 48px; padding-bottom: 48px; }
	.jb-heros   { padding-top: 36px; padding-bottom: 40px; }
}

/* ==========================================================================
   23. FINITIONS MESUREES

   Trois defauts que la capture a montres et que la mesure a confirmes.
   ========================================================================== */

/* 🔴 1. Le formulaire faisait 980 px, pas 720. « .jb-formulaire { max-width }»
   pese (0,1,0) ; Elementor ecrit « max-width: 100% » sur le widget dans
   « post-18.css », charge APRES la feuille du theme. A poids egal, il gagne.
   On passe a (0,3,0) en nommant le widget et sa section. */
/* Poids mesure, pas suppose : Elementor ecrit
   « .e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% } », soit
   (0,4,0) — « .e-con » y compte DEUX fois. Ma premiere version pesait (0,3,0)
   et perdait, quel que soit l'ordre des feuilles. On monte a (0,5,0).
   La sonde « diag-cascade.mjs » affiche desormais le poids de chaque regle :
   c'est en le comptant de tete que je me suis trompe. */
.jb-section.e-con > .e-con-inner > .elementor-widget.jb-formulaire {
	/* Elargi de 720 a 860 px et cale a GAUCHE, sous le titre de la section :
	   centre, il demarrait 130 px a droite du titre et la section se lisait
	   de travers. Mesure du 09/09. */
	max-width: 860px;
	margin-inline: 0 auto;
}

/* 🔴 2. Le texte JUSTIFIE dans une carte etroite creuse des rivieres blanches
   au milieu des lignes : mesure du 09/09, quatre cartes de 219 px de large.
   Le justifie demande de la largeur ; en dessous, le drapeau se lit mieux. */
.jb-coord p,
.jb-etape p,
.jb-tarif p,
.jb-citation p {
	text-align: left;
	hyphens: manual;
}

/* Les coordonnees : deux cartes par ligne sur ordinateur, une sur telephone.
   Le passage a la ligne est pose cote Elementor (option « wrap ») ; ici, la
   largeur qui va avec. */
@media (min-width: 1000px) {
	.jb-coords > .e-con-inner > .jb-coord { width: calc(50% - 14px); }
}

/* L'adresse e-mail : elle se coupe proprement au lieu de deborder ou de
   s'etaler sur trois lignes. */
.jb-lien-fort {
	font-size: 1.14rem;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

/* 🔴 3. Le titre principal etait bride a 74 caracteres comme un paragraphe.
   Un h1 n'a pas la meme mesure qu'un texte courant : il se lit d'un coup
   d'oeil, pas ligne a ligne. */
.jb-h1 .elementor-heading-title { max-width: 20ch; }
.jb-contact-tete .jb-h1 .elementor-heading-title,
.jb-contact-tete > .e-con-inner > .elementor-widget-heading { max-width: none; }
.jb-contact-tete > .e-con-inner { max-width: 1140px; }

/* ==========================================================================
   24. LE JUSTIFIE NE VAUT QU'EN PLEINE LARGEUR

   🔴 Ma regle « le texte des cartes est au drapeau » pesait (0,2,0) et perdait
   contre « .jb-section .elementor-widget-text-editor p { text-align: justify }»
   a (0,3,0). Le texte restait justifie dans des cartes de 219 px : rivieres
   blanches au milieu des lignes, adresse e-mail eclatee en trois morceaux.
   On repasse au-dessus en nommant la section ET la carte.
   ========================================================================== */

.jb-section .jb-coord .elementor-widget-text-editor p,
.jb-section .jb-coord p,
.jb-section .jb-etape .elementor-widget-text-editor p,
.jb-section .jb-etape p,
.jb-section .jb-tarif p,
.jb-section .jb-citation p,
.jb-section .jb-liste-2col li,
.jb-formulaire .jb-consent-texte,
.jb-formulaire .forminator-consent__label {
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* L'adresse e-mail : elle se coupe la ou elle peut, sans espace fabrique. */
.jb-section .jb-coord .jb-lien-fort {
	overflow-wrap: anywhere;
	word-break: normal;
	text-align: left;
}

/* --- Le consentement, aligne sur sa premiere ligne ------------------------ */

/* La case doit se poser en face du DEBUT de la phrase. Centree, elle se
   retrouve au milieu d'un texte de trois lignes et on ne sait plus a quoi
   elle se rapporte. */
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .jb-consent {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.jb-formulaire form.forminator-ui.forminator-custom-form[data-design="default"] .jb-consent .forminator-checkbox-box {
	flex: 0 0 auto;
	margin-top: .2rem;
	align-self: flex-start;
}
/* L'asterisque tombait seul sur une quatrieme ligne. Une espace insecable le
   retient contre le dernier mot. */
.jb-formulaire .jb-consent-texte .forminator-required {
	white-space: nowrap;
	margin-left: .25ch;
}

/* ==========================================================================
   25. L'EN-TETE TIENT SUR UNE LIGNE

   Mesure du 09/09 : logo 150 px, en-tete 187 px de haut, et entre 1000 et
   1200 px de large le menu se cassait en QUATRE lignes. Le logo est ramene a
   86 px cote Elementor ; ici, tout ce qui doit tenir avec.
   ========================================================================== */

.jb-entete > .e-con-inner {
	flex-wrap: nowrap;
	align-items: center;
}

/* Le menu ne passe JAMAIS a la ligne : il se resserre, et s'il ne tient
   vraiment plus, c'est le bouton burger qui prend le relais.
   🔴 UNIQUEMENT AU-DESSUS DU SEUIL DU BURGER. Applique partout, « nowrap » +
   « white-space: nowrap » cassaient le menu DEPLIE du burger : il s'affiche en
   colonne, et « La seance » debordait de 19 px, soit 107 px pour la page
   entiere a 390 px de large. Mesure du 09/09. */
@media (min-width: 1025px) {
	.jb-menu .hfe-nav-menu,
	.jb-menu ul.hfe-nav-menu {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.jb-menu .hfe-nav-menu a.hfe-menu-item {
		padding: 10px 14px;
		font-size: .95rem;
	}
}

/* 🔴 « DOUBLE SURVOL » : la page courante garde son trait en permanence, et
   survoler un autre lien en affichait un SECOND — deux traits pleins, on ne
   savait plus lequel disait quoi. Tant que la souris est dans le menu, le
   trait de la page courante s'efface au profit du lien survole ; elle en
   sort, il revient. Un seul trait plein a la fois. Signale le 09/09. */
.jb-menu .hfe-nav-menu:hover .current-menu-item > a.hfe-menu-item::after {
	opacity: .28;
}
.jb-menu .hfe-nav-menu .current-menu-item > a.hfe-menu-item:hover::after {
	opacity: 1;
}
.jb-menu .hfe-nav-menu a.hfe-menu-item::after { transition: transform .32s cubic-bezier(.2, .7, .3, 1), opacity .25s ease; }

/* 🔴 LE TRAIT DE SURVOL etait pose sur toute la largeur du lien, PADDING
   COMPRIS : il debordait de chaque cote du mot et se lisait comme un defaut.
   On le rentre de la valeur du padding, et on le colle sous le texte. */
.jb-menu .hfe-nav-menu a.hfe-menu-item::after {
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
}

/* Entre 1000 et 1240 px, tout tient encore mais de justesse : on resserre. */
@media (min-width: 1000px) and (max-width: 1240px) {
	.jb-menu .hfe-nav-menu a.hfe-menu-item { padding: 10px 9px; font-size: .9rem; }
	.jb-menu .hfe-nav-menu a.hfe-menu-item::after { left: 9px; right: 9px; }
	.jb-bouton-entete .elementor-button { padding-left: 1.4rem; padding-right: 1.4rem; font-size: .9rem; }
}

.jb-entete .hfe-site-logo-img { max-height: 86px; width: auto; }
.jb-entete-compacte .hfe-site-logo-img { transform: scale(.82); }

/* Sous le seuil du burger, l'en-tete doit rester compacte : logo plus petit,
   et le bouton d'action garde sa place — c'est l'action principale du site.

   🔴 CE BLOC DOIT RESTER APRES la regle « max-height: 86px » ci-dessus. Les
   deux pesent (0,2,0) : a poids egal, c'est l'ORDRE qui tranche, et une media
   query ne gagne AUCUN poids. Ecrit plus haut, il etait purement decoratif —
   le logo restait a 86 px a 390 px de large. Mesure du 09/09. */
@media (max-width: 1024px) {
	.jb-entete .hfe-site-logo-img { max-height: 58px; }
	.jb-entete { padding-top: 10px; padding-bottom: 10px; }
	.jb-bouton-entete .elementor-button { padding: 11px 18px; font-size: .88rem; }

	/* 🔴 Le retour a la ligne ne se regle PAS avec « flex-wrap » : Elementor
	   ecrit « flex-wrap: var(--flex-wrap) » sur « .e-con > .e-con-inner », au
	   MEME poids que nous et APRES nous. On pose la variable, qu'il declare a
	   (0,1,0) sur l'element — la, on gagne. Sans ca : le bouton tombait a la
	   ligne des 768 px, le menu et le bouton des 390 px. */
	.jb-entete,
	.jb-entete > .e-con-inner { --flex-wrap: nowrap; }
	.jb-entete > .e-con-inner { flex-wrap: nowrap; gap: 10px; }

	/* Meme histoire pour la largeur : « .e-con.e-con > .e-con-inner >
	   .elementor-widget » pese (0,4,0). Sous le seuil du burger, le widget de
	   menu n'a besoin que de la largeur du bouton burger, pas de 488 px. */
	.jb-entete .jb-menu { --width: auto; flex: 0 0 auto; }
	.jb-entete .jb-logo { margin-right: auto; }
	.jb-entete .jb-bouton-entete { order: 2; }
	.jb-entete .jb-menu { order: 3; }
}

/* Telephone : le bouton d'action prend la place qu'il lui reste, sans pousser
   la ligne a s'agrandir. */
@media (max-width: 600px) {
	.jb-entete .hfe-site-logo-img { max-height: 50px; }
	.jb-entete > .e-con-inner { gap: 8px; }
	.jb-bouton-entete .elementor-button { padding: 10px 14px; font-size: .82rem; }
}
@media (max-width: 400px) {
	.jb-bouton-entete .elementor-button { padding: 10px 12px; font-size: .78rem; }
}

/* ==========================================================================
   26. DES CARTES DE MEME TETE

   « Comment on commence ? » : trois cartes dont les titres font une ou deux
   lignes. Sans hauteur commune, le texte de chacune demarrait a une hauteur
   differente et les blocs finissaient de travers.
   ========================================================================== */

.jb-etapes > .e-con-inner { align-items: stretch; }
.jb-etapes > .e-con-inner > .jb-etape,
.jb-etape {
	display: flex;
	flex-direction: column;
}
/* Le titre occupe la meme hauteur partout : deux lignes reservees, meme quand
   il n'en tient qu'une. C'est ce qui aligne les paragraphes entre eux. */
.jb-etape .jb-etape-titre .elementor-heading-title,
.jb-etape h3 {
	min-height: 2.6em;
	display: flex;
	align-items: flex-start;
	margin-top: 0;
	margin-bottom: .8rem;
}
/* 🔴 PAS de « margin-top: auto » ici. Il collait le paragraphe au BAS de la
   carte : celui d'une carte a une ligne demarrait 29 px plus bas que celui
   d'une carte a deux lignes — exactement le desalignement a corriger. Ce sont
   la hauteur de titre reservee ci-dessus et le « stretch » du conteneur qui
   alignent, pas un remplissage par le bas. Mesure du 09/09. */
.jb-etape p { margin-bottom: 0; }

@media (max-width: 767px) {
	.jb-etape .jb-etape-titre .elementor-heading-title,
	.jb-etape h3 { min-height: 0; }
}

/* ==========================================================================
   27. LE PORTRAIT, CENTRE ET PLUS GRAND

   A cote d'un bloc de 800 px de haut, une photo de 440 px calee en haut laisse
   360 px de vide sous elle et se lit comme un oubli.
   ========================================================================== */

.jb-bio > .e-con-inner { align-items: center; }
.jb-bio .jb-portrait-bloc { align-self: center; }
.jb-bio .jb-portrait img,
.jb-portrait-bloc img,
.jb-visuel-col .jb-portrait img {
	height: clamp(420px, 44vw, 620px);
	object-fit: cover;
	object-position: center 20%;
}

/* ==========================================================================
   28. LE PIED DE PAGE

   Quatre colonnes : la marque, la navigation du site, les coordonnees
   cliquables, l'action. Le bandeau du bas porte le copyright et les mentions
   legales sur une seule ligne.
   ========================================================================== */

/* 🔴 « flex-wrap » ne suffit pas : Elementor ecrit « flex-wrap:
   var(--flex-wrap) » sur « .e-con > .e-con-inner », au MEME poids et APRES
   nous, et sa variable vaut « nowrap ». Resultat mesure le 09/09 : a 768 px,
   les quatre colonnes de 48 % se comprimaient a 152 px au lieu de passer sur
   deux lignes. On pose la variable, pas la propriete. */
.jb-pied { --flex-wrap: wrap; }
.jb-pied > .e-con-inner {
	align-items: flex-start;
	--flex-wrap: wrap;
	flex-wrap: wrap;
}
.jb-pied-col { min-width: 0; }

.jb-pied-titre .elementor-heading-title {
	font-family: var(--texte);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vert-texte);      /* 6,13:1 sur beige */
	margin-bottom: .9rem;
}
.jb-pied-col p { text-align: left; font-size: .95rem; line-height: 1.75; margin-bottom: .8rem; }
.jb-pied-col p:last-child { margin-bottom: 0; }

.jb-pied-baseline p { max-width: 30ch; color: var(--encre); }
.jb-pied-marque .hfe-site-logo-img { margin-bottom: 1rem; }

/* Les liens du pied : un decalage discret au survol, jamais un changement de
   couleur qui les ferait disparaitre sur le beige. */
.jb-liens-pied a {
	color: var(--vert-texte);      /* 6,13:1 sur beige */
	text-decoration: none;
	display: inline-block;
	transition: color .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
.jb-liens-pied a:hover {
	color: var(--vert-fonce);      /* 9,45:1 */
	transform: translateX(3px);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jb-liens-pied p { line-height: 2.05; }

.jb-pied-coord .jb-pied-adresse,
.jb-pied-coord .jb-pied-horaires {
	color: var(--encre);
	font-size: .9rem;
	line-height: 1.65;
}
.jb-pied-coord .jb-pied-horaires { color: var(--gris); }   /* 5,18:1 */

.jb-pied-action-txt p { max-width: 26ch; font-size: .9rem; color: var(--encre); }
.jb-pied-action .elementor-button { margin-top: .3rem; }

/* Le bandeau du bas : un filet, et deux blocs aux extremites. */
.jb-pied-bas {
	border-top: 1px solid rgba(78, 98, 86, .18);
}
.jb-pied-bas > .e-con-inner { align-items: center; }
.jb-copyright, .jb-copyright p,
.jb-legal-bas p {
	font-size: .85rem;
	color: var(--gris);            /* 5,18:1 */
	margin: 0;
	text-align: left;
}
.jb-legal-bas a {
	color: var(--vert-texte);      /* 6,13:1 */
	text-decoration: none;
}
.jb-legal-bas a:hover { color: var(--vert-fonce); text-decoration: underline; text-underline-offset: 3px; }
.jb-legal-bas .jb-sep { color: var(--gris); }

/* ⚠️ Les largeurs par taille d'ecran ne se forcent PAS ici : Elementor les
   ecrit par element, et les battre demanderait un « !important » qui se
   retournerait au premier changement. Elles sont posees a la source, dans
   entete-pied.php (« width_tablet », « width_mobile »). */
@media (max-width: 767px) {
	.jb-copyright, .jb-copyright p, .jb-legal-bas p { text-align: center; }
	.jb-pied-baseline p, .jb-pied-action-txt p { max-width: none; }
	.jb-pied > .e-con-inner { gap: 30px; }
}

/* ==========================================================================
   29. LE PIED, PAR TAILLE D'ECRAN

   ⚠️ Les largeurs « width_tablet » posees dans entete-pied.php ne prenaient
   pas : mesure du 09/09, quatre colonnes de 152 px cote a cote a 768 px, soit
   la largeur du grand ecran (20 %). On passe par la variable qu'Elementor
   declare sur l'element a (0,1,0) — la, notre (0,2,0) gagne.
   ========================================================================== */

/* Elementor pose deja 48 % en tablette et 100 % en telephone, a (0,3,0) :
   inutile de le redire ici, il gagnerait de toute facon. Seule la gouttiere
   entre les deux lignes nous revient. */
@media (max-width: 1024px) {
	.jb-pied > .e-con-inner { row-gap: 34px; }
}

/* ==========================================================================
   30. LES VISUELS SECONDAIRES FONT LE POIDS

   Mesure du 09/09 : la photo du bloc vert faisait 470 px de haut face a
   1219 px de texte, soit 39 % — elle se lisait comme une vignette posee a
   cote d'un mur de mots. Le plafond de 560 px n'est pas arbitraire : au-dela,
   il faudrait plus de pixels que n'en contient l'original recadre.
   ========================================================================== */

.jb-visuel-col .jb-visuel img,
.jb-visuel-col img {
	height: clamp(400px, 40vw, 560px);
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* En telephone, la hauteur suit la largeur : une bande de 560 px de haut sur
   350 px de large mangerait un ecran entier. */
@media (max-width: 767px) {
	.jb-visuel-col .jb-visuel img,
	.jb-visuel-col img { height: auto; max-height: 420px; }
}

/* ==========================================================================
   31. LE FORMULAIRE SUR DEUX COLONNES

   🔴 La structure du formulaire prevoit DEJA « Nom » et « Adresse e-mail »
   cote a cote : Forminator leur pose « forminator-col-6 ». Ce sont les
   rangees qui restaient en « display: block », donc les colonnes s'empilaient
   sur toute la largeur. Aucun reglage du formulaire n'etait en cause.
   ========================================================================== */

.jb-formulaire .forminator-ui.forminator-custom-form .forminator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-col {
	flex: 1 1 100%;
	width: auto;
	min-width: 0;
}
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-col-6 {
	flex: 1 1 calc(50% - 10px);
}

/* Sous 600 px, deux champs cote a cote deviennent deux champs trop etroits. */
@media (max-width: 600px) {
	.jb-formulaire .forminator-ui.forminator-custom-form .forminator-col-6 { flex: 1 1 100%; }
}

/* 🔴 L'asterisque d'obligation du consentement tombait SEUL sur sa ligne,
   sous la phrase : a l'ecran, on lisait un point perdu au milieu du
   formulaire. « white-space: nowrap » n'y change rien — c'est un element
   separe par une espace secable, il passe a la ligne comme un mot. On le
   masque et on le redonne en fin de phrase, colle par une espace INSECABLE.
   L'obligation reste portee par « aria-required », deja present. */
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-field-consent .forminator-required {
	display: none;
}
.jb-formulaire .forminator-ui.forminator-custom-form .jb-consent-texte::after {
	content: " *";
	color: var(--vert-texte);
}

/* ==========================================================================
   32. UNE PHOTO QUI EPOUSE LA HAUTEUR DE SON TEXTE

   Meme agrandie a 560 px, la photo du bloc vert restait une vignette a cote
   d'un pave de plus de 800 px : « la photo sur la gauche est beaucoup trop
   petite par rapport au bloc a droite ». Une hauteur fixe ne pouvait pas
   suivre un texte dont la hauteur depend de la largeur de l'ecran. La colonne
   s'etire donc, et l'image la remplit.
   ========================================================================== */

.jb-visuel-plein { align-self: stretch; }
/* ⚠️ « .jb-portrait » doit figurer ici : sans lui, la chaine de conteneurs
   n'est pas etiree et le « height: 100% » de l'image ne s'appuie sur rien.
   Mesure : le portrait restait a 581 px dans une colonne de 1662. */
.jb-visuel-plein > .e-con-inner,
.jb-visuel-plein .elementor-widget-image,
.jb-visuel-plein .elementor-widget-image > .elementor-widget-container,
.jb-visuel-plein .jb-visuel,
.jb-visuel-plein .jb-portrait,
.jb-visuel-plein figure {
	height: 100%;
}
/* 🔴 (0,4,0) et non (0,2,0) : la section 30 pose « .jb-visuel-col .jb-visuel
   img » a (0,3,0). Ecrite plus bas mais plus legere, ma regle perdait et
   l'image gardait ses 560 px, calee en haut d'une colonne etiree — decentree
   de 320 px. Mes deux regles se battaient entre elles. Mesure du 09/09. */
.jb-visuel-col.jb-visuel-plein .jb-visuel img,
.jb-visuel-col.jb-visuel-plein img {
	height: 100%;
	width: 100%;
	min-height: 460px;
	/* 🔴 Deux plafonds, et le second compte autant que le premier.
	   1) La PHOTO : l'original fait 932 px de haut ; etiree a 1199 px elle
	      etait agrandie de 29 % et se pixellisait.
	   2) La FORME : 372 px de large pour 900 de haut, c'est une meurtriere.
	      On borne la hauteur au format portrait classique (3 pour 2) de la
	      largeur reelle de la colonne, elargie a 46 %. Signale le 09/09. */
	max-height: min(760px, 168%);
	object-fit: cover;
	object-position: center 35%;
}
/* Le reste de la colonne etiree ne doit pas laisser l'image collee en haut.
   ⚠️ « .jb-portrait » compris : sans lui, la photo de la page « Comment je
   fonctionne » etait calee en haut, 321 px au-dessus du centre. */
.jb-visuel-plein .jb-visuel,
.jb-visuel-plein .jb-portrait,
.jb-visuel-plein .elementor-widget-image > .elementor-widget-container {
	display: flex;
	align-items: center;
}

/* Empilee, la colonne n'a plus de hauteur a epouser : on redonne une hauteur
   raisonnable, sinon l'image occupe un ecran entier. */
@media (max-width: 1024px) {
	.jb-visuel-col.jb-visuel-plein .jb-visuel img,
	.jb-visuel-col.jb-visuel-plein img { height: clamp(360px, 46vw, 480px); min-height: 0; }
}

/* Forminator pose « text-shadow: rgba(0,0,0,.01) 0 0 1px » sur le lien du
   consentement. Presque invisible, mais c'est une ombre sur du texte : on la
   retire, comme partout ailleurs sur le site. */
.jb-formulaire .forminator-ui.forminator-custom-form a,
.jb-formulaire .forminator-ui.forminator-custom-form .forminator-checkbox a {
	text-shadow: none;
}

/* ==========================================================================
   33. LES ANNEES DE FORMATION

   Un simple reperage dans la liste des formations complementaires : ni titre
   de niveau (la hierarchie h2 > h3 est deja prise), ni gras perdu au milieu
   du texte.
   ========================================================================== */

.jb-annee-bloc { margin-top: 1.6rem; }
.jb-annee {
	font-family: var(--texte);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--vert-texte);        /* 6,13:1 sur blanc */
	margin-bottom: .5rem;
	text-align: left;
}
.jb-annee-bloc + .elementor-widget-text-editor .jb-liste { margin-top: 0; }

/* ==========================================================================
   34. SA PALETTE, RELEVEE SUR SON SITE — ET LE PLANCHER DE LISIBILITE

   Releve du 10/09/2026 sur www.jenniferbouyol.fr, toujours en ligne : ses
   titres sont d'un vert sauge #8AA494. Mesure du contraste sur blanc :
   **2,69:1**. C'est sous le plancher du texte courant (4,5:1) ET sous celui
   du grand texte (3:1) — son site actuel n'est pas lisible pour tout le monde.
   On garde donc EXACTEMENT sa teinte, assombrie jusqu'au premier ton qui
   passe : #617D6C, 4,51:1. Même couleur a l'oeil, lisible pour de vrai.
   ========================================================================== */

:root { --vert-titre: #617D6C; }   /* sa teinte, 4,51:1 sur blanc */

.jb-section h2,
.jb-section .elementor-widget-heading h2.elementor-heading-title {
	color: var(--vert-titre);
}

/* 🔴 Sur un aplat, le vert des titres ne tient plus. Deux cas, mesures :
     - aplat sauge clair : on passe au vert fonce (le vert moyen s'y noie) ;
     - aplat vert FONCE (sections d'appel) : #617D6C sur #39483F donne
       **2,14:1**, sous le plancher de 3:1 du grand texte. Le titre y passe en
       blanc casse. C'est la sonde qui l'a attrape, pas moi. */
.jb-aplat-sauge h2,
.jb-aplat-sauge .elementor-widget-heading h2.elementor-heading-title {
	color: var(--vert-fonce);
}
.jb-appel h2,
.jb-appel .elementor-widget-heading h2.elementor-heading-title,
.jb-aplat-fonce h2,
.jb-aplat-fonce .elementor-widget-heading h2.elementor-heading-title {
	color: var(--creme, #F9F7F4);
}

/* ==========================================================================
   35. UN NUMERO DE TELEPHONE NE SE COUPE PAS

   Page seance, version ordinateur : « 06 48 08 52 68 » se cassait en deux
   entre deux lignes. Un numero coupe ne se compose plus d'un coup d'oeil, et
   sur mobile la moitie du lien devient intappable.
   ========================================================================== */

a[href^="tel:"] { white-space: nowrap; }

/* ==========================================================================
   36. LA PHOTO, NETTE, SANS CADRE

   10/09 : « pas de rectangle derriere ma photo ». On a retire l'ombre et le
   coin arrondi, et ajoute un fondu des bords au masque.
   11/09 : « l'effet fondu ne me convient pas, peux-tu l'oter ». Le masque est
   retire ; l'absence d'ombre et de cadre, elle, reste — c'etait la demande
   de la veille, et elle ne l'a pas remise en cause.
   ========================================================================== */

.jb-portrait-bloc img,
.jb-bio .jb-portrait img,
.jb-visuel-col .jb-portrait img,
.jb-portrait img {
	border-radius: 0;
	box-shadow: none;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ==========================================================================
   37. L'ACCROCHE : SA PHOTO PLEINE LARGEUR, ET L'ENCADRE TRANSLUCIDE

   Reproduit son site Leadpages, releve en direct le 10/09/2026 : encadre
   rgba(237, 234, 230, .9) pose sur la photo, aligne a droite.

   ⚠️ La photo est posee en FOND DE CONTENEUR cote Elementor, pas ici : une
   URL ecrite dans cette feuille ne serait pas reecrite a la bascule vers son
   domaine, et l'image disparaitrait.
   ========================================================================== */

.jb-heros-photo > .e-con-inner { align-items: center; }

.jb-heros-carte {
	background: rgba(237, 234, 230, .92);
	box-shadow: 0 24px 60px -34px rgba(39, 32, 24, .45);
}
.jb-heros-carte .jb-h1 .elementor-heading-title,
.jb-heros-carte h1 {
	color: var(--vert-fonce);       /* 9,67:1 sur le beige translucide */
	margin-bottom: .6rem;
}
.jb-heros-carte .jb-chapo { color: var(--encre); margin-bottom: 1.4rem; }
.jb-heros-carte .jb-surtitre { color: var(--vert-titre); }
.jb-heros-carte .elementor-widget-button { margin-top: .2rem; }

/* Sur telephone, l'encadre prend toute la largeur : a 46 %, il ferait 180 px
   sur une photo de 390. */
@media (max-width: 1024px) {
	.jb-heros-photo { --flex-wrap: wrap; }
	.jb-heros-carte { --width: 100%; }
}

/* Le portrait de la page « Comment je fonctionne » suit la meme regle que la
   photo du bloc de l'accueil. Son plafond vient de la source : 768 x 1024, et
   une largeur d'affichage de 436 px — au-dela de 1000 px de haut, « cover »
   l'agrandirait. */
.jb-portrait-bloc.jb-visuel-plein .jb-portrait img,
.jb-portrait-bloc.jb-visuel-plein img {
	height: 100%;
	max-height: min(1000px, 230%);
	min-height: 460px;
	object-fit: cover;
	object-position: center 20%;
}
@media (max-width: 1024px) {
	.jb-portrait-bloc.jb-visuel-plein .jb-portrait img,
	.jb-portrait-bloc.jb-visuel-plein img { height: clamp(360px, 52vw, 520px); min-height: 0; }
}

/* 🔴 « .jb-bio .jb-portrait-bloc { align-self: center } » (section 27) pese
   (0,2,0) et battait « .jb-visuel-plein { align-self: stretch } » (0,1,0) :
   la colonne restait centree, donc jamais etiree, donc le « height: 100% » de
   l'image ne s'appuyait sur rien — 581 px au lieu de 1000. Encore deux de mes
   propres regles l'une contre l'autre. Mesure du 10/09. */
.jb-bio .jb-portrait-bloc.jb-visuel-plein,
.jb-portrait-bloc.jb-visuel-plein {
	align-self: stretch;
}

/* ==========================================================================
   38. LE LOGO DISPARAISSAIT SUR TELEPHONE

   Capture de la cliente, 11/09, sur iPhone : pas de logo, le bouton a sa
   place. Reproduit dans WebKit ET Chromium : logo 0 x 0 px, bouton 0 px de
   large, widget de menu 350 px.

   Cause : le menu deroulant REPLIE (nav.hfe-dropdown) restait dans le flux,
   « visibility: hidden » mais large de 350 px. Il gonflait le widget de menu,
   rendu incompressible par mon « flex: 0 0 auto » du 09/09 — et le logo et le
   bouton, eux compressibles, tombaient a zero.

   Aucune de mes sondes ne l'a vu : elles mesuraient la HAUTEUR de l'en-tete,
   jamais la PRESENCE du logo. recette-entete.mjs le verifie desormais.

   Un menu deroulant se pose PAR-DESSUS la page, sous l'en-tete : il ne doit
   occuper aucune place dans la ligne.
   ========================================================================== */

@media (max-width: 1024px) {
	.jb-entete .jb-menu nav.hfe-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 60;
	}
	/* Le logo et le bouton ne cedent jamais leur place. */
	.jb-entete .jb-logo,
	.jb-entete .jb-bouton-entete {
		flex-shrink: 0;
	}
	/* Le bouton burger sans son cadre : sur la capture, un carre borde a cote
	   du bouton arrondi faisait deux formes qui se contredisent. Le focus
	   clavier reste visible (regle ci-dessous). */
	.jb-entete .jb-menu .hfe-nav-menu__toggle {
		border: 0;
		box-shadow: none;
	}
	.jb-entete .jb-menu .hfe-nav-menu__toggle:focus-visible {
		outline: 3px solid var(--vert-fonce);
		outline-offset: 2px;
	}
}

/* ==========================================================================
   39. LE MENU EN VERT

   11/09 : « mettre la police du menu deroulant en vert ». Son site Leadpages
   avait tout son menu en vert sauge. On applique le vert de ses titres
   (#617D6C, 4,51:1 sur blanc) au menu du haut ET au menu deroulant du
   telephone : c'est le meme menu, et les deux lectures de sa demande sont
   couvertes. Le survol et la page courante passent au vert fonce.
   ========================================================================== */

/* 🔴 (0,4,1), pas (0,3,1). Elementor ecrit « .elementor-widget-navigation-menu
   .menu-item a.hfe-menu-item » a (0,3,1), dans un <style> imprime APRES cette
   feuille : a poids egal, il gagnait, et le menu du haut restait noir sur
   ordinateur pendant que le deroulant du telephone passait bien au vert. */
.jb-menu .hfe-nav-menu .menu-item a.hfe-menu-item,
.jb-menu nav.hfe-dropdown .menu-item a.hfe-menu-item {
	color: var(--vert-titre);
}
.jb-menu .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.jb-menu .hfe-nav-menu .current-menu-item > a.hfe-menu-item,
.jb-menu nav.hfe-dropdown .menu-item a.hfe-menu-item:hover {
	color: var(--vert-fonce);
}

/* ==========================================================================
   40. LA PAGE BLOG

   Elle garde son Blogger tel quel (11/09). La page l'affiche dans un cadre
   pleine largeur, comme sur son site actuel.
   ⚠️ Ce cadre charge des traceurs Google : Complianz doit le BLOQUER avant
   consentement (signale a Quentin, qui configure Complianz).
   ========================================================================== */

.jb-blog-cadre iframe {
	display: block;
	width: 100%;
	min-height: 2000px;
	border: 0;
	background: var(--blanc);
}
@media (max-width: 767px) {
	.jb-blog-cadre iframe { min-height: 2600px; }
}

/* Le chapo de l'accroche est un texte court : justifie dans l'encadre etroit
   du telephone, il se creusait de blancs (« Psychopraticienne   en   Gestalt »,
   visible sur la capture de la cliente du 11/09). Toujours en drapeau. */
.jb-heros-carte .jb-chapo,
.jb-heros .jb-chapo {
	text-align: left;
	hyphens: manual;
}

/* Tant que le visiteur n'a pas accepte, le cadre Blogger est remplace par
   l'espace reserve de Complianz.

   🔴 Complianz le pose DEUX FOIS : sur le widget Elementor (pleine largeur) ET
   sur l'iframe (300 px, sa largeur par defaut). Deux boutons « Cliquez pour
   accepter » superposes, releve a l'ecran le 11/09. On garde celui du widget
   et on masque l'interieur tant que le blocage dure. A l'acceptation,
   Complianz retire la classe « cmplz-blocked-content-container » : le cadre
   reapparait, a pleine largeur et pleine hauteur. */
.jb-blog-cadre.cmplz-blocked-content-container {
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--beige, #F5F2EE);
}
.jb-blog-cadre.cmplz-blocked-content-container .cmplz-blocked-content-container,
.jb-blog-cadre.cmplz-blocked-content-container .cmplz-placeholder-parent {
	display: none;
}
.jb-blog-cadre .cmplz-blocked-content-notice {
	background: var(--vert-fonce);
	color: #fff;
	border-radius: 999px;
	padding: 14px 26px;
	max-width: 360px;
}
/* Une fois accepte : le cadre remplit la colonne. */
.jb-blog-cadre .cmplz-placeholder-parent,
.jb-blog-cadre .cmplz-placeholder-parent iframe {
	width: 100%;
}