/* Barre d'accès rapide site-wide, repliable — voir tc-menu-v2-quickbar.php pour le contexte.
   Palette reprise de l'ancien encart .tch-quickstart de tc-home (retiré le 2026-09-10, voir
   home.css.bak_20260910150044). Compressée en largeur et flèche redessinée (retour direct de
   l'utilisateur, 27/09/2026) : voir la note sur --tcqb-bar-h plus bas pour le fonctionnement replié.

   Le conteneur .tcqb ne porte plus lui-même de position fixe/centrage : la barre ET la flèche sont
   CHACUNE indépendamment `position:fixed`, ancrées à `bottom:0`. Piège évité : avec la flèche en
   `position:absolute` accrochée au SOMMET de la barre (ancien code), replier la barre par un simple
   `transform: translateY(100%)` ne change pas sa hauteur de mise en page (les transforms n'affectent
   jamais le flux) — la flèche restait donc "flottante" à mi-hauteur d'écran, à l'ancien sommet de la
   barre, au lieu de redescendre avec elle. Ici la flèche lit --tcqb-bar-h (hauteur réelle de la barre,
   mesurée en JS car elle diffère desktop/mobile) pour se placer juste au-dessus d'elle quand ouverte,
   et une règle .is-collapsed dédiée la ramène à bottom:0 quand la barre est masquée. */

.tcqb-toggle {
    position: fixed;
    left: 50%;
    bottom: var(--tcqb-bar-h, 76px);
    transform: translateX(-50%);
    z-index: 9001;
    width: 68px;
    height: 30px;
    border: none;
    border-radius: 20px 20px 0 0;
    background: #fff;
    color: #8B3A1A;
    box-shadow: 0 -4px 14px rgba(26,22,18,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: bottom .3s ease;
}
.tcqb.is-collapsed .tcqb-toggle { bottom: 0; }
.tcqb-toggle svg { width: 18px; height: 18px; transition: transform .25s ease; }
.tcqb.is-collapsed .tcqb-toggle svg { transform: rotate(180deg); }
.tcqb-toggle:hover { color: #C9973A; }

.tcqb-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 9000;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(6, 78px);
    gap: 6px;
    width: max-content;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(26,22,18,.18);
    padding: 10px 12px 12px;
    transform: translateX(-50%);
    transition: transform .3s ease;
}
.tcqb.is-collapsed .tcqb-bar { transform: translateX(-50%) translateY(100%); }

.tcqb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 8px 4px;
    border-radius: 12px;
    transition: background .15s, transform .15s;
}
.tcqb-item:hover { background: #F2EDE4; transform: translateY(-2px); }

.tcqb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #8B3A1A;
    transition: color .15s;
}
.tcqb-icon svg { width: 100%; height: 100%; }
.tcqb-item:hover .tcqb-icon { color: #C9973A; }

.tcqb-label {
    font-weight: 700;
    font-size: .74rem;
    color: #8B3A1A;
    text-align: center;
    line-height: 1.15;
}

/* Mobile (retour direct de l'utilisateur, 30/09/2026) : les 6 icônes tenaient sur 3 colonnes (donc
   2 lignes) dans une barre étroite (320px) — trop espacées et repliées sur deux rangées. Ici la barre
   prend toute la largeur de l'écran et les 6 colonnes se partagent l'espace à égalité (1fr) : une seule
   ligne, icônes bien réparties, quel que soit le téléphone. */
@media (max-width: 640px) {
    .tcqb-bar { grid-template-columns: repeat(6, 1fr); width: calc(100vw - 12px); max-width: calc(100vw - 12px); gap: 2px; padding: 8px 6px 10px; }
    .tcqb-label { font-size: .56rem; letter-spacing: -.01em; }
    .tcqb-icon { width: 19px; height: 19px; }
    .tcqb-item { padding: 6px 2px; }
    .tcqb-toggle { width: 60px; height: 26px; }
    .tcqb-toggle svg { width: 16px; height: 16px; }
}