/* ======================================================================
   myefarm.css — feuille de style principale
   ======================================================================
   Extrait de app/templates/base.html le 28/08/2026 (lot 0, refonte N3).
   Avant : ~1 225 lignes de CSS partaient DANS chaque page HTML, donc
   retelechargees a chaque navigation. Ici le navigateur les met en cache
   une fois pour toutes.

   Le lien porte ?v={{ css_version }} — le mtime du fichier, injecte par
   app/__init__.py. Le cache se casse tout seul a chaque modification :
   aucun numero a incrementer a la main.

   SPECIFICITE SPEED : speed decale les trois tons « papier » de la palette
   vers un bleu froid. Cet override reste INLINE dans le base.html de speed,
   juste apres ce fichier. Ne pas le rapatrier ici : les deux serveurs
   doivent partager un myefarm.css de md5 identique (audit de livraison).
   ====================================================================== */

        /* ===== Direction artistique "Terre" — palette ===== */
        :root{
            --parchemin:#EFE6D2;
            --sable:#E4D7B8;
            --sable-ligne:#D4C29B;
            --terre:#C15C34;
            --brique:#97381F;
            --olivier:#6B6A3B;
            --bistre:#2B2016;
            --display:"Fraunces",Georgia,"Times New Roman",serif;
            --texte:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
            --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
        }

                @keyframes newMessage {
            0% { background-color: var(--terre); }
            50% { background-color: var(--brique); }
            100% { background-color: var(--terre); }
        }

        .new-messages {
            animation: newMessage 2s infinite;
            font-weight: bold !important;
            position: relative;
        }

        .new-messages::after {
            content: '•';
            color: #ff6b6b;
            position: absolute;
            top: -5px;
            right: -10px;
            font-size: 20px;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        /* Styles de base */
        body {
            background: var(--parchemin);
            color: var(--bistre);
            font-family: var(--texte);
        }
        .navbar {
            background: var(--bistre);
            border-bottom: 2px solid var(--terre);
        }
        .navbar-brand {
            font-family: var(--display);
            font-weight: 900;
            font-size: 1.6rem;
            letter-spacing: -0.01em;
            color: var(--parchemin) !important;
        }
        .navbar .nav-link {
            color: var(--sable) !important;
            font-weight: 600;
        }
        .navbar .nav-link:hover {
            color: var(--terre) !important;
        }
        
        /* Styles pour les icônes des réseaux sociaux */
        .navbar .social-icons a {
            transition: all 0.3s ease;
            opacity: 0.8;
        }
        
        .navbar .social-icons a:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .navbar .social-icons a[title="Facebook"]:hover {
            color: #1877f2 !important;
        }
        
        .navbar .social-icons a[title="Instagram"]:hover {
            color: #e4405f !important;
        }
        
        .navbar .social-icons a[title="Discord"]:hover {
            color: #5865f2 !important;
        }
        
        .navbar .social-icons a[title="YouTube"]:hover {
            color: #ff0000 !important;
        }

        /* Sidebar gauche avec défilement */
        .sidebar {
            width: 290px;
            position: fixed;
            top: 80px;
            left: 20px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-height: calc(100vh - 100px); /* Limite la hauteur maximale pour le défilement */
            overflow-y: auto; /* Active le défilement vertical */
        }

        /* Styles pour les sections de la sidebar */
        .section {
            background: var(--sable);
            border: 1px solid var(--sable-ligne);
            border-radius: 12px;
            padding: 10px;
            box-shadow: 0 2px 6px rgba(43, 32, 22, 0.08);
        }

        .section-title {
            width: 100%;
            background: var(--terre);
            color: var(--parchemin);
            font-family: var(--display);
            padding: 8px 0;
            text-align: center;
            font-weight: 600;
            border-radius: 8px 8px 0 0;
            margin-bottom: 10px;
        }
        /* Nom de ferme cliquable : mène à sa propre fiche de ferme (/visiter_ferme) */
        .section-title.section-title-lien {
            display: block;
            text-decoration: none;
            cursor: pointer;
        }
        .section-title.section-title-lien:hover,
        .section-title.section-title-lien:focus {
            color: var(--parchemin);
            text-decoration: underline;
        }
        /* En-tête de groupe repliable (menu regroupé Ferme/Commerce/Stockage...) */
        .section-title.menu-groupe {
            cursor: pointer;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 8px;
            user-select: none;
        }
        .section-title.menu-groupe .menu-caret {
            font-size: .8rem;
            transition: transform .2s ease;
        }
        /* Chevron vers le bas quand ouvert, vers la droite quand replié (BS4 : .collapsed sur le toggle) */
        .section-title.menu-groupe.collapsed .menu-caret {
            transform: rotate(-90deg);
        }

        .section p {
            text-align: center;
            color: var(--bistre);
            font-size: 0.9rem;
            margin: 0;
        }

        .section ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        /* Style identique pour les listes */
        .section ul li {
            margin: 8px 0;
            font-weight: bold;
            color: var(--bistre);
            position: relative;
            padding-left: 20px;
        }

        /* Puce personnalisée pour les listes */
        .section ul li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--terre);
            font-size: 1.2rem;
        }

        /* Ajustement de l'espace principal en fonction de la sidebar */
        .content {
            margin-left: 330px;
            padding: 20px;
        }

        .sidebar a {
            color: inherit;
            text-decoration: none;
        }

        .btn-custom-secondary {
            background-color: var(--terre);
            color: var(--parchemin);
            font-weight: bold;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }
        .btn-custom-secondary:hover {
            background-color: var(--brique);
            color: var(--parchemin);
        }

        .new-messages {
    position: relative;
    animation: pulse 2s infinite;
    color: #FFD700 !important;
    font-weight: bold !important;
}

.new-messages i {
    margin-right: 5px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Styles pour l'affichage des utilisateurs en ligne */
.online-users-display {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 8px 12px;
        background: var(--olivier);
        color: var(--parchemin);
        border-radius: 6px;
        font-weight: bold;
        font-size: 0.95rem;
        box-shadow: 0 2px 4px rgba(43,32,22,0.12);
    }
    

    
    .online-users-btn i {
        margin-right: 5px;
    }
    
    .online-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--parchemin);
        margin-right: 8px;
        animation: pulse 2s infinite;
        box-shadow: 0 0 6px rgba(239, 230, 210, 0.7);
    }
    
    .online-users-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .online-users-modal-content {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        max-width: 80%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .online-users-list {
        list-style-type: none;
        padding: 0;
        margin: 15px 0;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .online-users-list li {
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }
    
    .online-users-list li:last-child {
        border-bottom: none;
    }
    
    .close-modal {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .close-modal:hover {
        color: black;
    }
    
    .empty-message {
        text-align: center;
        color: #666;
        font-style: italic;
    }
    
    @keyframes pulse {
        0% { 
            opacity: 0.7;
            transform: scale(1);
        }
        50% { 
            opacity: 1;
            transform: scale(1.2);
        }
        100% { 
            opacity: 0.7;
            transform: scale(1);
        }
    }

    /* Style pour les badges de notification */
    .badge-danger {
        background-color: #ff6b6b;
        color: white;
        padding: 2px 6px;
        border-radius: 50%;
        font-size: 0.8rem;
        margin-left: 5px;
        display: inline-block;
        animation: pulse 2s infinite;
    }

    /* Style spécifique pour le lien Ventes Directes en attente */
    #ventes-directes-link.new-messages {
        color: #ff6b6b !important;
        font-weight: bold;
        animation: pulse 2s infinite;
        display: flex;
        align-items: center;
    }

    #ventes-directes-link.new-messages::before {
        content: '\f0e0'; /* Code pour une icône d'enveloppe */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 5px;
        animation: bounce 1s infinite;
    }

    /* Animation de rebond pour l'icône */
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    
    /* Styles pour les liens de pseudos cliquables */
    .username-link {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.2s ease;
        border-bottom: 1px dotted #007bff;
    }
    
    .username-link:hover {
        color: #0056b3;
        text-decoration: none;
        border-bottom: 1px solid #0056b3;
        background-color: rgba(0, 123, 255, 0.1);
        padding: 1px 3px;
        border-radius: 3px;
    }
    
    /* Variante pour les pseudos dans les tableaux */
    .table .username-link {
        border-bottom: none;
    }
    
    .table .username-link:hover {
        background-color: rgba(0, 123, 255, 0.15);
    }
    
    /* Variante pour les pseudos dans les messages/chat */
    .chat-username {
        color: #28a745;
        font-weight: bold;
        text-decoration: none;
    }

    .chat-username:hover {
        color: #1e7e34;
        text-decoration: underline;
    }

    /* ===================================================================
       DIRECTION ARTISTIQUE "TERRE" — ambiance, typographie, surfaces
       (placé AVANT le thème sombre pour que celui-ci reste prioritaire)
       =================================================================== */

    /* Grain / matière (voile de bruit très léger sur tout le fond) */
    body::before{
        content:"";
        position:fixed; inset:0;
        z-index:1; pointer-events:none;
        opacity:.05; mix-blend-mode:multiply;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* Typographie : serif chaleureux pour les titres, mono pour les chiffres */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .card-title, .modal-title, .card-header {
        font-family: var(--display);
        letter-spacing: -0.01em;
    }
    .mono, .text-mono, code, kbd, samp { font-family: var(--mono); }

    /* Liens de contenu → terracotta (hors boutons / nav / dropdown) */
    .content a:not(.btn):not(.nav-link):not(.sidebar-item):not(.dropdown-item):not(.page-link) {
        color: var(--terre);
    }
    .content a:not(.btn):not(.nav-link):not(.sidebar-item):not(.dropdown-item):not(.page-link):hover {
        color: var(--brique);
    }
    /* Liens de la sidebar */
    .sidebar-item:hover { color: var(--terre); }
    .sidebar-item:active { background: rgba(193,92,52,.15); }

    /* Surfaces : cartes = sable, filets = sable-ligne */
    .card {
        background-color: var(--sable);
        border: 1px solid var(--sable-ligne);
        border-radius: 12px;
    }
    .card-header {
        background-color: var(--sable);
        border-bottom: 1px solid var(--sable-ligne);
    }
    .card-footer {
        background-color: var(--sable);
        border-top: 1px solid var(--sable-ligne);
    }
    .list-group-item { background-color: var(--sable); border-color: var(--sable-ligne); }

    /* Boutons Bootstrap remappés sur la palette terre */
    .btn-primary, .btn-info {
        background-color: var(--terre); border-color: var(--terre); color: var(--parchemin);
    }
    .btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus {
        background-color: var(--brique); border-color: var(--brique); color: var(--parchemin);
    }
    .btn-success {
        background-color: var(--olivier); border-color: var(--olivier); color: var(--parchemin);
    }
    .btn-success:hover, .btn-success:focus {
        background-color: #55542E; border-color: #55542E; color: var(--parchemin);
    }
    .btn-danger { background-color: var(--brique); border-color: var(--brique); color: var(--parchemin); }
    .btn-danger:hover { background-color: #7d2d18; border-color: #7d2d18; }
    .btn-outline-primary { color: var(--terre); border-color: var(--terre); }
    .btn-outline-primary:hover { background-color: var(--terre); border-color: var(--terre); color: var(--parchemin); }

    /* Couleurs contextuelles de fond → remappées vers des teintes SOMBRES de la palette */
    .bg-primary { background-color: var(--bistre) !important; }
    .bg-info    { background-color: var(--terre) !important; }
    .bg-success { background-color: var(--olivier) !important; }
    .bg-danger  { background-color: var(--brique) !important; }

    /* CONTRASTE : ces pastilles ont un fond sombre mais Bootstrap ne pose PAS de
       couleur de texte sur `badge bg-*` → le chiffre restait sombre = illisible
       (ex. compteurs de couveuses). Tous ces fonds étant sombres, on force un
       texte clair (y compris sur les `badge bg-info text-dark` hérités, désormais
       sombre-sur-sombre). Aucune couleur de FOND n'est modifiée ici. */
    .badge.bg-primary, .badge.bg-info, .badge.bg-success,
    .badge.bg-danger, .badge.bg-secondary, .badge.bg-dark {
        color: var(--parchemin) !important;
    }

    /* Bouton de fermeture Bootstrap 5 (.btn-close) : non stylé sous BS4 → on lui
       redonne une croix. color:inherit pour rester visible sur en-tête sombre
       (modale) comme sur alerte claire. */
    .btn-close {
        border: 0;
        background: transparent;
        cursor: pointer;
        color: inherit;
        opacity: .7;
        font-size: 1.4rem;
        line-height: 1;
        padding: .1rem .5rem;
    }
    .btn-close::before { content: "\00d7"; }
    .btn-close:hover { opacity: 1; }

    /* ===================== COMPAT BOOTSTRAP 5 → BOOTSTRAP 4 =====================
       Les templates ont été écrits avec des classes Bootstrap 5 alors que le site
       charge Bootstrap 4.5 : ces classes n'existent nulle part, elles ne faisaient
       donc RIEN (même problème que .btn-close ci-dessus).
       Conséquence la plus visible — les SUPERPOSITIONS : un <input>/<select> en
       `form-select` restait au rendu natif du navigateur, donc à sa largeur
       intrinsèque (~200 px pour un input number, largeur de l'option la plus longue
       pour un select). Il débordait de sa colonne et passait PAR-DESSUS le texte
       voisin (actions groupées de /champs et /potagers, listes d'acheteurs, etc.).
       S'y ajoutaient les boutons collés (gap-*) et les icônes collées au libellé (me-*).
       Aucune de ces règles n'existe sous BS4 : rien n'est écrasé ici. */

    /* --- Listes déroulantes (.form-select) : bloc, jamais plus large que sa colonne --- */
    .form-select {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: .375rem 1.75rem .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        vertical-align: middle;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 12px 9px;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .form-select:focus {
        border-color: var(--terre);
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(193,92,52,.25);
    }
    /* Listes à choix multiples : pas de chevron ni de hauteur forcée */
    .form-select[multiple], .form-select[size]:not([size="1"]) {
        padding-right: .75rem;
        background-image: none;
    }
    .form-select-sm { padding: .25rem 1.75rem .25rem .5rem; font-size: .875rem; }
    .form-select-lg { padding: .5rem  1.75rem .5rem  1rem;  font-size: 1.25rem; }
    html.dark-theme .form-select {
        background-color: #3a3a3a;
        border-color: #555;
        color: #f0f0f0;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0f0f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* --- Espacement entre éléments d'un conteneur flex (.gap-*) : boutons collés --- */
    .gap-0 { gap: 0 !important; }
    .gap-1 { gap: .25rem !important; }
    .gap-2 { gap: .5rem !important; }
    .gap-3 { gap: 1rem !important; }
    .gap-4 { gap: 1.5rem !important; }
    .gap-5 { gap: 3rem !important; }

    /* --- Marges/paddings logiques BS5 (ms/me/ps/pe) : icônes collées au libellé --- */
    .ms-0 { margin-left: 0 !important; }
    .ms-1 { margin-left: .25rem !important; }
    .ms-2 { margin-left: .5rem !important; }
    .ms-3 { margin-left: 1rem !important; }
    .ms-4 { margin-left: 1.5rem !important; }
    .ms-5 { margin-left: 3rem !important; }
    .ms-auto { margin-left: auto !important; }
    .me-0 { margin-right: 0 !important; }
    .me-1 { margin-right: .25rem !important; }
    .me-2 { margin-right: .5rem !important; }
    .me-3 { margin-right: 1rem !important; }
    .me-4 { margin-right: 1.5rem !important; }
    .me-5 { margin-right: 3rem !important; }
    .me-auto { margin-right: auto !important; }
    .ps-0 { padding-left: 0 !important; }
    .ps-1 { padding-left: .25rem !important; }
    .ps-2 { padding-left: .5rem !important; }
    .ps-3 { padding-left: 1rem !important; }
    .ps-4 { padding-left: 1.5rem !important; }
    .ps-5 { padding-left: 3rem !important; }
    .pe-0 { padding-right: 0 !important; }
    .pe-1 { padding-right: .25rem !important; }
    .pe-2 { padding-right: .5rem !important; }
    .pe-3 { padding-right: 1rem !important; }
    .pe-4 { padding-right: 1.5rem !important; }
    .pe-5 { padding-right: 3rem !important; }

    /* --- Alignements logiques BS5 --- */
    .text-start  { text-align: left  !important; }
    .text-end    { text-align: right !important; }
    .float-start { float: left  !important; }
    .float-end   { float: right !important; }
    @media (min-width: 768px) {
        .text-md-start { text-align: left  !important; }
        .text-md-end   { text-align: right !important; }
    }
    /* ================== FIN COMPAT BOOTSTRAP 5 → BOOTSTRAP 4 ================== */

    /* Couleurs contextuelles de texte.
       text-primary/info = terracotta : trop clair en TEXTE sur sable (~3:1) → on
       utilise la brique (plus foncée, ~6:1, même famille). La terracotta claire
       est restaurée sur les rares fonds sombres (cartes bg-dark/bg-primary, navbar). */
    .text-primary { color: var(--brique) !important; }
    .text-info    { color: var(--brique) !important; }
    .bg-dark .text-primary, .bg-dark .text-info,
    .bg-primary .text-primary, .bg-primary .text-info,
    .navbar .text-primary, .navbar .text-info {
        color: var(--terre) !important;
    }
    .text-success { color: var(--olivier) !important; }
    .text-danger  { color: var(--brique) !important; }

    /* JAUNE : absent de la palette et illisible sur les surfaces claires
       (parchemin/sable). On repasse `text-warning` en OR RÉCOLTE foncé (lisible
       sur clair, cohérent avec le thème ferme)… */
    .text-warning { color: #7D5F14 !important; }
    /* …mais on restaure un ambre vif là où le fond est SOMBRE (cartes .bg-dark du
       dashboard, en-têtes contextuels remappés, navbar/footer). */
    .bg-dark .text-warning, .bg-primary .text-warning, .bg-info .text-warning,
    .bg-success .text-warning, .bg-danger .text-warning,
    .navbar .text-warning, .site-footer .text-warning,
    .modal-header.bg-dark .text-warning {
        color: #FFC107 !important;
    }

    /* Badge `bg-light` (fond quasi blanc) : le texte DOIT être sombre. Corrige les
       compteurs à texte or inline (ex. poussins/lapereaux) devenus illisibles. */
    .badge.bg-light, .badge.bg-white {
        color: var(--bistre) !important;
    }

    /* Badges */
    .badge-primary { background-color: var(--terre); color: var(--parchemin); }
    .badge-info    { background-color: var(--terre); color: var(--parchemin); }
    .badge-success { background-color: var(--olivier); color: var(--parchemin); }
    .badge-danger  { background-color: var(--brique); color: var(--parchemin); }

    /* Tables : en-tête sable, filet terre en pied d'en-tête */
    .table thead th {
        background-color: var(--sable);
        color: var(--bistre);
        border-bottom: 2px solid var(--terre);
    }
    .table td, .table th { border-color: var(--sable-ligne); }

    /* Champs de saisie */
    .form-control:focus {
        border-color: var(--terre);
        box-shadow: 0 0 0 0.2rem rgba(193,92,52,0.25);
    }

    /* Alertes déclinées en teintes terre douces (mode clair) */
    .alert-success { background-color: #E7E7C9; border-color: var(--olivier); color: #4A4A22; }
    .alert-info    { background-color: var(--sable); border-color: var(--sable-ligne); color: var(--bistre); }
    .alert-warning { background-color: #F1E1C9; border-color: var(--terre); color: var(--brique); }
    .alert-danger  { background-color: #EFD8CD; border-color: var(--brique); color: var(--brique); }

    /* === THÈME SOMBRE === */
    html.dark-theme body {
        background: #2b2b2b;
        color: #f0f0f0;
    }
    html.dark-theme .card,
    html.dark-theme .card-body {
        background-color: #1f1f1f;
        border-color: #444;
        color: #f0f0f0;
    }
    html.dark-theme .card-header,
    html.dark-theme .card-footer {
        background-color: #252525;
        border-color: #444;
        color: #f0f0f0;
    }
    html.dark-theme .table {
        color: #f0f0f0;
    }
    html.dark-theme .table thead th {
        background-color: #1a1a1a;
        border-color: #555;
        color: #f0f0f0;
    }
    html.dark-theme .table td,
    html.dark-theme .table th {
        border-color: #444;
    }
    html.dark-theme .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255,255,255,0.05);
    }
    html.dark-theme .table-hover tbody tr:hover {
        background-color: rgba(255,255,255,0.08);
    }
    html.dark-theme .form-control {
        background-color: #3a3a3a;
        border-color: #555;
        color: #f0f0f0;
    }
    html.dark-theme .form-control:focus {
        background-color: #3a3a3a;
        border-color: var(--terre);
        color: #f0f0f0;
        box-shadow: 0 0 0 0.2rem rgba(193,92,52,0.30);
    }
    html.dark-theme .input-group-text {
        background-color: #333;
        border-color: #555;
        color: #f0f0f0;
    }
    html.dark-theme .modal-content {
        background-color: #1f1f1f;
        border-color: #444;
        color: #f0f0f0;
    }
    html.dark-theme .modal-header {
        border-bottom-color: #444;
    }
    html.dark-theme .modal-footer {
        border-top-color: #444;
    }
    html.dark-theme .online-users-modal-content {
        background-color: #1f1f1f;
        color: #f0f0f0;
    }
    html.dark-theme .online-users-list li {
        border-bottom-color: #444;
    }
    html.dark-theme .close-modal {
        color: #888;
    }
    html.dark-theme .close-modal:hover {
        color: #f0f0f0;
    }
    html.dark-theme hr {
        border-color: #444;
    }
    html.dark-theme .alert-info {
        background-color: #1a3a4a;
        border-color: #1e5468;
        color: #aed6f1;
    }
    html.dark-theme .alert-success {
        background-color: #1a3a2a;
        border-color: #1e4d30;
        color: #a9dfbf;
    }
    html.dark-theme .alert-warning {
        background-color: #3a3010;
        border-color: #4d4015;
        color: #f9e79f;
    }
    html.dark-theme .alert-danger {
        background-color: #3a1515;
        border-color: #4d1e1e;
        color: #f5b7b1;
    }
    html.dark-theme .bg-light {
        background-color: #2b2b2b !important;
    }
    html.dark-theme .bg-white {
        background-color: #1f1f1f !important;
    }
    html.dark-theme .text-dark {
        color: #f0f0f0 !important;
    }
    html.dark-theme .text-muted {
        color: #aaa !important;
    }
    html.dark-theme .border,
    html.dark-theme .border-top,
    html.dark-theme .border-bottom,
    html.dark-theme .border-left,
    html.dark-theme .border-right {
        border-color: #444 !important;
    }
    html.dark-theme .list-group-item {
        background-color: #1f1f1f;
        border-color: #444;
        color: #f0f0f0;
    }
    html.dark-theme .breadcrumb {
        background-color: #252525;
    }
    html.dark-theme .breadcrumb-item.active {
        color: #aaa;
    }
    html.dark-theme .page-link {
        background-color: #2b2b2b;
        border-color: #444;
        color: #f0f0f0;
    }
    html.dark-theme .page-item.active .page-link {
        background-color: var(--terre);
        border-color: var(--terre);
        color: var(--parchemin);
    }
    html.dark-theme .dropdown-menu {
        background-color: #1f1f1f;
        border-color: #444;
    }
    html.dark-theme .dropdown-item {
        color: #f0f0f0;
    }
    html.dark-theme .dropdown-item:hover {
        background-color: #2b2b2b;
    }
    html.dark-theme .dropdown-divider {
        border-color: #444;
    }
    html.dark-theme .username-link {
        color: #5fa3ff;
        border-bottom-color: #5fa3ff;
    }
    html.dark-theme .username-link:hover {
        color: #80baff;
        border-bottom-color: #80baff;
        background-color: rgba(95,163,255,0.15);
    }
    /* Bouton thème */
    #theme-toggle {
        background: none;
        border: none;
        cursor: pointer;
        color: #f9f9f9 !important;
        font-size: 1.1rem;
        padding: 0.375rem 0.75rem;
        transition: transform 0.3s ease;
    }
    #theme-toggle:hover {
        transform: rotate(20deg);
        opacity: 1;
    }

    /* Pied de page */
    .site-footer {
        background: var(--bistre);
        border-top: 2px solid var(--terre);
        padding: 18px 12px;
        margin-top: 40px;
        margin-left: 290px; /* aligné avec la sidebar sur desktop */
        text-align: center;
        color: #ccc;
        font-size: 0.85rem;
    }
    .site-footer .footer-copy {
        margin-bottom: 8px;
    }
    .site-footer .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .site-footer .footer-links a {
        color: var(--terre);
        text-decoration: none;
        padding: 6px 12px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .site-footer .footer-links a:hover {
        text-decoration: underline;
    }
    /* Séparateur discret entre les liens (sauf le premier) */
    .site-footer .footer-links a:not(:first-child) {
        border-left: 1px solid rgba(193,92,52,.4);
    }

    /* ===================================================================
       MOBILE FIRST — Fondation responsive (ajout 2026-06)
       Active la sidebar en tiroir, agrandit les zones tactiles,
       empêche le zoom auto iOS sur les champs.
       =================================================================== */

    /* Bouton hamburger : caché sur desktop, visible sur mobile/tablette */
    .menu-toggle {
        display: none;
        position: fixed;
        top: 14px;
        left: 12px;
        z-index: 1101;
        width: 52px;
        height: 52px;
        border: none;
        border-radius: 8px;
        background: var(--terre);
        color: var(--parchemin);
        font-size: 1.4rem;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        align-items: center;
        justify-content: center;
    }

    /* Barre d'accès rapide (bas d'écran, mobile) : raccourcis transverses vers
       remise / marché / coop → supprime les allers-retours par le menu. */
    .mobile-quickbar {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1098;
        background: var(--terre);
        box-shadow: 0 -2px 8px rgba(0,0,0,.28);
        padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-quickbar a,
    .mobile-quickbar button {
        flex: 1 1 0;
        min-width: 0;
        background: none;
        border: none;
        color: var(--parchemin);
        text-decoration: none;
        font-size: .68rem;
        line-height: 1.05;
        padding: 6px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        cursor: pointer;
    }
    .mobile-quickbar i {
        font-size: 1.2rem;
    }
    .mobile-quickbar a:active,
    .mobile-quickbar button:active {
        background: rgba(255,255,255,.18);
    }

    /* Voile sombre derrière le tiroir */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1099;
    }

    @media (max-width: 991px) {
        /* Empêche le tiroir hors-écran de créer un scroll horizontal parasite.
           N'affecte pas le scroll interne des .table-responsive (conteneur propre). */
        html, body {
            overflow-x: hidden;
        }

        /* La sidebar devient un tiroir coulissant depuis la gauche */
        .sidebar {
            top: 0;
            left: 0;
            width: 280px;
            max-width: 85vw;
            height: 100vh;
            max-height: 100vh;
            padding: 64px 14px 24px;
            background: var(--sable);
            transform: translateX(-100%);
            transition: transform .28s ease;
            z-index: 1100;
            box-shadow: 2px 0 12px rgba(0,0,0,.2);
        }
        .sidebar.open {
            transform: translateX(0);
        }
        .sidebar-overlay.show {
            display: block;
        }
        .menu-toggle {
            display: flex;
        }

        /* Le contenu prend toute la largeur, plus de marge à gauche */
        .content {
            margin-left: 0;
            padding: 12px 10px;
        }

        /* Footer aligné pleine largeur sur mobile (plus de décalage de 290px) */
        .site-footer {
            margin-left: 0;
        }
        /* Pas de barre verticale au début d'une ligne quand les liens passent
           à la ligne : séparateur retiré, l'espacement suffit */
        .site-footer .footer-links a {
            border-left: none !important;
        }

        /* Place pour le bouton hamburger à gauche de la navbar */
        .navbar {
            padding-left: 62px;
            flex-wrap: wrap;
        }
        .navbar-brand {
            font-size: 1.15rem;
        }
        /* Icônes réseaux sociaux plus compactes sur mobile */
        .navbar .social-icons {
            margin-left: 0 !important;
        }
        .navbar .social-icons a {
            margin-left: .6rem !important;
            margin-right: .6rem !important;
        }
        .navbar .social-icons .fa-2x {
            font-size: 1.4em;
        }

        /* Zones tactiles : chaque lien du menu fait au moins 44px de haut */
        .sidebar-item {
            display: block;
            min-height: 44px;
            line-height: 1.3;
            padding: 11px 8px;
            border-radius: 6px;
        }
        .sidebar-item:active {
            background: rgba(255,255,255,.25);
        }
        .section ul li {
            margin: 4px 0;
        }

        /* Champs : 16px minimum = pas de zoom auto sur iOS, plus hauts au doigt */
        input, select, textarea,
        .form-control, .form-select {
            font-size: 16px !important;
        }
        .form-control, .form-select {
            min-height: 42px;
        }
        .form-control-sm {
            min-height: 38px;
        }

        /* Tableaux qui débordent : scroll horizontal fluide + indication */
        .table-responsive {
            -webkit-overflow-scrolling: touch;
        }

        /* Boutons d'action confortables au doigt */
        .btn {
            min-height: 40px;
        }
        .btn-lg {
            min-height: 48px;
        }

        /* Rangées de boutons centrées : passent à la ligne au lieu de déborder
           sur le côté de la page (ex. "Aller aux Coqs/Poussins/Ventes",
           barres Nourrir/Abreuver/Soigner/Nettoyer...). Le gap CSS fonctionne
           indépendamment de la version de Bootstrap. */
        .d-flex.justify-content-center {
            flex-wrap: wrap;
            gap: .5rem;
        }

        /* Groupes de boutons (.btn-group) : un btn-group ne passe jamais à la
           ligne par défaut → il déborde sur le côté quand il y a plusieurs
           boutons. On l'autorise à se réorganiser sur mobile. */
        .btn-group {
            flex-wrap: wrap;
        }

        /* --- Accès rapide visible sur mobile (Lot 1.A / 1.D) --- */
        .mobile-quickbar {
            display: flex;
        }
        /* Espace en bas pour ne pas masquer le contenu sous la quickbar */
        .content {
            padding-bottom: calc(var(--mf-barre, 58px) + 18px);
        }

        /* --- Densité mobile (Lot 1.C) : moins de zoom, plus d'infos à l'écran --- */
        /* Règle globale manquante : aucune image ne dépasse sa colonne */
        img {
            max-width: 100%;
            height: auto;
        }
        /* Photos d'animaux plein cadre (prairie/paturage/clapier) plafonnées */
        .animal-photo {
            max-height: 150px !important;
            width: auto !important;
            object-fit: contain;
        }
        /* Texte et cartes resserrés (uniquement mobile — desktop intact) */
        body {
            font-size: 15px;
        }
        .card .card-body {
            padding: .6rem;
        }
        .card {
            margin-bottom: .75rem;
        }
        h1, .h1 { font-size: 1.5rem; }
        h2, .h2 { font-size: 1.3rem; }
        h3, .h3 { font-size: 1.15rem; }
        h5, .h5 { font-size: 1rem; }
        /* Images de listing plafonnées ET NON déformées (ratio préservé) : sans width:auto,
           le width:150px inline + max-height écrasait la photo verticalement sur mobile. */
        .remise-item-img { max-height: 72px !important; width: auto !important; height: auto !important; object-fit: contain; }
        .marche-item-img { max-height: 90px !important; width: auto !important; height: auto !important; object-fit: contain; }

        /* --- Toast de retour d'action (Lot 1.B) : visible sans remonter --- */
        #flash-zone {
            position: fixed;
            left: 8px;
            right: 8px;
            bottom: 84px;                 /* au-dessus de la quickbar */
            z-index: 1102;
            margin: 0;
            max-width: none;
            padding: 0;
            pointer-events: none;
        }
        #flash-zone .alert {
            pointer-events: auto;
            margin: 0 auto 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,.3);
            opacity: .98;
            font-weight: 600;
            border-width: 0 0 0 6px;      /* liseré latéral de couleur */
            border-style: solid;
            /* Un bandeau est une confirmation, pas une lecture : il tient sur deux
               lignes et laisse voir la page dessous. Le 29/08/2026, une action de
               zone en empilait six en pleine hauteur d'écran, qui recouvraient la
               liste qu'ils commentaient. */
            font-size: .84rem;
            line-height: 1.35;
            padding: 8px 12px;
            text-align: left;
            max-height: 3.2em;
            overflow: hidden;
        }
        /* Au-delà de deux, on n'empile plus : les plus anciens s'effacent. */
        #flash-zone .alert:nth-last-child(n+3) { display: none; }
        /* Toast = notification transitoire : couleurs VIVES et lisibles quel que soit le
           thème (le fond sombre du mode nuit rendait les succès presque invisibles).
           N'affecte que le toast mobile, pas les alertes inline de page. */
        #flash-zone .alert-success           { background-color: #43a047 !important; color: #fff !important; border-color: #2e7d32 !important; }
        #flash-zone .alert-info              { background-color: #1565c0 !important; color: #fff !important; border-color: #0d47a1 !important; }
        #flash-zone .alert-warning           { background-color: #ef6c00 !important; color: #fff !important; border-color: #e65100 !important; }
        #flash-zone .alert-danger,
        #flash-zone .alert-error             { background-color: #c62828 !important; color: #fff !important; border-color: #b71c1c !important; }
        #flash-zone .alert:not(.alert-success):not(.alert-info):not(.alert-warning):not(.alert-danger):not(.alert-error) {
            background-color: #37474f !important; color: #fff !important; border-color: #263238 !important;
        }
        #flash-zone.flash-hide {
            opacity: 0;
            transition: opacity .45s ease;
        }
    }
    
    /* Skins cosmétiques (P1) — n'altèrent que le fond de page (les cartes restent lisibles) */
    body.skin-neon     { background: linear-gradient(160deg, #0f1420 0%, #141a2b 60%, #0b2530 100%) fixed; }
    body.skin-rustique { background: linear-gradient(160deg, #f3e7d3 0%, #e7d2b0 55%, #d8b98a 100%) fixed; }
    body.skin-solaire  { background: linear-gradient(160deg, #fff7e0 0%, #ffe9ad 55%, #ffd873 100%) fixed; }
    
.appel-comptoir{
  position:fixed; inset:0; z-index:20000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,7,4,.55); backdrop-filter:blur(3px);
}
.appel-comptoir.visible{display:flex; animation:appelFond .25s ease}
@keyframes appelFond{from{opacity:0}to{opacity:1}}

.appel-carte{
  position:relative; width:100%; max-width:400px; text-align:center;
  padding:30px 26px 22px; border-radius:20px;
  background:linear-gradient(165deg,#3b2a18 0%,#2a1d10 100%);
  border:2px solid #d9a441;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(217,164,65,.25) inset;
  color:#f5ecdc; animation:appelEntree .34s cubic-bezier(.2,1.2,.35,1);
}
@keyframes appelEntree{
  from{opacity:0; transform:translateY(26px) scale(.9)}
  to{opacity:1; transform:none}
}

.appel-croix{
  position:absolute; top:8px; right:12px; background:none; border:none;
  color:rgba(245,236,220,.45); font-size:26px; line-height:1;
  cursor:pointer; padding:4px 8px;
}
.appel-croix:hover{color:#f5ecdc}

.appel-chope{font-size:56px; line-height:1; animation:appelChope 1.5s ease-in-out infinite}
@keyframes appelChope{
  0%,100%{transform:rotate(-7deg) scale(1)}
  50%{transform:rotate(7deg) scale(1.09)}
}

.appel-titre{
  font-size:21px; font-weight:800; margin:12px 0 8px; color:#f0b429;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.appel-texte{font-size:14.5px; line-height:1.5; color:#e0d2bd; margin-bottom:20px}

.appel-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.appel-oui{
  background:linear-gradient(180deg,#f0b429,#d08d1c); color:#2a1d10;
  font-weight:800; padding:12px 22px; border-radius:11px; text-decoration:none;
  box-shadow:0 4px 14px rgba(240,180,41,.35); transition:transform .12s;
}
.appel-oui:hover{transform:translateY(-2px); color:#2a1d10; text-decoration:none}
.appel-non{
  background:transparent; color:rgba(245,236,220,.6); border:1px solid rgba(245,236,220,.25);
  padding:12px 18px; border-radius:11px; cursor:pointer; font-size:14px;
}
.appel-non:hover{color:#f5ecdc; border-color:rgba(245,236,220,.5)}

.appel-jauge{height:3px; background:rgba(245,236,220,.14); border-radius:3px; margin-top:18px; overflow:hidden}
.appel-jauge div{height:100%; width:100%; background:#d9a441; transform-origin:left}

@media (prefers-reduced-motion:reduce){
  .appel-carte,.appel-chope,.appel-comptoir.visible{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CHARTE — jetons et composants (lot 5, 29/08/2026)
   ══════════════════════════════════════════════════════════════════════════
   Avant : chaque page réinventait ses cartes, ses en-têtes et ses espacements
   en style inline (219 attributs `style=` dans le seul tableau de bord). Une
   retouche de densité mobile demandait de repasser sur chaque fichier.

   Ici, cinq composants nommés et une poignée de jetons. Resserrer l'affichage
   mobile d'un cran = changer --mf-gap. Les couleurs de genre viennent de
   CLAUDE.md : elles étaient recopiées en dur dans une dizaine de templates.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
    /* Genre et stade de vie — convention du jeu, cf. CLAUDE.md */
    --mf-femelle:#87CEEB;
    --mf-male:#4169E1;
    --mf-bebe:#FFC107;

    /* Sémantique : ce qui va, ce qui attend, ce qui presse */
    --mf-ok:#3E7D3A;
    --mf-attente:#B7791F;
    --mf-urgent:#97381F;

    /* Espacement : quatre valeurs, pas davantage */
    --mf-gap-xs:4px;
    --mf-gap:8px;
    --mf-gap-l:14px;
    --mf-gap-xl:22px;

    --mf-rayon:8px;
    --mf-rayon-l:12px;

    /* Hauteur de la barre d'onglets. Tout ce qui se colle au bas de l'écran s'y
       réfère — sans cela chaque page redevine sa marge, et une page finit par
       masquer la navigation (le Bistrot le faisait, avec un display:none). */
    --mf-barre:58px;

    /* Surfaces — suivent le thème, jamais une couleur en dur dans un template */
    --mf-fond:#FFFFFF;
    --mf-bord:#D4C29B;
    --mf-doux:rgba(43,32,22,.62);
}
html.dark-theme{
    --mf-fond:#23262B;
    --mf-bord:#3A3F46;
    --mf-doux:rgba(233,232,228,.62);
}

/* ── En-tête collant : l'état reste lisible pendant tout le défilement ───── */
.mf-tete{
    position:sticky; top:0; z-index:20;
    background:var(--parchemin);
    border-bottom:1px solid rgba(0,0,0,.12);
    padding:10px 12px; margin:-1rem -15px var(--mf-gap-l);
}
.mf-tete .mf-haut{display:flex;justify-content:space-between;align-items:baseline;gap:var(--mf-gap)}
.mf-chiffres{display:flex;flex-wrap:wrap;margin-top:var(--mf-gap)}
.mf-chiffre{margin-right:var(--mf-gap-xl)}
.mf-chiffre .v{font-size:1.35rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mf-chiffre .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
               color:var(--mf-doux);margin-top:2px}

/* ── Ligne d'action : un objet, son état, son bouton ─────────────────────── */
.mf-ligne{
    display:flex; align-items:center; gap:var(--mf-gap-l);
    background:var(--mf-fond); border:1px solid var(--mf-bord);
    border-radius:var(--mf-rayon); padding:10px 11px; margin-bottom:var(--mf-gap);
}
.mf-ligne.est-urgent{border-left:4px solid var(--mf-urgent)}
.mf-ligne.est-attente{border-left:4px solid var(--mf-attente)}
.mf-ligne.est-calme{border-left:4px solid var(--mf-bord)}
.mf-ligne.est-fait{opacity:.5}
.mf-ligne.est-fait .mf-nom{text-decoration:line-through}
.mf-ligne .mf-ico{font-size:1.4rem;line-height:1;flex:none}
.mf-ligne .mf-corps{flex:1;min-width:0}
.mf-nom{font-weight:600;font-size:.95rem}
.mf-detail{font-size:.78rem;color:var(--mf-doux)}

/* ── Onglets : séparer sans faire disparaître ────────────────────────────── */
.mf-onglets{display:flex;gap:2px;background:var(--sable);padding:3px;border-radius:var(--mf-rayon-l)}
.mf-onglets a,.mf-onglets button{
    flex:1;text-align:center;font-size:.85rem;padding:7px 4px;border:0;background:none;
    border-radius:var(--mf-rayon);color:var(--mf-doux);font-weight:600;text-decoration:none;
}
.mf-onglets .actif{background:var(--mf-fond);color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ── Repli : ce qui compte moins, sans le perdre ─────────────────────────── */
.mf-repli{
    border:1px dashed var(--mf-bord); border-radius:var(--mf-rayon);
    padding:7px 10px; font-size:.82rem; color:var(--mf-doux);
    display:flex; justify-content:space-between; gap:var(--mf-gap);
    margin-bottom:var(--mf-gap); background:none; width:100%; text-align:left;
}

/* ── Carte de destination (index de navigation) ──────────────────────────── */
.mf-carte{
    display:flex; align-items:center; gap:var(--mf-gap-l); padding:11px 12px; min-height:56px;
    background:var(--mf-fond); border:1px solid var(--mf-bord); border-radius:var(--mf-rayon-l);
    text-decoration:none; color:inherit;
}
.mf-carte:hover{text-decoration:none;color:inherit;border-color:var(--terre)}
.mf-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--mf-gap)}

/* ── Barre d'action basse, au-dessus des onglets ─────────────────────────── */
.mf-bas{
    position:sticky; bottom:0; background:var(--parchemin);
    border-top:1px solid rgba(0,0,0,.12); padding:9px 0; margin:var(--mf-gap) -15px -1rem;
}
@media (max-width:991px){ .mf-bas{bottom:var(--mf-barre)} }

/* ═══════════════════════════════════════════════════════════════════════════
   LISIBILITÉ ET CIBLES TACTILES — MOBILE (09/09/2026)

   Retours des testeurs de l'application (Discord #application-test, 07/09/2026) :
     • « Globalement c'est petit, et je me retrouve parfois à chercher plusieurs
        secondes avant de trouver le bon endroit » ;
     • « les boutons du bas pourraient être un peu plus grands » ;
     • « certains boutons sont un peu difficiles d'accès » ;
     • « il est nécessaire d'agrandir pour lire ».

   Mesuré dans cette feuille avant correction, Bootstrap 4.5.2 sans surcharge :
     corps de texte mobile   15 px      → 16 px ici
     `small` (217 usages)    12 px      → 12,8 px, par effet du corps
     `btn-sm` (87 usages)    ≈ 29 px    → 44 px, le minimum d'une cible au doigt
     libellé barre du bas    10,9 px    → 12,5 px
     icône barre du bas      19,2 px    → 21,6 px

   La barre passe de ≈ 45,6 px à ≈ 54,7 px de haut : elle tient dans les 58 px
   déjà réservés par `--mf-barre`, donc aucun contenu ne se retrouve caché
   dessous et les éléments collants (`.mf-bas`) gardent leur décalage.

   Bloc placé en FIN de feuille à dessein : il passe après les règles existantes
   sans qu'aucune n'ait été modifiée en place, et se retire d'un seul coup.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    body { font-size: 16px; }

    /* Cible tactile : 44 px est le minimum sous lequel le doigt rate. Le
       centrage par flex est nécessaire — sans lui, `min-height` pousse le
       texte en haut du bouton au lieu de l'y centrer. */
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 44px;
        padding-top: .4rem;
        padding-bottom: .4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* `btn-block` attend un bouton pleine largeur : on garde le comportement
       en repassant en flex bloc plutôt qu'en flex en ligne. */
    .btn-sm.btn-block { display: flex; width: 100%; }

    /* Mêmes doigts, mêmes champs : les listes déroulantes d'accouplement et de
       vente sont en `form-control-sm`. */
    .form-control-sm,
    .custom-select-sm,
    .input-group-sm > .form-control {
        min-height: 44px;
    }

    .mobile-quickbar a,
    .mobile-quickbar button {
        font-size: .78rem;
        padding: 8px 2px;
        gap: 4px;
    }
    .mobile-quickbar i { font-size: 1.35rem; }
}