/*
 * UTMB — règles non exprimables par les contrôles Elementor.
 *
 * Tout le reste (couleurs, typographies, marges, rayons, ombres, colonnes,
 * gouttières) est réglé DANS Elementor : kit global id 6 pour les couleurs et
 * les polices, contrôles du template Loop Item pour la carte, contrôles du
 * widget Loop Grid pour la grille.
 *
 * Les valeurs viennent des variables CSS générées depuis inc/config.php.
 */

/* --------------------------------------------------------------------------
 * 1. Pile de polices : RIEN A FAIRE ICI.
 *    La pile provisoire est portee nativement par Elementor, via le reglage
 *    Site Settings > Typography > « Default Generic Fonts » du kit id 6, qui
 *    vaut : Futura, "Century Gothic", "URW Gothic", system-ui, sans-serif
 *    Elementor produit donc :
 *      font-family: "Futura PT", Futura, "Century Gothic", "URW Gothic",
 *                   system-ui, sans-serif;
 *    La variable --utmb-font-stack (generee depuis inc/config.php) ne sert plus
 *    qu'aux elements hors Elementor, comme le message d'etat vide.
 * -------------------------------------------------------------------------- */
.utmb-formations-message {
	font-family: var(--utmb-font-stack);
}

/* --------------------------------------------------------------------------
 * 2. Visuel de la carte : ratio 3:2 et recadrage.
 *    Elementor n'a pas de contrôle « aspect-ratio » sur le widget Image mise
 *    en avant.
 * -------------------------------------------------------------------------- */
.utmb-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: var(--utmb-card-image-ratio);
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
 * 3. Chapô limité à N lignes.
 *    Elementor tronque par nombre de mots, pas par nombre de lignes.
 * -------------------------------------------------------------------------- */
.utmb-card__excerpt,
.utmb-card__excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: var(--utmb-card-excerpt-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * 4. Survol, focus et états de progression de la carte.      (phase 5A)
 *
 *    Réponses du client aux questions graphiques. Jusqu'ici cette section
 *    était vide : la signification du #BAD7E5 de la maquette n'était pas
 *    connue, et les trois classes étaient posées sans style.
 *
 *    Les couleurs viennent TOUTES du kit :
 *      --e-global-color-accent          #BAD7E5  corps au survol
 *      --e-global-color-utmbprogression #B45309  orange, « en cours »
 *      --e-global-color-utmbreussite    #166534  vert, « terminé »
 *    Les mesures viennent de inc/config.php, clé card_states, par variables
 *    CSS (voir utmb_css_variables() dans functions.php).
 *
 *    LA COULEUR N'EST JAMAIS LE SEUL SIGNAL. L'orange et le vert retenus ne
 *    se séparent que de 1,42:1, ce qui ne suffit ni en niveaux de gris ni en
 *    deutéranopie. Trois autres signaux les distinguent :
 *      - le libellé du bouton   (« Reprendre » / « Revoir ») ;
 *      - la barre de progression, qui n'existe que sur « en cours » ;
 *      - la position du bouton, en haut à droite sur « terminé ».
 * -------------------------------------------------------------------------- */

/* ------------------------------------- 4.1 survol et focus --------------- */

/*
 * Le corps de la carte, et non la carte entière : le visuel garde ses
 * couleurs. Elementor écrit le fond du corps depuis la couleur globale
 * « secondary » à (0,2,0) — .elementor-NN .elementor-element-utmbcard3 —
 * d'où les deux classes ici, qui montent à (0,2,0) aussi, et l'ordre : utmb.css
 * est servie après post-69.css. Aucun !important.
 */
.utmb-card .utmb-card__body {
	transition: background-color var( --utmb-card-hover-transition, 150ms ) ease,
		border-color var( --utmb-card-hover-transition, 150ms ) ease;
}

.utmb-card:hover .utmb-card__body,
.utmb-card:focus-within .utmb-card__body {
	background-color: var( --e-global-color-accent, #bad7e5 );
}

/*
 * :focus-within et non :focus-visible. La cible du clavier est le LIEN du
 * bouton, à l'intérieur de la carte : c'est donc un ancêtre qu'il faut
 * colorer, et seul :focus-within remonte. Le reproche fait à :focus-within en
 * phase 3c — il répond aussi à la souris — ne s'applique pas ici : le survol
 * produit déjà exactement le même rendu, c'est ce que le client demande.
 */

/* ------------------------------------- 4.2 non commencé ----------------- */

/*
 * Rien. « Commencer » reste la carte de la maquette, sans contour. C'est l'état
 * de référence, et le client l'a confirmé tel quel.
 */

/* ------------------------------------- 4.3 en cours --------------------- */

.utmb-card--in-progress .utmb-card__body {
	border: var( --utmb-card-border-width, 2px ) solid var( --e-global-color-utmbprogression, #b45309 );
	/*
	 * Le corps porte le contour, et le corps chevauche le visuel de 15 px
	 * (--utmb-card-overlap) : le contour suit donc la forme réellement visible.
	 * Le rayon bas vient d'Elementor ; les coins hauts restent droits, comme le
	 * corps.
	 */
}

/* Le bouton « Reprendre » passe à l'orange. */
.utmb-card--in-progress .utmb-card__cta .elementor-button {
	background-color: var( --e-global-color-utmbprogression, #b45309 );
}

.utmb-card--in-progress .utmb-card__cta .elementor-button:hover,
.utmb-card--in-progress .utmb-card__cta .elementor-button:focus {
	/*
	 * Assombrissement du même orange, et non une seconde couleur globale :
	 * color-mix avec du noir. Le repli littéral est posé d'abord, pour les
	 * navigateurs qui ignorent color-mix.
	 */
	background-color: #8d4107;
	background-color: color-mix( in srgb, var( --e-global-color-utmbprogression, #b45309 ) 85%, #000 );
}

/* ------------------------------------- 4.4 barre de progression --------- */

.utmb-card__progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 var( --utmb-card-progress-gap, 12px );
}

.utmb-card__progress-track {
	background-color: rgba( 180, 83, 9, 0.2 );
	border-radius: calc( var( --utmb-card-progress-height, 6px ) / 2 );
	height: var( --utmb-card-progress-height, 6px );
	overflow: hidden;
	width: 100%;
}

.utmb-card__progress-fill {
	background-color: var( --e-global-color-utmbprogression, #b45309 );
	border-radius: inherit;
	display: block;
	height: 100%;
	/*
	 * La largeur est posée en ligne par [utmb_course_progress] : elle est
	 * calculée par article. La transition sert si elle change sans rechargement.
	 */
	transition: width var( --utmb-card-hover-transition, 150ms ) ease;
}

.utmb-card__progress-text {
	color: var( --e-global-color-utmbprogression, #b45309 );
	font-family: var( --e-global-typography-text-font-family, "Futura PT" ), Futura, "Century Gothic", "URW Gothic", system-ui, sans-serif;
	font-size: 14px;
	line-height: var( --utmb-line-height, 20px );
	margin: 0;
}

/* ------------------------------------- 4.5 terminé ---------------------- */

.utmb-card--completed .utmb-card__body {
	border: var( --utmb-card-border-width, 2px ) solid var( --e-global-color-utmbreussite, #166534 );
	/*
	 * Le bouton quitte le flux : il faut un repère de positionnement. La CARTE,
	 * et non le corps, pour que le bouton puisse se poser sur le visuel.
	 */
}

.utmb-card--completed {
	position: relative;
}

/*
 * « Revoir » en haut à droite de la carte. Il sort du flux du corps, ce qui
 * laisse le titre et le chapô occuper toute la hauteur.
 */
.utmb-card--completed .utmb-card__cta {
	position: absolute;
	right: var( --utmb-card-completed-cta-right, 12px );
	top: var( --utmb-card-completed-cta-top, 12px );
	/* au-dessus du visuel et du corps */
	z-index: 2;
}

.utmb-card--completed .utmb-card__cta .elementor-button {
	background-color: var( --e-global-color-utmbreussite, #166534 );
	/*
	 * Le bouton de la maquette fait 194 x 58 : posé sur le visuel il le
	 * masquerait. Rembourrage réduit, pour un bouton à la mesure de son texte.
	 */
	padding: 10px 18px;
}

.utmb-card--completed .utmb-card__cta .elementor-button:hover,
.utmb-card--completed .utmb-card__cta .elementor-button:focus {
	background-color: #124f29;
	background-color: color-mix( in srgb, var( --e-global-color-utmbreussite, #166534 ) 85%, #000 );
}

/*
 * En mobile la carte est plafonnée à 281 px : un bouton flottant à droite
 * recouvrirait une bonne part du visuel. Il reprend sa place dans le flux.
 */
@media ( max-width: 767px ) {
	.utmb-card--completed .utmb-card__cta {
		position: static;
	}

	.utmb-card--completed .utmb-card__cta .elementor-button {
		padding: 18px 40px;
	}
}

/* --------------------------------------------------------------------------
 * 5. Message d'état vide (visiteur non connecté / aucune formation).
 *    Texte provisoire, voir inc/config.php.
 * -------------------------------------------------------------------------- */
.utmb-formations-message {
	margin: 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * 6. Largeur de la carte en mobile : RIEN A FAIRE ICI.
 *
 *    Une regle « max-width » posee ici etait SANS EFFET : Elementor applique
 *    sur tout conteneur
 *        .e-con { max-width: min(100%, var(--width)); }
 *    (elementor/assets/css/frontend.min.css), a specificite egale a la notre et
 *    chargee apres la feuille du theme enfant — c'est donc Elementor qui
 *    l'emportait.
 *
 *    La largeur mobile est maintenant posee NATIVEMENT dans Elementor, sur le
 *    reglage « Largeur » (onglet mobile) du conteneur racine de la carte du
 *    template Loop Item. Elementor ecrit alors --width: 281px dans
 *    @media(max-width:767px), et sa propre regle max-width: min(100%, 281px)
 *    plafonne la carte a 281 px tout en la laissant retrecir sur les ecrans
 *    plus etroits. Le centrage est automatique : .e-con pose deja
 *    --margin-left: auto et --margin-right: auto.
 *
 *    Valeur PROVISOIRE, reglable dans inc/config.php (grid.mobile_card) puis
 *    rejouee par 30-loop-item.php.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * 7. Bouton « Préférences de cookies » du pied de page.
 *
 *    Complianz n'ouvre son panneau que sur une balise BUTTON (sélecteur
 *    « button.cmplz-manage-consent »), et le widget Bouton d'Elementor produit
 *    toujours une balise <a>. Le bouton vient donc du raccourci
 *    [utmb_cookie_preferences] (inc/cookies.php), déposé dans un widget
 *    « Code court ».
 *
 *    Ces règles ne font que neutraliser l'habillage natif du navigateur, pour
 *    que le bouton ressemble exactement aux liens voisins du pied de page. La
 *    typographie et la couleur restent posées par Elementor sur le widget, à
 *    partir des styles globaux du kit.
 * -------------------------------------------------------------------------- */
/*
 * Le sélecteur est préfixé par .utmb-footer, et ce n'est pas décoratif.
 *
 * Depuis la phase 2c, le kit habille TOUS les boutons du site pour chasser le
 * rose de Hello Elementor, avec le sélecteur « .elementor-kit-6 button »
 * (spécificité 0,1,1). Un simple « .utmb-cookie-prefs » (0,1,0) perdrait, et
 * le lien du pied de page se transformerait en bouton bleu. Ajouter la classe
 * du conteneur porte la règle à 0,2,0, qui l'emporte sans !important.
 */
.utmb-footer .utmb-cookie-prefs {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-align: inherit;
	cursor: pointer;
}

.utmb-footer .utmb-cookie-prefs:hover,
.utmb-footer .utmb-cookie-prefs:focus-visible {
	background: none;
	color: inherit;
	text-decoration: underline;
}

/* ============================================================================
 *  8. Barre de recherche « Mes formations »              (phase 4a)
 * ============================================================================
 *  Le cahier des charges demande cette barre, la maquette ne la dessine pas :
 *  elle reprend donc le vocabulaire de la maquette — champ blanc sur le fond
 *  bleu, texte et loupe #396277, rayon 10, Futura PT du kit.
 *
 *  Les couleurs et la police viennent des variables globales du kit. Les
 *  mesures viennent de inc/config.php, par les variables --utmb-search-*.
 *
 *  Sur la spécificité : le kit habille tous les champs et tous les boutons.
 *    .elementor-kit-6 input:not([type="button"]):not([type="submit"])   (0,3,1)
 *        -> couleur, bordure 1 px, rayon 4 px
 *    .elementor-kit-6 button                                            (0,1,1)
 *        -> fond bleu, texte blanc, bordure, rayon 10, CAPITALES
 *  Nos règles égalent ou dépassent ces valeurs, et utmb.css est servie après
 *  post-6.css : aucun !important n'est nécessaire.
 * ========================================================================= */

.utmb-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 var( --utmb-search-margin-bottom, 32px );
}

/*
 * Libellé et texte du bouton : présents pour les lecteurs d'écran, invisibles à
 * l'œil. Ni display:none ni visibility:hidden, qui les retireraient de la
 * restitution.
 */
.utmb-search__label,
.utmb-search__submit-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.utmb-search__field {
	align-items: center;
	background-color: var( --e-global-color-secondary, #ffffff );
	border-radius: var( --utmb-search-radius, 10px );
	box-sizing: border-box;
	display: flex;
	max-width: var( --utmb-search-width, 420px );
	min-height: var( --utmb-search-height, 44px );
	overflow: hidden;
	width: 100%;
}

/* (0,3,1) : autant que la règle de champ du kit, servie après. */
.utmb-search .utmb-search__field input.utmb-search__input {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var( --e-global-color-primary, #396277 );
	flex: 1 1 auto;
	font-family: var( --e-global-typography-text-font-family, "Futura PT" ), Futura, "Century Gothic", "URW Gothic", system-ui, sans-serif;
	font-size: 16px;
	min-height: var( --utmb-search-height, 44px );
	min-width: 0;
	padding: 0 8px 0 16px;
}

/* (0,4,1) : autant que « input:focus:not(…):not(…) » du kit, servie après. */
.utmb-search .utmb-search__field input.utmb-search__input:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

.utmb-search .utmb-search__field input.utmb-search__input::placeholder {
	color: rgba( 57, 98, 119, 0.6 );
	color: color-mix( in srgb, var( --e-global-color-primary, #396277 ) 60%, transparent );
	opacity: 1;
}

/* Le champ entier montre le focus, pour que l'anneau entoure la barre. */
.utmb-search .utmb-search__field:focus-within {
	outline: 2px solid var( --e-global-color-secondary, #ffffff );
	outline-offset: 2px;
}

/*
 * (0,2,0) : plus que « .elementor-kit-6 button » (0,1,1), qui donne aux boutons
 * un fond bleu, une bordure, un rayon 10 et les CAPITALES.
 * background-color est ecrit en propriete longue, et non par le raccourci
 * « background », pour que la comparaison avec la regle du kit soit directe.
 */
.utmb-search .utmb-search__submit {
	align-items: center;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	color: var( --e-global-color-primary, #396277 );
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var( --utmb-search-height, 44px );
	justify-content: center;
	padding: 0;
	text-transform: none;
	width: var( --utmb-search-height, 44px );
}

.utmb-search .utmb-search__submit:hover,
.utmb-search .utmb-search__submit:focus {
	background-color: transparent;
	background-image: none;
	color: var( --e-global-color-utmbbleusurvol, #2c4b5b );
}

.utmb-search .utmb-search__submit:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #396277 );
	outline-offset: -2px;
}

.utmb-search__icon {
	display: block;
}

/* Lien « effacer la recherche » : blanc sur le fond bleu. */
.utmb-search__clear,
.utmb-formations-message--no-result .utmb-search__clear {
	color: var( --e-global-color-secondary, #ffffff );
	font-size: 14px;
	text-decoration: underline;
}

.utmb-formations-message--no-result {
	color: var( --e-global-color-secondary, #ffffff );
}

/* Mobile : la barre prend toute la largeur. */
@media ( max-width: 767px ) {
	.utmb-search__field {
		max-width: none;
	}
}