/* ============================================================
   decouvrir.css — styles propres à /decouvrir/
   (Phase 8 du chantier vitrine, brief MOA 2026-05-21)

   Réutilise la grammaire de /formations/ (.formations-layout)
   pour homogénéité visuelle, en ajoutant les briques propres
   à la page : message saisonnier, plateaux 3D placeholder,
   formulaire d'abonnement RGPD.

   Charge APRÈS style.css, focus.css, metiers.css, formations.css.

   Palette : teal vitrine uniquement (cf. mémoire
   feedback_palette_vitrine_vs_plateforme — pas de verts plateforme).
   ============================================================ */


/* ── HERO ─────────────────────────────────────────────────── */
.decouvrir-hero {
  background: linear-gradient(135deg, var(--cmq-bg, #EEF8F8) 0%, white 100%);
  padding: 36px 24px 28px;
  border-bottom: 1px solid var(--cmq-teinte, #AAD9DB);
}
.decouvrir-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.decouvrir-hero h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--cmq-fonce, #3A8A85);
  margin: 0 0 12px;
  line-height: 1.2;
}
/* ── Bandeau saisonnier ──────────────────────────────────────
   Brief §1.C.1 : compréhension en un coup d'œil sans lire — la
   couleur de fond + l'icône suffisent à signaler le contexte.
   4 tones : creuse (jaune doux) / rentree (teal clair) /
   pleine_saison (vert positif) / fin_saison (ambre).
   Le bandeau est masqué par défaut (attribut hidden) et révélé
   par decouvrir.js. */
.seasonal-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 4px solid var(--cmq-fonce, #3A8A85);
  background: #FFF4D6;
  max-width: 760px;
}
.seasonal-banner[hidden] { display: none; }

.seasonal-banner-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1.3;
}
.seasonal-banner-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #5b4a1a;
}
.seasonal-banner-text strong {
  color: #3a2f0d;
}

/* Variantes de tonalité */
.seasonal-banner.tone-creuse {
  background: #FFF4D6;
  border-left-color: #C2A23C;
}
.seasonal-banner.tone-creuse .seasonal-banner-text       { color: #5b4a1a; }
.seasonal-banner.tone-creuse .seasonal-banner-text strong{ color: #3a2f0d; }

.seasonal-banner.tone-rentree {
  background: #E8F5F4;
  border-left-color: var(--cmq-fonce, #3A8A85);
}
.seasonal-banner.tone-rentree .seasonal-banner-text        { color: #1f4a47; }
.seasonal-banner.tone-rentree .seasonal-banner-text strong { color: #0e2e2c; }

.seasonal-banner.tone-pleine_saison {
  background: #E5F3EA;
  border-left-color: #4a8a4f;
}
.seasonal-banner.tone-pleine_saison .seasonal-banner-text        { color: #1f4a23; }
.seasonal-banner.tone-pleine_saison .seasonal-banner-text strong { color: #0d2c10; }

.seasonal-banner.tone-fin_saison {
  background: #FCEEDB;
  border-left-color: #E0A45C;
}
.seasonal-banner.tone-fin_saison .seasonal-banner-text        { color: #5b3a1a; }
.seasonal-banner.tone-fin_saison .seasonal-banner-text strong { color: #3a230d; }


/* ── Intro éditoriale ────────────────────────────────────── */
.hero-intro {
  max-width: 800px;
}
.hero-intro p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--gris-texte, #2C3E3E);
  margin: 0 0 14px;
}
.hero-intro p:last-child { margin-bottom: 0; }

/* Phrase d'alerte abonnement — amorce visuelle du formulaire (§1.C.2) */
.hero-intro-alerte {
  margin-top: 14px !important;
  font-size: 1.05rem !important;
  color: #2a5e5a !important;
}
.hero-intro-alerte strong {
  border-bottom: 2px solid var(--cmq-fonce, #3A8A85);
  padding-bottom: 2px;
}


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

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

.decouvrir-carte-wrap {
  position: sticky;
  top: 0;
  height: calc(100vh - 80px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.decouvrir-carte {
  width: 100%;
  flex: 1;
  background: #e6efee;
}
.decouvrir-carte-a11y {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.78rem;
  background: white;
  border-top: 1px solid var(--cmq-teinte, #AAD9DB);
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.75;
  font-style: italic;
}


/* ── Bouton toggle filtres (mobile) ──────────────────────── */
.decouvrir-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 filtres ───────────────────────────────────────── */
.decouvrir-bloc {
  margin-bottom: 18px;
}
.decouvrir-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;
}

.decouvrir-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;
}
.decouvrir-select:focus {
  outline: none;
  border-color: var(--cmq-principal, #5BB9B3);
}

/* Chips multi-select (réutilise pattern .metier-chip / .rentree-chip) */
.decouvrir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.decouvrir-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;
}
.decouvrir-chip:hover {
  border-color: var(--cmq-principal, #5BB9B3);
  background: var(--cmq-bg, #EEF8F8);
}
.decouvrir-chip.active {
  background: var(--cmq-principal, #5BB9B3);
  border-color: var(--cmq-principal, #5BB9B3);
  color: white;
}
/* Variante département : grille plus compacte */
.decouvrir-chips-dept .decouvrir-chip {
  font-size: 0.75rem;
  padding: 4px 9px;
}

/* Actions reset */
.decouvrir-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--cmq-teinte, #AAD9DB);
}
.decouvrir-reset {
  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;
}
.decouvrir-reset:hover {
  background: var(--cmq-bg, #EEF8F8);
  border-color: var(--cmq-principal, #5BB9B3);
}


/* ── Compteur ────────────────────────────────────────────── */
.decouvrir-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);
}
.decouvrir-compteur strong {
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 700;
}


/* ── Liste événements ────────────────────────────────────── */
.decouvrir-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decouvrir-loading,
.decouvrir-vide {
  text-align: center;
  padding: 30px 16px;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.75;
  font-size: 0.92rem;
  line-height: 1.5;
}
.decouvrir-vide a {
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

/* Carte événement */
.evt-card {
  background: white;
  border: 1px solid #e0eeed;
  border-left: 4px solid var(--cmq-principal, #5BB9B3);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.evt-card:hover,
.evt-card.focus {
  box-shadow: 0 2px 8px rgba(91, 185, 179, 0.18);
  border-color: var(--cmq-principal, #5BB9B3);
}

/* Bordure gauche colorée selon type */
.evt-card[data-type="jpo_etablissement"]            { border-left-color: var(--evt-jpo, #3A8A85); }
.evt-card[data-type="rencontre_parents_entreprise"] { border-left-color: var(--evt-rencontre, #E0A45C); }
.evt-card[data-type="visite_chantier"]              { border-left-color: var(--evt-visite, #8B5A3C); }
.evt-card[data-type="salon_forum"]                  { border-left-color: var(--evt-salon, #7B5BA6); }
.evt-card[data-type="conference_seminaire"]         { border-left-color: var(--evt-conf, #3D5A80); }
.evt-card[data-type="journee_technique"]            { border-left-color: var(--evt-jt, #C2A23C); }

.evt-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.evt-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  color: white;
}
.evt-badge.b-jpo            { background: #3A8A85; }
.evt-badge.b-rencontre      { background: #E0A45C; }
.evt-badge.b-visite         { background: #8B5A3C; }
.evt-badge.b-salon          { background: #7B5BA6; }
.evt-badge.b-conf           { background: #3D5A80; }
.evt-badge.b-jt             { background: #C2A23C; }

.evt-badge-passe {
  background: #999;
  color: white;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.evt-badge-mise-en-avant {
  background: #FFD86B;
  color: #6b4f00;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

.evt-titre {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--gris-texte, #2C3E3E);
  margin: 0 0 6px;
  line-height: 1.3;
}
.evt-meta {
  font-size: 0.82rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.85;
  line-height: 1.5;
  margin: 0 0 4px;
}
.evt-meta-icon {
  display: inline-block;
  width: 1.1em;
}
/* Badge format visio (P2.4) — dans la rangée de badges en tête de carte */
.evt-visio {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.evt-visio--full {
  background: #2C5BA6;   /* bleu visio — contraste AA sur texte blanc */
  color: #fff;
}
.evt-visio--hybride {
  background: var(--cmq-clair, #C5E8EA);
  color: #1F4E78;
}
.evt-meta-distanciel { font-weight: 600; opacity: 1; }
.evt-link-visio { color: #2C5BA6; }
.evt-source {
  font-size: 0.75rem;
  opacity: 0.65;
  font-style: italic;
}
.evt-desc {
  font-size: 0.85rem;
  color: var(--gris-texte, #2C3E3E);
  margin: 6px 0 8px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evt-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.evt-link {
  font-size: 0.82rem;
  color: var(--cmq-fonce, #3A8A85);
  text-decoration: none;
  font-weight: 600;
  padding: 3px 0;
}
.evt-link:hover { text-decoration: underline; }
.evt-link-inscription {
  color: white;
  background: var(--cmq-principal, #5BB9B3);
  padding: 4px 10px;
  border-radius: 6px;
}
.evt-link-inscription:hover {
  background: var(--cmq-fonce, #3A8A85);
  text-decoration: none;
}

.decouvrir-sep {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--cmq-teinte, #AAD9DB);
}


/* ── Popup Leaflet ────────────────────────────────────────── */
.popup-evt {
  font-family: 'Inter', system-ui, sans-serif;
}
.popup-evt-titre {
  font-weight: 700;
  color: var(--cmq-fonce, #3A8A85);
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.3;
}
.popup-evt-meta {
  font-size: 0.82rem;
  color: var(--gris-texte, #2C3E3E);
  margin: 0 0 4px;
}
.popup-evt-links {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.popup-evt-links a {
  font-size: 0.8rem;
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 600;
  text-decoration: none;
}
.popup-evt-links a:hover { text-decoration: underline; }


/* ── Section Plateaux 3D ──────────────────────────────────── */
.decouvrir-plateaux {
  padding: 48px 24px;
  background: white;
  border-top: 1px solid var(--cmq-teinte, #AAD9DB);
}
.decouvrir-plateaux-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.decouvrir-plateaux h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  color: var(--cmq-fonce, #3A8A85);
  margin: 0 0 10px;
}
.decouvrir-plateaux-intro {
  font-size: 0.98rem;
  color: var(--gris-texte, #2C3E3E);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 760px;
}
.decouvrir-plateaux-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.plateau-card {
  position: relative;
  background: linear-gradient(145deg, var(--cmq-bg, #EEF8F8) 0%, var(--cmq-clair, #C5E8EA) 100%);
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  cursor: not-allowed;          /* signal visuel : non cliquable en V1 */
  opacity: 0.92;
}
.plateau-card h3 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cmq-fonce, #3A8A85);
  margin: 12px 0 6px;
}
.plateau-card p {
  font-size: 0.88rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.85;
  margin: 0;
  line-height: 1.45;
}
.plateau-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #E0A45C;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plateau-visuel {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  color: var(--cmq-fonce, #3A8A85);
  opacity: 0.55;
}
.plateau-visuel svg {
  width: 100%;
  height: 100%;
}

/* ── Plateaux 3D : carte active + crédit (Fil 1, Brief 2026-06-17) ── */
.plateau-etab {
  font-size: 0.82rem !important;
  font-weight: 600;
  color: var(--cmq-fonce, #3A8A85);
  opacity: 0.9 !important;
  margin: 10px 0 4px !important;
}
.plateau-card--actif {
  display: block;
  text-decoration: none;
  cursor: pointer;            /* annule le not-allowed des cartes « Bientôt » */
  opacity: 1;                 /* annule l'opacity 0.92 des cartes inactives */
  border: 2px solid var(--cmq-fonce, #3A8A85);
  transition: transform .15s ease, box-shadow .15s ease;
}
.plateau-card--actif:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.plateau-card--actif:focus-visible {
  outline: 3px solid var(--cmq-fonce, #3A8A85);
  outline-offset: 2px;
}
.plateau-card--actif .plateau-visuel {
  opacity: 0.9;               /* visuel colorisé/affirmé (Brief §3) */
}
.plateau-badge--actif {
  background: #1F7A52;        /* vert filière — contraste AA sur texte blanc */
}
.plateau-cta {
  display: inline-block;
  margin-top: 14px;
  background: var(--cmq-fonce, #3A8A85);
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 18px;
  border-radius: 24px;
}
.plateau-card--actif:hover .plateau-cta {
  background: #2C7068;
}
.plateau-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--gris-texte, #2C3E3E);
  opacity: 0.7;
}
.plateau-credit {
  margin: 24px 0 0;
  font-size: 0.82rem;
  opacity: 0.75;
  color: var(--cmq-fonce, #3A8A85);
}
.plateau-credit a {
  color: inherit;
  text-decoration: underline;
}

/* ── Phase 2 : vignette poster (repli SVG gracieux) ─────────── */
.plateau-visuel--poster {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  opacity: 1;
}
.plateau-visuel--poster svg { display: none; }   /* le poster remplace l'icône */
.plateau-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Phase 2 : chapeau de transition « venez sur le terrain » ── */
.decouvrir-terrain-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 8px;
}
.decouvrir-terrain-intro h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  color: var(--cmq-fonce, #3A8A85);
  margin: 0 0 10px;
}
.decouvrir-terrain-intro p {
  font-size: 0.98rem;
  color: var(--gris-texte, #2C3E3E);
  line-height: 1.55;
  margin: 0;
  max-width: 820px;
}

/* ── Phase 2 : chip visio dédié ─────────────────────────────── */
.decouvrir-chip--visio.active {
  background: #2C5BA6;
  border-color: #2C5BA6;
  color: #fff;
}


/* ── Section abonnement ───────────────────────────────────── */
.decouvrir-abonnement {
  padding: 48px 24px;
  background: var(--cmq-bg, #EEF8F8);
  border-top: 1px solid var(--cmq-teinte, #AAD9DB);
}
.decouvrir-abonnement-inner {
  max-width: 720px;
  margin: 0 auto;
  background: white;
  padding: 32px 28px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(58, 138, 133, 0.08);
}
.decouvrir-abonnement h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  color: var(--cmq-fonce, #3A8A85);
  margin: 0 0 10px;
}
.decouvrir-abo-intro {
  font-size: 0.95rem;
  color: var(--gris-texte, #2C3E3E);
  line-height: 1.55;
  margin: 0 0 24px;
}

.abo-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.abo-field label,
.abo-field legend {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cmq-fonce, #3A8A85);
  margin-bottom: 6px;
}
.abo-req {
  color: #C13838;
}
.abo-field input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: white;
  color: var(--gris-texte, #2C3E3E);
}
.abo-field input[type="email"]:focus {
  outline: none;
  border-color: var(--cmq-principal, #5BB9B3);
  box-shadow: 0 0 0 3px rgba(91, 185, 179, 0.15);
}

/* Fieldset départements */
.abo-depts {
  border: none;
  padding: 0;
  margin: 0;
}
.abo-check-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cmq-bg, #EEF8F8);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--cmq-fonce, #3A8A85);
  margin-bottom: 10px;
}
.abo-check-all input { accent-color: var(--cmq-principal, #5BB9B3); }

.abo-depts-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 10px;
  transition: opacity 0.15s;
}
.abo-depts-grille.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.abo-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--gris-texte, #2C3E3E);
  cursor: pointer;
}
.abo-check input { accent-color: var(--cmq-principal, #5BB9B3); }

.abo-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--gris-texte, #2C3E3E);
  line-height: 1.45;
  padding: 12px 14px;
  background: var(--cmq-bg, #EEF8F8);
  border-radius: 8px;
  cursor: pointer;
}
.abo-consent input {
  margin-top: 3px;
  accent-color: var(--cmq-principal, #5BB9B3);
  flex-shrink: 0;
}
.abo-consent a {
  color: var(--cmq-fonce, #3A8A85);
  font-weight: 600;
}

/* Honeypot — masqué visuellement et aux lecteurs d'écran */
.abo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.abo-submit {
  background: var(--cmq-principal, #5BB9B3);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}
.abo-submit:hover { background: var(--cmq-fonce, #3A8A85); }
.abo-submit:disabled {
  background: #ccc;
  cursor: wait;
}

.abo-feedback {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 1.5em;
}
.abo-feedback.ok {
  color: #1f6b3e;
  background: #e7f5ed;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #1f6b3e;
}
.abo-feedback.err {
  color: #8b2c2c;
  background: #faeaea;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #8b2c2c;
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .decouvrir-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .decouvrir-aside {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--cmq-teinte, #AAD9DB);
  }
  .decouvrir-carte-wrap {
    position: static;
    height: 480px;
  }
  .decouvrir-toggle-filtres { display: block; }
  .decouvrir-filtres { display: none; }
  .decouvrir-filtres.open { display: block; }
}

@media (max-width: 600px) {
  .decouvrir-hero { padding: 24px 16px 18px; }
  .decouvrir-aside { padding: 16px; }
  .decouvrir-plateaux { padding: 36px 16px; }
  .decouvrir-abonnement { padding: 32px 16px; }
  .decouvrir-abonnement-inner { padding: 24px 18px; }
  .abo-submit { width: 100%; align-self: stretch; }
}


/* ============================================================
   Dropdown multi-sélect <details> — filtre département (carte)
   + formulaire abonnement (brief §1.C.3)
   Visuellement compact, fonctionnellement multi-sélect via
   checkboxes natives.
   ============================================================ */
.decouvrir-dropdown {
  border: 1.5px solid var(--cmq-teinte, #AAD9DB);
  border-radius: 6px;
  background: white;
}
.decouvrir-dropdown > summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--cmq-fonce, #3A8A85);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 0.74rem;
}
.decouvrir-dropdown > summary::-webkit-details-marker { display: none; }
.decouvrir-dropdown > summary::marker { content: ''; }
.decouvrir-dropdown > summary:hover {
  background: var(--cmq-bg, #EEF8F8);
}
.decouvrir-dropdown[open] > summary {
  border-bottom: 1px solid #e3eded;
  background: var(--cmq-bg, #EEF8F8);
}

.decouvrir-dropdown-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  background: var(--cmq-principal, #5BB9B3);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  /* Masqué via :empty quand aucune sélection */
}
.decouvrir-dropdown-count:empty {
  display: none;
}

.decouvrir-dropdown-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  font-size: 0.9rem;
}
.decouvrir-dropdown[open] .decouvrir-dropdown-chevron {
  transform: rotate(180deg);
}

.decouvrir-dropdown-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 12px;
  padding: 10px 14px 14px;
  max-height: 260px;
  overflow-y: auto;
}
.decouvrir-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.88rem;
  cursor: pointer;
  font-weight: 400;          /* override le 600 par défaut des labels */
  color: var(--gris-texte, #2C3E3E);
  text-transform: none;
  letter-spacing: 0;
}
.decouvrir-dropdown-item input {
  accent-color: var(--cmq-principal, #5BB9B3);
  flex-shrink: 0;
}

/* État désactivé : utilisé dans le formulaire abonnement quand
   « Toute l'Occitanie » est cochée — la grille passe en grisé
   non interactif (cohérence avec l'ancien .abo-depts-grille.disabled). */
.decouvrir-dropdown-body.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Variante formulaire abonnement : un peu plus de présence visuelle
   car ce n'est pas un filtre transitoire mais un engagement. */
.abo-depts-dropdown {
  margin-top: 10px;
}
.abo-depts-dropdown > summary {
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}