/* ================================================
   BeOut — Couche de composants
   ================================================

   Une recette par objet d'interface, écrite UNE fois.
   Les composants ne contiennent aucune valeur en dur : tout vient
   des jetons de variables.css. Changer de charte = changer les jetons,
   et tout suit — sans avoir à retrouver les vingt-trois endroits.

   Un élément ne décrit plus son apparence, il déclare son RÔLE :
       <button class="bo-btn bo-btn--primary">Recevoir le code</button>

   Ordre de chargement : variables.css → components.css → main.css
   (main.css ne garde que ce qui est propre à un écran précis.)
   ================================================ */


/* ═══════════════════════════════════════════════════════════════════
   SURFACE — tout ce qui flotte au-dessus de la carte
   ═══════════════════════════════════════════════════════════════════ */
.bo-surface {
    background: var(--bo-surface);
    border: 1px solid var(--color-bg-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-float);
}

/* Ombre resserrée, pour les surfaces posées dans un conteneur qui
   découpe (une rangée défilante, par exemple). */
.bo-surface--tight {
    box-shadow: 0 1px 2px rgba(26, 29, 22, 0.10),
                0 4px 10px rgba(26, 29, 22, 0.10);
}

/* Surface d'un panneau : posée sur la page, pas au-dessus de la carte. */
.bo-panel {
    background: var(--bo-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    box-shadow: 0 -2px 10px rgba(26, 29, 22, 0.09),
                0 -18px 44px rgba(26, 29, 22, 0.10);
}


/* ═══════════════════════════════════════════════════════════════════
   BOUTON — trois niveaux, un seul plein par vue (principe 3)
   ═══════════════════════════════════════════════════════════════════ */
.bo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bo-2);

    height: var(--touch-target);
    padding: 0 var(--bo-5);

    border: 1px solid transparent;
    border-radius: var(--bo-radius);

    font: 600 15px/1 "Outfit", sans-serif;
    letter-spacing: -.005em;
    text-align: center;
    white-space: nowrap;

    cursor: pointer;
    transition: background var(--bo-out) var(--bo-ease),
                border-color var(--bo-out) var(--bo-ease),
                color var(--bo-out) var(--bo-ease),
                transform var(--bo-out) var(--bo-ease);
}

/* ── Niveau 1 — un seul par écran, il porte l'intention ─────────── */
.bo-btn--primary {
    background: var(--bo-orange);
    color: var(--bo-on-orange);
    border-color: var(--bo-orange-deep);
    box-shadow: 0 1px 2px rgba(232, 93, 4, .25);
}
.bo-btn--primary:hover:not(:disabled)  { background: var(--bo-orange-hover); }
.bo-btn--primary:active:not(:disabled) { background: var(--bo-orange-deep); transform: scale(.97); }

/* ── Niveau 2 — deux au maximum, côte à côte, à parts égales ────── */
.bo-btn--secondary {
    background: transparent;
    color: var(--bo-ink);
    border-color: var(--bo-line-2);
}
.bo-btn--secondary:hover:not(:disabled) { background: var(--bo-surface-2); }

/* ── Niveau 3 — icônes légendées, quatre au plus ────────────────── */
.bo-btn--tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--bo-ink-3);
    font-weight: 500;
    font-size: 13px;
}
.bo-btn--tertiary:hover:not(:disabled) {
    background: var(--bo-surface-2);
    color: var(--bo-ink);
}

/* ── Destructif — brique, jamais orange ─────────────────────────── */
.bo-btn--danger {
    background: var(--bo-brick);
    color: #FFFFFF;
    border-color: var(--bo-brick-deep);
}
.bo-btn--danger:hover:not(:disabled) { background: var(--bo-brick-deep); }

/* Variante sobre : action destructive secondaire (déconnexion). */
.bo-btn--danger-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--bo-ink-3);
    font-weight: 500;
}
.bo-btn--danger-quiet:hover:not(:disabled) {
    background: var(--bo-brick-wash);
    color: var(--bo-brick);
}

.bo-btn:disabled,
.bo-btn[aria-disabled="true"] {
    background: var(--bo-surface-2);
    color: var(--bo-ink-3);
    border-color: var(--bo-line);
    box-shadow: none;
    cursor: not-allowed;
}

.bo-btn:focus-visible {
    outline: 2px solid var(--bo-ink);
    outline-offset: 2px;
}

.bo-btn--sm {
    height: 36px;
    padding: 0 var(--bo-3);
    font-size: 13px;
    border-radius: var(--bo-radius-control);
}

.bo-btn--block { display: flex; width: 100%; }


/* ═══════════════════════════════════════════════════════════════════
   BOUTON ICÔNE — carré, cible tactile pleine
   ═══════════════════════════════════════════════════════════════════ */
.bo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--touch-target);
    height: var(--touch-target);
    flex: none;
    padding: 0;

    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    color: var(--color-text-muted);

    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--duration-out) var(--ease),
                border-color     var(--duration-out) var(--ease),
                color            var(--duration-out) var(--ease);
}

.bo-icon-btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-heading);
}

/* Posé sur la carte : il lui faut sa propre surface. */
.bo-icon-btn--floating {
    background: var(--bo-surface);
    border-color: var(--color-bg-border);
    box-shadow: var(--shadow-float);
    color: var(--color-text-secondary);
}
.bo-icon-btn--floating:hover {
    background: var(--bo-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-heading);
}

/* Actif : ambre, comme toute intention en cours. */
.bo-icon-btn--on {
    background: var(--bo-orange);
    border-color: var(--bo-orange-deep);
    color: var(--bo-on-orange);
}
.bo-icon-btn--on:hover {
    background: var(--bo-orange-hover);
    color: var(--on-amber);
}

.bo-icon-btn--danger:hover {
    background: var(--clay-wash);
    color: var(--clay);
}

.bo-icon-btn--sm {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
}


/* ═══════════════════════════════════════════════════════════════════
   CHAMP DE SAISIE
   ═══════════════════════════════════════════════════════════════════ */
/* La charte impose 16 px minimum : en dessous, iOS zoome à la saisie.
   Et une étiquette AU-DESSUS, jamais un simple placeholder — il
   disparaît dès la première frappe. */
.bo-field {
    width: 100%;
    min-height: var(--touch-target);
    padding: 0 14px;

    background: var(--bo-surface);
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-control);

    font: 400 16px/1.5 "Outfit", sans-serif;
    color: var(--bo-ink);
    outline: none;

    transition: border-color var(--bo-out) var(--bo-ease),
                box-shadow   var(--bo-out) var(--bo-ease);
}

.bo-field::placeholder { color: var(--color-text-placeholder); }

.bo-field:focus {
    border-color: var(--bo-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .22);
}

.bo-field:disabled {
    background: var(--bo-surface-2);
    color: var(--bo-ink-3);
}

/* Groupe étiquette + champ + message */
.bo-field-group { display: flex; flex-direction: column; gap: 6px; }
.bo-field-group > label {
    font: 600 12.5px/1.4 "Outfit", sans-serif;
    color: var(--bo-ink-2);
}

/* L'erreur est SOUS le champ et dit quoi faire. */
.bo-field__hint {
    font: 400 12.5px/1.4 "Outfit", sans-serif;
    color: var(--bo-ink-3);
    margin: 0;
}
.bo-field--error .bo-field,
.bo-field--error input {
    border-color: var(--bo-brick);
    background: var(--bo-brick-wash);
}
.bo-field--error .bo-field__hint { color: var(--bo-brick); }

/* Saisie d'un code : chiffres espacés, on vérifie d'un coup d'œil. */
.bo-field--code {
    text-align: center;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-size: 20px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
   PASTILLE
   ═══════════════════════════════════════════════════════════════════ */
.bo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;

    min-height: 36px;
    padding: 0 14px;

    background: var(--bo-surface);
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-pill);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);

    font: 500 13px/1 "Outfit", sans-serif;
    color: var(--bo-ink-2);
    white-space: nowrap;
    cursor: pointer;

    transition: background var(--bo-out) var(--bo-ease),
                border-color var(--bo-out) var(--bo-ease),
                color var(--bo-out) var(--bo-ease);
}

.bo-chip:hover { border-color: var(--bo-line-2); color: var(--bo-ink); }

/* Actif = encre pleine, PAS orange : l'orange reste l'intention. */
.bo-chip--active,
.bo-chip[aria-pressed="true"] {
    background: var(--bo-ink);
    border-color: var(--bo-ink);
    color: var(--bo-paper);
    font-weight: 600;
}

/* ── BADGE — jamais cliquable. Un badge cliquable est une pastille. */
.bo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--bo-radius-pill);
    font: 600 11.5px/1 "Outfit", sans-serif;
    background: var(--bo-surface-2);
    color: var(--bo-ink-2);
    cursor: default;
    text-transform: capitalize;
}
/* Seuls les badges de VERDICT portent sauge ou brique.
   Un badge de catégorie est toujours neutre. */
.bo-badge--good { background: var(--bo-sage-wash);   color: var(--bo-sage); }
.bo-badge--bad  { background: var(--bo-brick-wash);  color: var(--bo-brick); }
.bo-badge--todo { background: var(--bo-orange-wash); color: var(--bo-orange-fort);
                  border: 1px solid var(--bo-orange-soft); }

/* Alias : l'étiquette de catégorie est un badge neutre. */
.bo-chip--static {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--bo-radius-pill);
    font: 600 11.5px/1 "Outfit", sans-serif;
    background: var(--bo-surface-2);
    color: var(--bo-ink-2);
    border: none;
    box-shadow: none;
    cursor: default;
    text-transform: capitalize;
}

/* Compteur : un nombre, pas un mot. */
.bo-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;
    padding: 0 0.45rem;

    background: var(--color-bg-subtle);
    border-radius: var(--border-radius-pill);

    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}
.bo-count--intent   { background: var(--bo-orange-wash); color: var(--bo-orange-fort); }
.bo-count--achieved { background: var(--bo-sage-wash);  color: var(--bo-sage); }
.bo-count--alert    { background: var(--bo-brick);      color: #FFFFFF; }