.elementor-kit-988238{--e-global-color-primary:#133816;--e-global-color-secondary:#0D2710;--e-global-color-text:#20241F;--e-global-color-accent:#C8973C;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Condensed";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto Condensed";--e-global-typography-accent-font-weight:700;--e-global-typography-73ee2d9-font-family:"Roboto";--e-global-typography-73ee2d9-font-weight:400;color:#333333;font-family:"Muli", Sans-serif;font-weight:600;}.elementor-kit-988238 button,.elementor-kit-988238 input[type="button"],.elementor-kit-988238 input[type="submit"],.elementor-kit-988238 .elementor-button{background-color:#1D9E75;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#1D9E75;border-radius:5px 5px 5px 5px;}.elementor-kit-988238 button:hover,.elementor-kit-988238 button:focus,.elementor-kit-988238 input[type="button"]:hover,.elementor-kit-988238 input[type="button"]:focus,.elementor-kit-988238 input[type="submit"]:hover,.elementor-kit-988238 input[type="submit"]:focus,.elementor-kit-988238 .elementor-button:hover,.elementor-kit-988238 .elementor-button:focus{background-color:#C8973C;color:#FFFFFF;}.elementor-kit-988238 e-page-transition{background-color:#FFBC7D;}.elementor-kit-988238 a{color:#1D9E75;}.elementor-kit-988238 a:hover{color:#C8973C;}.elementor-kit-988238 h1{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 h2{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 h3{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 h4{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 h5{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 h6{color:#1A2E2A;font-family:"Poppins", Sans-serif;}.elementor-kit-988238 input:not([type="button"]):not([type="submit"]),.elementor-kit-988238 textarea,.elementor-kit-988238 .elementor-field-textual{color:#1A2E2A;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#EBEBEB;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}.tp-site-share{z-index:30;}.elementor-kit-988238 .tp-reading-progress{top:0;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
 * UNICO — Socle de design commun à tout le site
 * =============================================
 *
 * Objet : étendre au reste d'unico.cd le langage visuel des pages du Colloque,
 * qui est aujourd'hui la seule partie du site à l'appliquer. Les valeurs ne
 * sont pas réinventées : elles sont reprises telles quelles de
 * « unico-colloque/assets/css/pilier.css », pour que les deux familles de pages
 * ne puissent pas dériver l'une de l'autre.
 *
 * Le fichier est en deux parties, et cette séparation est le point important :
 *
 *   PARTIE A — correctifs globaux. Le seul endroit du projet où des règles
 *   portent sur des balises (body, p, h1-h3). Elles réparent trois défauts
 *   constatés en ligne le 15/08/2026 : le texte courant sort en « Muli », la
 *   police du thème hérité, alors que la charte dit Roboto ; les titres n'ont
 *   pas tous la même famille selon la page ; le thème pose des ombres portées
 *   sur les titres et les boutons.
 *
 *   PARTIE B — primitives « uds- ». Aucune règle globale. Chaque classe se
 *   pose à la main dans Elementor (onglet Avancé → Classes CSS) ou par le JSON
 *   d'un gabarit. Rien ne bouge sur une page tant qu'on n'y a pas posé de
 *   classe : on peut donc harmoniser page par page, sans risque sur le reste.
 *
 * Trois conventions, communes au plugin unico-colloque :
 *   1. Aucune famille de police n'est imposée en dur dans la partie B : les
 *      deux familles passent par des variables branchées sur la typographie
 *      globale d'Elementor (Réglages du site → Typographie). Globale non
 *      réglée, on retombe sur Playfair Display et Roboto Condensed, jamais sur
 *      la police du thème.
 *   2. « !important » n'est employé que dans les blocs de neutralisation, là où
 *      le thème d'unico.cd repeint les titres, les boutons et les champs.
 *   3. Les classes qui ne portent aucune règle sont volontaires : elles
 *      identifient une section dans l'inspecteur et servent de point d'accroche
 *      pour une retouche localisée.
 *
 * Où le poser : Elementor → Réglages du site → CSS personnalisé (Elementor Pro).
 * À défaut, dans un plugin « mu-plugin » qui met la feuille en file.
 *
 * Préfixe : « uds- » (UNICO Design System), distinct du « ucx- » du Colloque
 * pour que les deux feuilles ne se marchent jamais dessus.
 *
 * Auteur : EKOKI Digital — révision du 15/08/2026
 */


/* ===================================================================
 * PARTIE A — CORRECTIFS GLOBAUX
 *
 * Ces règles s'appliquent partout. Elles sont volontairement peu nombreuses :
 * chaque ligne ajoutée ici est une ligne qui peut casser une page qu'on n'a
 * pas regardée.
 * =================================================================== */

/* -------------------------------------------------------------------
 * A.1 — Variables de marque, disponibles sur tout le document.
 * ------------------------------------------------------------------- */
:root {
	--uds-vert: #133816;
	--uds-vert-fonce: #0D2710;
	--uds-or: #C8973C;
	--uds-vert-sombre: #1A2E2A;
	--uds-beige: #F5F3EF;
	--uds-texte: #20241F;
	--uds-gris: #6B6F68;
	--uds-bordure: #ECE7DC;

	/* Familles : globales Elementor si elles sont réglées, sinon celles de la charte. */
	--uds-f-titre: var(--e-global-typography-primary-font-family, "Playfair Display", Georgia, "Times New Roman", serif);
	--uds-f-cond: var(--e-global-typography-accent-font-family, "Roboto Condensed", "Arial Narrow", Arial, sans-serif);
	--uds-f-texte: var(--e-global-typography-text-font-family, "Roboto", "Helvetica Neue", Arial, sans-serif);

	--uds-radius: 16px;
	--uds-ombre: 0 22px 42px rgba(19, 56, 22, .12);
	--uds-ombre-forte: 0 24px 46px rgba(19, 56, 22, .14);
	--uds-transition: .3s ease;

	/* Rythme vertical. Une seule valeur pour tout le site : c'est ce qui fait
	 * qu'une page « se tient » quand on la fait défiler. */
	--uds-sec-pad: 96px;
	--uds-sec-pad-court: 64px;
}

/*
 * A.2 — Texte courant.
 *
 * Le thème hérité impose « Muli » au body. La charte dit Roboto. Le réglage
 * global d'Elementor ne suffit pas : sa règle porte sur les widgets, pas sur
 * le body du thème. D'où le forçage, limité au strict nécessaire.
 *
 * Le sélecteur exclut délibérément les icônes (Font Awesome, eicons) : leur
 * glyphe EST leur police, la remplacer les fait disparaître. C'est l'erreur
 * classique de ce genre de correctif.
 */
body,
body p,
body li,
body td,
body th,
body label,
body input,
body textarea,
body select,
body button {
	font-family: var(--uds-f-texte) !important;
}

/*
 * Les icônes ne sont PAS traitées ici, et c'est délibéré.
 *
 * Première version de cette feuille : un bloc forçait
 * « font-family: var(--fa-style-family, "Font Awesome 5 Free") » sur .fa, .fas,
 * .far et .fab, pour « protéger » les icônes. Résultat en production le
 * 15/08/2026 : les cinq icônes réseaux sociaux du pied de page ont disparu,
 * remplacées par des ronds gris. La raison : les icônes de marque (.fab) ne
 * vivent pas dans « Font Awesome 5 Brands » — les envoyer chercher leur glyphe
 * dans « Font Awesome 5 Free » revient à demander une lettre qui n'existe pas.
 * Et « --fa-style-family » est une variable de Font Awesome 6 ; le site est en
 * version 5, le repli s'appliquait donc systématiquement.
 *
 * La protection était inutile : le sélecteur du bloc ci-dessus ne liste ni
 * <i> ni <span>. Un <i class="fab"> garde donc sa propre règle Font Awesome —
 * font-family n'est hérité que si l'élément n'en déclare pas.
 *
 * Règle à retenir : ne jamais toucher à la famille d'une icône. Il y en a
 * trois pour Font Awesome 5 (Free solid, Free regular, Brands), et une
 * quatrième pour eicons.
 */

/*
 * A.3 — Titres.
 *
 * H1 et H2 en Playfair Display, H3 en Roboto Condensed : c'est la charte
 * validée le 28/06/2026. Sans ce bloc, la famille dépend de la page et du
 * widget, ce qui est précisément la « cassure » constatée.
 */
body h1,
body h2 {
	font-family: var(--uds-f-titre) !important;
	font-weight: 600;
}

body h3,
body h4 {
	font-family: var(--uds-f-cond) !important;
}

/*
 * A.4 — Neutralisation du thème.
 *
 * Le thème d'unico.cd pose des ombres portées sur les titres et les boutons,
 * et met les <i> en italique — ce qui fait pencher les icônes Font Awesome.
 * Ces trois lignes réparent l'ensemble du site d'un coup.
 */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
.elementor .elementor-button {
	text-shadow: none !important;
	box-shadow: none;
}

.elementor .elementor-icon i,
.elementor .elementor-icon-box-icon i {
	font-style: normal;
	text-shadow: none !important;
}


/* ===================================================================
 * PARTIE B — PRIMITIVES « uds- »
 *
 * À poser dans Elementor, onglet Avancé → Classes CSS. Rien ici ne s'applique
 * tant qu'une classe n'a pas été posée.
 *
 * La classe « uds-sec » se pose sur CHAQUE section qui utilise une primitive :
 * c'est elle qui distribue les variables et qui limite la portée des règles.
 * =================================================================== */

/* -------------------------------------------------------------------
 * B.1 — Section : rythme vertical et fonds
 * ------------------------------------------------------------------- */

.uds-sec {
	--uds-local-texte: var(--uds-texte);
	padding-top: var(--uds-sec-pad);
	padding-bottom: var(--uds-sec-pad);
}

/* Variante courte, pour les sections d'enchaînement (un titre + un bouton). */
.uds-sec.uds-sec--court {
	padding-top: var(--uds-sec-pad-court);
	padding-bottom: var(--uds-sec-pad-court);
}

/* Les trois fonds admis. L'alternance blanc → beige → blanc est ce qui donne
 * son rythme aux pages du Colloque. */
.uds-sec.uds-sec--beige {
	background-color: var(--uds-beige);
}

.uds-sec.uds-sec--vert {
	background-color: var(--uds-vert-fonce);
	color: #FFFFFF;
}

.uds-sec.uds-sec--vert .uds-h2 .elementor-heading-title,
.uds-sec.uds-sec--vert h2 {
	color: #FFFFFF !important;
}

.uds-sec.uds-sec--vert .uds-chapo,
.uds-sec.uds-sec--vert .uds-chapo p {
	color: #D7E2D7 !important;
}

/* Deux sections vertes qui se suivent ne doivent pas doubler leur marge. */
.uds-sec--vert + .uds-sec--vert {
	padding-top: 0;
}

/* -------------------------------------------------------------------
 * B.2 — Sur-titre doré, titre de section, chapeau
 *
 * Valeurs identiques à « .ucx-eyebrow », « .ucx-h2 » et « .ucx-chapo » du
 * Colloque. Ne pas les modifier ici sans les modifier là-bas.
 * ------------------------------------------------------------------- */

.uds-eyebrow .elementor-heading-title,
.uds-eyebrow {
	font-family: var(--uds-f-cond);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--uds-or);
	line-height: 1.4;
}

.uds-sec .uds-eyebrow .elementor-heading-title {
	background: none !important;
	color: var(--uds-or) !important;
}

.uds-h2 .elementor-heading-title {
	font-family: var(--uds-f-titre);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.25;
	color: var(--uds-vert);
}

.uds-h2 {
	margin-top: 12px;
}

.uds-sec .uds-h2 .elementor-heading-title {
	background: none !important;
}

.uds-chapo {
	color: var(--uds-gris);
	max-width: 720px;
	margin: 14px auto 0;
	line-height: 1.7;
}

.uds-sec .uds-chapo p:last-child {
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------
 * B.3 — En-tête de page (hero)
 *
 * Deux variantes, calquées sur le Colloque :
 *   « uds-hero »  — page pilier : haut, photo, titre 52 px.
 *   « uds-phero » — sous-page : plus bas, titre 42 px.
 *
 * Le voile vert est posé ici et non dans le panneau Elementor : c'est lui qui
 * garantit la lisibilité du titre blanc quelle que soit la photo. Le hero de
 * /contactez-lunico/ montre ce qui se passe sans lui — « Contact » y est blanc
 * sur une façade claire, donc quasi illisible.
 * ------------------------------------------------------------------- */

.uds-hero,
.uds-phero {
	position: relative;
	overflow: hidden;
	color: #FFFFFF;
	background-position: center;
	background-size: cover;
}

/* Voile vert. Dégradé plutôt qu'aplat : la photo reste lisible en bas, le
 * texte reste lisible en haut. */
.uds-hero::before,
.uds-phero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 39, 16, .82) 0%, rgba(13, 39, 16, .68) 55%, rgba(13, 39, 16, .78) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Halo doré décoratif, comme sur le pilier. Ne reçoit aucun clic. */
.uds-hero::after,
.uds-phero::after {
	content: "";
	position: absolute;
	top: -240px;
	right: -180px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 151, 60, .20), transparent 68%);
	pointer-events: none;
	z-index: 1;
}

.uds-phero::after {
	top: auto;
	bottom: -250px;
	right: -140px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(200, 151, 60, .14), transparent 70%);
}

/* Le contenu repasse au-dessus du voile et du halo. */
.uds-hero > .elementor-container,
.uds-phero > .elementor-container,
.uds-hero > .e-con-inner,
.uds-phero > .e-con-inner {
	position: relative;
	z-index: 2;
}

.uds-hero {
	padding-top: 132px;
	padding-bottom: 118px;
}

.uds-phero {
	padding-top: 96px;
	padding-bottom: 84px;
}

.uds-hero .uds-h1 .elementor-heading-title {
	font-family: var(--uds-f-titre);
	font-weight: 600;
	font-size: 52px;
	line-height: 1.2;
	color: #FFFFFF;
	max-width: 960px;
	margin: 16px auto 0;
}

.uds-phero .uds-h1 .elementor-heading-title {
	font-family: var(--uds-f-titre);
	font-weight: 600;
	font-size: 42px;
	line-height: 1.2;
	color: #FFFFFF;
	max-width: 860px;
	margin: 14px auto;
}

/*
 * Seconde ligne de défense sur la couleur : le thème impose une couleur aux
 * h1-h3 avec une spécificité qu'une règle ordinaire ne bat pas. C'est le
 * défaut qui a coûté le plus cher au premier montage du Colloque — un titre
 * vert foncé sur fond vert foncé. On ne le laisse pas revenir ici.
 */
.uds-hero .uds-h1 .elementor-heading-title,
.uds-phero .uds-h1 .elementor-heading-title,
.uds-hero h1,
.uds-phero h1 {
	color: #FFFFFF !important;
}

.uds-hero .uds-eyebrow .elementor-heading-title,
.uds-phero .uds-eyebrow .elementor-heading-title {
	color: var(--uds-or) !important;
}

/* Sous-titre du hero : italique, famille des titres. */
.uds-sous,
.uds-sous p {
	max-width: 800px;
	font-family: var(--uds-f-titre) !important;
	font-size: 18px;
	font-style: italic;
	line-height: 1.6;
	color: #E6DCC4 !important;
}

/* Même précaution : la marge haute n'est posée que sur le widget. */
.uds-sous {
	margin: 18px auto 0;
}

.uds-sous p {
	margin: 0 auto;
}

/* Fil d'Ariane. */
.uds-fil,
.uds-fil p {
	font-size: 14px;
	color: #B9C6BA !important;
	margin-bottom: 0;
}

.uds-fil a {
	color: inherit;
	text-decoration: none;
}

.uds-fil a:hover {
	color: var(--uds-or);
}

/* -------------------------------------------------------------------
 * B.4 — Cartes
 *
 * À poser sur la COLONNE, pas sur le widget : c'est l'enveloppe de la colonne
 * qui porte le fond et l'ombre, faute de quoi la carte ne fait pas toute la
 * hauteur de la rangée.
 *
 * La gouttière est une marge EXTÉRIEURE de l'enveloppe. Elementor pose la
 * sienne en marge intérieure, sur cette même enveloppe : si on faisait pareil,
 * le blanc de la carte remplirait la gouttière et les cartes se toucheraient.
 * Le piège a déjà été rencontré sur le pilier ; la parade est reprise à
 * l'identique, sélecteur à quatre classes compris.
 * ------------------------------------------------------------------- */

.uds-sec .elementor-column.uds-card > .elementor-widget-wrap {
	margin: 12px;
	padding: 28px 26px;
	height: calc(100% - 24px);
	background: #FFFFFF;
	border: 1px solid var(--uds-bordure);
	border-radius: var(--uds-radius);
	box-shadow: var(--uds-ombre);
	transition: transform var(--uds-transition), box-shadow var(--uds-transition);
}

.uds-sec .elementor-column.uds-card:hover > .elementor-widget-wrap {
	transform: translateY(-4px);
	box-shadow: var(--uds-ombre-forte);
}

/* Carte mise en avant : liseré doré en haut. */
.uds-sec .elementor-column.uds-card.uds-card--or > .elementor-widget-wrap {
	border-top: 3px solid var(--uds-or);
}

/* Sur fond beige, la carte reste blanche mais perd son ombre lourde. */
.uds-sec--beige .elementor-column.uds-card > .elementor-widget-wrap {
	box-shadow: 0 14px 30px rgba(19, 56, 22, .08);
}

/* Titre de carte. */
.uds-ctitre .elementor-heading-title {
	font-family: var(--uds-f-titre);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--uds-vert);
}

.uds-ctexte,
.uds-ctexte p {
	color: var(--uds-gris);
	line-height: 1.7;
	font-size: 15px;
}

.uds-sec .uds-ctexte p:last-child {
	margin-bottom: 0 !important;
}

/* Étiquette dorée en haut de carte (« PANEL 1 », « LICENCE », « 2026 »…). */
.uds-tag .elementor-heading-title {
	display: inline-block;
	font-family: var(--uds-f-cond);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #33260C;
	background: var(--uds-or) !important;
	padding: 5px 12px;
	border-radius: 999px;
	line-height: 1.4;
}

/* Ligne de méta en bas de carte, séparée par un filet. */
.uds-meta,
.uds-meta p {
	font-family: var(--uds-f-cond) !important;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--uds-gris);
}

/* Le filet et son espacement ne sont posés qu'une seule fois, sur le widget.
 * Groupés avec « .uds-meta p », ils produisaient deux traits superposés et un
 * espacement doublé. */
.uds-meta {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--uds-bordure);
}

.uds-meta p {
	margin: 0;
}

/* -------------------------------------------------------------------
 * B.5 — Boutons
 *
 * Le thème repeint les <a> : soulignement, couleur de survol, ombre portée.
 * Les trois neutralisations sont indispensables, pas cosmétiques.
 * ------------------------------------------------------------------- */

.uds-sec .elementor-button {
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.uds-sec .elementor-button:hover,
.uds-sec .elementor-button:focus-visible {
	transform: translateY(-2px);
}

/* Bouton doré — action principale. */
.uds-btn-or .elementor-button {
	background-color: var(--uds-or) !important;
	color: #20241F !important;
	border: none;
	border-radius: 8px;
	font-family: var(--uds-f-cond);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 30px;
}

.uds-btn-or .elementor-button:hover {
	background-color: #B4842F !important;
	color: #20241F !important;
}

/* Bouton fantôme — action secondaire, sur fond sombre. */
.uds-btn-ghost .elementor-button {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	font-family: var(--uds-f-cond);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 13px 29px;
}

.uds-btn-ghost .elementor-button:hover {
	background-color: rgba(255, 255, 255, .12) !important;
	border-color: #FFFFFF;
	color: #FFFFFF !important;
}

/* Bouton vert — action principale sur fond clair. */
.uds-btn-vert .elementor-button {
	background-color: var(--uds-vert) !important;
	color: #FFFFFF !important;
	border: none;
	border-radius: 8px;
	font-family: var(--uds-f-cond);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 30px;
}

.uds-btn-vert .elementor-button:hover {
	background-color: var(--uds-vert-fonce) !important;
	color: #FFFFFF !important;
}

/*
 * Colonne qui aligne deux boutons côte à côte, centrés, et les fait passer
 * l'un sous l'autre sur mobile. Elementor ne sait pas le faire seul : ses
 * widgets sont des blocs empilés.
 */
.uds-boutons > .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
}

.uds-boutons > .elementor-widget-wrap > .elementor-element {
	width: auto;
	max-width: 100%;
	margin: 0;
}

.uds-boutons.uds-boutons--gauche > .elementor-widget-wrap {
	justify-content: flex-start;
}

/* -------------------------------------------------------------------
 * B.6 — Filet décoratif sous un titre de section
 *
 * Reprend le motif déjà présent sur « À propos » (deux traits et une pastille)
 * mais aux couleurs de la charte, en doré plutôt qu'en vert : c'est l'accent
 * doré qui manque partout ailleurs que sur le Colloque.
 * ------------------------------------------------------------------- */

.uds-filet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px auto 0;
	max-width: 320px;
}

.uds-filet::before,
.uds-filet::after {
	content: "";
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, var(--uds-or));
}

.uds-filet::after {
	background: linear-gradient(90deg, var(--uds-or), transparent);
}


/* ===================================================================
 * PARTIE C — CORRECTIFS CIBLÉS
 *
 * Réparations de défauts constatés en ligne, en attendant que la page passe
 * aux primitives ci-dessus. Chaque bloc porte la date du constat et doit
 * disparaître quand la page est refaite.
 * =================================================================== */

/*
 * C.1 — Hero de /contactez-lunico/ (constat du 15/08/2026, vérifié en ligne)
 *
 * Le titre « Contact » est blanc sur une façade claire : quasi illisible. La
 * section porte bien une superposition d'arrière-plan, mais elle est réglée en
 * blanc transparent — autrement dit il n'y a pas de voile. On l'assombrit.
 *
 * Le sélecteur vise la page ET la section précises. Cibler
 * « .page-id-988790 .elementor-section .elementor-background-overlay »
 * assombrirait toute section de la page qui porterait un jour une
 * superposition — un correctif temporaire ne doit pas pouvoir déborder.
 *
 * À supprimer le jour où la section passe en « uds-phero » : le voile est
 * alors posé par la primitive, et deux voiles superposés assombriraient trop.
 */
.page-id-988790 .elementor-element-1d8ab310 > .elementor-background-overlay {
	background-color: rgba(13, 39, 16, .62) !important;
	opacity: 1 !important;
}

/* Même correctif, activable à la main sur n'importe quelle section trop claire :
 * poser la classe « uds-fix-voile » dessus. */
.uds-fix-voile > .elementor-background-overlay {
	background-color: rgba(13, 39, 16, .62) !important;
	opacity: 1 !important;
}

/*
 * C.2 — Ombre portée sur les champs de formulaire.
 * Le thème en pose une sur les <input>, ce qui donne aux formulaires du site
 * un aspect daté à côté de celui du Colloque.
 */
.elementor input[type="text"],
.elementor input[type="email"],
.elementor input[type="tel"],
.elementor input[type="date"],
.elementor textarea,
.elementor select {
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 8px;
}


/* ===================================================================
 * PARTIE D — RESPONSIVE
 *
 * Un seul point de rupture utile ici : sous 1024 px, les titres du hero
 * deviennent trop hauts et la gouttière des cartes trop large.
 * =================================================================== */

@media (max-width: 1024px) {
	:root {
		--uds-sec-pad: 72px;
		--uds-sec-pad-court: 48px;
	}

	.uds-hero {
		padding-top: 96px;
		padding-bottom: 84px;
	}

	.uds-hero .uds-h1 .elementor-heading-title {
		font-size: 38px;
	}

	.uds-phero .uds-h1 .elementor-heading-title {
		font-size: 32px;
	}

	.uds-h2 .elementor-heading-title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	:root {
		--uds-sec-pad: 56px;
		--uds-sec-pad-court: 40px;
	}

	.uds-hero .uds-h1 .elementor-heading-title {
		font-size: 30px;
	}

	.uds-phero .uds-h1 .elementor-heading-title {
		font-size: 26px;
	}

	.uds-sous,
	.uds-sous p {
		font-size: 16px;
	}

	.uds-sec .elementor-column.uds-card > .elementor-widget-wrap {
		margin: 8px 0;
		height: auto;
	}

	.uds-boutons > .elementor-widget-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.uds-boutons > .elementor-widget-wrap > .elementor-element {
		width: 100%;
	}
}

/* ============================================================
 * ACCUEIL (988292) — Section « Nos formations » : responsive
 * Ajouté le 01/09/2026. Audit mesuré sur 320 / 360 / 375 / 768 px.
 * Le CSS de la page charge APRÈS celui du kit : toutes les règles
 * ci-dessous sont donc écrites en spécificité suffisante (ou en
 * !important) pour rester gagnantes.
 * ============================================================ */

/* --- Tablette et en dessous (<= 1024px) : 5 colonnes -> 2 --- */
@media (max-width: 1024px) {
	.elementor-element-57f46d0a > .elementor-container {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.elementor-element-57f46d0a .elementor-column.elementor-col-20 {
		width: 50% !important;
		margin-bottom: 20px;
	}

	/* Le thème ne pose qu'une margin-right de 11,25px : la carte colle
	   au bord gauche de l'écran. Le padding du wrap est verrouillé par
	   le CSS de page (0-4-0 + !important), on passe donc par margin. */
	.elementor-element-57f46d0a .elementor-widget-wrap {
		margin: 0 8px !important;
	}

	.unico-mf .unico-mf-program-card {
		min-height: 0 !important;
	}

	.unico-mf .unico-mf-program-img {
		height: 170px !important;
	}

	.unico-mf .unico-mf-program-body {
		padding-bottom: 44px !important;
	}

	.unico-mf .unico-mf-program-body h3 {
		font-size: 17px !important;
		line-height: 1.28 !important;
		min-height: 0 !important;
		margin-bottom: 8px !important;
	}

	.unico-mf .unico-mf-program-body p {
		font-size: 14px !important;
		line-height: 1.55 !important;
	}

	/* Le CSS de page cale la flèche à left:190px (carte desktop ~220px).
	   Sous 1024px elle tombe au milieu de la carte, et à 768px elle sort
	   de la carte de 45px, donc coupée par overflow:hidden. */
	.unico-mf .unico-mf-card-arrow {
		left: auto !important;
		right: 18px !important;
		bottom: 16px !important;
	}
}

/* --- Mobile (<= 767px) : 1 colonne --- */
@media (max-width: 767px) {
	.elementor-element-57f46d0a .elementor-column.elementor-col-20 {
		width: 100% !important;
		margin-bottom: 18px;
	}

	.unico-mf .unico-mf-program-body h3 {
		font-size: 18px !important;
	}

	.elementor-element-6a3c451 {
		padding-top: 48px !important;
		padding-bottom: 12px !important;
	}

	.elementor-element-cd51c6 .elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.18 !important;
	}

	.elementor-element-342c5663 {
		padding-bottom: 48px !important;
	}
}

/* ============================================================
 * ACCUEIL (988292) — Harmonisation palette + typographie
 * Ajouté le 01/09/2026.
 * Les deux premières règles visent la barre haute et le pied de
 * page, qui sont des templates d'en-tête/pied : elles portent
 * donc sur tout le site, pas seulement sur l'accueil.
 * ============================================================ */

/* ---------- Contrastes remontés au seuil WCAG AA ---------- */

/* Bouton « S'abonner » : blanc sur or = 2,7:1 -> encre du CTA doré (5,2:1) */
.elementor-element-1b65857c .elementor-button,
.elementor-element-1b65857c input[type="submit"],
.elementor-element-1b65857c button[type="submit"] {
	color: #3A2A0E !important;
}

/* Barre haute et icônes sociales : #1D9E75 sur le dégradé vert foncé
   = 3,9:1 -> or de la charte (5,0:1). */
.elementor-element-76c48b57 .elementor-icon-list-item a,
.elementor-element-76c48b57 .elementor-icon-list-icon i,
.elementor-element-76c48b57 .elementor-icon-list-icon svg,
.elementor-element-1b65857c .elementor-social-icon i,
.elementor-element-1b65857c .elementor-social-icon svg {
	color: var(--uds-or, #C8973C) !important;
	fill: var(--uds-or, #C8973C) !important;
}

/* ---------- Un seul vert ----------
   #06530D (surtitres, icônes de cartes), #0B5511 (titres actualités,
   pastilles de dates) et #1D9E75 étaient trois verts hors charte. */

.elementor-988292 .elementor-element-43e44958 .elementor-heading-title,
.elementor-988292 .elementor-element-441559d6 .elementor-heading-title,
.elementor-988292 .elementor-element-165720c7 .elementor-heading-title,
.elementor-988292 .elementor-element-d042e5e  .elementor-heading-title {
	color: var(--uds-vert, #133816) !important;
}

.unico-mf .unico-mf-panel-head h3,
.unico-mf .unico-mf-panel-head a,
.unico-mf .unico-mf-featured-news h4,
.unico-mf .unico-mf-mini-news h4,
.unico-mf .unico-mf-event h4,
.unico-mf .unico-mf-mini-news div h4 a,
.unico-mf .unico-mf-featured-news h4 a,
.unico-mf .unico-mf-read {
	color: var(--uds-vert, #133816) !important;
}

.unico-mf .unico-mf-program-icon {
	color: var(--uds-vert, #133816) !important;
	background: var(--uds-beige, #F5F3EF) !important;
}

.unico-mf .unico-mf-program-body h3 { color: var(--uds-texte, #20241F) !important; }
.unico-mf .unico-mf-program-body p  { color: var(--uds-gris, #6B6F68) !important; }

.unico-mf .unico-mf-event-date {
	background: var(--uds-beige, #F5F3EF) !important;
	color: var(--uds-vert, #133816) !important;
}

/* Pastilles de dates des événements (colonnes à fond #0B5511) */
.elementor-element-6690c069 > .elementor-widget-wrap,
.elementor-element-4eb67947 > .elementor-widget-wrap,
.elementor-element-25fadee6 > .elementor-widget-wrap {
	background-color: var(--uds-vert, #133816) !important;
}

/* ---------- Échelle typographique ---------- */

/* Tous les titres Elementor de l'accueil avaient un line-height de 1,0 :
   deux lignes se touchaient dès qu'un titre passait à la ligne. */
.elementor-988292 .elementor-widget-heading .elementor-heading-title {
	line-height: 1.22 !important;
}

.elementor-988292 .elementor-element-46c0eb44 .elementor-heading-title {
	line-height: 1.12 !important;
}

/* Un seul corps pour les titres de section (36 / 27 / 36 auparavant) */
.elementor-988292 .elementor-element-65fff0aa .elementor-heading-title,
.elementor-988292 .elementor-element-cd51c6   .elementor-heading-title,
.elementor-988292 .elementor-element-599f4b9f .elementor-heading-title {
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
}

/* Surtitres : ils étaient en Playfair 14px, police réservée aux titres.
   Roboto Condensed espacé, c'est le rôle d'un surtitre. */
.elementor-988292 .elementor-element-43e44958 .elementor-heading-title,
.elementor-988292 .elementor-element-441559d6 .elementor-heading-title,
.elementor-988292 .elementor-element-165720c7 .elementor-heading-title,
.elementor-988292 .elementor-element-d042e5e  .elementor-heading-title {
	font-family: var(--uds-f-cond, "Roboto Condensed"), sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	line-height: 1.4 !important;
}

/* Poids 850 : valeur que Roboto Condensed n'a pas, arrondie à 900 */
.unico-mf .unico-mf-featured-news h4,
.unico-mf .unico-mf-mini-news h4,
.unico-mf .unico-mf-event h4 {
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

@media (max-width: 1024px) {
	.elementor-988292 .elementor-element-65fff0aa .elementor-heading-title,
	.elementor-988292 .elementor-element-cd51c6   .elementor-heading-title,
	.elementor-988292 .elementor-element-599f4b9f .elementor-heading-title {
		font-size: 30px !important;
	}
}

@media (max-width: 767px) {
	.elementor-988292 .elementor-element-65fff0aa .elementor-heading-title,
	.elementor-988292 .elementor-element-cd51c6   .elementor-heading-title,
	.elementor-988292 .elementor-element-599f4b9f .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.18 !important;
	}

	.elementor-988292 .elementor-element-46c0eb44 .elementor-heading-title {
		font-size: 30px !important;
	}
}/* End custom CSS */