/* ================================================================
   AGLINK ("Tout connecté, tout simple !") — Système de design du
   Portail général. Assumé comme une plateforme Action Groupe qui
   accueille aussi d'autres entreprises (pas de neutralité de marque
   recherchée ici, choix confirmé avec l'utilisateur). Chargé APRÈS
   variables.css et base.css : redéfinit les mêmes jetons (--green,
   --gold, --dark, --gray, --text, --font-head, --font-body...) pour
   ces deux pages SEULEMENT — boutique.html et le reste du site
   institutionnel ne chargent pas ce fichier et restent inchangés.
   Ça permet de réutiliser gratuitement .btn/.field/.badge/.card/
   .modal-overlay de base.css déjà bien faits, sans recopier leur
   logique.
   ================================================================ */

:root {
  /* ---- Identité Ledjoula (2026-09-22) : marine #092C64 et orange
     #FD6F01 relevés au pixel sur le logo — les mêmes valeurs que
     login.html. Elles remplacent l'ancienne identité ALink (terracotta
     et bleu-vert). Ces variables ne s'appliquent qu'aux pages qui
     chargent ce fichier. ---- */
  --green:       #FD6F01;  /* accent principal — orange Ledjoula */
  --green-dark:  #D45E12;
  --green-mid:   #FF8A33;  /* orange éclairci : lisible sur fond marine */
  --green-light: #FFF1E6;
  --gold:        #092C64;  /* accent secondaire — marine Ledjoula (confiance, vérifié) */
  --gold-light:  #E9EFF9;
  --red:         #D93E3E;
  --red-light:   #FBEAEA;

  --dark:        #051937;  /* marine profond (héros, footer) */
  --dark2:       #092C64;
  --gray:        #F5F6FA;  /* fond papier froid */
  --gray2:       #E3E6EF;
  --white:       #FFFFFF;

  --text:        #171B2E;
  --text2:       #565B72;
  --text3:       #8A8FA3;

  --radius:    10px;
  --radius-lg: 18px;

  --shadow:    0 2px 20px rgba(5,25,55,0.06);
  --shadow-lg: 0 16px 48px rgba(5,25,55,0.14);

  --font-head: 'Sora', sans-serif;
  --font-body: 'Work Sans', sans-serif;
}

body { background: var(--gray); }

/* ================================================================
   NAV — bandeau propre au portail (pas de components/nav.js, qui
   est branded Action Groupe et non pertinent pour une marque neutre)
   ================================================================ */
.po-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--white); border-bottom: 1px solid var(--gray2);
  height: 72px; display: flex; align-items: center;
}
.po-nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* CORRIGÉ (2026-08-02, signalé : « le logo est étiré en mobile ») — la nav
   est un conteneur flex ; sans flex-shrink:0 le bloc logo se comprimait sur
   écran étroit et écrasait l'image en largeur. object-fit:contain garantit
   en plus qu'aucune contrainte future ne puisse la déformer.
   La taille est fixée ici (et non plus en style inline dans chaque page)
   pour qu'elle puisse diminuer sur petit écran — un style inline aurait
   toujours gagné sur la media query. */
.po-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--text); flex-shrink: 0; }
/* max-width:none est INDISPENSABLE : css/base.css pose un reset global
   `img { max-width:100%; height:auto; }`. C'est lui que neutralisaient les
   anciens styles en ligne (un style inline gagne toujours sur une feuille).
   Le laisser actif rend le pourcentage indéterminé dans .po-logo — un
   conteneur flex dont la largeur dépend justement de cette image — et
   l'affichage part en vrille (constaté le 2026-08-02). */
.po-logo img { height: 64px; width: auto; max-width: none; object-fit: contain; display: block; }
.po-footer .po-logo img { height: 32px; }
.po-logo .mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--dark);
  display: flex; align-items: center; justify-content: center; color: var(--green-mid); font-size: 17px; flex-shrink: 0;
}
.po-logo .num { color: var(--green); }
/* Slogan + devise dans la barre (2026-09-06, demande utilisateur).
   Le slogan est agrandi (11 → 14px) et la devise vient juste dessous en
   accent : les deux lignes tiennent dans la hauteur du logo (64px), la
   barre ne grandit donc pas. Masqué sous 720px comme avant — la place y
   revient au logo et aux actions. */
.po-nav-tag { display: none; border-left: 1px solid var(--gray2); padding-left: 14px; line-height: 1.25; }
@media (min-width: 720px) { .po-nav-tag { display: flex; flex-direction: column; gap: 3px; } }
.po-nav-slogan { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text2); }
.po-nav-devise { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--green); }
.po-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.po-cart-btn {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--dark); color: #fff; border: none; border-radius: 999px;
  padding: 9px 16px 9px 14px; font-family: var(--font-head); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: transform .15s, background .15s;
}
.po-cart-btn:hover { background: var(--dark2); transform: translateY(-1px); }
.po-cart-btn .cart-count {
  background: var(--green); color: #fff; border-radius: 50%;
  width: 19px; height: 19px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.po-account-btn {
  display: flex; align-items: center; gap: 7px; background: var(--white); color: var(--text);
  border: 1.5px solid var(--gray2); border-radius: 999px; padding: 8px 15px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.po-account-btn:hover { border-color: var(--green); color: var(--green); }
.po-account-btn i { color: var(--text3); }
/* Entrée entreprise (2026-08-05) — même gabarit que « Se connecter » pour ne
   pas déséquilibrer la barre, mais teintée : c'est une intention différente
   (vendre, pas acheter), et elle doit se repérer sans lire le libellé. */
.po-vendre-btn { border-color: var(--green-light); color: var(--green-dark); background: var(--green-light); }
.po-vendre-btn i { color: var(--green-dark); }
.po-vendre-btn:hover { border-color: var(--green); background: #fff; }
/* Sous 900 px la barre porte déjà logo + 3 actions : le libellé le plus long
   s'efface en premier, l'icône seule reste explicite. */
@media (max-width: 900px) { .po-vendre-btn .lbl { display: none; } }
/* Menu compte (2026-08-02, demande utilisateur : « quand on clique sur le
   profil, la déconnexion se présente »). Le bouton devient un déclencheur
   de menu UNIQUEMENT une fois connecté ; déconnecté, il reste un simple
   lien vers la page de connexion. */
.po-account-wrap { position: relative; display: flex; }
.po-account-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 950;
  background: var(--white); border: 1px solid var(--gray2); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(5,25,55,.16); min-width: 200px; overflow: hidden;
}
.po-account-wrap.open .po-account-menu { display: block; }
.po-account-menu .who {
  padding: 11px 14px; border-bottom: 1px solid var(--gray2);
  /* --text3 sur blanc ne donnait que 3,21:1 : même défaut que les titres de
     groupe du menu latéral (voir css/app.css), corrigé le même jour.
     Couleur seule, taille inchangée. */
  font-size: 11px; color: var(--text2); line-height: 1.45;
}
.po-account-menu .who strong { display: block; font-family: var(--font-head); font-size: 13px; color: var(--text); }
.po-account-menu a, .po-account-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  color: var(--text); text-decoration: none;
}
.po-account-menu a:hover, .po-account-menu button:hover { background: var(--gray); }
.po-account-menu .danger { color: var(--red, #cc0000); }
.po-account-menu .danger i { color: var(--red, #cc0000); }
/* Sur petit écran, la nav doit rester lisible : on masque le libellé du
   bouton compte et on ne garde que l'icône. */
@media (max-width: 560px) {
  .po-logo img { height: 40px; }
  .po-nav-inner { padding: 0 14px; gap: 10px; }
  .po-account-btn { padding: 9px 11px; }
  .po-account-btn .lbl { display: none; }
  .po-cart-btn { padding: 9px 12px; }
  .po-cart-btn .lbl { display: none; }
}

/* ================================================================
   HERO — grille agrégée
   ================================================================ */
.po-hero {
  /* CLAIR depuis le 2026-09-10 (demande utilisateur : « au lieu d'un fond
     sombre »). La couleur vient maintenant des trois scènes ; le fond se
     contente de les porter. */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gray) 100%);
  padding: var(--po-hero-haut) 24px 0;
  /* La photo de la bannière remonte de cette hauteur pour aller jusque
     sous l'en-tête : une seule valeur, deux endroits (2026-09-20). */
  --po-hero-haut: 112px;
  position: relative; overflow: hidden;
}
.po-hero-inner { max-width: 1240px; margin: 0 auto; padding-bottom: 46px; position: relative; z-index: 1; }
/* Le message de la bannière est désormais posé sur la photo : tout y passe
   en clair (2026-09-20). Les chiffres plus bas, eux, restent sur le fond
   clair et gardent leurs couleurs. */
.po-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.26);
  color: #fff; border-radius: 999px; padding: 6px 14px; backdrop-filter: blur(3px);
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 20px;
}
.po-hero-eyebrow i { color: var(--green-mid); }
.po-hero h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.02em;
  color: #fff; max-width: 16ch; text-shadow: 0 2px 22px rgba(0,0,0,.42);
}
/* La terracotta de la marque s'éteint sur du noir : sa version claire. */
.po-hero h1 .accent { color: var(--green-mid); }
.po-hero p {
  font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,.86);
  max-width: 46ch; margin-top: 16px; line-height: 1.65; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.po-hero-stats { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.po-hero-stat .n { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.po-hero-stat .l { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 5px; }

/* Bandeau confiance (chevauche le bas du hero) */
.po-trust {
  max-width: 1240px; margin: -30px auto 0; padding: 0 24px; position: relative; z-index: 2;
}
.po-trust-inner {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 18px 26px; display: flex; gap: 26px; flex-wrap: wrap; align-items: center;
}
.po-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text2); font-weight: 600; }
.po-trust-item i { color: var(--gold); font-size: 16px; }

/* ================================================================
   SLIDER — carrousel de produits vedettes (un par entreprise si
   possible), sous le bandeau de confiance
   ================================================================ */
.po-slider-wrap { max-width: 1240px; margin: 40px auto 0; padding: 0 24px; }
.po-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--white); }
.po-slider-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.po-slide { min-width: 100%; display: flex; align-items: stretch; cursor: pointer; }
.po-slide-text { flex: 1; padding: 34px 40px; display: flex; flex-direction: column; justify-content: center; gap: 11px; min-width: 0; }
.po-slide-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: var(--green-light); color: var(--green-dark); border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-head); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.po-slide-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(19px,2.4vw,27px); color: var(--text); line-height: 1.25; }
.po-slide-seller { font-size: 12.5px; color: var(--text2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.po-slide-seller i { color: var(--gold); }
.po-slide-price { font-family: var(--font-head); font-size: 25px; font-weight: 800; color: var(--text); }
.po-slide-price span { font-size: 11px; color: var(--text3); font-weight: 500; font-family: var(--font-body); }
.po-slide-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--dark); color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700; padding: 11px 20px; cursor: pointer;
  transition: background .15s; margin-top: 4px;
}
.po-slide-cta:hover { background: var(--green); }
.po-slide-imgwrap { width: 380px; flex-shrink: 0; position: relative; overflow: hidden; background: var(--gray); }
.po-slide-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.po-slide-imgwrap i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.po-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(23,27,46,.55);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(3px); transition: background .15s;
}
.po-slider-arrow:hover { background: rgba(23,27,46,.85); }
.po-slider-arrow.prev { left: 14px; }
.po-slider-arrow.next { right: 14px; }
.po-slider-dots { display: flex; justify-content: center; gap: 7px; padding: 14px 0 0; }
.po-slider-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray2); border: none; cursor: pointer; padding: 0; transition: all .2s; }
.po-slider-dot.active { background: var(--green); width: 20px; border-radius: 4px; }
@media (max-width: 720px) {
  .po-slide { flex-direction: column; }
  .po-slide-text { padding: 24px; order: 2; }
  .po-slide-imgwrap { width: 100%; height: 180px; order: 1; }
}

/* ================================================================
   PRODUITS POPULAIRES — même carte que la grille, en plus grand
   ================================================================ */
.po-popular { max-width: 1240px; margin: 44px auto 0; padding: 0 24px; }
.po-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.po-section-head h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(19px,2.2vw,24px); color: var(--text); }
.po-section-head .sub { font-size: 12px; color: var(--text3); font-weight: 500; }
.po-popular-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 22px; }
.po-card.big .po-card-img { height: 240px; }
.po-card.big .po-card-body { padding: 18px; }
.po-card.big .po-name { font-size: 15.5px; margin-bottom: 6px; }
.po-card.big .po-desc { font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.po-card.big .po-price { font-size: 22px; }
.po-card.big .po-card-footer { padding: 0 18px 18px; }
.po-divider { max-width: 1240px; margin: 46px auto 0; padding: 0 24px; }
.po-divider .po-section-head { margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--gray2); }

/* ================================================================
   FILTER BAR
   ================================================================ */
.po-filters {
  background: var(--white); border-bottom: 1px solid var(--gray2);
  /* 16 → 12 : la barre est collante, chaque pixel qu elle prend est pris au
     catalogue (2026-09-28, « la zone de filtre fixe prend trop de place »). */
  padding: 12px 24px; position: sticky; top: 72px; z-index: 100;
}
.po-filters-row1 { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.po-search { flex: 1; min-width: 200px; position: relative; }
.po-search input {
  width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--gray2);
  border-radius: 999px; font-size: 13px; font-family: var(--font-body); outline: none; background: var(--gray);
  transition: border-color .15s, background .15s;
}
.po-search input:focus { border-color: var(--green); background: var(--white); }
.po-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text3); }
.po-sort {
  padding: 9px 14px; border: 1.5px solid var(--gray2); border-radius: 999px;
  font-size: 12px; color: var(--text2); background: var(--white); outline: none;
  font-family: var(--font-head); font-weight: 600; cursor: pointer;
}
.po-filters-row2 { max-width: 1240px; margin: 10px auto 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-filters-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-family: var(--font-head); margin-right: 4px; }
.po-chip {
  padding: 7px 15px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  font-family: var(--font-head); cursor: pointer; border: 1.5px solid var(--gray2);
  background: var(--white); color: var(--text2); transition: all .15s; white-space: nowrap;
}
.po-chip:hover { border-color: var(--green); color: var(--green); }
.po-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.po-chip.ent.active { background: var(--gold); border-color: var(--gold); }

/* ── Lignes de filtres (2026-09-17) ──
   Retour utilisateur : la zone « met du temps à charger et on n'arrive pas à
   distinguer ». Trois lignes qui se ressemblaient (même pastille, même libellé
   gris de 10 px) : chaque ligne a maintenant sa FORME, son libellé lisible
   dans une colonne fixe, et des pastilles grises le temps du chargement. */
.po-frow {
  max-width: 1240px; margin: 0 auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--gray2);
}
.po-filters-row1 + .po-frow { margin-top: 8px; }

/* REPLIER LA ZONE DE FILTRES — une seule classe pour les deux tailles
   d'écran. Il y en avait deux, de polarité opposée (.compacte au
   défilement, :not(.deplie) au doigt) : dès qu'un même bouton commande les
   deux, elles se contredisent. « replie » dit l'état, d'où qu'il vienne —
   du bouton, du défilement, ou du choix retenu de la dernière visite.
   La première ligne (recherche, ville, tri) ne se replie jamais : une
   barre qui disparaît entièrement ne se retrouve plus. */
.po-filters.replie .po-frow { display: none; }
.po-flabel {
  width: 104px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding-top: 7px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2); font-family: var(--font-head);
}
.po-flabel i { font-size: 15px; color: var(--text3); }
.po-fchips { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Type d'article : un sélecteur segmenté, un seul choix possible. */
.po-seg { display: inline-flex; background: var(--gray); border: 1px solid var(--gray2); border-radius: 999px; padding: 3px; gap: 2px; }
.po-seg-btn {
  padding: 6px 15px; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  font-family: var(--font-head); color: var(--text2); white-space: nowrap; transition: background .15s, color .15s;
}
.po-seg-btn:hover { color: var(--text); }
.po-seg-btn.active { background: var(--text); color: #fff; }

/* Promo Djoula : rouge promo, repérable d'un coup d'œil. */
.po-chip-promo { border-color: #F5C2C3; color: #E5484D; background: #FFF5F5; display: inline-flex; align-items: center; gap: 5px; }
.po-chip-promo:hover { border-color: #E5484D; color: #E5484D; }
.po-chip-promo.active { background: #E5484D; border-color: #E5484D; color: #fff; }
.po-chip-promo b { font-weight: 800; }

/* Catégories : des étiquettes, pas des pastilles. */
.po-fchips-cat .po-chip { border-radius: 8px; padding: 6px 12px; }
.po-fchips-cat .po-chip.active { background: var(--green-light, #e8f5ee); color: var(--green); border-color: var(--green); }

/* En attendant le catalogue. */
.po-chip-sq {
  display: inline-block; width: 92px; height: 31px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gray) 25%, var(--gray2) 50%, var(--gray) 75%);
  background-size: 200% 100%; animation: poChipSq 1.2s linear infinite;
}
.po-fchips-cat .po-chip-sq { border-radius: 8px; width: 80px; }
@keyframes poChipSq { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .po-chip-sq { animation: none; } }

/* Téléphone : une ligne qui défile au doigt plutôt que des lignes empilées
   qui mangent l'écran sous la barre collante. */
/* Le bouton « Filtres » commande le repli sur TOUS les écrans (2026-09-28).
   Sur grand écran la barre se repliait déjà seule au défilement, mais rien
   ne permettait de la rouvrir sur place, ni de la fermer quand on le veut. */
.po-filtres-bouton {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: 1.5px solid var(--gray2); border-radius: 999px; background: var(--white);
  font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--text2);
  cursor: pointer;
}
.po-filtres-bouton i { font-size: 15px; }
/* La flèche dit dans quel sens le bouton va : vers le haut quand la barre
   est ouverte (« referme-moi »), vers le bas quand elle est repliée. */
.po-filtres-fleche { margin-left: 2px; transition: transform .22s ease; }
.po-filters.replie .po-filtres-fleche { transform: rotate(180deg); }
.po-filtres-compte {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
/* `display` posé ci-dessus bat la feuille du navigateur : sans cette ligne,
   l'attribut `hidden` que pose poMajCompteFiltres() ne masque rien et la
   pastille affiche « 0 » en permanence. Vu le 2026-09-29, quand le bouton
   est passé sur les grands écrans et que la pastille s'est mise à suivre
   partout. */
.po-filtres-compte[hidden] { display: none; }

@media (max-width: 700px) {
  /* La barre montait à 267 px sur un écran de 800, soit un tiers avant le
     premier article : la recherche et le bouton restent, le reste s ouvre à
     la demande. */
  .po-filters { padding: 10px 14px; }
  /* Au doigt, le tri part aussi dans le repli : la première ligne ne garde
     que la recherche, la ville et le bouton. */
  .po-filters.replie .po-sort { display: none; }
  .po-frow { align-items: center; gap: 8px; padding: 7px 0; }
  .po-flabel { width: auto; min-width: 0; padding-top: 0; font-size: 10px; }
  .po-flabel i { display: none; }
  .po-fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px; }
  .po-fchips::-webkit-scrollbar { display: none; }
  .po-fchips > * { flex-shrink: 0; }
}

/* ================================================================
   PRODUCT GRID
   ================================================================ */
.po-layout { max-width: 1240px; margin: 0 auto; padding: 30px 24px 60px; }
.po-result-info { font-size: 12px; color: var(--text3); margin-bottom: 16px; font-weight: 600; }
.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 20px; }

.po-card {
  background: var(--white); border: 1px solid var(--gray2); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.po-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }

.po-seller {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-bottom: 1px solid var(--gray2); background: var(--gray);
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700; color: var(--text2);
  text-decoration: none; transition: color .15s;
}
.po-seller:hover { color: var(--green); }
.po-seller .av {
  width: 20px; height: 20px; border-radius: 6px; object-fit: contain; background: #fff;
  border: 1px solid var(--gray2); flex-shrink: 0;
}
.po-seller i { color: var(--text3); font-size: 13px; }

.po-card-img { height: 168px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.po-card-img img { width: 100%; height: 100%; object-fit: cover; }
.po-card-img i { font-size: 52px; }
.po-stock { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800; font-family: var(--font-head); padding: 4px 9px; border-radius: 999px; }
.po-stock.in   { background: rgba(255,255,255,.92); color: var(--gold); }
.po-stock.low  { background: rgba(255,255,255,.92); color: #B87A00; }
.po-stock.out  { background: rgba(255,255,255,.92); color: var(--red); }

.po-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.po-cat { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); font-family: var(--font-head); margin-bottom: 6px; }
.po-name { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-bottom: 5px; color: var(--text); }
.po-code { font-size: 10px; color: var(--text3); font-family: ui-monospace, monospace; margin-bottom: 10px; }
.po-desc { font-size: 11.5px; color: var(--text2); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.po-price { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text); }
.po-price-unit { font-size: 10px; color: var(--text3); font-weight: 500; font-family: var(--font-body); }
.po-card-footer { padding: 0 14px 14px; display: flex; gap: 8px; }
.po-btn-add {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--dark); color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 12px; font-weight: 700; padding: 11px; cursor: pointer;
  transition: background .15s;
}
.po-btn-add:hover { background: var(--green); }
.po-btn-add:disabled { background: var(--gray2); color: var(--text3); cursor: not-allowed; }
.po-btn-icon {
  width: 42px; height: 42px; border: 1.5px solid var(--gray2); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--text2); cursor: pointer;
  transition: all .15s; background: var(--white); flex-shrink: 0;
}
.po-btn-icon:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }

.po-empty { text-align: center; padding: 70px 20px; color: var(--text3); grid-column: 1/-1; }
.po-empty i { font-size: 52px; margin-bottom: 16px; display: block; color: var(--gray2); }
.po-empty p { font-size: 13px; }

/* ================================================================
   QTY SELECTOR
   ================================================================ */
.po-qty { display: flex; align-items: center; border: 1.5px solid var(--gray2); border-radius: var(--radius); overflow: hidden; }
.po-qty button { width: 32px; height: 32px; border: none; background: var(--gray); color: var(--text); font-size: 16px; cursor: pointer; font-family: var(--font-head); transition: background .15s; }
.po-qty button:hover { background: var(--green); color: #fff; }
.po-qty input { width: 42px; height: 32px; border: none; text-align: center; font-family: var(--font-head); font-size: 12px; font-weight: 700; background: var(--white); color: var(--text); outline: none; }

/* ================================================================
   DETAIL MODAL
   ================================================================ */
/* CORRIGÉ (2026-07-26, signalé par l'utilisateur) : z-index relevé au-dessus
   de .po-cart (2600) — le récapitulatif de commande (et le détail produit)
   s'ouvrent souvent DEPUIS le panier déjà ouvert ("Passer la commande"), et
   devaient donc toujours passer au-dessus de lui, jamais en-dessous. */
.po-overlay { display: none; position: fixed; inset: 0; background: rgba(5,25,55,.6); z-index: 2700; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); }
.po-overlay.open { display: flex; }
.po-detail { background: var(--white); border-radius: var(--radius-lg); max-width: 740px; width: 100%; max-height: 90vh; overflow-y: auto; animation: poIn .18s ease; }
@keyframes poIn { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform: none; } }
@media (min-width: 640px) { .po-detail { display: grid; grid-template-columns: 290px 1fr; } }
.po-detail-gallery { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--gray); }
@media (min-width: 640px) { .po-detail-gallery { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } }
.po-detail-img { height: 226px; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: #fff; overflow: hidden; }
.po-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.po-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.po-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; background: #fff; }
.po-thumb img { width: 100%; height: 100%; object-fit: cover; }
.po-thumb.active { border-color: var(--green); }
.po-detail-body { padding: 24px; }
.po-detail-close { border: none; background: var(--gray); width: 30px; height: 30px; border-radius: 50%; font-size: 16px; color: var(--text2); cursor: pointer; }
.po-detail-seller { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text2); font-family: var(--font-head); margin-bottom: 9px; cursor: pointer; }
.po-detail-seller:hover { color: var(--green); }
.po-detail-name { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin-bottom: 6px; line-height: 1.25; color: var(--text); }
.po-detail-price { font-size: 25px; font-weight: 800; color: var(--text); font-family: var(--font-head); margin-bottom: 12px; }
.po-detail-desc { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 14px; }
.po-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.po-spec { background: var(--gray); border-radius: var(--radius); padding: 10px 12px; }
.po-spec .l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-family: var(--font-head); margin-bottom: 3px; }
.po-spec .v { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-head); }
.po-qty-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; font-family: var(--font-head); }
.po-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px;
  background: #1F9E58; color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.po-btn-wa:hover { background: #178849; }
.po-btn-msg {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px;
  background: var(--green); color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
  text-decoration: none;
}
.po-btn-msg:hover { background: var(--green-dark); }
/* Spinner des boutons d'envoi (confirmerCheckout) — les trois pages du
   portail utilisaient déjà `animation:spin` sans que la keyframe existe
   nulle part : l'icône restait figée (2026-07-28). */
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   CART SIDEBAR
   ================================================================ */
.po-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(5,25,55,.5); z-index: 2500; }
.po-cart-overlay.open { display: block; }
.po-cart {
  position: fixed; right: 0; top: 0; bottom: 0; width: 400px; max-width: 96vw;
  background: var(--white); z-index: 2600; display: flex; flex-direction: column;
  box-shadow: -12px 0 50px rgba(5,25,55,.18); transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.po-cart.open { transform: translateX(0); }
.po-cart-head { padding: 20px 22px; border-bottom: 1px solid var(--gray2); display: flex; align-items: center; justify-content: space-between; }
.po-cart-head h3 { font-family: var(--font-head); font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.po-cart-close { border: none; background: var(--gray); width: 30px; height: 30px; border-radius: 50%; font-size: 15px; color: var(--text2); cursor: pointer; }
.po-cart-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.po-cart-group-label {
  font-family: var(--font-head); font-size: 10px; font-weight: 800; color: var(--gold);
  text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px;
  margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--gray2);
}
.po-cart-items > .po-cart-group-label:first-child { border-top: none; padding-top: 0; margin-top: 6px; }
.po-cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray); }
.po-cart-item-icon { width: 48px; height: 48px; border-radius: var(--radius); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.po-cart-item-name { font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--text); }
.po-cart-item-price { font-size: 11px; color: var(--text3); margin-top: 2px; }
.po-cart-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.po-cart-item-remove { border: none; background: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 2px; }
.po-cart-foot { padding: 18px 22px 22px; border-top: 2px solid var(--gray2); }
.po-cart-line { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; color: var(--text2); }
.po-cart-note { font-size: 10.5px; color: var(--text3); line-height: 1.55; margin-bottom: 12px; background: var(--gray); border-radius: var(--radius); padding: 9px 11px; }
.po-cart-total { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 15px; }
.po-cart-empty { text-align: center; padding: 60px 20px; color: var(--text3); }
.po-cart-empty i { font-size: 46px; margin-bottom: 12px; display: block; }
.po-btn-primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  background: var(--dark); color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.po-btn-primary:hover:not(:disabled) { background: var(--green); }
.po-btn-primary:disabled { background: var(--gray2); color: var(--text3); cursor: not-allowed; }
.po-btn-text { width: 100%; text-align: center; padding: 10px; background: none; border: none; color: var(--text2); font-family: var(--font-head); font-size: 12px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.po-btn-text:hover { color: var(--text); }

/* ================================================================
   CHECKOUT MODAL
   ================================================================ */
.po-checkout { background: var(--white); border-radius: var(--radius-lg); max-width: 560px; width: 100%; padding: 28px; animation: poIn .18s ease; max-height: 90vh; overflow-y: auto; }
.po-checkout-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.po-checkout-head h3 { font-family: var(--font-head); font-size: 17px; font-weight: 800; }
.po-recap-group { margin-bottom: 12px; }
.po-recap-label { font-family: var(--font-head); font-size: 10px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.po-recap-item { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--gray); font-size: 12.5px; color: var(--text2); }
.po-total-line { display: flex; justify-content: space-between; padding: 13px 0; font-family: var(--font-head); font-weight: 800; font-size: 16px; border-top: 2px solid var(--gray2); margin-top: 8px; }
.po-notice { background: var(--gold-light); color: #0A6656; border-radius: var(--radius); padding: 12px 14px; font-size: 11.5px; margin-top: 16px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.po-notice i { flex-shrink: 0; margin-top: 1px; color: var(--gold); }

/* ================================================================
   ENTREPRISE PROFILE HEADER (portail-entreprise.html)
   ================================================================ */
.po-ent-hero {
  background: var(--dark);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(46,107,209,0.22) 0%, transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 34px);
  padding: 118px 24px 40px;
}
.po-back { color: rgba(255,255,255,.6); font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-weight: 600; transition: color .15s; }
.po-back:hover { color: #fff; }
.po-ent-card { max-width: 1240px; margin: 0 auto; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.po-ent-logo { width: 92px; height: 92px; border-radius: var(--radius-lg); background: #fff; border: 3px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.po-ent-logo img { width: 100%; height: 100%; object-fit: contain; }
.po-ent-logo i { font-size: 40px; color: var(--dark); }
.po-ent-name { font-family: var(--font-head); font-size: clamp(22px,3vw,30px); font-weight: 800; color: #fff; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.po-verified { display: inline-flex; align-items: center; gap: 4px; background: var(--gold); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; font-family: var(--font-head); vertical-align: middle; }
.po-ent-slogan { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 4px; }
.po-ent-desc { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 10px; line-height: 1.65; max-width: 620px; }
.po-ent-contacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.po-ent-contact {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 14px;
  font-size: 11.5px; color: #fff; font-family: var(--font-head); font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.po-ent-contact:hover { background: rgba(255,255,255,.16); }
.po-ent-contact.wa { background: #1F9E58; border-color: #1F9E58; }
.po-ent-contact.wa:hover { background: #178849; }
.po-ent-contact i { color: var(--green-mid); }
.po-ent-contact.wa i { color: #fff; }
.po-not-found { max-width: 1240px; margin: 0 auto; text-align: center; padding: 40px 0; }
.po-not-found h1 { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.po-not-found p { color: rgba(255,255,255,.7); font-size: 13px; }
.po-not-found a { color: var(--green-mid); font-weight: 700; }

/* ================================================================
   FOOTER
   ================================================================ */
.po-footer { background: var(--dark); color: rgba(255,255,255,.6); padding: 44px 24px 24px; margin-top: 40px; }
.po-footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .po-footer-inner { grid-template-columns: 1fr; gap: 26px; } }
.po-footer .po-logo { color: #fff; margin-bottom: 10px; }
.po-footer p { font-size: 12.5px; line-height: 1.7; max-width: 42ch; }
.po-footer h4 { font-family: var(--font-head); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.po-footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.po-footer a { color: rgba(255,255,255,.6); font-size: 12.5px; text-decoration: none; transition: color .15s; }
.po-footer a:hover { color: #fff; }
.po-footer-bottom { max-width: 1240px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11.5px; color: rgba(255,255,255,.4); }

/* ================================================================
   ENTREPRISES VEDETTES (2026-08-06) — bandeau à rotation verticale
   ----------------------------------------------------------------
   Contrainte de départ : « un endroit qui va pas charger l'affichage
   ni déranger ». D'où une hauteur FIXE d'une seule carte, quel que
   soit le nombre d'entreprises mises en avant : six défilent dans la
   place qu'en occuperaient deux.
   La rotation est verticale pour ne pas répéter le carrousel
   horizontal des produits vedettes, juste au-dessus sur l'accueil.
   ================================================================ */
.po-vedettes { background: var(--white); border-bottom: 1px solid var(--gray2); }
.po-vedettes-inner {
  max-width: 1240px; margin: 0 auto; padding: 18px 24px 20px;
  display: flex; align-items: center; gap: 26px;
}
.po-vedettes-tete { flex-shrink: 0; width: 190px; }
.po-vedettes-titre {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--text);
}
.po-vedettes-titre i { color: var(--green); font-size: 18px; }
.po-vedettes-sub { display: block; font-size: 11.5px; color: var(--text3); margin-top: 3px; line-height: 1.45; }
.po-vd-dots { display: flex; gap: 5px; margin-top: 11px; }
.po-vd-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--gray2); transition: background .3s, width .3s;
}
.po-vd-dot.active { background: var(--green); width: 20px; border-radius: 999px; }

/* La fenêtre : hauteur d'UNE page, le reste de la piste déborde et se
   trouve masqué. C'est ce qui donne la rotation. */
.po-vedettes-vue { flex: 1; min-width: 0; height: 74px; overflow: hidden; }
.po-vedettes-piste {
  /* Sortie longue et douce : le `ease` par défaut laisse toujours un
     à-coup en fin de course, très visible sur un mouvement vertical. */
  transition: transform .75s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.po-vd-page {
  height: 74px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 14px;
  align-content: center;
}

.po-vd-carte {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--gray); border: 1.5px solid transparent; border-radius: var(--radius);
  padding: 11px 14px 11px 11px; min-width: 0;
  transition: border-color .2s, background .2s, transform .2s;
}
.po-vd-carte:hover { background: var(--white); border-color: var(--green); transform: translateY(-2px); }
/* Montée décalée des cartes de la page qui arrive : 60 ms d'écart suffisent
   à donner un mouvement vivant, au-delà ça devient une cascade qu'on
   attend. Uniquement sur la page active — animer les pages masquées
   ferait tourner des animations pour personne. */
.po-vd-page.active .po-vd-carte {
  animation: agVdEntree .55s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes agVdEntree {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

.po-vd-logo {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  background: var(--white); border: 1px solid var(--gray2);
  display: flex; align-items: center; justify-content: center;
}
.po-vd-logo img { width: 100%; height: 100%; object-fit: contain; }
.po-vd-initiale { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--green); }
.po-vd-corps { min-width: 0; flex: 1; }
.po-vd-nom {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-vd-meta { display: block; margin-top: 3px; }
.po-vd-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text2); }
.po-vd-note i { color: #E8A33D; font-size: 12px; }
.po-vd-note .n { font-weight: 500; color: var(--text3); }
.po-vd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text2);
}
.po-vd-tag.neuf { color: var(--gold); }
.po-vd-fleche { color: var(--text3); font-size: 15px; flex-shrink: 0; transition: transform .2s, color .2s; }
.po-vd-carte:hover .po-vd-fleche { color: var(--green); transform: translateX(3px); }

/* Un défilement automatique est un déclencheur connu de gêne vestibulaire :
   le réglage système coupe la rotation (côté JS) ET tout mouvement ici. */
@media (prefers-reduced-motion: reduce) {
  .po-vedettes-piste { transition: none; }
  .po-vd-page.active .po-vd-carte { animation: none; }
  .po-vd-carte:hover { transform: none; }
}

@media (max-width: 860px) {
  .po-vedettes-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px 18px; }
  .po-vedettes-tete { width: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .po-vedettes-sub { display: none; }
  .po-vd-dots { margin-top: 0; }
}

/* ================================================================
   MENU DU JOUR (2026-08-03) — spécialisation restaurant
   ----------------------------------------------------------------
   Volontairement traité comme un ENCART, et non comme une simple
   section de plus : le menu du jour est périssable et il doit se
   distinguer du catalogue permanent qui le suit immédiatement.
   D'où le fond marine, le seul de la page — l'orange est déjà pris
   par les boutons d'achat, et un troisième ton banaliserait tout.
   ================================================================ */
.po-menu-jour {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
  border-radius: 18px; padding: 24px 26px 26px;
  /* Ombre en encre neutre : `--gold-rgb` n'est pas redéfini dans ce fichier,
     il valait donc le marine de variables.css — incohérent avec le vert
     sarcelle qu'est `--gold` ici. */
  box-shadow: 0 10px 30px rgba(5, 25, 55, .22);
}
.po-menu-jour-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.po-menu-jour-titre {
  font-family: var(--font-head); font-weight: 800; font-size: 19px; color: #fff;
  display: flex; align-items: center; gap: 9px;
}
.po-menu-jour-titre i { color: var(--green-mid); font-size: 22px; }
.po-menu-jour-date {
  font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 4px;
  text-transform: capitalize; padding-left: 31px;
}
.po-menu-jour-pastille {
  background: var(--green); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
/* Les cartes de plats sont les cartes produit habituelles : même markup,
   même panier, mêmes avis. Seul le fond change autour d'elles — un client
   ne doit pas avoir à réapprendre comment on commande selon l'encart. */
.po-menu-jour .po-card { border-color: transparent; }
/* Prix du jour différent du prix carte : le prix barré est la seule façon de
   rendre l'offre lisible sans une ligne de texte en plus. */
.po-menu-jour-prix-carte {
  font-size: 12px; color: var(--text3); text-decoration: line-through; margin-left: 6px;
}
@media (max-width: 768px) {
  .po-menu-jour { padding: 18px 16px 20px; border-radius: 14px; }
  .po-menu-jour-titre { font-size: 17px; }
  .po-menu-jour-date { padding-left: 0; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .po-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .po-card-img { height: 128px; } .po-card-img i { font-size: 40px; }
  .po-layout { padding: 24px 16px 50px; }
  .po-cart { width: 100%; }
  .po-hero { --po-hero-haut: 112px; }
}
@media (max-width: 480px) {
  .po-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .po-card-body { padding: 10px; } .po-card-footer { padding: 0 10px 10px; }
  .po-name { font-size: 12px; } .po-price { font-size: 15px; }
  .po-hero-stats { gap: 22px; }
}


/* ════════════════════════════════════════════════════════════════════
   ACCUEIL ANIMÉ (2026-09-10)
   Voir js/portail_anim.js pour la mécanique et les garde-fous.
   Règle tenue partout ici : on n'anime que transform et opacity — à une
   exception assumée, le livreur de la scène Livraison, qui parcourt une
   piste de largeur inconnue à l'avance : translateX() se compte en % de
   l'élément (44 px), pas de la piste, et déraperait selon la fenêtre.
   « left » est ici le bon outil, et il ne coûte rien : l'élément est hors
   flux, seul son propre placement est recalculé.
   ════════════════════════════════════════════════════════════════════ */

/* ── Voile de couleur, FIXE ──
   La dérive animée précédente a été retirée : jugée « trop rapide, on ne
   comprend pas trop ». Sur fond clair et derrière une scène qui tourne
   déjà, un fond qui bouge en plus est du bruit. */
.po-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%,  rgba(253,111,1,0.10) 0%, transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(9,44,100,0.07) 0%, transparent 38%);
}

/* ── LA SCÈNE ──
   Les trois diapositives se superposent : seule l'active est opaque. Une
   hauteur minimale les empêche de s'effondrer, puisqu'elles sont hors flux. */
.po-hero-scene {
  position: relative; z-index: 1;
  min-height: clamp(330px, 33vw, 400px);
}
/* La bande sombre, elle, ne bouge jamais : pendant le fondu, les deux
   photos sont à demi opaques et le fond clair de la page apparaîtrait
   en transparence, le temps d'un clignement (2026-09-20). */
.po-hero-scene::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; width: 100vw; transform: translateX(-50%);
  /* Un peu de photo sous le bouton, sinon la bande s arrête à cinq pixels
     de lui et le cadrage paraît coupé. Les puces, elles, restent en dessous. */
  top: calc(-1 * var(--po-hero-haut)); bottom: -16px;
  background: var(--dark);
}
.po-scene-item {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease;
}
.po-scene-item.actif { opacity: 1; pointer-events: auto; }
.po-scene-texte h1 { margin: 0; }
/* Positionnés, donc peints APRÈS le fond qui l'est aussi : sans ces deux
   lignes, la photo recouvrirait le message et les maquettes. */
.po-scene-texte { position: relative; z-index: 2; }

/* ── LE FOND DE LA BANNIÈRE ──
   Pleine largeur d'écran (100vw) alors que le contenu reste dans ses
   1240 px, et remonté jusque sous l'en-tête. */
.po-scene-fond {
  position: absolute; z-index: 0; pointer-events: none; overflow: hidden;
  left: 50%; width: 100vw; transform: translateX(-50%);
  /* Un peu de photo sous le bouton, sinon la bande s arrête à cinq pixels
     de lui et le cadrage paraît coupé. Les puces, elles, restent en dessous. */
  top: calc(-1 * var(--po-hero-haut)); bottom: -16px;
}
/* LE VOILE — opaque sous le message, nul sur le dernier sixième. Les
   arrêts intermédiaires évitent la bande franche qu'un simple noir vers
   transparent laisse au milieu : l'œil lit la transition linéaire comme
   une arête. */
.po-scene-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Jamais opaque, même au plus noir : la photo doit transparaître sous
     le message (demandé le 2026-09-20). .80 tient le contraste du titre
     blanc tout en laissant lire ce qu'il y a derrière. */
  background: linear-gradient(90deg,
    rgba(8,10,20,.80) 0%, rgba(8,10,20,.75) 34%, rgba(8,10,20,.58) 50%,
    rgba(8,10,20,.33) 66%, rgba(8,10,20,.10) 83%, rgba(8,10,20,0) 95%);
}

/* ── UNE SCÈNE DESSINÉE plutôt que photographiée (2026-09-26) ──
   La scène Marketplace n'est plus une photo : c'est un dessin
   (assets/hero-vente.svg) qui porte son propre fond marine, la boutique
   dans le téléphone, le panier et la pastille « vendeur vérifié ».
   Deux conséquences :
     — le voile s'allège. À 80 % il éteignait le dessin, qui n'a pas
       besoin d'être assombri pour que le titre passe : le fond du dessin
       est déjà du marine profond ;
     — les maquettes de droite feraient doublon avec celles dessinées.
       Elles sont masquées en VISIBILITÉ, pas en display : la colonne doit
       garder sa largeur, sinon le texte s'étale sous le téléphone. */
.po-scene-dessin .po-scene-voile {
  background: linear-gradient(90deg,
    rgba(5,25,55,.72) 0%, rgba(5,25,55,.58) 34%, rgba(5,25,55,.34) 50%,
    rgba(5,25,55,.14) 66%, rgba(5,25,55,.04) 83%, rgba(5,25,55,0) 95%);
}
.po-scene-dessin .po-scene-vue { visibility: hidden; }
/* Le même dégradé que le fond du SVG, à l'identique : sur écran étroit le
   dessin passe en « contain » et ne remplit plus le cadre — sans ce fond
   jumeau, la jointure se verrait comme une bande. */
.po-scene-dessin .po-scene-fond {
  background: linear-gradient(90deg, #051937 0%, #082656 55%, #0B3272 100%);
}

.po-scene-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: var(--green); color: #fff; text-decoration: none;
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(253,111,1,.24);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.po-scene-cta:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(253,111,1,.32); }

/* ── LES ENTRÉES, une par module ──
   0,9 s, échelonnées de 120 ms. Le réglage précédent (0,7 s, 90 ms) était
   « trop rapide » : ici on voit l'entrée commencer ET finir. Chaque module
   arrive à sa manière — c'est ce qui distingue une présentation d'un
   diaporama. */
.po-scene-item.actif .po-scene-texte > *,
.po-scene-item.actif .po-scene-vue { animation: .9s cubic-bezier(.2,.7,.3,1) both; }
.po-scene-item.actif .po-scene-texte > *:nth-child(1) { animation-delay: .10s; }
.po-scene-item.actif .po-scene-texte > *:nth-child(2) { animation-delay: .22s; }
.po-scene-item.actif .po-scene-texte > *:nth-child(3) { animation-delay: .34s; }
.po-scene-item.actif .po-scene-texte > *:nth-child(4) { animation-delay: .46s; }
.po-scene-item.actif .po-scene-vue                    { animation-delay: .16s; }

/* Marketplace : tout s'approche. */
.po-scene-item[data-entree="zoom"].actif .po-scene-texte > * { animation-name: poTexteMonte; }
.po-scene-item[data-entree="zoom"].actif .po-scene-vue       { animation-name: poVueZoom; }
/* Gestion : l'écran se redresse. */
.po-scene-item[data-entree="monte"].actif .po-scene-texte > * { animation-name: poTexteGauche; }
.po-scene-item[data-entree="monte"].actif .po-scene-vue       { animation-name: poVueMonte; }
/* Livraison : ça arrive par la droite, comme la course. */
.po-scene-item[data-entree="cote"].actif .po-scene-texte > * { animation-name: poTexteMonte; }
.po-scene-item[data-entree="cote"].actif .po-scene-vue       { animation-name: poVueCote; }

@keyframes poTexteMonte  { from { opacity:0; transform: translate3d(0,16px,0); }  to { opacity:1; transform:none; } }
@keyframes poTexteGauche { from { opacity:0; transform: translate3d(-18px,0,0); } to { opacity:1; transform:none; } }
@keyframes poVueZoom     { from { opacity:0; transform: scale(.9); }              to { opacity:1; transform:none; } }
@keyframes poVueMonte    { from { opacity:0; transform: translate3d(0,34px,0); }  to { opacity:1; transform:none; } }
@keyframes poVueCote     { from { opacity:0; transform: translate3d(44px,0,0); }  to { opacity:1; transform:none; } }

/* ── Les puces ── */
.po-hero-puces { position: relative; z-index: 1; display: flex; gap: 9px; margin-top: 26px; }
.po-hero-puces button {
  width: 26px; height: 5px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--gray2); padding: 0; transition: background .25s, width .25s;
}
.po-hero-puces button.actif { background: var(--green); width: 40px; }

/* ── PHOTO + MAQUETTE ──
   La photo donne le contexte, la maquette dessus montre le produit. Ordre
   de peinture : photo (0), voile (1), maquettes (2). Sans z-index sur les
   maquettes, le ::after du cadre — généré en dernier enfant — passerait
   PAR-DESSUS elles et les délaverait. */
/* La vue ne porte plus la photo (elle est passée en fond de bannière) :
   il ne lui reste que les maquettes, qu'elle continue de placer en %. */
.po-scene-vue {
  position: relative; z-index: 2; margin: 0; min-height: 300px;
}
.po-scene-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block;
}
/* L'ancien voile en diagonale, qui protégeait les maquettes à l'intérieur
   de la carte, a été retiré le 2026-09-20 : le voile de la bannière fait
   ce travail, et le doubler noircissait la photo pour rien. */

/* L'image se pose : elle arrive légèrement agrandie et se stabilise en 8 s.
   Assez lent pour qu'on ne « voie » pas le mouvement, assez présent pour
   que la photo ne soit pas une carte postale collée. */
.po-scene-item.actif .po-scene-photo { animation: poPhotoPose 8s ease-out both; }
@keyframes poPhotoPose {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.po-mock {
  position: absolute; z-index: 2;
  background: var(--white); border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(10,14,30,.34);
}
.po-mock-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: 7px 13px; font-family: var(--font-head); font-size: 11px; font-weight: 700;
  color: var(--text2); box-shadow: 0 8px 22px rgba(10,14,30,.32); white-space: nowrap;
}
.po-mock-chip b { color: var(--text); }

/* 1. Marketplace */
.po-mock-carte { left: 7%; top: 10%; width: 178px; padding: 12px; }
/* La vignette reprend un morceau de la photo de la scène : une carte
   produit au cadre gris vide, posée sur une vraie photo, se lit comme une
   image qui n'a pas chargé. Aucune requête de plus, le fichier est déjà là. */
.po-mock-img {
  height: 96px; border-radius: 10px;
  background: var(--gray) url('../assets/hero-marketplace.jpg') 62% 58% / 260% no-repeat;
}
.po-mock-nom {
  margin-top: 10px; font-family: var(--font-head); font-weight: 700;
  font-size: 13px; color: var(--text); line-height: 1.2;
}
.po-mock-sous { margin-top: 3px; font-size: 10.5px; color: var(--text3); font-weight: 600; }
.po-mock-prix { margin-top: 8px; font-family: var(--font-head); font-weight: 800; color: var(--green); font-size: 15px; }
.po-mock-panier  { right: 4%;  top: 14%; }
.po-mock-panier i { color: var(--green); }
.po-mock-vendeur { right: 10%; bottom: 12%; }
.po-mock-vendeur i { color: var(--gold); }

/* 2. Gestion */
.po-mock-bord { left: 5%; top: 10%; right: 37%; padding: 11px; }
.po-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.po-mock-kpi { background: var(--gray); border-radius: 8px; padding: 7px 8px; }
.po-mock-kpi span { display: block; font-size: 8.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.po-mock-kpi b { font-family: var(--font-head); font-size: 13px; color: var(--text); }
.po-mock-barres { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 9px; }
.po-mock-barres i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--green-mid), var(--green)); }
.po-mock-facture { right: 2%; bottom: 6%; }
.po-mock-facture i { color: var(--gold); }

/* 3. Livraison */
.po-mock-route { left: 8%; right: 8%; top: auto; bottom: 16%; height: 44px; padding: 0; background: transparent; border: none; box-shadow: none; }
.po-route-ligne { position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px dashed rgba(255,255,255,.72); }
.po-route-depart, .po-route-arrivee, .po-route-moto {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 8px 22px rgba(10,14,30,.32);
  color: var(--text2); font-size: 16px;
}
.po-route-depart  { left: 0; }
.po-route-arrivee { right: 0; }
.po-route-moto    { left: 46%; color: #fff; background: var(--green); border-color: transparent; }
.po-mock-code  { left: 4%;  bottom: 4%; }
.po-mock-code i { color: var(--text3); }
.po-mock-livre { right: 2%; top: 6%; }
.po-mock-livre i { color: var(--gold); }

/* ── LA VIE PROPRE À CHAQUE SCÈNE ──
   Trois mouvements, un par module, qui ne partent QUE sur la diapositive
   active — sinon ils s'useraient dans le vide pendant qu'on regarde
   ailleurs. Chacun joue une fois par passage : une boucle qui se rembobine
   sous les yeux dénonce le décor. */

/* Marketplace : les pastilles se posent après la carte. */
.po-scene-item[data-entree="zoom"].actif .po-mock-chip {
  animation: poChipPop .6s cubic-bezier(.2,.9,.3,1.4) both;
}
.po-scene-item[data-entree="zoom"].actif .po-mock-panier  { animation-delay: .55s; }
.po-scene-item[data-entree="zoom"].actif .po-mock-vendeur { animation-delay: .85s; }
@keyframes poChipPop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* Gestion : les barres poussent, de la plus ancienne à la plus récente.
   scaleY depuis le bas — pas de height, qui recalculerait la mise en page. */
.po-scene-item[data-entree="monte"].actif .po-mock-barres i {
  transform-origin: bottom;
  animation: poBarre .8s cubic-bezier(.2,.7,.3,1) both;
}
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(1) { animation-delay: .45s; }
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(2) { animation-delay: .55s; }
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(3) { animation-delay: .65s; }
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(4) { animation-delay: .75s; }
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(5) { animation-delay: .85s; }
.po-scene-item[data-entree="monte"].actif .po-mock-barres i:nth-child(6) { animation-delay: .95s; }
@keyframes poBarre {
  from { transform: scaleY(.06); opacity: .4; }
  to   { transform: none;        opacity: 1; }
}
.po-scene-item[data-entree="monte"].actif .po-mock-facture { animation: poChipPop .6s cubic-bezier(.2,.9,.3,1.4) 1.15s both; }

/* Livraison : le livreur fait la course. Une seule traversée, en 4 s, sur
   la durée où la diapositive est à l'écran — c'est le mouvement qui
   explique le module, pas un ornement. Sur « left » et non transform :
   voir l'exception en tête de ce bloc. */
.po-scene-item[data-entree="cote"].actif .po-route-moto {
  animation: poCourse 4s cubic-bezier(.4,0,.3,1) .6s both;
}
@keyframes poCourse {
  from { left: 8%;  }
  to   { left: 76%; }
}
.po-scene-item[data-entree="cote"].actif .po-mock-code  { animation: poChipPop .6s cubic-bezier(.2,.9,.3,1.4) .9s both; }
.po-scene-item[data-entree="cote"].actif .po-mock-livre { animation: poChipPop .6s cubic-bezier(.2,.9,.3,1.4) 4.3s both; }

/* ── Téléphone ──
   Les diapositives sont HORS FLUX : la scène ne peut pas se dimensionner
   sur son contenu, il faut lui donner de quoi loger la plus haute. Mesuré
   sur un écran de 375 px : texte 262-300 px + 16 d'écart + illustration
   165 = 480 au pire. 520 laisse la marge d'une police système plus large.
   Sans cela, l'illustration débordait sur les puces et sur les chiffres. */
@media (max-width: 860px) {
  .po-hero-scene { min-height: 520px; }
  .po-scene-item { grid-template-columns: 1fr; gap: 16px; align-content: start; }
  .po-scene-vue { min-height: 185px; }
  /* Sur un écran étroit, le cadre est plus haut que large : l’image ne garde
     que sa colonne centrale, et la personne qui compte — celle de droite —
     sortait du champ. On décale le point d’ancrage vers elle. */
  .po-scene-photo { object-position: 72% 42%; }
  /* Le dessin est très large (1800x800) : recadré en « cover » dans un
     cadre plus haut que large, il se retrouve agrandi quatre fois et le
     titre tombe en plein dessus. Il passe donc en ENTIER, posé en bas,
     sous le message — le fond jumeau de .po-scene-fond comble le reste.
     Le voile redressé s'allège comme sur grand écran. */
  .po-scene-dessin .po-scene-photo {
    object-fit: contain; object-position: center bottom;
    /* max-width : sans cette ligne, `img { max-width: 100% }` de
       css/base.css ramenait la largeur ci-dessous à 100 % pendant que le
       décalage de -17 %, lui, restait. Le dessin s'arrêtait alors 64 px
       avant le bord droit, et son fond faisait une couture verticale avec
       celui de la bannière — visible sur tout navigateur de téléphone
       (constaté le 2026-09-28 sur ledjoula.com). */
    max-width: none;
    /* Un peu plus large que le cadre : entier, le dessin ne ferait que
       130 px de haut sur un téléphone et on ne lirait plus les prix. Il
       déborde donc des deux côtés — à gauche du ciel, à droite le bord
       des sacs, rien d'essentiel. */
    width: 134%; left: -17%;
  }
  .po-scene-dessin .po-scene-voile {
    background: linear-gradient(180deg,
      rgba(5,25,55,.78) 0%, rgba(5,25,55,.62) 45%, rgba(5,25,55,.30) 78%, rgba(5,25,55,.12) 100%);
  }
  /* Les scènes s'empilent : le message occupe toute la largeur, un
     dégradé latéral ne protégerait plus rien. Il se redresse — sombre en
     haut, sous le texte, plus clair en bas, sur l'illustration. */
  .po-scene-voile {
    background: linear-gradient(180deg,
      rgba(8,10,20,.80) 0%, rgba(8,10,20,.72) 45%, rgba(8,10,20,.50) 78%, rgba(8,10,20,.34) 100%);
  }
  .po-mock-chip { padding: 6px 11px; font-size: 10.5px; }

  .po-mock-carte { width: 148px; left: 2%; top: 2%; padding: 10px; }
  .po-mock-img { height: 72px; font-size: 20px; }
  .po-mock-prix { font-size: 13px; }
  .po-mock-panier  { top: 6%; }
  .po-mock-vendeur { bottom: 16%; right: 2%; }

  .po-mock-bord { left: 0; right: 22%; top: 4%; padding: 10px; }
  .po-mock-kpi { padding: 7px 8px; }
  .po-mock-kpi b { font-size: 13px; }
  .po-mock-barres { height: 52px; gap: 6px; margin-top: 9px; }
  .po-mock-facture { bottom: 0; right: 0; }

  .po-mock-route { left: 6%; right: 6%; top: auto; bottom: 12%; height: 34px; }
  .po-route-depart, .po-route-arrivee, .po-route-moto { width: 30px; height: 30px; font-size: 13px; }
  .po-mock-code { left: 0; bottom: 0; }
  .po-mock-livre { right: 0; top: 0; }
}

/* ── Révélation au défilement ──
   Masqué UNIQUEMENT sous .js-anim, posée par le script lui-même : sans JS,
   ou sans IntersectionObserver, rien n'est caché. --i échelonne les enfants
   d'une grille. */
.js-anim [data-anim] { opacity: 0; transform: translate3d(0, 18px, 0); }
.js-anim [data-anim].po-vu {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ── Cartes : l'image respire au survol ──
   La carte se soulevait déjà ; le zoom de l'image donne la profondeur qui
   manquait. .po-card-img porte déjà overflow:hidden. */
.po-card-img img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.po-card:hover .po-card-img img { transform: scale(1.06); }

/* ── Chiffres qui montent ──
   tabular-nums est déjà sur .po-hero-stat .n : la largeur ne saute pas
   pendant le décompte. */
.po-hero-stat .n.po-compte { color: var(--green); }

/* ── Le réglage système coupe tout ──
   Sans ce bloc, « animation: none » sur une entrée en « both » laisserait
   les éléments à leur état INITIAL, donc invisibles : il faut les remettre. */
@media (prefers-reduced-motion: reduce) {
  /* Sans ces remises à zéro, « animation: none » laisserait les éléments à
     leur état INITIAL — donc invisibles, puisque les entrées sont en both. */
  .po-scene-item.actif .po-scene-texte > *,
  .po-scene-item.actif .po-scene-vue,
  .po-scene-item.actif .po-mock-chip,
  .po-scene-item.actif .po-mock-barres i,
  .po-scene-item.actif .po-route-moto,
  .po-scene-item.actif .po-scene-photo { animation: none; opacity: 1; transform: none; }
  .po-scene-item[data-entree="cote"].actif .po-route-moto { left: 46%; }
  .po-scene-item { transition: none; }
  .js-anim [data-anim],
  .js-anim [data-anim].po-vu { opacity: 1; transform: none; transition: none; }
  .po-card:hover .po-card-img img { transform: none; }
  .po-scene-cta:hover { transform: none; }
}