/*
 * Ce que Bootstrap ne dit pas : ce que ces écrans veulent dire.
 *
 * Bootstrap porte la mise en page et les composants. Cette feuille ne porte
 * qu'une chose, le statut d'un site — la seule que ces écrans existent pour
 * rendre lisible. Aucune notification n'est émise (décision D9) : un site
 * silencieux doit donc se voir avant d'être lu, sans qu'on ait à parcourir la
 * ligne. D'où le filet de couleur en bordure de ligne, qui se repère à distance,
 * et la pastille qui le nomme pour qui ne distingue pas les couleurs.
 */

:root {
    --statut-ok: #1a7f37;
    --statut-late: #8a5a00;
    --statut-silent: #b42318;
    --statut-never-seen: #5c6670;
}

.ligne-site > td:first-child {
    border-left: 4px solid transparent;
}

.pastille-statut {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: .25rem;
    font-weight: 600;
    font-size: .8125rem;
    color: #fff;
    background: var(--statut-never-seen);
    white-space: nowrap;
}

.statut-ok > td:first-child { border-left-color: var(--statut-ok); }
.statut-ok .pastille-statut { background: var(--statut-ok); }

.statut-late > td:first-child { border-left-color: var(--statut-late); }
.statut-late .pastille-statut { background: var(--statut-late); }

.statut-silent > td:first-child { border-left-color: var(--statut-silent); }
.statut-silent .pastille-statut { background: var(--statut-silent); }

.statut-never_seen > td:first-child { border-left-color: var(--statut-never-seen); }

/* L'écran de connexion n'a rien à montrer : il se contente de ne pas être
   large. */
.carte-connexion {
    max-width: 24rem;
}

/* L'infobulle de l'écran d'inscription en collecte (PO-4). En CSS pur : ces
   écrans ne servent aucun JavaScript (CSP stricte, voir base.html.twig).
   Affichée au survol ET au focus du conteneur — ce second déclencheur est
   ce qui la rend atteignable au clavier, le bouton `?` étant lui-même
   focusable. */
.infobulle {
    position: relative;
    display: inline-block;
}

.infobulle [role="tooltip"] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 22rem;
    max-width: 80vw;
    margin-top: .35rem;
    padding: .6rem .75rem;
    border-radius: .375rem;
    background: #212529;
    color: #f8f9fa;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
}

.infobulle:hover [role="tooltip"],
.infobulle:focus-within [role="tooltip"] {
    display: block;
}

/* La carte du formulaire d'inscription : une largeur bornée, pas plus. */
.carte-inscription {
    max-width: 32rem;
}