/* ═══════════════════════════════════════════════════════════════════════════════════════
   BEAUTY ADVISOR v2 — ce qui change dans la page du SAV, et RIEN d'autre (25/09/2026)

   1. Les bulles et les boutons : les choix d'Hamada (mode gris, forme D, un bouton par ligne,
      forme SAWT noire). Tout le reste de la page SAV est le sien, intact.
   2. Les cartes du conseil Beauty : recopiées de ses composants (Tailwind traduit en CSS), avec
      SES jetons de couleur — seuls les coins sont carrés (demande d'Hamada).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. LES BULLES : gris pour Beauty Market, noir pour elle, forme D (petite queue) ─── */
html body .bulle-bot, html body.profil-sav .bulle-bot, .profil-sav .bulle-bot{
  position:relative; background:#f2f2f2 !important; color:#121212 !important; border:0 !important;
  border-left:0 !important; box-shadow:none !important; border-radius:18px !important; margin-left:6px !important;
  padding:11px 15px !important;
}
html body .bulle-cli, .profil-sav .bulle-cli{
  position:relative; background:#121212 !important; color:#fff !important; border:0 !important;
  box-shadow:none !important; border-radius:18px !important; margin-right:6px !important; padding:11px 15px !important;
}
.bulle-bot::before{content:"";position:absolute;left:-6px;bottom:0;width:14px;height:14px;background:#f2f2f2;border-bottom-right-radius:12px}
.bulle-bot::after{content:"";position:absolute;left:-10px;bottom:0;width:10px;height:14px;background:var(--adv-fond,#fff);border-bottom-right-radius:9px}
.bulle-cli::before{content:"";position:absolute;right:-6px;bottom:0;width:14px;height:14px;background:#121212;border-bottom-left-radius:12px}
.bulle-cli::after{content:"";position:absolute;right:-10px;bottom:0;width:10px;height:14px;background:var(--adv-fond,#fff);border-bottom-left-radius:9px}

/* ─── L'ONGLET DU HAUT : retiré (Hamada, point 42 : « supprimer l'onglet du haut ») ─── */
#portesSav, .portes-sav{display:none !important}

/* ─── 2. LES BOUTONS : un par ligne, du plus long au plus court (ordre du serveur), forme SAWT ─── */
.choix, .profil-sav .choix{display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:7px !important}
.choix button, .profil-sav .choix button{
  grid-column:auto !important; width:auto !important; max-width:100%;
  border:1.5px solid #121212 !important; border-radius:16px 16px 5px 16px !important; background:#fff !important;
  color:#121212 !important; box-shadow:none !important; padding:10px 16px !important;
  font:600 14px/1.2 var(--police,ui-sans-serif,system-ui,sans-serif) !important; text-align:center !important;
}
.choix button:hover{background:#121212 !important; color:#fff !important}
.choix button.pris{background:#121212 !important; color:#fff !important}
.adv-mention{align-self:center;font-size:10.5px;color:#6b6b6b;text-align:center;margin:2px auto 8px;max-width:90%}

/* ─── 3. LE CONSEIL BEAUTY — ses jetons (storefront/web/app/globals.css) ─── */
.bt-tour{--ink:#23211c;--ink-soft:#6d685e;--line:rgba(35,33,28,.14);--card:#fff;--well:#eeece7;--brand:#1a1a1a;
  --accent-soft:#e8e8e8;--star:#d9a514;--danger:#b3261e;--danger-soft:#fceeee;
  display:flex;flex-direction:column;gap:12px;margin:6px 0}
.bt-bulle{align-self:flex-start;max-width:90%}
.bt-texte{font-size:16px;line-height:1.625;color:#121212}
.bt-texte p{margin:0}
.bt-sp{height:8px}
.bt-fort{font-weight:600}
.bt-code{border-radius:4px;background:var(--well);padding:0 4px;font-family:ui-monospace,monospace;font-size:13px}
.bt-ul{margin:4px 0;padding-left:20px;list-style:disc}.bt-ul li{margin:2px 0}
.bt-quote{border-left:2px solid var(--line);padding-left:10px;font-size:13px;font-style:italic;color:var(--ink-soft);margin:6px 0}
.bt-hr{margin:12px 0;border:0;border-top:1px solid var(--line)}
.bt-table{margin:8px 0;overflow-x:auto;border:1px solid var(--line)}
.bt-table table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
.bt-table th{border-bottom:1px solid var(--line);background:rgba(238,236,231,.7);padding:6px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.bt-table td{border-bottom:1px solid var(--line);padding:6px 10px;color:var(--ink)}.bt-table td.bt-num{text-align:right;font-family:ui-monospace,monospace}
/* le curseur d'écriture — .streaming-caret de Beauty */
@keyframes bt-blink{0%,100%{opacity:1}50%{opacity:0}}
.streaming-caret::after{content:"▎";margin-left:1px;color:var(--ink,#23211c);animation:bt-blink 1s steps(1) infinite}
/* la ligne d'attente — ActivityLine */
.bt-activity{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);margin-left:6px}
.bt-dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--brand);animation:bt-pulse 2s cubic-bezier(.4,0,.6,1) infinite;flex:none}
@keyframes bt-pulse{50%{opacity:.5}}
.bt-act{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-erreur{border:1px solid rgba(179,38,30,.4);background:var(--danger-soft);padding:8px 12px;font-size:13px;line-height:1.6;color:var(--danger)}
/* l'apparition — .ac-reveal */
@keyframes bt-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bt-reveal{animation:bt-reveal 240ms cubic-bezier(.25,.8,.3,1) both}
.bt-bloc{transition:opacity .3s}.bt-bloc.bt-retry{opacity:.6}
.bt-skel{flex:none;background:linear-gradient(100deg,var(--well) 35%,rgba(255,255,255,.7) 50%,var(--well) 65%);background-size:200% 100%;animation:bt-shim 1.2s linear infinite}
@keyframes bt-shim{to{background-position:-200% 0}}
/* sections — ProductStrip / PlanCard / ComparisonCard / GuideCard / OrderStatusCard (coins carrés) */
.bt-sec{border:1px solid var(--line);background:var(--card);padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);border-radius:0}
.bt-p4{padding:16px}
.bt-h3{font-size:15px;font-weight:600;color:var(--ink);margin:0}.bt-mb3{margin-bottom:12px}
.bt-intro{margin:4px 0 0;font-size:13px;color:var(--ink-soft)}
.bt-rang{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.bt-col{display:flex;flex-direction:column;gap:12px}
.bt-w40{width:160px}.bt-fix{flex:none}
.bt-reason{margin:4px 0 0;font-size:11px;line-height:1.375;color:var(--ink-soft)}
/* ProductTile */
.bt-tile{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .2s,border-color .2s;border-radius:0}
.bt-tile:hover{box-shadow:0 4px 6px rgba(0,0,0,.08)}
.bt-rel{position:relative}
.bt-img{display:block;width:100%;object-fit:contain}
.bt-h28{height:112px}.bt-carre{aspect-ratio:1/1}
.bt-vide{display:flex;align-items:center;justify-content:center;background:var(--well);color:var(--ink-soft);font-size:20px}
.bt-rupture{position:absolute;right:6px;top:6px;border-radius:999px;background:rgba(35,33,28,.85);padding:2px 8px;font-size:11px;font-weight:500;color:#fff}
.bt-add{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:0;
  background:#FC82B0;color:#fff;font-size:18px;font-weight:600;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.1);cursor:pointer;transition:transform .15s}
.bt-add:hover{transform:scale(1.05)}.bt-add.ajoute{background:#121212}
.bt-tile-corps{display:flex;flex:1;flex-direction:column;gap:2px;padding:10px}
.bt-brand{font-size:11px;text-transform:uppercase;letter-spacing:.025em;color:rgba(109,104,94,.8)}
.bt-title{font-size:13px;font-weight:500;line-height:1.375;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-bas{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:4px}
.bt-price{font-size:14px;font-weight:600;color:var(--ink)}
.bt-rating{white-space:nowrap;font-size:13px;color:var(--ink-soft)}.bt-star{color:var(--star)}.bt-count{font-size:11px}
/* PlanCard */
.bt-steps{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:12px}
.bt-step{display:flex;align-items:baseline;gap:8px}
.bt-num1{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:999px;background:var(--accent-soft);font-size:11px;font-weight:700;color:var(--ink)}
.bt-lab{font-size:13px;font-weight:600;color:var(--ink)}
.bt-det{margin:0;font-size:13px;color:var(--ink-soft)}
.bt-pl7{padding-left:28px;margin-top:8px}
/* ComparisonCard */
.bt-comp{width:224px;flex:none;cursor:pointer;border:1px solid var(--line);background:var(--card);padding:10px;border-radius:0}
.bt-comp.reco{border-color:var(--brand)}
.bt-reco{display:inline-block;margin-bottom:6px;border-radius:999px;background:var(--accent-soft);padding:2px 8px;font-size:11px;font-weight:600;color:var(--ink)}
.bt-mt15{margin-top:6px}.bt-mt05{margin-top:2px}
.bt-best{margin:4px 0 0;font-size:11px;font-weight:500;color:var(--ink-soft)}
.bt-pros,.bt-cons{list-style:none;padding:0;margin:6px 0 0;font-size:11px;color:var(--ink)}.bt-cons{margin-top:4px;color:var(--ink-soft)}
/* GuideCard */
.bt-guide{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.bt-gbody{margin:2px 0 0;font-size:13px;line-height:1.625;color:var(--ink-soft)}
/* OrderStatusCard / CheckoutCard */
.bt-entete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bt-pill{border-radius:999px;background:var(--accent-soft);padding:2px 10px;font-size:11px;font-weight:600;text-transform:capitalize;color:var(--ink)}
.bt-pill2{white-space:nowrap;border-radius:999px;border:1px solid var(--line);background:rgba(238,236,231,.6);padding:2px 10px;font-size:11px;font-weight:600;color:var(--ink-soft)}
.bt-summary{margin:4px 0 0;font-size:13px;line-height:1.625;color:var(--ink)}
.bt-well{margin-top:12px;display:flex;flex-direction:column;gap:6px;background:rgba(238,236,231,.6);padding:12px;font-size:13px}
.bt-l{display:flex;justify-content:space-between;gap:8px;color:var(--ink)}
.bt-tot{border-top:1px solid var(--line);padding-top:6px;font-weight:600}
.bt-clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-soft{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}.bt-next{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--ink)}
.bt-checkout{border:2px solid var(--brand)}
.bt-mini{margin:0;font-size:11px;line-height:1.375;color:var(--ink-soft)}
.bt-primary{margin-top:12px;width:100%;background:var(--well);color:var(--ink-soft);padding:10px 16px;font-size:14px;font-weight:700;border:0;cursor:not-allowed}

/* ─── 4. LE PANIER — copié de SAWT : un bouton dans l'en-tête, un panneau ─── */
.adv-panier{position:relative}
.adv-panier span{position:absolute;right:-6px;top:-6px;min-width:17px;height:17px;border-radius:9px;background:#84C2CD;color:#121212;font-size:10px;font-weight:700;line-height:17px;padding:0 4px;display:none}
.adv-panier.plein span{display:block}
.adv-voile{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-end;justify-content:center;z-index:9999}
.adv-voile.ouvert{display:flex}
.adv-panneau{background:#fff;width:100%;max-width:520px;padding:16px;max-height:80vh;overflow:auto;font-family:var(--police,ui-sans-serif,system-ui,sans-serif)}
.adv-panneau h3{font-size:16px;margin:0 0 6px}
.adv-fermer{float:right;border:0;background:#f2f2f2;border-radius:50%;width:32px;height:32px;cursor:pointer}
.adv-pl{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #f2f2f2}
.adv-pl img{width:48px;height:48px;object-fit:contain;flex:none}
.adv-pl .t{flex:1;font-size:12.5px}.adv-pl .q{display:flex;gap:4px;align-items:center;font-size:13px}
.adv-pl .q button{width:26px;height:26px;border:1px solid #121212;background:#fff;cursor:pointer}
.adv-pl .x{border:0;background:none;font-size:16px;cursor:pointer;color:#6b6b6b}
.adv-tot{display:flex;justify-content:space-between;font-weight:700;border-top:1px solid #e2e2e2;padding-top:8px;margin-top:6px}
.adv-valider{display:block;text-align:center;text-decoration:none;margin-top:12px;background:#FC82B0;color:#fff;font-weight:700;padding:12px}
.adv-vide{color:#6b6b6b;font-size:13px}

/* nos rangées (entrée, suggestions Beauty) : pas de hauteur bornée */
.adv-portes, .bt-choix{max-height:none !important; overflow:visible !important}

/* ─── LA PAGE D'ACCUEIL DU SAV : retirée (Hamada, 25/09 : « enlève la page d'accueil du SAV, on a
   dit qu'on l'enlève »). Elle ne s'affiche plus, même une fraction de seconde au chargement. Seule
   exception : après un Reset, une cliente qui a un dossier y retrouve SES conversations (point 95). ─── */
html:not(.adv-histo) #vide{display:none !important}
html.adv-histo #vide .acc-portes, html.adv-histo #vide .porte-num{display:none !important}