/* ============================================
   PITCHU FIDÉLITÉ (V3)
   ============================================
   Par-dessus budget.css. Pensée pour le téléphone d'abord : c'est là qu'on
   ouvre la page, debout à la caisse, souvent pressé.
   Toutes les classes commencent par « fid- ».
*/

.fid-main {
    padding-bottom: 2rem;
}

/* ---------- Bandeau hors ligne ---------- */

.fid-badge-horsligne {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    background: var(--accent-amber-light);
    color: #96650a;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Filtre par pays ---------- */

.fid-filtres {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fid-filtres::-webkit-scrollbar { display: none; }

.fid-filtre {
    flex: 0 0 auto;
    min-width: 3.2rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fid-filtre:first-child { font-size: 0.85rem; }

.fid-filtre.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Un pays sans aucune carte reste visible mais grisé */
.fid-filtre.vide {
    opacity: 0.35;
}

/* ---------- Barre recherche + actions ---------- */

.fid-barre {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.7rem;
}

.fid-recherche {
    flex: 1 1 auto;
    min-width: 0;
}

.fid-barre .btn-sm { flex: 0 0 auto; white-space: nowrap; }

.fid-hint {
    margin: 0 0 0.8rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* ---------- Grille des magasins : 2 colonnes ---------- */

.fid-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

/* Sur grand écran on en met plus, mais jamais moins de 2 */
@media (min-width: 700px) {
    .fid-grille { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

.fid-tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.fid-tuile:active { transform: scale(0.975); }
.fid-tuile:hover { box-shadow: var(--shadow); }

/* Le visuel : on ne montre que le HAUT de la carte (logo + nom du magasin),
   le code-barres du bas est volontairement coupé. */
.fid-tuile-visuel {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 134;
    overflow: hidden;
    background: var(--bg-card-hover);
}

.fid-tuile-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Repli sans image : pastille colorée avec les initiales */
.fid-tuile-initiales {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fid-tuile-drapeau {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.fid-tuile-nom {
    padding: 0.5rem 0.55rem 0.6rem;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    text-align: center;
}

.fid-tuile-titulaire {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ---------- Mode réordonner ---------- */

.fid-tuile-fleches {
    display: none;
    gap: 0.3rem;
    justify-content: center;
    padding: 0 0.4rem 0.5rem;
}

body.fid-ordre .fid-tuile-fleches { display: flex; }

/* En mode ordre, une tuile se prend et se déplace au doigt.
   touch-action: none empêche la page de défiler pendant qu'on glisse. */
body.fid-ordre .fid-tuile {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* La tuile qu'on tient : soulevée, et transparente au pointeur pour qu'on
   puisse détecter celle qui se trouve dessous. */
.fid-tuile.fid-glisse {
    pointer-events: none;
    cursor: grabbing;
    opacity: 0.85;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
    z-index: 5;
}

/* Les autres se poussent doucement pour montrer où ça va tomber */
body.fid-ordre .fid-tuile:not(.fid-glisse) {
    transition: transform 0.15s ease;
}

.fid-fleche {
    flex: 1 1 0;
    padding: 0.35rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.fid-fleche:disabled { opacity: 0.3; cursor: default; }
.fid-fleche:not(:disabled):hover { background: var(--accent-light); border-color: var(--accent); }

.fid-vide {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    text-align: center;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

/* ---------- La carte en grand ---------- */

.fid-vue {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    overflow-y: auto;
    background: var(--bg);
    /* Encoche et barre du bas des iPhone */
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

.fid-vue.visible { display: block; }

.fid-vue-inner {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.fid-vue-fermer {
    position: sticky;
    top: 0.5rem;
    float: right;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.fid-vue-tete {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-top: 0.3rem;
}

/* Le visuel est un bandeau large (logo + nom), pas un carré : on garde ses
   proportions, sinon le logo est rogné n'importe comment. */
.fid-vue-logo {
    flex: none;
    width: 6.2rem;
    aspect-ratio: 440 / 137;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-card-hover);
    font-size: 1.1rem;
    font-weight: 700;
}

.fid-vue-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.fid-vue-tete h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--text);
}

.fid-vue-tete p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ---------- Le code à scanner ---------- */
/* Fond blanc obligatoire et marge autour : les douchettes de caisse ont
   besoin de contraste et d'une zone calme autour du code. */

.fid-code {
    padding: 1.25rem 1rem;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

/* display:block est nécessaire pour que le SVG se dimensionne correctement,
   mais un bloc se colle à gauche : d'où les marges automatiques. */
.fid-code svg,
.fid-code canvas,
.fid-code img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#fidCodeQr img,
#fidCodeQr canvas {
    width: min(62vw, 15rem);
    height: auto;
    image-rendering: pixelated;
}

.fid-code-numero {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #111;
    word-break: break-all;
}

.fid-code-absent {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---------- Informations sous le code ---------- */

.fid-infos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.fid-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.fid-info-cle {
    flex: none;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.fid-info-val {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.fid-info-note {
    display: block;
    padding: 0.65rem 0.8rem;
    background: var(--accent-amber-light);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.5;
    color: #7a5209;
}

/* Bandeau « pas encore testé en caisse » */
.fid-averti {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    background: var(--accent-amber-light);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.45;
    color: #7a5209;
}

.fid-averti button {
    flex: none;
    margin-left: auto;
    padding: 0.3rem 0.65rem;
    border: 1px solid #c99a2e;
    border-radius: var(--radius-full);
    background: #fff;
    color: #7a5209;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.fid-vue-actions {
    display: flex;
    gap: 0.5rem;
}

.fid-vue-actions button { flex: 1 1 0; justify-content: center; }

/* ---------- Fenêtre de modification ---------- */

/* La carte en grand est en z-index 1200. Sans ça, la fenêtre de modification
   (1000 par défaut) s'ouvrirait DERRIÈRE elle : on la croirait cassée. */
#fidModalOverlay { z-index: 1300; }

.fid-modal { max-width: 32rem; }

/* Trois boutons ne tiennent pas sur la largeur d'un téléphone : ils passent
   à la ligne et se partagent la place au lieu de déborder. */
.fid-modal .modal-footer {
    flex-wrap: wrap;
    align-items: center;
    padding: 0.9rem 1rem;
    gap: 0.5rem;
}

.fid-modal .modal-footer button {
    flex: 1 1 7rem;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

/* Supprimer reste à part, à gauche, et prend toute une ligne au besoin */
.fid-modal .modal-footer #fidModalSuppr {
    flex: 1 1 100%;
    order: 3;
    margin-right: 0 !important;
    color: var(--accent-red);
    border-color: var(--accent-red-light);
}

.fid-modal .modal-body { padding: 1.1rem; }

.fid-textarea {
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.fid-aide {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.fid-pays-choix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.fid-pays-choix button {
    padding: 0.55rem 0.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.fid-pays-choix button.actif {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent-dark);
    font-weight: 600;
}

.fid-couleurs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fid-couleur {
    width: 2rem;
    height: 2rem;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.fid-couleur.actif {
    border-color: var(--text);
    transform: scale(1.1);
}