/* Portail des applications — ce que le kit Identity (bw-ui.css) n'a pas encore.
   Uniquement des jetons du kit : aucune couleur en dur (DEC-017). */

/* Font Awesome dans les composants du kit, qui attendent des svg */
.bw-btn i, .bw-message > i, .bw-erreur i { flex: none; width: 1.1em; text-align: center; }
.bw-message > i { color: var(--teinte); margin-top: 5px; font-size: 18px; }
.portail-theme button i { font-size: 14px; }
.bw-entete__barre { justify-content: space-between; }
@media (max-width: 760px) { .bw-entete .portail-theme { display: inline-flex; } }

/* ---------- En-tête de page ---------- */
.portail-hero { padding-block: var(--espace-12); }
@media (min-width: 900px) { .portail-hero { padding-block: var(--espace-16); } }
.portail-hero .bw-hero__contenu { gap: var(--espace-4); }
.portail-bilan { display: inline-flex; align-items: center; gap: var(--espace-2); font-weight: 500; color: var(--encre-douce); }
.portail-bilan .ok { color: var(--sapin); }
.portail-bilan .ko { color: var(--brique); }

.portail-section { padding-block: var(--espace-8) var(--espace-16); }

/* ---------- Recherche et filtres ---------- */
.portail-outils { display: grid; gap: var(--espace-4); margin-bottom: var(--espace-4); }
@media (min-width: 900px) { .portail-outils { grid-template-columns: minmax(280px, 380px) 1fr; align-items: center; } }
.portail-recherche { position: relative; }
.portail-recherche > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--encre-douce); pointer-events: none; }
.portail-recherche .bw-saisie { padding-left: 40px; padding-right: 44px; }
.portail-recherche kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 18px; pointer-events: none; }
.portail-recherche .bw-saisie:focus ~ kbd, .portail-recherche .bw-saisie:not(:placeholder-shown) ~ kbd { display: none; }
.portail-recherche .bw-saisie::-webkit-search-cancel-button { cursor: pointer; }

.portail-filtres button.bw-etiquette { border: 0; cursor: pointer; font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; }
.portail-filtres button.bw-etiquette:hover { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.portail-filtres button.bw-etiquette[aria-pressed="true"] { background: var(--encre); color: var(--papier); }

.portail-compte { margin-bottom: var(--espace-6); min-height: 22px; }


.portail-vide { max-width: 560px; }

/* ---------- Cartes ---------- */
.portail-grille { align-items: stretch; }
.portail-carte { gap: var(--espace-2); }
.portail-carte .bw-carte__visuel { position: relative; margin-bottom: var(--espace-3); }
.portail-carte .bw-carte__visuel iframe { border: 0; background: var(--papier-creux); }
.portail-carte .bw-carte__visuel:not(.portail-visuel--interactif) iframe { pointer-events: none; }
/* Au-dessus du lien qui couvre la carte : ce qui a son propre geste */
.portail-visuel--interactif, .portail-favori, .portail-raccourcis { position: relative; z-index: 1; }

/* La couverture par défaut : le motif du kit, l'icône du projet */
.portail-couverture { position: relative; display: grid !important; place-items: center; background: var(--papier-creux); }
.portail-couverture img.portail-motif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.portail-couverture .portail-motif--sombre { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portail-couverture .portail-motif--clair { display: none; } :root:not([data-theme="light"]) .portail-couverture .portail-motif--sombre { display: block; opacity: .4; } }
:root[data-theme="dark"] .portail-couverture .portail-motif--clair { display: none; }
:root[data-theme="dark"] .portail-couverture .portail-motif--sombre { display: block; opacity: .4; }
.portail-couverture > i { position: relative; font-size: 44px; color: var(--sapin); }
.portail-couverture > img.portail-couverture__logo { position: relative; width: 72px !important; height: 72px !important; object-fit: contain; border-radius: var(--arrondi-m); }

.portail-carte__tete { display: flex; align-items: center; gap: var(--espace-3); }
.portail-carte__tete .bw-carte__titre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.portail-logo { width: 28px; height: 28px; border-radius: var(--arrondi-s); object-fit: contain; flex: none; }
.portail-favori {
  flex: none; width: 36px; height: 36px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-douce); cursor: pointer; display: grid; place-items: center;
}
.portail-favori:hover { background: var(--papier-creux); color: var(--encre); }
.portail-favori[aria-pressed="true"] { color: var(--rouge-gorge); }

.portail-accroche { font-weight: 500; }
.portail-description { font-size: 15px; line-height: 24px; color: var(--encre-douce);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.portail-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--espace-3); font-size: 14px; line-height: 22px; color: var(--encre-douce); }
.portail-statut { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.portail-statut--ok { color: var(--sapin); }
.portail-statut--perturbe, .portail-statut--panne { color: var(--brique); }
.portail-statut--inconnu { color: var(--encre-douce); font-weight: 500; }

.portail-raccourcis { display: flex; flex-wrap: wrap; gap: var(--espace-2); padding-top: var(--espace-2); }
.portail-raccourcis .bw-btn { padding: 5px 12px; font-size: 14px; }
.portail-raccourcis .bw-btn i { font-size: 13px; }

/* Chargement : la place des cartes, sans clignoter */
.portail-fantome { min-height: 340px; background: var(--papier-releve); border: 1px solid var(--trait); border-radius: var(--arrondi-m); }
@media (prefers-reduced-motion: no-preference) {
  .portail-fantome { animation: portail-respire 1.6s ease-in-out infinite; }
  @keyframes portail-respire { 50% { opacity: .55; } }
}

.portail-pied { margin-top: 0; padding-top: 0; border-top: 0; }
.bw-pied { padding-block: var(--espace-8); }