/**
 * ACO — Pastilles d'état
 *
 * SOURCE UNIQUE des couleurs d'état de toute la plateforme : site public,
 * panier et tunnel d'inscription, espace centre, espace chauffeur, back-office.
 *
 * Avant la 1.204.0, le même état s'affichait dans des couleurs différentes
 * selon l'écran : « Complet » existait en quatre rouges, « Précommande » en
 * quatre traitements, « À la une » en bleu plein sur la liste et en ambre dans
 * le carrousel de la même page. Les valeurs étaient écrites en dur, souvent en
 * style inline, dans une quinzaine de fichiers.
 *
 * Règle : une pastille = un TON parmi les sept ci-dessous. Aucune couleur
 * d'état ne doit plus être écrite ailleurs. Pour changer une couleur partout,
 * on change une variable ici.
 */

:root,
.acofr,
.acosh {
    /* Fait, disponible, payé, publié */
    --aco-et-ok-bg: #E4F4EA;
    --aco-et-ok-fg: #1E7C43;
    --aco-et-ok-bd: #BFE3CD;

    /* En attente, stock bas, brouillon, à faire */
    --aco-et-wait-bg: #FFF4E0;
    --aco-et-wait-fg: #B45309;
    --aco-et-wait-bd: #F0D9A8;

    /* Précommande — le violet de l'espace centre, étendu au site et au panier */
    --aco-et-pre-bg: #F0ECFB;
    --aco-et-pre-fg: #6D4BC9;
    --aco-et-pre-bd: #DCD0F4;

    /* Complet, annulé, supprimé */
    --aco-et-ko-bg: #FCEBEB;
    --aco-et-ko-fg: #A32D2D;
    --aco-et-ko-bd: #F3C9C9;

    /* Information, en cours de traitement, catégorie */
    --aco-et-info-bg: #EAF2F8;
    --aco-et-info-fg: #2B6CA3;
    --aco-et-info-bd: #CFE0EF;

    /* Neutre : au centre, terminé, dupliqué */
    --aco-et-neutre-bg: #EEF2F5;
    --aco-et-neutre-fg: #5C6B77;
    --aco-et-neutre-bd: #DCE3E9;

    /* Dernière minute — urgence, distincte de « À la une » (ambre) et de
       « Complet » (rouge sourd) */
    --aco-et-last-bg: #FDECEC;
    --aco-et-last-fg: #B42318;
    --aco-et-last-bd: #F5C2C0;
}

/* Géométrie commune. Une seule forme : pilule, filet, 12px/700. */
.aco-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
    vertical-align: middle;
}
.aco-pastille svg { flex-shrink: 0; }

.aco-pastille--ok     { background: var(--aco-et-ok-bg);     color: var(--aco-et-ok-fg);     border-color: var(--aco-et-ok-bd); }
.aco-pastille--wait   { background: var(--aco-et-wait-bg);   color: var(--aco-et-wait-fg);   border-color: var(--aco-et-wait-bd); }
.aco-pastille--pre    { background: var(--aco-et-pre-bg);    color: var(--aco-et-pre-fg);    border-color: var(--aco-et-pre-bd); }
.aco-pastille--ko     { background: var(--aco-et-ko-bg);     color: var(--aco-et-ko-fg);     border-color: var(--aco-et-ko-bd); }
.aco-pastille--info   { background: var(--aco-et-info-bg);   color: var(--aco-et-info-fg);   border-color: var(--aco-et-info-bd); }
.aco-pastille--neutre { background: var(--aco-et-neutre-bg); color: var(--aco-et-neutre-fg); border-color: var(--aco-et-neutre-bd); }
.aco-pastille--last   { background: var(--aco-et-last-bg);   color: var(--aco-et-last-fg);   border-color: var(--aco-et-last-bd); }

/* Variante « texte seul » : même couleur de ton, sans fond ni filet. Sert aux
   endroits où une pastille pleine surchargerait la ligne (compteur de places
   dans une liste dense, mention sous un bouton). */
.aco-etat-txt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.aco-etat-txt--ok     { color: var(--aco-et-ok-fg); }
.aco-etat-txt--wait   { color: var(--aco-et-wait-fg); }
.aco-etat-txt--pre    { color: var(--aco-et-pre-fg); }
.aco-etat-txt--ko     { color: var(--aco-et-ko-fg); }
.aco-etat-txt--info   { color: var(--aco-et-info-fg); }
.aco-etat-txt--neutre { color: var(--aco-et-neutre-fg); }

/* Pastille de mode de paiement : même famille, largeur calée pour que les
   lignes d'une liste s'alignent. */
.aco-pastille--mode { min-width: 112px; justify-content: center; }

@media (max-width: 640px) {
    .aco-pastille { font-size: 11px; padding: 3px 8px; }
    .aco-pastille--mode { min-width: 96px; }
}