/* Site web Kveloz (commande en ligne KV Eats), aux couleurs de la charte.
   Thème clair par défaut (fond ivoire), thème sombre (fond charbon). */
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --charbon: #171715; --ivoire: #F2EBDD; --orange: #F28C28; --anthracite: #252522;
  --gris-moyen: #454540; --blanc-casse: #FAF8F3; --gris-clair: #B8B5AD; --vert: #2E9D63; --rouge: #D94A45;
  --fond: var(--ivoire); --surface: var(--blanc-casse); --surface-2: #E9E1D2; --texte: var(--charbon); --texte-2: var(--gris-moyen);
  --filet: rgba(23, 23, 21, .12); --entete: rgba(242, 235, 221, .94); --ombre: 0 14px 36px rgba(23, 23, 21, .14);
  --accent-texte: var(--orange);
  --orange-texte: #A0520C;   /* orange des liens sur fond clair : contraste 4,8 (audit du 25/10) */
  --rayon: 18px; color-scheme: light;
}
:root[data-theme="sombre"] {
  --fond: var(--charbon); --surface: var(--anthracite); --surface-2: #2F2F2B; --texte: var(--ivoire); --texte-2: var(--gris-clair);
  --filet: var(--gris-moyen); --entete: rgba(23, 23, 21, .94); --orange-texte: var(--orange); --ombre: 0 14px 36px rgba(0, 0, 0, .5); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.sans-defilement { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
.conteneur { width: min(1240px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Icônes */
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icone--petite { width: 16px; height: 16px; }
.icone--grande { width: 56px; height: 56px; stroke-width: 1.4; color: var(--texte-2); }
.icone--plein { fill: var(--orange); stroke: var(--orange); }
.icone--orange { color: var(--orange); }
.logo-sombre { display: none; }
:root[data-theme="sombre"] .logo-clair { display: none; }
:root[data-theme="sombre"] .logo-sombre { display: block; }
.theme__soleil { display: none; }
:root[data-theme="sombre"] .theme__lune { display: none; }
:root[data-theme="sombre"] .theme__soleil { display: block; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 0; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.bouton:hover { transform: translateY(-1px); }
.bouton:disabled, .bouton--inactif { opacity: .45; cursor: not-allowed; transform: none; }
.bouton--orange { background: var(--orange); color: var(--charbon); }
.bouton--contour { background: transparent; border: 1.5px solid var(--filet); color: var(--texte); }
.bouton--large { width: 100%; min-height: 54px; font-size: 1.02rem; }
.bouton-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface-2); cursor: pointer; }
.lien { background: none; border: 0; padding: 0; color: var(--orange-texte); font-weight: 700; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.lien .icone { width: 16px; height: 16px; }
.lien-action { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; font-weight: 700; cursor: pointer; color: var(--orange); }

/* Étiquettes, pastilles */
.etiquette { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: .78rem; font-weight: 800; background: var(--surface-2); color: var(--texte-2); }
.etiquette--orange { background: var(--orange); color: var(--charbon); }
.etiquette--rouge { background: var(--rouge); color: var(--ivoire); }
.etiquette--vert { background: var(--vert); color: var(--ivoire); }
.pastille { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); font-weight: 700; font-size: .85rem; }
.note { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: .9rem; }
.note .icone { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: var(--entete); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); transition: background .25s, border-color .25s, box-shadow .25s; }
/* Site KV Eats (app.js ajoute .entete--auto) : transparent tout en haut, blanc cassé (fond du site) dès qu'on fait défiler */
.entete--auto { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.entete--auto.entete--defile { background: var(--fond); border-bottom-color: var(--filet); box-shadow: 0 6px 24px rgba(23, 23, 21, .1); }
/* Accueil : le haut de page orange remonte sous l'en-tête (--haut-entete est mesuré par app.js) ;
   la bordure transparente est peinte par le fond orange et réserve la place de l'en-tête */
body:has(.heros-cloche) .entete { margin-bottom: calc(-1 * var(--haut-entete, 68px)); }
body:has(.heros-cloche) .heros-cloche { border-top: var(--haut-entete, 68px) solid transparent; }
/* sur l'orange, même en mode sombre, l'en-tête garde ses couleurs claires tant qu'il est transparent */
body:has(.heros-cloche) .entete:not(.entete--defile) { --texte: var(--charbon); --texte-2: var(--gris-moyen); --surface: var(--blanc-casse); --filet: rgba(23, 23, 21, .2); color: var(--charbon); }
:root[data-theme="sombre"] body:has(.heros-cloche) .entete:not(.entete--defile) .logo-clair { display: block; }
:root[data-theme="sombre"] body:has(.heros-cloche) .entete:not(.entete--defile) .logo-sombre { display: none; }
.entete__ligne { display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 20px; }
.entete__logo img { height: 48px; width: auto; }
.pays { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); background: none; font-weight: 800; cursor: pointer; }
.recherche { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); max-width: 760px; margin: 0 auto; }
.recherche input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--texte); min-width: 0; }
.recherche .icone { color: var(--texte-2); }
.entete__actions { display: flex; align-items: center; gap: 8px; }
.bouton-entete { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--filet); background: transparent; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; }
.bouton-entete:hover { background: var(--surface); }
.bouton-entete--carre { width: 40px; padding: 0; justify-content: center; }
.panier-bouton { position: relative; background: var(--orange); border-color: var(--orange); color: var(--charbon); }
.panier-bouton:hover { background: var(--orange); }
.pastille-compteur { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--charbon); color: var(--ivoire); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.menu-deroulant { position: relative; }
.menu-deroulant__liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre); }
[data-menu-ville] .menu-deroulant__liste { left: 0; right: auto; }
.menu-deroulant__liste[hidden] { display: none; }
.menu-deroulant__liste a, .menu-deroulant__liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; text-decoration: none; font-weight: 600; cursor: pointer; }
.menu-deroulant__liste a:hover, .menu-deroulant__liste button:hover { background: var(--fond); }
.menu-deroulant__liste [aria-checked="true"] { color: var(--orange); }
.menu-deroulant__liste [aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }
.menu-deroulant__note { padding: 8px 12px; font-size: .82rem; color: var(--texte-2); }

/* ---------------------------------------------------------------- Bannière d'accueil */
.banniere { background: var(--orange); color: var(--charbon); padding: 72px 0 64px; }
.banniere__contenu { text-align: center; }
.banniere h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); font-weight: 500; letter-spacing: -0.03em; }
.banniere h1 strong { font-weight: 800; }
.champ-adresse { position: relative; display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 40px auto 0; padding: 0 20px; height: 70px; background: var(--blanc-casse); border-radius: 14px; box-shadow: 0 16px 40px rgba(23, 23, 21, .25); color: var(--charbon); text-align: left; }
.champ-adresse input { flex: 1; border: 0; background: none; outline: none; font: inherit; font-size: 1.05rem; color: var(--charbon); min-width: 0; }
.champ-adresse > .icone { color: var(--gris-moyen); }
.champ-adresse--modale { margin: 18px 0 8px; height: 58px; box-shadow: none; border: 1px solid var(--filet); }
:root[data-theme="sombre"] .champ-adresse--modale { background: var(--fond); color: var(--texte); }
:root[data-theme="sombre"] .champ-adresse--modale input { color: var(--texte); }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--blanc-casse); color: var(--charbon); border-radius: 14px; box-shadow: var(--ombre); max-height: 320px; overflow: auto; }
.suggestions[hidden] { display: none; }
.suggestions button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--charbon); }
.suggestions button:hover { background: var(--ivoire); }
.suggestions small, .adresse-enregistree small { display: block; color: var(--gris-moyen); font-size: .82rem; }
.banniere__actions { display: flex; justify-content: center; align-items: center; gap: 36px; flex-wrap: wrap; margin-top: 22px; }
.lien-action--banniere { color: var(--charbon); }
.lien-banniere { background: none; border: 0; color: var(--charbon); font-size: .95rem; cursor: pointer; }
.lien-banniere a, button.lien-banniere { font-weight: 800; text-decoration: underline; }

/* ---------------------------------------------------------------- Blocs de page */
.bloc { padding: 40px 0 8px; }
.bloc__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloc__titre { margin-bottom: 18px; }
.bloc__titre--petit { font-size: 1.2rem; margin-bottom: 12px; }
.bloc__sous { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -8px 0 18px; color: var(--texte-2); }
.bloc__sous .icone { width: 16px; height: 16px; }
.page { padding: 32px 0 56px; }
.page__entete { margin-bottom: 14px; }
.page__entete .bloc__sous { margin: 8px 0 0; }

/* Cartes de services (comme « ¿Necesitas algo más? ») */
.services-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 18px; border-radius: var(--rayon); border: 0; text-decoration: none; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.service-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.service-carte__icone { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--blanc-casse); color: var(--charbon); margin-bottom: 10px; }
.service-carte__icone .icone { width: 44px; height: 44px; stroke-width: 1.6; }
.service-carte__nom { font-size: 1.2rem; font-weight: 800; }
.service-carte small { font-weight: 700; opacity: .75; }
.service-carte--eats { background: var(--orange); color: var(--charbon); }
.service-carte--transport { background: var(--charbon); color: var(--ivoire); border: 1px solid var(--gris-moyen); }
.service-carte--transport .service-carte__icone { background: var(--anthracite); color: var(--ivoire); }
.service-carte--retrait { background: var(--surface); color: var(--texte); border: 1px solid var(--filet); }
.service-carte--retrait .service-carte__icone { background: var(--surface-2); color: var(--texte); }

/* Grille et cartes de restaurants */
.grille-restos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.carte-resto { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--rayon); transition: transform .18s ease; min-height: 0; }
.carte-resto:hover { transform: translateY(-3px); }
.carte-resto__photo { position: relative; aspect-ratio: 16 / 10; border-radius: var(--rayon); overflow: hidden; background: var(--surface-2); }
.carte-resto__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-resto__photo .etiquette { position: absolute; left: 10px; bottom: 10px; }
.carte-resto__vide { display: grid; place-items: center; height: 100%; color: var(--texte-2); }
.carte-resto__vide .icone { width: 40px; height: 40px; }
.carte-resto__voile { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(23, 23, 21, .6); color: var(--ivoire); font-weight: 800; }
.carte-resto__corps { padding: 10px 2px 0; }
.carte-resto__ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carte-resto__nom { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-resto__infos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--texte-2); font-size: .86rem; }
.carte-resto__infos span { display: inline-flex; align-items: center; gap: 4px; }
.carte-resto__infos .icone { width: 15px; height: 15px; }
.carte-resto--ferme .carte-resto__corps { opacity: .85; }
.squelette { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: miroir 1.2s infinite linear; border-radius: var(--rayon); }
.carte-resto.squelette { aspect-ratio: 16 / 13; }
.squelette--banniere { height: 260px; }
@keyframes miroir { to { background-position: -200% 0; } }

/* Catégories */
.categories { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.categorie { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; text-align: center; }
.categorie img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 20px rgba(23, 23, 21, .18); transition: transform .2s ease; }
.categorie:hover img { transform: scale(1.05); }

/* Puces, filtres */
.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.puce { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--filet); background: var(--surface); font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.puce--active { background: var(--charbon); color: var(--ivoire); border-color: var(--charbon); }
:root[data-theme="sombre"] .puce--active { background: var(--ivoire); color: var(--charbon); border-color: var(--ivoire); }
.filtres { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 22px; }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; }
.interrupteur span { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-2); transition: background .15s; }
.interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanc-casse); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.interrupteur input:checked + span { background: var(--orange); }
.interrupteur input:checked + span::after { transform: translateX(18px); }
.interrupteur input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.selecteur { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texte-2); }
.selecteur select { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--filet); background: var(--surface); color: var(--texte); font: inherit; font-weight: 700; }
.plats-trouves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.plat-trouve { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--filet); text-decoration: none; }
.plat-trouve img, .plat-trouve__vide { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-2); }
.plat-trouve small { display: block; color: var(--texte-2); }
.vide-texte { grid-column: 1 / -1; color: var(--texte-2); padding: 24px 0; }

/* ---------------------------------------------------------------- Page d'un restaurant */
.resto-entete { position: relative; min-height: 280px; background: var(--charbon) center / cover no-repeat; color: var(--ivoire); display: flex; align-items: flex-end; }
.resto-entete__voile { position: absolute; inset: 0; background: linear-gradient(rgba(23, 23, 21, .25), rgba(23, 23, 21, .85)); }
.resto-entete__contenu { position: relative; padding: 70px 0 28px; }
.resto-entete__contenu p { margin: 8px 0 0; opacity: .85; max-width: 46em; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; text-decoration: none; font-weight: 700; color: var(--ivoire); opacity: .9; }
.retour--sombre { color: var(--texte-2); }
.resto-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.info { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-2); font-weight: 600; }
.info strong { color: var(--texte); }
.onglets-menu { position: sticky; top: 68px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; background: var(--fond); border-bottom: 1px solid var(--filet); }
.onglets-menu a { flex: none; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--texte-2); }
.onglets-menu a:hover { background: var(--surface); color: var(--texte); }
.menu { padding: 10px 0 60px; }
.menu__section { padding-top: 28px; scroll-margin-top: 130px; }
.menu__section h2 { margin-bottom: 14px; }
.grille-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plat { position: relative; display: flex; gap: 14px; align-items: stretch; padding: 14px; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--surface); text-align: left; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.plat:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.plat__texte { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plat__texte small { color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plat__prix { font-weight: 800; margin-top: auto; }
/* Réduction automatique : prix d'origine barré, prix promo orange, badge du pourcentage */
.prix-barre { color: var(--texte-2, #6e6c64); font-weight: 600; text-decoration: line-through; font-size: .9em; }
.prix-promo { color: var(--orange); font-weight: 800; }
.badge-promo { display: inline-block; background: var(--orange); color: var(--charbon); font-size: .72em; font-weight: 800; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.plat img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; flex: none; }
.plat__ajout { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--charbon); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.plat--indispo { opacity: .5; cursor: not-allowed; }
.plat--indispo:hover { transform: none; box-shadow: none; }

/* ---------------------------------------------------------------- Fenêtres modales */
.modale-fond { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(23, 23, 21, .55); animation: apparition .15s ease; }
.modale { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 22px; box-shadow: var(--ombre); padding: 26px; }
.modale--plat { padding: 0; display: flex; flex-direction: column; }
.modale__fermer { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--fond); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.modale__titre { padding-right: 40px; }
@keyframes apparition { from { opacity: 0; } }
.fiche__photo { width: 100%; height: 240px; object-fit: cover; }
.fiche { padding: 22px 24px 8px; }
.fiche__desc { color: var(--texte-2); margin: 8px 0 0; }
.fiche__prix { font-weight: 800; font-size: 1.15rem; margin: 10px 0 6px; }
.groupe { border: 0; padding: 0; margin: 18px 0 0; }
.groupe legend { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--filet); margin-bottom: 4px; }
.option { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--filet); cursor: pointer; }
.option input { width: 20px; height: 20px; accent-color: var(--orange); }
.option span { flex: 1; font-weight: 600; }
.option small { color: var(--texte-2); font-weight: 700; }
.option--indispo { opacity: .45; cursor: not-allowed; }
.option--active { border: 1.5px solid var(--orange); border-radius: 12px; padding: 12px; }
.champ { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-weight: 700; font-size: .92rem; }
.champ input, .champ textarea, .ligne-champ input { padding: 13px 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond); color: var(--texte); font: inherit; font-weight: 500; resize: vertical; }
/* Listes déroulantes : même aspect que les champs, flèche dessinée */
.champ select { appearance: none; -webkit-appearance: none; width: 100%; padding: 13px 42px 13px 14px; border-radius: 12px; border: 1px solid var(--filet); color: var(--texte); font: inherit; font-weight: 500; cursor: pointer;
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.champ select:focus { outline: none; border-color: var(--orange); }
.champ select option { background: var(--surface); color: var(--texte); }
.champ small { color: var(--texte-2); font-weight: 500; }
.fiche__pied { position: sticky; bottom: 0; display: flex; gap: 14px; align-items: center; padding: 16px 24px; background: var(--surface); border-top: 1px solid var(--filet); }
.fiche__pied .bouton--large { flex: 1; }
.quantite { display: inline-flex; align-items: center; gap: 10px; }
.quantite button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--filet); background: var(--fond); cursor: pointer; }
.quantite button .icone { width: 16px; height: 16px; }
.quantite span { min-width: 18px; text-align: center; font-weight: 800; }
.quantite--grande button { width: 42px; height: 42px; }
.adresses-enregistrees h3 { margin: 18px 0 8px; font-size: 1rem; }
.adresse-enregistree, .adresse-choisie { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--filet); border-radius: 12px; background: var(--fond); text-align: left; cursor: pointer; margin-bottom: 8px; }
.adresse-choisie span { flex: 1; }
.adresse-choisie strong { color: var(--orange); }

/* ---------------------------------------------------------------- Tiroir du panier */
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface); box-shadow: -10px 0 40px rgba(0, 0, 0, .2); transform: translateX(105%); transition: transform .25s ease; }
.tiroir--ouvert { transform: none; }
.tiroir-fond { position: fixed; inset: 0; z-index: 80; background: rgba(23, 23, 21, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tiroir-fond--visible { opacity: 1; pointer-events: auto; }
.tiroir__entete { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--filet); }
.tiroir__resto { display: block; padding: 14px 20px 4px; font-weight: 800; text-decoration: none; color: var(--orange); }
.lignes { list-style: none; margin: 0; padding: 0 20px; overflow: auto; flex: 1; }
.ligne { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.ligne__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne__texte small { color: var(--texte-2); }
.ligne__prix { font-weight: 800; margin-top: 4px; }
.tiroir__pied { padding: 16px 20px 20px; border-top: 1px solid var(--filet); display: grid; gap: 12px; }
.total { display: flex; justify-content: space-between; font-size: 1.05rem; }
.vide { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 48px 20px; color: var(--texte-2); }
.avertissement { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(242, 140, 40, .16); color: var(--texte); font-weight: 600; font-size: .9rem; }
.succes { display: flex; align-items: center; gap: 6px; color: var(--vert); font-weight: 700; margin: 8px 0 0; }
.erreur { color: var(--rouge); font-weight: 700; margin: 12px 0 0; }
.aide { color: var(--texte-2); font-size: .88rem; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.aide--centre { justify-content: center; margin-top: 18px; }

/* ---------------------------------------------------------------- Paiement, suivi */
.paiement h1 { margin: 6px 0 22px; }
.paiement__grille, .suivi__grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.paiement__etapes { display: grid; gap: 16px; }
.carte-bloc { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px; }
.carte-bloc h2 { font-size: 1.15rem; margin-bottom: 12px; }
.bascule { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface-2); gap: 4px; flex-wrap: wrap; }
.bascule button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 0; background: none; font-weight: 700; cursor: pointer; }
.bascule button.actif { background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ligne-champ { display: flex; gap: 10px; }
.ligne-champ input { flex: 1; text-transform: uppercase; }
.recap { position: sticky; top: 92px; display: grid; gap: 12px; }
.recap__lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recap__lignes li { display: flex; justify-content: space-between; gap: 12px; }
.recap__lignes small { display: block; color: var(--texte-2); }
.recap__totaux { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--filet); }
.recap__totaux div { display: flex; justify-content: space-between; color: var(--texte-2); }
.recap__totaux .succes { margin: 0; justify-content: space-between; }
.recap__total { color: var(--texte) !important; font-weight: 800; font-size: 1.15rem; padding-top: 6px; }
.surtitre { margin: 0 0 8px; color: var(--orange); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.suivi h1 { margin-bottom: 8px; }
.suivi__heure { font-size: 1.05rem; color: var(--texte-2); margin: 4px 0 0; }
.frise { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 0; }
.frise li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--texte-2); font-weight: 600; }
.frise li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 38px; bottom: -10px; width: 2px; background: var(--filet); }
.frise li.fait::after { background: var(--orange); }
.frise__point { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--filet); background: var(--surface); flex: none; z-index: 1; }
.frise__point .icone { width: 14px; height: 14px; stroke-width: 3; }
.frise li.fait { color: var(--texte); }
.frise li.fait .frise__point { background: var(--orange); border-color: var(--orange); color: var(--charbon); }
.frise li.en-cours { color: var(--texte); font-weight: 800; }
.frise li.en-cours .frise__point { border-color: var(--orange); box-shadow: 0 0 0 5px rgba(242, 140, 40, .25); animation: pouls 1.4s infinite; }
@keyframes pouls { 50% { box-shadow: 0 0 0 9px rgba(242, 140, 40, .08); } }
.livreur { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--fond); margin-bottom: 16px; }
.livreur img, .livreur__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); }
.livreur div { flex: 1; }
.livreur small { display: block; color: var(--texte-2); }
.commandes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.commande-ligne { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--filet); text-decoration: none; }
.commande-ligne img, .commande-ligne__vide { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.commande-ligne__texte { flex: 1; min-width: 0; }
.commande-ligne__texte small { display: block; color: var(--texte-2); }

/* Connexion */
.connexion { display: grid; place-items: center; }
.connexion__carte { width: min(460px, 100%); text-align: center; padding: 32px; }
.connexion__logo { height: 76px; width: auto; margin: 0 auto 14px; }
.connexion form { text-align: left; margin: 10px 0 14px; }
.connexion .bouton--large { margin-top: 20px; }

/* ---------------------------------------------------------------- Accueil : app, partenaires, pied */
.bandeau-app { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 36px 40px; border-radius: 26px; background: var(--charbon); color: var(--ivoire); border: 1px solid var(--gris-moyen); }
.bandeau-app h2 { color: var(--ivoire); }
.bandeau-app p { margin: 8px 0 0; color: var(--gris-clair); max-width: 34em; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 12px; background: var(--ivoire); color: var(--charbon); font-weight: 700; line-height: 1.15; text-decoration: none; }
a.store:hover { filter: brightness(.95); }
.badge-store { display: inline-block; line-height: 0; }
.badge-store img { height: 48px; width: auto; }
a.badge-store:hover { filter: brightness(1.1); }
.store small { display: block; font-size: .7rem; font-weight: 600; opacity: .75; }
.store svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.partenaires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.partenaire { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.partenaire__photo { height: 160px; background-size: cover; background-position: center; }
.partenaire__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; flex: 1; }
.partenaire__corps p { margin: 0 0 8px; color: var(--texte-2); flex: 1; }
#accueil-marketing { padding-bottom: 56px; }
/* Tant que la page n'est pas dessinée, la vue garde un écran de hauteur : le bloc marketing et le pied de page
   ne remontent plus puis redescendent au chargement (décalage Lighthouse de 1,7, audit du 25/10) */
#vue:empty { min-height: 100vh; }
.pied { background: var(--charbon); color: var(--ivoire); padding: 52px 0 26px; }
:root[data-theme="sombre"] .pied { background: #0F0F0E; }
.pied__colonnes { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
.pied__marque img { height: 44px; width: auto; margin-bottom: 14px; }
.pied__marque p { margin: 0; color: var(--gris-clair); max-width: 22em; }
.pied h4, .pied .pied__titre { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); margin-bottom: 14px; }
.pied__colonnes a, .pied__colonnes > div > span { display: block; margin-bottom: 9px; color: var(--gris-clair); text-decoration: none; }
.pied__colonnes a:hover { color: var(--ivoire); }
.pied__copyright { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--gris-moyen); color: var(--gris-clair); font-size: .88rem; }


/* ---------------------------------------------------------------- Menu burger et menu latéral */
.burger { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.burger:hover { background: var(--surface); }
.burger .icone { width: 24px; height: 24px; }
.menu-lateral { position: fixed; top: 0; left: 0; bottom: 0; z-index: 95; width: min(340px, 88vw); display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); box-shadow: 10px 0 40px rgba(0, 0, 0, .2); transform: translateX(-105%); transition: transform .25s ease; }
.menu-lateral--ouvert { transform: none; }
.menu-lateral-fond { position: fixed; inset: 0; z-index: 85; background: rgba(23, 23, 21, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.menu-lateral-fond--visible { opacity: 1; pointer-events: auto; }
.menu-lateral__entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--filet); }
.menu-lateral__entete img { height: 36px; width: auto; }
.menu-lateral__compte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.menu-lateral__compte .bouton { min-height: 44px; padding: 0 12px; }
.menu-lateral__bonjour { grid-column: 1 / -1; margin: 0; font-size: 1.15rem; font-weight: 800; }
.menu-lateral__promo { display: flex; align-items: center; gap: 12px; margin: 0 18px 8px; padding: 14px 16px; border-radius: 14px; background: rgba(242, 140, 40, .18); color: var(--texte); font-weight: 800; text-decoration: none; }
.menu-lateral__promo-icone { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--orange); color: var(--charbon); font-size: 1.2rem; font-weight: 800; }
.menu-lateral__groupe { padding: 10px 0; border-top: 1px solid var(--filet); }
.menu-lateral__titre { margin: 10px 20px 4px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.menu-lateral__groupe ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral__groupe a, .menu-lateral__groupe button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 20px; border: 0; background: none; text-align: left; text-decoration: none; font-weight: 700; font-size: 1.02rem; cursor: pointer; }
.menu-lateral__groupe a:hover, .menu-lateral__groupe button:hover { background: var(--fond); }
.menu-lateral__groupe span { flex: 1; }
.menu-lateral__secondaire a, .menu-lateral__secondaire button { font-weight: 500; font-size: .95rem; }
.icone--droite { color: var(--texte-2); }
.pastille--petite { flex: none !important; padding: 3px 9px; font-size: .72rem; }
.menu-lateral__pays { margin-top: auto; border-top: 1px solid var(--filet); }
.menu-lateral__pays-bouton { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; border: 0; background: none; cursor: pointer; text-align: left; font-size: 1.02rem; }
.menu-lateral__pays-bouton strong { flex: 1; }
.menu-lateral__pays-bouton[aria-expanded="true"] .icone--droite { transform: rotate(180deg); }
.menu-lateral__pays-liste { padding: 0 20px 18px; }
.menu-lateral__pays-liste p { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--fond); font-weight: 700; }
.menu-lateral__pays-liste p span { flex: 1; }
.menu-lateral__pays-liste small { color: var(--texte-2); }
.menu-lateral__groupe a .icone--droite, .menu-lateral__groupe button .icone--droite { transform: rotate(-90deg); }
.menu-lateral__compte .bouton { white-space: nowrap; font-size: .95rem; }
.menu-lateral__preferences { padding: 10px 20px 16px; }
.menu-lateral__preferences .menu-lateral__titre { margin: 10px 0 10px; }
.segments { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fond); }
.segments button { flex: 1; justify-content: center; padding: 9px 0 !important; border-radius: 9px; font-size: .92rem !important; }
.segments button[aria-pressed="true"] { background: var(--orange) !important; color: var(--charbon); }
.menu-lateral__groupe .menu-lateral__theme { padding: 13px 0; margin-top: 6px; }
.menu-lateral__groupe .menu-lateral__theme:hover { background: none; color: var(--orange); }
.drapeau { width: 30px; height: 20px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }


/* Connexion Google */
.bouton--google { gap: 12px; background: var(--surface); color: var(--texte); border: 1.5px solid var(--filet); margin-top: 6px; }
.bouton--google:hover { border-color: var(--texte-2); }
.logo-google { width: 22px; height: 22px; flex: none; }
.separateur { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--texte-2); font-size: .85rem; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: var(--filet); }


/* ---------------------------------------------------------------- Suivi de commande (comme l'app) */
body.page-suivi .pied { display: none; }
.suivi-ecran { display: grid; grid-template-columns: minmax(380px, 440px) 1fr; height: calc(100dvh - var(--h-entete, 72px)); }
.suivi-volet { position: relative; z-index: 2; display: flex; flex-direction: column; overflow-y: auto; background: var(--fond); box-shadow: 8px 0 30px rgba(23, 23, 21, .12); }
.suivi-volet__photo { position: relative; height: 190px; flex: none; overflow: hidden; background: var(--surface-2); }
.suivi-volet__photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite alternate; }
.suivi-volet__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 55%); }
.suivi-volet__photo-vide { display: grid; place-items: center; height: 100%; background: linear-gradient(135deg, #FFE0B2, #FFCC80); color: var(--charbon); }
.suivi-volet__photo-vide .icone { width: 48px; height: 48px; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.suivi-volet__boutons { position: absolute; z-index: 1; inset: 14px 14px auto; display: flex; justify-content: space-between; }
.bouton-rond { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ivoire); color: var(--charbon); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; text-decoration: none; flex: none; }
.bouton-rond--doux { background: var(--surface-2); color: var(--texte); box-shadow: none; }
.bouton-pilule { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ivoire); color: var(--charbon); font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; }
.bouton-pilule .icone { width: 18px; height: 18px; }
.suivi-volet__corps { position: relative; margin-top: -22px; padding: 12px 22px 28px; border-radius: 24px 24px 0 0; background: var(--fond); display: grid; gap: 16px; align-content: start; }
.suivi-poignee { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--filet); }
.suivi-demo { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(103, 58, 183, .12); color: #673AB7; font-size: .82rem; font-weight: 700; }
.suivi-demo .icone { width: 16px; height: 16px; flex: none; }
[data-theme="sombre"] .suivi-demo { color: #B39DDB; }
.suivi-statut { display: flex; align-items: center; gap: 12px; }
.suivi-statut__texte { flex: 1; min-width: 0; }
.suivi-statut__libelle { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--texte-2); }
.suivi-statut__heure { margin: 0 0 6px; font-size: 2.7rem; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.suivi-statut__titre { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.suivi-statut__titre--grand { font-size: 1.6rem; }
.suivi-statut__sous { margin: 4px 0 0; color: var(--texte-2); font-size: .92rem; }
.suivi-statut__titres--entree { animation: entree-titre .4s ease-out; }
@keyframes entree-titre { from { opacity: 0; transform: translateY(12px); } }
.suivi-statut__animation { width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.suivi-statut__animation--entree { animation: entree-lottie .4s ease-out; }
@keyframes entree-lottie { from { opacity: 0; transform: scale(.85); } }
.texte-alerte { color: var(--rouge, #D94A45); }
.barre-suivi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.barre-suivi span { position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: var(--filet); }
.barre-suivi span i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); }
.barre-suivi span.fait i { width: 100%; }
.barre-suivi span.en-cours i { animation: remplissage 1.8s ease-in-out infinite; }
@keyframes remplissage { from { width: 0; opacity: 1; } to { width: 100%; opacity: .5; } }
.suivi-programmee { margin: 0; color: var(--orange); font-weight: 700; }
.carte-code-remise { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(242, 140, 40, .12); border: 1px solid rgba(242, 140, 40, .35); }
.carte-code-remise div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.carte-code-remise small { color: var(--texte-2); font-size: .82rem; }
.carte-code-remise__code { font-size: 1.9rem; font-weight: 800; letter-spacing: .28em; color: var(--texte); font-variant-numeric: tabular-nums; }
.carte-livreur { padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 3px 10px rgba(23, 23, 21, .08); animation: entree-livreur .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes entree-livreur { from { opacity: 0; transform: translateY(14px); } }
.carte-livreur__haut { display: flex; align-items: center; gap: 12px; }
.carte-livreur__avatar { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: rgba(103, 58, 183, .12); color: #673AB7; font-weight: 800; font-size: 1.2rem; }
.carte-livreur__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.carte-livreur__vehicule { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #673AB7; }
.carte-livreur__vehicule svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte-livreur__nom { flex: 1; min-width: 0; }
.carte-livreur__nom strong { display: block; font-size: 1.05rem; }
.carte-livreur__nom small { display: flex; align-items: center; gap: 3px; color: var(--texte-2); font-size: .8rem; }
.carte-livreur__nom .icone { width: 14px; height: 14px; color: var(--orange); }
.carte-livreur__bas { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); font-weight: 600; font-size: .92rem; }
.carte-livreur__bas > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #673AB7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte-livreur__bas span:first-of-type { flex: 1; }
.plaque { padding: 3px 10px; border: 1.5px solid var(--charbon); border-radius: 6px; background: #FFF8E1; color: var(--charbon); font-weight: 900; letter-spacing: .1em; font-size: .85rem; }
.suivi-recap { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); }
.suivi-recap__entete { display: flex; align-items: center; gap: 12px; }
.suivi-recap__entete img, .suivi-recap__vide { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; background: rgba(242, 140, 40, .15); color: var(--orange); }
.suivi-recap__entete strong { display: block; font-size: 1.05rem; }
.suivi-recap__entete small { color: var(--texte-2); }
.suivi-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.suivi-lignes li { display: flex; align-items: flex-start; gap: 12px; }
.suivi-lignes img, .suivi-lignes__vide { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: rgba(242, 140, 40, .12); color: var(--orange); }
.suivi-lignes__vide .icone { width: 20px; height: 20px; }
.suivi-lignes__texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.suivi-lignes__texte b { color: var(--texte-2); font-weight: 600; }
.suivi-lignes__texte small { color: var(--texte-2); font-size: .8rem; }
.suivi-info { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .88rem; }
.suivi-info .icone { width: 18px; height: 18px; flex: none; color: var(--orange); }
.bouton--alerte { color: var(--rouge, #D94A45); border-color: var(--rouge, #D94A45); }
.suivi-ecran { position: relative; }
.suivi-boutons-mobile { display: none; position: absolute; z-index: 5; inset: 12px 12px auto; justify-content: space-between; pointer-events: none; }
.suivi-boutons-mobile > * { pointer-events: auto; }
.suivi-carte { position: relative; min-height: 300px; background: var(--surface-2); overflow: hidden; }
.suivi-carte__secours { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(.9); opacity: .55; animation: kenburns 20s ease-in-out infinite alternate; }
/* Marqueurs de la carte */
.marqueur { position: absolute; transform: translate(-50%, -50%); }
.marqueur__rond { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 4px solid #F2EBDD; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.marqueur__rond svg { width: 22px; height: 22px; fill: none; stroke: #F2EBDD; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marqueur--resto .marqueur__rond { background: #F28C28; }
.marqueur--client .marqueur__rond { background: #2E9D63; }
.marqueur--livreur { z-index: 3; }
.marqueur--livreur .marqueur__rond { width: 50px; height: 50px; background: #673AB7; transition: transform .25s linear; }
.marqueur--livreur .marqueur__rond svg { width: 26px; height: 26px; }
.marqueur__halo { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.marqueur--resto .marqueur__halo { background: rgba(242, 140, 40, .45); }
.marqueur--client .marqueur__halo { background: rgba(46, 157, 99, .45); }
.marqueur--actif .marqueur__halo { animation: halo 1.8s ease-out infinite; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.marqueur__etiquette { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #171715; color: #F2EBDD; font-size: .72rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
@media (max-width: 900px) {
  .suivi-ecran { display: flex; flex-direction: column-reverse; height: auto; }
  .suivi-carte { height: 46vh; min-height: 280px; }
  .suivi-volet { overflow: visible; box-shadow: none; }
  .suivi-volet__photo { display: none; }
  .suivi-volet__corps { margin-top: -22px; box-shadow: 0 -4px 14px rgba(23, 23, 21, .15); }
  .suivi-boutons-mobile { display: flex; }
  body.page-suivi .pied { display: block; }
}


/* ---------------------------------------------------------------- Bon appétit, notation, aide */
.modale--note { width: min(520px, 100%); display: grid; gap: 18px; }
.bon-appetit { text-align: center; }
.bon-appetit__animation { width: 130px; height: 130px; margin: -6px auto 0; }
.bon-appetit h2 { margin: 0; font-size: 2rem; }
.bon-appetit .aide { margin: 6px 0 0; }
.note-section { display: grid; justify-items: center; gap: 10px; padding: 18px 16px; border-radius: 18px; background: var(--fond); text-align: center; }
.note-section h3 { margin: 0; font-size: 1.05rem; }
.note-section__avatar, .note-section__photo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(103, 58, 183, .12); color: #673AB7; font-weight: 800; font-size: 1.3rem; object-fit: cover; }
.note-section__photo { border-radius: 16px; background: rgba(242, 140, 40, .15); color: var(--orange); }
.note-section__avatar img { width: 100%; height: 100%; object-fit: cover; }
.etoiles { display: flex; gap: 6px; }
.etoiles button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--texte-2); transition: transform .15s; }
.etoiles button:hover { transform: scale(1.12); }
.etoiles .icone { width: 34px; height: 34px; }
.etoiles button.allumee { color: var(--orange); }
.etoiles button.allumee .icone { fill: currentColor; }
.note-section__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.note-section__tags .puce { animation: monte .25s ease-out; }
.note-section__commentaire { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--surface); color: var(--texte); font: inherit; resize: vertical; }
.bon-appetit__pied { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.carte-evaluation { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(90deg, rgba(242, 140, 40, .18), rgba(242, 140, 40, .05)); animation: entree-livreur .45s ease-out; }
.carte-evaluation div { flex: 1; }
.carte-evaluation strong { display: block; font-size: 1.05rem; }
.carte-evaluation small { color: var(--texte-2); }
.carte-evaluation .bouton { gap: 6px; }
.suivi-merci { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--vert, #2E9D63); font-weight: 700; }
.modale--aide { display: grid; gap: 14px; }
.aide-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aide-choix { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 14px; background: var(--fond); color: var(--texte); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.aide-choix:hover:not(:disabled) { border-color: var(--orange); }
.aide-choix:disabled { opacity: .55; cursor: default; }
.aide-choix > span { flex: 1; }
.aide-choix > .icone:first-child { color: var(--orange); }
.aide-choix small { color: var(--texte-2); font-weight: 600; }
.aide-demandes__titre { margin: 6px 0 0; font-size: 1rem; }
.aide-demandes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aide-demandes li { display: grid; padding: 10px 14px; border-radius: 12px; background: var(--fond); }
.aide-demandes small { color: var(--texte-2); }
.aide-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aide-articles label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--filet); cursor: pointer; }
.aide-articles label:has(input:checked) { border-color: var(--orange); background: rgba(242, 140, 40, .08); }
.aide-articles input { width: 20px; height: 20px; accent-color: #F28C28; }
.aide-articles img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.aide-articles span { flex: 1; }
.aide-reponse { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0 0; }
.aide-reponse h2 { margin: 0; }
.aide-reponse p { margin: 0 0 8px; color: var(--texte-2); }
.aide-reponse__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(242, 140, 40, .15); color: var(--orange); }
.aide-reponse--succes .aide-reponse__icone { background: rgba(46, 157, 99, .15); color: #2E9D63; }
.aide-reponse__icone .icone { width: 32px; height: 32px; }
.modale--aide .retour { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }


/* ---------------------------------------------------------------- Kveloz Partners (/partner/) */
.pt-marque { margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: var(--charbon); color: var(--ivoire); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
[data-theme="sombre"] .pt-marque { background: var(--orange); color: var(--charbon); }
.page-partenaire .entete__logo { display: flex; align-items: center; }
.page-partenaire .entete__ligne { justify-content: space-between; }
.pt-bouton-registrar { min-height: 40px; padding: 0 18px; }
.pt-hero { position: relative; padding: 56px 0 64px; background: linear-gradient(100deg, rgba(23, 23, 21, .92) 0%, rgba(23, 23, 21, .78) 45%, rgba(23, 23, 21, .35) 100%), url('https://images.unsplash.com/photo-1625166913168-9135c6ffddcb?w=1400&q=70&fm=webp&fit=crop') center / cover; color: var(--ivoire); }
@media (max-width: 700px) { .pt-hero { background-image: linear-gradient(100deg, rgba(23, 23, 21, .92) 0%, rgba(23, 23, 21, .78) 45%, rgba(23, 23, 21, .35) 100%), url('https://images.unsplash.com/photo-1625166913168-9135c6ffddcb?w=800&q=70&fm=webp&fit=crop'); } }
.pt-hero__grille { display: grid; grid-template-columns: 1.1fr minmax(340px, 460px); gap: 48px; align-items: start; }
.pt-hero__texte { padding-top: 30px; }
.pt-surtitre { margin: 0 0 10px; color: var(--orange); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.pt-hero h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.02em; }
.pt-hero__sous { max-width: 560px; margin: 18px 0 0; font-size: 1.12rem; color: rgba(242, 235, 221, .85); }
.pt-pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.pt-pastilles li { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(242, 235, 221, .12); font-weight: 700; }
.pt-pastilles li span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: var(--charbon); font-size: .8rem; }
.pt-formulaire { color: var(--texte); scroll-margin-top: 90px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.pt-formulaire h2 { margin: 6px 0 4px; font-size: 1.6rem; }
.pt-formulaire form { margin-top: 4px; }
.pt-formulaire .champ { margin-top: 12px; }
.pt-formulaire select { padding: 13px 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond); color: var(--texte); font: inherit; font-weight: 500; }
.pt-badge { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(242, 140, 40, .18); color: var(--orange); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pt-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-cgu { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 12px; font-size: .88rem; cursor: pointer; }
.pt-cgu input { width: 18px; height: 18px; margin-top: 2px; accent-color: #F28C28; flex: none; }
.pt-formulaire .erreur { margin: 0 0 12px; }
.pt-centre { text-align: center; }
.pt-benefices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pt-benefice { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--filet); }
.pt-benefice h3 { margin: 16px 0 8px; font-size: 1.12rem; }
.pt-benefice p { margin: 0; color: var(--texte-2); }
.pt-benefice__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--orange); color: var(--charbon); }
.pt-benefice__icone .icone { width: 26px; height: 26px; }
.pt-etapes-bloc { background: var(--surface); border-block: 1px solid var(--filet); }
.pt-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 28px; padding: 0; counter-reset: etape; }
.pt-etapes li { position: relative; padding: 26px; border-radius: 20px; background: var(--fond); }
.pt-etapes h3 { margin: 16px 0 8px; font-size: 1.12rem; }
.pt-etapes p { margin: 0; color: var(--texte-2); }
.pt-etape__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--charbon); color: var(--ivoire); font-weight: 800; font-size: 1.2rem; }
[data-theme="sombre"] .pt-etape__num { background: var(--orange); color: var(--charbon); }
.pt-requis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pt-requis h3 { margin: 0 0 12px; }
.pt-requis ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--texte-2); }
.pt-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.pt-question { border-radius: 16px; background: var(--surface); border: 1px solid var(--filet); }
.pt-question summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-weight: 800; cursor: pointer; list-style: none; }
.pt-question summary::-webkit-details-marker { display: none; }
.pt-question summary .icone { flex: none; transition: transform .2s; }
.pt-question[open] summary .icone { transform: rotate(180deg); }
.pt-question p { margin: 0; padding: 0 20px 18px; color: var(--texte-2); }
.pt-succes { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pt-succes h2 { margin: 0; }
.pt-succes__icone { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: rgba(46, 157, 99, .15); color: #2E9D63; animation: entree-lottie .4s ease-out; }
.pt-succes__icone .icone { width: 36px; height: 36px; }
.pt-suite { list-style: none; width: 100%; margin: 6px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.pt-suite li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fond); font-weight: 700; color: var(--texte-2); }
.pt-suite li span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--filet); font-size: .85rem; }
.pt-suite li.fait { color: var(--texte); }
.pt-suite li.fait span { background: #2E9D63; border-color: #2E9D63; color: #fff; }
.pt-suite li.fait span .icone { width: 14px; height: 14px; stroke-width: 3; }
.pt-suite li.en-cours { color: var(--texte); border: 1.5px solid var(--orange); }
.pt-suite li.en-cours span { border-color: var(--orange); color: var(--orange); }
@media (max-width: 1000px) {
  .pt-hero__grille { grid-template-columns: 1fr; gap: 28px; }
  .pt-hero__texte { padding-top: 0; }
  .pt-benefices { grid-template-columns: 1fr 1fr; }
  .pt-etapes, .pt-requis { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pt-hero { padding: 32px 0 40px; }
  .pt-benefices, .pt-deux { grid-template-columns: 1fr; }
  .pt-masquer-mobile { display: none !important; }
  .page-partenaire .entete__actions { gap: 6px; }
  .page-partenaire .entete__actions > .bouton-entete:not(.bouton-entete--carre) { width: auto; padding: 0 10px; }
  .pt-bouton-registrar { min-height: 36px; padding: 0 12px; font-size: .9rem; }
  .pt-marque { display: none; }
  .page-partenaire [data-menu-langue] { display: block !important; }
  .page-partenaire [data-menu-langue] .bouton-entete span { display: none; }
}


/* ---------------------------------------------------------------- Administration (/admin/) */
.page-admin { background: var(--fond); }
.adm-chargement { display: grid; place-items: center; min-height: 40vh; }
#admin.adm-chargement { min-height: 100vh; }
.adm-roue { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--filet); border-top-color: var(--orange); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.adm-connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.adm-connexion__carte { width: min(420px, 100%); display: grid; gap: 10px; text-align: center; }
.adm-connexion__carte img { justify-self: center; }
.adm-connexion__carte h1 { margin: 6px 0 0; }
.adm-connexion__carte form { text-align: left; }
.adm-connexion__carte form .bouton { margin-top: 16px; }
.adm { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.adm-menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px; background: var(--charbon); color: var(--ivoire); }
.adm-menu__logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--ivoire); text-decoration: none; }
.adm-menu__logo span { padding: 3px 9px; border-radius: 999px; background: var(--orange); color: var(--charbon); font-size: .75rem; font-weight: 800; }
.adm-menu nav, .adm-menu__bas { display: grid; gap: 4px; }
.adm-menu__bas { margin-top: auto; }
.adm-menu nav button, .adm-menu__bas a, .adm-menu__bas button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: rgba(242, 235, 221, .8); font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.adm-menu nav button:hover, .adm-menu__bas a:hover, .adm-menu__bas button:hover { background: rgba(242, 235, 221, .08); color: var(--ivoire); }
.adm-menu nav button.actif { background: var(--orange); color: var(--charbon); }
.adm-menu nav button span { flex: 1; }
.adm-menu .icone { width: 20px; height: 20px; flex: none; }
.adm-badge { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #D94A45; color: #fff; font-size: .75rem; text-align: center; }
.adm-menu__qui { margin: 8px 0 0; padding: 12px; border-top: 1px solid rgba(242, 235, 221, .12); font-weight: 700; font-size: .9rem; }
.adm-menu__qui small { display: block; color: rgba(242, 235, 221, .55); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.adm-contenu { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 48px; }
.adm-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.adm-entete h1 { margin: 0; font-size: 1.9rem; }
.adm-entete .aide { margin: 4px 0 0; }
.adm-filtres { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.adm-segments { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); }
.adm-segments button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--texte); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.adm-segments button.actif { background: var(--charbon); color: var(--ivoire); }
[data-theme="sombre"] .adm-segments button.actif { background: var(--orange); color: var(--charbon); }
.adm-interrupteur { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.adm-interrupteur input { width: 18px; height: 18px; accent-color: #F28C28; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.adm-kpi { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--filet); }
.adm-kpi p { margin: 0; color: var(--texte-2); font-weight: 700; font-size: .88rem; }
.adm-kpi strong { display: block; margin: 6px 0 4px; font-size: 1.9rem; letter-spacing: -.02em; }
.adm-kpi small { color: var(--texte-2); font-size: .82rem; }
.adm-kpi a { color: var(--orange); font-weight: 700; }
.adm-kpi--orange { background: var(--orange); border-color: var(--orange); color: var(--charbon); }
.adm-kpi--orange p, .adm-kpi--orange small { color: rgba(23, 23, 21, .75); }
.adm-kpi--alerte { border-color: #D94A45; box-shadow: inset 0 0 0 1px #D94A45; }
.adm-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.adm-grille h2 { margin: 0 0 14px; font-size: 1.05rem; }
.adm-large { grid-column: span 2; }
.adm-pleine { grid-column: 1 / -1; }
.adm-graphique { position: relative; height: 280px; }
.adm-graphique--rond { height: 260px; }
.adm-defile { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-table th { padding: 8px 10px; border-bottom: 1px solid var(--filet); color: var(--texte-2); font-size: .78rem; text-align: left; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.adm-table td { padding: 10px; border-bottom: 1px solid var(--filet); white-space: nowrap; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-resto { display: flex; align-items: center; gap: 10px; }
.adm-resto img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.adm-etiquette { padding: 2px 8px; border-radius: 999px; background: rgba(103, 58, 183, .14); color: #673AB7; font-size: .72rem; font-weight: 800; }
.adm-statut { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: .78rem; font-weight: 800; }
.adm-statut--livree { background: rgba(46, 157, 99, .15); color: #2E9D63; }
.adm-statut--annulee_client, .adm-statut--refusee_restaurant { background: rgba(217, 74, 69, .14); color: #D94A45; }
.adm-statut--en_livraison { background: rgba(103, 58, 183, .14); color: #673AB7; }
.adm-statut--en_attente, .adm-statut--acceptee, .adm-statut--en_preparation, .adm-statut--prete { background: rgba(242, 140, 40, .16); color: #B8651A; }
.adm-demandes { display: grid; gap: 14px; }
.adm-demande { display: grid; grid-template-columns: 150px 1fr; gap: 20px; }
.adm-demande__visuel { display: grid; place-items: center; height: 130px; border-radius: 16px; overflow: hidden; background: rgba(242, 140, 40, .14); color: var(--orange); }
.adm-demande__visuel img { width: 100%; height: 100%; object-fit: cover; }
.adm-demande__visuel .icone { width: 40px; height: 40px; }
.adm-demande__titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-demande__titre h2 { margin: 0; font-size: 1.25rem; }
.adm-demande .aide { margin: 4px 0 12px; }
.adm-validation { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--surface-2); }
.adm-validation--en_attente { background: rgba(242, 140, 40, .18); color: #B8651A; }
.adm-validation--valide { background: rgba(46, 157, 99, .15); color: #2E9D63; }
.adm-validation--refuse, .adm-validation--suspendu { background: rgba(217, 74, 69, .14); color: #D94A45; }
.adm-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0 0 12px; }
.adm-infos div { min-width: 0; }
.adm-infos dt { color: var(--texte-2); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.adm-infos dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.adm-infos a { color: var(--orange); font-weight: 700; }
.adm-controles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.adm-controles li { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(217, 74, 69, .1); color: #D94A45; font-size: .82rem; font-weight: 700; }
.adm-controles li.ok { background: rgba(46, 157, 99, .12); color: #2E9D63; }
.adm-controles .icone { width: 14px; height: 14px; stroke-width: 3; }
.adm-demande__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-modale-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.adm-barre-mobile, .adm-voile { display: none; }
/* Logo de l'entreprise dans les informations de facturation */
.adm-logo { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.adm-logo__apercu { display: grid; place-items: center; width: 140px; height: 64px; padding: 6px; border: 1px dashed var(--filet); border-radius: 12px; background: #fff; }
.adm-logo__apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-logo__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.adm-logo__actions .bouton { cursor: pointer; }
.adm-burger { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(242, 235, 221, .1); cursor: pointer; }
.adm-burger i { width: 18px; height: 2px; border-radius: 2px; background: var(--ivoire); }
.adm-burger .adm-badge { position: absolute; top: -4px; right: -4px; }
/* Demandes : onglets Restaurants / Chauffeurs et livreurs */
.adm-types { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.adm-types button { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--filet); border-radius: 14px; background: var(--surface); color: var(--texte); font: inherit; font-weight: 800; cursor: pointer; }
.adm-types button.actif { background: var(--charbon); color: var(--ivoire); border-color: var(--charbon); }
.adm-types button .icone { width: 20px; height: 20px; }
.adm-types b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #D94A45; color: #fff; font-size: .75rem; text-align: center; }
.adm-segments--bloc { display: inline-flex; margin-bottom: 18px; }
@media (max-width: 1100px) {
  .adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-grille { grid-template-columns: 1fr; }
  .adm-large { grid-column: auto; }
}
@media (max-width: 760px) {
  .adm { grid-template-columns: 1fr; align-content: start; }
  /* Barre du haut + menu latéral qui s'ouvre au doigt */
  .adm-barre-mobile, .adm-voile { display: flex; }
  .adm-voile { display: block; }
  .adm-barre-mobile { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--charbon); color: var(--ivoire); }
  .adm-barre-mobile strong { flex: 1; text-align: right; font-size: .95rem; }
  .adm-barre-mobile .adm-menu__logo { padding: 0; }
  .adm-menu { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(290px, 84vw); height: 100%; overflow-y: auto; transform: translateX(-102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); box-shadow: 10px 0 40px rgba(0, 0, 0, .3); }
  .adm--menu-ouvert .adm-menu { transform: none; }
  .adm-voile { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .adm--menu-ouvert .adm-voile { opacity: 1; pointer-events: auto; }
  .adm-kpi, .adm-grille > * { min-width: 0; }
  .adm-entete, .adm-filtres { min-width: 0; }
  .adm-contenu { padding-top: 18px; }
  .adm-entete h1 { font-size: 1.5rem; }
  /* Listes : une fiche par ligne, chaque valeur précédée du nom de sa colonne */
  .adm-defile { overflow: visible; }
  .adm-table--liste thead { display: none; }
  .adm-table--liste, .adm-table--liste tbody, .adm-table--liste tr, .adm-table--liste td { display: block; width: 100%; }
  .adm-table--liste tr { padding: 10px 2px; border-bottom: 1px solid var(--filet); }
  .adm-table--liste tr:last-child { border-bottom: 0; }
  .adm-table--liste td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 8px; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .adm-table--liste td::before { content: attr(data-label); flex: none; color: var(--texte-2); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .adm-table--liste td:first-child { display: block; padding-bottom: 6px; text-align: left; }
  .adm-table--liste td:first-child::before { content: none; }
  .adm-table--liste td:empty, .adm-table--liste td[data-label=""]::before { display: none; }
  .adm-demande__visuel { height: 64px; width: 64px; border-radius: 14px; }
  .adm-demande__visuel .icone { width: 28px; height: 28px; }
  .adm-types button { flex: 1; justify-content: center; padding: 10px 12px; font-size: .9rem; }
  .adm-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adm-kpi strong { font-size: 1.5rem; }
  .adm-demande { grid-template-columns: 1fr; }
  .adm-infos { grid-template-columns: 1fr; }
}


/* Listes du panel */
.adm-barre-liste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-recherche { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; max-width: 460px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--surface); }
.adm-recherche input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--texte); font: inherit; }
.adm-recherche .icone { color: var(--texte-2); }
.adm-liste { padding: 6px 4px; }
.adm-vide { padding: 24px; text-align: center; }
.adm-table--liste td { vertical-align: middle; }
.adm-table--liste tbody tr { cursor: default; }
.adm-table--liste tbody tr:hover { background: var(--fond); }
.adm-cellule-titre { display: flex; align-items: center; gap: 12px; }
.adm-cellule-titre img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.adm-cellule-titre img.adm-rond { border-radius: 50%; }
.adm-cellule-titre strong { font-weight: 800; }
.adm-cellule-titre small, .adm-pile small, .adm-bloc { display: block; color: var(--texte-2); font-size: .8rem; }
.adm-pile a, .adm-table--liste td > a { color: var(--orange); font-weight: 700; }
.adm-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(242, 140, 40, .16); color: #B8651A; font-weight: 800; font-size: .85rem; }
.adm-avatar .icone { width: 18px; height: 18px; }
.adm-avatar--violet { background: rgba(103, 58, 183, .14); color: #673AB7; }
.adm-etiquette--neutre { background: var(--surface-2); color: var(--texte); }
.adm-point { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--texte-2); }
.adm-point::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.adm-point--vert { color: #2E9D63; }
.adm-lien-action { padding: 6px 10px; border: 1px solid var(--filet); border-radius: 9px; background: var(--surface); color: var(--texte); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.adm-lien-action:hover { border-color: var(--orange); color: var(--orange); }
.adm-table--liste tbody tr:has(.adm-cellule-titre) { cursor: pointer; }
.adm-modale-large { width: min(860px, 100%); }
.adm-modale-resto .adm-demande { box-shadow: none; border: 0; padding: 0; }


/* Comptabilité */
.adm-mois { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--filet); background: var(--surface); color: var(--texte); font: inherit; font-weight: 700; }
.adm-alerte { margin: 0 0 14px; }
.adm-calcul { display: grid; gap: 2px; }
.adm-calcul__ligne { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--filet); color: var(--texte-2); }
.adm-calcul__ligne strong { color: var(--texte); white-space: nowrap; }
.adm-calcul__ligne--total { border-bottom: 0; border-top: 2px solid var(--texte); margin-top: 4px; color: var(--texte); font-weight: 800; }
.adm-calcul__ligne--vous { padding: 10px 12px; margin: 6px 0 2px; border: 0; border-radius: 12px; background: rgba(242, 140, 40, .16); color: var(--texte); font-weight: 800; }
.adm-calcul__ligne--vous strong { color: #B8651A; font-size: 1.1rem; }
.adm-echeances { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.adm-echeances li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--orange); }
.adm-echeances span { color: var(--texte-2); font-size: .9rem; }
.adm-titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.adm-titre-ligne h2 { margin: 0 !important; }
.adm-ligne-active td { background: rgba(242, 140, 40, .1); font-weight: 700; }
[data-mois-ligne] { cursor: pointer; }


/* Suppression */
.adm-danger { color: #D94A45 !important; border-color: rgba(217, 74, 69, .45) !important; gap: 6px; }
.adm-danger:hover { background: rgba(217, 74, 69, .08) !important; }
.adm-danger .icone { width: 16px; height: 16px; }
.adm-bouton-rouge { gap: 8px; background: #D94A45; color: #fff; border: 0; }
.adm-bouton-rouge:hover { background: #C23F3A; }
.adm-actions-ligne { display: flex; gap: 6px; align-items: center; }


/* Factures */
.adm-facture { border: 2px solid var(--orange); }
.adm-facture__numero { margin: 0; color: var(--orange); font-weight: 800; letter-spacing: .05em; }
.adm-facture__montant { margin: 4px 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.adm-facture .adm-demande__actions { margin-top: 12px; }
.adm-facture .bouton { gap: 8px; }
.adm-point--rouge { color: #D94A45; }
.adm-sous-titre { margin: 18px 0 0; font-size: 1rem; }

/* Messages */
#toasts { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { padding: 14px 18px; border-radius: 14px; background: var(--charbon); color: var(--ivoire); font-weight: 700; box-shadow: var(--ombre); animation: monte .2s ease; transition: opacity .4s, transform .4s; }
:root[data-theme="sombre"] .toast { background: var(--ivoire); color: var(--charbon); }
.toast--erreur { background: var(--rouge) !important; color: var(--ivoire) !important; }
.toast--sortie { opacity: 0; transform: translateY(8px); }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------- Adaptation aux écrans */
@media (max-width: 1100px) {
  .grille-restos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .categories { grid-template-columns: repeat(7, 104px); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 900px) {
  .entete__ligne { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .entete__actions { margin-left: auto; }
  .onglets-menu { top: 120px; }
  .menu__section { scroll-margin-top: 180px; }
  .grille-restos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-plats, .plats-trouves { grid-template-columns: 1fr; }
  .paiement__grille, .suivi__grille { grid-template-columns: 1fr; }
  .recap { position: static; }
  .partenaires { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .masquer-mobile { display: none; }
  .entete__ligne { gap: 8px; padding: 8px 12px; }
  .entete__logo img { height: 36px; }
  .burger { width: 34px; height: 36px; }
  .pays span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pays { padding: 0 6px; gap: 4px; }
  [data-menu-langue], [data-bouton-theme] { display: none !important; }
  .entete__actions { gap: 6px; }
  .bouton-entete { height: 36px; padding: 0; width: 36px; justify-content: center; }
  [data-langue-courante] { display: none; }
  .pastille-compteur { top: -5px; right: -5px; }
  .banniere { padding: 44px 0 40px; }
  .champ-adresse { height: 60px; margin-top: 26px; }
  .banniere__actions { gap: 10px 24px; }
  .services-cartes { grid-template-columns: 1fr; }
  .service-carte { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; padding: 14px; text-align: left; align-items: center; }
  .service-carte__icone { grid-row: 1 / span 2; width: 60px; height: 60px; margin: 0; }
  .service-carte__nom { align-self: end; }
  .service-carte small { align-self: start; }
  .service-carte__icone .icone { width: 30px; height: 30px; }
  .grille-restos { grid-template-columns: 1fr; }
  .plat img { width: 88px; height: 88px; }
  .bandeau-app { padding: 26px 22px; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .modale-fond { place-items: end center; padding: 0; }
  .modale { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
}

/* ---------------------------------------------------------------- Chat d'assistance (site client) */
.modale--chat { width: min(460px, 100%); padding: 0; overflow: hidden; }
.chat-support { display: flex; flex-direction: column; height: min(640px, 82vh); }
.chat-support__entete { display: flex; align-items: center; gap: 12px; padding: 16px 52px 14px 18px; border-bottom: 1px solid var(--filet); }
.chat-support__entete div { display: flex; flex-direction: column; }
.chat-support__entete small { color: var(--texte-2); font-size: .8rem; }
.chat-support__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(242, 140, 40, .16); color: var(--orange); }
.chat-support__fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--fond); }
.chat-bulle { max-width: 80%; padding: 9px 13px; border-radius: 16px; background: var(--surface); align-self: flex-start; }
.chat-bulle p { margin: 2px 0; white-space: pre-wrap; }
.chat-bulle small { display: block; color: var(--texte-2); font-size: .72rem; }
.chat-bulle--support small:first-child { color: var(--orange); font-weight: 700; }
.chat-bulle--moi { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 4px; }
.chat-bulle--moi small { color: rgba(255, 255, 255, .85); text-align: right; }
.chat-bulle--systeme { align-self: center; max-width: 92%; background: transparent; border: 1px dashed var(--filet); font-size: .9rem; }
.chat-support__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; background: var(--fond); }
.chat-support__suggestions .pastille { cursor: pointer; border: 1px solid var(--filet); background: var(--surface); color: var(--texte); padding: 7px 12px; border-radius: 999px; font: inherit; font-size: .85rem; }
.chat-support__saisie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--filet); background: var(--surface); }
.chat-support__saisie textarea { flex: 1; max-height: 120px; padding: 11px 14px; border-radius: 20px; border: 1px solid var(--filet); background: var(--fond); color: var(--texte); font: inherit; resize: none; }
.chat-support__saisie .bouton { min-width: 46px; padding: 0 14px; height: 44px; border-radius: 50%; }

/* ---------------------------------------------------------------- Admin : assistance */
.sup-cadre { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 14px; align-items: start; }
.sup-liste { padding: 8px; max-height: calc(100vh - 190px); overflow-y: auto; }
.sup-conv { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: var(--texte); text-align: left; cursor: pointer; font: inherit; }
.sup-conv:hover, .sup-conv.actif { background: var(--surface-2); }
.sup-conv__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-conv__texte small { color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-conv__apercu { font-style: italic; }
.sup-conv__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sup-conv__meta small { color: var(--texte-2); font-size: .75rem; }
.sup-fil { display: flex; flex-direction: column; min-height: 420px; max-height: calc(100vh - 190px); }
.sup-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--filet); }
.sup-entete h2 { margin: 0; }
.sup-entete .aide { margin: 4px 0 0; }
.sup-demande { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 140, 40, .12); }
.sup-demande p { margin: 4px 0 0; }
.sup-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 2px; }
.sup-msg { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); align-self: flex-start; }
.sup-msg p { margin: 2px 0; white-space: pre-wrap; }
.sup-msg small { color: var(--texte-2); font-size: .72rem; }
.sup-msg--support { align-self: flex-end; background: var(--orange); color: #fff; }
.sup-msg--support small { color: rgba(255, 255, 255, .85); }
.sup-msg--systeme { align-self: center; max-width: 92%; background: transparent; border: 1px dashed var(--filet); font-size: .9rem; }
.sup-saisie { display: flex; gap: 10px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--filet); }
.sup-saisie textarea { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond); color: var(--texte); font: inherit; resize: vertical; }
.sup-etapes { padding-left: 18px; line-height: 1.5; }
.sup-etapes code { font-size: .8rem; word-break: break-all; }
@media (max-width: 900px) { .sup-cadre { grid-template-columns: 1fr; } .sup-liste, .sup-fil { max-height: none; } }

/* ---------------------------------------------------------------- Admin : espèces des livreurs */
.esp-rouge { color: var(--rouge) !important; }
.esp-vert { color: var(--vert) !important; }
.esp-jauge { display: block; width: 100%; max-width: 160px; height: 6px; margin-top: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.esp-jauge i { display: block; height: 100%; border-radius: 4px; background: var(--vert); }
.esp-jauge--orange i { background: var(--orange); }
.esp-jauge--rouge i { background: var(--rouge); }
.esp-mini { min-width: 120px; }
.esp-mini__montant { font-weight: 800; }
tr[data-livreur-especes] { cursor: pointer; }
tr[data-livreur-especes]:hover td { background: var(--surface-2); }
.esp-retour { margin-bottom: 14px; font-size: .95rem; }
.esp-entete { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.esp-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; font-size: 1.4rem; }
.esp-entete__qui { flex: 1; min-width: 0; }
.esp-entete__qui h1 { margin: 0 0 4px; font-size: 1.6rem; }
.esp-entete__qui .aide { margin: 2px 0; }
.esp-entete__solde { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.esp-entete__solde .aide { margin: 0; font-weight: 600; }
.esp-entete__solde strong { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.esp-entete__solde .esp-jauge { width: 180px; max-width: 180px; }
.esp-entete__solde .bouton { margin-top: 8px; }
.esp-flux { display: flex; height: 22px; margin: 16px 0 12px; border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.esp-flux i { display: block; height: 100%; }
.esp-flux--gains { background: var(--vert); }
.esp-flux--rendu { background: #4A7FD1; }
.esp-flux--reste { background: var(--orange); }
.esp-flux--verse { background: var(--gris-clair); }
.esp-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .9rem; color: var(--texte-2); }
.esp-legende li { display: flex; align-items: center; gap: 8px; }
.esp-legende i { width: 12px; height: 12px; border-radius: 3px; }
.esp-legende strong { color: var(--texte); }
.esp-graphique { position: relative; height: 240px; }
@media (max-width: 760px) {
  .esp-entete { flex-wrap: wrap; }
  .esp-entete__solde { align-items: flex-start; text-align: left; width: 100%; }
}

.adm-chez-client { margin-bottom: 14px; border: 1.5px solid var(--orange); }

/* Admin sur téléphone : filtres qui défilent sur une ligne, boutons sur une ligne, assistance en deux écrans */
.sup-retour { display: none; }
@media (max-width: 900px) {
  .sup-cadre:not(.sup-cadre--fil) .sup-fil { display: none; }
  .sup-cadre--fil .sup-liste { display: none; }
  .sup-retour { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 10px; padding: 6px 2px; border: 0; background: none; color: var(--texte); font: inherit; font-weight: 800; cursor: pointer; }
  .sup-fil { min-height: 0; height: calc(100dvh - 150px); max-height: none; }
  .sup-entete { flex-wrap: wrap; }
  .sup-msg { max-width: 88%; }
}
@media (max-width: 760px) {
  .adm-segments { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .adm-segments::-webkit-scrollbar { display: none; }
  .adm-segments button { flex: none; white-space: nowrap; }
  .adm-entete .bouton, .adm-barre-liste .bouton, .adm-filtres .bouton { white-space: nowrap; }
  .adm-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
  .adm-table--liste td > * { min-width: 0; }
  .adm-table--liste tr:has(td[colspan]) td { justify-content: flex-start; }
  .carte-bloc .bouton { white-space: nowrap; }
  /* Fiches : une carte par ligne, espacées, valeurs empilées à droite */
  .adm-liste { padding: 0; background: none; border: 0; box-shadow: none; }
  .adm-liste .adm-table--liste tbody { display: grid; gap: 10px; }
  .adm-liste .adm-table--liste tr { padding: 14px 12px; border: 1px solid var(--filet); border-radius: 16px; background: var(--surface); }
  .adm-liste .adm-table--liste tr:last-child { border-bottom: 1px solid var(--filet); }
  .adm-table--liste td { padding: 6px 4px; align-items: flex-start; }
  .adm-table--liste td + td { border-top: 1px dashed var(--filet); }
  .adm-table--liste td:first-child + td { border-top: 0; }
  .adm-table--liste td::before { padding-top: 2px; }
  .adm-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
  .adm-val small, .adm-val .aide { font-size: .78rem; color: var(--texte-2); }
  .adm-defile:has(> table[data-garder-tableau]) { overflow-x: auto; margin-inline: -4px; }
  table[data-garder-tableau] th:first-child, table[data-garder-tableau] td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
}

/* Assistance : client (ou livreur) de la commande, joignable par l'équipe seulement */
.sup-client { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sup-client strong { width: 100%; font-size: .85rem; color: var(--texte-2); }
.sup-client small { width: 100%; }

.sup-client { margin-bottom: 4px; }
.sup-entete [data-activer-absence] { margin-top: 12px; }

/* Admin : fenêtres de confirmation (remplacent confirm() / prompt() du navigateur) */
.bouton--danger { background: var(--rouge); color: #fff; }
.bouton--danger:hover { filter: brightness(1.08); }
.adm-confirmation { text-align: center; }
.adm-confirmation .aide { line-height: 1.55; }
.adm-confirmation .adm-modale-actions { justify-content: center; }
.adm-confirmation__icone { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: rgba(242, 140, 40, .16); color: var(--orange); }
.adm-confirmation__icone--danger { background: rgba(217, 74, 69, .14); color: var(--rouge); }
.adm-confirmation__icone .icone { width: 26px; height: 26px; }
/* Notification : nouvelle réponse de l'assistance (site ouvert) */
.notif-support { position: fixed; z-index: 9000; top: 76px; right: 16px; left: auto; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--surface); color: var(--texte); box-shadow: var(--ombre); border: 1px solid var(--filet); animation: notif-entree .35s cubic-bezier(.2, .8, .3, 1); }
.notif-support__icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(242, 140, 40, .16); color: var(--orange); }
.notif-support__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notif-support__texte small { color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-support .bouton { padding: 8px 14px; }
.notif-support__fermer { border: 0; background: none; color: var(--texte-2); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
@keyframes notif-entree { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .notif-support { top: 12px; right: 16px; } }.lien-secondaire { font-weight: 700; font-size: .9rem; color: var(--texte-2); text-decoration: underline; text-underline-offset: 3px; }
.lien-secondaire:hover { color: var(--texte); }

/* Admin : pièces justificatives d'une candidature */
.adm-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.adm-piece { display: grid; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--texte); text-decoration: none; }
.adm-piece__image { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--filet); color: var(--texte-2); font-weight: 800; }
.adm-piece__image img { width: 100%; height: 100%; object-fit: cover; }
a.adm-piece:hover .adm-piece__image { outline: 2px solid var(--orange); }
.adm-piece--manquante { color: var(--texte-2); }
.adm-alerte-texte { color: #D94A45; }

/* Panel admin : sélecteur de langue ES / FR / EN (écran de connexion et menu latéral) */
.adm-langues { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); }
.adm-langues button { min-width: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; color: var(--texte); font: inherit; font-weight: 700; font-size: .85rem; letter-spacing: .04em; cursor: pointer; }
.adm-langues button.actif { background: var(--charbon); color: var(--ivoire); }
[data-theme="sombre"] .adm-langues button.actif { background: var(--orange); color: var(--charbon); }
.adm-langues--connexion { justify-self: end; }
.adm-menu .adm-langues { display: flex; margin: 2px 0; background: rgba(242, 235, 221, .06); border-color: rgba(242, 235, 221, .12); }
.adm-menu .adm-langues button { flex: 1; width: auto; justify-content: center; padding: 7px 0; text-align: center; color: rgba(242, 235, 221, .8); }
.adm-menu .adm-langues button:hover { background: rgba(242, 235, 221, .08); color: var(--ivoire); }
.adm-menu .adm-langues button.actif, [data-theme="sombre"] .adm-menu .adm-langues button.actif { background: var(--orange); color: var(--charbon); }

/* ---- Admin : mise en page optimisée (aucun débordement horizontal, grilles adaptées à la largeur) ---- */
.adm-grille > *, .adm-kpis > * { min-width: 0; }
.adm-contenu > * { max-width: 1480px; }
@media (min-width: 761px) {
  /* Listes et tableaux larges : défilement dans la carte plutôt que dans la page */
  .adm-liste, .adm-defile, .carte-bloc:has(> .adm-table), .carte-bloc:has(> table) { overflow-x: auto; scrollbar-width: thin; }
  .adm-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .adm-table td:first-child, .adm-table th:first-child { padding-left: 4px; }
  .adm-table tbody tr { transition: background .15s; }
}
@media (max-width: 1320px) and (min-width: 1101px) {
  /* Deux colonnes entre 1100 et 1320 px : les blocs « larges » prennent toute la ligne */
  .adm-grille { grid-template-columns: repeat(2, 1fr); }
  .adm-large { grid-column: 1 / -1; }
}
.adm-kpi strong { overflow-wrap: anywhere; }
.adm-entete { row-gap: 12px; }
.adm-barre-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.adm-barre-liste .adm-recherche { flex: 1 1 260px; }
.carte-bloc h2 { text-wrap: balance; }
@media (min-width: 761px) {
  /* Listes : les cellules de texte passent à la ligne au lieu d'élargir le tableau (montants et dates restent sur une ligne) */
  .adm-table--liste td { white-space: normal; }
  .adm-table--liste td a { overflow-wrap: anywhere; }
  .adm-table--liste td:has(> .adm-etiquette:only-child), .adm-table--liste td .bouton { white-space: nowrap; }
}
.adm-segments--bloc { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.adm-segments--bloc button { flex: none; white-space: nowrap; }

/* KV Eats : étiquettes et allergènes des plats, avis avec réponse du restaurant, fermetures exceptionnelles (0064) */
.plat__etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pastille-plat { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; background: var(--surface-2); color: var(--texte-2); }
.pastille-plat--vegetarien, .pastille-plat--vegan { background: rgba(46, 158, 91, .14); color: #23804A; }
.pastille-plat--epice { background: rgba(217, 74, 69, .13); color: #C23D38; }
.pastille-plat--nouveau, .pastille-plat--populaire { background: rgba(242, 140, 40, .16); color: #B4600F; }
[data-theme="sombre"] .pastille-plat--vegetarien, [data-theme="sombre"] .pastille-plat--vegan { color: #6FD39A; }
[data-theme="sombre"] .pastille-plat--epice { color: #F08A86; }
[data-theme="sombre"] .pastille-plat--nouveau, [data-theme="sombre"] .pastille-plat--populaire { color: #F5A85C; }
.fiche .plat__etiquettes { margin: 0 0 12px; }
.fiche__allergenes { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.fiche__allergenes p { margin: 4px 0; font-weight: 600; }
.fiche__allergenes small { color: var(--texte-2); font-size: .78rem; }
.resto-fermeture { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(217, 74, 69, .1); color: #C23D38; }
[data-theme="sombre"] .resto-fermeture { color: #F08A86; }
.avis-resto { margin-top: 28px; margin-bottom: 40px; }
.avis-resto h2 { margin: 0 0 14px; }
.avis-resto__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.avis-resto__item { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--filet); }
.avis-resto__item > p { margin: 8px 0 0; }
.avis-resto__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.avis-resto__tete small { color: var(--texte-2); }
.avis-resto__etoiles { color: var(--orange); letter-spacing: 1px; }
.avis-resto__etoiles span { color: var(--filet); }
.avis-resto__reponse { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; background: var(--surface-2); }
.avis-resto__reponse strong { font-size: .8rem; }
.avis-resto__reponse p { margin: 4px 0 0; font-size: .92rem; }
/* Résumé des avis : note moyenne, répartition 5 → 1, points forts */
.avis-resume { display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; align-items: center; margin-bottom: 16px; padding: 18px 20px; }
.avis-resume__note { display: grid; justify-items: center; gap: 2px; min-width: 110px; }
.avis-resume__note strong { font-size: 2.6rem; line-height: 1; }
.avis-resume__note small { color: var(--texte-2); }
.avis-resume__barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.avis-resume__barres li { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 10px; font-size: .85rem; color: var(--texte-2); }
.avis-resume__barres li span:last-child { text-align: right; }
.avis-resume__barre { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.avis-resume__barre i { display: block; height: 100%; border-radius: 6px; background: var(--orange); }
.avis-resume__forts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.avis-resume__forts small { color: var(--texte-2); font-weight: 700; }
.avis-resto__attente { margin: 6px 0 0; font-size: .8rem; font-weight: 700; color: var(--texte-2); }
.avis-resto__plus { margin-top: 14px; }
.info--lien { color: inherit; text-decoration: none; }
.info--lien:hover strong { text-decoration: underline; }
@media (max-width: 560px) { .avis-resume { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Admin : fiche client (0065) */
.adm-fiche-client { width: min(980px, 100%); }
.adm-fc-entete { display: flex; align-items: center; gap: 16px; padding-right: 44px; min-width: 0; }
.adm-fc-entete h2 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.adm-fc-entete .adm-pile { min-width: 0; }
.adm-fc-entete small { overflow-wrap: anywhere; }
.adm-fc-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; font-size: 1.2rem; }
.adm-fc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.adm-fc-kpis .adm-kpi { padding: 14px; min-width: 0; }
.adm-fc-kpis .adm-kpi strong { font-size: 1.45rem; overflow-wrap: anywhere; }
.adm-fc-onglets { margin-bottom: 14px; }
.adm-fc-contenu { display: grid; gap: 10px; min-width: 0; }
.adm-fc-liste, .adm-fc-simple, .adm-fc-articles { list-style: none; margin: 0; padding: 0; }
.adm-fc-liste > li, .adm-fc-simple > li { border-top: 1px solid var(--filet); }
.adm-fc-liste > li:first-child, .adm-fc-simple > li:first-child { border-top: 0; }
.adm-fc-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.adm-fc-ligne:hover { background: var(--surface-2); }
.adm-fc-ligne > .adm-pile { flex: 1; min-width: 0; }
.adm-fc-ligne strong { overflow-wrap: anywhere; }
.adm-fc-droite { flex: none; text-align: right; }
.adm-fc-univers { flex: none; width: 82px; text-align: center; padding: 4px 0; border-radius: 8px; font-size: .75rem; font-weight: 800; color: var(--charbon); }
.adm-fc-univers--eats { background: var(--orange); }
.adm-fc-univers--transport { background: #C99A66; }
.adm-fc-detail { padding: 4px 4px 16px 98px; display: grid; gap: 10px; }
.adm-fc-articles { display: grid; gap: 4px; }
.adm-fc-articles li { display: flex; justify-content: space-between; gap: 12px; }
.adm-fc-articles small { color: var(--texte-2); }
.adm-fc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: .92rem; }
.adm-fc-dl dt { color: var(--texte-2); font-weight: 700; }
.adm-fc-dl dd { margin: 0; overflow-wrap: anywhere; }
.adm-fc-simple > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
.adm-fc-simple .adm-pile { min-width: 0; }
.adm-fc-simple small { overflow-wrap: anywhere; }
.adm-fc-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.adm-table--liste tbody tr[data-ligne] { cursor: pointer; }
@media (max-width: 760px) {
  .adm-fc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-fc-detail { padding-left: 4px; }
  .adm-fc-univers { width: auto; padding: 4px 8px; }
  .adm-fc-dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Admin : carte en direct (KV Eats + KV Transport, 0075) */
.cd-cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: 14px; align-items: start; }
.cd-carte { padding: 0; overflow: hidden; }
.cd-map { height: min(72vh, 760px); min-height: 380px; background: var(--surface-2); }
.cd-map > .adm-vide, .cd-map > .adm-chargement { height: 100%; display: grid; place-items: center; }
.cd-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--filet); font-size: .8rem; font-weight: 700; color: var(--texte-2); }
.cd-legende span { display: inline-flex; align-items: center; gap: 6px; }
.cd-legende i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--filet); }
.cd-legende .adm-lien-action { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cd-legende .adm-lien-action .icone { width: 15px; height: 15px; }
.cd-panneau { padding: 16px; max-height: calc(min(72vh, 760px) + 50px); overflow-y: auto; }
.cd-titre { font-size: 1rem; margin: 4px 0 8px; }
.cd-titre:not(:first-child) { margin-top: 18px; }
.cd-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cd-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cd-item:hover, .cd-item:focus-visible { background: var(--surface-2); }
.cd-item .adm-pile { min-width: 0; }
.cd-item small { overflow-wrap: anywhere; }
.cd-pastille { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff; font-weight: 800; font-size: .75rem; }
.cd-retour { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 2px; border: 0; background: none; color: var(--texte); font: inherit; font-weight: 800; cursor: pointer; }
.cd-fiche-tete { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--filet); }
.cd-fiche-tete .cd-pastille, .cd-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.cd-fiche-tete .adm-pile { min-width: 0; }
.cd-fiche-tete a { color: var(--orange); font-weight: 700; }
.cd-mission { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.cd-mission:last-child { border-bottom: 0; }
.cd-mission__tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-mission__tete .adm-fc-univers { width: auto; padding: 4px 10px; }
.cd-mission .adm-fc-dl { font-size: .86rem; }
.cd-mission .adm-fc-dl a { color: var(--orange); font-weight: 700; }
.cd-mission .adm-fc-dl small { color: var(--texte-2); }
.cd-mission__actions { flex-wrap: wrap; gap: 8px; }
.cd-mission__actions .bouton { flex: 1 1 auto; }
.cd-alerte { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(217, 74, 69, .1); color: var(--rouge); font-weight: 700; font-size: .88rem; }
.cd-candidats { display: grid; gap: 6px; max-height: 44vh; overflow-y: auto; margin: 6px 0 12px; }
.cd-candidat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 12px; cursor: pointer; }
.cd-candidat:has(input:checked) { border-color: var(--orange); background: rgba(242, 140, 40, .08); }
.cd-candidat input { accent-color: var(--orange); flex: none; }
.cd-candidat .adm-pile { flex: 1; min-width: 0; }
.cd-candidat--bloque { opacity: .55; cursor: not-allowed; }
.cd-candidat__km { flex: none; white-space: nowrap; }
.cd-avertissement { color: #B8651A !important; font-weight: 700; }
.cd-confirme { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.cd-confirme input { margin-top: 3px; accent-color: var(--rouge); }
.cd-journal { margin-top: 14px; }
.cd-journal summary { cursor: pointer; font-weight: 800; }
.cd-journal[open] summary { margin-bottom: 10px; }
@media (max-width: 1000px) {
  .cd-cadre { grid-template-columns: minmax(0, 1fr); }
  .cd-map { height: 56vh; min-height: 300px; }
  .cd-panneau { max-height: none; }
}
@media (max-width: 560px) {
  .cd-legende .adm-lien-action { margin-left: 0; }
  .cd-mission__actions .bouton { width: 100%; }
}

/* Admin : Kveloz+ dans la fiche client (0069) */
.adm-fc-kvp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--filet); }
.adm-fc-kvp--actif { background: #171715; color: #F2EBDD; border-color: #171715; }
.adm-fc-kvp--actif small { color: rgba(242, 235, 221, .75); }
.adm-fc-kvp > .adm-pile { min-width: 0; }
.adm-fc-kvp__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-fc-kvp__actions .bouton { min-height: 40px; padding: 0 14px; font-size: .88rem; }
.adm-fc-kvp--actif .bouton--contour { color: #F2EBDD; border-color: rgba(242, 235, 221, .35); }

/* Admin : suppression RGPD depuis la fiche client (0077) */
.adm-fc-danger { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px;
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--rouge) 45%, transparent); background: color-mix(in srgb, var(--rouge) 6%, transparent); }
.adm-fc-danger > .adm-pile { min-width: 0; flex: 1 1 280px; }
.adm-fc-danger strong { color: var(--rouge); }
.adm-bouton-danger { background: var(--rouge); color: #fff; }
.adm-bouton-danger:disabled { opacity: .45; }
.adm-rgpd { display: grid; gap: 12px; margin-bottom: 6px; }
.adm-rgpd p { margin: 4px 0 0; }

/* Admin : livreurs rattachés à un restaurant (fiche restaurant) */
.adm-rattaches { margin-top: 16px; display: grid; gap: 10px; }
.adm-rattaches h3 { margin: 0; font-size: 1rem; }
.adm-rattaches__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-rattaches__liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 12px; background: var(--surface); }
.adm-rattaches__ajout { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-rattaches__ajout select { flex: 1 1 220px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--filet); background: var(--surface); color: var(--texte); font: inherit; }

/* ---------------------------------------------------------------- Carrousel des catégories (accueil KV Eats) */
.carrousel { position: relative; margin-inline: -6px; }
.categories--carrousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 6px 14px; overscroll-behavior-x: contain; }
.categories--carrousel::-webkit-scrollbar { display: none; }
.categories--carrousel .categorie { flex: 0 0 132px; scroll-snap-align: start; }
.carrousel--apres .categories--carrousel { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.carrousel--avant .categories--carrousel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.carrousel--avant.carrousel--apres .categories--carrousel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.carrousel__fleches { display: flex; gap: 8px; align-self: center; }
.carrousel__fleches[hidden] { display: none; }
.carrousel__fleche { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--bord, rgba(23, 23, 21, .14)); background: var(--surface, #fff); color: inherit; cursor: pointer; transition: background .2s, opacity .2s, transform .2s; }
.carrousel__fleche:hover:not(:disabled) { transform: translateY(-1px); background: var(--fond); }
.carrousel__fleche:disabled { opacity: .35; cursor: default; }
.carrousel__fleche svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .categories--carrousel { gap: 14px; }
  .categories--carrousel .categorie { flex-basis: 96px; font-size: .9rem; }
  .carrousel__fleches { display: none; }
}
@media (prefers-reduced-motion: reduce) { .categories--carrousel { scroll-behavior: auto; } }
.categories--carrousel { cursor: grab; }
.categories--carrousel img { -webkit-user-drag: none; user-select: none; }
.categories--glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.categories--glisse .categorie { pointer-events: none; }
@media (hover: none) { .categories--carrousel { cursor: auto; } }

/* Badge App Store tant que l'app iPhone n'est pas publiée */
.badge-store--bientot { display: inline-grid; justify-items: center; gap: 4px; line-height: 1; opacity: .6; }
.badge-store--bientot small { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }