/**
 * FACT — Styles frontend mobile
 *
 * Design system Apple-style avec variables CSS.
 * La couleur primaire est injectee dynamiquement par PHP.
 *
 * @package FACT
 * @since   1.4.00
 */

/* =============================================================================
   Variables CSS — Variables communes dans fact-variables.css
   Variables specifiques carte livreur ci-dessous
   ============================================================================= */
:root {
    /* Couleurs carte — source de verite unique (JS les lit via getComputedStyle) */
    --fact-color-travaux: #e74c3c;
    --fact-color-zone: #2ecc71;
    --fact-color-depart: #27ae60;
    --fact-color-icon-default: #9e9e9e;
    --fact-poi-size: 22;

    /* Traces carte */
    --fact-route-color: var(--fact-color-primary);
    --fact-route-width: 6px;
    --fact-route-foot-color: #8E8E93;
    --fact-route-foot-width: 3px;

    /* Tailles tactiles */
    --fact-btn-height-lg: 50px;
    --fact-btn-height-md: 36px;
    --fact-input-height: 44px;

    /* Bottom Sheet */
    --fact-bs-radius: 16px 16px 0 0;
    --fact-bs-height-collapsed: 12vh;
    --fact-bs-height-list: 55vh;
    --fact-bs-height-detail: 40vh;
    --fact-bs-height-routing: 22vh;
}

/* =============================================================================
   Reset de base pour le conteneur FACT
   ============================================================================= */
.fact-container {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--fact-color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fact-container *,
.fact-container *::before,
.fact-container *::after {
    box-sizing: border-box;
}

/* Neutraliser le padding Divi sur les <p> dans FACT */
.fact-map-container p,
.fact-bs p,
.fact-modal p {
    padding-bottom: 0;
}

/* =============================================================================
   Carte Leaflet
   ============================================================================= */
#fact-map {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--fact-bs-height-collapsed);
    z-index: 1;
    /* Synchronise avec la transition de .fact-bs (meme duree, meme courbe spring) */
    transition: bottom 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: none;
    /* Masque la carte pendant le chargement initial (evite le flash France/0,0) */
    opacity: 0;
}
#fact-map.fact-map--ready {
    opacity: 1;
    transition: bottom 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}

/* Filtre couleur tuiles — rapproche Azure Maps Road du style CartoDB Voyager.
   Voyager = desature, tons chauds beiges, contraste doux.
   Azure Maps Road = plus vif, plus bleu.
   Ajuster les valeurs si le rendu ne convient pas. Commenter pour desactiver. */
#fact-map .leaflet-tile-pane {
    filter: brightness(1.06) saturate(0.5) contrast(1.05) hue-rotate(-8deg);
}

/* Masquer les controles Leaflet non utilises sur le front
   Specificite elevee (double id-like) pour surcharger Leaflet sans !important */
.fact-container #fact-map .leaflet-control-zoom,
.fact-container #fact-map .leaflet-control-locate {
    display: none;
}

/* Attribution TomTom/Microsoft ou OSM — obligation legale, discret en bas a droite */
.fact-container #fact-map .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    color: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px 0 0 0;
}

.fact-container #fact-map .leaflet-control-attribution a {
    color: rgba(0, 0, 0, 0.5);
}

/* =============================================================================
   Bouton Home (top-left, 45x45, style Apple)
   ============================================================================= */
.fact-home-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fact-home-btn:active {
    transform: scale(0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fact-home-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--fact-color-text);
    text-decoration: none;
}

/* =============================================================================
   Marker "Vous etes ici" sur la carte
   ============================================================================= */
.fact-vous-etes-ici {
    background: none;
    border: none;
    /* Pas de transition : le marker apparait instantanement a la position GPS */
}

.fact-vous-etes-ici svg {
    display: block;
    width: 48px;
    height: 58px;
}

/* =============================================================================
   Boutons — Style Apple
   ============================================================================= */
.fact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fact-spacing-sm);
    border: none;
    border-radius: var(--fact-radius-sm);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.fact-btn:active {
    transform: scale(0.97);
}

.fact-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fact-btn--primary {
    background: var(--fact-color-primary);
    color: #ffffff;
    height: var(--fact-btn-height-lg);
    padding: 0 var(--fact-spacing-lg);
    border-radius: var(--fact-radius-md);
}

.fact-btn--primary:active {
    opacity: 0.85;
}

.fact-btn--secondary {
    background: var(--fact-color-gray-light);
    color: var(--fact-color-primary);
    height: var(--fact-btn-height-md);
    padding: 0 var(--fact-spacing-md);
}

.fact-btn--danger {
    background: var(--fact-color-danger);
    color: #ffffff;
    height: var(--fact-btn-height-lg);
    padding: 0 var(--fact-spacing-lg);
    border-radius: var(--fact-radius-md);
}

.fact-btn--ghost {
    background: transparent;
    color: var(--fact-color-primary);
    height: var(--fact-btn-height-md);
    padding: 0 var(--fact-spacing-md);
}

.fact-btn--ghost:active {
    background: var(--fact-color-primary-bg);
}

/* =============================================================================
   Bottom Sheet — Apple style
   ============================================================================= */
.fact-bs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Reduit de 0.96 a 0.82 : le blur n'est visible que si le fond est semi-transparent.
       saturate(180%) = reglage UIBlurEffect.Style.systemMaterial d'Apple :
       les couleurs de la carte sous la BS sont legerement amplifiees → effet verre givre */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: var(--fact-bs-radius);
    /* 3 couches d'ombres superposees : plus forte au bord superieur (contact carte),
       se dissout vers les cotes → effet de flottement directionnel, pas une ombre plate */
    box-shadow:
        0 -1px 0    rgba(0, 0, 0, 0.06),
        0 -4px 16px rgba(0, 0, 0, 0.08),
        0 -12px 48px rgba(0, 0, 0, 0.05);
    z-index: 10;
    /* ⚠️ Duree synchronisee avec BS_SPRING_DURATION dans fact-frontend.js (380ms)
       Modifier l'un → modifier l'autre. Courbe douce sans overshoot. */
    transition: height 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Empecher le pull-to-refresh */
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.fact-bs.fact-bs--dragging {
    transition: none; /* desactive pendant le drag pour suivre le doigt */
    will-change: height;         /* promotion GPU — actif UNIQUEMENT pendant le drag */
    /* Ombre renforcee : feedback visuel que la BS est "soulevee" */
    box-shadow:
        0 -1px 0    rgba(0, 0, 0, 0.09),
        0 -6px 20px rgba(0, 0, 0, 0.13),
        0 -20px 60px rgba(0, 0, 0, 0.08);
}

.fact-bs--collapsed {
    height: var(--fact-bs-height-collapsed);
}

.fact-bs--list {
    height: var(--fact-bs-height-list);
}

.fact-bs--detail {
    height: var(--fact-bs-height-detail);
}

.fact-bs--routing {
    height: var(--fact-bs-height-routing);
}

.fact-bs--search {
    height: var(--fact-bs-height-detail);
}

/* BS Header — contient uniquement la handle bar.
   Plus de position:relative : le bouton retour est sorti du header. */
.fact-bs__header {
    flex-shrink: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    cursor: grab;
}

/* Handle bar : trait gris centre dans le header, sert d'affordance de drag.
   La zone de tap reelle est le header entier (dom.bsHeader), pas juste ce trait. */
.fact-bs__handle {
    display: block;
    width: 36px;
    height: 5px;
    background: rgba(60, 60, 67, 0.3);
    border-radius: var(--fact-radius-full);
    flex-shrink: 0;
    /* Pas de padding/background-clip : le trait doit etre visible tel quel */
    pointer-events: none; /* Les clics sont captes par le header parent */
}

/* Micro-rebond du handle au tap sur le header — feedback haptique visuel */
@keyframes fact-handle-bounce {
    0%   { transform: scaleX(1); }
    40%  { transform: scaleX(1.15); }
    100% { transform: scaleX(1); }
}

.fact-bs__handle--bounce {
    animation: fact-handle-bounce 150ms ease-out;
}

/* Bouton fermer detail — rond gris clair avec croix gris fonce, en haut a droite */
.fact-detail__back {
    position: absolute;
    top: var(--fact-spacing-sm);
    right: var(--fact-spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--fact-color-gray-light);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 0;
}

.fact-detail__back svg {
    width: 14px;
    height: 14px;
    color: #3c3c43;
    flex-shrink: 0;
    display: block;
}

.fact-detail__back:active {
    opacity: 0.5;
}

@media (hover: none) {
    .fact-detail__back:hover {
        opacity: 1;
    }
}
.fact-detail__back:focus {
    outline: none;
}

/* Mini-card — resume du commerce en mode collapsed ─────────────────────────── */
.fact-bs__mini {
    display: none;
    align-items: center;
    gap: var(--fact-spacing-md);
    padding: 0 var(--fact-spacing-md) var(--fact-spacing-sm);
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fact-bs__mini-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fact-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fact-bs__mini-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.fact-bs__mini-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.fact-bs__mini-text {
    flex: 1;
    min-width: 0;
}

.fact-bs__mini-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fact-color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bouton croix mini-card — rond gris clair avec croix gris fonce */
.fact-bs__mini-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 50%;
    background: var(--fact-color-gray-light);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 0;
    margin-left: 0;
}

.fact-bs__mini-close svg {
    width: 14px;
    height: 14px;
    color: #3c3c43;
    display: block;
    flex-shrink: 0;
}

.fact-bs__mini-close:active {
    opacity: 0.5;
}

@media (hover: none) {
    .fact-bs__mini-close:hover {
        opacity: 1;
    }
}

/* Bouton "Y aller" mini-card — rond couleur primaire avec icone blanche */
.fact-bs__mini-route {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--fact-color-primary);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 0;
    margin-left: auto;
}

.fact-bs__mini-route svg {
    width: 18px;
    height: 18px;
    color: #fff;
    display: block;
    flex-shrink: 0;
}

.fact-bs__mini-route:active {
    opacity: 0.7;
}

@media (hover: none) {
    .fact-bs__mini-route:hover {
        opacity: 1;
    }
}

.fact-bs__mini-address {
    font-size: 12px;
    color: var(--fact-color-text-light);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   Liste scrollable
   ============================================================================= */
.fact-commerce-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* =============================================================================
   Barre de recherche — style Apple
   ============================================================================= */
.fact-search {
    padding: 0 var(--fact-spacing-md);
    margin-bottom: var(--fact-spacing-sm);
    flex-shrink: 0;
    /* Relatif pour positionner le bouton clear en absolute a droite */
    position: relative;
    transition: opacity 0.15s ease;
}

.fact-search__icon {
    position: absolute;
    left: calc(var(--fact-spacing-md) + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--fact-color-text-light);
    pointer-events: none;
}

.fact-search__input {
    width: 100%;
    height: var(--fact-input-height);
    padding: 0 40px 0 48px;
    border: 1px solid var(--fact-color-border);
    border-radius: var(--fact-radius-sm);
    font-size: 17px;
    font-family: inherit;
    background: var(--fact-color-bg);
    color: var(--fact-color-text);
    outline: none;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    box-shadow: none;
}

.fact-search__input::placeholder {
    color: rgba(60, 60, 67, 0.5);
}

.fact-search__input:focus {
    background: var(--fact-color-bg);
    border-color: var(--fact-color-primary);
    box-shadow: 0 0 0 3px var(--fact-color-primary-bg);
}

/* Masquer le bouton clear natif de WebKit (type=search) — on utilise le notre */
.fact-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* Bouton clear (croix) a droite du champ — visible uniquement quand le champ a du texte */
.fact-search__clear {
    position: absolute;
    right: calc(var(--fact-spacing-md) + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(60, 60, 67, 0.4);
    -webkit-tap-highlight-color: transparent;
    display: none; /* Affiche par JS quand l'input a du texte */
}

.fact-search__clear svg {
    width: 20px;
    height: 20px;
    display: block;
}

.fact-search__clear:active {
    color: rgba(60, 60, 67, 0.6);
}

/* Bouton "Effacer la recherche" dans l'etat vide apres un filtre sans resultat */
.fact-empty-state__clear-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fact-spacing-xs);
    padding: var(--fact-spacing-sm) var(--fact-spacing-md);
    background: var(--fact-color-gray-light);
    border: none;
    border-radius: var(--fact-radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--fact-color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fact-empty-state__clear-btn:active {
    background: rgba(118, 118, 128, 0.16);
}

/* =============================================================================
   Cards commerces — style Apple
   ============================================================================= */
.fact-commerce-card {
    display: flex;
    flex-direction: column;
    gap: var(--fact-spacing-xs);
    padding: var(--fact-spacing-md);
    border-bottom: 0.5px solid var(--fact-color-separator);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.fact-commerce-card:active {
    background: rgba(0, 0, 0, 0.04);
}

.fact-commerce-card__info {
    display: flex;
    align-items: center;
    gap: var(--fact-spacing-md);
}

.fact-commerce-card__icon {
    width: 64px;
    height: 64px;
    padding-top: 8px;
    border-radius: var(--fact-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Neutralise le baseline gap et le line-height du span wrapper autour du SVG */
.fact-commerce-card__icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* S'assurer que le SVG est bien block pour eviter le gap inline */
.fact-commerce-card__icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.fact-commerce-card__text {
    flex: 1;
    min-width: 0;
}

.fact-commerce-card__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--fact-color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fact-commerce-card__address {
    font-size: 13px;
    color: var(--fact-color-text-light);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   Bottom Sheet — Etat ROUTING (format mini-card)
   ============================================================================= */
.fact-bs__routing {
    flex-direction: column;
    padding: 0 var(--fact-spacing-md) var(--fact-spacing-sm);
    flex-shrink: 0;
}

.fact-bs__routing-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--fact-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 var(--fact-spacing-xs);
}

.fact-bs__routing-body {
    display: flex;
    align-items: center;
    gap: var(--fact-spacing-md);
}

/* =============================================================================
   POI sur la carte — Style Apple Maps
   ============================================================================= */

/* Leaflet marker container — reset du style par defaut Leaflet.
   AUCUNE transition sur ce container : Leaflet le repositionne via translate3d()
   a chaque zoom/pan. Toute transition (meme opacity) provoque un tremblement
   sur iOS WebKit a cause de la recomposition GPU. */
.fact-marker {
    background: none !important;
    border: none !important;
}

.fact-poi-wrapper {
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center center;
}

.fact-poi-wrapper--visible {
    opacity: 1;
    transform: scale(1);
}

/* Icone — fond colore par categorie, coins arrondis, ombre legere */
.fact-poi {
    display: flex;
    align-items: center;
    justify-content: center;
    /* --poi-color injecte inline par JS depuis icone_couleur */
    background: var(--poi-color, var(--fact-color-secondary));
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    /* Pas de transition sur transform : Leaflet utilise translate3d() pour positionner
       les markers, une transition CSS intercepte ces repositionnements au zoom
       et provoque un effet de tremblement. Seul box-shadow transite. */
    transition: box-shadow 0.15s ease;
}

.fact-poi:active {
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.fact-poi svg {
    width: 58%;
    height: 58%;
    fill: #ffffff;
    pointer-events: none; /* Le clic passe au wrapper parent */
    flex-shrink: 0;
}

/* ============================================================================
   POI Systeme — Points de depart et Zones de livraison
   Style identique a MBCDI : rectangle vertical, fond blanc, bordure coloree
   ============================================================================ */

/* Conteneur du POI systeme */
.fact-system-marker {
    position: relative;
    display: inline-block;
    pointer-events: none; /* Les POI systeme ne sont pas cliquables */
}

/* Rectangle (dot) — fond blanc, bordure coloree, ombre legere */
.fact-system-dot {
    width: 22px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    border: 2px solid var(--fact-system-border, #9e9e9e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icone interne — image uploadee ou fallback SVG */
.fact-system-icon {
    width: 16px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
}

.fact-system-icon img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
}

.fact-system-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Emoji fallback si pas d'icone */
.fact-system-icon--default {
    font-size: 14px;
    line-height: 1;
}

/* Label a droite du dot — positionne en absolu */
.fact-system-label {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #1C1C1E;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

/* Label masque en dessous du seuil de zoom */
.fact-system-marker--no-label .fact-system-label {
    display: none;
}

/* === Variante Point de depart — bordure verte === */
.fact-system-marker--pdp .fact-system-dot {
    border-color: var(--fact-color-depart, #34C759);
}

/* === Variante Zone de livraison — bordure orange === */
.fact-system-marker--zone .fact-system-dot {
    border-color: #FF9500;
}

/* Animation pulse sur le commerce de destination actif */
.fact-poi--pulse {
    animation: fact-pulse 2s ease-in-out infinite;
}

@keyframes fact-pulse {
    0%, 100% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.18),
            0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    50% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.18),
            0 0 0 10px rgba(0, 122, 255, 0);
    }
}

/*
 * Label nom commerce
 *
 * Positionnement : gere exclusivement par JS (left/top dynamiques).
 * Ne pas mettre de valeur fixe de left/top ici — le JS les calcule
 * selon l'algorithme d'anti-collision.
 *
 * Lisibilite : text-shadow blanc sur 4 cotes evite un fond opaque
 * qui masquerait les elements de la carte en dessous.
 */
.fact-poi-label {
    position: absolute;
    /* left, top : definis par updateCommerceLabels() */
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.3;
    color: var(--fact-color-text);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    display: none;
    padding: 2px 6px;     /* 12px total — correspond a l'estimation JS (title.length*6.5 + 12) */
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

/* =============================================================================
   Zone de travaux hachuree (SVG pattern applique via JS)
   ============================================================================= */
/* Note : !important necessaire ici car Leaflet pose fill et fill-opacity en inline
   via path.setAttribute(). Aucune specificite CSS ne surcharge un style inline
   sans !important. C'est le seul cas dans cette feuille ou il est inevitable. */
#fact-map path.fact-hatch-polygon {
    fill: url(#fact-hatch-pattern) !important;
    fill-opacity: 1 !important;
}

/* =============================================================================
   Etat vide (aucun commerce)
   ============================================================================= */
.fact-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--fact-spacing-xl);
    text-align: center;
}

.fact-empty-state__icon {
    width: 48px;
    height: 48px;
    color: var(--fact-color-text-light);
    margin-bottom: var(--fact-spacing-md);
    opacity: 0.5;
}

.fact-empty-state__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0 0 var(--fact-spacing-xs);
}

.fact-empty-state__subtitle {
    font-size: 14px;
    color: var(--fact-color-text-light);
    margin: 0 0 var(--fact-spacing-md);
}

/* =============================================================================
   Skeleton screens (chargement) — Apple style
   ============================================================================= */
.fact-skeleton-card {
    display: flex;
    align-items: center;
    gap: var(--fact-spacing-md);
    padding: var(--fact-spacing-md);
    border-bottom: 0.5px solid var(--fact-color-separator);
}

.fact-skeleton {
    background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);
    background-size: 200% 100%;
    animation: fact-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--fact-radius-sm);
}

.fact-skeleton--icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fact-radius-sm);
    flex-shrink: 0;
}

.fact-skeleton-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--fact-spacing-xs);
}

.fact-skeleton--line {
    height: 14px;
}

.fact-skeleton--line-lg {
    width: 70%;
}

.fact-skeleton--line-sm {
    width: 45%;
}

.fact-skeleton--line-xs {
    width: 30%;
    height: 12px;
}

@keyframes fact-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================================
   Toast geolocalisation — feedback acquisition GPS
   ============================================================================= */
.fact-geo-toast {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    animation: fact-toast-in 0.2s ease;
}

@keyframes fact-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.fact-geo-toast__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fact-spin 0.8s linear infinite;
}

@keyframes fact-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   Highlight recherche
   ============================================================================= */
mark {
    background: var(--fact-color-primary-bg);
    color: var(--fact-color-primary);
    padding: 0 2px;
    border-radius: 3px;
}

/* =============================================================================
   Modale Apple-style (geolocalisation, point de depart)
   ============================================================================= */
.fact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fact-spacing-lg);
    transition: background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.fact-modal-overlay--visible {
    background: rgba(0, 0, 0, 0.4);
}

.fact-modal {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--fact-radius-md);
    width: 100%;
    max-width: 400px;
    padding: var(--fact-spacing-lg);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 2px 12px rgba(0, 0, 0, 0.08);
}

.fact-modal-overlay--visible .fact-modal {
    transform: scale(1);
    opacity: 1;
}

.fact-modal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--fact-spacing-md);
    background: var(--fact-color-primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fact-modal__icon svg {
    width: 28px;
    height: 28px;
    fill: var(--fact-color-primary);
}

.fact-modal__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 0 0 var(--fact-spacing-sm);
    color: var(--fact-color-text);
}

.fact-modal__text {
    font-size: 14px;
    text-align: center;
    color: var(--fact-color-text-light);
    margin: 0 0 var(--fact-spacing-lg);
    line-height: 1.5;
}

.fact-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--fact-spacing-sm);
}

.fact-modal__btn {
    width: 100%;
    justify-content: center;
}

.fact-modal__options {
    display: flex;
    flex-direction: column;
    gap: var(--fact-spacing-sm);
    margin-bottom: var(--fact-spacing-lg);
}

.fact-modal__option {
    display: flex;
    align-items: center;
    gap: var(--fact-spacing-md);
    padding: var(--fact-spacing-md);
    background: var(--fact-color-gray-light);
    border: none;
    border-radius: var(--fact-radius-sm);
    text-align: left;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    color: var(--fact-color-text);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.fact-modal__option:active {
    background: rgba(118, 118, 128, 0.16);
    transform: scale(0.98);
}

.fact-modal__option svg {
    color: var(--fact-color-primary);
    flex-shrink: 0;
}

.fact-modal__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--fact-spacing-sm);
    padding: var(--fact-spacing-md);
    background: rgba(255, 149, 0, 0.08);
    border-radius: var(--fact-radius-sm);
    font-size: 13px;
    color: var(--fact-color-text-light);
    line-height: 1.4;
}

/* Option PdP suggeree (le plus proche de la position GPS) */
.fact-modal__option--suggested {
    border: 2px solid var(--fact-color-primary);
    position: relative;
}

.fact-modal__option--suggested::after {
    content: 'Le plus proche';
    position: absolute;
    top: -9px;
    right: 12px;
    background: var(--fact-color-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 8px;
    border-radius: var(--fact-radius-full);
    line-height: 16px;
}

/* =============================================================================
   Horaires — accordeon style Google Maps
   ============================================================================= */

.fact-horaires {
    margin: var(--fact-spacing-sm) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fact-horaires__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

/* Hover neutre (pas de couleur primaire) */
.fact-horaires__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
}

/* Supprimer le focus persistant apres clic sur mobile */
.fact-horaires__toggle:focus {
    outline: none;
}

/* Focus visible uniquement au clavier (accessibilite) */
.fact-horaires__toggle:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.fact-horaires__ico {
    width: 16px;
    height: 16px;
    color: var(--fact-color-text-light);
    flex-shrink: 0;
}

.fact-horaires__badge {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

/* Ouvert → vert */
.fact-horaires__badge--ouvert {
    color: var(--fact-color-success);
}

/* Ferme bientot → orange */
.fact-horaires__badge--bientot {
    color: var(--fact-color-warning);
}

/* Ferme → rouge */
.fact-horaires__badge--ferme {
    color: var(--fact-color-danger);
}

.fact-horaires__chevron {
    width: 18px;
    height: 18px;
    color: var(--fact-color-text-light);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.fact-horaires__toggle[aria-expanded="true"] .fact-horaires__chevron {
    transform: rotate(180deg);
}

.fact-horaires__semaine {
    padding-bottom: 8px;
}

.fact-horaires__ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 13px;
    color: var(--fact-color-text-light);
}

.fact-horaires__ligne--actif {
    color: var(--fact-color-text);
    font-weight: 600;
}

.fact-horaires__jour {
    min-width: 36px;
    flex-shrink: 0;
}

.fact-horaires__creneaux {
    text-align: right;
    color: var(--fact-color-text);
}

.fact-horaires__creneaux--ferme {
    color: var(--fact-color-text-light);
    font-style: italic;
}

/* =============================================================================
   Safe area (iPhone notch)
   ============================================================================= */
/* Fallback : fond opaque si le navigateur ne supporte pas backdrop-filter.
   Sans ce bloc, le fond semi-transparent (0.82) serait illisible sur Firefox < 103
   et Android Chrome < 76. */
@supports not (backdrop-filter: blur(1px)) {
    .fact-bs {
        background: rgba(255, 255, 255, 0.97);
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fact-bs {
        padding-bottom: env(safe-area-inset-bottom);
        /* La hauteur de la BS augmente → la carte doit descendre son bord bas en consequence */
    }
    #fact-map {
        /* calc() : hauteur BS collapsed + zone de geste iPhone */
        bottom: calc(var(--fact-bs-height-collapsed) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Erreur fond de carte ───────────────────────────────────────────────── */
.fact-map-error {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fact-bg, #f5f5f5);
    color: var(--fact-text, #333);
}
.fact-map-error__content {
    text-align: center;
    max-width: 280px;
    padding: 2rem;
}
.fact-map-error__content svg {
    color: var(--fact-color-travaux, #e74c3c);
    margin-bottom: 1rem;
}
.fact-map-error__content p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.fact-tile-error-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--fact-color-travaux, #e74c3c);
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* =============================================================================
   Fin des styles frontend livreur.
   Les styles pieton sont dans fact-pieton.css (scope #fact-pieton .fp-*).
   ============================================================================= */