/* ==========================================================================
   tpm.css · Technopole Martinique · thème enfant technopole26
   Version 1.97 · 29/10/2026
   Socle CSS du référentiel TPM-00 v1.99 (§ 3, § 6, § 7, § 9).
   Couleurs et polices uniquement par les variables du kit Elementor
   (--e-global-color-<id>, --e-global-typography-<id>-*). Aucune valeur
   littérale de couleur ni de police.
   Blocs : 1 variables · 2 contenu éditorial et pages natives · 3 utilitaires · 4 composants
   · 5 formulaires Gravity Forms · 6 états · 7 responsive.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES MAISON (valeurs que le kit ne génère pas, § 3)
   Déclarées sur body et non sur :root : Elementor pose ses variables
   --e-global-* sur la classe .elementor-kit-N du body. Une variable qui
   référence un global, déclarée sur :root, serait invalide (le global n'y
   existe pas encore) et la propriété qui l'utilise tomberait à vide.
   ========================================================================== */

body {
	--tpm-radius-sm: 4px;
	--tpm-radius-md: 12px;
	--tpm-radius-lg: 16px;
	--tpm-radius-xl: 24px;
	--tpm-radius-full: 9999px;
	--tpm-shadow-card-hover: 0 12px 32px 0 color-mix(in srgb, var(--e-global-color-bgfooter) 10%, transparent);
	--tpm-transition: 200ms ease;
	--tpm-space-block: 24px;   /* espacement vertical entre blocs éditoriaux */
	--tpm-touch-target: 44px;  /* cible tactile minimale (§ 6) */
	--tpm-header-height: 82px; /* hauteur du header, filet compris (64 dès le burger, bloc 7) */
	--tpm-header-sticky-height: 64px; /* header en sticky actif, toutes largeurs (barre d'ancres) */
	--tpm-scroll-offset: 32px; /* écart d'arrêt des cibles d'ancre sous la barre (30 / 28 / 24, bloc 7) */
}


/* ==========================================================================
   2. CONTENU ÉDITORIAL
   Zones où le client écrit : widget Contenu de l'article, widget Éditeur
   de texte et contenu des pages WordPress natives rendues par Hello
   (.page-content qui ne contient pas de mise en page Elementor). Aucune
   classe à poser. Les tailles des titres, du corps et des
   liens viennent de la Typographie du kit (§ 5 B).
   ========================================================================== */

/* Espacement entre blocs */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(p, ul, ol, blockquote, figure, table, pre, .wp-block-file, .wp-block-embed, .wp-block-image, .wp-block-table) {
	margin: 0 0 var(--tpm-space-block);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) > :last-child,
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) > .elementor-widget-container > :last-child {
	margin-bottom: 0;
}

/* Pas de mot isolé en fin de paragraphe */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(p, li, figcaption) {
	text-wrap: pretty;
}

/* Titres de lecture : marges seulement, le style vient du kit */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) h2 {
	margin: 48px 0 16px;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) h3 {
	margin: 32px 0 16px;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(h4, h5, h6) {
	margin: 24px 0 12px;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/* Liens : couleur et soulignement par le kit ; graisse 500 (Inter Medium,
   gabarit Article 272:4719) */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) a {
	font-weight: 500;
	text-underline-offset: 0.15em;
}

/* Listes */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(ul, ol) {
	padding-left: 24px;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) li + li {
	margin-top: 8px;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) li > :is(ul, ol) {
	margin: 8px 0 0;
}

/* Citations (gabarit Article, Citation 272:4726) : filet gauche 3 px cyan,
   padding 4/0/4/24, sans fond ; citation h5 primary, auteur bodysm txtsec,
   gap 8 */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(blockquote, .wp-block-quote) {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border: 0;
	border-left: 3px solid var(--e-global-color-cyan);
	border-radius: 0;
	background: none;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-h5-font-family);
	font-size: var(--e-global-typography-h5-font-size);
	font-weight: var(--e-global-typography-h5-font-weight);
	line-height: var(--e-global-typography-h5-line-height);
	font-style: normal;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) blockquote p {
	margin: 0 0 8px;
	font: inherit;
	color: inherit;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) blockquote p:last-of-type {
	margin-bottom: 0;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(blockquote cite, blockquote footer, .wp-block-quote__citation) {
	display: block;
	margin-top: 8px;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
	font-style: normal;
}

/* Légendes */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(figcaption, .wp-element-caption) {
	margin-top: 8px;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-caption-font-family);
	font-size: var(--e-global-typography-caption-font-size);
	font-weight: var(--e-global-typography-caption-font-weight);
	line-height: var(--e-global-typography-caption-line-height);
	text-align: left;
}

/* Images */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) img {
	max-width: 100%;
	height: auto;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(.wp-block-image img, .wp-block-video video, p > img) {
	display: block;
	border-radius: var(--tpm-radius-md);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-video video {
	width: 100%;
	height: auto;
}

/* Vidéos et embeds en 16:9, rayon md (gabarit Article 272:4730) */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--tpm-radius-md);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-embed__wrapper::before {
	display: none;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-embed__wrapper :is(iframe, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* oEmbed collé sans bloc (Éditeur de texte) */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :not(.wp-block-embed__wrapper) > :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="dailymotion"]) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--tpm-radius-md);
}

/* Fichiers (PDF, documents) */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 16px;
	border: 1px solid var(--e-global-color-border);
	border-radius: var(--tpm-radius-md);
	background: var(--e-global-color-white);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file .wp-block-file__embed {
	flex: 0 0 100%;
	margin: 0 0 8px;
	border-radius: var(--tpm-radius-md);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file a:not(.wp-block-file__button) {
	flex: 1 1 auto;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	text-decoration: none;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-accent);
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	text-decoration: none;
	transition: background-color var(--tpm-transition);
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file .wp-block-file__button:hover {
	background: var(--e-global-color-limehov);
	color: var(--e-global-color-text);
}

/* Séparateurs */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(hr, .wp-block-separator):not(.is-style-dots) {
	width: 100%;
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--e-global-color-border);
	opacity: 1;
}

/* Tableaux simples */
:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-table {
	overflow-x: auto;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(th, td) {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-border);
	text-align: left;
	vertical-align: top;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) th {
	background: var(--e-global-color-bgsubtle);
	color: var(--e-global-color-primary);
	font-weight: 600;
}

:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--e-global-color-neutral);
}


/* Pages WordPress natives rendues par Hello Elementor (page Gutenberg sans
   gabarit, recherche ou 404 sans gabarit) : même largeur que le conteneur
   boxed du kit à chaque palier (bloc 7), sans gouttière à partir de 480 px :
   l'écart entre l'écran et le conteneur fait la marge. Gouttière de 15 px
   sous 480 px seulement (conteneur à 100 %). Respiration verticale 48 / 32.
   Les largeurs reprennent la Mise en page du kit (Elementor ne les expose pas
   en variable hors .e-con) : à reporter ici si elle change. Sur une page
   construite avec Elementor, rien n'est posé par le thème : les sections
   Elementor portent leur padding latéral de 15 px à tous les paliers. Garde body:not([class*="elementor-page-"]) repris de Hello : une
   page construite avec Elementor n'est jamais concernée. Hello applique ses
   propres largeurs (500 à 1140 selon l'écran) et un padding de 10 px sous
   575 px à la fois sur .site-main et sur le titre, d'où un titre décalé. */
body:not([class*="elementor-page-"]) .site-main {
	padding: 48px 0;
}

body:not([class*="elementor-page-"]) .page-header .entry-title {
	max-width: none;
	margin: 0 0 24px;
	padding-inline: 0;
}


/* ==========================================================================
   3. UTILITAIRES
   ========================================================================== */

/* tpm-on-dark : posée sur une section foncée. Bascule les liens du contenu
   (link/on-dark = accent), les badges (bloc 4) et le focus clavier (bloc 6). */
.tpm-on-dark :is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) a {
	color: var(--e-global-color-accent);
}

/* tpm-opacity-80 : opacité 80 % relevée sur l'accueil (légendes des chiffres
   du hero, mois des dates de l'agenda). Posée sur un conteneur ou un widget. */
.tpm-opacity-80 {
	opacity: 0.8;
}

/* tpm-opacity-70 : opacité de calque 70 % relevée sur les surtitres des
   encarts foncés de Présentation & missions v5 (Notre équipe, Son ambition). */
.tpm-opacity-70 {
	opacity: 0.7;
}


/* Badge reCAPTCHA v3 (Gravity Forms) masqué. Les conditions de Google
   imposent alors la mention « This site is protected by reCAPTCHA and the
   Google Privacy Policy and Terms of Service apply. » près du formulaire. */
.grecaptcha-badge {
	display: none;
}


/* Titres de composition : pas de mot isolé en dernière ligne */
.elementor-heading-title {
	text-wrap: pretty;
}

/* text-balance, text-pretty : retour à la ligne équilibré ou sans mot isolé,
   à poser sur un widget, un conteneur ou un bloc Gutenberg (classes sans
   préfixe tpm-, demande Manu du 12/10/2026). S'appliquent à l'élément et à
   ses descendants ; le sélecteur à body passe devant les règles éditoriales
   du bloc 2 et devant .elementor-heading-title. */
.text-balance,
.text-balance *,
body .elementor-element.text-balance * {
	text-wrap: balance;
}

.text-pretty,
.text-pretty *,
body .elementor-element.text-pretty * {
	text-wrap: pretty;
}


/* ==========================================================================
   4. COMPOSANTS (un bloc par classe)
   ========================================================================== */

/* --------------------------------------------------------------------------
   tpm-badge · Badge 182:617 (widget Titre, balise p)
   Hauteur 32, padding 0/16, point 8 px accent, bordure 1 px accent, rayon full.
   Police (bodysm) et couleur du texte (text sur clair, white sur sombre) :
   réglages globaux du widget, jamais ici (§ 8.8).
   -------------------------------------------------------------------------- */
.tpm-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 32px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-accent);
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-badgelt);
}

.tpm-badge .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-accent);
}

.tpm-on-dark .tpm-badge .elementor-heading-title {
	background: var(--e-global-color-badgedk);
}

/* tpm-badge--cyan (cumulée avec tpm-badge) : bordure et point cyan, relevés
   sur l'accueil (sections Agenda et Parcours), variante absente de
   Components (TPM-02 n° 29). */
.tpm-badge--cyan .elementor-heading-title {
	border-color: var(--e-global-color-cyan);
}

.tpm-badge--cyan .elementor-heading-title::before {
	background: var(--e-global-color-cyan);
}

/* --------------------------------------------------------------------------
   tpm-tag · Tag 187:657 (widget Titre, balise span)
   Padding 4/12, rayon full, bordure 1 px. Sans ton = Neutral.
   Couleur du texte par le global du widget : lime → accent, blue et yellow →
   primary, purple → tgpurtx, neutral → txtsec, green → primary, cyan → cyan.
   -------------------------------------------------------------------------- */
/* Une ligne, coupée par « … » quand le Tag dépasse la largeur disponible
   (catégories multiples des Loop Items). Bloc en ligne et non inline-flex :
   text-overflow ne s'applique pas aux enfants d'un flex. Écart de 0,35 em
   autour du séparateur porté par les marges des liens (remplace gap). */
.elementor-widget.tpm-tag {
	min-width: 0;
	max-width: 100%;
}

.tpm-tag .elementor-heading-title {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 4px 12px;
	overflow: hidden;
	border: 1px solid var(--e-global-color-border);
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-bgsubtle);
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: top;
}

.tpm-tag .elementor-heading-title > :not(:first-child) {
	margin-left: 0.35em;
}

.tpm-tag .elementor-heading-title > :not(:last-child) {
	margin-right: 0.35em;
}

.tpm-tag--lime .elementor-heading-title {
	border-color: var(--e-global-color-lime45);
	background: var(--e-global-color-tint);
}

.tpm-tag--blue .elementor-heading-title {
	border-color: var(--e-global-color-tgblubd);
	background: var(--e-global-color-tgblubg);
}

.tpm-tag--yellow .elementor-heading-title {
	border-color: var(--e-global-color-tgyelbd);
	background: var(--e-global-color-tgyelbg);
}

.tpm-tag--purple .elementor-heading-title {
	border-color: var(--e-global-color-tgpurbd);
	background: var(--e-global-color-tgpurbg);
}

.tpm-tag--neutral .elementor-heading-title {
	border-color: var(--e-global-color-border);
	background: var(--e-global-color-bgsubtle);
}

.tpm-tag--green .elementor-heading-title {
	border-color: var(--e-global-color-lime45);
	background: var(--e-global-color-lime45);
}

/* Cyan : cartes Agenda sur fond foncé, ton absent de Tag 187:657 (TPM-02 n° 30) */
.tpm-tag--cyan .elementor-heading-title {
	border-color: var(--e-global-color-cyan45);
	background: var(--e-global-color-cyan12);
}

/* --------------------------------------------------------------------------
   tpm-btn--… · Button 182:603 (widget Bouton)
   Le kit porte Primary Large : fond accent, texte text, survol limehov, rayon
   full, police accent, padding 13/24. Les variantes ne touchent que ce qui
   diffère. Bordures en box-shadow intérieur : hauteur inchangée.
   -------------------------------------------------------------------------- */
/* Icône et libellé centrés verticalement sur tous les boutons */
.elementor-button .elementor-button-content-wrapper {
	align-items: center;
}

.elementor-widget-button[class*="tpm-btn--"] .elementor-button {
	transition: background-color var(--tpm-transition), color var(--tpm-transition), box-shadow var(--tpm-transition);
}

/* Secondary : contour primary, survol plein */
.elementor-widget-button.tpm-btn--secondary .elementor-button {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}

.elementor-widget-button.tpm-btn--secondary .elementor-button:hover {
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
}

/* Secondary on dark : contour odsubtle, survol blanc */
.elementor-widget-button.tpm-btn--on-dark .elementor-button {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--e-global-color-odsubtle);
	color: var(--e-global-color-white);
}

.elementor-widget-button.tpm-btn--on-dark .elementor-button:hover {
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-primary);
}

/* Inverse : blanc sur fond foncé */
.elementor-widget-button.tpm-btn--inverse .elementor-button {
	background-color: var(--e-global-color-white);
	box-shadow: none;
	color: var(--e-global-color-primary);
}

.elementor-widget-button.tpm-btn--inverse .elementor-button:hover {
	background-color: var(--e-global-color-bgsubtle);
	color: var(--e-global-color-primary);
}

/* Small 40 px (header) */
.elementor-widget-button.tpm-btn--sm .elementor-button {
	padding: 9px 16px;
}

/* Arrow : l'icône glisse de 4 px au survol */
.elementor-widget-button.tpm-btn--arrow .elementor-button-icon {
	transition: transform var(--tpm-transition);
}

.elementor-widget-button.tpm-btn--arrow .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* Arrow circle (hero de l'accueil, relevé le 12/10/2026) : flèche txtbrand
   dans une pastille primary de 28 px, padding 0/8/0/24 sur une hauteur de
   48 (padding vertical 10 = (48 − 28) / 2) ; Small : 40 de haut, padding
   vertical 6, droite 4 (mesure par défaut, sans maquette). */
.elementor-widget-button.tpm-btn--arrow-circle .elementor-button {
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 10px;
}

.elementor-widget-button.tpm-btn--arrow-circle.tpm-btn--sm .elementor-button {
	padding-top: 6px;
	padding-right: 4px;
	padding-bottom: 6px;
}

.elementor-widget-button.tpm-btn--arrow-circle .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-primary);
	color: var(--e-global-color-txtbrand);
}

.elementor-widget-button.tpm-btn--arrow-circle .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   tpm-link · Link 182:610 (widget Bouton)
   Police accent (héritée du kit Boutons), couleur link, sans soulignement,
   flèche à 8 px qui glisse de 4 px au survol. Sur sombre : accent.
   -------------------------------------------------------------------------- */
.elementor-widget-button.tpm-link .elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border-radius: var(--tpm-radius-sm);
	background-color: transparent;
	box-shadow: none;
	color: var(--e-global-color-link);
	transition: color var(--tpm-transition);
}

.elementor-widget-button.tpm-link .elementor-button:hover {
	background-color: transparent;
	color: var(--e-global-color-link);
}

.elementor-widget-button.tpm-link .elementor-button-content-wrapper {
	gap: 8px;
}

.elementor-widget-button.tpm-link .elementor-button-icon {
	transition: transform var(--tpm-transition);
}

.elementor-widget-button.tpm-link .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

.tpm-on-dark .elementor-widget-button.tpm-link .elementor-button,
.tpm-on-dark .elementor-widget-button.tpm-link .elementor-button:hover {
	color: var(--e-global-color-accent);
}

/* tpm-link--alt (cumulée avec tpm-link) : libellé linkalt, flèche link,
   relevés sur les Card/Pillar de l'accueil (TPM-02 n° 2). */
.elementor-widget-button.tpm-link--alt .elementor-button,
.elementor-widget-button.tpm-link--alt .elementor-button:hover {
	color: var(--e-global-color-linkalt);
}

.elementor-widget-button.tpm-link--alt .elementor-button-icon {
	color: var(--e-global-color-link);
}

/* tpm-link--path · Path link 304:6576 (cumulée avec tpm-link)
   Rangée pleine largeur : padding 20, rayon lg, fond white, contour 1 px
   pathbd, label txtsec, flèche txtmuted 16 px. Survol : contour cyan, label
   primary, flèche immobile. */
.elementor-widget-button.tpm-link--path .elementor-button {
	width: 100%;
	padding: 20px;
	border-radius: var(--tpm-radius-lg);
	background-color: var(--e-global-color-white);
	box-shadow: inset 0 0 0 1px var(--e-global-color-pathbd);
	color: var(--e-global-color-txtsec);
	transition: box-shadow var(--tpm-transition), color var(--tpm-transition);
}

.elementor-widget-button.tpm-link--path .elementor-button-content-wrapper {
	width: 100%;
	justify-content: space-between;
}

.elementor-widget-button.tpm-link--path .elementor-button:hover {
	background-color: var(--e-global-color-white);
	box-shadow: inset 0 0 0 1px var(--e-global-color-cyan);
	color: var(--e-global-color-primary);
}

.elementor-widget-button.tpm-link--path .elementor-button-icon,
.elementor-widget-button.tpm-link--path .elementor-button:hover .elementor-button-icon {
	color: var(--e-global-color-txtmuted);
	transform: none;
}

.elementor-widget-button.tpm-link--path .elementor-button-icon svg {
	width: 16px;
	height: 16px;
}

/* tpm-link dans une carte de boucle (Loop Item d'une Grille ou d'un Carrousel
   de boucle) : Elementor écrit les réglages du bouton de pagination du widget
   de boucle (« Voir d'autres résidents ») sur {{WRAPPER}} .elementor-button,
   soit 0,4,0 (0,5,0 au survol et au focus), après tpm.css : ils atteignent
   aussi les boutons des cartes. Les règles de tpm-link sont reprises ici,
   limitées aux cartes (.e-loop-item) et passées devant par des classes
   doublées (0,7,0 et plus), sans !important. Le bouton de pagination, hors
   .e-loop-item, garde ses réglages ; les tpm-link hors boucle ne changent
   pas. Path link exclu (aucun usage en boucle). */
.e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button {
	padding: 0;
	border: 0;
	border-radius: var(--tpm-radius-sm);
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: var(--e-global-color-link);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
	font-style: normal;
	text-transform: none;
	text-decoration: none;
	word-spacing: normal;
	transition: color var(--tpm-transition);
}

.e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button:is(:hover, :focus) {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--e-global-color-link);
}

.e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button .elementor-button-content-wrapper {
	gap: 8px;
}

.e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button .elementor-button-icon svg {
	fill: currentColor;
}

.e-loop-item .elementor-widget-button.tpm-link--alt.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button,
.e-loop-item .elementor-widget-button.tpm-link--alt.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button:is(:hover, :focus) {
	color: var(--e-global-color-linkalt);
}

/* Sur sombre : section foncée autour de la boucle, ou carte foncée dans
   l'élément de boucle (Loop Item à la une de la Liste Agenda) */
.tpm-on-dark .e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button,
.tpm-on-dark .e-loop-item .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button:is(:hover, :focus),
.e-loop-item .tpm-on-dark .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button,
.e-loop-item .tpm-on-dark .elementor-widget-button.tpm-link.tpm-link:not(.tpm-link--path) .elementor-button.elementor-button:is(:hover, :focus) {
	color: var(--e-global-color-accent);
}

/* --------------------------------------------------------------------------
   Mots mis en couleur dans un titre (span dans le texte du widget) : une
   classe par couleur Figma, quel que soit le fond (§ 9).
   tpm-highlight : color/text/highlight = accent.
   tpm-brand : color/text/brand = txtbrand (#A8CC2E, aussi posé en dur).
   -------------------------------------------------------------------------- */
.tpm-highlight {
	color: var(--e-global-color-accent);
}

.tpm-brand {
	color: var(--e-global-color-txtbrand);
}

/* tpm-cyan : cyan/400 = cyan (seconde ligne du H1 des heros Parcours). */
.tpm-cyan {
	color: var(--e-global-color-cyan);
}

/* tpm-tgyelbd : yellow/200 = tgyelbd (seconde ligne du H1 du hero
   Parcours Développement). */
.tpm-tgyelbd {
	color: var(--e-global-color-tgyelbd);
}

/* --------------------------------------------------------------------------
   tpm-card · Card 268:4711 (conteneur)
   Rayon lg. Surfaces : outline = white + bordure border, plain = white,
   tint = cyan08. Survol : bordure cyan + ombre card-hover.
   -------------------------------------------------------------------------- */
.tpm-card {
	border: 1px solid transparent;
	border-radius: var(--tpm-radius-lg);
	background-color: var(--e-global-color-white);
	transition: border-color var(--tpm-transition), box-shadow var(--tpm-transition);
}

.tpm-card--outline {
	border-color: var(--e-global-color-border);
}

.tpm-card--plain {
	border-color: transparent;
}

.tpm-card--tint {
	background-color: var(--e-global-color-cyan08);
}

/* Card/News 304:6569 : contour cardbd et ombre noir 5 % 0/1/2 au repos,
   image rognée par le rayon */
.tpm-card--news {
	border-color: var(--e-global-color-cardbd);
	box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--e-global-color-black) 5%, transparent);
	overflow: hidden;
}

/* Loop Item actualité : titre lié sans le soulignement des Liens du kit
   (§ 5 B), cartes de même hauteur dans le Carrousel de boucle (la diapo
   prend la hauteur de la plus haute, la carte la remplit). */
.tpm-card--news .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.swiper-slide.e-loop-item:has(> .tpm-card--news) {
	height: auto;
}

.e-loop-item > .e-con.tpm-card--news {
	height: 100%;
}

.tpm-card:hover,
.tpm-card:focus-within {
	border-color: var(--e-global-color-cyan);
	box-shadow: var(--tpm-shadow-card-hover);
}

/* tpm-card--doc · Card/Document 275:4547 (cumulée avec tpm-card
   tpm-card--outline, conteneur en balise a, lien vers le fichier) : rayon md,
   sans le soulignement des Liens du kit (§ 5 B). Survol : celui de tpm-card,
   contour cyan et ombre card-hover (relevé Interaction=Hover). */
.e-con.tpm-card--doc {
	border-radius: var(--tpm-radius-md);
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   tpm-media-veil · voile veil sur un média avec texte superposé (conteneur
   dont le fond est l'image ou la vidéo). Le voile est un calque, jamais une
   opacité sur le média.
   -------------------------------------------------------------------------- */
.tpm-media-veil {
	position: relative;
	isolation: isolate;
}

.tpm-media-veil::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-color: var(--e-global-color-veil);
	pointer-events: none;
}

.tpm-media-veil > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   tpm-media · cadre d'image (conteneur portant un widget Image) : rayon xl,
   ombre noir 10 % 0/20/25/-5 + 0/8/10/-6, dégradé medg1 → medg2 de bas en
   haut posé en calque au-dessus de l'image (médias des dispositifs de
   l'accueil, médias Hero/Page).
   -------------------------------------------------------------------------- */
.e-con.tpm-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--tpm-radius-xl);
	box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--e-global-color-black) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--e-global-color-black) 10%, transparent);
}

.e-con.tpm-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--e-global-color-medg1) 0%, var(--e-global-color-medg2) 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   tpm-embed · cadre média à ratio fixe (vidéo et visite virtuelle 360° des
   pages Site, « media · à remplacer » 286:5500 et 286:5508) : 16:9 relevé
   (640 × 360), conservé à toutes les largeurs, sans hauteur fixe (demande
   Manu du 18/10/2026). Contenu d'attente (image de fond, voile
   tpm-media-veil, pastille, légende) dans le conteneur ; l'embed (widget
   Vidéo ou widget qui porte un iframe) se pose dans ce même conteneur et le
   couvre bord à bord, au-dessus du voile.
   -------------------------------------------------------------------------- */
.e-con.tpm-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.e-con.tpm-embed > .elementor-element:has(iframe, video) {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
}

.e-con.tpm-embed > .elementor-element:has(iframe, video) :is(.elementor-widget-container, .elementor-wrapper) {
	height: 100%;
}

.e-con.tpm-embed :is(iframe, video) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* tpm-embed--wide (cumulée avec tpm-embed) : ratio 2:1 relevé sur la visite
   360° de Coworking (720 × 360, 291:5717), conservé à toutes les largeurs. */
.e-con.tpm-embed.tpm-embed--wide {
	aspect-ratio: 2 / 1;
}

/* --------------------------------------------------------------------------
   tpm-el-video · widget Vidéo d'Elementor (vidéo de présentation des pages
   Site, posée dans le cadre tpm-embed, TPM-00 § 7), classe posée par Manu
   sur le widget (Avancé > Classes CSS, 21/10/2026). Bouton de lecture de la
   superposition d'image : pastille 64 white, icône 24 txtsec. Elementor
   pose fill sur le svg de l'icône : couleur portée par color, reprise par
   fill: currentColor.
   tpm-video-veil (cumulée avec tpm-el-video) : voile veil sur l'image de
   superposition, pour une image exportée sans filtre ; le voile disparaît
   avec la superposition au lancement de la lecture.
   -------------------------------------------------------------------------- */
.tpm-el-video.tpm-video-veil .elementor-custom-embed-image-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--e-global-color-veil);
	pointer-events: none;
}

.tpm-el-video .elementor-custom-embed-play {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-white);
	line-height: 1;
}

.tpm-el-video .elementor-custom-embed-play svg {
	width: 24px;
	height: 24px;
	color: var(--e-global-color-txtsec);
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   tpm-price · rangée prix + mention (cartes de formules de Coworking
   291:6290) : textes alignés sur leur ligne de base, gap 6 dans les
   réglages du conteneur.
   -------------------------------------------------------------------------- */
.e-con.tpm-price {
	align-items: baseline;
}

/* --------------------------------------------------------------------------
   tpm-meta-list · ligne d'infos des heros (Hero/Page Photo plein cadre :
   adresse, accueil) : Liste d'icônes en ligne, icône 20, txtsec sur clair,
   cyan sous tpm-on-dark (choix Manu du 19/10/2026). La Liste d'icônes ne
   pose que fill sur le svg (§ 7) : couleur portée ici, réglage Couleur de
   l'icône vide.
   -------------------------------------------------------------------------- */
.tpm-meta-list .elementor-icon-list-icon {
	color: var(--e-global-color-txtsec);
}

.tpm-on-dark .tpm-meta-list .elementor-icon-list-icon {
	color: var(--e-global-color-cyan);
}

.tpm-meta-list .elementor-icon-list-icon svg {
	fill: currentColor;
}

/* 8 px entre les rangées quand les infos passent à la ligne (ex-CSS
   personnalisé du widget de Novagora, posé par Manu) */
.tpm-meta-list .elementor-icon-list-items.elementor-inline-items {
	row-gap: 8px;
}

/* --------------------------------------------------------------------------
   tpm-checklist · encadré « Inclus dans votre bureau » (Novagora 286:5453) :
   Liste d'icônes en grille de trois colonnes (deux dès le burger, une sous
   576 px, bloc 7), gap 12 / 16, icône check-circle 20 green, réglage
   Couleur de l'icône vide (§ 7).
   -------------------------------------------------------------------------- */
.tpm-checklist .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 16px;
}

.tpm-checklist .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.tpm-checklist .elementor-icon-list-icon {
	color: var(--e-global-color-green);
}

.tpm-checklist .elementor-icon-list-icon svg {
	fill: currentColor;
}

/* tpm-checklist--column (cumulée avec tpm-checklist) : une seule colonne à
   toutes les largeurs (colonnes « Inclus / Facturé / En option » d'Up'Agro
   288:5229). Classe doublée : passe devant les grilles du bloc 7. */
.tpm-checklist.tpm-checklist--column .elementor-icon-list-items {
	grid-template-columns: minmax(0, 1fr);
}

/* tpm-checklist--tight (cumulée avec tpm-checklist--column) : 8 px entre
   les lignes (détails des cartes de formules de Coworking 291:6294). */
.tpm-checklist.tpm-checklist--tight .elementor-icon-list-items {
	gap: 8px;
}

/* tpm-checklist--inline (cumulée avec tpm-checklist) : rangée à retour à la
   ligne, chaque élément à la largeur de son texte, gap 12 / 16, à toutes les
   largeurs (« Inclus dans toutes les formules » de Coworking 291:6354).
   Classe doublée : passe devant les grilles du bloc 7. */
.tpm-checklist.tpm-checklist--inline .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

/* --------------------------------------------------------------------------
   tpm-loop-peek · Carrousel de boucle en effet « peek » sans défilement
   infini (« Vie de la pépinière » des pages Site, ex-CSS personnalisé du
   widget posé par Manu le 19/10/2026) : dès le burger, la zone de
   défilement est plus étroite que la colonne et la carte suivante dépasse
   à droite, coupée par le bord de l'écran. Cartes de 302 px minimum ; les
   24 px sont le réglage « Espace entre » du widget, à garder identiques
   (bloc 7).
   -------------------------------------------------------------------------- */
body:has(.tpm-loop-peek) {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   tpm-logo-box · zone logo des cartes de résidents (Loop Item entreprise,
   Logo · <entreprise> 286:10616), sur le conteneur : ratio 2:1 à toutes les
   largeurs ; fond, rayon et débordement dans ses réglages natifs. Le widget
   Image couvre toute la zone, logo contenu et centré. Sans image mise en
   avant, le widget est vide et la zone garde ses dimensions.
   -------------------------------------------------------------------------- */
.e-con.tpm-logo-box {
	position: relative;
	aspect-ratio: 2 / 1;
	min-height: 0;
	box-shadow: 0 0 0 1px var( --e-global-color-bgsubtle );
}

.tpm-logo-box > .elementor-widget-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.tpm-logo-box > .elementor-widget-image :is(.elementor-widget-container, a) {
	display: block;
	width: 100%;
	height: 100%;
}

.tpm-logo-box > .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}

/* --------------------------------------------------------------------------
   tpm-icon-tile · pastille d'icône (conteneur à taille fixe portant un widget
   Icône : cartes de missions, engagements, Card/Document) : SVG centré
   verticalement, même correctif que tpm-device__picto. Fond, taille et rayon
   dans les réglages du conteneur.
   tpm-duo-cyan · widget Icône (ou bloc) dont l'icône Phosphor Duotone a son
   second tracé en cyan dans Figma (Card 268:4711, Card/Document 275:4547,
   engagements de Présentation & missions) ; tracé principal en couleur du
   widget.
   -------------------------------------------------------------------------- */
.e-con.tpm-icon-tile {
	line-height: 1;
}

.tpm-duo-cyan svg [opacity] {
	fill: var(--e-global-color-cyan);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   tpm-gallery · Galerie · mosaïque des pages Site (Novagora 757:7287,
   Up'Agro 288:5250, Coworking 461:6746, Mobile 452:8058), sur un widget
   Galerie basique (lien « Fichier média », lightbox « Oui », légende
   « Aucune »). Cinq blocs au plus : la 1re photo en grand à gauche, les
   suivantes à droite ; grille de 4 colonnes sur 2 rangées, gap 16, rayon lg,
   hauteur proportionnelle à la largeur (1312 × 480 en Widescreen).
   Disposition selon le nombre de photos, sans script (décision Manu du
   20/10/2026) : 1 = moitié gauche, comme la grande photo (demande Manu,
   pleine largeur en mobile) ; 2 = deux moitiés ; 3 = deux photos
   empilées à droite (maquette Coworking) ; 4 = deux vignettes puis une
   panoramique ; 5 = maquette ; 6 et plus = quatre photos, puis la 5e
   recouverte par la tuile « +X photos » (tpm-gallery__more, insérée dans son
   lien par assets/js/tpm-gallery.js : le clic ouvre la visionneuse sur la
   5e photo). Photos 6 et suivantes masquées, gardées dans le diaporama de la
   visionneuse. Tuile : fond bgfooter (navy/950), « +X photos » h4 white,
   « Voir toute la galerie » bodysm white, gap 4. Survol : zoom de 4 % de la
   photo, libellé de la tuile souligné. Légendes jamais affichées sur les
   vignettes (visionneuse seulement). Sans photo, bloc masqué hors éditeur.
   Disposition mobile dès 767 px (bloc 7). Comptage par :nth-of-type (seules
   les figure comptent).
   -------------------------------------------------------------------------- */
.tpm-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 16px;
	aspect-ratio: 1312 / 480;
	margin: 0;
}

/* Saut de ligne de WordPress sans le support HTML5 des galeries */
.tpm-gallery .gallery > br {
	display: none;
}

.tpm-gallery .gallery .gallery-item {
	position: relative;
	width: auto;
	max-width: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.tpm-gallery .gallery-item:nth-of-type(n + 6),
.tpm-gallery .gallery-caption {
	display: none;
}

/* Placement selon le nombre de photos */
.tpm-gallery .gallery-item:first-of-type {
	grid-area: 1 / 1 / 3 / 3;
}

.tpm-gallery .gallery-item:nth-of-type(2):last-of-type {
	grid-area: 1 / 3 / 3 / 5;
}

.tpm-gallery .gallery:has(> .gallery-item:nth-of-type(3):last-of-type) > .gallery-item:not(:first-of-type) {
	grid-column: 3 / 5;
}

.tpm-gallery .gallery-item:nth-of-type(4):last-of-type {
	grid-column: 3 / 5;
}

/* Cadre : l'icône couvre la cellule, le lien porte le rayon et rogne le
   zoom ; l'anneau de focus du lien (bloc 6) reste visible, la figure ne
   rognant rien. */
.tpm-gallery .gallery-icon {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

.tpm-gallery .gallery-icon > a,
.tpm-gallery .gallery-icon:not(:has(> a)) {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	isolation: isolate; /* coins arrondis conservés pendant le zoom (Safari) */
	border-radius: var(--tpm-radius-lg);
	color: inherit;
	text-decoration: none;
}

.tpm-gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform var(--tpm-transition);
}

@media (hover: hover) {
	.tpm-gallery .gallery-icon > a:hover img {
		transform: scale(1.04);
	}
}

/* Tuile « +X photos » (balisage posé par tpm-gallery.js) */
.tpm-gallery .tpm-gallery__more {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--e-global-color-bgfooter);
	color: var(--e-global-color-white);
	text-align: center;
}

.tpm-gallery .tpm-gallery__count {
	font-family: var(--e-global-typography-h4-font-family);
	font-size: calc( var(--e-global-typography-h4-font-size) - 2px );
	font-weight: var(--e-global-typography-h4-font-weight);
	line-height: var(--e-global-typography-h4-line-height);
	letter-spacing: var(--e-global-typography-h4-letter-spacing);
}

.tpm-gallery .tpm-gallery__label {
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
	text-underline-offset: 0.15em;
}

.tpm-gallery a:is(:hover, :focus-visible) .tpm-gallery__label {
	text-decoration: underline;
}

/* Galerie vide : bloc masqué hors éditeur, conteneur compris s'il ne porte
   que la galerie */
body:not(.elementor-editor-active) .tpm-gallery:not(:has(.gallery-item)),
body:not(.elementor-editor-active) .e-con:has(> .tpm-gallery:only-child):not(:has(.gallery-item)) {
	display: none;
}

/* Visionneuse d'Elementor (Réglages du site > Visionneuse, réglée à la main,
   § 11 A.4) : légende du média en bodysm, couleur du réglage Couleur du
   texte. Seuls styles de la visionneuse hors réglages, avec le focus
   ci-dessous. */
.elementor-lightbox .elementor-slideshow__title {
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
}

/* Focus dans la visionneuse (demande Manu du 20/10/2026) : halo blanc de
   4 px retiré des flèches, de la barre d'outils et de la fermeture (règle
   de focus commune du thème, box-shadow 0 0 0 4px blanc sur
   [tabindex]:not([tabindex="-1"]), a, button, champs) ; contour inchangé.
   Classe doublée : passe devant cette règle (0,3,0) quel que soit l'ordre
   de chargement. */
.elementor-lightbox.elementor-lightbox :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	box-shadow: none;
}

/* Flèches précédente / suivante : sans contour de focus (décision Manu du
   20/10/2026, seule exception au § 7) ; elles doublent les touches ← et →
   du clavier. Barre d'outils et fermeture gardent leur contour. */
.elementor-lightbox.elementor-lightbox .elementor-swiper-button:is(:focus, :focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   tpm-floating-cta · bouton flottant mobile « Demander un rendez-vous »
   (widget Bouton, Primary Large). Masqué hors mobile. En mobile (bloc 7) :
   largeur du conteneur (450 centré de 480 à 575 px, 15 px des bords sous
   480 px), 20 px du bas. État masqué : tpm-floating-cta--hidden
   (posée par JS dans un lot ultérieur quand le CTA, le footer ou le menu sont
   visibles).
   -------------------------------------------------------------------------- */
.elementor-widget-button.tpm-floating-cta {
	display: none;
}

/* --------------------------------------------------------------------------
   tpm-header · Header (instance 225:2808) et Header/Mobile 405:6941, § 7
   Conteneur racine du template Header unique. Variante White par défaut :
   dans le flux, fond white réglé sur le conteneur, texte txtsec, logo fond
   clair. Variante Transparent quand la première section de la page porte
   tpm-hero--dark (premier conteneur d'un document Elementor autre que header
   et footer) : position absolue sur le hero, fond transparent, texte white,
   logo fond sombre. Header
   sticky (Elementor Pro) : dès les effets de défilement
   (elementor-sticky--effects), variante White à fond white, 64 px de haut,
   quelle que soit la page. Les widgets
   ne portent aucune couleur de texte : liens et burger héritent de color.
   Le CTA « Demander un rendez-vous » est le dernier item du menu, classe
   tpm-menu-cta (Primary Small en desktop, Primary Large en bas du menu ouvert).
   -------------------------------------------------------------------------- */
.tpm-header {
	position: relative;
	z-index: 100;
	min-height: var(--tpm-header-height); /* réglage Hauteur min du conteneur laissé vide */
	/* Filet du header, toutes variantes. !important : la bordure du conteneur
	   posée par Elementor passe devant sinon (relevé par Manu le 12/10/2026). */
	border-bottom: 1px solid var(--e-global-color-hdrline) !important;
	color: var(--e-global-color-txtsec);
	transition: background-color var(--tpm-transition), color var(--tpm-transition);
}

body:has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	/* Fond white du conteneur (réglage Elementor, 0,4,0) retiré : ce
	   sélecteur (0,8,1) passe devant sans !important. */
	background-color: transparent;
	color: var(--e-global-color-white);
}

/* Sticky : dès les effets de défilement, fond white et 64 px de haut ; la
   variante Transparent ne s'applique plus (texte txtsec, logo fond clair).
   Remplace le CSS personnalisé du conteneur Header. */
.tpm-header.elementor-sticky--effects {
	min-height: 64px;
	background-color: var(--e-global-color-white);
}

/* Spacer du sticky (.elementor-sticky__spacer) : clone invisible du header
   qu'Elementor insère dans le flux et recrée à chaque resize (barre d'adresse
   mobile masquée en fin de défilement), avec les classes du moment. Recréé
   avec elementor-sticky--effects, il prenait la hauteur du sticky (64) et,
   sur un hero foncé, revenait dans le flux : contenu poussé d'environ 65 px
   (relevé Manu du 25/10/2026). Toujours aux dimensions du header au repos :
   hauteur du header (82 / 64) ; hors flux sur un hero foncé, comme la
   variante Transparent. Pas de display: none : le script peut lire la
   largeur du spacer pour dimensionner le header fixe. */
.e-con.tpm-header.elementor-sticky__spacer {
	min-height: var(--tpm-header-height);
}

body:has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header.elementor-sticky__spacer {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
}

/* Logos : fond clair par défaut, fond sombre en variante Transparent menu
   fermé hors sticky. Les deux restent visibles dans l'éditeur. */
body:not(.elementor-editor-active) .tpm-header .tpm-logo--on-dark {
	display: none;
}

body:not(.elementor-editor-active):has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) .tpm-logo--on-dark {
	display: flex;
}

body:not(.elementor-editor-active):has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) .tpm-logo--on-light {
	display: none;
}

/* Menu principal (desktop) : couleur héritée, sans soulignement du kit ;
   survol et page courante soulignés */
.tpm-header .elementor-nav-menu--main .elementor-item {
	color: inherit;
	text-decoration: none;
}

.tpm-header .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Sous-menus au survol : fond white, rayon sm, ombre de carte */
.tpm-header .elementor-nav-menu--main .sub-menu {
	padding: 8px;
	border-radius: var(--tpm-radius-sm);
	background-color: var(--e-global-color-white);
	box-shadow: var(--tpm-shadow-card-hover);
}

.tpm-header .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	padding: 12px 16px;
	border: 0;
	border-radius: var(--tpm-radius-sm);
	background-color: transparent;
	color: var(--e-global-color-txtsec);
	text-decoration: none;
}

.tpm-header .elementor-nav-menu--main .sub-menu .elementor-sub-item:is(:hover, :focus-visible, .elementor-item-active) {
	background-color: var(--e-global-color-bgsubtle);
	color: var(--e-global-color-primary);
}

/* tpm-menu-cta · item « Demander un rendez-vous » du menu principal, classe
   posée sur l'élément de menu (Apparence > Menus > Classes CSS). Style
   Button Primary Small (§ 7) : fond accent, texte text, police accent,
   padding 9/16, 40 px, rayon full, survol limehov, sans soulignement ni
   pointeur du menu, dans les deux variantes du header. !important sur le
   padding, la couleur et la typographie : les réglages du widget Menu
   (sélecteurs .elementor-element-<id>, typographie nav) passent sinon
   devant (relevé par Manu sur la préprod le 12/10/2026). */
.tpm-header .elementor-nav-menu--main .tpm-menu-cta {
	align-self: center;
}

.tpm-header .elementor-nav-menu .tpm-menu-cta > a.elementor-item {
	display: inline-flex;
	flex-grow: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 15px !important;
	border: 0;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-text) !important;
	font-size: 14px !important;
	font-weight: var(--e-global-typography-accent-font-weight) !important;
	line-height: var(--e-global-typography-accent-line-height) !important;
	letter-spacing: 0 !important;
	text-align: center;
	transition: background-color var(--tpm-transition), color var(--tpm-transition);
}

.tpm-header .elementor-nav-menu .tpm-menu-cta > a.elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
	background-color: var(--e-global-color-limehov);
	color: var(--e-global-color-text);
	text-decoration: none;
}

.tpm-header .elementor-nav-menu .tpm-menu-cta > a.elementor-item::before,
.tpm-header .elementor-nav-menu .tpm-menu-cta > a.elementor-item::after {
	display: none;
}

.tpm-menu-cta__short {
	display: none;
}

@media (min-width: 992px) and (max-width: 1439px) {
	.tpm-menu-cta__long {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.tpm-menu-cta__short {
		display: inline;
	}
}

/* Burger : retour au libellé complet en Primary Large pleine largeur */
@media (max-width: 991px) {
	/*
	.tpm-menu-cta__long {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
	.tpm-menu-cta__short {
		display: none;
	}
	*/
}

/* Burger : couleur héritée, sans fond, cible tactile 44 px */
.tpm-header .elementor-menu-toggle {
	box-sizing: border-box;
	min-width: var(--tpm-touch-target);
	min-height: var(--tpm-touch-target);
	padding: 10px;
	border: 0;
	border-radius: var(--tpm-radius-sm);
	background-color: transparent;
	color: inherit;
}

.tpm-header .elementor-menu-toggle svg {
	/*fill: currentColor;*/
}

/* Burger en variante Transparent (menu fermé, hors sticky) : white. La
   couleur du burger réglée sur le widget Menu (variante White) pose color
   sur le bouton et fill sur le svg ; ce sélecteur passe devant sans
   !important. Menu ouvert et sticky : couleur du widget. */
body:has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) .elementor-menu-toggle {
	color: var(--e-global-color-white);
}

body:has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) .elementor-menu-toggle svg {
	fill: var(--e-global-color-white);
}

/* Items du menu desktop en variante Transparent (menu fermé, hors sticky) :
   white au repos, au survol, au focus et sur la page courante, l'état
   restant porté par le soulignement (même logique que Footer link 315:6788
   sur fond sombre). Le widget Menu pose color et fill sur l'item avec les
   couleurs de la variante White ; fill colore la flèche des sous-menus
   (svg de .sub-arrow), d'où une flèche foncée au repos tant que seuls les
   états étaient surchargés. Ce sélecteur passe devant sans !important. */
body:has(.elementor:not([data-elementor-type="header"], [data-elementor-type="footer"]) > .e-con:first-child.tpm-hero--dark) .tpm-header:not(.elementor-sticky--effects, :has(.elementor-menu-toggle.elementor-active)) .elementor-nav-menu--main .elementor-item {
	color: var(--e-global-color-white);
	fill: var(--e-global-color-white);
}

/* --------------------------------------------------------------------------
   tpm-hero--dark · hero foncé en première section (conteneur pleine largeur,
   contenu boxed). Le padding haut réglé dans Elementor s'applique sur
   .e-con-inner ; le conteneur externe reçoit seulement la hauteur du header
   (--tpm-header-height : 82, puis 64 dès le burger) : le contenu ne passe
   pas sous le header Transparent.
   -------------------------------------------------------------------------- */
.e-con.tpm-hero--dark {
	padding-top: var(--tpm-header-height);
}

/* --------------------------------------------------------------------------
   tpm-breadcrumb · Breadcrumb 295:11649 (widget Shortcode contenant
   [rank_math_breadcrumb], § 8.16). Rank Math rend : nav.rank-math-breadcrumb
   > p > a, span.separator (« / »), span.last (page courante). Chemin tiré
   des pages parentes WordPress. Police caption, gap 8. Sur clair : liens et
   séparateurs txtsec, page courante primary. Sur sombre (tpm-on-dark) :
   liens et séparateurs odsubtle, page courante odmuted. Sans soulignement
   au repos (la Typographie du kit souligne tous les liens), souligné au
   survol et au focus : aucun état de survol dans Figma (TPM-02 n° 49).
   Passage à la ligne autorisé sur les écrans étroits.
   -------------------------------------------------------------------------- */
.tpm-breadcrumb .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 8px;
	margin: 0;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-caption-font-family);
	font-size: var(--e-global-typography-caption-font-size);
	font-weight: var(--e-global-typography-caption-font-weight);
	line-height: var(--e-global-typography-caption-line-height);
	letter-spacing: var(--e-global-typography-caption-letter-spacing);
}

.tpm-breadcrumb .rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tpm-transition);
}

.tpm-breadcrumb .rank-math-breadcrumb a:is(:hover, :focus-visible) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.tpm-breadcrumb .rank-math-breadcrumb .last {
	color: var(--e-global-color-primary);
}

.tpm-on-dark .tpm-breadcrumb .rank-math-breadcrumb p {
	color: var(--e-global-color-odsubtle);
}

.tpm-on-dark .tpm-breadcrumb .rank-math-breadcrumb .last {
	color: var(--e-global-color-odmuted);
}

/* --------------------------------------------------------------------------
   tpm-eyebrow · surtitre texte précédé d'un filet (widget Titre, balise p),
   sans maquette (décision Manu du 23/10/2026, hero de la Liste
   Actualités) : filet 24 × 2 cyan, rayon full, gap 12, centré sur la
   ligne. Police (overline) et couleur (txtsec) : réglages globaux du
   widget, jamais ici (§ 8.8).
   -------------------------------------------------------------------------- */
.tpm-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.tpm-eyebrow .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 24px;
	height: 2px;
	border-radius: var(--tpm-radius-full);
	background: var(--e-global-color-cyan);
}

/* --------------------------------------------------------------------------
   tpm-archive-context · surtitre du hero de la Liste Actualités (cumulé
   avec tpm-eyebrow), texte du shortcode [tpm_archive_context]
   (includes/news-archive.php) : « Actualités · Catégorie » ou
   « Actualités · Mot-clé ». Sur la page des articles (body.blog), le
   shortcode est vide : widget masqué, l'enveloppe vide d'Elementor
   prendrait sinon un pas de gap du hero.
   -------------------------------------------------------------------------- */
body.blog .tpm-archive-context {
	display: none;
}

/* --------------------------------------------------------------------------
   tpm-anchor-nav · Anchor nav 451:7228 (§ 7, § 8.21)
   Section de premier niveau qui porte le widget Menu (mega-menu), items en
   liens d'ancre. Collante sous le header sticky (64 px, barre
   d'administration comprise). Couleurs (repos txtsec, survol et actif
   primary), police nav, espacements et défilement horizontal : réglages du
   widget. La classe porte l'indicateur (filet bas 2 px : transparent au
   repos, cyan45 au survol, cyan sur la section visible) et l'arrêt des
   cibles sous la barre. L'état actif (classe e-current, qui déclenche les
   couleurs Actif) est posé par le scrollspy natif du widget ;
   assets/js/tpm-anchor-nav.js garde seulement l'item actif visible quand
   la barre défile horizontalement.
   -------------------------------------------------------------------------- */
.e-con.tpm-anchor-nav {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-sticky-height));
	z-index: 90;
}
@media(max-width: 600px) {
	.e-con.tpm-anchor-nav {
		--wp-admin--admin-bar--height: 0px;
	}
}

.tpm-anchor-nav .e-n-menu-title {
	box-shadow: inset 0 -2px 0 0 transparent;
	transition: box-shadow var(--tpm-transition);
}

.tpm-anchor-nav .e-n-menu-title:hover {
	box-shadow: inset 0 -2px 0 0 var(--e-global-color-cyan45);
}

.tpm-anchor-nav .e-n-menu-title.e-current {
	box-shadow: inset 0 -2px 0 0 var(--e-global-color-cyan);
}

/* Liens sans le soulignement des Liens du kit (§ 5 B) */
.tpm-anchor-nav .e-n-menu-title-container {
	text-decoration: none;
}

/* Cibles des ancres : arrêt sous le header sticky et la barre (53 px,
   filet compris), au début du contenu de la section (son padding haut,
   variable --padding-top d'Elementor, est retranché ; jamais de padding haut
   en % sur une cible, scroll-margin n'accepte pas les pourcentages), puis
   descendu de --tpm-scroll-offset (déclarée sur body, valeurs par palier au
   bloc 7). Écart propre à une section : redéclarer --tpm-scroll-offset dans
   son CSS personnalisé (selector { --tpm-scroll-offset: 48px; }), qui passe
   devant la valeur héritée de body. !important posé par Manu (16/10/2026). */
body:has(.tpm-anchor-nav) .e-con[id] {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-sticky-height) + 53px - var(--padding-top) + var(--tpm-scroll-offset)) !important;
}

/* --------------------------------------------------------------------------
   tpm-filter-pills · barre des thèmes d'actualités (Liste Actualités,
   Filtres 270:4690), sur le widget Shortcode [tpm_terms_nav]
   (includes/terms-nav.php, TPM-00 § 8.25), balisage nav.tpm-terms-nav >
   ul > li > a. Pastilles de 38 px (zone cliquable portée à 46 px par
   ::after, § 6), padding 8/16, gap 8, rayon full, police nav ; repos : fond
   white, contour 1 px primary (border/strong), texte primary ; survol :
   contour cyan (§ 7, sans maquette) ; page courante (aria-current) : fond
   et contour secondary (bg/dark), texte white. Liste sur une ligne,
   défilement horizontal natif, barre de défilement fine aux couleurs du
   kit, 4 px autour des pastilles pour l'anneau de focus. Fondu de bord
   white de 48 px (32 en Mobile, bloc 7) du seul côté où la liste continue,
   d'après les états posés par assets/js/tpm-terms-nav.js (sans script :
   fondu droit fixe) ; calque calé sur la hauteur des pastilles, au-dessus
   de la barre de défilement. Sélecteurs à deux classes : passent devant
   les Liens du kit (.elementor-kit-N a). Fond de section white attendu.
   -------------------------------------------------------------------------- */
.elementor-widget.tpm-filter-pills {
	min-width: 0;
	max-width: 100%;
}

.tpm-terms-nav {
	--tpm-terms-fade: 48px;
	position: relative;
}

.tpm-terms-nav .tpm-terms-nav__list {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 -4px;
	padding: 4px 4px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--tpm-terms-fade);
	scrollbar-width: thin;
	scrollbar-color: var(--e-global-color-border) transparent;
	list-style: none;
}

.tpm-terms-nav .tpm-terms-nav__item {
	flex: none;
	margin: 0;
	padding: 0;
}

.tpm-terms-nav .tpm-terms-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--e-global-color-primary);
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-nav-font-family), sans-serif;
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
	white-space: nowrap;
	text-decoration: none;
	transition: border-color var(--tpm-transition), background-color var(--tpm-transition), color var(--tpm-transition);
}

.tpm-terms-nav .tpm-terms-nav__link::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.tpm-terms-nav .tpm-terms-nav__link:hover {
	border-color: var(--e-global-color-cyan);
	color: var(--e-global-color-primary);
	text-decoration: none;
}

.tpm-terms-nav .tpm-terms-nav__link[aria-current="page"],
.tpm-terms-nav .tpm-terms-nav__link[aria-current="page"]:hover {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-white);
}

.tpm-terms-nav::before,
.tpm-terms-nav::after {
	content: "";
	position: absolute;
	top: 4px;
	z-index: 1;
	width: var(--tpm-terms-fade);
	height: 38px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--tpm-transition);
}

.tpm-terms-nav::before {
	left: -4px;
	background: linear-gradient(to right, var(--e-global-color-white), transparent);
}

.tpm-terms-nav::after {
	right: -4px;
	background: linear-gradient(to left, var(--e-global-color-white), transparent);
}

.tpm-terms-nav:not(.is-ready)::after,
.tpm-terms-nav.is-overflowing:not(.is-scroll-start)::before,
.tpm-terms-nav.is-overflowing:not(.is-scroll-end)::after {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   tpm-filter-pills sur le widget Filtre de taxonomie d'Elementor Pro (page
   Événements passés 49443, Filtres 265:3940, TPM-00 § 8.27), balisage
   search.e-filter > button.e-filter-item[aria-pressed] : mêmes pastilles que
   la barre des thèmes d'actualités (38 px, zone cliquable de 46 px, padding
   8/16, gap 8, rayon full, police nav ; repos fond white, contour primary,
   texte primary ; survol contour cyan ; terme actif, aria-pressed="true",
   fond et contour secondary, texte white). Liste sur une ligne, défilement
   horizontal natif (option Défilement horizontal du widget, portée aussi
   ici), barre fine, 4 px autour des pastilles pour l'anneau de focus.
   Fondu de bord white de 48 px (32 en Mobile, bloc 7) du seul côté où la
   liste continue, comme la barre des thèmes : calques posés sur le widget,
   d'après les états is-ready, is-overflowing, is-scroll-start,
   is-scroll-end de assets/js/tpm-filter-pills.js (sans script : fondu droit
   fixe). Sélecteurs à quatre classes : passent devant le CSS du widget
   (chargé après tpm.css) et les styles des boutons du kit (button, 0,1,1 à
   0,2,1), sans !important.
   -------------------------------------------------------------------------- */
.elementor-widget.tpm-filter-pills:has(.e-filter) {
	--tpm-terms-fade: 48px;
	position: relative;
}

.elementor-widget.tpm-filter-pills .e-filter {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 8px;
	margin: 0 -4px;
	padding: 4px 4px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--tpm-terms-fade);
	white-space: nowrap;
	scrollbar-width: thin;
	scrollbar-color: var(--e-global-color-border) transparent;
}

.elementor-widget.tpm-filter-pills:has(.e-filter)::before,
.elementor-widget.tpm-filter-pills:has(.e-filter)::after {
	content: "";
	position: absolute;
	top: 4px;
	z-index: 1;
	width: var(--tpm-terms-fade);
	height: 38px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--tpm-transition);
}

.elementor-widget.tpm-filter-pills:has(.e-filter)::before {
	left: -4px;
	background: linear-gradient(to right, var(--e-global-color-white), transparent);
}

.elementor-widget.tpm-filter-pills:has(.e-filter)::after {
	right: -4px;
	background: linear-gradient(to left, var(--e-global-color-white), transparent);
}

.elementor-widget.tpm-filter-pills:has(.e-filter):not(.is-ready)::after,
.elementor-widget.tpm-filter-pills.is-overflowing:not(.is-scroll-start)::before,
.elementor-widget.tpm-filter-pills.is-overflowing:not(.is-scroll-end)::after {
	opacity: 1;
}

.elementor-widget.tpm-filter-pills .e-filter .e-filter-item {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	box-sizing: border-box;
	min-height: 38px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--e-global-color-primary);
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-white);
	box-shadow: none;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-nav-font-family), sans-serif;
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--tpm-transition), background-color var(--tpm-transition), color var(--tpm-transition);
}

.elementor-widget.tpm-filter-pills .e-filter .e-filter-item::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.elementor-widget.tpm-filter-pills .e-filter .e-filter-item:is(:hover, :focus) {
	border-color: var(--e-global-color-cyan);
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-primary);
}

.elementor-widget.tpm-filter-pills .e-filter .e-filter-item[aria-pressed="true"],
.elementor-widget.tpm-filter-pills .e-filter .e-filter-item[aria-pressed="true"]:is(:hover, :focus) {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-white);
}

/* --------------------------------------------------------------------------
   tpm-segmented · onglets de rubrique Actualités / Agenda (hero des listes,
   Onglets rubrique 265:3599), sur le conteneur : fond white, padding 4,
   gap 4, rayon full dans ses réglages natifs. tpm-segmented__item sur
   chaque widget Bouton (police nav par le global du widget) : padding
   10/24, rayon full, sans fond, texte txtsec ; survol fond bgsubtle et
   texte primary (sans maquette) ; tpm-segmented__item--active (onglet de
   la page, aria-current posé dans le lien) : fond secondary, texte white.
   -------------------------------------------------------------------------- */
.elementor-widget-button.tpm-segmented__item .elementor-button {
	padding: 10px 24px;
	border-radius: var(--tpm-radius-full);
	background-color: transparent;
	box-shadow: none;
	color: var(--e-global-color-txtsec);
	text-decoration: none;
	transition: background-color var(--tpm-transition), color var(--tpm-transition);
}

.elementor-widget-button.tpm-segmented__item .elementor-button:hover {
	background-color: var(--e-global-color-bgsubtle);
	color: var(--e-global-color-primary);
	text-decoration: none;
}

.elementor-widget-button.tpm-segmented__item--active .elementor-button,
.elementor-widget-button.tpm-segmented__item--active .elementor-button:hover {
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-white);
}

/* --------------------------------------------------------------------------
   tpm-pagination · pagination numérotée d'un Loop Grid (Pagination
   265:3715), sur le widget (réglages : Nombres + Précédent / Suivant,
   raccourcie, police nav par le global, espacement entre éléments 0,
   marge haute 48). Cases de 44 px, gap 8, contour 1 px border, rayon md,
   texte primary ; Précédent / Suivant de 120 px ; page courante : fond et
   contour secondary, texte white ; survol : contour cyan (§ 7, sans
   maquette) ; Précédent ou Suivant sans lien (première ou dernière page)
   à 50 % d'opacité (sans maquette). Libellés dans
   span.tpm-pagination__label, masqués visuellement en Mobile (bloc 7) où
   les flèches seules restent visibles. Sélecteurs à trois classes : passent
   devant les Liens du kit et les réglages de couleur du widget.
   -------------------------------------------------------------------------- */
.tpm-pagination .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tpm-pagination .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	min-width: var(--tpm-touch-target);
	height: var(--tpm-touch-target);
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--e-global-color-border);
	border-radius: var(--tpm-radius-md);
	background-color: transparent;
	color: var(--e-global-color-primary);
	text-decoration: none;
	transition: border-color var(--tpm-transition), background-color var(--tpm-transition), color var(--tpm-transition);
}

.tpm-pagination .elementor-pagination .page-numbers:is(.prev, .next) {
	min-width: 120px;
}

.tpm-pagination .elementor-pagination a.page-numbers:hover {
	border-color: var(--e-global-color-cyan);
	color: var(--e-global-color-primary);
	text-decoration: none;
}

.tpm-pagination .elementor-pagination .page-numbers.current {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-white);
}

.tpm-pagination .elementor-pagination span.page-numbers:is(.prev, .next) {
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   tpm-news-une · Loop Item « Actualité à la une » (À la une 270:4714),
   modèle alternatif en position 1 du Loop Grid tpm-news-grid, sur toute la
   largeur de la grille, page 1 seulement (includes/news-archive.php) ;
   sur le conteneur racine. Titre lié sans le soulignement des Liens du kit
   (§ 5 B). tpm-news-une__media sur le widget Image (image mise en avant) :
   ratio 760 × 420 conservé à toutes les largeurs, image recadrée (cover),
   rayon dans les réglages du widget.
   -------------------------------------------------------------------------- */
.tpm-news-une .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.tpm-news-une__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 760 / 420;
	object-fit: cover;

    border: 1px solid var(--e-global-color-cardbd);
    box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--e-global-color-black) 5%, transparent);
}

.tpm-news-une__media img:hover {
	border-color: var(--e-global-color-cyan);
	box-shadow: var(--tpm-shadow-card-hover);
}

.tpm-news-une__texte .elementor-widget-heading a {
}

/* --------------------------------------------------------------------------
   Gabarit Détail · Article (266:4116, TPM-00 § 8.26)
   tpm-article-media · widget Image de l'image mise en avant (Image
   principale 272:4717) : ratio 1056 × 560 conservé à toutes les largeurs,
   recadrage cover ; rayon dans les réglages du widget.
   -------------------------------------------------------------------------- */
.tpm-article-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1056 / 560;
	object-fit: cover;
}

/* tpm-post-tags · étiquettes de l'article (Thèmes 272:4753), widget Infos de
   la publication, élément Termes (Étiquettes, liées) : une pastille par
   étiquette, Tag Neutral 187:657 (padding 4/12, contour 1 px border, fond
   bgsubtle, rayon full, captionb txtsec), gap 8 ; survol contour cyan (§ 7,
   sans maquette). Les virgules que le widget place entre les termes sont
   des nœuds texte sans balise : masquées par une taille de police nulle sur
   la liste, la taille étant rendue aux pastilles. */
.tpm-post-tags .elementor-icon-list-items,
.tpm-post-tags .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.tpm-post-tags .elementor-post-info__terms-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0;
}

.tpm-post-tags .elementor-post-info__terms-list .elementor-post-info__terms-list-item {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: 1px solid var(--e-global-color-border);
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-bgsubtle);
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-captionb-font-family), sans-serif;
	font-size: var(--e-global-typography-captionb-font-size);
	font-weight: var(--e-global-typography-captionb-font-weight);
	line-height: var(--e-global-typography-captionb-line-height);
	text-decoration: none;
	transition: border-color var(--tpm-transition);
}

.tpm-post-tags .elementor-post-info__terms-list .elementor-post-info__terms-list-item:hover {
	border-color: var(--e-global-color-cyan);
	color: var(--e-global-color-txtsec);
}

/* tpm-share · boutons LinkedIn et Facebook (Partager 272:4758), widget
   Boutons de partage (vue Texte), et tpm-share-copy · bouton « Copier le
   lien » (widget Bouton, assets/js/tpm-copy-link.js) : pastilles padding
   6/12, contour 1 px border, rayon full, texte primary, police captionb par
   le global des widgets ; survol contour cyan (§ 7, sans maquette) ; zone
   cliquable portée à 44 px par ::after (§ 6). Contour en box-shadow
   intérieur, comme les boutons du thème. Classes doublées : passent devant
   les couleurs officielles et les tailles du widget de partage. */
.tpm-share.tpm-share .elementor-share-btn.elementor-share-btn,
.elementor-widget-button.tpm-share-copy .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 32px;
	padding: 7px 12px;
	overflow: visible;
	border: 0;
	border-radius: var(--tpm-radius-full);
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--e-global-color-border);
	color: var(--e-global-color-primary);
	text-decoration: none;
	transition: box-shadow var(--tpm-transition);
}

.tpm-share.tpm-share .elementor-share-btn.elementor-share-btn:hover,
.elementor-widget-button.tpm-share-copy .elementor-button:hover {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--e-global-color-cyan);
	color: var(--e-global-color-primary);
}

.tpm-share.tpm-share .elementor-share-btn.elementor-share-btn::after,
.elementor-widget-button.tpm-share-copy .elementor-button::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

.tpm-share.tpm-share .elementor-share-btn__icon {
	display: none;
}

.tpm-share.tpm-share .elementor-share-btn__text {
	padding: 0;
	color: inherit;
}

.tpm-share.tpm-share .elementor-share-btn__title {
	color: inherit;
}

/* --------------------------------------------------------------------------
   tpm-agenda · Loop Items agenda (Card/Agenda item 265:4237, TPM-00 § 8.28),
   sur le conteneur racine, cumulée avec tpm-agenda--row (ligne : 03 Agenda
   de l'accueil, listes de l'agenda) ou tpm-agenda--card (carte, cumulée avec
   tpm-card tpm-card--outline : grille de l'agenda, « Autres événements »).
   Pastille de date tpm-agenda__date : fond secondary (bg/dark) portée par la
   classe, comme le fond des Badge et Tag (§ 8.8). Mois de la ligne en accent
   à 65 % (lime 65 % de Figma, sans global : opacité du texte, même rendu).
   Ligne à un seul modèle pour les deux tons de Figma (décision Manu du
   27/10/2026) : réglages des widgets au ton On light ; sous tpm-on-dark
   (section foncée), ton On dark par la classe : pastille bgcard, tag Cyan
   (fond cyan12, contour cyan45, texte cyan, 03 Agenda de l'accueil, TPM-02
   n° 30 et n° 75), lieu, icônes et extrait
   odmuted, titre white ; lien par tpm-link. Classes doublées : passent
   devant les réglages des widgets du Loop Item (0,4,0 à 0,5,1), sans
   !important. Titre lié sans le soulignement des Liens du kit (§ 5 B).
   -------------------------------------------------------------------------- */
.e-con.tpm-agenda__date {
	background-color: var(--e-global-color-secondary);
}

.tpm-agenda--row .tpm-agenda__month {
	opacity: 0.65;
}

.tpm-agenda--card .tpm-agenda__month .elementor-heading-title {
	text-transform: uppercase;
}

.e-con.tpm-agenda__content,
.e-con.tpm-agenda__place {
	min-width: 0;
}

.tpm-agenda__icon .elementor-icon {
	display: flex;
}

.tpm-agenda .tpm-agenda__title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.swiper-slide.e-loop-item:has(> .tpm-agenda--card) {
	height: auto;
}

.e-loop-item > .e-con.tpm-agenda--card {
	height: 100%;
}

.tpm-on-dark .e-con.tpm-agenda--row .e-con.tpm-agenda__date.tpm-agenda__date {
	background-color: var(--e-global-color-bgcard);
}

.tpm-on-dark .e-con.tpm-agenda--row .tpm-agenda__tag.tpm-agenda__tag .elementor-heading-title {
	border-color: var(--e-global-color-cyan45);
	background: var(--e-global-color-cyan12);
	color: var(--e-global-color-cyan);
}

.tpm-on-dark .e-con.tpm-agenda--row .tpm-agenda__title.tpm-agenda__title .elementor-heading-title {
	color: var(--e-global-color-white);
}

.tpm-on-dark .e-con.tpm-agenda--row .elementor-widget:is(.tpm-agenda__meta-text, .tpm-agenda__desc) .elementor-heading-title {
	color: var(--e-global-color-odmuted);
}

.tpm-on-dark .e-con.tpm-agenda--row .tpm-agenda__icon.tpm-agenda__icon .elementor-icon {
	color: var(--e-global-color-odmuted);
}

.tpm-on-dark .e-con.tpm-agenda--row .tpm-agenda__icon.tpm-agenda__icon .elementor-icon svg {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   tpm-agenda-mois · événements de la Liste Agenda groupés par mois (Mois ·
   Octobre 2026 270:9160, TPM-00 § 8.30), balisage du shortcode
   [tpm_agenda_mois] (includes/events.php) : div.tpm-agenda-mois >
   section.tpm-agenda-mois__group > titre .tpm-agenda-mois__title +
   ul.tpm-agenda-mois__list > li.tpm-agenda-mois__item > Loop Item. Mois
   espacés de 48 (40 dès le burger, 32 en Mobile, bloc 7), comme la section ;
   titre h4 primary, 24 au-dessus de la liste. Loop Item ligne (49463) :
   lignes séparées par un filet 1 px border au-dessus de chacune (sans
   maquette). Loop Item carte (49465, maquette) : grille 3 / 2 / 1, gap 32
   (24 dès le burger), cartes de même hauteur. La mise en page suit le Loop
   Item rendu, sans réglage.
   -------------------------------------------------------------------------- */
.tpm-agenda-mois {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.tpm-agenda-mois__group {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.tpm-agenda-mois .tpm-agenda-mois__title {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-h4-font-family), sans-serif;
	font-size: var(--e-global-typography-h4-font-size);
	font-weight: var(--e-global-typography-h4-font-weight);
	line-height: var(--e-global-typography-h4-line-height);
	letter-spacing: var(--e-global-typography-h4-letter-spacing);
}

.tpm-agenda-mois .tpm-agenda-mois__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpm-agenda-mois .tpm-agenda-mois__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.tpm-agenda-mois .tpm-agenda-mois__item:has(.tpm-agenda--row) {
	border-top: 1px solid var(--e-global-color-border);
}

.tpm-agenda-mois .tpm-agenda-mois__list:has(.tpm-agenda--card) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.tpm-agenda-mois__item > .elementor,
.tpm-agenda-mois__item > .elementor > .e-con.tpm-agenda--card {
	height: 100%;
}

/* --------------------------------------------------------------------------
   tpm-loop-empty · message « aucun résultat » d'une Grille de boucle (03
   Agenda de l'accueil), à l'image de l'état vide de la Liste Agenda
   (270:9276, § 8.30). Balisage saisi dans le champ « Aucun message trouvé »
   du widget (Tag HTML div, réglages de couleur et de typographie de l'onglet
   Style laissés vides) : div.tpm-loop-empty > h3.tpm-loop-empty__title +
   p.tpm-loop-empty__text + a.tpm-loop-empty__link. Bloc centré, fond
   bgsubtle, rayon lg, padding 48 (32/24 en Mobile, bloc 7), gap 12, sans
   la pastille d'icône de l'état vide de l'agenda (demande Manu) ;
   titre h5 primary, texte text txtsec, lien au style tpm-link (accent,
   couleur link, flèche arrow-right-bold à 8 px qui glisse de 4 px au
   survol, sans soulignement). Sous tpm-on-dark : fond bgcard, titre white,
   texte odmuted, lien accent. Sélecteurs à deux
   classes : passent devant la Typographie du kit (.elementor-kit-N h3, a).
   -------------------------------------------------------------------------- */
.tpm-loop-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 48px;
	border-radius: var(--tpm-radius-lg);
	background-color: var(--e-global-color-bgsubtle);
	text-align: center;
}

.tpm-loop-empty .tpm-loop-empty__title {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-h5-font-family), sans-serif;
	font-size: var(--e-global-typography-h5-font-size);
	font-weight: var(--e-global-typography-h5-font-weight);
	line-height: var(--e-global-typography-h5-line-height);
	letter-spacing: var(--e-global-typography-h5-letter-spacing);
	text-transform: none;
	text-wrap: balance;
}

.tpm-loop-empty .tpm-loop-empty__text {
	max-width: 560px;
	margin: 0;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	text-transform: none;
	text-wrap: balance;
}

.tpm-loop-empty .tpm-loop-empty__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--tpm-radius-sm);
	color: var(--e-global-color-link);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
	text-transform: none;
	text-decoration: none;
	transition: color var(--tpm-transition);
}

.tpm-loop-empty .tpm-loop-empty__link:hover {
	color: var(--e-global-color-link);
	text-decoration: none;
}

.tpm-loop-empty .tpm-loop-empty__link::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	transition: transform var(--tpm-transition);
}

.tpm-loop-empty .tpm-loop-empty__link:hover::after {
	transform: translateX(4px);
}

.tpm-on-dark .tpm-loop-empty {
	background-color: var(--e-global-color-bgcard);
}

.tpm-on-dark .tpm-loop-empty .tpm-loop-empty__title {
	color: var(--e-global-color-white);
}

.tpm-on-dark .tpm-loop-empty .tpm-loop-empty__text {
	color: var(--e-global-color-odmuted);
}

.tpm-on-dark .tpm-loop-empty .tpm-loop-empty__link,
.tpm-on-dark .tpm-loop-empty .tpm-loop-empty__link:hover {
	color: var(--e-global-color-accent);
}

/* --------------------------------------------------------------------------
   Gabarit Détail Événement (266:4412, TPM-00 § 8.29)
   tpm-event-aside · encart de l'événement (Encart événement (sticky)
   266:4511), sur le conteneur de 416 px : fond, contour, rayon et padding
   dans ses réglages natifs ; la classe porte l'ombre (0 8 32 0, encshd
   #0D1C2E à 6 %, valeur en dur de Figma, TPM-02 n° 77) et le collant en
   desktop (≥ 992) sous le header sticky, à 32 px (sans maquette), comme
   tpm-page-aside. La section porte « Aligner les éléments : Début » ; aucun
   parent en débordement masqué. Dès le burger, encart sous le contenu, non
   collant. tpm-event-aside__month : mois de la pastille de date en
   capitales (balise « Date de l'événement », format mois_court).
   tpm-event-slots · liste des créneaux (ul rendue par la balise « Date de
   l'événement », format detail, dans un Éditeur de texte) : sans puces ni
   retrait, 4 px entre les créneaux (sans maquette), police et couleur
   par les globaux du widget. Classes doublées : passent devant les règles
   éditoriales des listes (bloc 2).
   -------------------------------------------------------------------------- */
.e-con.tpm-event-aside {
	box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--e-global-color-encshd) 6%, transparent);
}

.tpm-event-aside .tpm-event-aside__month .elementor-heading-title {
	text-transform: uppercase;
}

.elementor-widget .tpm-event-slots.tpm-event-slots {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-widget .tpm-event-slots.tpm-event-slots > li {
	margin: 0;
	padding: 0;
}

.elementor-widget .tpm-event-slots.tpm-event-slots > li + li {
	margin-top: 4px;
}

@media (min-width: 992px) {
	.e-con.tpm-event-aside {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-sticky-height) + 32px);
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Gabarit Page de contenu (258:3205, TPM-00 § 8.27)
   tpm-page-aside · colonne du sommaire (Sommaire (sticky) 258:3315), sur le
   conteneur de 280 px : collante en desktop (≥ 992) sous le header sticky,
   à 32 px (sans maquette), comme la barre d'ancres (position: sticky en CSS,
   jamais le Sticky d'Elementor). La section porte « Aligner les éléments :
   Début » ; aucun parent en débordement masqué. Dès le burger, sommaire
   au-dessus du contenu, replié, non collant (bloc 7).
   tpm-toc · widget Table des matières (TOC 257:3236), titre overline
   txtsec, entrées bodysm txtsec, couleurs et polices par les globaux du
   widget ; la classe porte la forme : boîte sans bordure ni padding, 16 px
   entre le titre et la liste, entrées à filet gauche 2 px border, padding
   8/0/8/16, entrée active (section en cours de lecture, classe
   elementor-item-active posée par le widget) en filet cyan et police nav,
   survol filet cyan45 (sans maquette), marqueurs masqués. Sans intertitre
   H2 dans le contenu, colonne masquée hors éditeur. Classes doublées :
   passent devant le CSS du widget, chargé après tpm.css.
   tpm-page-content · widget Contenu de l'article : zone où le sommaire
   cherche les H2 (réglage Conteneur du widget).
   Ancres du contenu (tous gabarits) : intertitres h2 à h4 à id
   (« partie-… », includes/heading-anchors.php) et ancres du sommaire
   (span.elementor-menu-anchor) arrêtés sous le header sticky
   (--tpm-scroll-offset), articles compris.
   -------------------------------------------------------------------------- */
.tpm-toc.tpm-toc .elementor-toc {
	min-height: 0;
	border: 0;
	border-radius: 0;
}

.tpm-toc.tpm-toc .elementor-toc__header {
	padding: 0;
	border: 0;
	background-color: transparent;
}

.tpm-toc.tpm-toc .elementor-toc__header-title {
	margin: 0;
}

.tpm-toc.tpm-toc .elementor-toc__body {
	padding: 16px 0 0;
}

.tpm-toc.tpm-toc .elementor-toc__list-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpm-toc.tpm-toc .elementor-toc__list-item {
	margin: 0;
	padding: 0;
}

.tpm-toc.tpm-toc .elementor-toc__list-item-text-wrapper::before,
.tpm-toc.tpm-toc .elementor-toc__list-item-text-wrapper > :is(i, svg) {
	display: none;
}

.tpm-toc.tpm-toc .elementor-toc__list-item-text {
	display: block;
	flex: 1 1 auto;
	padding: 8px 0 8px 16px;
	border-left: 2px solid var(--e-global-color-border);
	text-decoration: none;
	transition: border-color var(--tpm-transition), color var(--tpm-transition);
}

.tpm-toc.tpm-toc .elementor-toc__list-item-text:hover {
	border-left-color: var(--e-global-color-cyan45);
	text-decoration: none;
}

.tpm-toc.tpm-toc .elementor-toc__list-item-text.elementor-item-active {
	border-left-color: var(--e-global-color-cyan);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
	text-decoration: none;
}

.tpm-toc.tpm-toc .elementor-toc__toggle-button svg {
	width: 24px;
	height: 24px;
	color: var(--toggle-button-color);
	fill: currentColor;
}

body:not(.elementor-editor-active) .e-con.tpm-page-aside:has(.elementor-toc__no-headings) {
	display: none;
}

.elementor-widget-theme-post-content :is(h2, h3, h4)[id],
.elementor-widget-theme-post-content .elementor-menu-anchor {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-sticky-height) + var(--tpm-scroll-offset));
}

@media (min-width: 992px) {
	.e-con.tpm-page-aside {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-sticky-height) + 32px);
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   tpm-footer · Footer 405:13854 (Desktop 187:999, Mobile 405:13725), § 7
   Conteneur racine du template Footer, cumulé avec tpm-on-dark. Couleurs,
   polices et espacements : réglages des widgets. La classe porte ce que les
   widgets ne règlent pas : colonnes autorisées à rétrécir sous leur contenu
   (cinq colonnes égales en desktop), coupure des adresses longues,
   soulignement au survol des liens (Footer link 315:6788 : texte white et
   soulignement), icônes de contact calées sur la première ligne, zone
   tactile de 44 px autour des icônes sociales de 36 px.
   -------------------------------------------------------------------------- */
.tpm-footer .e-con {
	min-width: 0;
}

/* Liens sans soulignement au repos : la Typographie du kit (Liens
   soulignés, § 5 B) pose text-decoration sur tous les a du site, en
   couleur link. */
.tpm-footer .elementor-icon-list-item > a {
	text-decoration: none;
}

.tpm-footer .elementor-icon-list-text {
	overflow-wrap: anywhere;
	transition: color var(--tpm-transition);
}

.tpm-footer .elementor-icon-list-item > a:is(:hover, :focus-visible) .elementor-icon-list-text {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Contact : icône 16 px centrée sur la première ligne de 22 px */
.tpm-footer .elementor-icon-list-item,
.tpm-footer .elementor-icon-list-item > a {
	align-items: flex-start;
}

.tpm-footer .elementor-icon-list-icon {
	margin-top: 3px;
}

/* Icônes Phosphor de la colonne Contact en txtbrand (#A8CC2E, corrigé par
   Manu, TPM-02 n° 46) : les SVG Phosphor tracent en currentColor alors que
   la Liste d'icônes ne pose que fill sur le svg. Couleur portée ici par
   color ; réglage Couleur de l'icône du widget laissé vide. */
.tpm-footer .elementor-icon-list-icon {
	color: var(--e-global-color-txtbrand);
}

.tpm-footer .elementor-icon-list-icon svg {
	fill: currentColor;
}

/* Liens légaux : 8 px entre les rangées quand ils passent à la ligne */
.tpm-footer .elementor-icon-list-items.elementor-inline-items {
	row-gap: 8px;
}

/* Icônes sociales : 36 px visibles, zone cliquable de 44 px */
.tpm-footer .elementor-social-icon {
	position: relative;
}

.tpm-footer .elementor-social-icon::after {
	content: "";
	position: absolute;
	inset: -4px;
}


/* --------------------------------------------------------------------------
   tpm-steps · indicateur Idée → Lancement → Développement du hero
   Hero/Parcours 207:2237 (widget HTML figé, § 3). Balisage :
   ol > li[.is-current] > span.tpm-steps__marker > span.tpm-steps__dot
   + span.tpm-steps__text > span.tpm-steps__label (+ span.tpm-steps__note).
   Sur fond foncé uniquement. Étape courante : pastille 56 cyan, chiffre
   bgfooter (accent), libellé h4 white, note captionb cyan. Autres étapes :
   pastille 40 à contour 1,5 cyan, chiffre captionb cyan, libellé lead
   white. Filet vertical 2 × 44 cyan sous chaque pastille sauf la dernière.
   -------------------------------------------------------------------------- */
.tpm-steps ol {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpm-steps li {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin: 0;
}

.tpm-steps__marker {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	width: 56px;
}

.tpm-steps li:not(:last-child) .tpm-steps__marker::after {
	content: "";
	width: 2px;
	height: 44px;
	background-color: var(--e-global-color-cyan);
}

.tpm-steps__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--e-global-color-cyan);
	border-radius: var(--tpm-radius-full);
	color: var(--e-global-color-cyan);
	font-family: var(--e-global-typography-captionb-font-family);
	font-size: var(--e-global-typography-captionb-font-size);
	font-weight: var(--e-global-typography-captionb-font-weight);
	line-height: var(--e-global-typography-captionb-line-height);
}

.tpm-steps__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 8px;
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-lead-font-family);
	font-size: var(--e-global-typography-lead-font-size);
	font-weight: var(--e-global-typography-lead-font-weight);
	line-height: var(--e-global-typography-lead-line-height);
}

.tpm-steps li.is-current .tpm-steps__dot {
	width: 56px;
	height: 56px;
	border: 0;
	background-color: var(--e-global-color-cyan);
	color: var(--e-global-color-bgfooter);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
}

.tpm-steps li.is-current .tpm-steps__text {
	padding-top: 12px;
}

.tpm-steps li.is-current .tpm-steps__label {
	font-family: var(--e-global-typography-h4-font-family);
	font-size: var(--e-global-typography-h4-font-size);
	font-weight: var(--e-global-typography-h4-font-weight);
	line-height: var(--e-global-typography-h4-line-height);
}

.tpm-steps__note {
	color: var(--e-global-color-cyan);
	font-family: var(--e-global-typography-captionb-font-family);
	font-size: var(--e-global-typography-captionb-font-size);
	font-weight: var(--e-global-typography-captionb-font-weight);
	line-height: var(--e-global-typography-captionb-line-height);
}

/* Étape franchie (li.is-done, avant l'étape courante) : pastille 40 pleine,
   chiffre captionb bgfooter (relevé Hero/Parcours Step=Lancement). */
.tpm-steps li.is-done .tpm-steps__dot {
	border: 0;
	background-color: var(--e-global-color-cyan);
	color: var(--e-global-color-bgfooter);
}

/* tpm-steps--lime (cumulée avec tpm-steps) : parcours Lancement, pastilles,
   filets et note en lime/400 = accent au lieu du cyan. */
.tpm-steps--lime .tpm-steps__dot {
	border-color: var(--e-global-color-accent);
	color: var(--e-global-color-accent);
}

.tpm-steps--lime li:not(:last-child) .tpm-steps__marker::after,
.tpm-steps--lime li:is(.is-current, .is-done) .tpm-steps__dot {
	background-color: var(--e-global-color-accent);
}

.tpm-steps--lime li:is(.is-current, .is-done) .tpm-steps__dot {
	color: var(--e-global-color-bgfooter);
}

.tpm-steps--lime .tpm-steps__note {
	color: var(--e-global-color-accent);
}

/* tpm-steps--yellow (cumulée avec tpm-steps) : parcours Développement,
   pastilles, filets et note en yellow/200 = tgyelbd au lieu du cyan. */
.tpm-steps--yellow .tpm-steps__dot {
	border-color: var(--e-global-color-tgyelbd);
	color: var(--e-global-color-tgyelbd);
}

.tpm-steps--yellow li:not(:last-child) .tpm-steps__marker::after,
.tpm-steps--yellow li:is(.is-current, .is-done) .tpm-steps__dot {
	background-color: var(--e-global-color-tgyelbd);
}

.tpm-steps--yellow li:is(.is-current, .is-done) .tpm-steps__dot {
	color: var(--e-global-color-bgfooter);
}

.tpm-steps--yellow .tpm-steps__note {
	color: var(--e-global-color-tgyelbd);
}

/* tpm-steps--compact (cumulée avec tpm-steps) : « Comment ça se passe » du
   hero Contact (245:3515). Balisage : li > tpm-steps__marker >
   tpm-steps__dot, puis tpm-steps__text > tpm-steps__label +
   tpm-steps__desc. Pastille 32 pleine cyan, chiffre captionb primary ;
   rail gap 8, filet 1 px cyan45 étiré jusqu'à l'étape suivante ; titre
   accent white, texte bodysm odmuted, gap 4 ; texte décalé de 4 px, 24 px
   sous chaque étape sauf la dernière ; gap 16. Double classe : passe devant
   les règles de base et le filet de 24 px dès le burger (bloc 7). */
.tpm-steps.tpm-steps--compact li {
	gap: 16px;
	align-items: stretch;
}

.tpm-steps.tpm-steps--compact .tpm-steps__marker {
	width: 32px;
}

.tpm-steps.tpm-steps--compact li:not(:last-child) .tpm-steps__marker::after {
	flex: 1 1 auto;
	width: 1px;
	height: auto;
	background-color: var(--e-global-color-cyan45);
}

.tpm-steps.tpm-steps--compact .tpm-steps__dot {
	width: 32px;
	height: 32px;
	border: 0;
	background-color: var(--e-global-color-cyan);
	color: var(--e-global-color-primary);
}

.tpm-steps.tpm-steps--compact .tpm-steps__text {
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 0 24px;
	color: var(--e-global-color-odmuted);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
}

.tpm-steps.tpm-steps--compact li:last-child .tpm-steps__text {
	padding-bottom: 0;
}

.tpm-steps.tpm-steps--compact .tpm-steps__label {
	color: var(--e-global-color-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
}

/* --------------------------------------------------------------------------
   tpm-device · Card/Device row 214:2354 (modèle de dispositif, § 10)
   Conteneur racine du modèle : en-tête (tpm-device__head : pictogramme
   tpm-device__picto, nom, accroche, objet, stades tpm-device__stages) puis
   Accordéon imbriqué à un élément (tpm-device__acc). Titre de l'élément :
   « Voir le détail » (tpm-device__more) / « Réduire » (tpm-device__less)
   dans des span, icône chevron dans une pastille 48. Fermé par défaut
   (§ 7). État porté par details[open] :
   - fermé : filet haut 1 px border, padding 32/40/16 (horizontal aligné sur
     l'état ouvert, correction Manu du 14/10/2026), pastille icône cyan12,
     toggle lime45 ;
   - ouvert : fond cyan08, rayon xl 24, padding 40, pastille icône white,
     toggle accent.
   Desktop : le titre de l'accordéon (summary) reste dans le flux, réduit à
   1 px (compensé sur les paddings) : le script d'Elementor abandonne
   l'ouverture si le details mesure 0 px. Sa zone cliquable (::before), son libellé et
   sa pastille sont posés sur l'en-tête par ancrage CSS (toute la ligne est
   cliquable, toggle à droite centré verticalement) ; sans ancrage CSS,
   calés sur le pictogramme. Dès le burger (bloc 7) :
   mise en page mobile de Figma, toggle sous l'en-tête.
   Listes : objectifs (tpm-device__goals, icône check) et livrables
   (tpm-device__docs, pastille cyan de 6 px, sans icône) en Liste d'icônes, icône text.
   -------------------------------------------------------------------------- */
.e-con.tpm-device {
	position: relative;
	padding: 32px 40px 16px;
	border-top: 1px solid var(--e-global-color-border);
	border-radius: 0;
	background-color: transparent;
	anchor-scope: --tpm-device-head;
	transition: background-color var(--tpm-transition), border-color var(--tpm-transition);
}

.e-con.tpm-device:has(.e-n-accordion-item[open]) {
	padding: 40px;
	border-top-color: transparent;
	border-radius: var(--tpm-radius-xl);
	background-color: var(--e-global-color-cyan08);
}

/* Focus clavier sur le titre : anneau autour de toute la ligne (Figma :
   2 px border/strong à 4 px du bord) */
.e-con.tpm-device:has(.e-n-accordion-item-title:focus-visible) {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 4px;
}

/* Ombre posée par défaut sur les éléments à tabindex retirée à tous les
   états ; le focus clavier est porté par la ligne */
.tpm-device .tpm-device__acc .e-n-accordion-item-title,
.tpm-device .tpm-device__acc .e-n-accordion-item-title:is(:hover, :focus, :focus-visible, :active) {
	box-shadow: none;
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title:focus-visible {
	outline: none;
}

/* Pictogramme : pastille ronde, icône Phosphor Duotone text, second tracé
   cyan (plein fermé, 55 % ouvert) */
.e-con.tpm-device__picto {
	line-height: 1; /* SVG centré verticalement dans la pastille */
	background-color: var(--e-global-color-cyan12);
	transition: background-color var(--tpm-transition);
}

.tpm-device:has(.e-n-accordion-item[open]) .e-con.tpm-device__picto {
	background-color: var(--e-global-color-white);
}

.tpm-device__picto svg [opacity] {
	fill: var(--e-global-color-cyan);
	opacity: 1;
}

.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__picto svg [opacity] {
	opacity: 0.55;
}

/* Stades : point cyan de 5 px avant chaque libellé, gap 6 */
.tpm-device__stages .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
}

.tpm-device__stages .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin-right: 6px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-cyan);
}

/* Objectifs et livrables : icône 24 en text (la Liste d'icônes ne pose que
   fill, § 7), réglage Couleur de l'icône vide */
.tpm-device :is(.tpm-device__goals, .tpm-device__docs) .elementor-icon-list-icon {
	color: var(--e-global-color-text);
}

.tpm-device :is(.tpm-device__goals, .tpm-device__docs) .elementor-icon-list-icon svg {
	fill: currentColor;
}

.tpm-device__goals .elementor-icon-list-item {
	align-items: flex-start;
}

/* Livrables (Figma du 19/10/2026) : sans tuile ni icône, pastille ronde de
   6 px cyan centrée dans une zone de 16 × 22 (première ligne), gap 8 ;
   12 px entre les livrables. Icône vide et police bodysm dans le widget
   (tpm-figma-maj.php). */
.tpm-device__docs .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.elementor-widget.tpm-device__docs .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item {
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.tpm-device__docs .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin: 8px 13px 0 5px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-cyan);
}

/* Conteneur du contenu (div role="region") : bordure 1 px posée par défaut
   par le widget (variables --n-accordion-border-*) retirée ; le filet cyan45
   est porté par le conteneur intérieur. */
.tpm-device .tpm-device__acc .e-n-accordion-item > .e-con {
	border: 0;
}

/* Titre de l'accordéon : libellé nav text, pastille 48 lime45 (accent
   ouvert) avec chevron 24 text, gap 12 ; styles par défaut du widget
   neutralisés */
.tpm-device .tpm-device__acc .e-n-accordion-item-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--e-global-color-text);
	cursor: pointer;
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title-header {
	flex: none;
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title-text {
	color: inherit;
	font-family: var(--e-global-typography-nav-font-family);
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
}

.tpm-device__less,
.tpm-device .e-n-accordion-item[open] .tpm-device__more {
	display: none;
}

.tpm-device .e-n-accordion-item[open] .tpm-device__less {
	display: inline;
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title-icon {
	display: inline-flex;
	flex: none;
	order: 1; /* pastille toujours à droite du libellé */
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-lime45);
	color: var(--e-global-color-text);
	transition: background-color var(--tpm-transition);
}

.tpm-device .tpm-device__acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
	background-color: var(--e-global-color-accent);
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title-icon :is(span, i) {
	display: inline-flex;
}

.tpm-device .tpm-device__acc .e-n-accordion-item-title-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Desktop : titre de l'accordéon dans le flux à 1 px, zone
   cliquable, libellé et pastille posés sur l'en-tête, qui réserve à droite
   la place du toggle (143 + gap 32). Repli sans ancrage : bande de 64 px
   au niveau du pictogramme (padding 32 fermé, 40 ouvert). */
@media (min-width: 992px) {
	.tpm-device :is(.tpm-device__acc, .tpm-device__acc > .elementor-widget-container, .tpm-device__acc .e-n-accordion, .tpm-device__acc .e-n-accordion-item) {
		position: static;
	}

	.e-con.tpm-device__head {
		padding-right: 175px;
		anchor-name: --tpm-device-head;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item-title {
		position: static;
		box-sizing: border-box;
		height: 1px;
		min-height: 0;
		overflow: visible;
	}

	/* Pixel du titre compensé : padding bas 15 fermé (16 dans Figma), espace
	   de 39 entre l'en-tête et le filet ouvert (40 dans Figma). Le
	   conteneur du contenu est géré par Elementor (isLocked) : espace porté
	   ici et non par ses réglages. */
	.e-con.tpm-device:not(:has(.e-n-accordion-item[open])) {
		padding-bottom: 15px;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item > .e-con {
		padding-top: 39px;
	}

	/* Le script d'Elementor fige la hauteur de l'élément en style en ligne
	   pour l'animer et, avec le titre réduit à 1 px, ne la libère pas.
	   !important : seul moyen de passer devant ce style en ligne et
	   l'animation. Ouverture instantanée en desktop ; la fermeture attend
	   la durée d'animation du widget. */
	.tpm-device .tpm-device__acc .e-n-accordion-item {
		height: auto !important;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item-title::before {
		content: "";
		position: absolute;
		top: 32px;
		right: 32px;
		left: 32px;
		z-index: 1;
		height: 64px;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item-title-header {
		position: absolute;
		top: 32px;
		right: 92px;
		z-index: 2;
		display: flex;
		align-items: center;
		height: 64px;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item-title-icon {
		position: absolute;
		top: 40px;
		right: 32px;
		z-index: 2;
	}

	.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title::before {
		top: 40px;
		right: 40px;
		left: 40px;
	}

	.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title-header {
		top: 40px;
		right: 100px;
	}

	.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title-icon {
		top: 48px;
		right: 40px;
	}

	@supports (anchor-name: --tpm-device-head) {
		.tpm-device .tpm-device__acc .e-n-accordion-item-title::before,
		.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title::before {
			position-anchor: --tpm-device-head;
			top: anchor(top);
			right: anchor(right);
			bottom: anchor(bottom);
			left: anchor(left);
			height: auto;
		}

		/* Libellé : hauteur de l'en-tête, texte centré, 12 px à gauche de la
		   pastille (48 + 12) */
		.tpm-device .tpm-device__acc .e-n-accordion-item-title-header,
		.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title-header {
			position-anchor: --tpm-device-head;
			top: anchor(top);
			right: calc(anchor(right) + 60px);
			bottom: anchor(bottom);
			height: auto;
		}

		/* Pastille 48 centrée verticalement sur l'en-tête */
		.tpm-device .tpm-device__acc .e-n-accordion-item-title-icon,
		.tpm-device:has(.e-n-accordion-item[open]) .tpm-device__acc .e-n-accordion-item-title-icon {
			position-anchor: --tpm-device-head;
			top: anchor(top);
			right: anchor(right);
			bottom: anchor(bottom);
			margin-block: auto;
		}
	}

	.tpm-loop-peek.elementor-pagination-type-bullets.elementor-pagination-position-outside {
		--swiper-padding-bottom: 0px;
	}
	.tpm-loop-peek.elementor-pagination-type-bullets.elementor-pagination-position-outside .elementor-swiper-button {
		display: none;
	}
	
}

/* --------------------------------------------------------------------------
   tpm-faq · questions fréquentes (Contact, 04 · Questions fréquentes
   245:3689) : Accordéon imbriqué, un élément par question. Filet border
   au-dessus de la liste et sous chaque question ; question h5 primary,
   padding 24/0, chevron 24 primary à droite (gap 24) ; réponse dans le
   conteneur intérieur, remontée de 12 px par sa marge native (gap 12 de
   Figma), 24 px au-dessus du filet. Styles par défaut du widget
   (bordures, fond, padding, ombre du titre) neutralisés.
   -------------------------------------------------------------------------- */
.tpm-faq .e-n-accordion-item {
	margin: 0;
	border-bottom: 1px solid var(--e-global-color-border);
}

.tpm-faq .e-n-accordion-item:first-child {
	border-top: 1px solid var(--e-global-color-border);
}

.tpm-faq .e-n-accordion-item-title,
.tpm-faq .e-n-accordion-item-title:is(:hover, :focus, :focus-visible, :active) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--e-global-color-primary);
	cursor: pointer;
}

.tpm-faq .e-n-accordion-item-title-header {
	flex: 1 1 auto;
	min-width: 0;
}

.tpm-faq .e-n-accordion-item-title-text {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-h5-font-family);
	font-size: var(--e-global-typography-h5-font-size);
	font-weight: var(--e-global-typography-h5-font-weight);
	line-height: var(--e-global-typography-h5-line-height);
	letter-spacing: var(--e-global-typography-h5-letter-spacing);
}

.tpm-faq .e-n-accordion-item-title-icon {
	display: inline-flex;
	flex: none;
	order: 1; /* chevron toujours à droite de la question */
	color: var(--e-global-color-primary);
}

.tpm-faq .e-n-accordion-item-title-icon :is(span, i) {
	display: inline-flex;
}

.tpm-faq .e-n-accordion-item-title-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.tpm-faq .e-n-accordion-item > .e-con {
	padding: 0 0 24px;
	border: 0;
}

/* --------------------------------------------------------------------------
   tpm-reveal · contenu repliable sous un libellé (Présentation & missions v5,
   Composition de la Commission ad hoc 998:8070) : Accordéon imbriqué à un
   élément. Titre « Voir la composition » (tpm-reveal__more) / « Masquer la
   composition » (tpm-reveal__less) en h5 primary, filet haut 1 px primary
   15 %, padding haut 20 ; chevron 24 green à droite ; contenu 20 px sous le
   titre. Styles par défaut du widget neutralisés.
   -------------------------------------------------------------------------- */
.tpm-reveal .e-n-accordion-item {
	margin: 0;
	border: 0;
}

.tpm-reveal .e-n-accordion-item-title,
.tpm-reveal .e-n-accordion-item-title:is(:hover, :focus, :focus-visible, :active) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--e-global-color-primary) 15%, transparent);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--e-global-color-primary);
	cursor: pointer;
}

.tpm-reveal .e-n-accordion-item-title-header {
	flex: 1 1 auto;
	min-width: 0;
}

.tpm-reveal .e-n-accordion-item-title-text {
	margin: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-h5-font-family);
	font-size: var(--e-global-typography-h5-font-size);
	font-weight: var(--e-global-typography-h5-font-weight);
	line-height: var(--e-global-typography-h5-line-height);
	letter-spacing: var(--e-global-typography-h5-letter-spacing);
}

.tpm-reveal__less,
.tpm-reveal .e-n-accordion-item[open] .tpm-reveal__more {
	display: none;
}

.tpm-reveal .e-n-accordion-item[open] .tpm-reveal__less {
	display: inline;
}

.tpm-reveal .e-n-accordion-item-title-icon {
	display: inline-flex;
	flex: none;
	order: 1; /* chevron toujours à droite du libellé */
	color: var(--e-global-color-green);
}

.tpm-reveal .e-n-accordion-item-title-icon :is(span, i) {
	display: inline-flex;
}

.tpm-reveal .e-n-accordion-item-title-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.tpm-reveal .e-n-accordion-item > .e-con {
	padding: 20px 0 0;
	border: 0;
}

/* --------------------------------------------------------------------------
   tpm-contact-card · encart Contact direct (Contact, 02 · Formulaire
   245:3618) : coupure de l'adresse e-mail, plus large que l'encart sous
   400 px. Couleurs, polices et espacements : réglages des widgets.
   -------------------------------------------------------------------------- */
.tpm-contact-card .elementor-heading-title {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   tpm-error-code · « 404 » décoratif du hero de la page 404 (01 · 404
   294:12620), sur un conteneur vide de largeur auto : chiffres posés en CSS,
   texte de remplacement vide pour les lecteurs d'écran. Inter Bold 280,
   approche -6 %, interligne normal, bgcard (navy/700), texte sans style
   dans Figma (TPM-02 n° 19) ; 200 en Laptop, 160 dès le burger, 120 en
   Mobile (bloc 7, sans maquette). Elementor réserve ::before au calque de
   fond des conteneurs : chiffres portés par ::after.
   -------------------------------------------------------------------------- */
.e-con.tpm-error-code::after {
	content: "404";
	content: "404" / "";
	display: block;
	color: var(--e-global-color-bgcard);
	font-family: var(--e-global-typography-display-font-family), sans-serif;
	font-size: 280px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.06em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   tpm-timeline · frise d'étapes horizontale, verticale dès le burger
   (Timeline step 415:7115 ; frises des pages Catégorie et du pivot
   Innover & entreprendre). Classe sur le conteneur rangée ; chaque
   conteneur enfant est une étape : tpm-timeline__head (pastille numérotée
   de 56 px + Diviseur horizontal) puis tpm-timeline__body (titre + texte).
   Desktop : réglages natifs seuls. Dès le burger (bloc 7) : filet vertical
   entre les pastilles, Diviseurs masqués, contenu à droite de la pastille
   (relevé Manu du 14/10/2026, CSS personnalisé déplacé ici). Couleur du
   filet : cyan ; tpm-timeline--cyan45 pour une frise à connecteurs cyan45,
   tpm-timeline--accent pour une frise lime/400 (parcours Lancement),
   tpm-timeline--tgyelbd pour une frise yellow/200 (parcours Développement).
   -------------------------------------------------------------------------- */

/* ==========================================================================
   5. FORMULAIRES GRAVITY FORMS (framework de thème, Orbital), § 7
   Classes du wrapper avec Orbital : gform-theme gform-theme--framework
   gform-theme--orbital (gravity-theme désigne l'ancien thème 2.5, non utilisé).
   Propriétés --gf-* du framework quand elles existent, sélecteurs GF sinon.
   ========================================================================== */

.gform_wrapper.gform-theme {
	/* !important sur chaque --gf-* : Gravity Forms imprime pour chaque
	   formulaire un <style> en ligne qui redéclare ces propriétés sur
	   #gform_wrapper_N.gform-theme (sélecteur à identifiant). Sans
	   !important, ses valeurs par défaut (bleu GF) l'emportent. */
	/* Couleurs */
	--gf-color-primary: var(--e-global-color-primary) !important;
	--gf-color-primary-contrast: var(--e-global-color-white) !important;
	--gf-color-primary-darker: var(--e-global-color-secondary) !important;
	--gf-color-primary-lighter: var(--e-global-color-bgcard) !important;
	--gf-color-secondary: var(--e-global-color-bgsubtle) !important;
	--gf-color-secondary-contrast: var(--e-global-color-text) !important;
	--gf-color-secondary-darker: var(--e-global-color-border) !important;
	--gf-color-secondary-lighter: var(--e-global-color-white) !important;
	--gf-color-in-ctrl: var(--e-global-color-bgsubtle) !important;
	--gf-color-in-ctrl-contrast: var(--e-global-color-text) !important;
	--gf-color-in-ctrl-dark: var(--e-global-color-text) !important;
	--gf-color-in-ctrl-light: var(--e-global-color-border) !important;
	--gf-color-in-ctrl-primary: var(--e-global-color-primary) !important;
	--gf-color-in-ctrl-primary-contrast: var(--e-global-color-white) !important;
	--gf-color-out-ctrl-dark: var(--e-global-color-text) !important;
	--gf-color-out-ctrl-light: var(--e-global-color-border) !important;
	--gf-color-danger: var(--e-global-color-error) !important;
	--gf-color-success: var(--e-global-color-green) !important;
	/* Champs */
	--gf-ctrl-border-color: transparent !important;
	--gf-ctrl-border-color-focus: var(--e-global-color-primary) !important;
	--gf-radius: var(--tpm-radius-md) !important;
	--gf-ctrl-radius: var(--tpm-radius-md) !important;
	--gf-ctrl-size: 52px !important;
	--gf-ctrl-padding-x: 16px !important;
	--gf-ctrl-choice-size: 20px !important;
	--gf-form-gap-y: var(--tpm-space-block) !important;
	/* Libellés et descriptions */
	--gf-ctrl-label-color-primary: var(--e-global-color-text) !important;
	--gf-ctrl-label-color-secondary: var(--e-global-color-text) !important;
	--gf-ctrl-desc-color: var(--e-global-color-txtsec) !important;
	--gf-label-space-y-primary: 8px !important;
	--gf-label-space-y-secondary: 8px !important;
	--gf-font-size-secondary: var(--e-global-typography-bodysm-font-size) !important;
	--gf-font-size-tertiary: var(--e-global-typography-captionb-font-size) !important;
	/* Boutons (Primary Large) */
	--gf-ctrl-btn-size: 48px !important;
	--gf-ctrl-btn-radius: var(--tpm-radius-full) !important;
	--gf-ctrl-btn-font-family: var(--e-global-typography-accent-font-family) !important;
	--gf-ctrl-btn-font-weight: var(--e-global-typography-accent-font-weight) !important;
	--gf-ctrl-btn-font-size: var(--e-global-typography-accent-font-size) !important;
	--gf-ctrl-btn-padding-x: 24px !important;
	/* Couleurs du bouton Primary de GF : par défaut --gf-color-primary
	   (primary) et son contraste (white), d'où un bouton bleu nuit à texte
	   blanc. Ramenées au Primary du kit : fond accent, survol limehov,
	   texte text. */
	--gf-ctrl-btn-bg-color-primary: var(--e-global-color-accent) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--e-global-color-limehov) !important;
	--gf-ctrl-btn-color-primary: var(--e-global-color-text) !important;
	--gf-ctrl-btn-color-hover-primary: var(--e-global-color-text) !important;
	--gf-ctrl-btn-border-color-primary: transparent !important;
}

/* Grille des champs */
.gform_wrapper.gform-theme .gform_fields {
	row-gap: var(--tpm-space-block);
}

/* Label : nav, couleur text, 8 px au-dessus du champ */
/* Sélecteur à 5 classes : GF style les <label> plus fort que les <legend>,
   d'où deux typographies dans un même formulaire sans ce renfort. */
.gform_wrapper.gform-theme .gform_fields .gfield > :is(label, legend).gfield_label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-nav-font-family);
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
}

.gform_wrapper.gform-theme .gform_fields .gfield > .gfield_label .gform-field-label__text {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.gform_wrapper.gform-theme .gfield_required {
	color: var(--e-global-color-error);
}

/* Description : bodysm, txtsec */
.gform_wrapper.gform-theme .gfield_description:not(.validation_message) {
	margin-top: 8px;
	padding: 0;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
}

/* Champs : text, fond bgsubtle, sans bordure, rayon md, padding 0/16, 52 px */
.gform_wrapper.gform-theme .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--tpm-radius-md);
	background-color: var(--e-global-color-bgsubtle);
	box-shadow: none;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family);
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	transition: background-color var(--tpm-transition), box-shadow var(--tpm-transition);
}

/* Sélecteur renforcé (.ginput_container) : la règle commune des champs, plus
   spécifique que .gfield textarea, imposait sinon ses 52 px au textarea. */
.gform_wrapper.gform-theme .gfield .ginput_container textarea {
	height: 152px;
	min-height: 152px;
	padding: 13px 16px;
	resize: vertical;
}

/* Listes déroulantes : GF (Orbital) rend le select en appearance: none, et
   Chrome et Safari placent alors le texte en haut d'un champ de hauteur fixe
   sans padding vertical. Texte centré par un interligne égal à la hauteur du
   champ (52), padding droit réservé au chevron de GF. Liste à choix
   multiples : hauteur libre, 152 px minimum comme le textarea. */
.gform_wrapper.gform-theme .gfield select:not([multiple]) {
	padding-right: 44px;
	line-height: 52px;
	text-overflow: ellipsis;
}

.gform_wrapper.gform-theme .gfield select[multiple] {
	height: auto;
	min-height: 152px;
	padding: 8px;
	line-height: var(--e-global-typography-text-line-height);
}

.gform_wrapper.gform-theme .gfield :is(input, textarea)::placeholder {
	color: var(--e-global-color-txtsec);
	opacity: 1;
}

/* Survol : bordure 1 px cyan intérieure */
.gform_wrapper.gform-theme .gfield :is(input, select, textarea):hover {
	box-shadow: inset 0 0 0 1px var(--e-global-color-cyan);
}

/* Focus : fond white, bordure 2 px primary intérieure (remplace l'outline) */
.gform_wrapper.gform-theme .gfield :is(input, select, textarea):focus {
	outline: none;
	background-color: var(--e-global-color-white);
	box-shadow: inset 0 0 0 2px var(--e-global-color-primary);
}

/* Erreur : fond white, bordure 2 px error ; message captionb error, gap 6 */
.gform_wrapper.gform-theme .gfield.gfield_error :is(input, select, textarea) {
	background-color: var(--e-global-color-white);
	box-shadow: inset 0 0 0 2px var(--e-global-color-error);
}

.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--e-global-color-error);
	font-family: var(--e-global-typography-captionb-font-family);
	font-size: var(--e-global-typography-captionb-font-size);
	font-weight: var(--e-global-typography-captionb-font-weight);
	line-height: var(--e-global-typography-captionb-line-height);
}

/* Désactivé : opacité 50 % */
.gform_wrapper.gform-theme .gfield :is(input, select, textarea):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Cases à cocher et radios par défaut (tout champ sans tpm-choice-tiles,
   case de consentement comprise) : la section Champs du kit
   (.elementor-kit-N input:not([type="button"]):not([type="submit"]),
   spécificité 0,3,1) leur impose le padding, le fond, la bordure et le rayon
   des champs texte, ce qui les déforme. Contrôle natif rétabli, teinté en
   primary. Disposition laissée à Gravity Forms (réglage Choice Layout du
   champ : vertical, horizontal ou colonnes). Aucune maquette (TPM-02 n° 26). */
.gform_wrapper.gform-theme input:is([type="checkbox"], [type="radio"]):not(.tpm-choice-tiles input) {
	appearance: auto;
	box-sizing: border-box;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	accent-color: var(--e-global-color-primary);
	vertical-align: middle;
	cursor: pointer;
}

/* Libellé d'un choix par défaut : bodysm, couleur text. Marge haute de GF
   (8 px) retirée et interligne de 20 px (1.429em pour 14 px, relevé Manu du
   16/10/2026) : le texte s'aligne sur le contrôle de 20 px. */
.gform_wrapper.gform-theme .gfield:not(.tpm-choice-tiles) .gchoice .gform-field-label--type-inline {
	margin-top: 0;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: 1.429em;
	cursor: pointer;
}

/* tpm-choice-tiles · Tuiles de choix, Form/Choice tile 400:6918. Classe à
   saisir dans Gravity Forms (champ Radio ou Cases à cocher > Apparence >
   Nom de classe CSS), posée par GF sur le conteneur .gfield. Tuiles en
   ligne avec retour à la ligne, largeur ajustée au libellé, quel que soit
   le réglage Choice Layout ; une tuile par ligne, pleine largeur, sous
   576 px (bloc 7). Même hauteur (64 px minimum, étirées sur la plus haute
   de la rangée). Titre et sous-titre toujours sur une ligne chacun, coupés
   par « … » quand la tuile est plus étroite que le libellé (demande Manu
   du 18/10/2026) : le titre est un nœud texte nu du libellé GF, sans
   balise à cibler, d'où un libellé en bloc (et non en grille ou en flex,
   qui l'enfermeraient dans une boîte anonyme où text-overflow ne
   s'applique pas) et un sous-titre en ligne renvoyé à la ligne par un
   saut forcé.
   Fond bgsubtle, rayon lg, padding 12/24/12/12, titre nav text, sous-titre
   caption txtsec (balise small dans le libellé du choix). Survol : bordure
   1 px cyan. Sélection : fond secondary, titre white, sous-titre odmuted,
   pastille cyan 20 px à point secondary 8 px. Le contrôle natif est masqué
   mais reste accessible. */
.gform_wrapper.gform-theme .tpm-choice-tiles :is(.gfield_radio, .gfield_checkbox) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	min-width: 0; /* sinon la tuile ne rétrécit pas sous son libellé insécable */
	max-width: 100%;
	margin: 0;
	border-radius: var(--tpm-radius-lg);
	background-color: var(--e-global-color-bgsubtle);
	box-shadow: none;
	transition: background-color var(--tpm-transition), box-shadow var(--tpm-transition);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:hover {
	box-shadow: inset 0 0 0 1px var(--e-global-color-cyan);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice :is(input[type="radio"], input[type="checkbox"]) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice label {
	position: relative;
	display: block;
	flex: 1 1 auto;
	align-content: center; /* centrage vertical d'un bloc (64 px minimum) */
	box-sizing: border-box;
	min-width: 0;
	min-height: 64px;
	max-width: none;
	margin: 0;
	padding: 12px 56px 12px 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-nav-font-family);
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-nav-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
	cursor: pointer;
	transition: color var(--tpm-transition);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice label small {
	display: inline;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-caption-font-family);
	font-size: var(--e-global-typography-caption-font-size);
	font-weight: var(--e-global-typography-caption-font-weight);
	line-height: var(--e-global-typography-caption-line-height);
	letter-spacing: var(--e-global-typography-caption-letter-spacing);
	transition: color var(--tpm-transition);
}

/* Sous-titre sur sa propre ligne : saut forcé, la ligne restant dans le
   libellé, qui la coupe par « … » comme le titre. */
.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice label small::before {
	content: "\A";
	white-space: pre;
}

/* tpm-tile-icon · pastille d'icône d'une tuile (Form/Choice tile, TPM-02
   n° 24) : span vide en tête du libellé du choix, saisi dans Gravity Forms
   (<span class="tpm-tile-icon tpm-tile-icon--incubateur" aria-hidden="true"></span>).
   Pastille 40 white, icône 24 text (tuile sélectionnée comprise), gap 12 ;
   posée en absolu à gauche, centrée verticalement, le libellé réservant
   64 px (12 + 40 + 12) : titre et sous-titre à droite. Icône
   Phosphor Duotone de la médiathèque posée en masque (décision Manu du
   16/10/2026) : sa forme seule est reprise, couleur par background-color,
   second tracé à 20 % de la même couleur. URL sans domaine, à garder
   identique en prod ; un fichier renommé ou supprimé dans la médiathèque
   laisse la pastille vide. Un modificateur par choix, nommé d'après sa
   valeur. */
.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice label:has(.tpm-tile-icon) {
	padding-left: 64px;
}

.gform_wrapper.gform-theme .tpm-choice-tiles .tpm-tile-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	display: block;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-white);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .tpm-tile-icon::before {
	content: "";
	position: absolute;
	inset: 8px;
	background-color: var(--e-global-color-text);
	/* Propriétés détaillées et non le raccourci mask, qui remettrait à zéro
	   le mask-image posé par les modificateurs, moins spécifiques. */
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.tpm-tile-icon--accompagnement.tpm-tile-icon::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/10/handshake-duotone.svg");
	mask-image: url("/wp-content/uploads/2026/10/handshake-duotone.svg");
}

.tpm-tile-icon--incubateur.tpm-tile-icon::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/10/rocket-launch-duotone.svg");
	mask-image: url("/wp-content/uploads/2026/10/rocket-launch-duotone.svg");
}

.tpm-tile-icon--pepiniere-services.tpm-tile-icon::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/10/storefront-duotone.svg");
	mask-image: url("/wp-content/uploads/2026/10/storefront-duotone.svg");
}

.tpm-tile-icon--pepiniere-agro.tpm-tile-icon::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/10/plant-duotone.svg");
	mask-image: url("/wp-content/uploads/2026/10/plant-duotone.svg");
}

.tpm-tile-icon--autre.tpm-tile-icon::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/10/dots-three-outline-duotone.svg");
	mask-image: url("/wp-content/uploads/2026/10/dots-three-outline-duotone.svg");
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:checked) {
	background-color: var(--e-global-color-secondary);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:checked) label {
	color: var(--e-global-color-white);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:checked) label small {
	color: var(--e-global-color-odmuted);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-secondary);
	box-shadow: 0 0 0 6px var(--e-global-color-cyan);
}

.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:focus-visible) {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* Messages · Form/Message 400:6933 : padding 16/20, rayon md, titre h5,
   texte bodysm txtsec. Succès : fond tint, bordure green. Erreur : fond
   errorbg, bordure error. */
.gform_wrapper.gform-theme .gform_validation_errors,
.gform_confirmation_wrapper .gform_confirmation_message {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--tpm-space-block);
	padding: 16px 20px;
	border: 1px solid var(--e-global-color-error);
	border-radius: var(--tpm-radius-md);
	background-color: var(--e-global-color-errorbg);
	box-shadow: none;
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
}

.gform_confirmation_wrapper .gform_confirmation_message {
	border-color: var(--e-global-color-green);
	background-color: var(--e-global-color-tint);
}

/* Titre du message : taille des libellés de champ (nav, 14/20), gras h5
   conservé (demande Manu du 16/10/2026 : le h5 de Figma, 18 px, était trop
   gros au-dessus du formulaire) */
.gform_wrapper.gform-theme .gform_validation_errors .gform_submission_error,
.gform_confirmation_wrapper .gform_confirmation_message :is(h2, h3, h4, h5) {
	margin: 0;
	padding: 0;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-nav-font-family);
	font-size: var(--e-global-typography-nav-font-size);
	font-weight: var(--e-global-typography-h5-font-weight);
	line-height: var(--e-global-typography-nav-line-height);
	letter-spacing: var(--e-global-typography-nav-letter-spacing);
}

.gform_wrapper.gform-theme .gform_validation_errors .gform-icon {
	color: var(--e-global-color-error);
}

/* Champ HTML (mention RGPD sous le formulaire) : bodysm txtsec, liens
   soulignés couleur link. À confirmer au gabarit Contact. */
.gform_wrapper.gform-theme .gfield--type-html {
	color: var(--e-global-color-txtsec);
	font-family: var(--e-global-typography-bodysm-font-family);
	font-size: var(--e-global-typography-bodysm-font-size);
	font-weight: var(--e-global-typography-bodysm-font-weight);
	line-height: var(--e-global-typography-bodysm-line-height);
}

.gform_wrapper.gform-theme .gfield--type-html a {
	color: var(--e-global-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* tpm-gf-legal · mention RGPD en petit corps (demande Manu du 18/10/2026).
   Classe à saisir dans Gravity Forms (champ HTML > Apparence > Nom de
   classe CSS), posée par GF sur le conteneur .gfield. Taille 12 px (taille
   de caption), interligne 1,3. Plus spécifique que la règle du champ HTML
   ci-dessus. */
.gform_wrapper.gform-theme .gfield.tpm-gf-legal {
	font-size: var(--e-global-typography-caption-font-size);
	line-height: 1.3;
}

/* Bouton d'envoi : style Primary Large du kit, en pied de formulaire
   (.gform_footer) ou en fin de dernière ligne (champ .gfield--type-submit,
   réglage GF « Emplacement du bouton d'envoi », 29/10/2026) */
.gform_wrapper.gform-theme :is(.gform_footer, .gform_page_footer) {
	margin: 32px 0 0;
	padding: 0;
}

.gform_wrapper.gform-theme :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(input[type="submit"], input[type="button"], button, .gform_button, .gform-theme-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-accent);
	box-shadow: none;
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tpm-transition), color var(--tpm-transition);
}

.gform_wrapper.gform-theme :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(input[type="submit"], input[type="button"], button, .gform_button, .gform-theme-button):hover {
	background-color: var(--e-global-color-limehov);
	color: var(--e-global-color-text);
}

.gform_wrapper.gform-theme :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(input[type="submit"], input[type="button"], button, .gform_button, .gform-theme-button):disabled {
	opacity: 0.5;
	cursor: progress; /* GF désactive le bouton pendant l'envoi */
}

/* Bouton d'envoi final (button.gform_button de .gform_footer, ou button du
   champ .gfield--type-submit en fin de dernière ligne) en Arrow
   circle (§ 7) : flèche txtbrand 16 px dans une pastille primary de 28 px,
   padding 10/8/10/24 plus la place de la pastille (8 + 28 + 8 = 44 à
   droite). Pastille (::before) et flèche (::after) posées dans le bouton,
   GF rendant une balise button. Flèche Phosphor arrow-right (Bold) en
   masque, tracé repris du fichier d'origine sans couleur (seule la forme
   compte). Boutons Précédent / Suivant des formulaires à pages
   (.gform_page_footer) non concernés. */
.gform_wrapper.gform-theme :is(.gform_footer button.gform_button, .gfield--type-submit button) {
	position: relative;
	/* !important posé par Manu (17/10/2026) : GF modifie le padding du
	   bouton pendant l'envoi, la pastille passait alors sur le libellé. */
	padding: 10px 44px 10px 24px !important;
}

/* !important sur content et display : le thème Orbital de GF réserve les
   pseudo-éléments des boutons à ses icônes intégrées (content tiré de
   --gf-ctrl-btn-icon, vide par défaut) et passait devant nos règles, qui
   restaient sans effet (relevé Manu du 17/10/2026). Même chose pour
   position : pendant l'envoi, GF repasse les pseudo-éléments en relative
   pour son indicateur de chargement. */
.gform_wrapper.gform-theme :is(.gform_footer button.gform_button, .gfield--type-submit button)::before,
.gform_wrapper.gform-theme :is(.gform_footer button.gform_button, .gfield--type-submit button)::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50%;
	right: 8px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	pointer-events: none;
}

.gform_wrapper.gform-theme :is(.gform_footer button.gform_button, .gfield--type-submit button)::before {
	border-radius: var(--tpm-radius-full);
	background-color: var(--e-global-color-primary);
}

.gform_wrapper.gform-theme :is(.gform_footer button.gform_button, .gfield--type-submit button)::after {
	background-color: var(--e-global-color-txtbrand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Bouton en fin de dernière ligne (champ .gfield--type-submit dans la
   grille des champs) : dès 1200 px, calé sur le bord droit du formulaire et
   centré verticalement sur le champ voisin (Turnstile) ; sous 1200 px, seul
   sur sa ligne sous ce champ, aligné à gauche (bloc 7). Pied de formulaire
   réduit aux champs cachés : marge haute de 32 retirée. */
.gform_wrapper.gform-theme .gform_fields .gfield.gfield--type-submit {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.gform_wrapper.gform-theme .gform_footer:not(:has(> :not(input[type="hidden"]))) {
	margin: 0;
}


/* ==========================================================================
   6. ÉTATS
   ========================================================================== */

/* Focus clavier : outline 2 px décalé de 2 px, primary sur clair, accent
   sur sombre (tpm-on-dark). Jamais supprimé sans remplacement. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

.tpm-on-dark :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--e-global-color-accent);
}

/* Le contrôle natif masqué des tuiles de choix : l'anneau est porté par la tuile */
.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice :is(input[type="radio"], input[type="checkbox"]):focus-visible {
	outline: none;
}

/* Animations d'entrée Elementor (§ 7) : le fadeInUp natif décale l'élément de
   100 % de sa hauteur ; tpm-fade-up le ramène à 24 px. Le déclenchement
   reste celui d'Elementor (classe animated posée au défilement). */
@keyframes tpm-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.elementor-element.animated.fadeInUp {
	animation-name: tpm-fade-up;
}

/* Mouvement réduit : toutes les animations et transitions du site, y compris
   les animations d'entrée natives d'Elementor, les carrousels et le header
   masqué au défilement. !important : seul moyen de passer devant les durées
   posées par Elementor et les extensions sur leurs propres sélecteurs. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   7. RESPONSIVE · points de rupture du kit (§ 6)
   Widescreen ≥ 1440 · Desktop ≤ 1439 · Laptop ≤ 1199 · Tablette extra ≤ 991
   · Tablette ≤ 767 · Mobile extra ≤ 575 · Mobile ≤ 479.
   Groupes du référentiel : Desktop = Widescreen à Laptop (≥ 992), Tablette =
   Tablette extra et Tablette (576 à 991), Mobile = Mobile extra et Mobile
   (≤ 575). Hello Elementor fixe ses propres largeurs (500 dès 576, 600 dès
   768, 800 dès 992, 1140 dès 1200) sur le titre de page, son header, son
   footer et le .site-main des pages natives. Chaque palier ci-dessous les
   remplace par le conteneur boxed du kit, sans gouttière ; gouttière de
   15 px sous 480 px seulement. Préfixes body / html body : passe devant
   Hello quel que soit l'ordre de chargement de ses feuilles.
   ========================================================================== */

/* Widescreen : conteneur 1312 (Hello s'arrête à 1140), plafonné à l'écran
   moins 30 px comme les sections Elementor (padding latéral de 15 px) */
@media (min-width: 1440px) {
	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: min(1312px, calc(100% - 30px));
	}
}

/* Desktop : conteneur 1140 (valeur Elementor par défaut, non réglée dans le kit) */
@media (max-width: 1439px) {
	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: 1140px;
	}
}

/* Laptop : conteneur 960 */
@media (max-width: 1199px) {
	/* tpm-error-code : 404 décoratif à 200 */
	.e-con.tpm-error-code::after {
		font-size: 200px;
	}

	/* Gravity Forms : bouton en fin de dernière ligne seul sur sa ligne, sous
	   le champ voisin, aligné à gauche */
	.gform_wrapper.gform-theme .gform_fields .gfield.gfield--type-submit {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: 960px;
	}
}

/* Tablette extra : conteneur 720 */
@media (max-width: 991px) {
	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: 720px;
	}

	/* Header · groupes Tablette et Mobile : burger, header de 64 px (hauteur
	   du header et compensation des heros foncés) */
	body {
		--tpm-header-height: 64px;
		--tpm-scroll-offset: 30px; /* barre d'ancres (bloc 4) */
	}

	/* Menu ouvert : header fixé en haut, variante White à fond white,
	   défilement de la page bloqué */
	.tpm-header:has(.elementor-menu-toggle.elementor-active) {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		left: 0;
		background-color: var(--e-global-color-white);
		color: var(--e-global-color-txtsec);
	}

	body:has(.tpm-header .elementor-menu-toggle.elementor-active) {
		overflow: hidden;
	}

	/* Menu plein écran sous le header, contenu aligné sur le conteneur du
	   palier ; 88 px réservés en bas pour le bouton */
	.tpm-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tpm-header-height));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		box-sizing: border-box;
		margin: 0;
		padding: 16px max(15px, calc((100% - 720px) / 2)) 88px;
		background-color: var(--e-global-color-white);
		overflow-y: auto;
	}

	/* Entrées du menu et sous-menus en accordéon */
	.tpm-header .elementor-nav-menu--dropdown a:is(.elementor-item, .elementor-sub-item) {
		box-sizing: border-box;
		min-height: var(--tpm-touch-target);
		padding: 12px 0;
		border: 0;
		border-bottom: 1px solid var(--e-global-color-border);
		background-color: transparent;
		color: var(--e-global-color-txtsec);
		text-decoration: none;
	}

	.tpm-header .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
		padding-left: 16px;
	}

	.tpm-header .elementor-nav-menu--dropdown a:is(.elementor-item, .elementor-sub-item):is(:hover, :focus-visible, .elementor-item-active) {
		background-color: transparent;
		color: var(--e-global-color-primary);
	}

	/* Item tpm-menu-cta : posé en bas du menu ouvert, à 20 px du bas, en
	   Primary Large pleine largeur. Le scaleY d'Elementor sur le menu ouvert
	   ferait du menu le bloc conteneur de l'item fixe (il défilerait avec la
	   liste) : retiré. */
	.tpm-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
		transform: none;
	}

	.tpm-header .elementor-nav-menu--dropdown .tpm-menu-cta {
		position: fixed;
		right: max(15px, calc((100% - 720px) / 2));
		bottom: 20px;
		left: max(15px, calc((100% - 720px) / 2));
		z-index: 2;
	}

	.tpm-header .elementor-nav-menu--dropdown .tpm-menu-cta > a.elementor-item {
		display: flex;
		width: 100%;
		min-height: 48px;
		padding: 13px 24px;
	}
	/* tpm-timeline : frise verticale. Filet de 2 px sous la pastille, départ
	   sous la pastille qui le recouvre, jusqu'à la pastille de l'étape
	   suivante ; contenu décalé à droite de la pastille et remonté à sa
	   hauteur. Valeurs ajustées par Manu le 14/10/2026 (filet à 19 px,
	   contenu à 56 px, remonté de 58 px). */
	.tpm-timeline > .e-con,
	.tpm-timeline > .e-con-inner > .e-con {
		position: relative;
	}

	.tpm-timeline > .e-con:not(:last-child)::before,
	.tpm-timeline > .e-con-inner > .e-con:not(:last-child)::before {
		content: "";
		display: block;
		position: absolute;
		top: 40px;
		left: 19px;
		width: 2px;
		height: 100%;
		background-color: var(--e-global-color-cyan);
	}

	.tpm-timeline--cyan45 > .e-con:not(:last-child)::before,
	.tpm-timeline--cyan45 > .e-con-inner > .e-con:not(:last-child)::before {
		background-color: var(--e-global-color-cyan45);
	}

	.tpm-timeline--accent > .e-con:not(:last-child)::before,
	.tpm-timeline--accent > .e-con-inner > .e-con:not(:last-child)::before {
		background-color: var(--e-global-color-accent);
	}

	.tpm-timeline--tgyelbd > .e-con:not(:last-child)::before,
	.tpm-timeline--tgyelbd > .e-con-inner > .e-con:not(:last-child)::before {
		background-color: var(--e-global-color-tgyelbd);
	}

	.tpm-timeline .elementor-widget-divider {
		display: none;
	}

	.e-con.tpm-timeline__body {
		width: auto;
		margin-top: -58px;
		margin-left: 56px;
	}

	/* tpm-steps : filet vertical ramené à 24 px sous les pastilles */
	.tpm-steps li:not(:last-child) .tpm-steps__marker::after {
		height: 24px;
	}

	/* tpm-device : mise en page mobile de Card/Device row (Layout=Mobile),
	   toggle sous l'en-tête à 16 px, aligné à droite. Paddings revus par
	   Manu le 14/10/2026 : Tablette 32/32/16 fermé, 32 ouvert ; Mobile
	   (bloc 575) 20/16/4 fermé, 20/16 ouvert. */
	.e-con.tpm-device {
		padding: 32px 32px 16px;
	}
	.e-con.tpm-device:has(.e-n-accordion-item[open]) {
		padding: 32px;
		border-radius: 20px;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item-title {
		margin-top: 16px;
	}

	.tpm-device .tpm-device__acc .e-n-accordion-item > .e-con {
		padding-top: 24px;
	}

	.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice label {
		padding-right: 48px;
	}

	.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice:has(input:checked)::after {
		right: 20px;
	}

	/* tpm-error-code : 404 décoratif à 160 */
	.e-con.tpm-error-code::after {
		font-size: 160px;
	}

	/* tpm-checklist : deux colonnes */
	.tpm-checklist .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* tpm-agenda-mois : mois espacés de 40, cartes sur deux colonnes, gap 24 */
	.tpm-agenda-mois {
		gap: 40px;
	}

	.tpm-agenda-mois .tpm-agenda-mois__list:has(.tpm-agenda--card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* Gabarit Page de contenu : sommaire replié au-dessus du contenu,
	   boîte à contour border rayon md, en-tête de 44 px (cible tactile)
	   padding 12/16, liste 0/16/12 une fois ouverte (sans maquette) */
	.tpm-toc.tpm-toc .elementor-toc {
		border: 1px solid var(--e-global-color-border);
		border-radius: var(--tpm-radius-md);
	}

	.tpm-toc.tpm-toc .elementor-toc__header {
		min-height: var(--tpm-touch-target);
		cursor: pointer;
	}

	.tpm-toc.tpm-toc .elementor-toc:not(.elementor-toc--collapsed) .elementor-toc__body {
		padding: 0 16px 12px;
	}

	/* tpm-loop-peek : deux cartes et la suivante qui dépasse */
	.tpm-loop-peek :is(.swiper, .swiper-container) {
		width: max(calc(2 * 302px + 24px), 85%);
		margin-left: 0;
		overflow: visible;
	}
}

/* Tablette : conteneur 540 */
@media (max-width: 767px) {
	/* Barre d'ancres (bloc 4) : écart d'arrêt des cibles */
	body {
		--tpm-scroll-offset: 28px;
	}

	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: 540px;
	}

	/* Header : menu ouvert aligné sur le conteneur 540 */
	.tpm-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		padding-inline: max(15px, calc((100% - 540px) / 2));
	}

	.tpm-header .elementor-nav-menu--dropdown .tpm-menu-cta {
		right: max(15px, calc((100% - 540px) / 2));
		left: max(15px, calc((100% - 540px) / 2));
	}

	/* tpm-gallery : disposition mobile (452:8058) dès 767 px, grande photo
	   350 × 220 pleine largeur puis vignettes 171 × 120 par deux, gap 8 ;
	   photo seule sur sa rangée en pleine largeur (2 photos : 350 × 220,
	   4 photos : panoramique 350 × 120). Placements desktop annulés par des
	   classes doublées (même logique que tpm-link en boucle). */
	.tpm-gallery .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 8px;
		aspect-ratio: auto;
	}

	.tpm-gallery .gallery .gallery-item.gallery-item {
		grid-area: auto;
		aspect-ratio: 171 / 120;
	}

	.tpm-gallery .gallery:has(> .gallery-item:nth-of-type(3):last-of-type) > .gallery-item:not(:first-of-type) {
		grid-column: auto;
	}

	.tpm-gallery .gallery .gallery-item.gallery-item:is(:first-of-type, :nth-of-type(2):last-of-type) {
		grid-column: 1 / -1;
		aspect-ratio: 350 / 220;
	}

	.tpm-gallery .gallery .gallery-item.gallery-item:nth-of-type(4):last-of-type {
		grid-column: 1 / -1;
		aspect-ratio: 350 / 120;
	}
}

/* Mobile extra : conteneur 450, groupe Mobile */
@media (max-width: 575px) {
	/* Barre d'ancres (bloc 4) : écart d'arrêt des cibles */
	body {
		--tpm-scroll-offset: 24px;
	}

	/* Pages WordPress natives : respiration verticale mobile */
	body:not([class*="elementor-page-"]) .site-main {
		padding-block: 32px;
	}

	/* Hello Elementor pose un padding-inline de 10 px sous 575 px sur son
	   header et son footer (affichés seulement sans gabarit Theme Builder) et
	   sur le .site-main des pages natives, ainsi que sur le titre de page. De
	   480 à 575 px : supprimé, largeur du conteneur (450). Sur les pages
	   natives, le titre reste à 0 (bloc 2, plus spécifique) : il est déjà
	   dans .site-main. Spécificité (0,2,1) et (0,2,2) : passe devant Hello quel que
	   soit l'ordre de chargement. Les pages construites avec Elementor ne sont
	   pas concernées. */
	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: 450px;
		padding-inline: 0;
	}

	/* Contenu éditorial : respirations réduites */
	:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) h2 {
		margin-top: 32px;
	}

	:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) :is(blockquote, .wp-block-quote) {
		padding-left: 16px;
	}

	:is(.elementor-widget-theme-post-content, .elementor-widget-text-editor, .page-content:not(:has(.elementor))) .wp-block-file a:not(.wp-block-file__button) {
		display: inline-flex;
		align-items: center;
		min-height: var(--tpm-touch-target);
	}

	/* Boutons : pleine largeur, sauf Small (header) ; liens fléchés à 44 px */
	.elementor-widget-button[class*="tpm-btn--"]:not(.tpm-btn--sm) .elementor-button {
		width: 100%;
	}

	.elementor-widget-button.tpm-link .elementor-button {
		min-height: var(--tpm-touch-target);
	}

	/* Bouton flottant : largeur du conteneur, 20 px du bas, réserve de 88 px
	   en bas de page. Bords latéraux = max(15 px, (écran − 450) / 2) : 450
	   centré de 480 à 575 px, 15 px des bords sous 480 px (gouttière mobile).
	   Les % d'un élément fixe se rapportent à la largeur de la fenêtre. */
	.elementor-widget-button.tpm-floating-cta {
		display: block;
		position: fixed;
		right: max(15px, calc((100% - 450px) / 2));
		bottom: 20px;
		left: max(15px, calc((100% - 450px) / 2));
		z-index: 90;
		transition: transform var(--tpm-transition), opacity var(--tpm-transition);
	}

	.elementor-widget-button.tpm-floating-cta .elementor-button {
		width: 100%;
	}

	.elementor-widget-button.tpm-floating-cta.tpm-floating-cta--hidden {
		transform: translateY(calc(100% + 20px));
		opacity: 0;
		pointer-events: none;
	}

	body:has(.tpm-floating-cta) {
		padding-bottom: 88px;
	}

	/* Header : menu ouvert aligné sur le conteneur 450, 15 px des bords sous
	   480 px */
	.tpm-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		padding-inline: max(15px, calc((100% - 450px) / 2));
	}

	.tpm-header .elementor-nav-menu--dropdown .tpm-menu-cta {
		right: max(15px, calc((100% - 450px) / 2));
		left: max(15px, calc((100% - 450px) / 2));
	}

	/* Gravity Forms : tuiles de choix empilées, une par ligne, pleine
	   largeur */
	.gform_wrapper.gform-theme .tpm-choice-tiles .gchoice {
		flex: 1 1 100%;
	}

	/* Gravity Forms : bouton d'envoi pleine largeur */
	.gform_wrapper.gform-theme :is(.gform_footer, .gform_page_footer, .gfield--type-submit) :is(input[type="submit"], input[type="button"], button, .gform_button, .gform-theme-button) {
		width: 100%;
	}

	.e-con.tpm-device {
		padding: 20px 16px 4px;
	}
	.e-con.tpm-device:has(.e-n-accordion-item[open]) {
		padding: 20px 16px;
	}

	/* tpm-error-code : 404 décoratif à 120 */
	.e-con.tpm-error-code::after {
		font-size: 120px;
	}

	/* tpm-checklist : une colonne */
	.tpm-checklist .elementor-icon-list-items {
		grid-template-columns: minmax(0, 1fr);
	}

	/* tpm-agenda-mois : mois espacés de 32, cartes sur une colonne */
	.tpm-agenda-mois {
		gap: 32px;
	}

	/* tpm-loop-empty : padding 32/24, lien à 44 px (cible tactile) */
	.tpm-loop-empty {
		padding: 32px 24px;
	}

	.tpm-loop-empty .tpm-loop-empty__link {
		min-height: var(--tpm-touch-target);
	}

	.tpm-agenda-mois .tpm-agenda-mois__list:has(.tpm-agenda--card) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* tpm-loop-peek : une carte et la suivante qui dépasse */
	.tpm-loop-peek :is(.swiper, .swiper-container) {
		width: max(302px, 85%);
	}

	/* tpm-filter-pills : fondu de bord ramené à 32 px (barre des thèmes et
	   Filtre de taxonomie) */
	.tpm-terms-nav,
	.elementor-widget.tpm-filter-pills:has(.e-filter) {
		--tpm-terms-fade: 32px;
	}

	/* tpm-pagination : Précédent / Suivant réduits à leur flèche (libellé
	   gardé pour les lecteurs d'écran), cases de 44 px */
	.tpm-pagination .elementor-pagination .page-numbers:is(.prev, .next) {
		min-width: var(--tpm-touch-target);
		padding: 0;
	}

	.tpm-pagination .tpm-pagination__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Mobile : conteneur 100 %, seule gouttière du site (15 px), y compris sur le
   header et le footer de Hello (10 px d'origine) */
@media (max-width: 479px) {
	body :is(.page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header)),
	html body:not([class*="elementor-page-"]) .site-main {
		max-width: none;
		padding-inline: 15px;
	}
}