/* ==========================================================================
   ÉCRAN — COMMANDE AU COMPTOIR, SUR TABLETTE (script 1367)

   Sa propre feuille, comme le veut la charte : un écran ajouté à la queue de
   modele-erp.css entre en conflit avec tous les autres sur la dernière ligne
   du fichier et sur la clé de cache, jamais sur le fond.

   CE N'EST NI /caisse NI /caisse/salle, ET LA DIFFÉRENCE EST PHYSIQUE
     /caisse est pensé pour un CLAVIER, une douchette et un tiroir : trois
     colonnes, un pavé numérique, des raccourcis, une densité réglable. Le plan
     de salle est pensé pour un serveur qui MARCHE, avec des tuiles qu'on
     retrouve de loin.

     Une tablette posée sur le passe n'a ni clavier ni recul : elle a un pouce,
     à trente centimètres, et souvent une main occupée. Trois conséquences, qui
     expliquent presque toutes les valeurs de cette feuille :

       — DEUX colonnes seulement, catalogue et commande. La troisième du
         comptoir (le pavé de paiement) devient une feuille montante, qui ne
         coûte rien quand on ne paie pas ;
       — un SEUL geste d'engagement par état : « Encaisser » quand on compose,
         « Valider » quand on paie. Jamais deux boutons pleins côte à côte ;
       — 96 px pour une tuile d'article, 56 px pour tout le reste — au-dessus
         de la règle des 44 px (docs/cibles-tactiles.md), parce qu'ici on vise
         vite et sans regarder.

   LES JETONS --cai-* VIENNENT DE caisse.css, où .comptoir-plein-ecran est
   déclaré avec les autres plein-écrans du POS. Une seule source de vérité pour
   la charte du poste — les recopier avait déjà coûté une divergence à la caisse
   mobile.

   AUCUN :hover, AUCUNE TRANSITION
     Règle d'origine du POS : pas de souris, et un retour qui doit être
     instantané. On utilise :active, qui correspond au doigt posé.
   ========================================================================== */

/* ==========================================================================
   §1 — PLEIN ÉCRAN
   ========================================================================== */

.comptoir-plein-ecran {
    /* La colonne de la commande. En dessous de 320 px un libellé de plat se
       coupe ; au-dessus de 420 px le catalogue perd une colonne de tuiles. */
    --cpt-commande: 380px;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cai-fond);
    color: var(--cai-texte);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Un double appui rapide ne doit pas zoomer : le geste du caissier pressé. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

/* ==========================================================================
   §2 — BANDEAU
   Plus maigre que celui du comptoir : le poste, la session, l'heure. Une
   tablette de prise de commande n'a que faire du point de vente ni du caissier.
   ========================================================================== */

.cpt-bandeau {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
    background: var(--cai-surface);
    border-bottom: 1px solid var(--cai-bord);
}

.cpt-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cpt-lieu {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.cpt-lieu span {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpt-lieu em {
    font-style: normal;
    font-size: 0.68rem;
    color: var(--cai-texte-faible);
}

.cpt-sep { flex: 1 1 auto; }

/* L'état de la session commande tout : sans session ouverte, une commande se
   compose mais ne s'encaisse pas. Le dire ICI évite au caissier de le découvrir
   le client devant lui. */
.cpt-session {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--cai-bord);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--cai-texte-faible);
    text-decoration: none;
}

.cpt-session.off {
    color: var(--cai-danger);
    border-color: var(--cai-danger);
}

.cpt-session.off .et-pastille { background: var(--cai-danger); }

.cpt-outil {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.7rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cpt-outil:active { background: var(--cai-bord); }

.cpt-horloge {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 800;
}

/* ==========================================================================
   §3 — LE CORPS : CATALOGUE À GAUCHE, COMMANDE À DROITE
   ========================================================================== */

.cpt-corps {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr var(--cpt-commande);
    min-height: 0;
}

.cpt-catalogue {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--cai-bord);
}

/* ---- Familles ---- */
.cpt-familles {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--cai-bord);
}

.cpt-famille {
    min-height: 44px;
    padding: 0 0.9rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.cpt-famille:active { background: var(--cai-bord); }

.cpt-famille.actif {
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

/* ---- Recherche ---- */
.cpt-recherche {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0.6rem 0;
    padding: 0 0.6rem;
    min-height: 48px;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    color: var(--cai-texte-faible);
}

.cpt-recherche input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cai-texte);
    font-size: 0.95rem;
}

/* ---- Tuiles d'article ----
   96 px de haut : au-dessus de la règle des 44 px, parce qu'ici on vise vite,
   sans regarder, et souvent d'une seule main. */
.cpt-articles {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    align-content: start;
}

.cpt-article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.3rem;
    min-height: 96px;
    padding: 0.6rem;
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    text-align: left;
}

.cpt-article:active { background: var(--cai-surface-2); }
.cpt-article:disabled { opacity: 0.5; }

.cpt-article-lib {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;

    /* Deux lignes, puis on coupe : un libellé de six lignes ferait grandir sa
       tuile et casserait l'alignement de toute la grille. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cpt-article-prix {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cai-accent);
}

/* ---- La rupture du jour (script 1368) ----
   La tuile est BARRÉE, pas éteinte : elle reste cliquable, parce qu'il reste des
   cas légitimes — la portion mise de côté, le plat refait en deux minutes. Le
   refus appartient au serveur d'application, et seulement si le gérant l'a réglé
   ainsi. Ce n'est pas non plus le stock : un plat du jour n'en a pas. */
.cpt-article.epuise { opacity: 0.62; }
.cpt-article.epuise .cpt-article-lib { text-decoration: line-through; }

.cpt-article-rupture {
    align-self: stretch;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--cai-texte);
    color: var(--cai-fond);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

/* Ce qu'il reste est un décompte, pas une alerte. */
.cpt-article-rupture.reste {
    background: var(--cai-bord);
    color: var(--cai-texte-faible);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* ==========================================================================
   §4 — LA COMMANDE EN COURS
   ========================================================================== */

.cpt-commande {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cai-surface);
}

/* Sur place / à emporter, posé AVANT l'encaissement : c'est ce qui coiffe le
   bon en cuisine, et un burger à emporter ne se dresse pas comme un burger en
   salle. */
.cpt-modes {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--cai-bord);
}

.cpt-mode {
    flex: 1 1 0;
    min-height: 48px;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

.cpt-mode:active { background: var(--cai-bord); }

.cpt-mode.actif {
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

.cpt-lignes {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cpt-ligne {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
}

.cpt-ligne-corps { min-width: 0; }

.cpt-ligne-lib {
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpt-ligne-detail {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

.cpt-ligne-qte {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.cpt-pas {
    width: 44px;
    height: 44px;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.cpt-pas:active { background: var(--cai-bord); }

.cpt-ligne-total {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.cpt-retirer {
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--cai-texte-faible);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
}

.cpt-retirer:active { color: var(--cai-danger); }

/* ---- Pied : le total et le seul geste d'engagement ---- */
.cpt-pied {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.6rem;
    border-top: 1px solid var(--cai-bord);
}

.cpt-total {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.cpt-total-l {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cai-texte-faible);
}

/* La devise descend sous la valeur : dans une colonne de 380 px, « 236 900 XAF »
   sur une seule ligne déborde dès qu'un service chargé fait sept chiffres. */
.cpt-total-v {
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cai-accent);
}

.cpt-total-s {
    font-size: 0.68rem;
    color: var(--cai-texte-faible);
}

.cpt-vider {
    min-height: var(--cai-action-h);
    padding: 0 1rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte-faible);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

.cpt-encaisser {
    min-height: var(--cai-encaisser-h);
    padding: 0 1.4rem;
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.15rem;
    font-weight: 800;
}

.cpt-encaisser:active { filter: brightness(1.15); }

.cpt-encaisser:disabled {
    background: var(--cai-bord);
    color: var(--cai-texte-faible);
}

/* ==========================================================================
   §5 — LA BANDE « À RENDRE »

   Sans elle, le numéro distribué au client n'existerait nulle part une fois le
   ticket imprimé : le comptoir ne saurait plus qui appeler. Elle reste donc
   VISIBLE en permanence, et non derrière un onglet.
   ========================================================================== */

.cpt-file {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: var(--cai-surface);
    border-top: 1px solid var(--cai-bord);
    overflow-x: auto;
}

.cpt-file-t {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.cpt-file-vide {
    font-size: 0.78rem;
    color: var(--cai-texte-faible);
}

.cpt-jeton {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    white-space: nowrap;
}

/* PRÊT est la seule couleur de cette bande : c'est le seul état qui appelle un
   geste — crier le numéro. Peindre aussi « en cours » ferait de la bande un
   décor qu'on cesse de lire. */
.cpt-jeton.pret {
    border-color: var(--cai-valider);
    background: var(--cai-surface-2);
}

.cpt-jeton-n {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cpt-jeton.pret .cpt-jeton-n { color: var(--cai-valider); }

.cpt-jeton-e {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
}

.cpt-jeton-m {
    font-size: 0.66rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   §6 — FEUILLES MONTANTES : PAIEMENT, PUIS NUMÉRO D'APPEL
   ========================================================================== */

.cpt-feuille-fond {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--cai-voile);
}

.cpt-feuille {
    width: min(520px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cai-modale);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 8px;
    box-shadow: var(--cai-modale-ombre);
    overflow: hidden;
}

.cpt-feuille-tete {
    flex: 0 0 auto;
    padding: 0.8rem 1rem;
    background: var(--cai-modale-entete);
    color: #fff;
}

.cpt-feuille-titre {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cpt-feuille-sous {
    font-size: 0.75rem;
    opacity: 0.85;
}

.cpt-feuille-corps {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9rem 1rem;
}

.cpt-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
    margin-bottom: 0.25rem;
}

.cpt-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cpt-chip {
    min-height: 48px;
    padding: 0 0.9rem;
    background: var(--cai-modale-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

.cpt-chip:active { filter: brightness(1.1); }

.cpt-chip.actif {
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

.cpt-champ {
    width: 100%;
    min-height: 52px;
    padding: 0 0.7rem;
    background: var(--cai-modale-creux);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Le pavé de saisie du montant remis ----
   Un pavé, et non un <input type="number"> : sur une tablette, le clavier
   système couvrirait la moitié de l'écran — dont le montant à rendre, qui est
   la seule chose que le caissier regarde en tapant. */
.cpt-remis {
    padding: 0.5rem 0.7rem;
    background: var(--cai-modale-creux);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 1.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cpt-remis span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cai-texte-faible);
    margin-left: 0.3rem;
}

/* Les coupures usuelles S'AJOUTENT : un client donne un billet de 5 000 et deux
   de 1 000, et le caissier tape ce qu'il reçoit dans l'ordre où il le reçoit. */
.cpt-billets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.cpt-pave {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.cpt-touche {
    min-height: 56px;
    background: var(--cai-modale-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cpt-touche:active { filter: brightness(1.15); }

.cpt-touche.efface {
    grid-column: 1 / -1;
    color: var(--cai-texte-faible);
    font-size: 1.1rem;
}

/* Le rendu est CALCULÉ, jamais saisi : un rendu écrit à la main est un rendu
   qu'on peut se tromper d'écrire, et il fausse alors les espèces théoriques de
   la clôture (script 1365). */
.cpt-rendu {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--cai-modale-creux);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cpt-rendu.manque {
    border-color: var(--cai-danger);
    color: var(--cai-danger);
}

.cpt-feuille-pied {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--cai-modale-bord);
}

.cpt-annuler {
    min-height: var(--cai-action-h);
    padding: 0 1.2rem;
    background: transparent;
    color: var(--cai-texte-faible);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
}

.cpt-valider {
    min-height: var(--cai-encaisser-h);
    padding: 0 1.6rem;
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 800;
}

.cpt-valider:active { filter: brightness(1.15); }

.cpt-valider:disabled {
    background: var(--cai-modale-bord);
    color: var(--cai-texte-faible);
}

/* ---- Le numéro d'appel ----
   C'est le seul écran du POS où un chiffre occupe la moitié de la surface. Il
   est lu à voix haute, souvent de dos, parfois recopié sur une étiquette : le
   lire de travers envoie un client chercher la commande d'un autre. */
.cpt-appel {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.6rem 1.2rem;
    background: var(--cai-modale);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 8px;
    box-shadow: var(--cai-modale-ombre);
    text-align: center;
}

.cpt-appel-l {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.cpt-appel-n {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--cai-valider);
}

.cpt-appel-s {
    font-size: 0.85rem;
    color: var(--cai-texte-faible);
}

.cpt-appel-t {
    font-size: 0.72rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

/* Une cuisine muette ne détruit pas la vente : le ticket est acquis, et l'échec
   se dit ici plutôt que de disparaître. */
.cpt-appel-avert {
    font-size: 0.75rem;
    color: var(--cai-danger);
}

.cpt-appel .cpt-valider { margin-top: 0.6rem; }

/* ==========================================================================
   §7 — LE VIDE
   Un catalogue filtré à rien et un panier vide ne sont pas des erreurs : ils
   sont l'état de départ. On les dit, on ne les alarme pas.
   ========================================================================== */

.cpt-vide {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--cai-texte-faible);
    font-size: 0.85rem;
}

.cpt-vide i { font-size: 1.8rem; opacity: 0.4; }
.cpt-vide.grand i { font-size: 2.6rem; }

/* ==========================================================================
   §8 — ÉCRANS PLUS PETITS

   Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue
   (docs/conventions-responsive.md). Rien de neuf ici : on descend d'une
   disposition à deux colonnes vers une seule, et la commande passe SOUS le
   catalogue — jamais l'inverse, puisque c'est le catalogue qu'on touche vingt
   fois pour la remplir une.
   ========================================================================== */

@media (max-width: 1024px) {
    .comptoir-plein-ecran { --cpt-commande: 320px; }

    .cpt-articles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 720px) {
    .cpt-corps {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .cpt-catalogue { border-right: none; border-bottom: 1px solid var(--cai-bord); }

    /* La commande garde de quoi montrer deux lignes et son total : plus bas,
       le caissier ne voit plus ce qu'il vient d'ajouter. */
    .cpt-commande { max-height: 52vh; }

    .cpt-lieu { display: none; }
}

@media (max-width: 560px) {
    .cpt-articles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    .cpt-total-v { font-size: 1.6rem; }
    .cpt-appel-n { font-size: 3.6rem; }
}