/*!
 * theme-alcfc.css — v2
 * Surcouche institutionnelle ALCFC-CI par-dessus prettyBootstrap.css
 * Palette : Rouge (primaire) · Vert (secondaire) · Orange (tertiaire)
 * Charge dans cet ordre :
 *   1) prettybootstrap.css
 *   2) theme-alcfc.css  (ce fichier)
 * Règle stricte : aucun élément de menu/navigation n'est un bouton — texte simple uniquement.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════════════════ */
:root,
[data-color="blue"] {
  /* Rouge institutionnel — couleur PRIMAIRE (pilote tout .pb-btn-primary, liens, accents) */
  --pb-h: 355;
  --pb-s: 74%;
}

:root {
  --pb-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --pb-font-display: 'Manrope', var(--pb-font);

  /* Vert — couleur SECONDAIRE (réutilise le slot sémantique "success") */
  --pb-success:    #167A46;
  --pb-success-bg: #E9F7EF;
  --pb-success-bd: #9BDCB7;

  /* Orange — couleur TERTIAIRE (réutilise le slot sémantique "warning") */
  --pb-warning:    #DB7A1F;
  --pb-warning-bg: #FDF1E2;
  --pb-warning-bd: #F3C388;

  --alcfc-red: hsl(var(--pb-h), var(--pb-s), 46%);
  --alcfc-red-dark: hsl(var(--pb-h), var(--pb-s), 36%);
  --alcfc-red-soft: hsl(var(--pb-h), 85%, 96%);
  --alcfc-green: var(--pb-success);
  --alcfc-orange: var(--pb-warning);
  --alcfc-ink: #171417;

  --pb-bg-subtle: #FAFAFA;
  --pb-r-xl: 18px;
  --pb-r-2xl: 24px;
  --pb-sh-sm: 0 1px 3px rgba(23,20,23,.06), 0 1px 2px -1px rgba(23,20,23,.05);
  --pb-sh:    0 6px 16px -4px rgba(23,20,23,.10);
  --pb-sh-lg: 0 16px 32px -8px rgba(23,20,23,.14);
}

body { font-family: var(--pb-font); }
h1, h2, h3, h4, .pb-hero-title, .pb-page-title, .pb-footer-brand, .pb-navbar-brand,
.pb-card-title, .pb-feature-title, .pb-stat-value {
  font-family: var(--pb-font-display);
}

/* ════════════════════════════════════════════════════════════════
   UTILITAIRES DE COULEUR DE MARQUE
════════════════════════════════════════════════════════════════ */
.alcfc-text-red    { color: var(--alcfc-red) !important; }
.alcfc-text-green  { color: var(--alcfc-green) !important; }
.alcfc-text-orange { color: var(--alcfc-orange) !important; }

.pb-btn-green  { background: var(--alcfc-green);  color: #fff; border-color: var(--alcfc-green); }
.pb-btn-green:hover  { background: #12613a; border-color: #12613a; color: #fff; }
.pb-btn-orange { background: var(--alcfc-orange); color: #fff; border-color: var(--alcfc-orange); }
.pb-btn-orange:hover { background: #b8630f; border-color: #b8630f; color: #fff; }

.pb-badge-green  { background: var(--pb-success-bg); color: var(--pb-success); }
.pb-badge-orange { background: var(--pb-warning-bg); color: var(--pb-warning); }

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — TEXTE SEUL, JAMAIS DE BOUTONS
   (aucune classe .pb-btn n'apparaît nulle part dans le header/topbar)
════════════════════════════════════════════════════════════════ */
.alcfc-topbar {
  background: var(--alcfc-ink);
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.alcfc-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
}
.alcfc-topbar-left { display: flex; align-items: center; gap: 1.4rem; }
.alcfc-topbar-right { display: flex; align-items: center; gap: 1.4rem; }
.alcfc-topbar a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .15s ease;
  font-weight: 500;
}
.alcfc-topbar a:hover { color: #fff; }
.alcfc-topbar a.is-accent { color: var(--pb-warning); font-weight: 700; }
.alcfc-topbar a.is-accent:hover { color: #f0a458; }

.pb-navbar-nav .pb-nav-link {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .5rem .9rem !important;
  color: var(--pb-text-2);
  font-weight: 500;
  position: relative;
}
.pb-navbar-nav .pb-nav-link::after {
  content: '';
  position: absolute; left: .9rem; right: .9rem; bottom: .1rem;
  height: 2px; background: var(--alcfc-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.pb-navbar-nav .pb-nav-link:hover { background: none !important; color: var(--alcfc-red); }
.pb-navbar-nav .pb-nav-link:hover::after { transform: scaleX(1); }
.pb-navbar-nav .pb-nav-link.active { color: var(--alcfc-red); background: none !important; }
.pb-navbar-nav .pb-nav-link.active::after { transform: scaleX(1); }
.pb-navbar-nav .pb-nav-link.is-accent { color: var(--alcfc-green); font-weight: 600; }
.pb-navbar-nav .pb-nav-link.is-accent:hover { color: #12613a; }
.pb-navbar-nav .pb-nav-link.is-accent::after { background: var(--alcfc-green); }

/* FIX — prettyBootstrap.css ne définit jamais display:none par défaut sur
   .pb-dropdown-menu (seul le JS bascule un style inline display:block/"").
   Résultat observé : le menu reste visuellement ouvert en permanence et le
   premier clic semble "fermer avant d'ouvrir". Le style inline posé par le
   JS reste prioritaire sur cette règle, donc l'ouverture/fermeture continue
   de fonctionner normalement une fois ce défaut posé. */
.pb-dropdown-menu { display: none; }
.pb-dropdown-menu[style*="display: block"] { display: block; }
.pb-dropdown { position: relative; }
.pb-dropdown > .pb-nav-link[aria-expanded="true"] { color: var(--alcfc-red); }
.pb-dropdown > .pb-nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

/* ════════════════════════════════════════════════════════════════
   HERO CAROUSEL — texte défilant + logo image fixe
════════════════════════════════════════════════════════════════ */
.alcfc-hero-slides { position: relative; min-height: 210px; }
.alcfc-hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.alcfc-hero-slide.is-active {
  position: relative; opacity: 1; visibility: visible; transform: translateY(0);
}
.alcfc-hero-dots { display: flex; gap: .5rem; margin-top: 1.6rem; }
.alcfc-hero-dot {
  width: 28px; height: 4px; border-radius: 99px; border: none; padding: 0;
  background: var(--pb-border-2); cursor: pointer; transition: background .2s;
}
.alcfc-hero-dot.is-active { background: var(--alcfc-red); }

/* Boutons hero — taille standard, pas de pb-btn-lg (trop imposant) */
.alcfc-hero-actions .pb-btn { min-width: 172px; }

/* ════════════════════════════════════════════════════════════════
   PARCOURS POSTULER — ZONES puis VILLES
════════════════════════════════════════════════════════════════ */
.alcfc-zone-card {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.alcfc-zone-card:hover { transform: translateY(-3px); box-shadow: var(--pb-sh-lg); border-color: var(--alcfc-red); }
.alcfc-zone-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(150deg, var(--alcfc-red), var(--alcfc-red-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1rem;
}
.alcfc-stage { display: none; }
.alcfc-stage.is-active { display: block; }
.alcfc-back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--pb-text-2); text-decoration: none; font-size: .875rem; font-weight: 600;
  margin-bottom: 1.25rem;
}
.alcfc-back-link:hover { color: var(--alcfc-red); }

/* ════════════════════════════════════════════════════════════════
   ESPACEMENT DES FORMULAIRES (SuperForm / champs génériques)
════════════════════════════════════════════════════════════════ */
.sf-wrapper .row { row-gap: 1.1rem; }
.sf-wrapper label.form-label { margin-bottom: .35rem; display: block; }
.sf-wrapper .form-control,
.sf-wrapper .form-select { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════
   BANNIÈRE DE SENSIBILISATION
════════════════════════════════════════════════════════════════ */
.alcfc-ticker {
  background: var(--alcfc-red);
  overflow: hidden;
  padding: .5rem 0;
}
.alcfc-ticker-track {
  display: flex; white-space: nowrap; width: max-content;
  animation: alcfc-scroll 30s linear infinite;
}
.alcfc-ticker-item {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 600; font-size: .82rem;
  padding: 0 2.4rem; border-right: 1px solid rgba(255,255,255,.28);
}
.alcfc-ticker-item i { color: #ffd9a8; }
@keyframes alcfc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .alcfc-ticker-track { animation: none; } }

/* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
.alcfc-hero {
  background:
    radial-gradient(ellipse 800px 460px at 88% -12%, var(--alcfc-red-soft), transparent 62%),
    radial-gradient(ellipse 500px 340px at 6% 108%, var(--pb-success-bg), transparent 60%),
    var(--pb-bg-subtle);
  border-bottom: 1px solid var(--pb-border);
}
.alcfc-emblem-ring   { stroke: var(--alcfc-red); }
.alcfc-emblem-accent { stroke: var(--alcfc-orange); fill: var(--alcfc-orange); }
.alcfc-emblem-leaf   { fill: var(--alcfc-green); }

/* ════════════════════════════════════════════════════════════════
   AXES D'INTERVENTION
════════════════════════════════════════════════════════════════ */
.alcfc-axe-icon {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(150deg, var(--alcfc-red), var(--alcfc-red-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1.1rem;
}
.alcfc-axe-icon.is-green  { background: linear-gradient(150deg, var(--alcfc-green), #0f4e2e); }
.alcfc-axe-icon.is-orange { background: linear-gradient(150deg, var(--alcfc-orange), #a0590c); }

/* ════════════════════════════════════════════════════════════════
   VILLES — cartes ouverte / fermée
════════════════════════════════════════════════════════════════ */
.alcfc-ville-card {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.alcfc-ville-card:hover { transform: translateY(-3px); box-shadow: var(--pb-sh-lg); border-color: var(--alcfc-red); }
.alcfc-ville-card.is-closed { cursor: not-allowed; opacity: .62; }
.alcfc-ville-card.is-closed:hover { transform: none; box-shadow: var(--pb-sh-sm); border-color: var(--pb-border); }

/* ════════════════════════════════════════════════════════════════
   MULTI-STEP CANDIDATURE (FormMultiStep) — accordé à la charte ALCFC
════════════════════════════════════════════════════════════════ */
.msf-wrap { padding: 0 !important; }
.msf-bar-fill { background: var(--alcfc-red) !important; }
.msf-dot.active { border-color: var(--alcfc-red) !important; color: var(--alcfc-red) !important; background: var(--alcfc-red-soft) !important; }
.msf-dot.done   { background: var(--alcfc-red) !important; border-color: var(--alcfc-red) !important; }
.msf-dot-line.done { background: var(--alcfc-red) !important; }
.msf-step-title { font-family: var(--pb-font-display) !important; color: var(--alcfc-ink) !important; }
.msf-step-num   { color: var(--alcfc-orange) !important; }
.msf-field {
  display: block; width: 100%; padding: .6rem .875rem;
  font-family: var(--pb-font); font-size: .9rem;
  color: var(--pb-text); background: var(--pb-surface);
  border: 1.5px solid var(--pb-border-2); border-radius: var(--pb-r-sm);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.msf-field:focus { border-color: var(--alcfc-red); box-shadow: 0 0 0 3px hsla(var(--pb-h),var(--pb-s),46%,.16); }
.msf-nav { border-top: 1px solid var(--pb-border) !important; }

/* ════════════════════════════════════════════════════════════════
   STATUTS DE CANDIDATURE (suivi)
════════════════════════════════════════════════════════════════ */
.alcfc-status-card {
  border-radius: var(--pb-r-xl);
  border: 1px solid var(--pb-border);
  padding: 2.2rem;
  text-align: center;
}
.alcfc-status-icon {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin: 0 auto 1.1rem;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
.pb-footer { background: var(--alcfc-ink); border-top: none; }
.pb-footer, .pb-footer .pb-footer-brand, .pb-footer .pb-footer-tagline,
.pb-footer .pb-footer-title, .pb-footer .pb-footer-link, .pb-footer .pb-footer-bottom {
  color: rgba(255,255,255,.68);
}
.pb-footer .pb-footer-brand { color: #fff; }
.pb-footer .pb-footer-title { color: var(--alcfc-orange); }
.pb-footer .pb-footer-link:hover { color: #fff; }
.pb-footer .pb-footer-bottom { border-top-color: rgba(255,255,255,.12); }
.pb-social-link { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.75); }
.pb-social-link:hover { background: var(--alcfc-red); border-color: var(--alcfc-red); color: #fff; }