/* ============================================================
   formations.css — styles propres à /formations/
   (Phase 6 du chantier Focus, brief MOA 2026-05-20)

   Layout INVERSÉ vs choisir.html : colonne gauche = filtres+liste,
   colonne droite = carte Leaflet. Signal visuel qu'on est dans
   une autre section. Charge APRÈS style.css, focus.css, metiers.css
   (réutilise .metier-chip, .metiers-hero, modale export, etc.).
   ============================================================ */

/* ── Layout 2 colonnes ────────────────────────────────────── */
.formations-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  min-height: calc(100vh - 200px);
  background: var(--cmq-bg, #EEF8F8);
}

.formations-aside {
  background: white;
  border-right: 1px solid var(--cmq-teinte, #AAD9DB);
  padding: 22px 22px 32px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.formations-carte-wrap {
  position: sticky;
  top: 0;
  height: calc(100vh - 80px);
  min-height: 480px;
}

.formations-carte {
  width: 100%;
  height: 100%;
  background: #e6efee;
}

/* ── Bouton toggle filtres (mobile uniquement) ───────────── */
.formations-toggle-filtres {
  display: none;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--cmq-principal, #5BB9B3);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}

/* ── Blocs de filtres ─────────────────────────────────────── */
.formations-bloc {
  margin-bottom: 18px;
}
.formations-bloc:last-child { margin-bottom: 0; }

.formations-bloc-titre {
  display: block;
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 0.74rem;
  margin-bottom: 8px;
}
.formations-bloc-hint {
  text-transform: none;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.7;
  letter-spacing: 0;
}

.formations-select {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 6px;
  background: white;
  font-size: 0.92rem;
  color: var(--gris-texte, #2C3E3E);
  cursor: pointer;
  font-family: inherit;
}
.formations-select:focus {
  outline: none;
  border-color: var(--cmq-principal, #5BB9B3);
}

/* ── Chips rentrée ─────────────────────────────────────── */
.formations-rentree-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rentree-chip {
  padding: 5px 12px;
  border: 1.5px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 14px;
  background: white;
  color: var(--cmq-fonce, #3A8A85);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.rentree-chip:hover {
  border-color: var(--cmq-principal, #5BB9B3);
  background: var(--cmq-bg, #EEF8F8);
}
.rentree-chip.active {
  background: var(--cmq-principal, #5BB9B3);
  border-color: var(--cmq-principal, #5BB9B3);
  color: white;
}

/* ── Actions reset + export ──────────────────────────────── */
.formations-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--cmq-teinte, #AAD9DB);
}
.formations-reset,
.formations-export {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 6px;
  background: white;
  color: var(--cmq-fonce, #3A8A85);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.formations-reset:hover,
.formations-export:hover {
  background: var(--cmq-bg, #EEF8F8);
  border-color: var(--cmq-principal, #5BB9B3);
}

/* ── Compteur principal ──────────────────────────────────── */
.formations-compteur {
  margin: 18px 0 12px;
  padding: 10px 14px;
  background: var(--cmq-bg, #EEF8F8);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--gris-texte, #2C3E3E);
}
.formations-compteur strong {
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 700;
}

/* ── Liste résultats ─────────────────────────────────────── */
.formations-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.formations-loading,
.formations-vide {
  text-align: center;
  padding: 30px 16px;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.7;
  font-style: italic;
  font-size: 0.92rem;
}

/* Item établissement (avec formations dépliables) */
.formations-etab {
  background: white;
  border: 1px solid #e0eeed;
  border-radius: 8px;
  overflow: hidden;
}
.formations-etab.focus {
  border-color: var(--cmq-principal, #5BB9B3);
  box-shadow: 0 2px 8px rgba(91, 185, 179, 0.18);
}
.formations-etab-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
}
.formations-etab-head:hover { background: var(--cmq-bg, #EEF8F8); }
.formations-etab-arr {
  color: var(--cmq-fonce, #3A8A85);
  font-size: 0.85rem;
  transition: transform 0.15s;
}
.formations-etab.open .formations-etab-arr { transform: rotate(90deg); }
.formations-etab-nom {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cmq-fonce, #3A8A85);
  line-height: 1.3;
}
.formations-etab-meta {
  font-size: 0.75rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.65;
  margin-top: 2px;
  font-weight: 400;
}
.formations-etab-badge {
  background: var(--cmq-clair, #C5E8EA);
  color: var(--cmq-fonce, #3A8A85);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.formations-etab-body {
  display: none;
  border-top: 1px solid #e0eeed;
}
.formations-etab.open .formations-etab-body { display: block; }
.formations-etab-fiche {
  display: block;
  padding: 9px 14px 9px 36px;
  font-size: 0.85rem;
  color: var(--gris-texte, #2C3E3E);
  text-decoration: none;
  border-bottom: 1px solid #f0f5f4;
  position: relative;
}
.formations-etab-fiche:last-child { border-bottom: none; }
.formations-etab-fiche::before {
  content: "→";
  position: absolute;
  left: 18px;
  color: var(--cmq-principal, #5BB9B3);
  font-weight: 700;
}
.formations-etab-fiche:hover {
  background: var(--cmq-bg, #EEF8F8);
  color: var(--cmq-fonce, #3A8A85);
}
.formations-etab-fiche-titre { font-weight: 600; line-height: 1.3; }
.formations-etab-fiche-meta {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 2px;
}

/* ── Popup Leaflet ────────────────────────────────────────── */
.leaflet-popup-content {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.4;
}
.popup-form-titre {
  display: block;
  font-weight: 700;
  color: var(--cmq-fonce, #3A8A85);
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.popup-form-titre:hover { text-decoration: underline; }
.popup-form-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  max-height: 180px;
  overflow-y: auto;
}
.popup-form-list li {
  padding: 4px 0;
  border-bottom: 1px solid #f0f5f4;
}
.popup-form-list li:last-child { border-bottom: none; }
.popup-form-list a {
  color: var(--gris-texte, #2C3E3E);
  text-decoration: none;
  font-size: 0.85rem;
}
.popup-form-list a:hover { color: var(--cmq-fonce, #3A8A85); }
.popup-form-meta {
  font-size: 0.75rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.7;
}


/* ── Encart info — 267 formations hors Occitanie / France Compétences
   (N3-bis du brief MOA 2026-05-20). Style discret, pas d'alerte. */
.formations-encart {
  background: var(--cmq-bg, #EEF8F8);
  border-top: 1px solid var(--cmq-teinte, #AAD9DB);
  padding: 22px 24px;
}
.formations-encart-inner {
  max-width: 880px;
  margin: 0 auto;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gris-texte, #2C3E3E);
}
.formations-encart-inner p { margin: 0; }
.formations-encart-inner strong { color: var(--cmq-fonce, #3A8A85); }
.formations-encart-inner a {
  color: var(--cmq-fonce, #3A8A85);
  text-decoration: underline;
  font-weight: 600;
}
.formations-encart-inner a:hover { color: var(--cmq-principal, #5BB9B3); }


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .formations-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .formations-aside {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--cmq-teinte, #AAD9DB);
  }
  .formations-carte-wrap {
    position: static;
    height: 480px;
  }
  /* Mobile : filtres rétractables pour ne pas pousser la carte trop bas */
  .formations-toggle-filtres { display: block; }
  .formations-filtres { display: none; }
  .formations-filtres.open { display: block; }
}

@media (max-width: 600px) {
  .formations-aside { padding: 16px; }
  .formations-encart { padding: 18px 16px; }
}