/* LLF Catalogue — formulaire, listes déroulantes et cartes (même rendu que les pages domaine) */

.llf-search {
  --llf-ink: #111111;
  --llf-ink-2: #3A3A3A;
  --llf-line: #eee8fc;
  --llf-field: #6B6B6B;            /* texte discret : indication de saisie, champ désactivé */
  --llf-red: #ff2627;
  --llf-red-hover: #E81F20;       /* rouge de survol de la charte */
  --llf-violet: #6e33cc;
  --llf-violet-hover: rgba(110,51,204,0.51);   /* survol de « En savoir plus » */
  --llf-tint: #eee8fc;
  /* Étiquettes des cartes */
  --llf-tag-type-bg: #EEE8FC;      /* type d'action (Certifiante…) */
  --llf-tag-type-color: #6e33cc;
  --llf-tag-cpf-bg: #6e33cc;       /* éligibilité CPF */
  --llf-tag-cpf-color: #FFFFFF;
  /* Étiquettes : texte réduit (à comparer au modèle) */
  --llf-tag-size: 0.7rem;
  --llf-tag-pad: 0.55rem 0.9rem;
  /* Espacements verticaux de la carte (à comparer au modèle) */
  --llf-sp-title: 14px;           /* étiquettes -> titre */
  --llf-sp-parcours: 8px;         /* titre -> type de parcours */
  --llf-sp-facts: 12px;           /* parcours -> format, niveau, région */
  --llf-sp-near: 6px;             /* distance, sous les informations */
  --llf-sp-more: 16px;            /* minimum avant « En savoir plus » */
  max-width: none;                 /* le bloc suit la largeur de la rangée Divi qui le contient */
  font-family: inherit;
  color: var(--llf-ink-2);
}

.llf-search *,
.llf-search *::before,
.llf-search *::after { box-sizing: border-box; }

/* Le thème ajoute des puces aux listes : on les retire dans tout le composant. */
.llf-search li { list-style: none !important; }
.llf-search li::before,
.llf-search li::after { content: none !important; display: none !important; }
.llf-search li::marker { content: none; }

/* Aucun lien souligné, au repos comme au survol. */
.llf-search a,
.llf-search a:hover,
.llf-search a:focus { text-decoration: none; }

/* Le thème décale les listes et les titres vers la droite (retrait de liste) :
   on remet tout sur le même bord gauche que le texte au-dessus. */
.llf-search .llf-search__results,
.llf-search .llf-card__facts,
.llf-search .llf-card__tags,
.llf-search .llf-card__title,
.llf-search .llf-card__parcours,
.llf-search .llf-card__near,
.llf-search .llf-card__more,
.llf-search .llf-card__fact {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.llf-search .llf-card { margin-left: 0 !important; margin-right: 0 !important; }

/* Le thème (Divi) ajoute un padding sous chaque paragraphe et chaque titre : il gonfle les espaces. */
.llf-search .llf-card p,
.llf-search .llf-card h2,
.llf-search .llf-card h3,
.llf-search .llf-card h4,
.llf-search .llf-card h5,
.llf-search .llf-card h6 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---------- formulaire ---------- */
.llf-search__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  max-width: 1000px;
}

.llf-search__field {
  position: relative;              /* ancre les listes de suggestions */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.llf-search__field--domaine { flex: 2 1 220px; }
.llf-search__field--cecrl   { flex: 1 1 200px; }
.llf-search__field--rayon  { min-width: 0; }

/* Où ? et Rayon forment un seul bloc : ils passent à la ligne ensemble, jamais séparés. */
.llf-search__geo {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex: 3 1 360px;
  min-width: 0;
}
.llf-search__geo .llf-search__field--lieu  { flex: 2 1 0; }
.llf-search__geo .llf-search__field--rayon { flex: 1 1 0; min-width: 130px; }
.llf-search__field--q       { flex: 3 1 280px; }
.llf-search__field--filtre  { flex: 1 1 200px; }
.llf-search__field[hidden]  { display: none; }

.llf-search label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--llf-ink);
}

/* Les quatre champs (domaine, lieu, rayon, mot-clé) partagent exactement le même style. */
.llf-search input[type="text"],
.llf-search .llf-select__btn {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--llf-line);
  border-radius: 0;
  background: #FFFFFF;
  font: inherit;
  font-size: 17px;
  line-height: 1.2;
  color: var(--llf-ink) !important;   /* texte en noir, quoi que fasse le thème */
  text-align: left;
  box-shadow: none;
}
.llf-search input[type="text"]::placeholder { color: var(--llf-field); opacity: 1; }

/* Sélection : la bordure passe en violet, sans contour en plus. */
.llf-search input[type="text"]:focus,
.llf-search .llf-select__btn:focus,
.llf-search .llf-select__btn[aria-expanded="true"] {
  border-color: var(--llf-violet);
  outline: none;
}

/* Menu déroulant personnalisé : bouton + liste */
.llf-select { position: relative; width: 100%; }
.llf-search .llf-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.llf-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llf-select__btn svg { flex: none; width: 20px; height: 20px; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.llf-select__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.llf-search .llf-select__btn:disabled {
  background: var(--llf-tint);
  color: var(--llf-field) !important;       /* seule exception : un champ désactivé reste visiblement grisé */
  cursor: not-allowed;
}

.llf-search__submit,
.llf-search__more {
  flex: none;
  height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--llf-red);
  color: #FFFFFF;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .22s cubic-bezier(.2,.7,.2,1);
}
.llf-search__submit:hover,
.llf-search__more:hover { background: var(--llf-red-hover); }

.llf-search .llf-search__submit:focus-visible,
.llf-search .llf-search__more:focus-visible,
.llf-search a:focus-visible {
  outline: 3px solid var(--llf-ink);
  outline-offset: 2px;
}

/* ---------- listes déroulantes (domaine, rayon, lieu, mot-clé) : un seul style ---------- */
/* 8 px de blanc autour du fond de survol, identique sur les 4 côtés. */
.llf-search .llf-search__suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 360px;
  overflow-y: auto;
  margin: 4px 0 0 !important;
  padding: 8px !important;
  background: #FFFFFF;
  border: 1px solid var(--llf-line);
  border-radius: 0;
}
.llf-search .llf-search__suggest[hidden] { display: none; }

.llf-search__suggest li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--llf-ink);
  cursor: pointer;
}
.llf-search__suggest li:hover,
.llf-search__suggest li[aria-selected="true"] { background: var(--llf-tint); }
.llf-search__suggest li[aria-selected="true"] { outline: 2px solid var(--llf-violet); outline-offset: -2px; }

/* Menus (domaine, rayon, niveau) : l'option choisie est en gras ; l'option active au clavier a le fond et le contour. */
.llf-select__list li[aria-selected="true"] { background: transparent; outline: none; font-weight: 700; }
.llf-select__list li:hover,
.llf-select__list li[data-active] { background: var(--llf-tint); }
.llf-select__list li[data-active] { outline: 2px solid var(--llf-violet); outline-offset: -2px; }
.llf-select__list li[aria-disabled="true"] { color: var(--llf-field); cursor: default; }
.llf-select__list li[aria-disabled="true"]:hover,
.llf-select__list li[aria-disabled="true"][data-active] { background: transparent; outline: none; }

.llf-search__opt-title { min-width: 0; font-weight: 500; }

/* Étiquette « Domaine » (réservée aux domaines) */
.llf-search__opt-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 0;
  background: var(--llf-tint);
  color: var(--llf-violet);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.llf-search__suggest li:hover .llf-search__opt-tag,
.llf-search__suggest li[aria-selected="true"] .llf-search__opt-tag { background: #FFFFFF; }

/* ---------- pages de domaine : filtres ---------- */
.llf-offres .llf-search__form { max-width: none; }

.llf-search .llf-card[hidden] { display: none !important; }

.llf-search .llf-search__reset {
  flex: none;
  height: 54px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--llf-violet);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: color .22s cubic-bezier(.2,.7,.2,1);
}
.llf-search .llf-search__reset:hover { color: var(--llf-violet-hover); }
.llf-search .llf-search__reset[hidden] { display: none; }

/* ---------- résultats : grille de cartes ---------- */
.llf-search__status {
  margin: 40px 0 0;
  font-size: 15px;
  color: var(--llf-ink-2);
}
.llf-search__status:empty { display: none; }

.llf-search__results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* comme Divi Machine : 3 colonnes (col-desk-3) */
  gap: 25px;
  margin-top: 40px;                /* respiration sous les champs */
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
/* Quand la phrase « N formations trouvées » est affichée, elle porte déjà l'espace. */
.llf-search__status:not(:empty) + .llf-search__results { margin-top: 20px; }

.llf-search__more { display: block; margin: 40px auto 0; }
.llf-search__more[hidden] { display: none; }

/* ---------- carte d'une action ---------- */
/* Repos : ombre. Survol : bordure de 1 px, sans ombre. La bordure est transparente au repos
   pour que la carte ne bouge pas d'un pixel au survol. */
.llf-search .llf-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* tous les éléments partent du même bord gauche */
  gap: 0;                          /* les espaces sont réglés élément par élément (variables --llf-sp-*) */
  margin-top: 0;
  margin-bottom: 0;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 2px 18px 0 var(--llf-line);
}
.llf-search .llf-card:hover {
  border-color: var(--llf-line);
  box-shadow: none;
}

.llf-card__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.llf-tag {
  display: inline-block;
  margin: 0;
  padding: var(--llf-tag-pad);
  font-size: var(--llf-tag-size);
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
}
.llf-tag--type { background: var(--llf-tag-type-bg); color: var(--llf-tag-type-color); }
.llf-tag--cpf  { background: var(--llf-tag-cpf-bg);  color: var(--llf-tag-cpf-color); }

/* nom_de_la_formation : 1.25rem */
.llf-card__title {
  margin-top: var(--llf-sp-title);
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2 !important;
  color: var(--llf-ink);
  /* Titre limité à 3 lignes, coupé par « … » */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.llf-card__title a { color: inherit; }

/* type_de_parcours : 0.8rem */
.llf-card__parcours {
  margin-top: var(--llf-sp-parcours);
  margin-bottom: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--llf-ink);
}

/* courseMode, niveau, cecrl_level, région : 1rem, alignés sur le bord gauche du titre.
   Hauteur de ligne = hauteur du picto : le picto est centré sur la première ligne du texte. */
.llf-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: 6px 24px;
  margin-top: var(--llf-sp-facts);
  margin-bottom: 0;
  padding-top: 2px;                /* 2 px de plus avant « Présentiel », « Niveau », région */
}
.llf-card__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.375rem;
  color: var(--llf-ink);
}
.llf-card__fact img {
  flex: none;
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  padding: 0;
}
.llf-card__fact--lieu { flex: 1 1 100%; }

.llf-card__near {
  margin-top: var(--llf-sp-near);
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--llf-ink-2);
}

/* « En savoir plus » : calé en bas de carte */
.llf-card__more {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--llf-sp-more);
  font-size: 1rem;
  transition: color .22s cubic-bezier(.2,.7,.2,1);
}
/* Couleur en !important : le thème impose sa propre couleur aux liens, y compris au survol. */
.llf-search a.llf-card__more,
.llf-search a.llf-card__more:visited { color: var(--llf-violet) !important; }
.llf-search a.llf-card__more:hover,
.llf-search a.llf-card__more:focus-visible { color: var(--llf-violet-hover) !important; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .llf-search__form { flex-direction: column; align-items: stretch; }
  .llf-search__field--domaine,
  .llf-search__field--cecrl,
  .llf-search__field--filtre,
  .llf-search__field--q { flex: none; }
  .llf-search__geo { flex: none; width: 100%; }                       /* Où ? et Rayon : même ligne */
  .llf-search__geo .llf-search__field--lieu  { flex: 1 1 0; }
  .llf-search__geo .llf-search__field--rayon { flex: 1 1 0; min-width: 0; }
  .llf-search__geo .llf-select__btn { padding: 0 12px; }              /* place pour « Toute la France » */
  .llf-search__submit,
  .llf-search__more { width: 100%; }
  .llf-search__status { margin-top: 32px; }
  .llf-search__results { margin-top: 32px; }
  .llf-search .llf-search__reset { align-self: flex-start; }
  .llf-search input[type="text"],
  .llf-search .llf-select__btn { font-size: 16px; }   /* évite le zoom automatique sur iOS */
  .llf-search .llf-card { padding: 24px; }
}

/* Colonnes des cartes : mêmes points de bascule que Divi Machine (tablette ≤ 980 px, mobile ≤ 767 px). */
@media (max-width: 980px) {
  .llf-search__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .llf-search__results { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Formulaire et résultats dans deux sections séparées ---------- */
/* La section Divi porte déjà l'espace : le module des résultats démarre à zéro. */
.llf-offres--resultats .llf-search__status,
.llf-search--resultats .llf-search__status { margin-top: 0; }
.llf-offres--resultats .llf-search__results,
.llf-search--resultats .llf-search__results { margin-top: 0; }
.llf-offres--resultats .llf-search__status:not(:empty) + .llf-search__results,
.llf-search--resultats .llf-search__status:not(:empty) + .llf-search__results { margin-top: 20px; }

/* Barre de filtres sur un fond coloré (fond="sombre") : libellés et lien en blanc. */
.llf-search--sombre label,
.llf-search--sombre .llf-search__reset { color: #FFFFFF !important; }
.llf-search--sombre .llf-search__reset:hover { opacity: 0.8; }