/* BoutiqueOuf - Shop App Styles */
:root {
  /* ── LE CADRE TÉLÉPHONE ────────────────────────────────────────────────────────────
     La vitrine EST un téléphone, même ouverte dans un navigateur d'ordinateur. Rien ne doit
     sortir de cette largeur : ni l'assistante, ni sa pastille, ni un panneau, ni une bulle.

     430, c'est un iPhone 14 Pro Max. Elle était à 390 — un iPhone 14 ordinaire — pendant que
     Manage dessinait déjà 430 : une gérante changeait de téléphone en passant de son
     application à sa vitrine. CLAUDE.md le dit : si l'un bouge, l'autre bouge dans le même
     geste. Le jumeau vit dans manageboutique/src/constants/cadre.ts.

     La valeur était recopiée à NEUF endroits dans ce fichier et dans les JS. */
  --bo-cadre: 430px;
  /* LE CADRE EST CENTRÉ sur tablette et ordinateur (JM, le 7 octobre 2026). --bo-gauche est
     la marge à sa gauche : tout élément flottant s'y pose au lieu de `left: 0`. Sur un
     téléphone elle vaut 0. Le jumeau JS est `boGaucheCadre()` (theme-boot.js). */
  --bo-gauche: max(0px, calc((100vw - var(--bo-cadre)) / 2));
  /* LE BAS ET LE HAUT DE LA PASTILLE DE NAVIGATION, pour ce qui se pose AU-DESSUS d'elle. La
     pastille (.footer-nav) flotte à six pixels du bas, ou huit de moins que la barre d'accueil
     de l'iPhone, et mesure 66 px. Ce qui flotte au-dessus laisse huit pixels d'air. */
  --bo-pastille-bas: max(6px, calc(env(safe-area-inset-bottom, 0px) - 8px));
  --bo-sur-la-pastille: calc(var(--bo-pastille-bas) + 66px + 8px);
  --primary: #6B21A8;
  --primary-light: #EDE9FE;
  --primary-dark: #581C87;
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --text: #1F2937;
  --text-sec: #6B7280;
  --text-light: #9CA3AF;
  --border: #E5E7EB;
  --success: #16A34A;
  --danger: #DC2626;
  --warning: #2E8B3C;
  --radius: 12px;

  /* LA PASTILLE DE COMPTEUR — UNE COULEUR, PAS TROIS.
     Elle valait `#FF0000` EN DUR dans l'en-tête, `var(--danger)` dans le pied, et le vert du
     logo dans la barre collante : trois pastilles qui comptent le MÊME panier, dans trois
     couleurs. Elle se règle ici, et nulle part ailleurs.
     `--badge-bordure` est le liseré : il reprend le fond QUI PORTE la pastille, pour la
     détacher de lui. Chaque contexte le redéfinit ; le blanc n'est qu'un repli. */
  --badge-compteur: var(--secondary, #2E8B3C);
  --badge-bordure: #FFFFFF;
}

/* LA GÉOMÉTRIE DE LA PASTILLE — UNE SEULE, POUR LES TROIS.
   Elles mesuraient 22, 19 et 16 px de côté, avec trois rayons et deux polices. Le même
   nombre, sur la même page, dans trois pastilles de tailles différentes : on croyait à trois
   compteurs distincts. `renderCartBadges()` (js/api.js) les écrit toutes les trois d'un même
   geste — elles se dessinent donc d'un même geste.
   Elles restent CACHÉES tant que rien ne les remplit : un « 0 » n'informe de rien, et une
   pastille vide fait une tache. Le `display` d'affichage est posé par leur contexte. */
.cart-header .badge,
.bo-head-badge,
.footer-nav .cart-count {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 5px;
  background: var(--badge-compteur);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--badge-bordure);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   LA VITRINE EST UNE APPLICATION, PAS UNE PAGE WEB.
   ══════════════════════════════════════════════════════════════════════════════════════

   JM, le 20/10/2026 : « on a l'impression qu'on a zoomé », « un bouton poussé vers la
   droite, cropé », « comme si on était dans un web où il faut scroller, on peut même
   zoomer, sortir du cadre ». Sur iPhone comme sur Android.

   Le pincement se refuse dans la ligne `viewport` de chaque page. Restent les deux autres
   façons de sortir du cadre, et elles se ferment ici :

     • `overflow-x: hidden` — un seul élément trop large (une image, une rangée, une ombre)
       suffit à rendre TOUTE la page déplaçable latéralement. On voit alors le fond à droite
       du téléphone et un bouton part hors de l'écran. La page ne glisse plus que vers le
       haut et le bas.

     • `overscroll-behavior-y: contain` — le rebond élastique en bout de course. Il découvre
       le fond du navigateur au-dessus de l'en-tête, ce qui donne précisément l'impression
       d'une page web dans un cadre, et non d'une application.

   `width: 100%` avec `max-width` : sans la largeur, un enfant plus large pousse le corps
   au-delà du cadre, et c'est le corps lui-même qui déborde. */
html {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: var(--bo-cadre);
  margin: 0 auto;
  min-height: 100vh;
  /* ── `clip`, SURTOUT PAS `hidden` : SINON PLUS RIEN NE COLLE ─────────────────────────
     JM, le 20 octobre 2026 : « tu es sûr que le header est un sticky et que le râtelier est
     un sticky ? ». Ils ne l'étaient plus, ni dans le navigateur ni dans l'IPA.

     `overflow-x: hidden` sur le CORPS fait de lui un conteneur de défilement : un axe caché
     force l'autre à `auto`, et le corps devient `overflow-y: auto`. Or un élément `sticky`
     colle au conteneur de défilement le plus proche — c'était donc le corps, qui ne défile
     jamais puisqu'il est aussi haut que son contenu. C'est la FENÊTRE qui défile. L'en-tête et
     le râtelier collaient à une boîte immobile, et partaient avec la page.

     Mesuré le 20/10 à 402 px : après 800 px de défilement, l'en-tête était à −800. Avec
     `clip`, il est à 0.

     `clip` coupe ce qui dépasse SANS créer de conteneur de défilement. Le corps reste
     `overflow-y: visible`, la fenêtre reste le seul conteneur, et le sticky revient.
     Le glissement latéral reste fermé : c'est la ligne de `html`, plus haut, qui le ferme
     (elle passe à la fenêtre elle-même), et elle garde `hidden`. Vérifié : un enfant de
     900 px de large ne rend pas la page déplaçable, `scrollX` reste à 0.

     Le garde-fou est dans manageboutique/src/appareil/cadreSansZoom.test.ts. */
  overflow-x: clip;
  overscroll-behavior-y: contain;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Placeholders des champs (edits) : +20% de transparence. */
input::placeholder, textarea::placeholder { opacity: 0.8; }

button { cursor: pointer; border: none; font-family: inherit; }

/* Welcome popup */
.welcome-overlay {
  position: fixed;
  top: 0; bottom: 0;
  /* LE VOILE S'ARRÊTE AU CADRE TÉLÉPHONE, il ne noircit pas la fenêtre.
     Il était en `left: 0; right: 0` : sur un navigateur large, il assombrissait les
     1 440 px de l'écran pendant que la boutique tenait dans sa colonne de 430. Une
     fenêtre d'une autre application posée par-dessus la vitrine, exactement ce que la
     règle du cadre interdit. Mesuré en production le 11 septembre 2026.
     `--bo-gauche` + la largeur du cadre, comme l'en-tête collant et le pied. */
  left: var(--bo-gauche);
  width: min(var(--bo-cadre), 100vw);
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s;
}

.welcome-popup {
  background: var(--surface);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: popIn 0.3s;
}

.welcome-icon { font-size: 48px; margin-bottom: 16px; }
.welcome-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.welcome-close {
  background: var(--primary);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
}

.welcome-close:active { opacity: 0.85; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Banner carousel */
.banner-carousel {
  position: relative;
  padding: 10px 40px 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  min-height: 38px;
  overflow: hidden;
}

.banner-carousel.banner-bottom {
  position: fixed;
  bottom: 0; left: var(--bo-gauche); right: auto;
  max-width: var(--bo-cadre);
  margin: 0;
  z-index: 90;
}

.banner-track {
  display: flex;
  width: 100%;
  min-height: 18px;
  transition: transform 0.5s ease;
}

.banner-slide {
  min-width: 100%;
  flex-shrink: 0;
  text-align: center;
}

.banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  padding: 4px;
}

.banner-close:hover { color: #fff; }

/* Header */
.header {
  visibility: hidden; /* revele par JS une fois couleur + logo + position appliques (anti-FOUC) */
  background: var(--primary);
  color: #fff;
  height: 160px;
  /**
   * ── LE BANDEAU PASSE SOUS L'HEURE ET LA BATTERIE ────────────────────────────────
   *
   * JM : << il faut que tout l'écran soit utilisé ; on sent dans le pied de page une zone
   * noire inutilisée, ou dans le haut une zone non utilisée ; il faut que l'application
   * s'adapte à tous les appareils et qu'elle soit tout écran >>.
   *
   * Dans l'APK, la barre d'état devient transparente (voir MainActivity) : sans cette
   * marge, l'heure et la batterie se poseraient PAR-DESSUS le nom de la boutique. La
   * hauteur vient du téléphone lui-même (`env(safe-area-inset-top)`), donc elle vaut zéro
   * dans un navigateur d'ordinateur et la mesure exacte de CHAQUE téléphone ailleurs :
   * une encoche, un poinçon, une barre haute, c'est le système qui le dit, pas nous.
   */
  padding: env(safe-area-inset-top, 0px) 16px 0;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Logo position variants */
.header-content.pos-top {
  flex-direction: column;
  align-items: center;
}

.header-content.pos-left {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.header-content.pos-right {
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
}

.header-content.pos-bottom {
  flex-direction: column-reverse;
  align-items: center;
}

.header-content.pos-left .header-text,
.header-content.pos-right .header-text {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header .logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 32px;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 6px;
  border: 3px solid rgba(255,255,255,0.4);
}

.header .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-text {
  text-align: center;
}

.header .shop-name { font-size: 20px; font-weight: 800; text-align: center; }
.header .shop-location { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.header .shop-desc {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
  line-height: 1.4;
  text-align: center;
}

/* Cart button in header */
.cart-header {
  position: absolute;
  right: 8px;
  z-index: 10;
  text-decoration: none;
  /* center the icon vertically: icon is 40px, so top = 50% - 20px */
  top: 50%;
  margin-top: -20px;
}

/* Posée au-dessus du caddie de l'ancien en-tête blanc — d'où le liseré blanc.
   Taille, rayon, couleur : voir la géométrie commune en haut du fichier. */
.cart-header .badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  display: flex;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  --badge-bordure: #fff;
}

.cart-header .badge:empty { display: none; }

.cart-header .cart-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* Category accordion */
.category-accordion {
  padding: 8px 0;
}

.accordion-section {
  margin-bottom: 4px;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.accordion-header:active { background: #F3F4F6; }

.accordion-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.accordion-promo-text {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* La pastille `.accordion-promo` a été retirée : `shop.js` ne la pose plus nulle part. La
   phrase de promotion juste en dessous — `.accordion-promo-text`, elle bien rendue — dit déjà
   en toutes lettres qu'il y a une promotion. */

/* IL N'Y A PLUS D'ACCORDÉON À DÉPLIER, MAIS `open` SERT ENCORE.
   Les catégories sont devenues des rangées horizontales : `shop.js` les crée déjà ouvertes et
   ne dessine plus ni chevron ni compteur. Les règles qui les peignaient (`.accordion-chevron`,
   `.accordion-count`) ont donc été retirées — c'était du CSS que plus rien ne rendait.
   Ce qui reste ci-dessous est INDISPENSABLE : `carousel.js` retire la classe `open` pour
   masquer les rayons hors filtre, et la remet pour les rouvrir. Sans ces deux règles, le
   filtre par promotion n'aurait plus aucun effet visible. */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-section.open .accordion-body {
  max-height: 5000px;
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s;
}

.product-card:active { transform: scale(0.97); }

.product-card .img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #F3F4F6;
  overflow: hidden;
}

.cart-overlay-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: background 0.2s, transform 0.15s;
}

.cart-overlay-btn:active { transform: scale(0.9); }

.cart-overlay-btn .cart-icon {
  font-size: 16px;
}

.cart-overlay-btn .cart-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E53E3E;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cart-overlay-btn.in-cart {
  background: #fff;
}

.product-card .img-wrap img,
.product-card .img-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ─── Affordance zoom sur toutes les thumbnails : curseur + badge "+" ─── */
.zoom-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  cursor: zoom-in;
}
.zoomable { cursor: zoom-in; }
.cart-item .thumb .zoom-badge {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  bottom: 3px;
  right: 3px;
}

/* ─── Lightbox zoom plein ecran (format telephone) ─── */
.zoom-overlay {
  position: fixed;
  /* Confiné à la colonne "view téléphone" (var(--bo-cadre), centrée) : ne cache pas le parent/desktop autour. */
  top: 0;
  bottom: 0;
  left: var(--bo-gauche);
  transform: none;
  width: min(var(--bo-cadre), 100vw);
  z-index: 100000;
  background: transparent; /* rien masque autour de la photo zoomee : la page reste visible */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.zoom-overlay-img {
  /* Tient TOUJOURS dans la vue : largeur = viewport - 10px de marge de chaque cote,
     hauteur bornee a la hauteur visible. Ratio preserve, jamais de debordement. */
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px); /* mobile : hauteur visible reelle (barre navigateur incluse) */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ─── Zoom galerie (photos + videos, swipe / pinch / tap-close) ─── */
/* ═══ JUMEAU : manageboutique/src/components/ZoomModal.tsx ═══════════════════════════════════
   Manage a la MEME visionneuse plein ecran, en React Native. Les deux ne peuvent pas fusionner
   (DOM ici, React Native la-bas) : elles doivent donc BOUGER DANS LE MEME GESTE. Chaque variable
   ci-dessous a son double dans l'objet `ZOOM_CONTROLS` de ZoomModal.tsx, sous le meme nom
   (--zoom-arrow-size <-> arrowSize, etc.). En changer une ici sans l'autre fait diverger la
   vitrine et Manage. */
.zoom-overlay.zoom-gallery {
  --zoom-counter-top: 16px;
  --zoom-counter-bg: rgba(0,0,0,0.5);
  --zoom-arrow-size: 44px;   /* rayon = moitie */
  --zoom-arrow-edge: 8px;
  --zoom-close-size: 40px;   /* rayon = moitie */
  --zoom-close-edge: 12px;
  --zoom-control-bg: rgba(0,0,0,0.45);
  cursor: default;
  overflow: hidden;
  touch-action: none; /* on gere pinch/pan/swipe nous-memes */
}
.zoom-gallery .zoom-stage {
  position: relative;
  /* Cadre limité à la largeur "format téléphone" (var(--bo-cadre)), dimensionné au média :
     les contrôles (enfants du stage) restent ainsi DANS la photo. */
  width: auto;
  max-width: min(var(--bo-cadre), calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.zoom-gallery .zoom-media {
  /* La photo remplit TOUJOURS la largeur "format téléphone", hauteur proportionnelle :
     pas de letterbox / fond noir autour de la photo. */
  width: min(var(--bo-cadre), calc(100vw - 16px));
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.zoom-gallery .zoom-img {
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-out;
}

/* ─── Zoom ANCRÉ : confiné à la zone de l'image principale (détail produit).
   Position/taille posées en inline (left/top/width/height = rect de l'ancre).
   Le reste de la vue téléphone (nom, prix, vignettes) reste visible autour. ─── */
.zoom-overlay.zoom-anchored {
  left: auto;            /* neutralise le centrage par défaut (left:50% + translateX) */
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: auto;           /* surchargé en inline par le rect de l'ancre */
}
.zoom-anchored .zoom-stage {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.zoom-anchored .zoom-media {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.zoom-gallery .zoom-video { background: #000; }

/* Compteur + controles superposes SUR le media (par-dessus, jamais dans le noir). */
.zoom-gallery .zoom-counter {
  position: absolute;
  top: var(--zoom-counter-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: var(--zoom-counter-bg);
  padding: 3px 10px;
  border-radius: 12px;
  pointer-events: none;
}
.zoom-gallery .zoom-nav,
.zoom-gallery .zoom-close {
  position: absolute;
  z-index: 5;
  border: none;
  color: #fff;
  background: var(--zoom-control-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.zoom-gallery .zoom-nav {
  top: 50%;
  width: var(--zoom-arrow-size);
  height: var(--zoom-arrow-size);
  margin-top: calc(var(--zoom-arrow-size) / -2);
  border-radius: calc(var(--zoom-arrow-size) / 2);
  font-size: 30px;
  line-height: 1;
}
.zoom-gallery .zoom-nav-l { left: var(--zoom-arrow-edge); }
.zoom-gallery .zoom-nav-r { right: var(--zoom-arrow-edge); }
.zoom-gallery .zoom-close {
  top: var(--zoom-close-edge);
  right: var(--zoom-close-edge);
  width: var(--zoom-close-size);
  height: var(--zoom-close-size);
  border-radius: calc(var(--zoom-close-size) / 2);
  font-size: 20px;
  line-height: 1;
}

.product-card .img-wrap .video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
  background: rgba(0,0,0,0.15);
}

.product-card .info {
  padding: 10px;
}

.product-card .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price {
  font-size: 15px;
  font-weight: 800;
  color: #1565C0;
  margin-top: 4px;
}

.product-card .stock-badge {
  font-size: 10px;
  color: var(--success);
  margin-top: 2px;
}

.product-card .stock-badge.out { color: var(--danger); }
.product-card .stock-badge.urgent {
  font-size: 11px;
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

/* Product detail page */
.product-detail { padding-bottom: 100px; }

.product-detail .gallery {
  background: #F3F4F6;
  overflow: hidden;
}

.product-detail .gallery .gallery-main {
  width: 100%;
  aspect-ratio: 5 / 6; /* photo +20% en hauteur (largeur bornee a la view telephone) */
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}
/* overflow hidden : la photo zoomee (pinch) ne deborde pas ; touch-action pan-y : on gere
   nous-memes pinch + swipe horizontal, le scroll vertical de la page reste possible. */
.product-detail .gallery .gallery-main-wrap { width: 100%; position: relative; overflow: hidden; touch-action: pan-y; }
.product-detail .gallery .gallery-main-media { width: 100%; }
.product-detail .gallery .gallery-main-video { cursor: default; background: #000; }

/* Fleches de navigation superposees sur la vue principale (prev/next). */
.product-detail .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
}
/* Le chevron est un SVG, comme celui du carrousel d'accueil : même taille (19 px),
   même trait. Le `font-size: 28px` au-dessus ne sert plus qu'au caractère de repli. */
.product-detail .gallery-nav svg { width: 19px; height: 19px; }
.product-detail .gallery-nav-l { left: 8px; }
.product-detail .gallery-nav-r { right: 8px; }

.product-detail .gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  background: #fff;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.product-detail .gallery-thumb {
  min-width: 60px;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
  background: #F3F4F6;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.product-detail .gallery-thumb:hover {
  border-color: var(--primary, #7c3aed);
}
/* Vignette vidéo : 1ère frame + badge play */
.product-detail .gallery-thumb-video {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.product-detail .gallery-thumb-video video {
  width: 100%;
  height: 100%;
  object-fit: contain; background: #000;
  border-radius: 4px;
}
.product-detail .gallery-thumb-video .thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

.product-detail .content { padding: 20px; }
.product-detail .name { font-size: 20px; font-weight: 800; }
.product-detail .price {
  font-size: 24px;
  font-weight: 900;
  color: #1565C0;
  margin-top: 8px;
}

.product-detail .desc {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.6;
  margin-top: 12px;
}

.product-detail .stock {
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LA CATÉGORIE DU PRODUIT — une pastille, pas un bouton.
   ══════════════════════════════════════════════════════════════════════════════════════

   JM, le 20/10/2026 : « SANDALES plates tressées, il faut mettre les catégories », « il faut
   que les catégories, stock, description, taille soient visibles […] un truc simple mais
   correct ».

   Elle se range sous le même intitulé que Taille et Couleur, pour que les trois blocs se
   lisent de la même façon. Mais elle ne se TOUCHE pas : une pastille grise et calme, là où
   une taille est un bouton qu'on choisit. Leur donner la même apparence ferait essayer de
   cliquer sur un rayon, et douter des tailles juste en dessous. */
.bo-rayon-pastille {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--bg-sec, #F3F4F6);
  color: var(--text-sec);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}

.product-detail .stock.out { color: var(--danger); }
.product-detail .stock.urgent {
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Options (size/color) */
.option-group {
  margin-top: 16px;
}

.option-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sec);
  margin-bottom: 8px;
}

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: all 0.15s;
}

.option-btn.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

/* « RETOUR / COMMANDER » FLOTTE AU-DESSUS DE LA PASTILLE (13 octobre 2026).
   La barre était posée à 56 px du bas : la hauteur de l'ancienne navigation, collée au bord.
   Depuis que la navigation est une pastille flottante de 66 px, elle la CHEVAUCHAIT. Vu dans le
   simulateur iPhone : la barre couvrait le haut de la pastille, dont le bas dépassait dessous,
   vide. Dans un navigateur le chevauchement était de seize pixels, sur iPhone de trente-six.
   Elle prend la forme de la pastille (mêmes marges, même ombre, pas de filet) et se pose huit
   pixels au-dessus d'elle, comme les barres à boutons de Manage. */
.add-bar {
  position: fixed;
  bottom: var(--bo-sur-la-pastille);
  left: calc(var(--bo-gauche) + 10px);
  transform: none;
  width: calc(min(var(--bo-cadre), 100vw) - 20px);
  max-width: calc(var(--bo-cadre) - 20px);
  background: var(--surface);
  padding: 10px 12px;
  border-radius: 26px;
  box-shadow: 0 6px 24px rgba(17, 12, 24, 0.14);
  z-index: 101;
}
/* La fiche garde de l'air sous elle : la barre et la pastille empilées sont plus hautes que la
   réserve ordinaire, et le dernier choix (taille, couleur) passait derrière « Commander ». */
body:has(#addBar) { padding-bottom: calc(var(--bo-sur-la-pastille) + 96px); }

.add-bar-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.add-bar-row .btn-primary {
  flex: 1;
}

.btn-back-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

.btn-back-cat:active {
  background: var(--primary-light);
}

.btn-primary {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary:active:not(:disabled) { background: var(--primary-dark); }

/* Cart page */
.cart-page { padding: 20px; padding-bottom: 200px; }

.cart-page h1 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.cart-item .thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #F3F4F6;
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item .thumb img,
.cart-item .thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain; background: #000;
}

.cart-item .details { flex: 1; }
.cart-item .item-name { font-size: 14px; font-weight: 600; }
.cart-item .item-meta { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.cart-item .item-price { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 4px; }

/* Badge stock dans le panier — meme UI que l'accueil */
.cart-item .stock-badge { font-size: 10px; color: var(--success); margin-top: 4px; }
.cart-item .stock-badge.out { color: var(--danger); }
.cart-item .stock-badge.urgent {
  font-size: 11px;
  font-weight: 800;
  color: #E00000;
  background: #FFFF00;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

/* +/- et bouton supprimer sur la meme ligne, a droite */
.cart-item .cart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
}
.cart-item .cart-actions .qty-row { margin-top: 0; }

.cart-item .qty-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F3F4F6;
  border-radius: 999px;
  padding: 3px;
  margin-top: 6px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 0.1s;
}
.qty-btn:active { transform: scale(0.9); }

.qty-val { font-size: 14px; font-weight: 700; min-width: 26px; text-align: center; }

.cart-item .remove-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.cart-item .remove-btn:active { transform: scale(0.9); }

/* Cart total */
.cart-total {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}

.cart-total .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cart-total .row.total {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
}

/* Order form */
.order-form {
  margin-top: 20px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}

.order-form h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--bg);
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Payment options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.payment-option.selected {
  border-color: var(--success, #27AE60);
  background: #E8F8F0;
}

.payment-option input[type="radio"] {
  display: none;
}

.payment-icon {
  font-size: 24px;
  width: 36px;
  text-align: center;
}

.payment-info {
  display: flex;
  flex-direction: column;
}

.payment-info strong {
  font-size: 13px;
  color: #333;
}

.confirmation-recap {
  background: #F5F3FA;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  text-align: left;
}

.confirmation-recap p {
  margin: 4px 0;
  font-size: 13px;
  color: #555;
}

/* Confirmation */
.confirmation {
  text-align: center;
  padding: 40px 20px;
}

.confirmation .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #DCFCE7;
  color: var(--success);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirmation h2 { font-size: 20px; font-weight: 800; }
.confirmation p { font-size: 14px; color: var(--text-sec); margin-top: 8px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

/* Loading */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Error banner */
.error-banner {
  position: fixed;
  top: 0;
  left: var(--bo-gauche);
  transform: none;
  width: 100%;
  max-width: var(--bo-cadre);
  background: var(--danger);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: none; } }
.error-msg { flex: 1; }
.error-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.error-detail-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.error-close {
  background: none;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.error-modal-overlay {
  position: fixed;
  /* MÊME RÈGLE QUE `.welcome-overlay` : le voile s'arrête au cadre téléphone. Un voile
     qui couvre la fenêtre entière sort la boutique de son téléphone. */
  top: 0; bottom: 0;
  left: var(--bo-gauche);
  width: min(var(--bo-cadre), 100vw);
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.error-modal {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
}
.error-modal h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--danger);
}
.error-modal-detail {
  background: #FEE2E2;
  color: #7F1D1D;
  padding: 12px;
  border-radius: 8px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow: auto;
  margin-bottom: 12px;
}
.error-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.error-modal-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy { background: var(--primary); color: #fff; border: none; }
.btn-close { background: #E5E7EB; color: var(--text); border: none; }

/* Index page */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  text-align: center;
}

.landing .logo {
  width: 240px;
  height: 240px;
  border-radius: 32px;
  object-fit: contain;
  margin-bottom: 16px;
}

.landing .brand {
  font-size: 36px;
  font-weight: 900;
}

.landing .brand span { color: var(--primary); }

.landing .subtitle {
  font-size: 17px;
  color: var(--text-sec);
  margin-top: 8px;
}

.gold-icon {
  color: #2E8B3C;
  font-weight: 900;
  font-size: 1em;
  vertical-align: baseline;
  margin: 0 2px;
}

.landing .search-box {
  margin-top: 32px;
  width: 100%;
}

.landing .search-box input,
.landing .search-box select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  background: var(--surface);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}

.landing .search-box select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.landing .search-box input:focus,
.landing .search-box select:focus {
  outline: none;
  border-color: var(--primary);
}

.landing .search-box button {
  width: 100%;
  margin-top: 12px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: var(--bo-gauche);
  transform: none;
  background: var(--text);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 300;
  animation: fadeInUp 0.3s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Build info badge */
.build-info {
  position: absolute;
  bottom: 4px;
  right: 8px;
  z-index: 5;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  color: #000; /* n° de build en NOIR */
  background: rgba(255,255,255,0.9); /* chip clair -> noir net et lisible sur header sombre */
  padding: 1px 5px;
  border-radius: 4px;
  opacity: 1;
}

.build-info .dev-badge {
  color: #90EE90;
  font-weight: 800;
}

/* ─── La navigation du bas FLOTTE, comme dans Manage (JM, le 12 octobre 2026) ───────────
   « Le même sticky footer flottant », et dans le style de BoutiqueOuf : une pastille posée
   SUR la page, détachée des bords, dont la seule bordure est sa courbe. Plus de filet gris en
   haut, plus de bande collée au bord : la page passe dessous, et la barre d'accueil de
   l'iPhone reste visible sous la pastille.
   `env(safe-area-inset-bottom)` vaut zéro dans un navigateur d'ordinateur : la barre y descend
   simplement à six pixels du bas, et rien d'autre ne change. */
.footer-nav {
  position: fixed;
  bottom: var(--bo-pastille-bas);
  left: calc(var(--bo-gauche) + 10px);
  transform: none;
  width: calc(min(var(--bo-cadre), 100vw) - 20px);
  max-width: calc(var(--bo-cadre) - 20px);
  background: var(--surface);
  border-top: 0;
  /* LES MÊMES COTES QUE LA PASTILLE DE MANAGE (JM, le 12 octobre 2026 : « celle-là est un peu
     trop longue dans le bas, fais-la pareil que celle de Manage ») : 66 px de haut, et son
     rayon vaut la moitié. Le contenu se centre dedans au lieu de la faire grandir. */
  height: 66px;
  border-radius: 33px;
  box-shadow: 0 6px 24px rgba(17, 12, 24, 0.14);
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  z-index: 100;
}

.footer-nav a {
  /* CHAQUE CASE PREND TOUTE LA HAUTEUR DE LA PASTILLE, et centre son icone et son mot dedans
     (JM, le 12 octobre 2026 : « la taille est bonne, juste que les icones ne sont pas centrés
     a l'interieur »). Avec un simple rembourrage, la colonne icone + mot se posait en haut de
     la pastille et laissait un creux dessous. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  /* ── LES QUATRE CASES ONT LA MÊME LARGEUR ─────────────────────────────────────────────
     JM, le 20 octobre 2026 : « regarde les icônes accueil commandes, regarde comme ils ne
     sont pas centrés dans le footer ».

     Chaque case prenait la largeur de SON MOT. Mesuré à 402 px : 69, 96, 63 et 52 px, posés
     par `space-around`. Les centres tombaient à 50,8 / 165,9 / 277,8 / 367,7 — des écarts de
     115, 112, puis 90. « Plus », le mot le plus court, se retrouvait collé à « Panier ».
     Chaque icône était bien centrée dans sa case ; c'est la case qui était fausse.

     `flex: 1 1 0` : la largeur du mot ne compte plus, les quatre cases se partagent la
     pastille en parts égales, et le centre de chacune tombe au quart, aux trois huitièmes,
     etc. `min-width: 0` pour qu'un mot long rétrécisse au lieu de pousser les autres. */
  flex: 1 1 0;
  min-width: 0;
  gap: 2px;
  font-size: 10px;
  color: #4b5563;
  /* Plus de rembourrage latéral : il mordait sur la part de la case voisine. */
  padding: 0 4px;
  text-decoration: none;
  position: relative;
}

.footer-nav a.active {
  color: var(--primary);
  font-weight: 700;
}

.footer-nav .nav-icon {
  font-size: 22px;
}

/* Posée sur la barre du bas, qui est blanche — d'où le liseré blanc.
   Taille, rayon, couleur : voir la géométrie commune en haut du fichier. */
.footer-nav .cart-count {
  position: absolute;
  top: 0;
  right: 4px;
  display: none;
  --badge-bordure: #fff;
}

/* ── UNE SEULE RÉSERVE POUR LE PIED, ET C'EST SA VRAIE TAILLE ──────────────────────────
   La pastille flotte au-dessus de la page : on lui réserve sa place, sinon le dernier élément
   de chaque page se cacherait dessous.

   JM, le 21 octobre 2026 : « il y a un espace entre Retour / Continuer de la page À propos de
   l'application et le footer, retire cet espace ».

   LE 120 px ÉTAIT FAUX, ET IL NE L'ÉTAIT QUE SUR TÉLÉPHONE. Il datait de la barre collée au
   bord. La pastille, elle, mesure 66 px et flotte à `--bo-pastille-bas` du bas : sa place vaut
   `--bo-sur-la-pastille`, soit 80 px dans un navigateur et 100 px sur un iPhone 17 Pro. On en
   réservait 154 — 54 px de vide sous le dernier élément de CHAQUE page, invisibles sur un
   ordinateur (où l'encart vaut zéro et l'écart tombe à 40 px) et bien visibles sur le
   téléphone, juste au-dessus du pied.

   La variable est la MÊME que celle dont se sert la barre d'ajout du produit (`body:has(#addBar)`
   plus haut) et tout ce qui se pose « au-dessus de la pastille » : une seule définition, en haut
   de ce fichier, et le jour où la pastille change de taille rien d'autre n'est à relire. */
body { padding-bottom: var(--bo-sur-la-pastille); }

/* ── AUCUNE BARRE DE DÉFILEMENT, NULLE PART ──────────────────────────────────────────────
   Un téléphone n'en montre jamais : le contenu glisse sous le doigt, point. Le navigateur,
   lui, colle sa barre grise sur tout ce qui déborde — elle mange une dizaine de pixels sur un
   cadre téléphone et, sur les carrousels, elle barre le bas des vignettes.
   Les trois déclarations couvrent les trois moteurs. Le défilement lui-même n'est PAS touché. */
::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* LE BLEU DU REMPLISSAGE AUTOMATIQUE (JM, le 7 octobre 2026, deux captures) : Chrome peint en bleu
   clair un champ qu'il a rempli tout seul. Dans la pilule du téléphone, le numéro devenait une
   case bleue aux coins carrés, et le nom et le prénom des pilules bleues. Le navigateur ne laisse
   pas retirer ce fond, seulement le faire attendre une éternité avant de l'appliquer. Même
   recette que Manage (app/+html.tsx). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text, #1a1a2e);
  transition: background-color 99999s ease-in-out 0s;
}