/* [BEYTI] Feuille d'ajustements « à chaud ».
 *
 * Ce fichier n'est PAS compilé avec le site : il est servi tel quel depuis
 * public/. Le modifier et l'envoyer prend deux secondes, sans reconstruction
 * ni redémarrage.
 *
 * On y règle marges, couleurs, tailles, arrondis. La logique — un texte, une
 * condition, un comportement — passe forcément par un build.
 *
 * Pour gagner sur MUI il faut soit deux classes stables, soit `!important`.
 * Viser une classe `mui-style-xxx` ne sert à rien : son nom change à chaque
 * compilation.
 */

/* ── La barre du haut passe sous l'heure, sans chevaucher le contenu ───────
 *
 * En mode « application » (site ajouté à l'écran d'accueil), la page occupe
 * tout l'écran, SOUS la barre d'état — l'heure, le réseau, la batterie. Sans
 * dégagement, la barre de recherche se retrouve dessous, inutilisable.
 *
 * `env(safe-area-inset-top)` vaut la hauteur exacte de cette zone : 0 dans un
 * navigateur classique, ~47px sur un iPhone à encoche. Une seule règle couvre
 * les deux cas, sans détection.
 *
 * ⚠️ Cette règle SUPPOSE que la page mesure la barre ENTIÈRE pour savoir
 * combien de place lui réserver. C'est le cas depuis le 2026-08-17
 * (MobileNavBar / NewNavBar : `closest(".MuiAppBar-root")`). Avant ce
 * changement, la mesure ignorait cette marge et la barre chevauchait les
 * bannières — ne pas remettre l'une sans l'autre.
 */
@media (max-width: 1180px) {
  .MuiAppBar-root.MuiPaper-root {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ── La nappe change de teinte en fondu ────────────────────────────────────
 *
 * Le dégradé de l'accueil prend la couleur de la bannière visible. La règle
 * portait déjà `transition: background 600ms`, sans effet : une variable CSS
 * ordinaire n'est pas interpolée par le navigateur, elle bascule d'un coup.
 *
 * `@property` déclare ces deux variables comme des COULEURS. Le navigateur sait
 * alors passer de l'une à l'autre progressivement, et la transition existante
 * s'applique enfin. Le fondu se fait sur le compositeur : aucun rendu React,
 * aucun coût pendant le défilement.
 */
@property --beyti-hero-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #62271e;
}

@property --beyti-hero-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #c26d49;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [BEYTI 2026-08-19] LE CŒUR DE LA MARQUE
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Meriem a fourni son cœur et demandé qu'il remplace l'ancien PARTOUT.
 * Le site en dessine de deux façons :
 *   · les icônes MUI  → détournées dans `next.config.js` (alias d'import) ;
 *   · la police Flaticon (`<i class="fi fi-rr-heart">`) → ICI.
 *
 * Une police ne se modifie pas depuis le code : le dessin vit dans un fichier
 * de `node_modules` que le prochain `yarn install` réécrirait. On remplace donc
 * le GLYPHE : le `::before` n'affiche plus le caractère de la police mais notre
 * tracé, appliqué en masque. Le masque ne garde que la FORME et la peint avec
 * `currentColor` — le cœur suit donc la couleur autour de lui, ce qu'une image
 * de fond, figée, ne ferait pas.
 *
 * ── Les trois corrections du 19/08 (retour de Meriem) ──────────────────────
 * 1. PAS DE CERCLE. Jamais, nulle part. Le cœur se pose sur la photo.
 * 2. PLUS ÉPAIS. Le tracé Phosphor « regular » est trop fin une fois posé sur
 *    une image. On l'épaissit en ajoutant un contour au tracé DANS le masque
 *    (`stroke-width`) : le dessin reste le sien, il gagne juste en présence.
 * 3. UN REMPLISSAGE TRANSLUCIDE À L'INTÉRIEUR. C'est lui qui rend le cœur
 *    lisible sur un fond clair comme sur un fond sombre — mieux qu'une ombre,
 *    qui salit les bords. Il est dessiné par un second calque (`::after`) qui
 *    reprend la silhouette PLEINE à faible opacité.
 * 4. BLANC, pas rouge. Les cartes natives imposaient `color: error.red` en
 *    style en ligne ; on le neutralise là où le cœur est posé sur une photo.
 */

/* ── 1. Le contenant perd son cercle ─────────────────────────────────────── */
/* ⚠️ 2e passe : le selecteur exigeait un enfant DIRECT (`>`). Dans plusieurs
   ecrans — la fiche produit notamment — le coeur est enveloppe dans un span ou
   un Box, et la regle ne s'appliquait pas : le cercle restait. On passe donc en
   descendant, quelle que soit la profondeur. */
.MuiIconButton-root:has(i[class*="-heart"]),
.MuiIconButton-root:has(.beyti-coeur),
.MuiButtonBase-root:has(i[class*="-heart"]),
.MuiButtonBase-root:has(.beyti-coeur) {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}

/* ── 2. Le cœur prend la place que le cercle occupait, et devient blanc ──── */
/* Le coeur prend TOUTE la place que le cercle occupait — d'ou ces tailles,
   plus genereuses que celles d'une icone posee dans un bouton. */
.MuiIconButton-root:has(i[class*="-heart"]) i[class*="-heart"],
.MuiButtonBase-root:has(i[class*="-heart"]) i[class*="-heart"] {
  font-size: 30px !important;
  color: #ffffff !important;
}
.MuiIconButton-root:has(.beyti-coeur) .beyti-coeur,
.MuiButtonBase-root:has(.beyti-coeur) .beyti-coeur {
  font-size: 32px !important;
  color: #ffffff !important;
}

/* ── 3. Le glyphe de la police, remplacé par notre tracé ─────────────────── */
i[class*="-heart"] {
  position: relative;
  display: inline-flex;
  line-height: 1;
}
i[class*="-heart"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Au trait — `rr` (regular) et `br` (bold). Le contour de 9 unités sur 256
 * épaissit le tracé sans en changer le dessin. */
i.fi-rr-heart::before,
i.fi-br-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M178%2C40c-20.65%2C0-38.73%2C8.88-50%2C23.89C116.73%2C48.88%2C98.65%2C40%2C78%2C40a62.07%2C62.07%2C0%2C0%2C0-62%2C62c0%2C70%2C103.79%2C126.66%2C108.21%2C129a8%2C8%2C0%2C0%2C0%2C7.58%2C0C136.21%2C228.66%2C240%2C172%2C240%2C102A62.07%2C62.07%2C0%2C0%2C0%2C178%2C40ZM128%2C214.8C109.74%2C204.16%2C32%2C155.69%2C32%2C102A46.06%2C46.06%2C0%2C0%2C1%2C78%2C56c19.45%2C0%2C35.78%2C10.36%2C42.6%2C27a8%2C8%2C0%2C0%2C0%2C14.8%2C0c6.82-16.67%2C23.15-27%2C42.6-27a46.06%2C46.06%2C0%2C0%2C1%2C46%2C46C224%2C155.61%2C146.24%2C204.15%2C128%2C214.8Z%22%20stroke%3D%22black%22%20stroke-width%3D%229%22%20stroke-linejoin%3D%22round%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M178%2C40c-20.65%2C0-38.73%2C8.88-50%2C23.89C116.73%2C48.88%2C98.65%2C40%2C78%2C40a62.07%2C62.07%2C0%2C0%2C0-62%2C62c0%2C70%2C103.79%2C126.66%2C108.21%2C129a8%2C8%2C0%2C0%2C0%2C7.58%2C0C136.21%2C228.66%2C240%2C172%2C240%2C102A62.07%2C62.07%2C0%2C0%2C0%2C178%2C40ZM128%2C214.8C109.74%2C204.16%2C32%2C155.69%2C32%2C102A46.06%2C46.06%2C0%2C0%2C1%2C78%2C56c19.45%2C0%2C35.78%2C10.36%2C42.6%2C27a8%2C8%2C0%2C0%2C0%2C14.8%2C0c6.82-16.67%2C23.15-27%2C42.6-27a46.06%2C46.06%2C0%2C0%2C1%2C46%2C46C224%2C155.61%2C146.24%2C204.15%2C128%2C214.8Z%22%20stroke%3D%22black%22%20stroke-width%3D%229%22%20stroke-linejoin%3D%22round%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

/* Le remplissage translucide, à l'intérieur du tracé. */
i.fi-rr-heart::after,
i.fi-br-heart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: currentColor;
  opacity: 0.34;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C102c0%2C70-103.79%2C126.66-108.21%2C129a8%2C8%2C0%2C0%2C1-7.58%2C0C119.79%2C228.66%2C16%2C172%2C16%2C102A62.07%2C62.07%2C0%2C0%2C1%2C78%2C40c20.65%2C0%2C38.73%2C8.88%2C50%2C23.89C139.27%2C48.88%2C157.35%2C40%2C178%2C40A62.07%2C62.07%2C0%2C0%2C1%2C240%2C102Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C102c0%2C70-103.79%2C126.66-108.21%2C129a8%2C8%2C0%2C0%2C1-7.58%2C0C119.79%2C228.66%2C16%2C172%2C16%2C102A62.07%2C62.07%2C0%2C0%2C1%2C78%2C40c20.65%2C0%2C38.73%2C8.88%2C50%2C23.89C139.27%2C48.88%2C157.35%2C40%2C178%2C40A62.07%2C62.07%2C0%2C0%2C1%2C240%2C102Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Plein — `sr` (solid) : le favori déjà enregistré. Rien à remplir. */
i.fi-sr-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C102c0%2C70-103.79%2C126.66-108.21%2C129a8%2C8%2C0%2C0%2C1-7.58%2C0C119.79%2C228.66%2C16%2C172%2C16%2C102A62.07%2C62.07%2C0%2C0%2C1%2C78%2C40c20.65%2C0%2C38.73%2C8.88%2C50%2C23.89C139.27%2C48.88%2C157.35%2C40%2C178%2C40A62.07%2C62.07%2C0%2C0%2C1%2C240%2C102Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C102c0%2C70-103.79%2C126.66-108.21%2C129a8%2C8%2C0%2C0%2C1-7.58%2C0C119.79%2C228.66%2C16%2C172%2C16%2C102A62.07%2C62.07%2C0%2C0%2C1%2C78%2C40c20.65%2C0%2C38.73%2C8.88%2C50%2C23.89C139.27%2C48.88%2C157.35%2C40%2C178%2C40A62.07%2C62.07%2C0%2C0%2C1%2C240%2C102Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [BEYTI 2026-08-19] LECTURE / PAUSE — pas de cercle non plus
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Même décision que pour le cœur : aucune pastille derrière le symbole.
 *
 * Le lecteur de l'accueil (`VideoPlayerWithCenteredControl`, fichier natif
 * 6amTech) posait un disque gris au centre de la vidéo. On ne le modifie pas :
 * `:has()` désigne « le bouton qui contient un symbole de lecture », quel que
 * soit son nom, et la règle survit aux mises à jour.
 *
 * Le symbole récupère la place du disque — d'où sa taille — et porte une ombre
 * portée pour rester lisible sur une vidéo claire.
 */
.MuiIconButton-root:has(.beyti-lecture),
.MuiButtonBase-root:has(.beyti-lecture) {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.MuiIconButton-root:has(.beyti-lecture):hover,
.MuiButtonBase-root:has(.beyti-lecture):hover {
  background-color: transparent !important;
}
.MuiIconButton-root:has(.beyti-lecture) .beyti-lecture,
.MuiButtonBase-root:has(.beyti-lecture) .beyti-lecture {
  font-size: 56px !important;
  /* Blanc adouci : à pleine opacité le symbole perce l'image. L'ombre portée
     suffit à le rendre lisible. */
  color: rgba(255, 255, 255, 0.55) !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [BEYTI 2026-08-20] MESSAGERIE — les onglets Vendeur / Livreur sont masqués
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Vérifié le 20/08 : `get_channel_list` est appelé SANS paramètre et
 * `ContactLists` n'applique aucun filtre. Ces deux onglets ne filtraient donc
 * RIEN — ils partageaient visuellement une liste qui restait entière.
 *
 * Deux onglets qui ne trient pas, sur une messagerie qui aura peu de fils au
 * départ, c'est un choix imposé pour rien. La liste reste chronologique : ce
 * qui compte n'est pas le type d'interlocuteur mais la conversation en cours.
 *
 * Masqués par le CSS et non supprimés du code natif : une mise à jour 6amMart
 * les réécrira sans conflit, et les rétablir tient en une ligne commentée.
 */
.beyti-messagerie .MuiTabs-root {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [BEYTI 2026-08-20] LE CARRÉ GRIS AU TOUCHER
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Ce n'est ni une ombre ni un fond : c'est le SURLIGNAGE TACTILE du navigateur.
 * Sur mobile, tout élément cliquable reçoit un rectangle gris translucide au
 * moment du contact — un reliquat des premiers navigateurs tactiles, censé
 * confirmer l'appui. Nos boutons confirment déjà par leur propre animation.
 *
 * Il se retire, et ça n'enlève AUCUNE information : le rectangle est carré
 * alors que nos boutons sont ronds, il ne suit donc même pas leur forme.
 */
html,
body,
a,
button,
[role="button"],
.MuiButtonBase-root {
  -webkit-tap-highlight-color: transparent;
}