/* ==========================================================================
   AFAAR — Collectivités
   Compléments à afaar.css pour les deux seuls motifs de la maquette
   « Page Collectivités.dc.html » absents du CSS commun.
   Aucune valeur nouvelle : tout provient de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Carte sombre empilée
   --------------------------------------------------------------------------
   .card--dark d'afaar.css passe en ligne (flex-direction:row) pour loger la
   mascotte de la page Particuliers. Ici la carte « Situations sensibles »
   occupe une simple cellule de la grille 2×2 et empile titre + texte comme
   une carte claire : on rétablit la colonne.
   -------------------------------------------------------------------------- */

.card--dark.card--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   2. Bandeau CTA à deux boutons
   --------------------------------------------------------------------------
   Le bundle Collectivités ajoute un bouton secondaire « Nous contacter »
   à côté du CTA principal (desktop uniquement). Même graisse et même corps
   que .cta-band__btn, contour --c-on-dark comme .btn-outline du CTA d'accueil.
   -------------------------------------------------------------------------- */

.cta-band__actions {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

.cta-band__btn--ghost {
  background: none;
  border: 2px solid var(--c-on-dark);
  color: var(--c-on-dark);
  padding: 16px 32px;
}
.cta-band__btn--ghost:hover {
  background: none;
  color: var(--c-on-dark);
  text-decoration: none;
}

/* ==========================================================================
   MOBILE — maquette 390
   ========================================================================== */

@media (max-width: 899px) {

  /* Gouttière des cartes alignée sur .card en mobile. */
  .card--dark.card--stack { gap: 6px; }

  /* Un seul bouton visible : il prend toute la largeur du bandeau. */
  .cta-band__actions { flex-direction: column; }

  /* --------------------------------------------------------------------
     Correctif : visuel de héro invisible en mobile
     --------------------------------------------------------------------
     .page-hero (afaar.css) passe en flex-direction:column en mobile mais
     ne réinitialise pas le align-items:center hérité du bloc desktop. Un
     enfant vide comme .page-hero__media est donc dimensionné par son
     contenu, c'est-à-dire 0 de large : l'image ne s'affiche pas.
     Le bundle mobile la montre pleine largeur, d'où ce stretch explicite.
     À supprimer si afaar.css corrige le align-items en amont (le défaut
     touche aussi particuliers.html).
     -------------------------------------------------------------------- */
}