/*
 * Identite visuelle CheckAndProof.
 *
 * Posee par dessus Bootstrap, jamais a sa place. La charte demande un
 * rendu sobre et premium, pas du Bootstrap brut.
 */

:root {
    --cp-encre: #10151c;
    --cp-encre-douce: #5b6673;
    --cp-trait: #e4e8ee;
    --cp-fond: #ffffff;
    --cp-fond-doux: #f7f9fb;
    --cp-accent: #1f6feb;
    --cp-accent-sombre: #1a5fd0;

    --cp-vert: #157347;
    --cp-vert-fond: #eaf6ee;
    --cp-orange: #9a5b00;
    --cp-orange-fond: #fff5e6;
    --cp-rouge: #b42318;
    --cp-rouge-fond: #fdecea;
    --cp-neutre: #5b6673;
    --cp-neutre-fond: #f2f4f7;

    --bs-body-color: var(--cp-encre);
    --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-border-color: var(--cp-trait);
    --bs-link-color-rgb: 31, 111, 235;
    --bs-primary: var(--cp-accent);
}

body {
    background-color: var(--cp-fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    letter-spacing: -0.015em;
    font-weight: 650;
}

/* Boutons, sobres et sans gradient. */
.btn-primary {
    --bs-btn-bg: var(--cp-accent);
    --bs-btn-border-color: var(--cp-accent);
    --bs-btn-hover-bg: var(--cp-accent-sombre);
    --bs-btn-hover-border-color: var(--cp-accent-sombre);
}

.btn {
    --bs-btn-border-radius: .4rem;
    font-weight: 500;
}

/* Cartes, bordures fines et aucune ombre gratuite. */
.card {
    --bs-card-border-color: var(--cp-trait);
    --bs-card-border-radius: .6rem;
}

/* Verdicts. L accessibilite impose un texte, jamais la couleur seule. */
.verdict {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border-radius: .4rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.verdict::before {
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.verdict-vert { color: var(--cp-vert); background: var(--cp-vert-fond); border-color: #cde8d7; }
.verdict-orange { color: var(--cp-orange); background: var(--cp-orange-fond); border-color: #f3dcb8; }
.verdict-rouge { color: var(--cp-rouge); background: var(--cp-rouge-fond); border-color: #f5cfcb; }
.verdict-blanc { color: var(--cp-neutre); background: var(--cp-neutre-fond); border-color: var(--cp-trait); }

/* Signaux d une analyse. */
.signal {
    border-left: 3px solid var(--cp-trait);
    padding: .6rem .9rem;
    background: var(--cp-fond-doux);
    border-radius: 0 .4rem .4rem 0;
}

.signal-match { border-left-color: var(--cp-vert); }
.signal-mismatch { border-left-color: var(--cp-rouge); }
.signal-unknown { border-left-color: var(--cp-neutre); }

/* Cartes de synthese d un resultat. La couleur double toujours un
   texte, jamais l inverse : une couleur seule n est pas lisible par
   tout le monde. */
.synthese {
    border: 1px solid var(--cp-trait);
    border-left-width: 4px;
    border-radius: .5rem;
    padding: .85rem 1rem;
    background: var(--cp-fond);
    height: 100%;
}

.synthese-vert   { border-left-color: var(--cp-vert); }
.synthese-orange { border-left-color: var(--cp-orange); }
.synthese-rouge  { border-left-color: var(--cp-rouge); }
.synthese-blanc  { border-left-color: var(--cp-neutre); }

.synthese-titre {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cp-encre-douce);
    margin-bottom: .2rem;
}

.synthese-valeur {
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: .25rem;
}

/* Ce que l analyse n a pas pu etablir. Le trait discontinu dit
   l absence, la ou le trait plein d un signal dit l observation.
   Les deux ne doivent pas se confondre visuellement. */
.limite {
    border-left: 3px dashed var(--cp-trait);
    padding: .6rem .9rem;
    border-radius: 0 .4rem .4rem 0;
}

/* Bandeau d espace. */
.bandeau {
    background: var(--cp-encre);
    color: #fff;
}

.bandeau a { color: #a7c6ff; text-decoration: none; }
.bandeau a:hover { color: #fff; }

/* Densite maitrisee pour les ecrans metier. */
.file-curation {
    border: 1px solid var(--cp-trait);
    border-radius: .6rem;
    background: var(--cp-fond);
}

.texte-doux { color: var(--cp-encre-douce); }

.section-douce { background: var(--cp-fond-doux); }

/* Champs de recherche, Symfony UX Autocomplete.
   Le theme reprend les variables du projet plutot que le gris par
   defaut de la bibliotheque. */
.ts-control {
    border: 1px solid var(--cp-trait);
    border-radius: .375rem;
    padding: .25rem .5rem;
    font-size: .875rem;
    min-height: calc(1.5em + .5rem + 2px);
}

.ts-control:focus-within {
    border-color: var(--cp-encre);
    box-shadow: 0 0 0 .2rem rgba(13, 27, 62, .12);
}

.ts-dropdown { border-color: var(--cp-trait); font-size: .875rem; }

/* TomSelect s effondre a zero dans un conteneur flex, il lui faut une
   largeur de base. */
.champ-organisation { min-width: 16rem; }