/* ─────────────────────────────────────────────────────────────
   Bannières et éléments propres à l'organisation (espace partagé).

   La bannière « connexion perdue » est vue par TOUS les membres, y compris
   ceux qui ne peuvent pas la réparer : elle doit informer sans culpabiliser,
   d'où un ton avertissement et non erreur.
   ───────────────────────────────────────────────────────────── */

.org-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 18px auto 0;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}

.org-banner--warn {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .32);
    color: var(--text, #1f2937);
}

.org-banner__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #d97706;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.org-banner__body { flex: 1; min-width: 0; }

.org-banner__title {
    margin: 0 0 6px;
    font-weight: 600;
    color: #b45309;
}

.org-banner__list {
    margin: 0 0 8px;
    padding-left: 18px;
    color: var(--muted, #6b7280);
}

.org-banner__list li { margin-bottom: 2px; word-break: break-word; }

.org-banner__hint {
    margin: 0;
    color: var(--muted, #6b7280);
}

.org-banner__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: 8px;
    background: #d97706;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s;
}

.org-banner__cta:hover { background: #b45309; }

@media (max-width: 640px) {
    .org-banner {
        margin: 12px;
        padding: 14px;
        font-size: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Écrans « pleine page » de l'espace partagé : invitation en attente,
   accès révoqué, atterrissage d'un lien d'invitation.

   Ces pages vivaient sur des <style> en ligne qui utilisaient .btn,
   .btn-primary et .btn-ghost — or .btn et .btn-ghost n'existent nulle part
   dans le projet, et .btn-primary n'est défini que dans contact.css,
   demo.css et home.css, qu'aucune de ces pages ne charge. Les boutons
   sortaient donc bruts, sans aucun style.

   Tout est bâti sur les tokens de variables.css, chargé partout comme ce
   fichier : le rendu suit la charte sans dépendre d'une feuille de page.
   ───────────────────────────────────────────────────────────── */

.orgc-page {
    max-width: 560px;
    margin: 64px auto;
    padding: 0 20px;
}

.orgc-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, rgba(15, 14, 26, .08));
    border-radius: var(--radius, 14px);
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 14, 26, .04), 0 8px 24px rgba(15, 14, 26, .06);
}

.orgc-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: var(--radius-sm, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* --color-primary-light est un violet PLUS CLAIR (#7B6FE8), pas un fond
       teinté : l'utiliser donnait une icône violette sur un carré violet plein.
       --color-primary-glow est le token prévu pour ça (violet à 15 %). */
    background: var(--color-primary-glow, rgba(91, 75, 219, .15));
}

.orgc-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--color-primary, #6366f1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Accès révoqué : ton avertissement, pas erreur — la personne n'a rien fait de mal. */
.orgc-icon--warn { background: rgba(245, 158, 11, .12); }
.orgc-icon--warn svg { stroke: #b45309; }

.orgc-title {
    margin: 0 0 10px;
    font-family: var(--font-display, inherit);
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--color-text-primary, var(--text));
}

.orgc-lead {
    margin: 0 0 24px;
    color: var(--color-text-secondary, var(--muted));
    line-height: 1.6;
    font-size: .95rem;
}

.orgc-strong { font-weight: 700; color: var(--color-text-primary, var(--text)); }

.orgc-mail {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    border-radius: var(--radius-xs, 8px);
    background: var(--color-primary-glow, rgba(91, 75, 219, .15));
    color: var(--color-primary-dark, var(--accent));
    font-size: .88rem;
    font-weight: 600;
    word-break: break-all;
}

/* Encart d'avertissement : conséquence irréversible annoncée AVANT le clic. */
.orgc-warn {
    display: flex;
    gap: 10px;
    text-align: left;
    margin-bottom: 24px;
    padding: 13px 15px;
    border-radius: var(--radius-xs, 10px);
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .25);
}

.orgc-warn svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: none;
    stroke: #b45309;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orgc-warn span {
    font-size: .82rem;
    line-height: 1.55;
    color: #92400e;
}

.orgc-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orgc-actions form { margin: 0; }

.orgc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs, 10px);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.orgc-btn:active { transform: translateY(1px); }

.orgc-btn--primary {
    background: var(--color-primary, var(--accent));
    color: #fff;
}

.orgc-btn--primary:hover { background: var(--color-primary-dark, #000); }

.orgc-btn--ghost {
    background: transparent;
    border-color: var(--color-border, rgba(15, 14, 26, .12));
    color: var(--color-text-primary, var(--text));
}

.orgc-btn--ghost:hover { background: var(--color-bg-subtle, rgba(15, 14, 26, .04)); }

.orgc-note {
    margin: 22px 0 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--color-text-secondary, var(--muted));
}

.orgc-note a { color: var(--color-primary, var(--accent)); }

@media (max-width: 560px) {
    .orgc-page { margin: 32px auto; }
    .orgc-card { padding: 26px 20px; }
}