/* ======================================================================
   assets/css/style.css — Charte graphique PaniersVivres (v2)
   ----------------------------------------------------------------------
   Charte inspirée de celle du projet PowerBooks : bleu nuit + vert jade
   (l'ocre d'origine a été remplacé par un vert jade ; l'ambre reste
   réservé aux signaux « en attente / attention » et aux étoiles),
   polices système (aucun téléchargement de police : pages plus légères
   sur réseau mobile), cibles tactiles de 44 px minimum, contour de
   focus vert bien visible, contrastes conformes WCAG AA, et
   informations jamais portées par la seule couleur (icône + libellé).

   Bootstrap 5.3 reste utilisé pour la grille et les composants
   JavaScript (menus déroulants, fenêtres modales...) : ce fichier
   « rhabille » Bootstrap aux couleurs de la charte via ses variables
   CSS, puis ajoute les composants propres au projet.

   Sommaire
     1.  Jetons de la charte (couleurs, rayons, ombres)
     2.  Raccordement des variables Bootstrap
     3.  Base (typographie, liens, focus, accessibilité)
     4.  En-tête du site et navigation principale
     5.  Barre de navigation mobile (bas d'écran)
     6.  Boutons
     7.  Formulaires
     8.  Cartes, listes, fenêtres modales, menus
     9.  Bandeaux de page et page d'accueil (hero, étapes)
     10. Catalogue (cartes panier, prix, étoiles)
     11. Tableaux
     12. Pastilles d'état
     13. Messages (alertes, notifications « toast »)
     14. Suivi de commande
     15. Tunnel de commande (choix en tuiles, récapitulatif)
     16. Pagination, fil d'Ariane
     17. Back-office (barre latérale, indicateurs, graphique)
     18. Pied de page
     19. Authentification
     20. Animations, mouvement réduit, impression
   ====================================================================== */

[hidden] { display: none !important; }

/* ----------------------------------------------------------------------
   1. JETONS DE LA CHARTE
   Toutes les couleurs du site sont définies ici et seulement ici.
---------------------------------------------------------------------- */
:root {
    --bleu-nuit:      #1F3864;   /* couleur principale : titres, boutons, en-têtes de tableau */
    --bleu-nuit-fonce:#172A4B;
    --bleu:           #2E74B5;   /* liens, informations */
    --bleu-clair:     #EAF1FA;   /* survols, fonds d'encadrés */
    /* Couleur d'ACCENT de la marque : logo, élément actif, focus clavier,
       compteur du panier, mises en avant. Pour changer l'accent du site,
       il suffit de modifier ce bloc. */
    /* Vert jade (choisi en remplacement de l'ocre de PowerBooks) :
       vert légèrement bleuté, en harmonie avec le bleu nuit et bien
       distinct du vert « réussite / livrée » (--vert). Texte blanc posé
       dessus (contraste 4,6:1). */
    --accent:           #0F8A6A;
    --accent-rgb:       15, 138, 106;
    --accent-fonce:     #0B6E54;   /* survol des boutons d'accent */
    --accent-clair:     #E6F5F0;   /* fonds pastel */
    --accent-texte:     #0B6E54;   /* texte d'accent sur fond clair (contraste 6,3:1) */
    --accent-sur-accent:#FFFFFF;   /* texte posé sur un fond d'accent */
    --accent-sur-fonce: #5FD3B0;   /* accent sur fond bleu nuit (pied, back-office) */
    --accent-focus:     #0F8A6A;   /* contour de focus clavier (4,6:1 sur blanc) */

    /* AMBRE : réservé aux SIGNAUX (en attente, attention, avertissement)
       et aux étoiles de notation. Indépendant de l'accent, pour qu'une
       commande « en attente » ne ressemble jamais à une commande livrée. */
    --ambre:          #C9761B;
    --ambre-fonce:    #A45F12;
    --ambre-clair:    #FDF3E7;
    --ambre-texte:    #7A4A10;
    --vert:           #1E8449;   /* réussite, livraison effectuée */
    --vert-clair:     #E7F6ED;
    --rouge:          #C0392B;   /* erreurs, suppressions */
    --rouge-clair:    #FCEDEC;
    --encre:          #1A1A1A;   /* texte courant */
    --gris:           #5A6472;   /* texte secondaire (contraste 5,9:1 sur blanc) */
    --gris-clair:     #E4E8EF;   /* bordures */
    --gris-champ:     #C7CFDB;   /* bordure des champs de saisie */
    --fond:           #F7F9FC;   /* fond de page */
    --blanc:          #FFFFFF;

    --rayon:          12px;
    --rayon-petit:    8px;
    --ombre:          0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .06);
    --ombre-forte:    0 4px 12px rgba(16, 24, 40, .12);
    --transition:     .18s ease;

    --hauteur-entete: 68px;
    --hauteur-barre-mobile: 64px;
    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ----------------------------------------------------------------------
   2. RACCORDEMENT DES VARIABLES BOOTSTRAP
---------------------------------------------------------------------- */
:root {
    --bs-body-font-family: var(--police);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--encre);
    --bs-body-bg: var(--fond);
    --bs-emphasis-color: var(--encre);
    --bs-secondary-color: var(--gris);
    --bs-border-color: var(--gris-clair);
    --bs-border-radius: var(--rayon-petit);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--rayon);
    --bs-link-color: var(--bleu);
    --bs-link-color-rgb: 46, 116, 181;
    --bs-link-hover-color: var(--bleu-nuit);
    --bs-link-hover-color-rgb: 31, 56, 100;

    --bs-primary: var(--bleu-nuit);   --bs-primary-rgb: 31, 56, 100;
    --bs-success: var(--vert);        --bs-success-rgb: 30, 132, 73;
    --bs-danger:  var(--rouge);       --bs-danger-rgb: 192, 57, 43;
    --bs-warning: var(--ambre);       --bs-warning-rgb: 201, 118, 27;
    --bs-info:    var(--bleu);        --bs-info-rgb: 46, 116, 181;
    --bs-secondary-rgb: 90, 100, 114;
    --bs-light-rgb: 247, 249, 252;
    --bs-dark-rgb: 23, 42, 75;
    --bs-focus-ring-color: rgba(var(--accent-rgb), .35);
}

/* ----------------------------------------------------------------------
   3. BASE
---------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--hauteur-entete) + 12px); }

body {
    font-family: var(--police);
    background: var(--fond);
    color: var(--encre);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main#contenu { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bleu-nuit);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}
h1, .h1 { font-size: clamp(1.5rem, 3.2vw, 1.85rem); font-weight: 800; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1.02rem; }

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover, .navbar-brand:hover,
.logo:hover, .admin-nav a:hover, .barre-mobile a:hover, .carte-panier a:hover { text-decoration: none; }

/* Contour de focus clavier : couleur d'accent, épais, toujours visible */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--accent-focus) !important;
    outline-offset: 2px;
    box-shadow: none;
}

::selection { background: var(--accent-clair); color: var(--bleu-nuit); }

/* Lien d'évitement (« Aller au contenu ») : visible uniquement au clavier */
.saut-contenu {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    background: var(--bleu-nuit);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: var(--rayon-petit);
    font-weight: 700;
}
.saut-contenu:focus { top: .75rem; color: #fff; }

.lecteur-ecran {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.text-muted, .text-secondary { color: var(--gris) !important; }
.text-success { color: var(--vert) !important; }
.text-danger  { color: var(--rouge) !important; }
.text-warning { color: var(--ambre) !important; }
.text-primary { color: var(--bleu-nuit) !important; }
.lead { color: var(--gris); }

.surtitre {
    color: var(--accent-texte);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

/* ----------------------------------------------------------------------
   4. EN-TÊTE DU SITE ET NAVIGATION PRINCIPALE
---------------------------------------------------------------------- */
.entete {
    background: var(--blanc);
    border-bottom: 1px solid var(--gris-clair);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.entete .navbar {
    min-height: var(--hauteur-entete);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bleu-nuit);
    margin-right: 1.25rem;
}
.logo img { width: 36px; height: 36px; }
.logo .logo-marque  { color: var(--bleu-nuit); }
.logo .logo-marque2 { color: var(--accent); }

.nav-principale .nav-link {
    color: var(--gris);
    font-weight: 600;
    border-radius: 999px;
    padding: .5rem 1rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background var(--transition), color var(--transition);
}
.nav-principale .nav-link:hover,
.nav-principale .nav-link.actif {
    background: var(--bleu-clair);
    color: var(--bleu-nuit);
}
.nav-principale .nav-link.actif { box-shadow: inset 0 -2px 0 var(--accent); }

/* Boutons ronds de l'en-tête (panier, notifications) */
.bouton-icone {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bleu-nuit);
    background: transparent;
    border: 1px solid var(--gris-clair);
    font-size: 1.2rem;
    transition: background var(--transition), border-color var(--transition);
}
.bouton-icone:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); color: var(--bleu-nuit); }
.bouton-icone.actif { background: var(--bleu-clair); border-color: var(--bleu-nuit); }

/* Pastilles compteurs (panier / notifications) */
.compteur {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    border: 2px solid var(--blanc);
}
.compteur-panier { background: var(--accent); color: var(--accent-sur-accent); }
.compteur-panier.vide { background: var(--gris-clair); color: var(--gris); }
.compteur-alerte { background: var(--rouge); color: #fff; }

.compteur.animation-rebond { animation: rebondCompteur .4s ease; }
@keyframes rebondCompteur {
    0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); }
}

/* Pastille « profil » */
.pastille-profil {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .25rem .85rem .25rem .3rem;
    border: 1px solid var(--gris-clair);
    border-radius: 999px;
    color: var(--bleu-nuit);
    font-weight: 700;
    background: var(--blanc);
}
.pastille-profil:hover, .pastille-profil.show { background: var(--bleu-clair); color: var(--bleu-nuit); }
.pastille-profil .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
}
.pastille-profil .role {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent-texte);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}

.navbar-toggler {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-petit);
    width: 44px; height: 44px;
    padding: 0;
    color: var(--bleu-nuit);
    font-size: 1.5rem;
}
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
    .entete .navbar-collapse {
        border-top: 1px solid var(--gris-clair);
        margin-top: .5rem;
        padding: .75rem 0 .5rem;
    }
    .nav-principale .nav-link { width: 100%; border-radius: var(--rayon-petit); }
    .nav-principale .nav-link.actif { box-shadow: inset 3px 0 0 var(--accent); }
    .entete-actions { flex-wrap: wrap; }
}

/* ----------------------------------------------------------------------
   5. BARRE DE NAVIGATION MOBILE (bas d'écran, pouce)
   Sur smartphone, les destinations principales restent à portée de
   pouce en permanence, comme dans une application native.
---------------------------------------------------------------------- */
.barre-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: var(--blanc);
    border-top: 1px solid var(--gris-clair);
    box-shadow: 0 -4px 14px rgba(16, 24, 40, .06);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}
.barre-mobile a {
    flex: 1;
    min-height: var(--hauteur-barre-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: var(--gris);
    font-size: .72rem;
    font-weight: 700;
    position: relative;
}
.barre-mobile a .bi { font-size: 1.3rem; line-height: 1; }
.barre-mobile a.actif { color: var(--bleu-nuit); }
.barre-mobile a.actif::before {
    content: '';
    position: absolute;
    top: 0; left: 28%; right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}
.barre-mobile .icone-avec-compteur { position: relative; }
.barre-mobile .compteur { top: -6px; right: -12px; }

@media (max-width: 991.98px) {
    body.avec-barre-mobile { padding-bottom: calc(var(--hauteur-barre-mobile) + env(safe-area-inset-bottom)); }
}
@media (min-width: 992px) {
    .barre-mobile { display: none; }
}

/* ----------------------------------------------------------------------
   6. BOUTONS
   Couleurs Bootstrap redéfinies via leurs variables --bs-btn-*.
---------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--rayon-petit);
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .55rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .85rem; min-height: 36px; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1.05rem; min-height: 52px; }
.btn:active { transform: translateY(1px); }
.btn-close { min-height: 0; }

/* Action principale : bleu nuit */
.btn-primary {
    --bs-btn-bg: var(--bleu-nuit);            --bs-btn-border-color: var(--bleu-nuit);
    --bs-btn-hover-bg: var(--bleu-nuit-fonce); --bs-btn-hover-border-color: var(--bleu-nuit-fonce);
    --bs-btn-active-bg: var(--bleu-nuit-fonce);--bs-btn-active-border-color: var(--bleu-nuit-fonce);
    --bs-btn-disabled-bg: #8B99B3;             --bs-btn-disabled-border-color: #8B99B3;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--bleu-nuit);         --bs-btn-border-color: var(--gris-champ);
    --bs-btn-bg: var(--blanc);
    --bs-btn-hover-bg: var(--bleu-clair);     --bs-btn-hover-border-color: var(--bleu-nuit); --bs-btn-hover-color: var(--bleu-nuit);
    --bs-btn-active-bg: var(--bleu-clair);    --bs-btn-active-border-color: var(--bleu-nuit); --bs-btn-active-color: var(--bleu-nuit);
}

/* Réussite / validation : vert */
.btn-success {
    --bs-btn-bg: var(--vert);   --bs-btn-border-color: var(--vert);
    --bs-btn-hover-bg: #176B3A; --bs-btn-hover-border-color: #176B3A;
    --bs-btn-active-bg: #176B3A;--bs-btn-active-border-color: #176B3A;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: var(--vert); --bs-btn-border-color: var(--vert); --bs-btn-bg: var(--blanc);
    --bs-btn-hover-bg: var(--vert-clair); --bs-btn-hover-border-color: var(--vert); --bs-btn-hover-color: #14532D;
    --bs-btn-active-bg: var(--vert-clair); --bs-btn-active-border-color: var(--vert); --bs-btn-active-color: #14532D;
}

/* Mise en avant : couleur d'accent */
.btn-accent {
    --bs-btn-bg: var(--accent);       --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-fonce); --bs-btn-hover-border-color: var(--accent-fonce);
    --bs-btn-active-bg: var(--accent-fonce);--bs-btn-active-border-color: var(--accent-fonce);
    --bs-btn-color: var(--accent-sur-accent); --bs-btn-hover-color: var(--accent-sur-accent); --bs-btn-active-color: var(--accent-sur-accent);
}
/* Avertissement / avis : ambre */
.btn-warning {
    --bs-btn-bg: var(--ambre);       --bs-btn-border-color: var(--ambre);
    --bs-btn-hover-bg: var(--ambre-fonce); --bs-btn-hover-border-color: var(--ambre-fonce);
    --bs-btn-active-bg: var(--ambre-fonce);--bs-btn-active-border-color: var(--ambre-fonce);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #E2B98A; --bs-btn-disabled-border-color: #E2B98A; --bs-btn-disabled-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--ambre-fonce); --bs-btn-border-color: var(--ambre); --bs-btn-bg: var(--blanc);
    --bs-btn-hover-bg: var(--ambre-clair); --bs-btn-hover-border-color: var(--ambre); --bs-btn-hover-color: var(--ambre-texte);
    --bs-btn-active-bg: var(--ambre-clair); --bs-btn-active-color: var(--ambre-texte);
}

/* Danger */
.btn-danger {
    --bs-btn-bg: var(--rouge); --bs-btn-border-color: var(--rouge);
    --bs-btn-hover-bg: #A93226; --bs-btn-hover-border-color: #A93226;
    --bs-btn-active-bg: #A93226;
}
.btn-outline-danger {
    --bs-btn-color: var(--rouge); --bs-btn-border-color: #E6B3AD; --bs-btn-bg: var(--blanc);
    --bs-btn-hover-bg: var(--rouge-clair); --bs-btn-hover-border-color: var(--rouge); --bs-btn-hover-color: #7F1D1D;
    --bs-btn-active-bg: var(--rouge-clair); --bs-btn-active-color: #7F1D1D;
}

/* Bouton « fantôme » (action secondaire) */
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-fantome {
    --bs-btn-color: var(--bleu-nuit); --bs-btn-bg: var(--blanc); --bs-btn-border-color: var(--gris-clair);
    --bs-btn-hover-color: var(--bleu-nuit); --bs-btn-hover-bg: var(--bleu-clair); --bs-btn-hover-border-color: var(--bleu-clair);
    --bs-btn-active-color: var(--bleu-nuit); --bs-btn-active-bg: var(--bleu-clair); --bs-btn-active-border-color: var(--bleu-nuit);
}

/* ----------------------------------------------------------------------
   7. FORMULAIRES
---------------------------------------------------------------------- */
.form-label, label.form-label {
    font-weight: 700;
    font-size: .93rem;
    color: var(--encre);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    min-height: 44px;
    border: 1px solid var(--gris-champ);
    border-radius: var(--rayon-petit);
    padding: .55rem .8rem;
    background-color: var(--blanc);
    color: var(--encre);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .btn { min-height: 38px; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: #8A94A3; }
.form-control:focus, .form-select:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(46, 116, 181, .18);
}
.form-control:disabled, .form-control[readonly] { background: #F1F4F9; color: var(--gris); }
.form-text { color: var(--gris); font-size: .85rem; }

.form-check { min-height: 1.75rem; }
.form-check-input { width: 1.2em; height: 1.2em; margin-top: .2em; border-color: var(--gris-champ); }
.form-check-input:checked { background-color: var(--bleu-nuit); border-color: var(--bleu-nuit); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3); border-color: var(--accent-focus); }
.form-switch .form-check-input { width: 2.4em; }

.input-group > .btn { min-height: 44px; }

/* Champ de recherche du catalogue */
.recherche {
    position: relative;
}
.recherche .bi-search {
    position: absolute;
    left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--gris);
    pointer-events: none;
}
.recherche .form-control { padding-left: 2.6rem; min-height: 48px; border-radius: 999px; }

/* ----------------------------------------------------------------------
   8. CARTES, LISTES, FENÊTRES MODALES, MENUS
---------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--gris-clair);
    --bs-card-border-radius: var(--rayon);
    --bs-card-inner-border-radius: calc(var(--rayon) - 1px);
    --bs-card-cap-bg: var(--blanc);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    background: var(--blanc);
    box-shadow: var(--ombre);
}
.card-header {
    font-weight: 700;
    color: var(--bleu-nuit);
    border-bottom: 1px solid var(--gris-clair);
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.card-footer { background: #FAFBFD; border-top: 1px solid var(--gris-clair); }

.list-group { --bs-list-group-border-color: var(--gris-clair); }
.list-group-item-action:hover { background: var(--bleu-clair); }

.modal-content { border: 0; border-radius: var(--rayon); box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
.modal-header { border-bottom: 1px solid var(--gris-clair); }
.modal-header .modal-title { color: var(--bleu-nuit); font-weight: 800; }
.modal-footer { border-top: 1px solid var(--gris-clair); background: #FAFBFD; border-radius: 0 0 var(--rayon) var(--rayon); }
.modal-backdrop.show { opacity: .45; }

.dropdown-menu {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
    padding: .4rem;
    min-width: 14rem;
}
.dropdown-item {
    border-radius: var(--rayon-petit);
    padding: .55rem .75rem;
    font-weight: 600;
    color: var(--encre);
    display: flex;
    align-items: center;
    gap: .55rem;
}
.dropdown-item .bi { color: var(--gris); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bleu-clair); color: var(--bleu-nuit); }
.dropdown-item.text-danger:hover { background: var(--rouge-clair); }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--gris); }

.nav-pills .nav-link, .nav-tabs .nav-link { font-weight: 600; color: var(--gris); border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--bleu-nuit); color: #fff; }
.nav-pills .nav-link:not(.active):hover { background: var(--bleu-clair); color: var(--bleu-nuit); }

/* Encadrés d'information (inspirés de PowerBooks) */
.encadre-info, .encadre-avertissement {
    border-radius: var(--rayon-petit);
    padding: .85rem 1rem;
    font-size: .93rem;
}
.encadre-info { background: var(--bleu-clair); border-left: 4px solid var(--bleu); color: #16335A; }
.encadre-avertissement { background: var(--ambre-clair); border-left: 4px solid var(--ambre); color: var(--ambre-texte); }

/* État vide (panier vide, aucune commande...) */
.etat-vide {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--blanc);
    border: 1px dashed var(--gris-champ);
    border-radius: var(--rayon);
}
.etat-vide > .bi {
    font-size: 2.4rem;
    color: var(--bleu-nuit);
    background: var(--bleu-clair);
    width: 76px; height: 76px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.etat-vide p { color: var(--gris); }

/* ----------------------------------------------------------------------
   9. BANDEAUX DE PAGE ET PAGE D'ACCUEIL
---------------------------------------------------------------------- */
.bandeau-page {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gris-clair);
}
.bandeau-page .icone-bandeau, .icone-bandeau {
    width: 52px; height: 52px; min-width: 52px;
    border-radius: var(--rayon);
    background: var(--bleu-nuit);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative;
}
.icone-bandeau::after {
    content: '';
    position: absolute;
    right: -3px; bottom: -3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--fond);
}
.bandeau-page h1 { margin-bottom: .1rem; }
.bandeau-page p { margin-bottom: 0; }
.bandeau-page .actions-bandeau { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Hero de la page d'accueil */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: calc(var(--rayon) * 1.5);
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 2rem;
    box-shadow: var(--ombre);
}
.hero::after {   /* forme décorative (couleur d'accent), discrète */
    content: '';
    position: absolute;
    right: -90px; top: -90px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: var(--accent-clair);
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); max-width: 18ch; margin-bottom: .75rem; }
.hero .hero-accroche { font-size: 1.1rem; color: var(--gris); max-width: 52ch; }
.hero-illustration { max-width: 320px; width: 100%; filter: drop-shadow(0 12px 24px rgba(31, 56, 100, .15)); }

.hero-atouts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .45rem; }
.hero-atouts li { display: flex; gap: .55rem; align-items: flex-start; font-weight: 600; }
.hero-atouts li::before {
    content: '✓';
    flex: 0 0 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--vert-clair);
    color: var(--vert);
    font-weight: 800;
    font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: .12rem;
}
.zones-desservies { font-size: .93rem; }

/* En-tête de section (titre + lien « tout voir ») */
.section-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.section-entete h2 { margin: 0; }

/* « Comment ça marche ? » */
.etapes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
    counter-reset: etape;
}
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etapes li {
    counter-increment: etape;
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: 1.25rem 1.25rem 1.25rem 4.25rem;
    position: relative;
    box-shadow: var(--ombre);
}
.etapes li::before {
    content: counter(etape);
    position: absolute;
    left: 1.1rem; top: 1.15rem;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: #fff;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.etapes strong { display: block; color: var(--bleu-nuit); margin-bottom: .2rem; }
.etapes p { margin: 0; color: var(--gris); font-size: .93rem; }

/* ----------------------------------------------------------------------
   10. CATALOGUE
---------------------------------------------------------------------- */
.carte-panier {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-top: 4px solid var(--accent);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
    transition: transform var(--transition), box-shadow var(--transition);
}
.carte-panier:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.carte-panier .visuel {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--bleu-clair);
    overflow: hidden;
}
.carte-panier .card-img-top, .carte-panier .visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.carte-panier .card-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .35rem; }
.carte-panier .card-title a { color: var(--bleu-nuit); }
.carte-panier .card-title a::after { content: ''; position: absolute; inset: 0; } /* toute la carte est cliquable */
.carte-panier .card-body { position: relative; }
.carte-panier .card-body .btn, .carte-panier .card-body .actions { position: relative; z-index: 2; }

.prix {
    color: var(--bleu-nuit);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.prix-grand { font-size: clamp(1.6rem, 4vw, 2rem); }

.note-etoiles { color: var(--ambre); font-weight: 700; font-size: .9rem; }
.note-etoiles .text-muted { font-weight: 500; }

.puce {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: var(--bleu-clair);
    color: var(--bleu-nuit);
}
.puce-ocre, .puce-ambre { background: var(--ambre-clair); color: var(--ambre-texte); }
.puce-accent { background: var(--accent-clair); color: var(--accent-texte); }
.puce-vert { background: var(--vert-clair); color: #14532D; }

/* Fiche panier : image */
.visuel-fiche {
    background: var(--bleu-clair);
    border-radius: var(--rayon);
    overflow: hidden;
    border: 1px solid var(--gris-clair);
    aspect-ratio: 4 / 3;
}
.visuel-fiche img { width: 100%; height: 100%; object-fit: cover; }

/* Sélecteur de quantité (− / +) */
.selecteur-quantite {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--gris-champ);
    border-radius: var(--rayon-petit);
    overflow: hidden;
    background: var(--blanc);
}
.selecteur-quantite button {
    width: 44px;
    border: 0;
    background: var(--blanc);
    color: var(--bleu-nuit);
    font-size: 1.2rem;
    font-weight: 700;
}
.selecteur-quantite button:hover { background: var(--bleu-clair); }
.selecteur-quantite input {
    width: 56px;
    border: 0;
    border-left: 1px solid var(--gris-clair);
    border-right: 1px solid var(--gris-clair);
    text-align: center;
    font-weight: 700;
    min-height: 44px;
    border-radius: 0;
    -moz-appearance: textfield;
}
.selecteur-quantite input::-webkit-outer-spin-button,
.selecteur-quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.liste-composition .list-group-item { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.liste-composition .bi-check2 { color: var(--vert); font-weight: 800; }

.carte-avis { border-left: 4px solid var(--accent); }

/* ----------------------------------------------------------------------
   11. TABLEAUX
   En-tête bleu nuit, lignes alternées discrètes, survol bleu clair.
---------------------------------------------------------------------- */
.table {
    --bs-table-bg: var(--blanc);
    --bs-table-border-color: var(--gris-clair);
    --bs-table-striped-bg: #FAFBFD;
    --bs-table-hover-bg: var(--bleu-clair);
    margin-bottom: 0;
}
.table > thead > tr > th {
    --bs-table-bg: var(--bleu-nuit);
    --bs-table-color: #fff;
    background: var(--bleu-nuit);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 0;
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; padding-top: .75rem; padding-bottom: .75rem; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--bleu-clair); }
.table > tfoot > tr > * { background: #FAFBFD; font-weight: 700; }

.table-responsive, .cadre-tableau {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow-x: auto;
}
.table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius: calc(var(--rayon) - 1px); }
.table-responsive > .table > thead > tr:first-child > th:last-child  { border-top-right-radius: calc(var(--rayon) - 1px); }
.card .table-responsive { border: 0; box-shadow: none; border-radius: 0; }

.table-admin { background: var(--blanc); }
.table-success > * { --bs-table-bg: var(--vert-clair) !important; }

/* ----------------------------------------------------------------------
   12. PASTILLES D'ÉTAT
   .etat : pastilles générées par badgeStatutCommande() / badgeEtat().
   Les badges Bootstrap existants (.badge.bg-*) adoptent le même style
   pastel, lisible (contraste AA) et moins agressif que les aplats.
---------------------------------------------------------------------- */
.etat, .badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}
.etat-succes,  .badge.bg-success { background: var(--vert-clair) !important;  color: #14532D !important; }
.etat-erreur,  .badge.bg-danger  { background: var(--rouge-clair) !important; color: #7F1D1D !important; }
.etat-attente, .badge.bg-warning { background: var(--ambre-clair) !important; color: var(--ambre-texte) !important; }
.etat-info,    .badge.bg-info, .badge.bg-primary { background: var(--bleu-clair) !important; color: #16335A !important; }
.etat-neutre,  .badge.bg-secondary, .badge.bg-light { background: #EEF1F5 !important; color: #3C4450 !important; }
.badge.bg-dark { background: var(--bleu-nuit) !important; color: #fff !important; }
.badge.border { border-color: var(--gris-clair) !important; }

/* ----------------------------------------------------------------------
   13. MESSAGES
---------------------------------------------------------------------- */
.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--rayon);
    padding: .9rem 1.1rem;
    font-size: .95rem;
}
.alert-success { background: var(--vert-clair);  color: #14532D; border-left-color: var(--vert); }
.alert-danger  { background: var(--rouge-clair); color: #7F1D1D; border-left-color: var(--rouge); }
.alert-warning { background: var(--ambre-clair); color: var(--ambre-texte); border-left-color: var(--ambre); }
.alert-info    { background: var(--bleu-clair);  color: #16335A; border-left-color: var(--bleu); }
.alert-light   { background: var(--blanc); color: var(--encre); border: 1px solid var(--gris-clair); border-left: 4px solid var(--bleu); }
.alert ul { padding-left: 1.1rem; }

/* Zone des messages flash (hors JavaScript) */
.flashs { margin-top: 1rem; }

/* Notifications « toast » (créées par assets/js/script.js) */
#conteneurToasts {
    position: fixed;
    top: calc(var(--hauteur-entete) + 12px);
    right: 16px;
    left: auto;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(360px, calc(100vw - 32px));
}
.toast-personnalise {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-left: 4px solid var(--vert);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
    padding: .85rem .9rem .85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .93rem;
    font-weight: 600;
    color: var(--encre);
    animation: glisserToast .3s ease forwards;
}
.toast-personnalise .bi { font-size: 1.15rem; line-height: 1.3; }
.toast-personnalise .bi-check-circle-fill { color: var(--vert); }
.toast-personnalise.toast-erreur { border-left-color: var(--rouge); }
.toast-personnalise.toast-erreur .bi-exclamation-circle-fill { color: var(--rouge); }
.toast-personnalise .toast-texte { flex: 1; }
.toast-personnalise .toast-fermer {
    border: 0; background: transparent; color: var(--gris);
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.toast-personnalise .toast-fermer:hover { background: var(--bleu-clair); color: var(--bleu-nuit); }
.toast-personnalise.disparait { animation: disparaitreToast .25s ease forwards; }
@keyframes glisserToast { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes disparaitreToast { to { opacity: 0; transform: translateX(24px); } }

@media (max-width: 575.98px) {
    #conteneurToasts { right: 16px; left: 16px; width: auto; }
}

/* ----------------------------------------------------------------------
   14. SUIVI DE COMMANDE (frise des étapes)
---------------------------------------------------------------------- */
.suivi-commande { display: flex; justify-content: space-between; margin-top: 1.25rem; }
.etape-suivi {
    text-align: center;
    flex: 1;
    position: relative;
    font-size: .8rem;
    color: var(--gris);
}
.etape-suivi::before {   /* trait reliant les étapes */
    content: '';
    position: absolute;
    top: 17px;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--gris-clair);
    z-index: 0;
}
.etape-suivi:first-child::before { display: none; }
.etape-suivi.complete::before, .etape-suivi.active::before { background: var(--vert); }
.etape-suivi .cercle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--blanc);
    border: 2px solid var(--gris-champ);
    color: var(--gris);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .4rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}
.etape-suivi.complete .cercle { background: var(--vert); border-color: var(--vert); color: transparent; }
.etape-suivi.complete .cercle::after {   /* coche à la place du numéro */
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.etape-suivi.active .cercle {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-sur-accent);
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .22);
}
.etape-suivi.active small, .etape-suivi.active { color: var(--bleu-nuit); font-weight: 800; }
@media (max-width: 575.98px) {
    .etape-suivi small { font-size: .68rem; display: block; line-height: 1.2; }
}

/* ----------------------------------------------------------------------
   15. TUNNEL DE COMMANDE
   Les options (livraison, adresse, paiement) deviennent des « tuiles »
   larges et faciles à toucher. :has() met en valeur l'option cochée.
---------------------------------------------------------------------- */
.choix-option {
    border: 2px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: .85rem 1rem .85rem 2.75rem;
    margin-bottom: .6rem;
    background: var(--blanc);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    min-height: 56px;
    display: flex;
    align-items: center;
}
.choix-option .form-check-input { margin-left: -1.85rem; margin-top: 0; flex-shrink: 0; }
.choix-option .form-check-label { cursor: pointer; width: 100%; padding-left: .5rem; }
.choix-option:hover { border-color: var(--gris-champ); background: #FBFCFE; }
.choix-option:has(input:checked) { border-color: var(--bleu-nuit); background: var(--bleu-clair); }
.choix-option:has(input:disabled) { opacity: .75; cursor: not-allowed; background: #F7F8FA; }
.choix-option:has(input:focus-visible) { outline: 3px solid var(--accent-focus); outline-offset: 2px; }

.etape-numero {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    margin-right: .5rem;
}

.recapitulatif { position: sticky; top: calc(var(--hauteur-entete) + 16px); }
.recapitulatif .ligne-total { font-size: 1.25rem; font-weight: 800; color: var(--bleu-nuit); }
@media (max-width: 767.98px) { .recapitulatif { position: static; } }

/* ----------------------------------------------------------------------
   16. PAGINATION, FIL D'ARIANE
---------------------------------------------------------------------- */
.pagination { gap: .3rem; flex-wrap: wrap; }
.pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-petit) !important;
    color: var(--bleu-nuit);
    font-weight: 700;
    background: var(--blanc);
}
.pagination .page-link:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); color: var(--bleu-nuit); }
.pagination .page-item.active .page-link { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; }
.pagination .page-item.disabled .page-link { color: #A5AFBD; background: var(--fond); }

.breadcrumb { font-size: .9rem; margin-bottom: 1.25rem; --bs-breadcrumb-divider-color: var(--gris); }
.breadcrumb-item a { color: var(--bleu); font-weight: 600; }
.breadcrumb-item.active { color: var(--gris); }

/* ----------------------------------------------------------------------
   17. BACK-OFFICE
---------------------------------------------------------------------- */
body.page-admin { background: #F1F4F9; }
body.page-admin main#contenu { padding-top: 0 !important; }

.admin-cadre { display: block; }
@media (min-width: 992px) {
    .admin-cadre {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: calc(100vh - var(--hauteur-entete));
    }
}

.admin-nav {
    background: var(--bleu-nuit);
    color: #C9D4E6;
}
.admin-nav-interieur { padding: 1rem .75rem; }
@media (min-width: 992px) {
    .admin-nav-interieur {
        position: sticky;
        top: var(--hauteur-entete);
        max-height: calc(100vh - var(--hauteur-entete));
        overflow-y: auto;
        padding: 1.25rem .85rem;
    }
}
.admin-nav-entete {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-weight: 800;
    padding: 0 .5rem .9rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.admin-nav-entete small { color: var(--accent-sur-fonce); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; display: block; }
.admin-nav-titre {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8FA3C4;
    font-weight: 800;
    margin: 1rem .6rem .35rem;
}
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    padding: .5rem .7rem;
    border-radius: var(--rayon-petit);
    color: #DCE4F1;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}
.admin-nav a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.admin-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav a.actif { background: var(--accent); color: var(--accent-sur-accent); }
.admin-nav a.actif .bi { opacity: 1; }
.admin-nav .compteur-nav {
    margin-left: auto;
    background: var(--rouge);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .1rem .5rem;
}
.admin-nav a.actif .compteur-nav { background: #fff; color: var(--rouge); }
.admin-nav-pied {
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Sur mobile / tablette : la barre latérale devient une rangée de
   raccourcis défilant horizontalement, pour ne pas masquer le contenu. */
@media (max-width: 991.98px) {
    .admin-nav-interieur { padding: .6rem .75rem; }
    .admin-nav-entete, .admin-nav-titre, .admin-nav-pied { display: none; }
    .admin-nav .admin-nav-liste {
        display: flex;
        gap: .35rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .admin-nav .admin-nav-liste::-webkit-scrollbar { display: none; }
    .admin-nav .admin-nav-liste ul { display: flex; gap: .35rem; }
    .admin-nav a { white-space: nowrap; }
}

.admin-contenu { padding: 1.5rem 1rem 2.5rem; min-width: 0; }
@media (min-width: 992px) { .admin-contenu { padding: 1.75rem 2rem 3rem; } }
.admin-contenu .bandeau-page { border-bottom-color: #DDE3EC; }
.admin-contenu .icone-bandeau::after { border-color: #F1F4F9; }

/* Cartes indicateurs */
.cartes-indicateurs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 1.5rem; }
.carte-indicateur {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--ombre);
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
.carte-indicateur .icone-indicateur {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: var(--rayon-petit);
    background: var(--bleu-clair);
    color: var(--bleu-nuit);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.indicateur-libelle { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 700; margin: 0; }
.indicateur-valeur { font-size: clamp(1.25rem, 1.9vw, 1.6rem); white-space: nowrap; font-weight: 800; color: var(--bleu-nuit); line-height: 1.2; margin: .15rem 0 0; }
.indicateur-detail { font-size: .8rem; color: var(--gris); margin: .15rem 0 0; }
.carte-indicateur.principale { background: var(--bleu-nuit); border-color: var(--bleu-nuit); }
.carte-indicateur.principale .indicateur-libelle, .carte-indicateur.principale .indicateur-detail { color: #C9D4E6; }
.carte-indicateur.principale .indicateur-valeur { color: #fff; }
.carte-indicateur.principale .icone-indicateur { background: rgba(255, 255, 255, .12); color: #fff; }
.carte-indicateur.attention { border-left: 4px solid var(--ambre); }
.carte-indicateur.attention .icone-indicateur { background: var(--ambre-clair); color: var(--ambre-fonce); }

/* Graphique en barres CSS (ventes des 7 derniers jours) */
.graphique-barres {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: .6rem;
    height: 190px;
    padding-top: 1.5rem;
}
.graphique-barres .colonne { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: .35rem; min-width: 0; }
.graphique-barres .barre {
    width: 100%;
    max-width: 46px;
    min-height: 3px;
    background: var(--bleu);
    border-radius: 6px 6px 2px 2px;
    position: relative;
}
.graphique-barres .colonne.aujourdhui .barre { background: var(--accent); }
.graphique-barres .valeur { font-size: .68rem; font-weight: 700; color: var(--gris); white-space: nowrap; }
.graphique-barres .jour { font-size: .75rem; font-weight: 700; color: var(--bleu-nuit); }

.actions-cellule { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* ----------------------------------------------------------------------
   18. PIED DE PAGE
---------------------------------------------------------------------- */
.pied {
    background: var(--bleu-nuit);
    color: #C9D4E6;
    margin-top: 3rem;
    padding: 2.5rem 0 1.25rem;
    font-size: .93rem;
}
.pied a { color: #fff; }
.pied a:hover { color: var(--accent-sur-fonce); }
.pied h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pied .logo { color: #fff; margin-bottom: .6rem; }
.pied .logo .logo-marque { color: #fff; }
.pied .logo .logo-marque2 { color: var(--accent-sur-fonce); }
.pied-bas {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.moyens-paiement { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.moyens-paiement span {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .78rem;
    font-weight: 700;
}
body.page-admin .pied { margin-top: 0; }

/* ----------------------------------------------------------------------
   19. AUTHENTIFICATION
---------------------------------------------------------------------- */
.carte-auth {
    max-width: 460px;
    margin: 1.5rem auto 2rem;
    border-radius: calc(var(--rayon) * 1.25);
    border-top: 4px solid var(--accent);
}
.carte-auth .card-body { padding: clamp(1.5rem, 5vw, 2.25rem); }
.carte-auth h1, .carte-auth h2 { text-align: center; }
.carte-auth .logo-auth { display: block; width: 56px; height: 56px; margin: 0 auto .75rem; }

/* Bouton « afficher le mot de passe » */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe .form-control { padding-right: 3rem; }
.champ-mot-de-passe .basculer-mdp {
    position: absolute;
    right: 2px; top: 2px;
    width: 42px; height: 40px;
    border: 0;
    background: transparent;
    color: var(--gris);
    border-radius: var(--rayon-petit);
}
.champ-mot-de-passe .basculer-mdp:hover { color: var(--bleu-nuit); background: var(--bleu-clair); }

/* ----------------------------------------------------------------------
   20. ANIMATIONS, MOUVEMENT RÉDUIT, IMPRESSION
---------------------------------------------------------------------- */
.animation-entree { opacity: 0; animation: apparition .35s ease forwards; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.squelette {
    background: linear-gradient(90deg, #EEF1F5 25%, #F6F8FB 50%, #EEF1F5 75%);
    background-size: 200% 100%;
    animation: chargementSquelette 1.4s infinite;
    border-radius: var(--rayon-petit);
}
@keyframes chargementSquelette { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .animation-entree { opacity: 1; }
}

@media print {
    .entete, .barre-mobile, .pied, .admin-nav, #conteneurToasts, .btn, .pagination, form { display: none !important; }
    body { background: #fff; padding: 0 !important; }
    .card, .table-responsive { box-shadow: none; border-color: #999; }
    .table > thead > tr > th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
    a { color: #000; }
    .animation-entree { opacity: 1; animation: none; }
}

/* Reçu de commande (liste clé / valeur) et marque de réussite */
.recu {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1rem;
    background: var(--fond);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: 1rem 1.2rem;
    margin: 0;
}
.recu dt { color: var(--gris); font-weight: 600; }
.recu dd { margin: 0; text-align: right; font-weight: 700; }
.recu dd.prix { font-size: 1.2rem; }
.marque-succes {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 0 0 8px var(--vert-clair);
}
.marque-succes.attente { background: var(--ambre); box-shadow: 0 0 0 8px var(--ambre-clair); }
.marque-succes.echec   { background: var(--rouge); box-shadow: 0 0 0 8px var(--rouge-clair); }

/* Adresses enregistrées (page profil) */
.carte-adresse {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    background: var(--blanc);
}
.carte-adresse.par-defaut { border: 2px solid var(--vert); background: #FBFEFC; }

/* Notation par étoiles (page avis.php)
   Les boutons radio sont placés dans l'ordre 5 → 1 et affichés en
   sens inverse (row-reverse) : le sélecteur « ~ » peut ainsi colorer
   l'étoile survolée/cochée ET toutes celles situées à sa gauche. */
.notation-etoiles {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .15rem;
}
.notation-etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.notation-etoiles label {
    font-size: 2rem;
    line-height: 1;
    color: var(--gris-champ);
    cursor: pointer;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--rayon-petit);
    transition: color var(--transition), transform var(--transition);
}
.notation-etoiles label:hover,
.notation-etoiles label:hover ~ label,
.notation-etoiles input:checked ~ label { color: var(--ambre); }
.notation-etoiles label:hover { transform: scale(1.1); }
.notation-etoiles input:focus-visible + label { outline: 3px solid var(--accent-focus); outline-offset: 1px; }
fieldset legend.form-label { font-size: .93rem; float: none; }

/* Notifications */
.notification.non-lue { background: var(--accent-clair); border-left: 4px solid var(--accent); }

/* Garde-fous responsive : aucun débordement horizontal sur mobile */
.pied li, .pied p { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .carte-panier .visuel { aspect-ratio: 16 / 9; }
    .hero h1 { max-width: none; }
    .bandeau-page { align-items: flex-start; }
    .bandeau-page .actions-bandeau { margin-left: 0; width: 100%; }
    .bandeau-page { flex-wrap: wrap; }
}
.bandeau-page > div:not(.icone-bandeau):not(.actions-bandeau) { flex: 1 1 200px; min-width: 0; }
/* Les textes réservés aux lecteurs d'écran (.lecteur-ecran) sont en
   position absolue : leurs conteneurs défilants doivent être
   positionnés, sinon ces textes « s'échappent » et créent un
   défilement horizontal parasite sur mobile. */
.btn, .admin-nav a, .admin-nav-liste, .table-responsive, .cadre-tableau { position: relative; }
@media (max-width: 767.98px) {
    .pastille-profil { padding-right: .3rem; }
    .pastille-profil.dropdown-toggle::after { display: none; }
}
@media (max-width: 399.98px) {
    .logo { font-size: 1.12rem; margin-right: .5rem; }
    .logo img { width: 32px; height: 32px; }
    .entete-actions { gap: .35rem !important; }
}

/* Panier d'achat sur mobile : chaque ligne du tableau devient une
   carte (plus de défilement horizontal pour atteindre la quantité ou
   le bouton « retirer »). */
@media (max-width: 575.98px) {
    .table-panier thead { display: none; }
    .table-panier, .table-panier tbody { display: block; }
    .table-panier tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .4rem .75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--gris-clair);
    }
    .table-panier tr:last-child { border-bottom: 0; }
    .table-panier td { display: flex; align-items: center; justify-content: space-between; border: 0; padding: 0 !important; }
    .table-panier td:first-child { grid-column: 1 / 2; }
    .table-panier td.cellule-retirer { grid-column: 2 / 3; grid-row: 1; }
    .table-panier td[data-libelle] { grid-column: 1 / -1; }
    .table-panier td[data-libelle]::before { content: attr(data-libelle); color: var(--gris); font-weight: 600; font-size: .88rem; }
}
/* Indicateurs : icône au-dessus de la valeur pour laisser toute la
   largeur aux montants (ex. « 1 257 800 FCFA »). */
.carte-indicateur { flex-direction: column; gap: .6rem; }
.indicateur-valeur { white-space: normal; font-size: clamp(1.3rem, 1.8vw, 1.6rem); }