/* ════════════════════════════════════════════════════════════════
   EDUCATED — Bandeau « Session de soutenance »
   Fichier : wwwroot/css/educated-defense-banner.css
   À charger APRÈS le bundle DevExpress et educated-design-tokens.css

   Aligné sur les tokens V6 : Geist, indigo #4F46E5, rayons 12px.
   Le bandeau occupe la largeur de son conteneur dans le detail view.
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  STRUCTURE                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-ds-banner {
    font-family: var(--font-body, "Geist", "Public Sans", system-ui, sans-serif);
    display: flex;
    align-items: center;
    /* Le bandeau vit dans un layout XAF dont on ne maîtrise pas la largeur :
       il doit se replier proprement plutôt que d'écraser son contenu. */
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--line, #E5E7EB);
    background: var(--surface-1, #fff);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    /* Barre d'accent à gauche : c'est elle qui porte la couleur d'état */
    border-left: 3px solid var(--edu-ds-accent, #94A3B8);
    transition: box-shadow 140ms var(--ease-std, cubic-bezier(.4,0,.2,1));
}

    .edu-ds-banner:hover {
        box-shadow: 0 2px 8px rgba(15,23,42,.07);
    }


/* ── Icône ────────────────────────────────────────────────────── */
.edu-ds-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0;
    background: var(--edu-ds-soft, #F1F5F9);
    color: var(--edu-ds-accent, #94A3B8);
}

    .edu-ds-icon svg {
        display: block;
        width: 19px;
        height: 19px;
    }


/* ── Corps ────────────────────────────────────────────────────── */
.edu-ds-body {
    /* La base de 200px avec flex-wrap fait passer le bouton à la ligne
       AVANT que le texte ne soit comprimé. Sans elle, le texte se replie
       caractère par caractère dans une colonne étroite. */
    flex: 1 1 200px;
    min-width: 150px;
}

.edu-ds-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.edu-ds-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--edu-ds-accent, #64748B);
}

.edu-ds-chip {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--edu-ds-soft, #F1F5F9);
    color: var(--edu-ds-accent, #64748B);
    white-space: nowrap;
}

.edu-ds-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-0, #0F172A);
    letter-spacing: -0.015em;
    line-height: 1.35;
    /* Deux lignes maximum, puis ellipse. Jamais de nowrap : dans un
       conteneur étroit, il produisait une colonne d'une lettre. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.edu-ds-detail {
    font-size: 12.5px;
    color: var(--ink-2, #64748B);
    line-height: 1.4;
    margin-top: 1px;
    overflow-wrap: anywhere;
}


/* ── Bandeau de confirmation ──────────────────────────────────── */
.edu-ds-confirm {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--brand-2, #4338CA);
    overflow-wrap: anywhere;
}


/* ── Actions ──────────────────────────────────────────────────── */
.edu-ds-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Repliée sur sa propre ligne, la zone d'action occupe toute la
       largeur — le bouton devient pleine largeur, pas un bouton flottant. */
    margin-left: auto;
}

    .edu-ds-banner > .edu-ds-actions:only-child,
    .edu-ds-actions:not(:first-child) {
        min-width: 0;
    }

.edu-ds-btn {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 9px 15px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 90ms ease, box-shadow 90ms ease, transform 90ms ease;
}

    .edu-ds-btn:active {
        transform: translateY(.5px);
    }

    .edu-ds-btn:focus-visible {
        outline: 2px solid var(--brand, #4F46E5);
        outline-offset: 2px;
    }

.edu-ds-btn-primary {
    background: var(--gradient-brand, linear-gradient(135deg, #5955FF 0%, #4338CA 100%));
    color: #fff;
    box-shadow: var(--sh-brand, 0 4px 14px rgba(79,70,229,.32));
}

    .edu-ds-btn-primary:hover {
        box-shadow: 0 6px 18px rgba(79,70,229,.4);
    }

.edu-ds-btn-ghost {
    background: transparent;
    color: var(--ink-2, #64748B);
    border-color: var(--line, #E5E7EB);
}

    .edu-ds-btn-ghost:hover {
        background: var(--surface-2, #F8FAFC);
        color: var(--ink-0, #0F172A);
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  ÉTATS — une seule variable pilote la couleur                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Session ouverte : couleur de marque, c'est l'appel à l'action */
.edu-ds-banner.edu-ds-open {
    --edu-ds-accent: var(--brand, #4F46E5);
    --edu-ds-soft: var(--brand-soft, #EEEAFF);
    background: linear-gradient(100deg, var(--brand-soft, #EEEAFF) 0%, var(--surface-1, #fff) 42%);
}

/* Session retenue : vert de confirmation, plus discret */
.edu-ds-banner.edu-ds-selected {
    --edu-ds-accent: var(--success, #059669);
    --edu-ds-soft: var(--success-soft, #D1FAE5);
}

/* À venir : ambre, informatif sans être alarmant */
.edu-ds-banner.edu-ds-upcoming {
    --edu-ds-accent: var(--warning, #D97706);
    --edu-ds-soft: var(--warning-soft, #FEF3C7);
}

/* Verrouillé / clos / aucune : gris neutre, le bandeau s'efface */
.edu-ds-banner.edu-ds-locked,
.edu-ds-banner.edu-ds-closed,
.edu-ds-banner.edu-ds-none {
    --edu-ds-accent: #94A3B8;
    --edu-ds-soft: #F1F5F9;
    background: var(--surface-2, #F8FAFC);
}

    .edu-ds-banner.edu-ds-locked .edu-ds-title,
    .edu-ds-banner.edu-ds-closed .edu-ds-title,
    .edu-ds-banner.edu-ds-none .edu-ds-title {
        font-weight: 500;
        color: var(--ink-1, #334155);
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — sous 620px, la pile verticale                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 620px) {
    .edu-ds-actions {
        flex: 1 1 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .edu-ds-btn {
        width: 100%;
        text-align: center;
    }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CONTENEUR ÉTROIT — requête de conteneur                      ║
   ║  Les media queries mesurent la fenêtre, pas la colonne XAF :  ║
   ║  dans un layout à deux colonnes, l'écran est large alors que  ║
   ║  le bandeau est étroit. La requête de conteneur mesure la     ║
   ║  vraie largeur disponible.                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-ds-banner {
    container-type: inline-size;
    container-name: edu-ds;
}

@container edu-ds (max-width: 460px) {
    .edu-ds-actions {
        flex: 1 1 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .edu-ds-btn {
        width: 100%;
        text-align: center;
    }
}

@container edu-ds (max-width: 300px) {
    .edu-ds-icon {
        display: none;   /* sous 300px, l'icône vole de la place au texte */
    }

    .edu-ds-head {
        flex-wrap: wrap;
    }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  5. MOTIF DE REFUS                                            ║
   ║  Affiché sous le bandeau, pas à sa place : l'étudiant garde    ║
   ║  la session sous les yeux pendant qu'il lit ce qui manque.     ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-ds-error {
    font-family: var(--font-body, "Geist", "Public Sans", system-ui, sans-serif);
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--danger-soft, #FCDCE5);
    border-left: 3px solid var(--danger, #E11D48);
    background: color-mix(in srgb, var(--danger-soft, #FCDCE5) 45%, #fff);
    box-sizing: border-box;
    width: 100%;
    animation: edu-ds-err-in 160ms var(--ease-std, cubic-bezier(.4,0,.2,1)) both;
}

@keyframes edu-ds-err-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.edu-ds-error-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--danger, #E11D48);
    margin-bottom: 4px;
}

.edu-ds-error-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-1, #334155);
    overflow-wrap: anywhere;
}


/* ════════════════════════════════════════════════════════════════
   FIN educated-defense-banner.css
   ════════════════════════════════════════════════════════════════ */