/* ==========================================================================
   Kolytica Job · catalogue bourses et programmes UEMOA (vue #bourses)

   Présentation uniquement, aucune logique. Les tokens de marque (--teal,
   --navy, --gold, --line...) viennent exclusivement de kolytica-charte.css.
   Préfixe .uemoa- : aucune surcharge de la landing (.jobs-), du socle app
   (.app-) ni de la charte (.btn, .card, .pill).

   Langage des conteneurs : cadre « preuve » teal-or de docs/CHARTE-WEB.md
   section 7. L'or n'existe qu'en halo radial de fond, jamais en aplat ni en
   bouton. Mobile d'abord : les cartes s'empilent, jamais de défilement
   horizontal imposé. Bloc PC sous @media (min-width: 920px) uniquement.
   ========================================================================== */

.jobs-bourses .uemoa-colonne {
  display: grid;
  gap: 22px;
}

/* Grille des huit pays, calquée sur le parcours banques (journey-country) :
   tuiles blanches, sélection teal, jamais d'aplat plein. L'état pressé est
   porté par aria-pressed, l'attribut fait foi. */
.uemoa-paysfiltre {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.uemoa-paysfiltre legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 700;
}

.uemoa-paysgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 7px;
}

.uemoa-pays {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(231, 225, 210, 0.95);
  border-radius: 12px;
  padding: 10px 30px 10px 11px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.uemoa-pays::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 157, 140, 0.18);
  content: "";
}

.uemoa-pays:hover {
  border-color: #9ccfc6;
  background: #fbfefd;
  color: var(--ink);
  transform: translateY(-1px);
}

.uemoa-pays[aria-pressed="true"] {
  border-color: rgba(15, 157, 140, 0.72);
  background: linear-gradient(145deg, #fff 0%, #f7fcfb 54%, rgba(15, 157, 140, 0.11) 100%);
  box-shadow:
    0 10px 25px rgba(20, 34, 79, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(15, 157, 140, 0.08);
}

.uemoa-pays[aria-pressed="true"]::after {
  width: 9px;
  height: 9px;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 157, 140, 0.14);
}

.uemoa-pays:focus:not(:focus-visible) {
  outline: none;
}

.uemoa-pays:focus-visible {
  outline: 3px solid rgba(15, 157, 140, 0.48);
  outline-offset: 3px;
}

.uemoa-pays > strong {
  font-weight: 700;
}

.uemoa-entete .lead {
  max-width: 62ch;
}

/* Panneau de filtres : cadre preuve teal-or (grand conteneur). */
.uemoa-filtres {
  padding: 18px clamp(16px, 4vw, 24px);
  border: 1px solid rgba(15, 157, 140, 0.42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 100%, rgba(217, 149, 33, 0.10), transparent 26%),
    radial-gradient(circle at 88% 0, rgba(217, 149, 33, 0.07), transparent 20%),
    linear-gradient(145deg, #fff 0%, rgba(238, 250, 247, 0.92) 100%);
  box-shadow:
    0 14px 36px rgba(11, 111, 98, 0.10),
    0 0 0 5px rgba(15, 157, 140, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.uemoa-filtres__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.uemoa-filtre {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.uemoa-filtre > span {
  color: var(--navy);
  font-size: .9rem;
  font-weight: 700;
}

.uemoa-filtre select,
.uemoa-filtre input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.uemoa-filtre select:focus-visible,
.uemoa-filtre input:focus-visible,
.uemoa-card__lien:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.uemoa-filtres__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
}

.uemoa-filtres__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* Volet Domaines du panneau : sélection multiple repliée derrière un résumé
   qui dit combien de domaines sont choisis. */
.uemoa-domaines {
  position: relative;
}

.uemoa-domaines summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}

.uemoa-domaines summary::-webkit-details-marker {
  display: none;
}

.uemoa-domaines summary::after {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.8px solid var(--slate);
  border-bottom: 1.8px solid var(--slate);
  transform: rotate(45deg);
  content: "";
}

.uemoa-domaines[open] summary::after {
  transform: rotate(-135deg);
}

.uemoa-domaines summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.uemoa-domaines__liste {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
}

.uemoa-domaines__choix {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--navy);
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.uemoa-compte {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 750;
}

.uemoa-indisponible {
  padding: 14px 16px;
  border: 1px dashed rgba(15, 157, 140, 0.42);
  border-radius: 12px;
  color: var(--slate);
}

/* Résultats : une colonne mobile aérée, les cartes respirent. */
.uemoa-resultats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Carte opportunité REPLIABLE (maquette Ibrahim, arbitrage Abdoul sur #548).
   Surface blanche de la charte, filet --line, ombre --sh-1, rayon --r-card.
   Plus de halo doré : sur une liste de 153 cartes, « un seul geste doré par
   vue » interdit de le répéter à chaque ligne.

   La carte ne porte AUCUN padding : l'en-tête et le corps portent le leur.
   C'est ce qui permet au filet de séparation de traverser toute la largeur,
   comme sur la maquette. Échelle d'espacement : 4, 8, 12, 16, 24. */
.uemoa-card {
  /* La charte 2026-v5 n'a pas de token d'alerte. Ce rouge d'état est déclaré
     ici une seule fois, porté par la carte, et n'est jamais réécrit en dur
     dans une règle. Il ne sert qu'à marquer un appel clos, jamais comme
     couleur d'action. Blanc sur ce rouge : 6,6:1, AA confortable. */
  --uemoa-ferme: #b42318;

  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: border-color 0.16s ease;
}

.uemoa-card:hover {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}

/* Pastille de la structure : tuile navy, initiales blanches, filet teal sous
   le monogramme, exactement la marque de la maquette. Les six teintes neutres
   d'avant ne sont plus peintes ; la classe --tN reste émise par le JS comme
   point d'accroche stable si une variation revient.

   Un logo local versionné (registre sûr d'org-logo.mjs) garde sa propre
   surface : pas d'aplat navy derrière une image, et pas de filet teal qui
   viendrait barrer la marque d'un tiers. */
.uemoa-logo {
  grid-area: logo;
  flex: none;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--navy);
  color: var(--on-navy);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.uemoa-logo::after {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--teal);
}

.uemoa-logo:has(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--white);
}

.uemoa-logo:has(img)::after {
  content: none;
}

.uemoa-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (forced-colors: active) {
  .uemoa-logo { border: 1px solid CanvasText; }
}

/* EN-TÊTE REPLIÉ. La grille est portée par le `summary` lui-même : son modèle
   de contenu n'accepte que du contenu phrasé mêlé de contenu d'en-tête, donc
   ses enfants sont plats et un `h3` ne peut pas être enveloppé d'un `span`.
   Le marqueur natif est retiré des trois moteurs, le chevron le remplace. */
.uemoa-card__tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo titre     chevron"
    "logo organisme organisme"
    "logo badges    badges";
  align-items: start;
  gap: 0 14px;
  padding: 16px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.uemoa-card__tete::-webkit-details-marker { display: none; }
.uemoa-card__tete::marker { content: ""; }

.uemoa-card__tete:hover .uemoa-card__titre {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le focus clavier est visible sur l'en-tête entier, pas seulement au survol.
   Décalage négatif : le contour reste dans la carte, qui coupe au rayon. */
.uemoa-card__tete:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -3px;
}

/* Chevron : le seul mouvement de la carte, il suit l'état `open`. */
.uemoa-card__chevron {
  grid-area: chevron;
  align-self: start;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--navy);
  transition: transform 0.18s ease;
}

.uemoa-card[open] > .uemoa-card__tete .uemoa-card__chevron {
  transform: rotate(180deg);
}

/* Fermé (récurrent ou non) : la carte reste visible et reste BLANCHE, comme
   sur la maquette. Le statut n'est plus porté par un fond assourdi mais par
   la pastille rouge pleine de l'en-tête, qui se voit de bien plus loin dans
   une liste. Un appel clos ne disparaît jamais. */
.uemoa-card[data-uemoa-statut="ferme"],
.uemoa-card[data-uemoa-statut="a_relancer"] {
  border-color: color-mix(in srgb, var(--slate) 26%, var(--line));
}

/* À vérifier : pas un statut confirmé. Tireté navy, distinct de
   Ouvert (teal plein), Fermé (rouge plein) et du badge type (contour fin).
   Pas d'or en aplat, tokens navy seulement. */
.uemoa-card[data-uemoa-statut="a_verifier"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--navy) 42%, transparent);
}

/* Pastilles type et statut, sous la fondation. Deux registres distincts, et
   c'est la lecture de la maquette : le STATUT est plein (il décide si l'appel
   est actionnable, il doit se voir en balayant la liste), le TYPE reste en
   contour fin (c'est une étiquette de classement, pas une alerte). */
.uemoa-card__badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.uemoa-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 12px;
  border: 1px solid color-mix(in srgb, var(--navy) 24%, transparent);
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.45;
}

.uemoa-badge--statut[data-uemoa-statut="ouvert"] {
  border-color: transparent;
  background: var(--teal-dark);
  color: var(--white);
}

.uemoa-badge--statut[data-uemoa-statut="imminent"] {
  border-color: transparent;
  background: var(--teal-dark);
  color: var(--white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 28%, transparent);
}

.uemoa-badge--statut[data-uemoa-statut="ferme"],
.uemoa-badge--statut[data-uemoa-statut="a_relancer"] {
  border-color: transparent;
  background: var(--uemoa-ferme);
  color: var(--white);
}

.uemoa-badge--statut[data-uemoa-statut="a_verifier"] {
  border-style: dashed;
  border-width: 1.5px;
  border-radius: 3px; /* pas une pilule, distinct de Fondation / type */
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(20, 34, 79, 0.07);
  letter-spacing: 0.04em;
  font-style: italic;
  font-weight: 650;
}

/* Titre : le plus gros de l'en-tête replié. Il ne porte plus la marque de
   sortie, l'en-tête ne navigue pas, il déplie. */
.uemoa-card__titre {
  grid-area: titre;
  margin: 0;
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.01em;
  /* break-word et non anywhere : anywhere coupe A L INTERIEUR d un mot des
     qu il depasse, ce qui rejetait la virgule de « Acumen Fellowship, West
     Africa » seule en debut de ligne. break-word deplace le mot entier. */
  overflow-wrap: break-word;
}

/* Marque de sortie : petit signe dans le CTA, la seule chose qui navigue. */
.uemoa-card__externe {
  width: .8em;
  height: .8em;
  margin-left: .25em;
  vertical-align: -.05em;
  display: inline;
}

.uemoa-card__organisme {
  grid-area: organisme;
  display: block;
  margin-top: 4px;
  color: var(--slate);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* CORPS DÉPLIÉ. Le filet de tête traverse toute la largeur de la carte, c'est
   la raison pour laquelle la carte elle-même n'a pas de padding. */
.uemoa-card__corps {
  padding: 16px;
  border-top: 1px solid var(--line);
}

/* Jeu d'icônes du corps : une seule famille, teal, jamais d'emoji. Les
   tailles descendent avec l'importance : l'échéance décide, le reste
   qualifie. */
.uemoa-ic {
  flex: none;
  color: var(--teal);
}

/* Échéance : le fait qui décide, donc le plus gros caractère de la carte.
   Icône, label discret, date en gros, rythme de la source dessous. */
.uemoa-card__echeance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 14px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.uemoa-card__echeance .uemoa-ic {
  width: 28px;
  height: 28px;
  margin-top: 3px;
}

.uemoa-card__echeance-label {
  margin: 0;
  color: var(--slate);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.3;
}

.uemoa-card__echeance-date {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

/* Pas de date attestée : la note de la source prend la place, en phrase et
   non en chiffre. Elle reste lisible, elle cesse de peser autant qu'une
   échéance réelle. */
.uemoa-card__echeance-date--note {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

/* Un appel clos garde sa date lisible mais cesse de crier : elle passe en
   slate, l'œil va d'abord aux appels encore actionnables. */
.uemoa-card[data-uemoa-statut="ferme"] .uemoa-card__echeance-date,
.uemoa-card[data-uemoa-statut="a_relancer"] .uemoa-card__echeance-date,
.uemoa-card[data-uemoa-statut="a_verifier"] .uemoa-card__echeance-date {
  color: var(--slate);
}

/* Rythme source (« Annuel par institution », cycle, compte à rebours). */
.uemoa-card__cycle {
  margin: 4px 0 0;
  color: var(--slate);
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Composantes attestées : pastilles teal douces, jamais un aplat plein. Ce
   sont des faits de la source, pas des actions. */
.uemoa-card__composantes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.uemoa-card__composante {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--teal) 12%, var(--white));
  color: var(--teal-dark);
  font-size: .86rem;
  font-weight: 700;
}

/* Montant et méta : même gabarit, icône puis texte, alignés sur une seule
   gouttière. Le montant est un verbatim de la source, jamais un calcul. */
.uemoa-card__montant,
.uemoa-card__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 12px;
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}

.uemoa-card__montant .uemoa-ic,
.uemoa-card__meta .uemoa-ic {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.uemoa-card__montant {
  color: var(--navy);
  font-size: .94rem;
  line-height: 1.5;
}

.uemoa-card__montant-fort {
  font-weight: 750;
}

/* La précision entre parenthèses redescend en graisse normale : c'est le
   commentaire du montant, pas le montant. */
.uemoa-card__montant-precision {
  color: var(--ink);
  font-weight: 400;
}

/* Montant non attesté : on le dit, on ne masque pas la ligne. */
.uemoa-card__montant--vide {
  color: var(--slate);
  font-style: italic;
}

.uemoa-card__meta {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
}

.uemoa-card__pied {
  margin-top: 16px;
}

/* CTA : bouton teal de la charte, l'UNIQUE action primaire de la carte et la
   seule chose qui navigue. Il n'y a plus de délégation de clic sur la carte :
   l'en-tête est un `summary`, il déplie.

   L'ordre des deux règles compte : --full vient après, sinon `width:
   max-content` gagnerait à spécificité égale et le bouton ne serait pas
   pleine largeur. */
.uemoa-card__cta {
  width: max-content;
  max-width: 100%;
}

.uemoa-card__cta--full {
  width: 100%;
  justify-content: center;
}

.uemoa-card__lien-absent {
  margin: 6px 0 0;
  color: var(--slate);
  font-weight: 650;
}

/* Note d'accès de la source (portail indisponible, lien à reconstruire). */
.uemoa-card__lien-note {
  margin: 2px 0 0;
  color: var(--slate);
  font-size: .86rem;
}

/* Rappel de candidature : un réglage discret sous le geste, pas une seconde
   action primaire. La carte garde UNE action, le bouton teal. La cible
   tactile fait 44 px de haut, la case elle-même 20 px : c'est le libellé
   entier qui est cliquable. */
.uemoa-card__rappel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 0;
  color: var(--slate);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.uemoa-card__rappel input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--teal);
}

.uemoa-card__rappel input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.uemoa-card__rappel input:disabled {
  cursor: progress;
  opacity: .55;
}

.uemoa-card__rappel:hover {
  color: var(--navy);
}

/* Invitation à se connecter, posée sous la case quand aucune session n'est
   ouverte. Elle remplace toute idée de fenêtre de connexion sur cette page :
   la carte de connexion vit sur /jobs/#connexion, une seule fois. */
.uemoa-card__rappel-note {
  margin: 2px 0 0;
  color: var(--slate);
  font-size: .86rem;
  line-height: 1.5;
}

.uemoa-card__rappel-note a {
  color: var(--teal-dark);
  font-weight: 650;
}

/* Chemin vers l'espace candidat, dans l'en-tête. Un bouton de charte fait
   50 px et 1 rem : c'est la taille d'une action de page, pas d'un en-tête.
   On reprend la mesure déjà retenue pour les boutons d'en-tête de l'espace
   (.jobs-header-cta), qui reste au-dessus des 44 px tactiles. */
.uemoa-espace {
  min-height: 44px;
  padding: .55em 1.05em;
  font-size: .94rem;
  white-space: nowrap;
}

/* Sous 420 px, l'en-tête n'a plus la place pour un libellé long à côté du
   logo : le lien de retour disparaît déjà à cette largeur, ce bouton se
   resserre. Il ne tombe jamais : c'est le seul chemin visible vers l'espace
   depuis cette page. */
@media (max-width: 420px) {
  .uemoa-espace {
    padding: .5em .8em;
    font-size: .88rem;
  }
}

/* Phrase du retour de connexion. Même dessin que la note du catalogue
   indisponible (filet pointillé teal, texte secondaire) : c'est la même nature
   d'information, un état de la liste et non une action. */
.uemoa-retour-note {
  padding: 12px 16px;
  border: 1px dashed rgba(15, 157, 140, 0.42);
  border-radius: 12px;
  color: var(--slate);
  font-size: .93rem;
}

/* Ligne visée par un retour de connexion. La personne revient d'un
   aller-retour par /jobs/ : il faut qu'elle retrouve SA ligne dans une liste
   qui peut en compter cent. Un liseré teal et une élévation, pas un aplat de
   couleur : la carte doit rester lisible et garder sa hiérarchie, on la
   désigne, on ne la repeint pas. Aucun geste doré ici, l'or est déjà pris par
   l'accent de la carte. */
.uemoa-card--vise {
  border-color: var(--teal);
  box-shadow: var(--sh-2);
}

/* Le halo ne s'anime que si la personne accepte le mouvement. Un rappel
   visuel qui pulse indéfiniment est une gêne, pas une aide : deux battements
   suffisent à attirer l'oeil, puis la carte redevient une carte. */
@media (prefers-reduced-motion: no-preference) {
  .uemoa-card--vise {
    animation: uemoa-vise 1.1s ease-out 2;
  }
}

@keyframes uemoa-vise {
  from { box-shadow: var(--sh-2); }
  50% { box-shadow: var(--sh-4); }
  to { box-shadow: var(--sh-2); }
}

.uemoa-vide {
  padding: 22px 18px;
  border: 1px dashed rgba(15, 157, 140, 0.42);
  border-radius: 12px;
  color: var(--slate);
  text-align: center;
}

.uemoa-note {
  max-width: 72ch;
  color: var(--slate);
  font-size: .9rem;
}

/* ==========================================================================
   Parcours guidé : première expérience de la page, panneau plein écran.
   Une question par écran, progression, Précédent et Suivant : le pattern du
   Conseiller Formation, avec les dimensions de filtre de CE catalogue.
   ========================================================================== */

body.uemoa-parcours-ouvert {
  overflow: hidden;
}

/* Le bandeau consentement (fixe, z-index 9999) ne doit pas recouvrir le
   parcours ouvert : masque pendant le flow, reapparait a la fermeture. */
body.uemoa-parcours-ouvert .kc-consent {
  display: none;
}

.uemoa-parcours {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow-y: auto;
  background:
    radial-gradient(720px 420px at 100% 10%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 68%),
    var(--ivory);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Cadre du parcours : la carte blanche de la charte, même voix que les cartes
   résultats (bordure --line, ombre --sh-1). L'accent teal vit dans les choix
   et les boutons, pas dans le conteneur. */
.uemoa-parcours__cadre {
  display: grid;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px clamp(14px, 4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-1);
}

.uemoa-parcours__entete {
  display: grid;
  gap: 2px;
}

.uemoa-parcours__entete h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.02rem, 3.8vw, 1.25rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.uemoa-parcours__entete h2:focus,
.uemoa-parcours__entete h2:focus-visible {
  outline: none;
}

/* Focus programmatique (ouverture du parcours) : le titre et la question
   recoivent le focus sans interaction. Le garde global de la charte
   (kolytica-enhancements.css) peint un cadre !important sur :focus-visible ;
   on reprend la main ici avec la meme arme, sans elargir la charte. */
.uemoa-parcours__entete h2:focus-visible {
  outline: none !important;
}

.uemoa-parcours__intro {
  margin: 0;
  color: var(--slate);
  font-size: .95rem;
  line-height: 1.45;
}

.uemoa-parcours__progression {
  margin: 0;
  color: var(--teal-dark);
  font-size: .9rem;
  font-weight: 750;
}

.uemoa-parcours__progression:empty {
  display: none;
}

.uemoa-parcours__question {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

.uemoa-parcours__question legend {
  padding: 0;
  margin-bottom: 24px;
  color: var(--navy);
  font-size: clamp(1.14rem, 4.6vw, 1.3rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.uemoa-parcours__question legend:focus-visible {
  outline: none !important;
}

/* Recherche dans la liste des options (question à choix multiples). */
.uemoa-parcours__filtre-options input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.uemoa-parcours__filtre-options input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.uemoa-parcours__choix-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Liste longue (domaines, choix multiples) : la question tient a l ecran,
   la grille defile en interne si besoin, jamais la page. */
.uemoa-parcours__choix-grille--longue {
  max-height: min(38vh, 300px);
  overflow-y: auto;
  padding: 2px;
}

/* Ecran large (panneau 640 px) : les questions a reponse unique (pays,
   type, niveau) gagnent une seconde colonne, la question longue reste en
   une. Le 390 px ne change pas : en dessous de 700 px, une colonne. */
@media (min-width: 700px) {
  .uemoa-parcours__choix-grille:not(.uemoa-parcours__choix-grille--longue) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Tres petit ecran (320 px) : la question entiere tient a l ecran sans scroll,
   options legerement plus fines mais toujours tactiles (40 px). */

/* Choix : carte compacte avec un vrai bouton radio (clavier natif), état
   sélectionné teinté teal, jamais d'aplat plein. */
.uemoa-parcours__choix {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--navy);
  font-size: .95rem;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.uemoa-parcours__choix input,
.uemoa-domaines__choix input {
  flex: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--navy);
  background: var(--white);
  cursor: pointer;
}

.uemoa-parcours__choix input[type="radio"] {
  border-radius: 50%;
}

.uemoa-parcours__choix input[type="radio"]:checked {
  border-color: var(--teal-dark);
  background:
    radial-gradient(circle, #fff 0 26%, transparent 30%),
    radial-gradient(circle, var(--teal-dark) 0 62%, transparent 66%);
}

/* Case à cocher (choix multiples) : coche blanche sur teal foncé, langage des
   chips de sélection de la charte. */
.uemoa-parcours__choix input[type="checkbox"],
.uemoa-domaines__choix input {
  border-radius: 5px;
}

.uemoa-parcours__choix input[type="checkbox"]:checked,
.uemoa-domaines__choix input:checked {
  border-color: var(--teal-dark);
  background-color: var(--teal-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.uemoa-parcours__choix input:focus-visible,
.uemoa-domaines__choix input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.uemoa-parcours__choix:has(> input:checked) {
  border-color: var(--teal-dark);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 28%, transparent);
}

@media (min-width: 360px) {
  .uemoa-parcours__question legend {
    margin-bottom: 28px;
  }
}

.uemoa-parcours__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.uemoa-parcours__actions .btn,
.uemoa-parcours__actions .btn-teal {
  flex: 1;
  min-height: 46px;
  min-width: 150px;
}

.uemoa-parcours__sortie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0;
}

.uemoa-parcours__lien-liste {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-dark);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.uemoa-parcours__lien-liste:hover {
  color: var(--teal);
}

.uemoa-parcours__lien-liste:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}



/* Pied de page de la page publique : navy de marque, liens clairs. */
.uemoa-ft {
  margin-top: 44px;
  padding-block: 44px;
  background: var(--navy);
  color: #aab6d2;
}

.uemoa-ft__grille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px 34px;
  align-items: center;
}

.uemoa-ft__marque img {
  display: block;
  width: auto;
  height: 46px;
}

.uemoa-ft__liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
}

.uemoa-ft__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #dbe4f5;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.uemoa-ft__liens a:hover {
  color: #fff;
  text-decoration: underline;
}

.uemoa-ft__copie {
  grid-column: 1 / -1;
  color: #8593b5;
  font-size: .86rem;
  text-align: right;
}

@media (max-width: 820px) {
  .uemoa-ft__grille {
    grid-template-columns: 1fr;
  }

  .uemoa-ft__liens {
    justify-content: flex-start;
  }

  .uemoa-ft__copie {
    text-align: left;
  }
}

/* Mouvement réduit : tuiles pays, cartes et chevron perdent toute
   transition. Le chevron continue de tourner (l'état doit rester lisible),
   il le fait simplement d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .uemoa-pays,
  .uemoa-card,
  .uemoa-card__chevron {
    transition: none;
  }

  .uemoa-pays:hover,
  .uemoa-pays[aria-pressed="true"] {
    transform: none;
  }
}

/* Format PC : les filtres passent en grille, les cartes en colonnes. Aucune
   règle mobile n'est modifiée. */
@media (min-width: 920px) {
  .uemoa-filtres__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
  }

  .uemoa-filtre--recherche {
    grid-column: span 3;
  }

  .uemoa-resultats {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 24px;
  }

  .uemoa-vide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 359px) {
  /* 320 px : l'en-tête serre la gouttière et la pastille, jamais le texte.
     Le titre garde sa taille, c'est lui qui identifie l'appel. */
  .uemoa-card__tete,
  .uemoa-card__corps {
    padding: 12px;
  }
  .uemoa-card__tete {
    gap: 0 10px;
  }
  .uemoa-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: .98rem;
  }
  .uemoa-card__echeance {
    gap: 0 10px;
  }
  .uemoa-card__echeance .uemoa-ic {
    width: 24px;
    height: 24px;
  }
  .uemoa-card__echeance-date {
    font-size: 1.2rem;
  }
  /* Doit suivre la règle ci-dessus : à spécificité égale, c'est la dernière
     qui gagne, et sans elle une note de source repasserait en 1,2 rem à
     320 px alors qu'elle vaut 1,02 rem partout ailleurs. */
  .uemoa-card__echeance-date--note {
    font-size: .96rem;
  }
  .uemoa-card__composante {
    padding: 4px 11px;
  }

  .uemoa-parcours {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .uemoa-parcours__cadre {
    gap: 7px;
    padding: 10px 12px;
  }
  .uemoa-parcours__question {
    gap: 18px;
  }
  .uemoa-parcours__question legend {
    font-size: 1.06rem;
    margin-bottom: 18px;
  }
  .uemoa-parcours__entete h2 {
    font-size: .98rem;
    line-height: 1.12;
  }
  .uemoa-parcours__intro {
    font-size: .9rem;
    line-height: 1.35;
  }
  .uemoa-parcours__progression {
    font-size: .85rem;
  }
  .uemoa-parcours__choix-grille {
    gap: 6px;
  }
  .uemoa-parcours__choix {
    min-height: 40px;
    padding: 7px 10px;
  }
  .uemoa-parcours__sortie {
    gap: 2px 10px;
  }
  .uemoa-parcours__lien-liste {
    min-height: 34px;
    font-size: .86rem;
  }
}

/* Barre compacte et feuille, inspiration Airbnb et Indeed, mobile d abord */
.uemoa-barre{display:none}
.uemoa-pastilles{display:none}
.uemoa-filtres__head{display:none}
.uemoa-filtres__sheet-foot{display:none}
.uemoa-barre__compteur{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--teal);color:#fff;font-size:.72rem;font-weight:800;margin-left:6px}
.uemoa-puce,.uemoa-pastille{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:.82rem;font-weight:600}
.uemoa-pastille{border-color:color-mix(in srgb, var(--teal) 22%, transparent);background:color-mix(in srgb, var(--teal) 8%, #fff)}
@media (max-width:640px){
  .uemoa-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 6px 16px rgba(20,34,79,.06);max-width:100%;min-width:0;overflow:hidden}
  .uemoa-barre__recherche{flex:1 1 140px;min-width:0;max-width:100%;position:relative}
  .uemoa-barre__recherche input{width:100%;min-height:40px;padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:.95rem}
  .uemoa-barre__recherche::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--slate)}
  .uemoa-barre__btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:10px;white-space:nowrap}
  .uemoa-barre__puces{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;min-width:0}
  .uemoa-pastilles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-width:100%;min-width:0;overflow:hidden}
  .uemoa-filtres{display:none;position:fixed;inset:0;z-index:70;background:var(--ivory);overflow:auto;padding:0;border:0;border-radius:0;box-shadow:none}
  .uemoa-filtres.is-open{display:grid;grid-template-rows:auto 1fr auto;max-height:100dvh}
  .uemoa-filtres__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
  .uemoa-filtres__head h2{margin:0;color:var(--navy);font-size:1rem;font-weight:750}
  .uemoa-filtres__close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);font-size:1.2rem;cursor:pointer}
  .uemoa-filtres__head + fieldset,.uemoa-filtres__grille{padding:16px}
  .uemoa-filtres__grille{grid-template-columns:1fr}
  .uemoa-filtres__sheet-foot{display:flex;gap:8px;padding:12px 16px;background:#fff;border-top:1px solid var(--line);position:sticky;bottom:0}
  .uemoa-filtres__sheet-foot .btn{flex:1}
  .uemoa-filtres__pied{display:none}
}
@media (min-width:641px){
  .uemoa-barre,.uemoa-pastilles{display:none}
}
@media (min-width:1280px){
  .uemoa-filtres{padding:14px 18px}
  .uemoa-filtres__grille{grid-template-columns:1fr 1fr;gap:12px 16px}
}