/* ══════════════════════════════════════════════════════════════════════
   LE TUNNEL DE RESERVATION ET LA TOURNEE
   ══════════════════════════════════════════════════════════════════════

   CES REGLES VIVAIENT DANS LE CODE DU POPUP D'ANNONCE.

   Elles avaient ete greffees a l'interieur du litteral de gabarit qui
   construit la feuille de style du popup — un bloc qui ne s'execute que si
   une annonce doit etre affichee. Or une annonce fermee est memorisee
   (`suzanneAnnoncesVues`) : au retour suivant, le popup ne s'affichait plus,
   la feuille n'etait jamais creee, et TOUT le style du tunnel et de la
   tournee disparaissait. La page retombait en texte brut empile.

   Le defaut dependait donc de ce que la visiteuse avait deja fait — le pire
   genre : impossible a reproduire a la demande, et invisible pour qui vient
   de vider son navigateur.

   Le style d'un ecran permanent n'a rien a faire dans le code d'un popup
   temporaire. Il est ici, charge par la page comme les autres.
   ══════════════════════════════════════════════════════════════════════ */

/* ===== Style reservation souveraine ===== */
                    .resa-souveraine {
                        background: rgba(255,255,255,.92);
                        border-radius: 18px;
                        padding: 26px 28px;
                        box-shadow: var(--shadow-light);
                        margin-bottom: 26px;
                    }
                    .resa-etape { margin-bottom: 22px; }
                    .resa-etape > label {
                        display: block; margin-bottom: 10px;
                        font-family: var(--font-primary);
                        font-size: 1.1rem; color: var(--dark-theme); font-weight: 600;
                    }
                    #resa-service {
                        width: 100%; padding: 13px 14px;
                        border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
                        background: #fff; color: var(--dark-theme);
                        /* 16px minimum : en dessous, iOS zoome au focus. */
                        font-size: 16px; font-family: var(--font-secondary);
                    }
                    .resa-jours {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                        gap: 10px;
                    }
                    .resa-jour {
                        display: flex; flex-direction: column; gap: 2px;
                        padding: 12px 14px; text-align: left;
                        border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
                        background: #fff; cursor: pointer;
                        font-family: var(--font-secondary);
                        /* 44 px minimum : en dessous, le pouce rate. */
                        min-height: 44px;
                        transition: border-color .2s, box-shadow .2s;
                    }
                    .resa-jour:hover { border-color: var(--primary-theme); }
                    .resa-jour.actif {
                        border-color: var(--primary-theme);
                        box-shadow: 0 0 0 2px var(--primary-theme) inset;
                    }
                    .resa-jour-nom { font-weight: 600; color: var(--dark-theme); text-transform: capitalize; }
                    .resa-jour-lieu { font-size: .85rem; color: var(--gray); }

                    .resa-heures {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
                        gap: 9px;
                    }
                    .resa-heure {
                        padding: 12px 8px; min-height: 44px;
                        border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
                        background: #fff; color: var(--dark-theme);
                        font-family: var(--font-secondary); font-size: 1rem;
                        cursor: pointer; transition: border-color .2s, background .2s;
                    }
                    .resa-heure:hover { border-color: var(--primary-theme); }
                    .resa-heure.actif {
                        background: var(--primary-theme); color: #fff;
                        border-color: var(--primary-theme);
                    }
                    .resa-valider {
                        margin-top: 18px; width: 100%;
                        padding: 16px; min-height: 52px;
                        border: 0; border-radius: 50px;
                        background: var(--truck-wave-gradient, var(--primary-theme));
                        color: #fff; font-weight: 700; font-size: 1.05rem;
                        font-family: var(--font-secondary); cursor: pointer;
                    }
                    .resa-valider[disabled] { opacity: .6; cursor: default; }
                    .resa-info, .resa-note {
                        font-size: .95rem; color: var(--gray); line-height: 1.5;
                        margin: 0 0 14px;
                    }
                    .resa-note { margin-top: 10px; font-size: .88rem; }
                    .resa-ok {
                        color: #1b7a3e; background: rgba(27,122,62,.08);
                        border-left: 3px solid #1b7a3e; padding: 12px 14px; border-radius: 8px;
                    }
                    .resa-erreur {
                        color: #a01b2e; background: rgba(160,27,46,.08);
                        border-left: 3px solid #a01b2e; padding: 12px 14px; border-radius: 8px;
                    }
                    /* Le bloc de connexion est une INVITATION, pas une erreur :
                       la cliente n'a rien fait de mal, il lui manque un compte.
                       Le teinter en rouge la ferait chercher sa faute. */
                    .resa-connexion {
                        background: rgba(0,0,0,.04);
                        border-left: 3px solid var(--primary-theme);
                        padding: 14px 16px; border-radius: 8px;
                    }
                    /* Liste d'attente : l'action secondaire (« Me retirer ») est un
                       lien, pas un deuxieme gros bouton qui rivaliserait avec l'offre. */
                    .resa-lien {
                        background: none; border: 0; padding: 4px 0; cursor: pointer;
                        font: inherit; font-weight: 600; color: var(--primary-theme);
                        text-decoration: underline; text-underline-offset: 3px;
                    }
                    .resa-lien[disabled] { opacity: .6; cursor: default; }
                    .resa-repli { margin-top: 10px; }
                    .resa-repli > summary {
                        cursor: pointer; font-family: var(--font-secondary);
                        color: var(--gray); padding: 10px 0;
                    }
                    @media (max-width: 480px) {
                        .resa-souveraine { padding: 18px 16px; }
                        .resa-jours { grid-template-columns: 1fr 1fr; }
                    }
                    /* ── LES PRESTATIONS CHOISIES ─────────────────────────
                       Des pastilles retirables, parce qu'un choix multiple
                       sans rappel visible est une devinette. */
                    .resa-choisies {
                        display: flex; flex-wrap: wrap; gap: 8px;
                        margin-top: 10px;
                    }
                    .resa-choisie {
                        display: inline-flex; align-items: center; gap: 8px;
                        padding: 8px 10px 8px 12px;
                        border: 1px solid rgba(0,0,0,.14); border-radius: 999px;
                        background: #fff; font-family: var(--font-secondary);
                        font-size: .92rem; color: var(--dark-theme);
                        /* 44 px minimum : en dessous, le pouce rate. */
                        min-height: 44px;
                    }
                    .resa-choisie-detail { color: var(--gray); font-size: .85rem; }
                    .resa-retirer {
                        border: 0; background: rgba(0,0,0,.06); cursor: pointer;
                        width: 28px; height: 28px; border-radius: 50%;
                        line-height: 1; font-size: 1.05rem; color: var(--gray);
                        display: inline-flex; align-items: center; justify-content: center;
                        transition: background .2s, color .2s;
                    }
                    .resa-retirer:hover { background: var(--primary-theme); color: #fff; }
                    .resa-total {
                        margin-top: 12px; font-family: var(--font-secondary);
                        font-weight: 600; color: var(--dark-theme);
                    }
                    .resa-total span { font-weight: 400; color: var(--gray); }
                    /* ===== Fin style reservation souveraine ===== */
                    /* ── LA TOURNEE ──────────────────────────────────────── */
                    .tournee-grille {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                        gap: 18px;
                    }
                    .tournee-etape {
                        background: rgba(255,255,255,.9);
                        border-radius: 16px;
                        padding: 20px 22px;
                        box-shadow: var(--shadow-light);
                        display: flex; flex-direction: column; gap: 6px;
                        border-top: 4px solid var(--primary-theme);
                    }
                    /* La journee en cours se distingue : c'est la seule
                       information qu'on cherche vraiment en arrivant sur la
                       page un mardi matin. */
                    .tournee-etape.aujourdhui {
                        border-top-color: var(--accent-theme);
                        box-shadow: 0 6px 24px rgba(0,0,0,.14);
                    }
                    .tournee-jour {
                        font-family: var(--font-primary);
                        font-size: 1.25rem; font-weight: 700;
                        color: var(--dark-theme);
                        text-transform: capitalize;
                        display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                    }
                    .tournee-badge {
                        font-family: var(--font-secondary);
                        font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
                        background: var(--accent-theme); color: #fff;
                        border-radius: 999px; padding: 2px 9px;
                    }
                    .tournee-lieu { font-weight: 600; color: var(--dark-theme); }
                    .tournee-adresse, .tournee-horaire {
                        font-size: .95rem; color: var(--gray); line-height: 1.45;
                    }
                    .tournee-horaire strong { color: var(--dark-theme); font-weight: 600; }
                    /* Le bouton d'itineraire. Pleine largeur : sur telephone,
                       c'est le geste principal de la carte — on ne le fait pas
                       chercher. 44 px de haut, la cible tactile minimale. */
                    .tournee-itineraire {
                        display: flex; align-items: center; justify-content: center;
                        gap: 8px; min-height: 44px; margin: 10px 0 0;
                        padding: 10px 14px; border-radius: 10px;
                        background: var(--primary-theme); color: #fff;
                        font-family: var(--font-secondary); font-size: .9rem;
                        font-weight: 600; text-decoration: none;
                        transition: filter .15s ease;
                    }
                    .tournee-itineraire::before { content: "➜"; font-size: 1rem; }
                    .tournee-itineraire:hover { filter: brightness(1.1); }
                    /* L'appel n'est pas l'action principale : il est propose
                       quand il n'y a PAS de lieu. Le presenter comme le bouton
                       d'itineraire ferait croire a une adresse connue. */
                    .tournee-itineraire.tournee-appel {
                        background: transparent; color: var(--primary-theme);
                        border: 1px solid var(--primary-theme);
                    }
                    .tournee-itineraire.tournee-appel::before { content: "☎"; }
                    .tournee-ferme { color: var(--gray); font-style: italic; }
                    .tournee-note {
                        margin-top: 18px; text-align: center;
                        font-size: .95rem; color: var(--gray);
                    }

                    /* ══ « Pour qui ? » en pastilles (24/09/2026) ══ */
                    .resa-etape-titre {
                        display: block; margin-bottom: 10px;
                        font-family: var(--font-primary);
                        font-size: 1.1rem; color: var(--dark-theme); font-weight: 600;
                    }
                    .resa-pq-liste { display: flex; flex-wrap: wrap; gap: 10px; }
                    .resa-pq {
                        position: relative; display: flex; align-items: center; gap: 10px;
                        padding: 7px 16px 7px 7px; min-height: 50px;
                        border: 1.5px solid rgba(0,0,0,.12); border-radius: 999px;
                        background: #fff; cursor: pointer;
                        transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
                    }
                    .resa-pq:hover { border-color: var(--primary-theme); transform: translateY(-1px); }
                    .resa-pq input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
                    .resa-pq-avatar {
                        width: 36px; height: 36px; flex: none; border-radius: 50%;
                        display: flex; align-items: center; justify-content: center;
                        background: var(--pq-couleur, var(--primary-theme)); color: #fff;
                        font-weight: 700; font-size: 1rem;
                        box-shadow: 0 3px 8px rgba(0,0,0,.15);
                    }
                    .resa-pq-texte { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
                    .resa-pq-nom { font-weight: 600; color: var(--dark-theme); }
                    .resa-pq-sous { font-size: .76rem; color: var(--gray); }
                    .resa-pq.actif {
                        border-color: var(--pq-couleur, var(--primary-theme));
                        background: color-mix(in srgb, var(--pq-couleur, #00BCD4) 8%, #fff);
                        box-shadow: 0 0 0 3px color-mix(in srgb, var(--pq-couleur, #00BCD4) 22%, transparent);
                    }
                    .resa-pq:has(input:focus-visible) { outline: 3px solid var(--primary-theme); outline-offset: 2px; }

                    /* ══ Panier : l'acompte s'annonce avant le clic ══ */
                    .cart-acompte-note {
                        margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px;
                        background: rgba(217,119,6,.1); color: #92400e;
                        font-size: .85rem; line-height: 1.4;
                    }

                    /* ══ Fenetre de validation animee (24/09/2026) ══ */
                    .fv-voile {
                        position: fixed; inset: 0; z-index: 10050;
                        display: flex; align-items: center; justify-content: center; padding: 16px;
                        background: rgba(0, 40, 44, .55);
                        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
                        opacity: 0; transition: opacity .26s ease;
                    }
                    .fv-voile.fv-visible { opacity: 1; }
                    .fv-carte {
                        --fv-accent: #16a34a; --fv-fond: rgba(22,163,74,.13);
                        position: relative; width: 100%; max-width: 440px;
                        max-height: calc(100vh - 32px); overflow-y: auto;
                        background: #fff; border-radius: 24px; padding: 22px 20px 18px;
                        text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28);
                        transform: translateY(26px) scale(.93); opacity: 0;
                        transition: transform .5s cubic-bezier(.2,1.35,.4,1), opacity .3s ease;
                    }
                    .fv-visible .fv-carte { transform: none; opacity: 1; }
                    .fv-carte::before {
                        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
                        border-radius: 24px 24px 0 0; background: var(--fv-accent);
                    }
                    .fv-attente { --fv-accent: var(--primary-theme); --fv-fond: rgba(0,188,212,.13); }
                    .fv-acompte { --fv-accent: #d97706; --fv-fond: rgba(217,119,6,.13); }
                    .fv-info    { --fv-accent: var(--dark-theme); --fv-fond: rgba(0,96,100,.1); }
                    .fv-erreur  { --fv-accent: var(--warning-color); --fv-fond: rgba(219,39,119,.1); }
                    .fv-icone {
                        width: 68px; height: 68px; margin: 0 auto 10px; border-radius: 50%;
                        display: flex; align-items: center; justify-content: center;
                        background: var(--fv-fond);
                    }
                    .fv-icone svg { width: 50px; height: 50px; overflow: visible; }
                    .fv-cercle {
                        fill: none; stroke: var(--fv-accent); stroke-width: 3;
                        stroke-dasharray: 164; stroke-dashoffset: 164;
                        transform: rotate(-90deg); transform-origin: 50% 50%;
                    }
                    .fv-trait {
                        fill: none; stroke: var(--fv-accent); stroke-width: 4.5;
                        stroke-linecap: round; stroke-linejoin: round;
                        stroke-dasharray: 60; stroke-dashoffset: 60;
                    }
                    .fv-texte { fill: var(--fv-accent); font: 700 28px/1 var(--font-secondary, sans-serif); opacity: 0; }
                    .fv-visible .fv-cercle { animation: fv-trace .6s .12s ease-out forwards; }
                    .fv-visible .fv-trait  { animation: fv-trace .42s .62s cubic-bezier(.3,1.4,.5,1) forwards; }
                    .fv-visible .fv-texte  { animation: fv-apparait .35s .6s ease-out forwards; }
                    .fv-visible .fv-icone  { animation: fv-onde .9s 1s ease-out; }
                    @keyframes fv-trace { to { stroke-dashoffset: 0; } }
                    @keyframes fv-apparait { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
                    @keyframes fv-onde {
                        from { box-shadow: 0 0 0 0 var(--fv-fond); }
                        to   { box-shadow: 0 0 0 22px rgba(0,0,0,0); }
                    }
                    .fv-titre { font-family: var(--font-primary); font-size: 1.42rem; color: var(--dark-theme); margin: 0 0 6px; }
                    .fv-message { color: var(--gray); line-height: 1.45; margin: 0 0 10px; font-size: .92rem; }
                    .fv-details {
                        text-align: left; margin: 0 0 10px; padding: 2px 14px;
                        background: #f6fbfc; border: 1px solid rgba(0,96,100,.1); border-radius: 12px;
                    }
                    .fv-ligne {
                        display: flex; justify-content: space-between; gap: 14px;
                        padding: 7px 0; border-bottom: 1px solid rgba(0,96,100,.08); font-size: .92rem;
                    }
                    .fv-ligne:last-child { border-bottom: 0; }
                    .fv-ligne dt { color: var(--gray); margin: 0; flex: none; }
                    .fv-ligne dd { margin: 0; color: var(--dark-theme); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
                    .fv-note { font-size: .88rem; color: var(--gray); margin: 0 0 16px; line-height: 1.45; }
                    .fv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-bottom: 6px; }
                    .fv-bouton {
                        min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px;
                        font-size: 1rem; font-weight: 700; cursor: pointer;
                        font-family: var(--font-secondary, sans-serif);
                    }
                    .fv-bouton.fv-principal {
                        background: var(--truck-wave-gradient); color: #fff;
                        box-shadow: 0 8px 20px rgba(255,46,99,.25);
                    }
                    .fv-bouton.fv-secondaire { background: transparent; color: var(--gray); text-decoration: underline; min-height: 44px; }
                    .fv-bouton:disabled { opacity: .6; cursor: default; }
                    .fv-bouton:focus-visible { outline: 3px solid var(--primary-theme); outline-offset: 2px; }
                    @media (prefers-reduced-motion: reduce) {
                        .fv-voile, .fv-carte { transition: none; }
                        .fv-cercle, .fv-trait { stroke-dashoffset: 0 !important; animation: none !important; }
                        .fv-texte { opacity: 1 !important; animation: none !important; }
                        .fv-icone { animation: none !important; }
                    }