/* =====================================================================
   carte-publique.css — Habillage de la carte client (page ouverte au QR code)
   Chargee UNIQUEMENT par carte/index.php, apres style.css et adaptatif.css.
   Ne touche ni a la caisse ni au tableau de bord : tout est porte par .page-carte.

   Objectif : la page s'ouvre sur un telephone bon marche, en 4G, souvent
   debout dans la rue. Priorite absolue = voir des plats tout de suite,
   ajouter d'un pouce, comprendre le total sans reflechir.

   Les couleurs restent celles du restaurant (--rose / --noir injectees par
   bloc_couleurs()). Aucune couleur de marque n'est ecrite en dur ici.
   ===================================================================== */

.page-carte {
    /* Fond creme tres leger plutot que gris bleute : les photos de plats
       ressortent mieux sur un neutre chaud. */
    --fond-carte: #faf7f4;
    --encre: #1a1614;
    --encre-douce: #6b6157;
    --bord-doux: #e8e1d9;
    --ombre-plat: 0 1px 2px rgba(26, 22, 20, .06), 0 8px 20px rgba(26, 22, 20, .05);
    --hauteur-entete: 60px;

    background: var(--fond-carte);
    color: var(--encre);
    font-family: "Bricolage Grotesque", "Segoe UI", Roboto, Arial, sans-serif;
    /* Marge de securite iPhone (barre d'accueil). */
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------------------
   1. En-tete : compacte, pour laisser la place aux plats
   ------------------------------------------------------------------ */
.page-carte .carte-entete {
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    /* Le trait rose epais est remplace par un filet fin : moins de bruit,
       la couleur du restaurant reste presente sur les prix et les boutons. */
    box-shadow: 0 1px 0 var(--rose);
}
.page-carte .logo-carte .logo-img { max-height: 40px; }

.page-carte .carte-resto-nom strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    /* Un nom trop long (numeros de telephone saisis dans le champ nom)
       ne doit pas pousser toute la carte vers le bas. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-carte .carte-resto-nom span {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------
   2. Filtres de categories : un seul rail qui defile
   9 categories sur 4 lignes reculaient les plats hors de l'ecran.
   ------------------------------------------------------------------ */
/* La section doit occuper toute la largeur : sans cela, le rail de filtres
   (plus large que l'ecran) etire son parent et fait defiler la page
   horizontalement. min-width:0 autorise le rail a se retrecir. */
.page-carte .carte-plats { width: 100%; min-width: 0; }

.page-carte .filtres-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Colle sous l'en-tete : le client change de categorie sans remonter. */
    position: sticky;
    top: var(--hauteur-entete);
    z-index: 20;
    margin: 0 0 16px;
    padding: 10px 0;
    background: var(--fond-carte);
    /* Masque la barre de defilement sans bloquer le geste. */
    scrollbar-width: none;
}
.page-carte .filtres-categories::-webkit-scrollbar { display: none; }

.page-carte .filtre-cat {
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--bord-doux);
    color: var(--encre-douce);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.page-carte .filtre-cat.actif {
    background: var(--noir);
    border-color: var(--noir);
    color: #fff;
}

/* ---------------------------------------------------------------------
   3. Grille de plats : 2 colonnes stables, texte aligne a gauche
   Le texte centre se lit mal en colonne etroite ; a gauche, l'oeil
   descend en ligne droite et compare les prix d'un coup.
   ------------------------------------------------------------------ */
.page-carte .carte-corps { padding: 16px; gap: 24px; }

.page-carte .grille-plats {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
}

/* Le rembourrage est porte par la carte elle-meme et non par chaque
   enfant : c'est ce qui garantit que le bouton s'aligne exactement sur le
   texte, sans marge laterale qui deborde. Seule la photo sort du cadre. */
.page-carte .plat-carte {
    align-items: stretch;
    text-align: left;
    padding: 0 12px 12px;
    gap: 0;
    border: 1px solid var(--bord-doux);
    border-radius: 16px;
    box-shadow: var(--ombre-plat);
    overflow: hidden;
}

.page-carte .plat-carte img {
    /* Bord a bord : la photo ressort du rembourrage de la carte. */
    width: calc(100% + 24px);
    margin: 0 -12px;
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 0;
    /* Toutes les photos au meme cadrage : la grille arrete de dandiner. */
    object-fit: cover;
    background: var(--bord-doux);
}
.page-carte .plat-carte .plat-emoji {
    width: calc(100% + 24px);
    margin: 0 -12px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    background: linear-gradient(160deg, #f3ece5, #e9dfd4);
}

.page-carte .plat-carte .plat-nom {
    width: 100%;
    padding: 10px 0 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
}
.page-carte .plat-carte .plat-desc {
    width: 100%;
    padding: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--encre-douce);
    /* Deux lignes suffisent : au-dela, la description repousse le prix. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Le prix est la donnee que le client cherche : il passe en tete de
   hierarchie, en chiffres tabulaires pour que la colonne s'aligne. */
.page-carte .plat-carte .plat-prix {
    width: 100%;
    margin-top: auto;
    padding: 10px 0 0;
    color: var(--encre);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    text-align: left;
}

/* Bouton plus bas et sans degrade : il accompagne le prix au lieu de lui
   voler la vedette. On gagne une dizaine de pixels par plat. */
.page-carte .plat-carte .btn-ajouter {
    margin: 8px 0 0;
    padding: 0 14px;
    height: 40px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    background: var(--rose);
    box-shadow: none;
}
.page-carte .plat-carte .btn-ajouter:active { transform: scale(.97); }

/* Note : prix et bouton cote a cote ont ete essayes puis abandonnes.
   Dans une colonne de 190 px, "3 000 FCFA" + le bouton depassent et
   repassent a la ligne de facon irreguliere. Empiles, c'est previsible
   sur tous les ecrans, et le prix garde toute la largeur pour lui. */

/* ---------------------------------------------------------------------
   4. Panier : volet plus lisible, action toujours visible
   ------------------------------------------------------------------ */
.page-carte .carte-panier {
    border-radius: 18px;
    border-color: var(--bord-doux);
    box-shadow: var(--ombre-plat);
}
.page-carte .carte-panier h2 { font-size: 17px; font-weight: 700; }

.page-carte .ligne-total {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}
.page-carte .champ-inline input {
    min-height: 46px;
    border-radius: 10px;
    font-size: 16px; /* 16px = pas de zoom automatique sur iOS */
    font-family: inherit;
}
.page-carte .bouton-whatsapp {
    border-radius: 12px;
    font-family: inherit;
    letter-spacing: -.01em;
}
.page-carte .bouton-whatsapp:active { transform: scale(.99); }
.page-carte .note-commande { color: var(--encre-douce); }

/* ---------------------------------------------------------------------
   5. Accessibilite : focus visible au clavier, mouvement respectueux
   ------------------------------------------------------------------ */
.page-carte :focus-visible {
    outline: 3px solid var(--rose);
    outline-offset: 2px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .page-carte * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   6. Telephone : le pouce d'abord
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .page-carte .carte-corps { padding: 14px; }

    /* Au telephone, c'est le rail de categories qu'il faut garder sous la
       main, pas le nom du restaurant : l'en-tete defile, les filtres collent.
       Cela evite aussi que la hauteur variable du nom decale le rail. */
    .page-carte .carte-entete { position: static; }
    .page-carte .filtres-categories {
        top: 0;
        /* Bord a bord : le rail traverse tout l'ecran, sinon la derniere
           categorie semble coupee. max-width doit sauter, sinon le rail
           est rogne a la largeur du parent et se decale. */
        max-width: none;
        width: auto;
        padding: 10px 14px;
        margin-left: -14px;
        margin-right: -14px;
        box-shadow: 0 6px 12px -8px rgba(26, 22, 20, .35);
    }

    /* Bouton panier : barre pleine largeur en bas, atteignable au pouce,
       plutot qu'une pastille dans le coin. Le total y est lisible. */
    .page-carte .fab-panier.visible {
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        justify-content: center;
        gap: 12px;
        height: 54px;
        padding: 0 20px;
        border-radius: 14px;
        font-size: 16px;
        box-shadow: 0 10px 28px rgba(26, 22, 20, .28);
    }
    .page-carte .fab-total { margin-left: auto; font-variant-numeric: tabular-nums; }

    /* Poignee de volet : indique qu'on peut refermer. */
    .page-carte .carte-panier { padding-top: 8px; }
    .page-carte .carte-panier-entete::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--bord-doux);
    }
    .page-carte .carte-panier-entete { position: relative; padding-top: 14px; }
    .page-carte .fermer-panier { min-width: 44px; min-height: 44px; }

    .page-carte .carte-plats { padding-bottom: 92px; }
}

/* Tres petits ecrans (Android d'entree de gamme) : on garde 2 colonnes,
   c'est ce qui permet de comparer deux plats sans faire defiler. */
@media (max-width: 380px) {
    .page-carte .grille-plats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .page-carte .plat-carte .plat-nom { font-size: 13.5px; }
    .page-carte .plat-carte .btn-ajouter { padding: 0 10px; }
}

/* ---------------------------------------------------------------------
   7. Sur place ou livraison
   Deux grandes cibles plutot que deux petits ronds : au telephone, un
   radio de 13 px se rate une fois sur deux.
   ------------------------------------------------------------------ */
.page-carte .choix-service {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.page-carte .option-service {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 8px 10px;
    border: 2px solid var(--bord-doux);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.page-carte .option-service input { accent-color: var(--rose); }
.page-carte .option-service:has(input:checked) {
    border-color: var(--rose);
    background: color-mix(in srgb, var(--rose) 8%, transparent);
}

/* ---------------------------------------------------------------------
   8. Mise en page centree et compacte (Android, iPhone, tablette, PC)
   Tout est dimensionne avec clamp()/auto-fill : aucune largeur d'appareil
   n'est codee en dur, la carte s'adapte donc a n'importe quel ecran.
   ------------------------------------------------------------------ */
.page-carte { font-size: clamp(14px, .9vw + 11px, 16px); }

/* En-tete : logo + nom centres, meme gabarit que le corps de page. */
.page-carte .carte-entete {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    padding: 10px 16px;
}
.page-carte .carte-resto-nom { align-items: center; }
.page-carte .carte-resto-nom strong { font-size: clamp(15px, 2.4vw, 18px); }

/* Corps : colonne centree, plats au centre, panier a droite sur grand ecran. */
.page-carte .carte-corps {
    max-width: 1080px;
    padding: clamp(10px, 2.5vw, 20px);
    gap: clamp(14px, 2.5vw, 24px);
}

/* Filtres centres ; « safe » garde le debut accessible quand le rail defile. */
.page-carte .filtres-categories { justify-content: safe center; }
.page-carte .filtre-cat { padding: 7px 13px; font-size: 13px; }

/* Grille : colonnes de largeur raisonnable, groupe centre, dernieres
   lignes incompletes centrees elles aussi. */
.page-carte .grille-plats {
    grid-template-columns: repeat(auto-fit, minmax(clamp(132px, 38vw, 160px), 1fr));
    gap: clamp(8px, 2vw, 14px);
    justify-content: center;
}
@media (min-width: 640px) {
    .page-carte .grille-plats { grid-template-columns: repeat(auto-fill, 160px); }
}

.page-carte .plat-carte {
    align-items: center;
    text-align: center;
    padding: 0 10px 10px;
    border-radius: 14px;
}
.page-carte .plat-carte img,
.page-carte .plat-carte .plat-emoji {
    width: calc(100% + 20px);
    margin: 0 -10px;
    aspect-ratio: 1 / .8;
}
.page-carte .plat-carte .plat-nom { padding-top: 8px; font-size: 13.5px; }
.page-carte .plat-carte .plat-desc { font-size: 11.5px; -webkit-line-clamp: 2; }
.page-carte .plat-carte .plat-prix {
    padding-top: 6px;
    font-size: 15px;
    text-align: center;
    color: var(--rose);
}
.page-carte .plat-carte .btn-ajouter {
    width: 100%;
    height: 36px;
    margin-top: 8px;
    font-size: 13.5px;
    border-radius: 9px;
}

/* Panier compact. */
.page-carte .carte-panier { width: 310px; padding: 14px; }
.page-carte .panier-vide { text-align: center; font-size: 13.5px; color: var(--encre-douce); margin: 14px 0; }
.page-carte .ligne-total { font-size: 16px; }

.page-carte .champs-client { display: grid; gap: 2px; }
.page-carte .champ-inline { font-size: 12.5px; margin: 8px 0 0; }
.page-carte .champ-inline input { min-height: 42px; margin-top: 4px; }
.page-carte .requis { color: var(--rose); }
.page-carte .facultatif {
    font-weight: 500;
    font-size: 11px;
    color: var(--encre-douce);
    margin-left: 4px;
}
.page-carte .option-service { min-height: 42px; font-size: 13px; }
.page-carte .bouton-whatsapp { padding: 13px; font-size: 15px; margin-top: 12px; }
#btn-verifier { background: var(--rose); }
.page-carte .note-commande { font-size: 11.5px; }

/* Volet panier (<= 900 px) : centre et borne sur tablette. */
@media (max-width: 900px) {
    .page-carte .carte-corps { padding-inline: 12px; }
    .page-carte .carte-panier {
        width: auto;
        max-width: 540px;
        margin-inline: auto;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    }
    .page-carte .fab-panier.visible {
        max-width: 480px;
        margin-inline: auto;
        height: 48px;
        font-size: 15px;
    }
}

/* ---------------------------------------------------------------------
   9. Recapitulatif de commande (fenetre <dialog>)
   Le client relit ce qu'il envoie : lignes, total, puis ses infos.
   ------------------------------------------------------------------ */
.recap {
    width: min(92vw, 420px);
    max-height: 88vh;
    padding: 20px 18px 16px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--encre);
    font-family: inherit;
    box-shadow: 0 24px 60px rgba(26, 22, 20, .35);
    overflow-y: auto;
}
.recap::backdrop { background: rgba(26, 22, 20, .55); backdrop-filter: blur(2px); }
.recap h2 { margin: 0 0 12px; font-size: 18px; text-align: center; }

.recap-lignes { list-style: none; margin: 0; padding: 0; }
.recap-lignes li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px dashed var(--bord-doux);
    font-size: 14px;
}
.recap-lignes b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap-qte {
    min-width: 30px;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--rose) 10%, transparent);
    color: var(--rose);
    font-weight: 800;
    font-size: 12.5px;
    text-align: center;
}

.recap-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--encre);
    color: #fff;
    font-size: 13px;
}
.recap-total strong { font-size: 19px; font-variant-numeric: tabular-nums; }

.recap-infos { margin: 0 0 10px; display: grid; gap: 6px; }
.recap-infos div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.recap-infos div[hidden] { display: none; }
.recap-infos dt { color: var(--encre-douce); }
.recap-infos dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.recap-aide { margin: 0 0 14px; font-size: 12px; text-align: center; color: var(--encre-douce); }
.recap-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.recap-actions .bouton-whatsapp { margin: 0; }
.recap-modifier {
    border: 2px solid var(--bord-doux);
    border-radius: 12px;
    background: #fff;
    color: var(--encre);
    font: 700 14px inherit;
    font-family: inherit;
    cursor: pointer;
}
@media (max-width: 380px) { .recap-actions { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    /* Rail de filtres aligne sur le padding reel du corps (12 px). */
    .page-carte .filtres-categories { margin-inline: -12px; padding-inline: 12px; }
}
.recap-total strong{white-space:nowrap}

/* ---------------------------------------------------------------------
   10. Recherche de plat : loupe à côté des catégories
   La barre (loupe + rail de catégories) reste collée en haut ; la loupe
   ouvre un champ qui cherche dans TOUS les plats, même approximativement.
   ------------------------------------------------------------------ */
.page-carte .filtres-barre {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    position: sticky; top: var(--hauteur-entete); z-index: 20;
    margin: 0 0 12px; padding: 8px 0; background: var(--fond-carte);
}
.page-carte .filtres-barre .filtres-categories {
    position: static; flex: 1; min-width: 0; width: auto; max-width: none;
    margin: 0; padding: 0; background: none; box-shadow: none;
    transition: opacity .15s ease;
}
/* Pendant une recherche, les catégories sont en retrait : elles ne filtrent plus. */
.page-carte .filtres-categories.en-pause { opacity: .4; }

.page-carte .btn-recherche {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--bord-doux); border-radius: 50%; background: #fff; color: var(--encre);
    cursor: pointer; box-shadow: var(--ombre-plat); transition: background .15s ease, color .15s ease;
}
.page-carte .btn-recherche:hover { border-color: var(--rose); color: var(--rose); }
.page-carte .btn-recherche.actif { background: var(--noir); border-color: var(--noir); color: #fff; }

.page-carte .recherche-plat {
    display: flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 3px 6px 3px 16px;
    border: 2px solid var(--rose); border-radius: 999px; background: #fff; box-shadow: var(--ombre-plat);
}
.page-carte .recherche-plat[hidden] { display: none; }
.page-carte .recherche-plat input {
    flex: 1; min-width: 0; min-height: 42px; padding: 0; border: 0; outline: 0; background: none;
    font: inherit; font-size: 16px; /* 16 px : pas de zoom automatique sur iPhone */ color: var(--encre);
}
.page-carte .recherche-plat input::-webkit-search-cancel-button { display: none; }
.page-carte .recherche-plat button {
    flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--fond-carte); color: var(--encre-douce); font-size: 14px; cursor: pointer;
}
.page-carte .aucun-resultat { margin: 0; padding: 32px 12px; text-align: center; color: var(--encre-douce); }
.page-carte .aucun-resultat[hidden] { display: none; }

@media (max-width: 900px) {
    /* Bord à bord, comme l'ancien rail : la barre traverse tout l'écran. */
    .page-carte .filtres-barre {
        top: 0; margin-inline: -12px; padding: 8px 12px;
        box-shadow: 0 6px 12px -8px rgba(26, 22, 20, .35);
    }
}