/* Tatbiki Maroc — charte Tatbiki : jaune / gris / noir uniquement */
:root{--jaune:#FFCC00;--noir:#111111;--gris:#F1F1F1;--gris2:#E4E4E4;--gris3:#D9D9D9;--texte2:#555555;--blanc:#FFFFFF}
*{box-sizing:border-box}
html,body{margin:0;background:var(--blanc);color:var(--noir);font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body[dir=rtl]{font-family:'Noto Sans Arabic',Inter,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:84px}
.ar{font-family:'Noto Sans Arabic',sans-serif}

/* En-tête */
.entete{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;position:sticky;top:0;background:var(--blanc);z-index:20}
.ico{width:44px;height:44px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.marque{display:flex;align-items:center;gap:8px;flex-grow:1;min-width:0}
.marque img{height:34px;width:auto}
.marque b{font-size:17px;font-weight:800}
.langues{display:flex;gap:2px;background:var(--gris);border-radius:999px;padding:3px;flex-shrink:0}
.langues button{border:0;border-radius:999px;background:transparent;font-weight:600;font-size:12px;padding:6px 9px;min-width:32px}
.langues button.on{background:var(--noir);color:var(--blanc)}
.langues button.l-ar{font-family:'Noto Sans Arabic',sans-serif;font-weight:700;font-size:13px;padding:4px 9px}
body[dir=rtl] .fleche svg{transform:scaleX(-1)}

.page{padding:4px 16px 16px;display:flex;flex-direction:column;gap:18px}
h1{margin:0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.5px}
body[dir=rtl] h1{letter-spacing:0}
h2{margin:0;font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
.surligne{background:var(--jaune);padding:0 4px}
.sous{margin:4px 0 0;color:var(--texte2);font-size:15px}
.petit{font-size:12px;color:var(--texte2)}

.recherche{display:flex;align-items:center;gap:10px;background:var(--gris);border-radius:14px;padding:0 14px;height:48px}
.recherche input{border:0;background:transparent;font:500 15px inherit;font-family:inherit;flex-grow:1;outline:none;min-width:0}

.carte-entree{display:block;position:relative;height:150px;border-radius:18px;background:#2B2B2B;overflow:hidden}
.carte-entree .grille{position:absolute;inset:0;background-image:linear-gradient(#3A3A3A 1px,transparent 1px),linear-gradient(90deg,#3A3A3A 1px,transparent 1px);background-size:26px 26px}
.carte-entree .pt{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--jaune);border:2px solid var(--noir)}
.carte-entree .bas{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:8px}
.pastille{border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px;background:var(--blanc)}
.pastille.j{background:var(--jaune)}

.ligne-titre{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ligne-titre a{font-size:13px;font-weight:600;text-decoration:underline}
.defile{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.defile::-webkit-scrollbar{display:none}
.mini{width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.photo{background:var(--gris3) center/cover no-repeat;border-radius:14px;position:relative;overflow:hidden}
.mini .photo{height:104px}
.mini b{font-size:14px;line-height:1.2}

.grille2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.region{background:var(--gris);border-radius:12px;padding:10px 12px;font-weight:600;font-size:13px;line-height:1.25;min-height:58px;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.region small{font-weight:500;color:var(--texte2);font-size:11px}

.onglets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:var(--gris);border-radius:14px;padding:4px}
.onglets button{border:0;border-radius:11px;background:transparent;font-weight:600;font-size:14px;height:42px;color:#444}
.onglets button.on{background:var(--jaune);color:var(--noir);font-weight:700}

.carte-lieu{display:flex;gap:12px;border:1px solid var(--gris2);border-radius:16px;padding:10px;position:relative}
.carte-lieu .photo{width:96px;height:96px;flex-shrink:0;border-radius:12px}
.carte-lieu .txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.carte-lieu b{font-size:15px;line-height:1.2}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{background:var(--gris);border-radius:6px;padding:3px 7px;font-size:11px;font-weight:600}
.tag.j{background:var(--jaune)}
.cadenas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(255,255,255,.15)}
.cadenas span{width:36px;height:36px;border-radius:50%;background:var(--jaune);border:2px solid var(--noir);display:flex;align-items:center;justify-content:center}

.bandeau-achat{display:flex;align-items:center;gap:12px;background:var(--noir);color:var(--blanc);border-radius:16px;padding:14px}
.bandeau-achat .txt{flex-grow:1;font-size:14px;line-height:1.35}
.bandeau-achat b{color:var(--jaune)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:14px;border:0;font-weight:800;font-size:16px;padding:0 18px;width:100%}
.btn.j{background:var(--jaune);color:var(--noir)}
.btn.n{background:var(--noir);color:var(--blanc)}
.btn.c{background:var(--blanc);color:var(--noir);border:2px solid var(--noir)}
.btn[disabled]{opacity:.5}
.btn-carre{width:50px;height:50px;border-radius:14px;border:2px solid var(--noir);background:var(--blanc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-carre.on{background:var(--jaune)}

/* Fiche */
.fiche-photo{height:280px;background:var(--gris3) center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;color:#444;font-weight:600;font-size:13px}
.fiche-photo .haut{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
.fiche-photo .rond{width:44px;height:44px;border-radius:50%;background:var(--blanc);display:flex;align-items:center;justify-content:center;border:0}
.fiche-photo .badge{position:absolute;left:16px;bottom:14px}
body[dir=rtl] .fiche-photo .badge{left:auto;right:16px}
.galerie{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.galerie img{height:84px;border-radius:10px}
.infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.info{background:var(--gris);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.info span{font-size:11px;font-weight:600;color:var(--texte2);text-transform:uppercase;letter-spacing:.4px}
.info b{font-size:14px}
.puces{display:flex;flex-direction:column;gap:7px;font-size:14px}
.puces div{display:flex;gap:8px;align-items:center}
.puces i{width:8px;height:8px;border-radius:50%;background:var(--jaune);border:1.5px solid var(--noir);flex-shrink:0}
.actions-bas{position:fixed;bottom:0;left:0;right:0;background:var(--blanc);border-top:1px solid var(--gris2);padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;gap:8px;z-index:30;max-width:520px;margin:0 auto}
.texte{font-size:14px;line-height:1.55;color:#333;margin:0;white-space:pre-line}

/* Barre du bas */
.barre{position:fixed;bottom:0;left:0;right:0;background:var(--blanc);border-top:1px solid var(--gris2);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:8px 6px calc(10px + env(safe-area-inset-bottom));z-index:30;max-width:520px;margin:0 auto}
.barre a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--texte2)}
.barre a span{padding:4px 14px;border-radius:999px;display:flex}
.barre a.on{color:var(--noir);font-weight:700}
.barre a.on span{background:var(--jaune)}

/* Menu latéral */
.menu{position:fixed;inset:0;z-index:100;background:rgba(17,17,17,.45);display:flex}
.menu[hidden]{display:none}
.menu .panneau{background:var(--blanc);width:min(330px,88vw);height:100%;overflow-y:auto;padding:12px 16px 24px;display:flex;flex-direction:column;gap:14px}
.menu h3{margin:6px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--texte2)}
.menu .appli{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:var(--gris);font-weight:600;font-size:15px}
.menu .appli small{font-size:11px;font-weight:600;color:var(--texte2)}

/* Formulaires */
label.champ{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.champ input,.champ select,.champ textarea{font:500 15px Inter,sans-serif;border:2px solid var(--gris2);border-radius:12px;padding:12px;background:var(--blanc);color:var(--noir);width:100%}
.champ textarea{min-height:80px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--noir)}
.erreur{color:#111;background:var(--jaune);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.encadre{border:2px solid var(--noir);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.prix{font-size:40px;font-weight:800;letter-spacing:-1px}
.liste-admin{display:flex;flex-direction:column;gap:8px}
.ligne-admin{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--gris2);border-radius:12px;padding:10px 12px;font-size:14px}
.ligne-admin b{font-size:14px}

#carte{height:calc(100vh - 150px);border-radius:16px;overflow:hidden;z-index:1}
.vide{background:var(--gris);border-radius:14px;padding:18px;text-align:center;color:var(--texte2);font-size:14px;line-height:1.5}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--noir);color:var(--blanc);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;z-index:200;max-width:90vw}
.toast[hidden]{display:none}

/* Carrousel de photos (fiche) */
.carrousel{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carrousel::-webkit-scrollbar{display:none}
.diapo{flex:0 0 100%;scroll-snap-align:center;background:var(--gris3) center/cover no-repeat}
.fiche-photo .haut,.fiche-photo .badge{z-index:2}
.compteur{position:absolute;right:16px;bottom:14px;z-index:2;background:rgba(17,17,17,.75);color:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600}
body[dir=rtl] .compteur{right:auto;left:16px}