:root{
    --navy:#16264D;
    --navy-deep:#0C1730;
    --orange:#F17D1E;
    --orange-deep:#D96A10;
    --gold:#E7A33D;
    /* ---------- 3e couleur de marque : un cyan "eau" clair, en plus du bleu marine et de
       l'orange. Utilisé pour les bulles de discussion reçues et les icônes de catégories,
       pour donner un peu de fraîcheur à des zones qui étaient jusque-là toutes en verre
       translucide neutre. ---------- */
    --eau:#4FC3D9;
    --eau-deep:#2E96AC;
    --eau-tint:rgba(79,195,217,0.16);
    --sand:#FBF3E7;
    --line:rgba(255,255,255,0.4);
    --muted:#8A93A6;
    --green:#22C55E;
    /* ---------- Texte principal des cartes claires : distinct de --navy (qui sert aussi de
       fond de marque) pour pouvoir l'inverser proprement en mode sombre sans toucher aux
       surfaces bleu marine, qui restent identiques dans les deux thèmes. ---------- */
    --text-main:#16264D;
    --glass:rgba(255,255,255,0.76);
    --glass-strong:rgba(255,255,255,0.9);
    --card-line:rgba(22,38,77,0.12);
    --card-shadow:rgba(22,38,77,0.06);
  }
  /* ---------- Mode sombre : bascule via body.dark-mode (persisté, voir applyTheme()).
     On ne touche pas aux surfaces bleu marine de la marque (déjà sombres), seulement
     aux cartes "verre clair" et au texte qu'elles contiennent. ---------- */
  body.dark-mode{
    --sand:#101A33;
    --line:rgba(255,255,255,0.10);
    --muted:#8E9BC0;
    --text-main:#EAF0FF;
    --glass:rgba(22,32,58,0.72);
    --glass-strong:rgba(18,27,50,0.86);
    --card-line:rgba(255,255,255,0.08);
    --card-shadow:rgba(0,0,0,0.35);
    background:var(--navy-deep);
    color-scheme: dark;
  }
  body.dark-mode .screen-view{ background:var(--navy-deep); }
  body.dark-mode input, body.dark-mode select, body.dark-mode textarea{ color:var(--text-main); }
  body.dark-mode input::placeholder, body.dark-mode textarea::placeholder{ color:var(--muted); }
  body.dark-mode img{ filter:brightness(0.92); }
  body.dark-mode .feed-post-media .ph, body.dark-mode .cat-icon i{ opacity:0.7; }
  /* ---------- Mode noir : variante AMOLED, fond réellement noir (pas bleu marine), pour
     économiser la batterie sur écrans OLED et pour les utilisateurs qui préfèrent un
     contraste maximal. Cartes en gris très foncé (pas bleu) pour rester lisible. ---------- */
  body.black-mode{
    --navy-deep:#000000;
    --sand:#121212;
    --line:rgba(255,255,255,0.09);
    --muted:#9A9A9A;
    --text-main:#F5F5F5;
    --glass:rgba(18,18,18,0.82);
    --glass-strong:rgba(10,10,10,0.92);
    --card-line:rgba(255,255,255,0.07);
    --card-shadow:rgba(0,0,0,0.5);
    background:#000000;
    color-scheme: dark;
  }
  body.black-mode .app-shell{ background:#000000; }
  body.black-mode .screen-view{ background:#000000; }
  body.black-mode input, body.black-mode select, body.black-mode textarea{ color:var(--text-main); }
  body.black-mode input::placeholder, body.black-mode textarea::placeholder{ color:var(--muted); }
  body.black-mode img{ filter:brightness(0.9); }
  body.black-mode .feed-post-media .ph, body.black-mode .cat-icon i{ opacity:0.7; }
  body.black-mode .app-bg-tint{ background:rgba(0,0,0,0.55); }
  /* ---------- Mode rose : variante complète de couleurs (bleu marine -> rose profond,
     orange -> rose bonbon, or -> rose doré), pensée pour un rendu plus doux/féminin,
     sans toucher à la structure ni à la lisibilité des cartes. ---------- */
  body.rose-mode{
    --navy:#C2477B;
    --navy-deep:#7A1F4B;
    --orange:#FF6FA0;
    --orange-deep:#E24E82;
    --gold:#F4A6C1;
    --eau:#E6A5C9;
    --eau-deep:#C97AA8;
    --eau-tint:rgba(230,165,201,0.18);
    --sand:#FDEFF4;
    --line:rgba(122,31,75,0.16);
    --muted:#A9647F;
    --text-main:#5C1D37;
    --glass:rgba(255,255,255,0.82);
    --glass-strong:rgba(255,255,255,0.94);
    --card-line:rgba(122,31,75,0.10);
    --card-shadow:rgba(122,31,75,0.08);
    background:#FBE4EC;
  }
  body.rose-mode .app-shell{ background:var(--navy-deep); }
  body.rose-mode .cat-icon{
    background:linear-gradient(135deg, var(--orange), var(--orange-deep));
    border:1px solid rgba(255,255,255,0.5);
    color:#fff;
  }
  /* En mode rose, on coupe la vidéo de fond (toujours teintée bleu marine) pour laisser
     apparaître la vraie couleur du thème rose derrière l'app, au lieu d'un mélange des deux. */
  body.rose-mode .app-bg-video, body.rose-mode .app-bg-tint{ display:none; }
  /* ---------- Mode blanc cassé : variante douce et lumineuse, fond ivoire chaud plutôt que
     blanc pur, pensée comme une alternative élégante et reposante au mode clair par défaut.
     Le bleu marine et l'orange de la marque restent inchangés pour garder une identité
     visuelle cohérente ; seules les surfaces (fond, cartes, lignes) sont réchauffées. ---------- */
  body.cream-mode{
    --sand:#F4ECDD;
    --line:rgba(22,38,77,0.10);
    --muted:#9C9080;
    --text-main:#2B2318;
    --glass:rgba(255,253,248,0.88);
    --glass-strong:rgba(255,253,248,0.97);
    --card-line:rgba(43,35,24,0.08);
    --card-shadow:rgba(43,35,24,0.06);
    background:#FAF3E7;
  }
  body.cream-mode .app-shell{ background:var(--navy-deep); }
  body.cream-mode .app-bg-video, body.cream-mode .app-bg-tint{ display:none; }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html, body{height:100%;}
  html{background:#000000;}

  /* ---------- Retour tactile : tout ce qui se tape doit visiblement "réagir" au toucher,
     pas seulement au clic souris. Les boutons se compressent légèrement ; les grandes zones
     tactiles (cartes, en-têtes de publication...) s'assombrissent plutôt, pour éviter un effet
     de saut disgracieux sur de gros éléments. ---------- */
  button{ transition:transform 0.12s ease, opacity 0.12s ease; }
  button:not(:disabled):active{ transform:scale(0.95); opacity:0.85; }
  .stat, .product-card, .portfolio-card, .msg-card, .announce-author-row, .announce-tap-zone,
  .hero-card, .weather-badge, .feed-post-body, .feed-post-media, .feed-post-head{
    cursor:pointer; transition:opacity 0.12s ease;
  }
  .stat:active, .product-card:active, .portfolio-card:active, .msg-card:active, .announce-author-row:active,
  .announce-tap-zone:active, .hero-card:active, .weather-badge:active, .feed-post-body:active,
  .feed-post-media:active, .feed-post-head:active{ opacity:0.65; }

  /* ---------- Effet "shimmer" pendant le chargement des images : évite un flash de fond
     uni sur les connexions lentes (2G/3G), en attendant que la photo arrive. ---------- */
  img.img-loading{ background:linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%); background-size:400% 100%; animation:imgShimmer 1.4s ease infinite; }
  body.dark-mode img.img-loading{ background:linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%); background-size:400% 100%; }
  @keyframes imgShimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
  img.img-loaded{ animation:none; background:none; }

  body{
    font-family:'Inter', sans-serif;
    background:#EDE3D3;
    display:flex; align-items:flex-start; justify-content:center;
  }
  .display{font-family:'Space Grotesk', sans-serif;}

  /* ---------- App shell : remplit tout l'écran, sur tous les appareils ---------- */
  .app-shell{
    width:100%;
    max-width:100%;
    height:100dvh;
    background:var(--navy-deep);
    overflow:hidden;
    display:flex; flex-direction:column;
    position:relative;
  }

  .app-body{flex:1; min-height:0; display:flex; flex-direction:column; background:transparent; position:relative; z-index:1;}

  /* ---------- Video de fond : tout flotte au-dessus ---------- */
  .app-bg-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none;
  }
  .app-bg-tint{
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(12,23,48,0.55) 0%, rgba(12,23,48,0.25) 30%, rgba(12,23,48,0.35) 70%, rgba(12,23,48,0.7) 100%);
    pointer-events:none;
  }
  .scroll{flex:1; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .scroll::-webkit-scrollbar{display:none;}

  /* ---------- Avatars (illustrated, no external photos) ---------- */
  .avatar{
    border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    color:#fff; font-weight:700; font-family:'Space Grotesk',sans-serif; position:relative; overflow:hidden;
  }
  .avatar .role-badge{
    position:absolute; bottom:-2px; right:-2px; background:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,0.15);
  }

  /* ---------- Bottom nav ---------- */
  .bottom-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 22px calc(10px + env(safe-area-inset-bottom)); background:rgba(12,23,48,0.28); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.12);
    flex-shrink:0;
  }
  .home-fab{
    position:absolute; right:18px; bottom:18px; z-index:20;
    display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:none; border-radius:50%;
    background:var(--orange); color:#fff; font-weight:700; font-size:12.5px; box-shadow:0 10px 22px rgba(241,125,30,0.45);
    touch-action:none; cursor:grab;
  }
  .home-fab.dragging{cursor:grabbing; box-shadow:0 14px 28px rgba(241,125,30,0.6); transition:none;}
  .home-fab i{font-size:18px;}
  .nav-item{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; padding:4px 6px; color:var(--muted);
  }
  .nav-item i{font-size:18px;}
  .nav-item span{font-size:10px; font-weight:600; white-space:nowrap;}
  .nav-item.active{color:var(--orange);}
  .nav-item.primary{
    width:50px; height:50px; border-radius:50%; background:var(--orange);
    color:#fff; justify-content:center; margin-top:-26px; box-shadow:0 10px 20px rgba(241,125,30,0.4);
  }
  .nav-item.primary i{font-size:20px;}
  .msg-nav-badge{position:absolute; top:2px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 2px #fff;}
  .chat-empty-hint{text-align:center; color:#B5B0A6; font-size:12.5px; margin:auto; padding:20px;}

  /* ---------- Carte en direct (localisation temps réel des prestataires) ---------- */
  .map-view-overlay{
    position:fixed; inset:0; z-index:600; background:#EAE6DC; display:none; flex-direction:column;
  }
  .map-view-overlay.visible{display:flex;}
  .map-view-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0;
    padding:calc(14px + env(safe-area-inset-top)) 14px 12px; background:var(--navy); color:#fff; position:relative; z-index:2;
  }
  .map-view-title{font-weight:700; font-size:15px; font-family:'Space Grotesk',sans-serif;}
  .map-view-title small{display:block; font-weight:500; font-size:11px; color:rgba(255,255,255,0.7); font-family:'Inter',sans-serif;}
  #live-map-canvas{position:absolute; inset:0; background:#EAE6DC;}
  #track-map-canvas, #trackcreate-map-canvas{position:absolute; inset:0; background:#EAE6DC;}
  .map-legend-pill{
    position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:450;
    background:rgba(12,23,48,0.88); color:#fff; font-size:11.5px; font-weight:600; padding:8px 16px; border-radius:999px;
    box-shadow:0 6px 18px rgba(0,0,0,0.25); backdrop-filter:blur(6px); white-space:nowrap;
  }
  /* Barre de recherche flottante en haut de la carte : retrouver un prestataire précis par son
     nom sans avoir à le repérer visuellement au milieu de tous les marqueurs, surtout utile
     dès qu'il y en a beaucoup ou qu'ils sont regroupés en clusters. */
  .map-search-wrap{position:absolute; top:12px; left:12px; right:12px; z-index:480;}
  .map-search-bar{
    display:flex; align-items:center; gap:9px; background:rgba(12,23,48,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.15); border-radius:14px; padding:11px 12px; box-shadow:0 6px 18px rgba(0,0,0,0.28);
  }
  .map-search-bar i.fa-magnifying-glass{color:rgba(255,255,255,0.65); font-size:13px; flex-shrink:0;}
  .map-search-bar input{flex:1; min-width:0; border:none; outline:none; background:none; color:#fff; font-size:13px; font-family:inherit;}
  .map-search-bar input::placeholder{color:rgba(255,255,255,0.5);}
  .map-search-clear{
    display:none; align-items:center; justify-content:center; border:none; background:rgba(255,255,255,0.18); color:#fff;
    width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:10px; flex-shrink:0;
  }
  .map-search-clear.visible{display:flex;}
  .map-search-results{
    margin-top:8px; max-height:0; overflow:hidden auto; background:#fff; border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,0.25); transition:max-height 0.25s ease, opacity 0.2s ease; opacity:0;
  }
  .map-search-results.visible{max-height:280px; opacity:1;}
  .map-search-item{display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.06);}
  .map-search-item:last-child{border-bottom:none;}
  .map-search-item:active{background:rgba(0,0,0,0.04);}
  .map-search-item-name{font-weight:700; font-size:12.5px; color:var(--text-main);}
  .map-search-item-sub{font-size:10.5px; color:var(--muted); margin-top:1px;}
  .map-search-item-badge{font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(0,0,0,0.06); color:var(--muted); flex-shrink:0; white-space:nowrap;}
  .map-search-item-badge.geo{background:var(--eau-tint); color:var(--eau-deep);}
  .map-search-empty{padding:16px; text-align:center; font-size:12px; color:var(--muted);}
  .map-marker{position:relative; width:34px; height:40px; display:flex; align-items:center; justify-content:center;}
  /* Ombre portée au sol, façon "épingle qui flotte au-dessus de la carte" : petit détail qui
     donne beaucoup plus de relief au marqueur qu'un simple pin plat. */
  .map-marker::before{
    content:''; position:absolute; left:50%; bottom:0; width:14px; height:5px; border-radius:50%;
    background:rgba(0,0,0,0.3); filter:blur(1.5px); transform:translateX(-50%); z-index:-1;
  }
  .map-marker-dot{
    width:32px; height:32px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:var(--navy);
    border:2.5px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;
  }
  .map-marker-dot i{transform:rotate(-45deg); color:#fff; font-size:13px;}
  .map-marker.online .map-marker-dot{background:var(--orange);}
  .map-marker.online::after{
    content:''; position:absolute; top:-2px; right:2px; width:10px; height:10px; border-radius:50%;
    background:var(--green); border:2px solid #fff;
  }
  .map-me-dot{
    position:relative; width:16px; height:16px; border-radius:50%; background:#2563EB; border:3px solid #fff;
    box-shadow:0 0 0 4px rgba(37,99,235,0.3), 0 2px 6px rgba(0,0,0,0.3);
  }
  /* Halo qui "respire" autour du point de position, comme sur Google/Apple Maps : rend tout de
     suite visible où l'on se trouve, même en un coup d'œil sur une carte chargée de marqueurs. */
  .map-me-pulse{
    position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
    background:rgba(37,99,235,0.55); animation:meLocatePulse 2.2s ease-out infinite; pointer-events:none;
  }
  @keyframes meLocatePulse{
    0%{ transform:scale(1); opacity:0.7; }
    100%{ transform:scale(3.4); opacity:0; }
  }
  .map-quartier-label{
    display:inline-block; white-space:nowrap; background:rgba(22,38,77,0.78); color:#fff; font-weight:700;
    font-size:11px; letter-spacing:0.2px; padding:4px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.35);
    box-shadow:0 2px 8px rgba(0,0,0,0.25); transform:translate(-50%,-50%);
  }
  /* Bulle numérotée d'un groupe de marqueurs proches (clustering) : on annule le style par
     défaut du plugin (cercle semi-transparent) pour repartir sur nos propres couleurs de
     marque, cohérentes avec le reste des repères de la carte. */
  .map-cluster-icon{background:transparent !important; border:none !important;}
  .map-cluster-badge{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:var(--navy); color:#fff; font-weight:800; font-size:13px; font-family:'Inter',sans-serif;
    border:3px solid var(--orange); box-shadow:0 3px 10px rgba(0,0,0,0.3);
  }
  /* Étiquette de distance affichée au milieu du trait pointillé qui relie "Vous êtes ici" au
     marqueur sélectionné — visuel plus lisible qu'un simple chiffre dans la popup. */
  .map-distance-label{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap; background:#fff; color:var(--navy);
    font-weight:800; font-size:11.5px; padding:5px 11px; border-radius:999px; border:1.5px solid var(--orange);
    box-shadow:0 3px 10px rgba(0,0,0,0.25); transform:translate(-50%,-50%);
  }
  .map-distance-label i{color:var(--orange); font-size:10px;}
  .map-popup-card{min-width:170px; font-family:'Inter',sans-serif;}
  .map-popup-online{color:var(--green); font-weight:700; font-size:10.5px;}
  .leaflet-popup-content-wrapper{border-radius:14px;}
  .map-empty-hint{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:450; text-align:center;
    background:rgba(255,255,255,0.95); padding:18px 22px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.15);
    max-width:250px; font-size:12.5px; color:var(--muted); display:none;
  }
  /* Écran de chargement de la carte en direct : remplace le simple texte "Chargement..." par
     un fond façon grille cartographique + un radar de localisation animé, plus cohérent avec
     ce qu'on affiche une fois la carte prête (et surtout moins statique/mort à regarder). */
  .map-loading-overlay{
    position:absolute; inset:0; z-index:600; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:16px;
    background:
      linear-gradient(rgba(12,23,48,0.95), rgba(22,38,77,0.95)),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 40px);
    transition:opacity 0.35s ease, visibility 0.35s ease; opacity:1; visibility:visible;
  }
  .map-loading-overlay.hidden{opacity:0; visibility:hidden; pointer-events:none;}
  .map-loading-radar{position:relative; width:54px; height:54px; display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:26px;}
  .map-loading-radar::before, .map-loading-radar::after{
    content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--orange);
    animation:mapLoadingRadar 1.8s ease-out infinite;
  }
  .map-loading-radar::after{animation-delay:0.9s;}
  @keyframes mapLoadingRadar{
    0%{transform:scale(0.3); opacity:0.8;}
    100%{transform:scale(2.6); opacity:0;}
  }
  .map-loading-text{color:#fff; font-size:12.5px; font-weight:600; opacity:0.9; text-align:center; max-width:220px; letter-spacing:0.1px;}
  /* Bouton pour s'ajouter soi-même à la carte en direct, accessible depuis l'écran carte
     (avant, cette action n'existait que cachée dans Réglages : personne ne la trouvait). */
  .map-selfshare-btn{
    position:absolute; left:14px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:450;
    display:flex; align-items:center; gap:8px; padding:10px 16px; border:none; border-radius:999px;
    background:var(--orange); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .map-selfshare-btn.active{background:#2563EB;}
  .map-selfshare-btn i{font-size:12px;}
  .map-selfshare-btn .pulse-dot{
    width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,0.7);
    animation:selfsharePulse 1.6s infinite;
  }
  @keyframes selfsharePulse{
    0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.55); }
    70%{ box-shadow:0 0 0 7px rgba(255,255,255,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  }
  /* Puce "DIRECT" générique (badge livraison sur l'accueil, etc.) */
  .home-search-cta .pulse-dot{
    border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,0.6);
    animation:trackPulse 1.6s infinite;
  }
  @keyframes trackPulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.55); }
    70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }
  /* Bascule du mode de déplacement (à pied / moto-auto) : n'apparaît que quand un itinéraire
     est affiché (après avoir cliqué sur un prestataire), en haut au centre de la carte. */
  .map-transport-toggle{
    position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:450; display:none;
    background:rgba(12,23,48,0.88); border-radius:999px; padding:4px; gap:4px; backdrop-filter:blur(6px);
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .map-transport-toggle.visible{display:flex;}
  .map-transport-btn{
    border:none; background:transparent; color:rgba(255,255,255,0.75); font-weight:700; font-size:11.5px;
    padding:7px 14px; border-radius:999px; display:flex; align-items:center; gap:6px; cursor:pointer;
  }
  .map-transport-btn.active{background:var(--orange); color:#fff;}
  .map-transport-btn i{font-size:11px;}
  /* Bouton "Annuler le raccourci" : action explicite et volontaire pour retirer l'itinéraire —
     seule façon de le faire disparaître désormais (plus jamais tout seul en zoomant/dézoomant). */
  .map-transport-cancel{
    border:none; background:rgba(255,255,255,0.12); color:#fff; width:26px; height:26px;
    border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px;
  }
  /* Bandeau vert d'arrivée à proximité (< 50 m du prestataire), avec vibration associée
     déclenchée en JS au même moment (voir checkProximity()). */
  .map-proximity-banner{
    position:absolute; top:12px; left:50%; transform:translateX(-50%) translateY(-140%); z-index:460;
    background:var(--green); color:#fff; font-weight:700; font-size:12.5px; padding:10px 18px; border-radius:12px;
    box-shadow:0 8px 22px rgba(0,0,0,0.3); display:flex; align-items:center; gap:8px; white-space:nowrap;
    transition:transform .35s ease;
  }
  .map-proximity-banner.visible{transform:translateX(-50%) translateY(0);}

  /* ---------- Bouton "voir sa position" sur chaque carte prestataire/commerçant ----------
     Présent sur toutes les cartes (accueil, recommandations, recherche, publications) : un
     tap ouvre directement la carte en direct déjà existante, vole jusqu'à ce prestataire
     précis et calcule aussitôt l'itinéraire — sans devoir chercher son repère parmi les
     autres. L'anneau qui pulse indique en un coup d'œil que sa position exacte est connue. */
  .locate-pin-btn{
    position:absolute; top:6px; right:6px; z-index:3; width:26px; height:26px; border-radius:50%;
    border:2px solid #fff; background:var(--navy); color:#fff; font-size:11px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.35);
  }
  .locate-pin-btn.has-geo{background:var(--orange);}
  .locate-pin-btn::after{
    content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--orange); opacity:0;
  }
  .locate-pin-btn.has-geo::after{ animation:locatePing 2.4s infinite; }
  @keyframes locatePing{
    0%{ transform:scale(0.72); opacity:0.7; }
    70%{ transform:scale(1.5); opacity:0; }
    100%{ transform:scale(1.5); opacity:0; }
  }
  .locate-pin-btn.sm{width:23px; height:23px; font-size:9.5px; top:4px; right:4px;}
  /* Repère "position" posé sur la photo des publications du fil, façon étiquette de lieu
     Instagram : plus visible qu'une simple icône perdue parmi like/commentaire/partage. */
  .feed-geo-badge{
    position:absolute; top:10px; left:10px; z-index:3; display:flex; align-items:center; gap:5px;
    background:rgba(12,23,48,0.72); color:#fff; font-weight:700; font-size:10.5px; padding:6px 10px 6px 8px;
    border-radius:999px; backdrop-filter:blur(6px); cursor:pointer; border:none;
  }
  .feed-geo-badge i{color:var(--orange); font-size:10px;}
  .feed-geo-badge .fgb-dot{
    width:6px; height:6px; border-radius:50%; background:var(--orange); position:relative; flex-shrink:0;
  }
  .feed-geo-badge.online .fgb-dot{background:var(--green);}
  .feed-geo-badge .fgb-dot::after{
    content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid currentColor; color:inherit;
    animation:locatePing 2.4s infinite;
  }
  /* Anneau qui "atterrit" sur le marqueur visé quand on arrive depuis le bouton d'une carte,
     pour confirmer visuellement le bon prestataire au milieu des autres repères. */
  .map-focus-ring{
    width:46px; height:46px; border-radius:50%; border:3px solid var(--orange); box-sizing:border-box;
    animation:mapFocusRing 1.5s ease-out 2;
  }
  @keyframes mapFocusRing{
    0%{ transform:scale(0.3); opacity:0.95; }
    100%{ transform:scale(1.7); opacity:0; }
  }
  /* Bouton "Carte en direct" sur le profil d'un prestataire, à côté du lien Google Maps déjà
     présent : bascule vers la carte vivante de l'app (itinéraire, distance, statut en ligne)
     plutôt que de sortir vers une appli externe. */
  .livemap-btn{
    position:absolute; z-index:3; right:14px; bottom:56px; display:flex; align-items:center; gap:6px;
    padding:8px 13px; border-radius:999px; background:rgba(241,125,30,0.95); color:#fff; font-weight:700;
    font-size:11.5px; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.3);
  }
  .livemap-btn i{font-size:10.5px;}

  /* ---------- Top bar (home) ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    margin:calc(10px + env(safe-area-inset-top)) 14px 0; padding:8px 14px;
    background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,0.35); border-radius:18px; flex-shrink:0;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
  }
  .brand{display:flex; align-items:center; gap:8px;}
  .brand img.brand-logo{height:26px; width:auto; display:block;}
  .topbar-actions{display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
  .topbar-actions::-webkit-scrollbar{display:none;}
  .topbar-actions .icon-btn{flex-shrink:0;}
  .topbar-account{border:none; background:none; cursor:pointer; padding:0; display:flex; align-items:center; flex-shrink:0;}
  .topbar-account .avatar{width:36px; height:36px; font-size:13px; border:2px solid rgba(255,255,255,0.85); box-shadow:0 3px 10px rgba(0,0,0,0.3);}
  .topbar-account-off{
    display:flex; align-items:center; gap:6px; padding:6px 12px 6px 8px; border-radius:999px;
    background:var(--glass); border:1px solid rgba(255,255,255,0.28); flex-shrink:0;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .topbar-account-off .dot-off{width:8px; height:8px; border-radius:50%; background:#F13E3E; box-shadow:0 0 6px rgba(241,62,62,0.7); flex-shrink:0;}
  .topbar-account-off span{font-size:11.5px; font-weight:700; color:var(--text-main); white-space:nowrap; flex-shrink:0;}
  /* ---------- Bandeau "Installer l'app" (remplace l'ancien bouton icône, trop discret) ---------- */
  .install-banner{
    display:flex; align-items:center; gap:12px; margin:12px 14px 0; padding:13px 14px;
    background:linear-gradient(120deg, var(--orange), var(--orange-deep)); border-radius:18px;
    box-shadow:0 10px 24px rgba(241,125,30,0.4); flex-shrink:0;
  }
  .install-banner-icon{width:38px; height:38px; border-radius:12px; background:var(--glass); display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex-shrink:0;}
  .install-banner-text{flex:1; min-width:0;}
  .install-banner-title{color:#fff; font-weight:700; font-size:13px;}
  .install-banner-sub{color:rgba(255,255,255,0.9); font-size:11px; margin-top:2px; line-height:1.3;}
  .install-banner-btn{flex-shrink:0; background:#fff; color:var(--orange-deep); border:none; border-radius:11px; padding:9px 14px; font-weight:700; font-size:12.5px; cursor:pointer;}
  .install-banner-close{flex-shrink:0; background:none; border:none; color:rgba(255,255,255,0.85); font-size:14px; padding:4px; cursor:pointer;}
  .icon-btn{
    width:36px; height:36px; border-radius:50%; border:none; background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center; color:var(--text-main); position:relative; cursor:pointer;
  }
  .icon-btn .dot, .search-go .dot{
    position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--orange);
  }
  .search-go .dot{background:#fff; border:1.5px solid var(--orange);}
  .icon-btn.dark{background:var(--glass); color:#fff;}
  .icon-btn.accent{background:var(--orange); color:#fff; box-shadow:0 3px 10px var(--card-shadow);}

  /* ---------- Home ---------- */
  .home-title{font-size:22px; font-weight:700; color:#fff; line-height:1.25; padding:6px 20px 0; text-shadow:0 2px 12px rgba(0,0,0,0.45);}
  .home-sub{font-size:13px; color:rgba(255,255,255,0.85); padding:6px 20px 0; line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .search-bar{
    display:flex; align-items:center; gap:8px; margin:16px 20px 0;
    background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:6px 6px 6px 16px; box-shadow:0 3px 10px var(--card-shadow);
  }
  .search-bar input{flex:1; border:none; outline:none; background:none; font-size:13.5px; padding:9px 0; font-family:inherit;}
  .search-bar i.fa-magnifying-glass{color:#9CA3AF; font-size:14px;}
  .search-go{
    width:36px; height:36px; border-radius:11px; background:var(--orange); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  /* ---------- Hero : bannière "Bienvenue à Daloa" + Annonces fondues dans le même bandeau, swipe au doigt ---------- */
  .hero-scroll{
    display:flex; gap:12px; margin:18px 0 0; padding:0 20px 6px; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-left:20px;
  }
  .hero-scroll::-webkit-scrollbar{display:none;}
  .hero-card{
    flex:0 0 100%; scroll-snap-align:start; height:172px; border-radius:18px; position:relative; overflow:hidden;
    background:linear-gradient(120deg, var(--navy), var(--navy-deep));
    display:flex; flex-direction:column; justify-content:flex-end; padding:16px; cursor:pointer;
    border:1px solid rgba(255,255,255,0.35); box-shadow:0 10px 25px rgba(0,0,0,0.3);
  }
  .hero-card img, .hero-card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; z-index:0;}
  .hero-card::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(12,23,48,0.85) 0%, rgba(12,23,48,0.32) 30%, transparent 52%),
               radial-gradient(circle at 85% 12%, rgba(241,125,30,0.28), transparent 45%);
  }
  .hero-card.hero-welcome{cursor:default;}
  .hero-card .hero-text{position:relative; z-index:2;}
  .hero-card .hero-text .t1{color:#fff; font-weight:700; font-size:16px; text-shadow:0 1px 8px rgba(0,0,0,0.55);}
  .hero-card .hero-text .t2{color:rgba(255,255,255,0.85); font-size:11.5px; margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,0.5);}
  .hero-card .a-type{position:absolute; z-index:2; top:12px; right:12px; width:26px; height:26px; border-radius:50%; background:var(--glass); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px;}
  .hero-card .a-foot{position:relative; z-index:2;}
  .hero-card .a-foot .who{color:#fff; font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px rgba(0,0,0,0.55);}
  .hero-card .a-foot .desc{color:rgba(255,255,255,0.88); font-size:11px; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; text-shadow:0 1px 6px rgba(0,0,0,0.5);}
  .hero-dots{display:flex; justify-content:center; gap:5px; margin-top:9px;}
  .hero-dots .dot-i{width:5px; height:5px; border-radius:50%; background:var(--glass); transition:background .2s, width .2s;}
  .hero-dots .dot-i.active{background:var(--orange); width:14px; border-radius:3px;}

  /* ---------- Météo : pastille sur la bannière + fiche détaillée ---------- */
  .weather-badge{
    position:absolute; z-index:3; top:14px; right:14px; display:flex; align-items:center; gap:9px;
    background:rgba(12,23,48,0.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.28); border-radius:16px; padding:7px 14px 7px 8px; cursor:pointer;
  }
  .weather-badge .wb-icon{width:32px; height:32px; border-radius:50%; background:var(--glass); display:flex; align-items:center; justify-content:center; font-size:16px; color:#FFC94D; flex-shrink:0;}
  .weather-badge .wb-info{display:flex; flex-direction:column; line-height:1.2;}
  .weather-badge .wb-info b{color:#fff; font-size:15px; font-weight:700;}
  .weather-badge .wb-info span{color:rgba(255,255,255,0.75); font-size:9.5px; font-weight:600; letter-spacing:.2px;}

  .weather-hero{
    border-radius:20px; padding:22px 20px; position:relative; overflow:hidden; margin-bottom:18px;
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff;
  }
  .weather-hero .wh-glow{position:absolute; top:-40px; right:-30px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, rgba(241,125,30,0.45), transparent 70%);}
  .weather-hero .wh-top{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;}
  .weather-hero .wh-icon{width:56px; height:56px; border-radius:50%; background:var(--glass); display:flex; align-items:center; justify-content:center; font-size:26px; color:#FFC94D;}
  .weather-hero .wh-temp{font-size:40px; font-weight:700; font-family:'Space Grotesk',sans-serif;}
  .weather-hero .wh-desc{font-size:12.5px; color:rgba(255,255,255,0.78); margin-top:2px; text-transform:capitalize;}
  .weather-hero .wh-meta{position:relative; z-index:1; display:flex; gap:18px; margin-top:16px;}
  .weather-hero .wh-meta .m{display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(255,255,255,0.85);}
  .weather-hero .wh-meta .m i{color:var(--orange); font-size:12px;}

  .weather-section-title{font-size:13px; font-weight:700; color:var(--text-main); margin:18px 0 10px;}
  .weather-chart-card{background:rgba(248,244,236,0.6); border:1px solid var(--line); border-radius:16px; padding:16px 14px 8px;}
  .weather-rain-card{background:rgba(248,244,236,0.6); border:1px solid var(--line); border-radius:16px; padding:16px 14px; margin-top:12px;}
  .rain-bars{display:flex; align-items:flex-end; gap:8px; height:80px; margin-top:10px;}
  .rain-bars .rb-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px;}
  .rain-bars .rb-track{width:100%; max-width:20px; height:100%; display:flex; align-items:flex-end; border-radius:6px; overflow:hidden; background:rgba(22,38,77,0.08);}
  .rain-bars .rb-fill{width:100%; border-radius:6px; background:linear-gradient(180deg, #6FB7F0, #2E6FB8); transition:height .3s;}
  .rain-bars .rb-pct{font-size:9.5px; font-weight:700; color:var(--text-main);}
  .rain-bars .rb-day{font-size:9.5px; color:var(--muted); font-weight:600;}

  .announce-viewer-overlay{position:fixed; inset:0; z-index:999; background:var(--navy-deep); display:flex; flex-direction:column;}
  .announce-viewer-media{position:relative; flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .announce-viewer-media img, .announce-viewer-media video{width:100%; height:100%; object-fit:contain;}
  .announce-progress-row{position:absolute; top:calc(8px + env(safe-area-inset-top)); left:8px; right:8px; z-index:4; display:flex; gap:4px;}
  .announce-progress-seg{flex:1; height:2.5px; border-radius:2px; background:var(--glass); overflow:hidden;}
  .announce-progress-fill{height:100%; width:0%; background:#fff; border-radius:2px;}
  .announce-tap-zones{position:absolute; inset:0; z-index:2; display:flex;}
  .announce-tap-zone{flex:1; height:100%;}
  .announce-viewer-top{position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:calc(22px + env(safe-area-inset-top)) 14px 30px; background:linear-gradient(180deg, rgba(0,0,0,0.6), transparent); pointer-events:none;}
  .announce-viewer-top button{width:34px; height:34px; border-radius:50%; border:none; background:var(--glass); color:#fff; display:flex; align-items:center; justify-content:center; pointer-events:auto;}
  .announce-audio-badge{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; background:rgba(241,125,30,0.92); border:none; color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,0.4); pointer-events:auto;}
  .announce-viewer-bottom{background:var(--navy-deep); padding:16px 18px calc(18px + env(safe-area-inset-bottom));}
  .announce-author-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer;}
  .announce-author-row .who b{display:block; color:#fff; font-size:13.5px;}
  .announce-author-row .who span{color:rgba(255,255,255,0.6); font-size:11px;}
  .announce-viewer-desc{color:rgba(255,255,255,0.88); font-size:12.5px; line-height:1.6;}

  .announce-sheet-overlay{position:fixed; inset:0; z-index:999; background:rgba(12,23,48,0.55); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center;}
  .announce-type-tabs{display:flex; gap:8px; margin-bottom:14px;}
  .announce-type-tabs button{flex:1; padding:10px 6px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text-main); font-size:11px; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:5px;}
  .announce-type-tabs button.active{background:var(--navy); color:#fff; border-color:var(--navy);}
  .announce-type-tabs button i{font-size:15px;}
  .announce-upload-box{width:100%; border:1.5px dashed rgba(22,38,77,0.3); border-radius:14px; padding:16px; text-align:center; color:var(--text-main); font-weight:600; font-size:12.5px; margin-bottom:12px; cursor:pointer;}
  .announce-upload-box i{display:block; font-size:18px; margin-bottom:6px; color:var(--muted);}
  .announce-upload-box.has-file{border-style:solid; border-color:var(--orange); color:var(--orange);}

  .section-row{display:flex; align-items:center; justify-content:space-between; padding:22px 20px 10px;}
  .section-row h2{font-size:15px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .see-all{background:none; border:none; font-size:12px; font-weight:700; color:var(--orange); display:flex; align-items:center; gap:2px; cursor:pointer;}

  .cat-scroll{display:flex; gap:12px; padding:0 20px 6px; overflow-x:auto;}
  .cat-scroll::-webkit-scrollbar{display:none;}
  .cat-item{display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:64px; background:none; border:none; cursor:pointer;}
  .cat-icon{
    width:48px; height:48px; border-radius:16px; background:var(--eau-tint); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(79,195,217,0.3);
    display:flex; align-items:center; justify-content:center; color:var(--eau-deep); font-size:17px; box-shadow:0 3px 8px var(--card-shadow);
  }
  .cat-item span{font-size:10.5px; font-weight:600; color:#fff; text-align:center; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,0.45);}

  .prov-scroll{display:flex; gap:14px; padding:32px 20px 20px; overflow-x:auto; overflow-y:visible;}
  .prov-scroll::-webkit-scrollbar{display:none;}
  .prov-card{
    position:relative; flex-shrink:0; width:126px; margin-top:24px;
    background:linear-gradient(165deg, rgba(28,46,88,0.9) 0%, rgba(12,23,48,0.96) 100%);
    border:1px solid rgba(241,125,30,0.4); border-radius:20px; padding:38px 10px 14px;
    text-align:left; cursor:pointer;
    box-shadow:0 18px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(241,125,30,0.06) inset, 0 0 22px rgba(241,125,30,0.22);
    animation:prov-float 5.5s ease-in-out infinite;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .prov-card:hover, .prov-card:active{
    transform:translateY(-4px);
    box-shadow:0 22px 42px rgba(0,0,0,0.55), 0 0 30px rgba(241,125,30,0.35);
  }
  @keyframes prov-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  .prov-card .avatar{
    position:absolute; top:-28px; left:50%; transform:translateX(-50%); margin:0;
    width:68px; height:68px; font-size:21px;
    border:3px solid var(--orange);
    box-shadow:0 10px 22px rgba(0,0,0,0.45), 0 0 0 5px #0C1730, 0 0 20px rgba(241,125,30,0.5);
  }
  .prov-card .verified-badge{
    position:absolute; top:2px; left:calc(50% + 18px); z-index:2;
    width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg, var(--orange), var(--orange-deep)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:10px;
    border:2.5px solid #0C1730; box-shadow:0 3px 8px rgba(0,0,0,0.4);
  }
  .prov-card .name{font-size:12.5px; font-weight:700; color:#fff; text-align:center;}
  .prov-card .role{font-size:10.5px; color:rgba(255,255,255,0.55); margin-bottom:4px; text-align:center;}
  .prov-card .rating{font-size:12px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; gap:4px;}
  .prov-card .rating i{color:var(--gold); font-size:11px;}
  .prov-card .count{font-size:10px; color:rgba(255,255,255,0.4); font-weight:400;}

  .prov-grid{display:flex; flex-wrap:wrap; gap:14px 12px; padding:26px 20px 20px;}
  .prov-grid .prov-card{width:calc(50% - 6px); flex-shrink:0;}

  /* ---------- Stories (bandeau prestataires en vedette) ---------- */
  .stories-bar{display:flex; gap:14px; padding:14px 20px 4px; overflow-x:auto;}
  .stories-bar::-webkit-scrollbar{display:none;}
  .story-item{display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; width:60px; background:none; border:none; cursor:pointer;}
  .story-ring{
    width:58px; height:58px; border-radius:50%; padding:2.5px;
    background:linear-gradient(135deg, var(--orange), var(--gold));
    display:flex; align-items:center; justify-content:center;
  }
  .story-ring.add{background:var(--glass);}
  .story-ring .avatar{width:100%; height:100%; border:2px solid #0C1730;}
  .story-item span{font-size:10px; font-weight:600; color:#fff; text-align:center; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,0.45); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* ---------- Fil d'actualité (feed social) ---------- */
  .feed-list{display:flex; flex-direction:column; gap:16px; padding:22px 20px 20px;}
  .feed-post{
    background:var(--glass-strong);
    border:1px solid var(--line); border-radius:20px; overflow:hidden; cursor:pointer;
    box-shadow:0 6px 18px var(--card-shadow); animation:cardSlideIn .38s ease both;
    content-visibility:auto; contain-intrinsic-size:auto 420px;
  }
  @keyframes cardSlideIn{ from{opacity:0; transform:translateY(14px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
  .prov-card{ animation:cardSlideIn .32s ease both; }
  .feed-post-head{display:flex; align-items:center; gap:10px; padding:12px 14px;}
  .feed-post-head .avatar{width:38px; height:38px; font-size:13px; flex-shrink:0;}
  .feed-post-who{flex:1; min-width:0;}
  .feed-post-who .fname{display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--text-main);}
  .feed-post-who .fname i{color:var(--orange); font-size:11px;}
  .feed-post-who .frole{font-size:10.5px; color:var(--muted);}
  .feed-post-media{width:100%; aspect-ratio:4/5; background:#F1E7D8; overflow:hidden; position:relative;}
  .feed-post-media img{width:100%; height:100%; object-fit:cover; display:block;}
  .feed-post-media .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-main); font-size:32px; opacity:0.4;}
  .feed-post-noimg{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:20px 22px; box-sizing:border-box; background:linear-gradient(160deg,#F6EFE2,#EDE1CC);}
  .feed-post-noimg-head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text-main); opacity:0.75; text-transform:uppercase; letter-spacing:.3px;}
  .feed-post-noimg-head i{color:var(--orange); font-size:14px;}
  .feed-post-noimg-list{display:flex; flex-direction:column; gap:8px;}
  .fpn-row{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.55); border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:9px 12px;}
  .fpn-icon{width:30px; height:30px; flex:none; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:13px; box-shadow:0 1px 3px rgba(0,0,0,0.08);}
  .fpn-name{flex:1; font-size:12.5px; font-weight:600; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fpn-price{font-size:12px; font-weight:800; color:var(--orange); flex:none;}
  .feed-post-noimg-more{font-size:11px; font-weight:600; color:var(--muted); text-align:center; margin-top:2px;}
  body.dark-mode .feed-post-noimg{background:linear-gradient(160deg,#2A2620,#211E19);}
  body.dark-mode .fpn-row{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.08);}
  body.dark-mode .fpn-icon{background:rgba(255,255,255,0.1);}
  body.black-mode .feed-post-noimg{background:linear-gradient(160deg,#221E18,#1A1712);}
  body.black-mode .fpn-row{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.08);}
  body.black-mode .fpn-icon{background:rgba(255,255,255,0.1);}
  .feed-post-actions{display:flex; align-items:center; gap:14px; padding:11px 14px 4px;}
  .feed-post-actions i{font-size:16px; color:var(--text-main);}
  .feed-post-actions .r{color:var(--gold);}
  .feed-post-actions .price{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--orange); font-family:'Space Grotesk',sans-serif;}
  .feed-post-body{padding:4px 14px 14px; font-size:12px; color:var(--muted);}
  .feed-post-body b{color:var(--text-main);}
  .feed-post-avatar-wrap{position:relative; flex-shrink:0;}
  .online-dot{position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--glass-strong);}
  .feed-post-carousel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; width:100%; height:100%;}
  .feed-post-carousel::-webkit-scrollbar{display:none;}
  .feed-carousel-slide{flex:0 0 100%; scroll-snap-align:start; height:100%;}
  .feed-carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
  .feed-carousel-dots{position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:5px; pointer-events:none;}
  .fcd{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.5); transition:background .2s, width .2s;}
  .fcd.on{background:#fff; width:14px; border-radius:3px;}
  .feed-price-badge{
    position:absolute; left:12px; bottom:12px; background:var(--orange); color:#fff; font-weight:800; font-size:12.5px;
    padding:5px 11px; border-radius:999px; font-family:'Space Grotesk',sans-serif; box-shadow:0 3px 10px rgba(0,0,0,0.25); pointer-events:none;
  }
  .feed-post-actions i{cursor:pointer;}
  .feed-post-cta{display:flex; gap:8px; padding:0 14px 14px;}
  .feed-reserve-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--orange); color:#fff;
    border:none; border-radius:12px; padding:10px 12px; font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer;
  }
  .feed-reserve-btn:active{background:var(--orange-deep);}
  .feed-follow-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; background:transparent; color:var(--orange);
    border:1.5px solid var(--orange); border-radius:12px; padding:10px 13px; font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer; white-space:nowrap;
  }
  .feed-follow-btn.following{background:rgba(34,197,94,0.12); color:var(--green); border-color:var(--green);}
  /* ---------- Onglets de catégorie / Pour vous · Abonnements, au-dessus du fil ---------- */
  .home-feed-tabs{display:flex; gap:8px; padding:2px 20px 10px;}
  .home-feed-tab{flex:1; text-align:center; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; font-weight:700; font-size:12px; cursor:pointer;}
  .home-feed-tab.active{background:var(--orange); border-color:var(--orange); color:#fff;}
  .home-cat-tabs{display:flex; gap:8px; padding:0 20px 12px; overflow-x:auto; scrollbar-width:none;}
  .home-cat-tabs::-webkit-scrollbar{display:none;}
  .home-cat-tab{flex-shrink:0; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; font-weight:600; font-size:11.5px; white-space:nowrap; cursor:pointer;}
  .home-cat-tab.active{background:#fff; color:var(--navy); border-color:#fff;}
  /* ---------- Recommandé pour vous ---------- */
  .reco-section-title{display:flex; align-items:center; gap:7px; padding:18px 20px 10px; font-size:14px; font-weight:800; color:#fff;}
  .reco-section-title i{color:var(--gold);}

  /* ---------- Fil d'actualité (accueil) : défilement horizontal infini au doigt,
     indépendant du scroll vertical de la page ---------- */
  #home-prov-all{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-padding-left:20px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #home-prov-all::-webkit-scrollbar{display:none;}
  #home-prov-all .feed-post{flex:0 0 78%; max-width:320px; scroll-snap-align:start;}
  .feed-loop-mark{flex:0 0 0; width:0; height:1px; align-self:stretch;}

  /* ---------- Carte d'entrée "Tous les catalogues", tout à gauche du carrousel horizontal :
     on y arrive en balayant vers la gauche depuis le début du fil de publications. ---------- */
  .feed-catalog-entry{
    flex:0 0 44%; max-width:190px; scroll-snap-align:start; align-self:stretch;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
    gap:10px; padding:18px 16px; border:none; border-radius:20px; cursor:pointer; text-align:left;
    background:linear-gradient(160deg, var(--orange) 0%, #C7590F 100%);
    box-shadow:0 10px 24px rgba(241,125,30,0.35); color:#fff;
  }
  .feed-catalog-entry .fce-icon{width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; font-size:16px;}
  .feed-catalog-entry .fce-title{font-size:14.5px; font-weight:800; line-height:1.25;}
  .feed-catalog-entry .fce-sub{font-size:10.5px; font-weight:600; opacity:0.85;}
  .feed-catalog-entry .fce-cta{display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; background:rgba(255,255,255,0.18); padding:6px 10px; border-radius:999px;}

  /* ---------- Vue "Tous les catalogues" : les services de chaque prestataire, groupés
     par prestataire, dans une rangée compacte défilable au doigt. ---------- */
  .acat-group{background:var(--glass-strong); border:1px solid var(--line); border-radius:18px; padding:12px 12px 14px; margin-bottom:12px; box-shadow:0 4px 14px var(--card-shadow); content-visibility:auto; contain-intrinsic-size:auto 190px;}
  .acat-head{display:flex; align-items:center; gap:10px; cursor:pointer; margin-bottom:10px;}
  .acat-who{flex:1; min-width:0;}
  .acat-name{display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--text-main);}
  .acat-name i{color:var(--orange); font-size:11px;}
  .acat-role{font-size:11px; color:var(--muted);}
  .acat-arrow{color:var(--muted); font-size:12px;}
  .acat-row{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
  .acat-row::-webkit-scrollbar{display:none;}
  .acat-card{position:relative; flex:0 0 84px; width:84px; height:84px; border-radius:14px; overflow:hidden; background:#F1E7D8; cursor:pointer;}
  .acat-card img{width:100%; height:100%; object-fit:cover; display:block;}
  .acat-card .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-main); font-size:18px; opacity:0.4;}
  .acat-price{position:absolute; left:5px; bottom:5px; background:rgba(12,23,48,0.72); color:#fff; font-size:9.5px; font-weight:800; padding:3px 6px; border-radius:7px;}
  .acat-more{flex:0 0 84px; width:84px; height:84px; border-radius:14px; border:1.5px dashed var(--line); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;}

  /* ---------- Fil vertical (publications des utilisateurs) : sous le carrousel
     horizontal "infini" ci-dessus, on ajoute un flux vertical classique qu'on
     alimente au fur et à mesure du scroll (défilement infini vertical). ---------- */
  #home-feed-vertical{padding-top:4px;}
  #home-feed-vertical .feed-post{width:100%;}
  .feed-vertical-sentinel{height:1px; width:100%;}
  .feed-loading-row{display:flex; align-items:center; justify-content:center; gap:9px; padding:20px 20px 26px; color:rgba(255,255,255,0.75); font-size:12.5px; font-weight:600;}
  .feed-loading-row .spin{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); border-top-color:#fff; animation:feedSpin .7s linear infinite; flex-shrink:0;}
  @keyframes feedSpin{ to{ transform:rotate(360deg); } }
  .feed-end-row{display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 20px 30px; text-align:center;}
  .feed-end-row i{font-size:20px; color:var(--green);}
  .feed-end-row span{color:rgba(255,255,255,0.75); font-size:12px; font-weight:600;}

  /* Autre système de rendu #1 : bandeau "Suggestions" inséré dans le flux vertical,
     pour varier avec des cartes de publication classiques. */
  .feed-suggest-card{background:var(--glass-strong); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 6px 18px var(--card-shadow);}
  .feed-suggest-title{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--text-main); margin-bottom:11px;}
  .feed-suggest-title i{color:var(--orange);}
  .feed-suggest-row{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;}
  .feed-suggest-row::-webkit-scrollbar{display:none;}
  .feed-suggest-item{flex:0 0 84px; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer;}
  .feed-suggest-item .name{font-size:10.5px; font-weight:700; color:var(--text-main); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
  .feed-suggest-item .role{font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
  .feed-suggest-item button{margin-top:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--orange); background:transparent; color:var(--orange); font-weight:700; font-size:9.5px;}
  .feed-suggest-item button.following{background:var(--green); border-color:var(--green); color:#fff;}

  /* Autre système de rendu #2 : duo de cartes compactes côte à côte (grille 2 colonnes),
     pour aérer le flux vertical avec un format visuel différent du feed-post plein écran. */
  .feed-duo-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .feed-duo-card{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; background:#F1E7D8; box-shadow:0 6px 16px var(--card-shadow); cursor:pointer;}
  .feed-duo-card img{width:100%; height:100%; object-fit:cover; display:block;}
  .feed-duo-card .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:26px; opacity:0.35;}
  .feed-duo-card .overlay{position:absolute; left:0; right:0; bottom:0; padding:26px 10px 10px; background:linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));}
  .feed-duo-card .overlay .name{color:#fff; font-weight:700; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .feed-duo-card .overlay .meta{color:rgba(255,255,255,0.82); font-size:9.5px; margin-top:2px; display:flex; align-items:center; gap:4px;}
  .feed-duo-card .overlay .meta i{color:var(--gold); font-size:9px;}
  .feed-duo-card .price-tag{position:absolute; top:8px; right:8px; background:var(--orange); color:#fff; font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:999px;}

  /* Autre système de rendu #3 : carte "témoignage" (avis client mis en avant), insérée
     de temps en temps dans le fil vertical pour rassurer/varier le contenu. */
  .feed-testimonial-card{background:var(--glass-strong); border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 6px 18px var(--card-shadow); position:relative; overflow:hidden;}
  .feed-testimonial-card .quote-icon{position:absolute; top:10px; right:14px; font-size:34px; color:var(--line); opacity:.6;}
  .feed-testimonial-card .tt-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .feed-testimonial-card .tt-name{font-size:12.5px; font-weight:800; color:var(--text-main);}
  .feed-testimonial-card .tt-sub{font-size:10.5px; color:var(--muted);}
  .feed-testimonial-card .tt-stars{color:var(--gold); font-size:11px; margin-top:2px;}
  .feed-testimonial-card .tt-text{font-size:12.5px; color:var(--text-main); line-height:1.55; font-style:italic; position:relative; z-index:1;}
  .feed-testimonial-card .tt-about{margin-top:12px; display:flex; align-items:center; gap:8px; padding-top:11px; border-top:1px dashed var(--line); cursor:pointer;}
  .feed-testimonial-card .tt-about .lbl{font-size:10.5px; color:var(--muted);}
  .feed-testimonial-card .tt-about .pname{font-size:11.5px; font-weight:700; color:var(--orange);}

  /* Double-tap pour aimer une publication (façon Instagram), sur la photo du fil. */
  .dtl-heart{position:absolute; transform:translate(-50%,-50%) scale(0); font-size:64px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.45); pointer-events:none; z-index:5; animation:dtlPop .7s ease forwards;}
  @keyframes dtlPop{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:0; } 22%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; } 40%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

  /* Cartes "squelette" au format feed-post exact, affichées pendant le chargement d'un
     nouveau palier du fil vertical, pour un rendu plus fluide qu'un simple loader. */
  .feed-post-skeleton .skeleton-line, .feed-post-skeleton .skeleton-circle{ background-size:240px 100%; animation:shimmer 1.3s infinite linear; border-radius:8px; }

  /* Bouton flottant "Retour en haut" sur l'accueil, visible après un certain scroll. */
  .home-scrolltop-btn{
    position:fixed; right:18px; bottom:88px; width:42px; height:42px; border-radius:50%; border:none;
    background:var(--orange); color:#fff; font-size:15px; box-shadow:0 6px 16px rgba(0,0,0,0.28);
    display:flex; align-items:center; justify-content:center; z-index:40; cursor:pointer;
    opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  }
  .home-scrolltop-btn.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

  /* ---------- Portfolio (grille de réalisations, comptes Prestataire) ---------- */
  .portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:100%;}
  .portfolio-card{position:relative; aspect-ratio:1/1; background:#F1E7D8; overflow:hidden; cursor:pointer;}
  .portfolio-card img{width:100%; height:100%; object-fit:cover; display:block;}
  .portfolio-card .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-main); font-size:20px; opacity:0.4;}
  .portfolio-card::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:52%; pointer-events:none;
    background:linear-gradient(to top, rgba(12,23,48,0.75), rgba(12,23,48,0) 100%);
  }
  .portfolio-card .price-tag{
    position:absolute; bottom:6px; left:6px; right:6px; z-index:1;
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:12px; font-weight:800; color:#fff;
    font-family:'Space Grotesk',sans-serif;
  }
  .portfolio-card .price-tag .price-amount{
    background:var(--orange); color:#fff; padding:4px 9px; border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25); white-space:nowrap;
  }
  .portfolio-card .price-tag .price-cta{
    width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.92); color:var(--orange);
    display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
  }
  .portfolio-admin-actions{position:absolute; top:5px; right:5px; display:flex; gap:5px; z-index:2;}
  .portfolio-admin-actions button{
    width:22px; height:22px; border-radius:7px; border:none; background:rgba(12,23,48,0.6); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:9px; flex-shrink:0;
  }

  /* ---------- Search screen ---------- */
  .search-header{padding:calc(16px + env(safe-area-inset-top)) 20px 4px;}
  .search-header h1{font-size:19px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .explore-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 8px; padding:14px 20px 4px;}
  .explore-tile{
    display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:14px; padding:10px 4px; cursor:pointer; font-family:inherit;
  }
  .explore-tile.active{background:var(--orange); border-color:var(--orange);}
  .explore-tile i{font-size:16px; color:var(--text-main);}
  .explore-tile.active i{color:#fff;}
  .explore-tile span{font-size:9.5px; font-weight:600; color:var(--text-main); text-align:center; line-height:1.2;}
  .explore-tile.active span{color:#fff;}
  .chips{display:flex; gap:8px; padding:12px 20px 4px; overflow-x:auto;}
  .chips::-webkit-scrollbar{display:none;}
  .chip{
    flex-shrink:0; padding:8px 15px; border-radius:999px; font-size:12px; font-weight:700;
    border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:var(--text-main); cursor:pointer;
  }
  .chip.active{background:var(--orange); border-color:var(--orange); color:#fff;}
  .result-count{font-size:11.5px; color:rgba(255,255,255,0.8); padding:10px 20px 2px; text-shadow:0 1px 6px rgba(0,0,0,0.4);}
  .result-list{display:flex; flex-direction:column; gap:10px; padding:6px 20px 20px;}
  .result-card{
    display:flex; align-items:center; gap:12px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px;
    padding:10px; cursor:pointer; box-shadow:0 3px 10px var(--card-shadow);
  }
  .result-card .avatar{width:52px; height:52px; font-size:16px;}
  .result-info{flex:1; min-width:0;}
  .result-info .name-row{display:flex; align-items:center; gap:4px;}
  .result-info .name-row .name{font-size:13.5px; font-weight:700; color:var(--text-main);}
  .result-info .name-row i{color:var(--orange); font-size:12px;}
  .result-info .role{font-size:11.5px; color:var(--muted);}
  .result-info .meta{display:flex; align-items:center; gap:10px; margin-top:3px;}
  .result-info .meta .r{font-size:12px; font-weight:700; color:var(--text-main);}
  .result-info .meta .loc{font-size:10.5px; color:#B5B0A6; display:flex; align-items:center; gap:3px;}
  .result-card > i.fa-chevron-right{color:#C4C4C4; font-size:13px;}

  /* ---------- Publish screen ---------- */
  .pub-header{padding:calc(16px + env(safe-area-inset-top)) 20px 4px;}
  .pub-header h1{font-size:19px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .pub-header p{font-size:12px; color:rgba(255,255,255,0.85); margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,0.4);}
  .pub-form{padding:16px 20px 24px; display:flex; flex-direction:column; gap:14px;}
  .upload-box{
    height:104px; border:2px dashed var(--line); border-radius:16px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#B5B0A6;
    cursor:pointer;
  }
  .upload-box i{font-size:19px;}
  .upload-box span{font-size:11.5px; font-weight:600;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:12px; font-weight:700; color:var(--text-main);}
  .field input, .field select, .field textarea{
    background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:12px; padding:11px 13px;
    font-size:13px; outline:none; font-family:inherit; color:#1A1A2E;
  }
  .field textarea{resize:none;}
  .publish-btn{
    margin-top:6px; padding:14px; border-radius:13px; border:none; background:var(--orange); color:#fff;
    font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 10px 20px rgba(241,125,30,0.3);
  }
  .publish-success{text-align:center; font-size:12.5px; font-weight:700; color:var(--green); margin-top:2px;}
  .form-section-title{
    display:flex; align-items:center; gap:8px; margin:4px 0 -2px;
  }
  .form-section-title .num{
    width:20px; height:20px; border-radius:50%; background:var(--orange); color:#fff; font-size:10.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .form-section-title span{font-size:12.5px; font-weight:700; color:var(--text-main); text-transform:uppercase; letter-spacing:.3px;}
  .field-optional{font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0;}

  /* ---------- Toggle type de compte (Prestataire / Commerçant) ---------- */
  .acct-type-toggle{display:flex; gap:8px; background:var(--glass); border:1px solid var(--line); border-radius:15px; padding:5px;}
  .acct-type-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 6px; border-radius:11px; border:none;
    background:transparent; color:var(--muted); font-weight:700; font-size:11.5px; cursor:pointer; text-align:center; font-family:inherit; line-height:1.3;
  }
  .acct-type-btn i{font-size:16px;}
  .acct-type-btn.active{background:var(--navy); color:#fff; box-shadow:0 6px 14px rgba(22,38,77,0.25);}
  .acct-type-btn.active i{color:var(--orange);}

  /* ---------- Catalogue e-commerce (comptes Commerçant) ---------- */
  .catalog-filter-row{display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none;}
  .catalog-filter-row::-webkit-scrollbar{display:none;}
  .catalog-filter-chip{
    flex-shrink:0; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(16px);
    color:var(--text-main); font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit;
  }
  .catalog-filter-chip.active{background:var(--orange); color:#fff; border-color:var(--orange);}
  .catalog-count{font-size:11px; font-weight:700; color:var(--muted); background:#F1E7D8; padding:4px 10px; border-radius:999px;}
  .catalog-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; width:100%;}
  .product-card{
    background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; box-shadow:0 3px 10px var(--card-shadow); cursor:pointer; display:flex; flex-direction:column;
    min-width:0; max-width:100%; transition:transform .15s ease, box-shadow .15s ease;
  }
  .product-card:active{transform:scale(0.97);}
  .product-img-wrap{position:relative; width:100%; aspect-ratio:1/1; background:#F1E7D8; overflow:hidden;}
  .product-img-wrap img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
  .product-card:active .product-img-wrap img{transform:scale(1.06);}
  .product-img-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-main); font-size:26px; opacity:0.5;}
  /* Produit sans photo : au lieu d'une simple icône plate, on invite le visiteur à
     demander une photo au vendeur (et on encourage le vendeur à en ajouter une). */
  .product-img-placeholder.no-photo{
    flex-direction:column; gap:7px; padding:12px; text-align:center; opacity:1;
    background:repeating-linear-gradient(135deg, rgba(22,38,77,0.035) 0 10px, rgba(22,38,77,0.06) 10px 20px);
  }
  .product-img-placeholder.no-photo i.fa-image{font-size:22px; color:var(--muted); opacity:.7;}
  .product-img-placeholder.no-photo>span{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.3;}
  .request-photo-btn{
    display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; border:none;
    background:var(--orange); color:#fff; font-weight:700; font-size:10px; font-family:inherit; cursor:pointer;
    box-shadow:0 3px 8px rgba(241,125,30,0.35);
  }
  .add-photo-hint{font-size:10px; font-weight:700; color:var(--orange);}
  .product-quickview{
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(12,23,48,0.5);
    backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10.5px; z-index:2;
  }
  .product-rating-chip{
    position:absolute; bottom:8px; right:8px; display:flex; align-items:center; gap:3px; padding:3px 8px; border-radius:999px;
    background:rgba(12,23,48,0.62); backdrop-filter:blur(6px); color:#fff; font-size:10px; font-weight:700; z-index:2;
  }
  .product-rating-chip i{color:var(--gold); font-size:9px;}
  .stock-badge{
    position:absolute; top:8px; left:8px; font-size:9.5px; font-weight:700; padding:4px 9px; border-radius:999px; background:#DCFCE7; color:#16A34A;
    text-transform:uppercase; letter-spacing:0.2px; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:2;
  }
  .stock-badge.out{background:#FEE2E2; color:#DC2626;}
  .product-admin-actions{position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2;}
  .product-admin-actions button{
    width:26px; height:26px; border-radius:8px; border:none; background:rgba(12,23,48,0.55); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:10px; backdrop-filter:blur(6px); flex-shrink:0;
  }
  .product-info{padding:9px 10px 11px; display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;}
  .product-name{
    font-size:12px; font-weight:700; color:var(--text-main); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:32px; word-break:break-word; overflow-wrap:anywhere;
  }
  .product-desc-snip{
    font-size:10.5px; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:2px;
  }
  .product-price-row{display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; margin-top:2px;}
  .product-price{font-size:12.5px; font-weight:700; color:var(--orange); font-family:'Space Grotesk',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .product-add-btn{
    width:30px; height:30px; border-radius:9px; border:none; background:var(--orange); color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px;
  }
  .product-add-btn.added{background:var(--green);}
  .product-add-btn.disabled, .product-add-btn:disabled{background:#D9D4C8; color:#fff; cursor:not-allowed;}

  /* ---------- Messages ---------- */
  .msg-header{padding:calc(16px + env(safe-area-inset-top)) 20px 8px;}
  .msg-header h1{font-size:19px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .msg-list{display:flex; flex-direction:column; gap:9px; padding:4px 20px 20px;}
  .msg-card{
    display:flex; align-items:center; gap:11px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px;
    padding:11px; cursor:pointer; box-shadow:0 3px 10px var(--card-shadow);
  }
  .msg-card .avatar{width:46px; height:46px; font-size:13px;}
  .msg-info{flex:1; min-width:0;}
  .msg-info .row1{display:flex; align-items:center; justify-content:space-between;}
  .msg-info .row1 .name{font-size:13.5px; font-weight:700; color:var(--text-main);}
  .msg-info .row1 .time{font-size:10.5px; color:#B5B0A6;}
  .msg-info .last{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .unread-badge{
    width:19px; height:19px; border-radius:50%; background:var(--orange); color:#fff; font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  /* ---------- Chat ---------- */
  .chat-header{display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 12px 12px; background:var(--navy); flex-shrink:0;}
  .chat-header .back{width:34px; height:34px; border-radius:50%; background:var(--glass); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .chat-header .avatar{width:34px; height:34px; font-size:11px;}
  .chat-header .who b{display:block; color:#fff; font-size:13px;}
  .chat-header .who span{color:rgba(255,255,255,0.6); font-size:10.5px;}
  .chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:9px;}
  .bubble{max-width:75%; padding:9px 14px; border-radius:16px; font-size:12.5px; line-height:1.5;}
  .bubble.them{align-self:flex-start; background:var(--eau-tint); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(79,195,217,0.35); color:var(--text-main); border-bottom-left-radius:4px;}
  .bubble.me{align-self:flex-end; background:var(--orange); color:#fff; border-bottom-right-radius:4px;}
  .chat-input-row{display:flex; align-items:center; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); flex-shrink:0;}
  .chat-input-row input{flex:1; background:var(--sand); border:none; border-radius:999px; padding:11px 16px; font-size:12.5px; outline:none; font-family:inherit;}
  .chat-send{width:38px; height:38px; border-radius:50%; background:var(--orange); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}

  /* ---------- Profile ---------- */
  .profile-hero{
    position:relative; padding-bottom:56px; padding-top:calc(16px + env(safe-area-inset-top)); flex-shrink:0;
    background:linear-gradient(120deg, var(--orange), var(--orange-deep));
    overflow:hidden; min-height:230px;
  }
  .profile-map{position:absolute; inset:0; z-index:0; background:linear-gradient(120deg, var(--orange), var(--orange-deep));}
  .profile-map iframe{width:100%; height:100%; border:0; display:block;}
  .profile-map-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(22,38,77,0.42) 0%, rgba(22,38,77,0.08) 38%, rgba(241,125,30,0.5) 100%);
  }
  .gmaps-btn{
    position:absolute; z-index:3; right:14px; bottom:14px; display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px;
    background:var(--glass-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--text-main); font-weight:700; font-size:11px;
    text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  .gmaps-btn i{color:#4285F4; font-size:13px;}
  .profile-topbar{display:flex; align-items:center; justify-content:space-between; padding:0 16px; position:relative; z-index:2;}
  .profile-avatar-wrap{display:flex; justify-content:center; margin-top:8px; position:relative; z-index:2;}
  .profile-avatar-wrap .avatar{width:86px; height:86px; font-size:28px; border:4px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,0.2);}
  .avatar-edit-zone{position:relative; display:inline-block;}
  .avatar-edit-zone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
  .avatar-edit-cam{position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.25); pointer-events:none;}
  .avatar-edit-zone.uploading .avatar-edit-cam{background:var(--muted);}
  .profile-card-info{padding:0 20px; text-align:center; margin-top:-40px; position:relative; z-index:3;}
  .profile-name{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px;}
  .profile-name h1{font-size:19px; font-weight:700; color:var(--text-main);}
  .profile-name i{color:var(--orange); font-size:15px;}
  .profile-role{font-size:12.5px; color:var(--muted); margin-top:2px;}
  .profile-loc{font-size:11px; color:#B5B0A6; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;}
  .stats-row{
    display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:18px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line);
    border-radius:16px; padding:14px 8px; box-shadow:0 3px 10px var(--card-shadow);
  }
  .stats-row .stat{text-align:center;}
  .stats-row .stat:nth-child(2){border-left:1px solid #EFE7DA; border-right:1px solid #EFE7DA;}
  .stats-row .stat b{display:block; font-size:17px; color:var(--text-main); font-family:'Space Grotesk',sans-serif;}
  .stats-row .stat span{font-size:10px; color:var(--muted);}
  .contact-btn{
    width:100%; margin-top:14px; padding:13px; border-radius:13px; border:none; background:var(--navy); color:#fff;
    font-weight:700; font-size:13px; cursor:pointer;
  }
  /* ---------- Boutons d'action : Appeler / WhatsApp / Message ---------- */
  .action-row{display:flex; gap:8px; margin-top:14px;}
  .action-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 8px; border-radius:13px; border:none;
    font-weight:700; font-size:12px; cursor:pointer;
  }
  .action-btn.call{background:var(--navy); color:#fff;}
  .action-btn.whatsapp{background:#25D366; color:#fff;}
  .action-btn.msg{background:var(--glass); color:var(--text-main); border:1px solid var(--line);}
  .action-btn i{font-size:13px;}
  .fav-btn{
    position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:4; width:36px; height:36px; border-radius:50%;
    background:var(--glass); backdrop-filter:blur(10px); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .fav-btn.active{color:#F13E3E;}
  .profile-section{padding:0 20px; margin-top:22px; text-align:left;}
  .service-row{
    display:flex; align-items:center; gap:11px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px;
    padding:10px; margin-bottom:9px; box-shadow:0 3px 10px var(--card-shadow);
  }
  .service-icon{width:44px; height:44px; border-radius:12px; background:#F1E7D8; display:flex; align-items:center; justify-content:center; color:var(--text-main); flex-shrink:0; overflow:hidden;}
  .service-icon img{width:100%; height:100%; object-fit:cover;}
  .service-info{flex:1; min-width:0;}
  .service-info .sname{font-size:12.5px; font-weight:700; color:var(--text-main);}
  .service-info .sprice{font-size:11px; color:var(--orange); font-weight:700; margin-top:1px;}
  .active-badge{font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; background:#DCFCE7; color:#16A34A; flex-shrink:0;}
  .add-cart-btn{
    width:32px; height:32px; border-radius:10px; border:none; background:var(--orange); color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
  }
  .add-cart-btn.added{background:var(--green);}
  .review-card{background:var(--glass-strong); border:1px solid var(--line); border-radius:16px; padding:13px; margin-bottom:9px; box-shadow:0 3px 10px var(--card-shadow); content-visibility:auto; contain-intrinsic-size:auto 110px;}
  .review-top{display:flex; align-items:center; justify-content:space-between;}
  .review-who{display:flex; align-items:center; gap:8px;}
  .review-who .avatar{width:30px; height:30px; font-size:10.5px;}
  .review-name{font-size:12px; font-weight:700; color:var(--text-main);}
  .review-rating{font-size:11px; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:3px;}
  .review-rating i{color:var(--gold); font-size:10px;}
  .review-text{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5;}
  .review-time{font-size:10px; color:#C4C4C4; margin-top:6px;}
  .review-form{background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px; box-shadow:0 3px 10px var(--card-shadow);}
  .review-form-label{font-size:12.5px; font-weight:700; color:var(--text-main); margin-bottom:8px;}
  .star-input{display:flex; gap:8px; margin-bottom:10px;}
  .star-input i{font-size:20px; cursor:pointer; transition:transform .1s;}
  .star-input i:active{transform:scale(1.15);}
  .review-form textarea{width:100%; min-height:56px; resize:vertical; border:1px solid var(--card-line); border-radius:12px; padding:9px 11px; font-family:inherit; font-size:12.5px; outline:none; background:#fff;}
  .review-submit-btn{margin-top:10px; width:100%; border:none; background:var(--orange); color:#fff; font-weight:700; font-size:12.5px; padding:11px; border-radius:12px; cursor:pointer;}
  .review-submit-btn:active{background:var(--orange-deep);}

  .screen-view{display:none; flex:1; min-height:0; flex-direction:column; position:relative; z-index:1;}
  .screen-view.visible{display:flex; animation:screenIn .28s ease;}
  @keyframes screenIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  @keyframes tabInNext{ from{opacity:0; transform:translateX(32px);} to{opacity:1; transform:translateX(0);} }
  @keyframes tabInPrev{ from{opacity:0; transform:translateX(-32px);} to{opacity:1; transform:translateX(0);} }
  .screen-view.visible.tab-enter-next{ animation:tabInNext .24s ease; }
  .screen-view.visible.tab-enter-prev{ animation:tabInPrev .24s ease; }
  @keyframes shimmer{ 0%{background-position:-120px 0;} 100%{background-position:120px 0;} }
  @keyframes shakeError{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
  .otp-shake{ animation:shakeError 0.4s; }
  .otp-boxes{ display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
  .otp-box{ width:15%; aspect-ratio:1/1; border-radius:12px; border:1px solid var(--line); font-size:19px; font-weight:700; text-align:center; color:var(--text-main); box-sizing:border-box; }
  .otp-box:focus{ outline:none; border-color:var(--orange); }
  .otp-box.filled{ border-color:rgba(22,38,77,0.3); }
  .skeleton-card{cursor:default;}
  .skeleton-circle, .skeleton-line{
    background:linear-gradient(90deg, rgba(255,255,255,0.55) 25%, rgba(255,255,255,0.85) 37%, rgba(255,255,255,0.55) 63%);
    background-size:240px 100%; animation:shimmer 1.3s infinite linear; border-radius:8px;
  }
  .skeleton-circle{width:56px; height:56px; border-radius:50%; margin:0 auto 10px;}
  .skeleton-line{height:9px; margin:0 auto 6px;}

  /* ---------- Badge panier (icône topbar) ---------- */
  .cart-badge{
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--orange);
    color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--navy-deep);
  }

  /* ---------- Panier flottant : visible depuis n'importe quel écran dès qu'il contient au
     moins un article (sauf sur l'écran du panier lui-même), pas seulement via l'icône du
     topbar. Positionné une seule fois au niveau de .app-shell pour rester au même endroit
     quel que soit l'onglet actif. ---------- */
  .floating-cart-btn{
    position:absolute; left:14px; right:14px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:40;
    display:flex; align-items:center; gap:10px; padding:9px 14px; border:none; border-radius:16px; cursor:pointer;
    background:linear-gradient(120deg, var(--orange), var(--orange-deep)); color:#fff;
    box-shadow:0 10px 24px rgba(241,125,30,0.45);
    animation:floatingCartIn 0.25s ease;
  }
  .floating-cart-btn .fcb-icon{position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.22); flex-shrink:0;}
  .floating-cart-btn .fcb-icon i{font-size:15px;}
  .floating-cart-btn .fcb-count{position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:#fff; color:var(--orange-deep); font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--orange-deep);}
  .floating-cart-btn .fcb-info{display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; text-align:left;}
  .floating-cart-btn .fcb-label{font-size:10.5px; font-weight:600; opacity:0.9;}
  .floating-cart-btn .fcb-total{font-size:14.5px; font-weight:800; font-family:'Space Grotesk',sans-serif;}
  .floating-cart-btn .fcb-arrow{font-size:13px; opacity:0.85; flex-shrink:0;}
  @keyframes floatingCartIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

  /* ---------- Panneaux de tiroirs/sheets (toujours fond blanc, quel que soit le thème) :
     on fige ici les variables de couleur sur leurs valeurs "mode clair" pour que le texte,
     les champs et les prix restent lisibles même quand le mode sombre change --text-main,
     --line, --muted et --sand ailleurs dans l'app. ---------- */
  .sheet-panel-light{
    --text-main:#16264D;
    --line:rgba(22,38,77,0.14);
    --muted:#8A93A6;
    --sand:#FBF3E7;
    --glass:rgba(255,255,255,0.76);
    --glass-strong:rgba(255,255,255,0.9);
    color:#16264D;
  }
  .sheet-panel-light{ color-scheme: light; }
  .sheet-panel-light input, .sheet-panel-light select, .sheet-panel-light textarea{ color:#16264D !important; background:#fff !important; }

  /* ---------- Upload multi-photos (publier un service) ---------- */
  .upload-box{position:relative;}
  .upload-box input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
  .photo-preview-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;}
  .photo-preview-strip::-webkit-scrollbar{display:none;}
  .photo-thumb{position:relative; width:64px; height:64px; border-radius:12px; overflow:hidden; flex-shrink:0; border:1px solid var(--line);}
  .photo-thumb img{width:100%; height:100%; object-fit:cover;}
  .photo-thumb .rm{
    position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(12,23,48,0.75); color:#fff;
    border:none; display:flex; align-items:center; justify-content:center; font-size:9px; cursor:pointer;
  }
  .field-row{display:flex; gap:10px;}
  .field-row .field{flex:1;}
  .checkbox-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-main); font-weight:600;}
  .checkbox-row input{width:16px; height:16px;}
  .field-hint{font-size:10.5px; color:#B5B0A6; margin-top:-2px;}
  .profile-upload-row{display:flex; align-items:center; gap:12px;}
  .profile-photo-preview{
    width:64px; height:64px; border-radius:50%; flex-shrink:0; background:var(--glass); border:2px dashed var(--line);
    display:flex; align-items:center; justify-content:center; color:#B5B0A6; overflow:hidden; font-size:18px;
  }
  .profile-photo-preview img{width:100%; height:100%; object-fit:cover;}
  .profile-upload-box{flex:1; height:64px; border-radius:14px;}
  .profile-upload-box i{font-size:15px;}
  .profile-upload-box span{font-size:11px;}

  /* ---------- Panier ---------- */
  .cart-header{padding:calc(16px + env(safe-area-inset-top)) 20px 4px; display:flex; align-items:center; gap:10px;}
  .cart-header .back{width:34px; height:34px; border-radius:50%; background:var(--glass); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
  .cart-header h1{font-size:19px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);}
  .cart-empty{text-align:center; color:rgba(255,255,255,0.85); font-size:13px; margin-top:60px; padding:0 30px; line-height:1.6;}
  .cart-empty i{font-size:34px; display:block; margin-bottom:14px; opacity:0.8;}
  .cart-group{margin:0 20px 16px; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:0 3px 10px var(--card-shadow);}
  .cart-group-head{display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #EFE7DA;}
  .cart-group-head .avatar{width:28px; height:28px; font-size:10px;}
  .cart-group-head .n{font-size:12.5px; font-weight:700; color:var(--text-main); flex:1;}
  .cart-item{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .cart-item .ci-thumb{width:46px; height:46px; border-radius:11px; object-fit:cover; flex-shrink:0; background:var(--sand);}
  .cart-item .ci-thumb-ph{display:flex; align-items:center; justify-content:center; color:var(--text-main); opacity:0.45; font-size:16px;}
  .cart-item .ci-info{flex:1; min-width:0;}
  .cart-item .ci-name{font-size:12px; font-weight:700; color:var(--text-main);}
  .cart-item .ci-price{font-size:11px; color:var(--muted); margin-top:2px;}
  .qty-ctrl{display:flex; align-items:center; gap:8px; background:var(--sand); border-radius:10px; padding:4px 8px;}
  .qty-ctrl button{width:20px; height:20px; border-radius:6px; border:none; background:var(--navy); color:#fff; font-size:11px; cursor:pointer;}
  .qty-ctrl span{font-size:12px; font-weight:700; color:var(--text-main); min-width:14px; text-align:center;}
  .cart-item .rm-item{width:26px; height:26px; border-radius:8px; border:none; background:#FCE7E7; color:#E24343; cursor:pointer; flex-shrink:0;}
  .cart-subtotal{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--text-main); padding-top:8px; border-top:1px solid #EFE7DA;}
  .cart-order-btn{
    width:100%; margin-top:10px; padding:11px; border-radius:12px; border:none; background:#25D366; color:#fff; font-weight:700; font-size:12.5px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .cart-total-bar{
    padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:var(--glass-strong); backdrop-filter:blur(16px); border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .cart-total-bar .lbl{font-size:11.5px; color:var(--muted); font-weight:600;}
  .cart-total-bar .amt{font-size:17px; font-weight:700; color:var(--text-main); font-family:'Space Grotesk',sans-serif;}
  .clear-cart-btn{background:none; border:none; color:#E24343; font-size:11.5px; font-weight:700; cursor:pointer; text-decoration:underline;}

  /* ---------- Toast ---------- */
  .toast{
    position:absolute; left:50%; bottom:148px; transform:translateX(-50%) translateY(10px); z-index:50;
    background:var(--navy); color:#fff; padding:11px 18px; border-radius:999px; font-size:12.5px; font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,0.35); display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition:all 0.25s ease; white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast i{color:var(--orange);}