/* WHALISHOP - feuille historique des ecrans pas encore migres vers le design
   system (resources/css/ds). Ses anciens jetons pointent desormais vers la
   palette WHALISHOP (LOT 2A.1) : noir, blanc, vert. Aucune police ni icone
   distante ici : Manrope est servie par le site, les icones Material
   Symbols des ecrans historiques sont chargees par partials/legacy-head.php
   le temps de leur migration vers le sprite local.

   Regle d'accessibilite : jamais de texte blanc sur le vert #25D366. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope/manrope-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope/manrope-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Anciens noms, nouvelles valeurs (voir resources/css/ds/01-tokens.css) */
  --primary: #075E54;              /* vert encre : texte, liens, etat actif */
  --primary-container: #25D366;    /* vert signature : fonds de conversion */
  --on-primary: #ffffff;           /* texte sur --primary (7,7:1) */
  --on-primary-container: #000000; /* texte sur le vert signature */
  --on-surface: #111111;
  --on-surface-variant: #444444;
  --surface: #F7F7F7;
  --surface-container: #EEEEEE;
  --surface-container-low: #F7F7F7;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #E5E5E5;
  --surface-variant: #E5E5E5;
  --inverse-surface: #111111;
  --inverse-on-surface: #F7F7F7;
  --secondary: #666666;
  --outline: #666666;
  --outline-variant: #999999;
  --error: #B42318;
  --error-container: #FDECEA;
  --primary-fixed: #25D366;
  --primary-fixed-dim: #25D366;
  --font-body: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: #25D366; color: #000; }

body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); }
/* Scrollbar : fine et discrete, mais visible (le masquage global cassait le scroll de la page) */
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 9999px;
  border: 2px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--outline); }
* { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined[style*="FILL"] {
  font-variation-settings: 'FILL' 1;
}

/* Utility Classes */
.bg-primary-container { background-color: var(--primary-container); }
.bg-primary { background-color: var(--primary); }
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-low { background-color: var(--surface-container-low); }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
.bg-surface-container-high { background-color: var(--surface-container-high); }
.bg-inverse-surface { background-color: var(--inverse-surface); }
.bg-error-container { background-color: var(--error-container); }

.text-primary { color: var(--primary); }
.text-primary-container { color: var(--primary-container); }
.text-on-primary { color: var(--on-primary); }
.text-on-primary-container { color: var(--on-primary-container); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-inverse-surface { color: var(--inverse-on-surface); }
.text-secondary { color: var(--secondary); }
.text-outline { color: var(--outline); }
.text-error { color: var(--error); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #075E54; }

/* Conversion : vert, texte noir (seul texte lisible sur #25D366) */
.btn-primary {
  background: var(--primary-container);
  color: #000;
}
.btn-primary:hover { background: #128C7E; color: #000; }

.btn-secondary {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-secondary:hover { background: var(--surface-container-low); }

.btn-ghost {
  background: transparent;
  color: var(--on-surface);
}
.btn-ghost:hover { background: var(--surface-container); }

.btn-whatsapp {
  background: var(--primary-container);
  color: #000;
}
.btn-whatsapp:hover { background: #128C7E; color: #000; }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* Cards */
.card {
  background: var(--surface-container-lowest);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.card-sm { padding: 1rem; }
.card-md { padding: 1.5rem; }
.card-lg { padding: 2rem; }

/* Form Elements */
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--surface-variant);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: all 0.2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  background: var(--surface-container-lowest);
  box-shadow: 0 0 0 2px var(--primary-container);
}
.form-textarea { height: auto; padding: 0.75rem; resize: vertical; }
/* Zones de texte (LOT UX/UI) : la hauteur fixe de .form-input (une ligne)
   obligeait les marchands a tirer le coin. Hauteur confortable d'emblee,
   croissance automatique avec le texte, puis defilement au-dela de 20rem. */
textarea.form-input, textarea.form-textarea {
  height: auto;
  min-height: 7.5rem;
  max-height: 20rem;
  padding: 0.75rem;
  line-height: 1.5;
  overflow-y: auto;
  resize: vertical;
  field-sizing: content;
}
/* Champ fichier : la hauteur fixe de .form-input collait le bouton natif en
   haut de la boite. Hauteur libre, bouton centre de 44 px. */
input[type="file"].form-input { height: auto; min-height: 2.75rem; padding: 0.375rem 0.5rem; line-height: 2.25rem; cursor: pointer; }
input[type="file"].form-input::file-selector-button {
  min-height: 2.25rem;
  margin-right: 0.75rem;
  padding: 0 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: 0.625rem;
  background: var(--surface-container);
  color: var(--on-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"].form-input::file-selector-button:hover { background: var(--surface-container-high); }
/* Apercu immediat des images choisies (assets/js/file-preview.js) */
.file-preview { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.file-preview__item { margin: 0; display: grid; gap: 0.25rem; width: 7.5rem; }
.file-preview__item img { display: block; width: 100%; height: 5rem; object-fit: contain; background: var(--surface-container); border: 1px solid var(--surface-container-high); border-radius: 0.625rem; }
.file-preview__item figcaption { font-size: 0.75rem; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview__note { flex-basis: 100%; font-size: 0.75rem; color: var(--on-surface-variant); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c7a71' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; }
.form-checkbox { width: 1rem; height: 1rem; accent-color: var(--primary); }
.form-error { color: var(--error); font-size: 0.75rem; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-primary { background: rgba(37, 211, 102, 0.15); color: var(--primary); }
.badge-success { background: rgba(37, 211, 102, 0.1); color: #065F46; }
.badge-warning { background: rgba(251, 191, 36, 0.15); color: #92400E; }
.badge-error { background: var(--error-container); color: var(--error); }
.badge-dark { background: var(--inverse-surface); color: var(--inverse-on-surface); }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 280px;
  background: var(--surface-container-lowest);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.3s;
}
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: all 0.2s;
}
.sidebar-link:hover { background: var(--surface-container); color: var(--on-surface); }
.sidebar-link.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sidebar-link .material-symbols-outlined { font-size: 20px; }

/* Main Content */
.main-content {
  margin-left: 280px;
  min-height: 100vh;
  padding: 1.5rem;
}
@media (max-width: 1023px) {
  .main-content { margin-left: 0; padding: 1rem; padding-top: 4rem; }
}

/* Top Bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface-container-lowest);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Grid */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
}
.table td {
  padding: 0.75rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--surface-container);
}
.table tr:hover td { background: var(--surface-container-low); }
.table th:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.table th:last-child { border-radius: 0 0.5rem 0.5rem 0; }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--surface-container); }
.tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.tab:hover { color: var(--on-surface); }
.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--inverse-surface);
  color: var(--on-primary);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 28, 48, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface-container-lowest);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  max-width: 500px;
  width: 100%;
  padding: 2rem;
  transform: scale(0.95);
  transition: transform 0.2s;
}
.modal-overlay.active .modal { transform: scale(1); }

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.empty-state-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s infinite; }
.animate-fade { animation: fadeIn 0.3s ease; }

/* WhatsApp Float */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary-container);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.12);
  z-index: 90;
  text-decoration: none;
  transition: transform 0.2s;
}
.wa-float:hover { transform: translateY(-2px); }

/* Product Card */
.product-card {
  background: var(--surface-container-lowest);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--surface-container);
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* Password toggle */
.password-wrapper {
  position: relative;
}
.password-wrapper .form-input {
  padding-right: 3.25rem;
}
/* QA 13/09 : zone tactile 44 px (etait 28 px), icone au meme endroit. */
.password-toggle {
  position: absolute;
  right: 0.25rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: color 0.2s;
}
.password-toggle:hover {
  color: var(--primary);
}
.password-toggle .icon-hide { display: none; }
.password-toggle.active .icon-show { display: none; }
.password-toggle.active .icon-hide { display: block; }

/* Responsive helpers */
@media (max-width: 1023px) {
  .lg-only { display: none !important; }
  .mobile-only { display: flex !important; }
}
@media (min-width: 1024px) {
  .lg-only { display: flex !important; }
  .mobile-only { display: none !important; }
}

/* ============================================================
   Fonds decoratifs (style Haikei) - gradient mesh + vagues
   ============================================================ */
.has-bg { position: relative; overflow: hidden; isolation: isolate; }
.has-bg > .container { position: relative; z-index: 1; }

/* Couche plein cadre : mesh de degrades radiaux */
.bg-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Vagues de transition entre sections */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5rem;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.wave-top { top: -1px; }
.wave-bottom { bottom: -1px; }

@media (max-width: 768px) {
  .wave { height: 3rem; }
}

/* =====================================================================
   PHASE 5 - VITRINE MARCHANDE
   Hero a dimensions fixes, zone logo normalisee, navigation mobile,
   etats vides et de chargement, animations au defilement.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO (section 3)
   Le bloc garde TOUJOURS son ratio : desktop 1920x720 (8/3), mobile
   1080x1350 (4/5). L'image du marchand est recadree par object-fit,
   jamais etiree, et le point focal ne fait que deplacer le cadrage.
   --------------------------------------------------------------------- */
.hero-band {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  overflow: hidden;
  background: var(--surface-container);
  isolation: isolate;
}
.hero-band__media,
.hero-band__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-band__media img {
  object-fit: cover;
  /* Point focal injecte en style inline : --hero-focal */
  object-position: var(--hero-focal, 50% 50%);
  display: block;
}
/* Repli sans image : degrade aux couleurs de la boutique */
.hero-band--empty .hero-band__media {
  background: linear-gradient(135deg,
    var(--org-primary, #111111) 0%,
    var(--org-secondary, #000000) 100%);
}

.hero-band__overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-band__overlay--none     { background: none; }
.hero-band__overlay--light    { background: rgba(0,0,0,0.18); }
.hero-band__overlay--medium   { background: rgba(0,0,0,0.38); }
.hero-band__overlay--dark     { background: rgba(0,0,0,0.58); }
.hero-band__overlay--gradient {
  background: linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.05) 100%);
}

.hero-band__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
  max-width: 44rem;
}
.hero-band--align-center .hero-band__inner { max-width: 52rem; margin: 0 auto; text-align: center; align-items: center; }
.hero-band--align-right  .hero-band__inner { margin-left: auto; text-align: right; align-items: flex-end; }

.hero-band__title {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.hero-band__subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.185rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 38rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.hero-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

@media (max-width: 768px) {
  .hero-band { aspect-ratio: 4 / 5; }
  .hero-band__inner { max-width: none; justify-content: flex-end; padding-bottom: 2.5rem; }
  .hero-band__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Apercu multi-appareils dans l'admin (section 3) */
.hero-preview { border: 1px solid var(--outline-variant); border-radius: 1rem; overflow: hidden; background: var(--surface-container-low); }
.hero-preview[data-device="desktop"] { max-width: 100%; }
.hero-preview[data-device="tablet"]  { max-width: 48rem; margin: 0 auto; }
.hero-preview[data-device="mobile"]  { max-width: 22rem; margin: 0 auto; }
.hero-preview[data-device="mobile"] .hero-band { aspect-ratio: 4 / 5; }
.hero-preview[data-device="tablet"] .hero-band { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------------------
   ZONE LOGO NORMALISEE (section 4)
   Le logo du marchand est CONTENU dans une boite de taille fixe : quelle
   que soit l'image chargee, le header garde sa hauteur et son alignement.
   --------------------------------------------------------------------- */
.logo-zone {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 200px;
  height: 2.5rem;
  flex: 0 0 auto;
  overflow: hidden;
}
/* La hauteur de l'image suit TOUJOURS celle de la zone et la largeur
   decoule du ratio : rond reste rond, horizontal reste horizontal.
   Le <picture> (logo mobile) prend la hauteur de la zone : sans cela,
   max-height:100% ne se resolvait pas et un logo carre/rond de 600 px
   s'affichait en 200x200, rogne en bande de 40 px par overflow:hidden. */
.logo-zone picture {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
  min-width: 0;
}
.logo-zone img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.logo-zone--footer { height: 2rem; max-width: 160px; }
.logo-zone--fallback {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--org-primary, var(--primary));
  color: #fff;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .logo-zone { max-width: 140px; height: 2.125rem; }
}

/* ---------------------------------------------------------------------
   EN-TETE VITRINE : marque + actions sans chevauchement sur mobile.
   Le nom se replie sur 2 lignes (puis ...) au lieu de passer sous le
   bouton menu ; le bouton "Contact" (WhatsApp) garde 44 px de haut.
   --------------------------------------------------------------------- */
.public-header-inner { gap: 0.75rem; }
.public-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
}
.public-brand__name {
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--on-surface);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-header-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.public-header-contact { min-height: 2.75rem; white-space: nowrap; }
/* Bureau : la nav a deja un lien "Contact" (ancre) : le bouton precise WhatsApp */
.public-header-contact__more { display: none; }
@media (min-width: 1024px) { .public-header-contact__more { display: inline; } }
@media (max-width: 479px) {
  .public-brand { gap: 0.5rem; }
  .public-brand__name { font-size: 0.9375rem; }
  .public-header .logo-zone { max-width: 96px; }
  .public-header-contact { padding-inline: 0.75rem; }
}

/* ---------------------------------------------------------------------
   HERO VITRINE (LOT UX/UI)
   Avec image(s) : BANNIERE pleine largeur en tete (carrousel si plusieurs
   images), texte et CTA dessous sur fond clair. L'image du marchand
   (photo, affiche, flyer) est affichee EN ENTIER : object-fit contain dans
   une scene au ratio de la 1re image (borne 4/5 - 3/1, injecte en
   --sf-ratio, hauteur plafonnee) ; les bandes eventuelles sont remplies
   par un flou de la meme image. Jamais de recadrage ni de deformation.
   Sans image : bandeau sombre historique, texte blanc.
   Container queries : l'apercu du tableau de bord (largeur simulee)
   applique exactement les memes regles que la vitrine.
   --------------------------------------------------------------------- */
.sf-hero {
  container: sf-hero / inline-size;
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--inverse-surface), var(--org-primary));
}
.sf-hero--media { background: var(--surface-container-lowest, #fff); color: var(--on-surface); }
.sf-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.sf-hero--media .sf-hero__grid { gap: 1.5rem; padding-top: 1.75rem; }
.sf-hero__text { min-width: 0; max-width: 40rem; }
.sf-hero--media .sf-hero__text { max-width: none; }
.sf-hero__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #25D366;
  margin-bottom: 1rem;
}
.sf-hero__title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2rem, 1.25rem + 3.5vw, 3.75rem);
  font-size: clamp(2rem, 1.25rem + 3.5cqi, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: #fff;
  margin-bottom: 1.25rem;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.sf-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  max-width: 32rem;
}
.sf-hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; align-items: center; }
.sf-hero__city {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
}
/* Bouton secondaire : clair sur le bandeau sombre, contour sur fond clair */
.sf-hero__alt { background: rgba(255,255,255,0.95); color: var(--on-surface); border-color: transparent; min-height: 3rem; }
/* Fond clair (banniere) : vert #075E54 en texte, jamais #25D366 */
.sf-hero--media .sf-hero__kicker { color: #075E54; margin-bottom: 0.625rem; }
.sf-hero--media .sf-hero__title { color: var(--on-surface); margin-bottom: 0.75rem; font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); font-size: clamp(1.75rem, 1.25rem + 2.5cqi, 3rem); }
.sf-hero--media .sf-hero__lead { color: var(--on-surface-variant); margin-bottom: 1.5rem; }
.sf-hero--media .sf-hero__city { color: var(--on-surface-variant); margin-top: 1rem; }
.sf-hero--media .sf-hero__alt { background: transparent; color: var(--on-surface); border: 1px solid var(--on-surface); }
.sf-hero--media .sf-hero__alt:hover { background: var(--on-surface); color: #fff; }
.sf-hero__media { min-width: 0; }
.sf-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sf-ratio, 1.3333);
  max-height: min(30rem, 62vh);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--inverse-surface);
}
.sf-hero__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sf-hero__track::-webkit-scrollbar { display: none; }
.sf-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: center;
}
/* Bandes laterales : la meme image, floutee et assombrie (meme URL : aucun
   telechargement de plus). L'image nette reste entiere au premier plan. */
.sf-hero__slide::before {
  content: '';
  position: absolute;
  inset: -2rem;
  background: var(--sf-bg) center / cover no-repeat;
  filter: blur(28px) brightness(0.7);
}
.sf-hero__slide picture { position: relative; display: block; width: 100%; height: 100%; }
.sf-hero__slide .sf-hero__link { position: relative; display: block; width: 100%; height: 100%; }
.sf-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sf-hero__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.sf-hero__ctrl,
.sf-hero__dot {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}
.sf-hero__ctrl { border: 1px solid var(--outline-variant, rgba(0,0,0,0.2)); }
.sf-hero__ctrl:hover { border-color: var(--on-surface); }
.sf-hero__dots { display: flex; }
.sf-hero__dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  transition: background-color 0.2s;
}
.sf-hero__dot[aria-current="true"]::before { width: 1.5rem; background: #000; }
.sf-hero__count {
  display: none;
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}
.sf-hero__track:focus-visible,
.sf-hero__ctrl:focus-visible,
.sf-hero__dot:focus-visible {
  outline: 2px solid #075E54;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
/* Telephone : CTA pleine largeur, scene au ratio de l'image mobile */
@container sf-hero (max-width: 599px) {
  /* Libelle long ("Demander des informations") : retour a la ligne, jamais de debordement */
  .sf-hero__actions .btn { flex: 1 1 100%; min-width: 0; justify-content: center; text-align: center; white-space: normal; }
}
@container sf-hero (max-width: 768px) {
  .sf-hero__stage { aspect-ratio: var(--sf-ratio-m, var(--sf-ratio, 1.3333)); max-height: 75vh; border-radius: 0.75rem; }
}
/* Ecran etroit : compteur "2 / 5" a la place des points */
@container sf-hero (max-width: 479px) {
  .sf-hero__dots { display: none; }
  .sf-hero__count { display: inline-block; }
}
/* Bureau : bandeau sombre plus aere ; banniere : titre a gauche, CTA a droite */
@container sf-hero (min-width: 900px) {
  .sf-hero__grid { padding-top: 4.5rem; padding-bottom: 4rem; }
}
/* Bureau (viewport >= 1024 px, barre de defilement deduite) : split
   asymetrique, texte a gauche, banniere a droite */
@container sf-hero (min-width: 1000px) {
  .sf-hero--media .sf-hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .sf-hero--media .sf-hero__stage { max-height: min(32rem, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-hero__track { scroll-behavior: auto; }
  .sf-hero__dot::before { transition: none; }
}
/* Decision proprietaire (13/09) : la banniere du marchand s'affiche SEULE,
   pleine largeur, sur toutes les familles et toutes les tailles (telephone,
   tablette, bureau), comme l'experience commerce mobile. Titre et texte
   restent dans le document (lecteurs d'ecran, SEO) ; les CTA et la ville du
   hero sont retires (aucun lien invisible au clavier) : en-tete, bouton
   WhatsApp flottant et navigation les portent. Sans banniere : hero texte. */
.sf-hero--media .sf-hero__grid { display: flex; flex-direction: column; gap: 0; padding-top: 1rem; padding-bottom: 0.5rem; }
.sf-hero--media .sf-hero__media { order: -1; width: 100%; }
.sf-hero--media .sf-hero__copy {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sf-hero--media .sf-hero__cta { display: none; }
.sf-hero--media .sf-hero__controls { justify-content: center; margin-top: 0.375rem; }
@container sf-hero (min-width: 1000px) {
  .sf-hero--media .sf-hero__grid { padding-top: 1.5rem; padding-bottom: 1rem; }
}
@media (max-width: 767px) {
  .sf-hero--media .sf-hero__grid { padding-inline: 0; padding-top: 0; }
  .sf-hero--media .sf-hero__stage { border-radius: 0; }
}

/* ---------------------------------------------------------------------
   NAVIGATION MOBILE
   La nav publique etait masquee sous 1024px sans remplacement : aucun
   acces au catalogue depuis un telephone.
   --------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--surface-container);
  border-radius: 0.625rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  cursor: pointer;
}
.nav-drawer {
  /* LOT B (17/09/2026) : le tiroir etait un panneau blanc de liens en
     texte. Il porte desormais l'identite du marchand : son logo, son nom,
     sa couleur d'accent, et l'action premiere de sa vitrine (WhatsApp). */
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(20rem, 84vw);
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface-container-lowest, #fff);
  box-shadow: -18px 0 46px rgba(8, 12, 20, 0.28);
  transform: translateX(103%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.28s;
  visibility: hidden;
  z-index: 90;
  overflow: hidden;
}
.nav-drawer.is-open { transform: none; visibility: visible; }

/* En-tete : on sait de quelle boutique on parcourt le menu. */
.nav-drawer__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.85rem 1rem 1.1rem;
  background: var(--org-primary, #10b981);
  background: linear-gradient(135deg, var(--org-primary, #10b981), color-mix(in srgb, var(--org-primary, #10b981) 78%, #000));
  color: #fff;
}
.nav-drawer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}
.nav-drawer__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  object-fit: cover;
  background: #fff;
  flex: none;
}
.nav-drawer__initial {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  flex: none;
}
.nav-drawer__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nav-drawer__close {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
}
.nav-drawer__close:hover { background: rgba(255, 255, 255, 0.3); }
.nav-drawer__close .ws-icon { width: 1.25rem; height: 1.25rem; }

/* Liens : icone du metier, page courante marquee par un filet d'accent. */
.nav-drawer__links {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.75rem;
  border-left: 3px solid transparent;
  color: var(--on-surface);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav-drawer__link:hover { background: var(--surface-container); }
.nav-drawer__link.is-current {
  background: var(--surface-container);
  background: color-mix(in srgb, var(--org-primary, #10b981) 12%, transparent);
  border-left-color: var(--org-primary, #10b981);
  font-weight: 700;
}
.nav-drawer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 0.6rem;
  background: var(--surface-container);
  /* Couleur PRINCIPALE du marchand : la secondaire n'est pas toujours
     renseignee, et sa valeur par defaut (vert) jurait sur une boutique
     orange. */
  color: var(--org-primary, #10b981);
}
.nav-drawer__link.is-current .nav-drawer__icon {
  background: var(--org-primary, #10b981);
  color: #fff;
}
.nav-drawer__link.is-current .nav-drawer__label { color: var(--on-surface); }
.nav-drawer__icon .ws-icon { width: 1.125rem; height: 1.125rem; }
.nav-drawer__label { flex: 1; min-width: 0; }
.nav-drawer__chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--on-surface-variant);
  opacity: 0.5;
}

/* Pied : l'action premiere de la vitrine, toujours visible. */
.nav-drawer__foot {
  padding: 0.85rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--surface-container);
  background: var(--surface-container-lowest, #fff);
}
.nav-drawer__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.85rem;
  background: #25D366;
  color: #04220f;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.nav-drawer__wa span { min-width: 0; }
.nav-drawer__wa:hover { background: #1fbb59; }
.nav-drawer__wa .ws-icon { width: 1.25rem; height: 1.25rem; }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s;
  z-index: 80;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }
body.nav-locked { overflow: hidden; }
/* Tiroir ouvert : la bulle WhatsApp flottante s'efface, le tiroir porte
   deja son bouton - deux boutons verts superposes, c'est un bug visuel. */
body.nav-locked .wa-float { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim { transition: none; }
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav-drawer, .nav-scrim { display: none; }
  /* Le bouton WhatsApp de l'en-tete historique reste mobile/tablette :
     sur bureau, le lien "Contact" de la navigation suffit. */
  .public-header .public-header-contact { display: none; }
}

/* ---------------------------------------------------------------------
   ETATS VIDES ET CHARGEMENT (section 2)
   --------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--outline-variant);
  border-radius: 1rem;
  background: var(--surface-container-lowest);
}
.empty-state__icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  display: flex; align-items: center; justify-content: center;
}
.empty-state__title { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; }
.empty-state__text  { color: var(--on-surface-variant); max-width: 32rem; }

.skeleton {
  background: linear-gradient(90deg,
    var(--surface-container) 25%,
    var(--surface-container-high) 37%,
    var(--surface-container) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.3s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-sweep { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.is-loading { position: relative; pointer-events: none; opacity: 0.65; }
.spinner {
  width: 1.125rem; height: 1.125rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   RESPONSIVE - regles transverses
   --------------------------------------------------------------------- */
.grid-auto {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
@media (max-width: 480px) {
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.875rem; }
}
.stack-mobile { display: flex; gap: 1rem; }
@media (max-width: 768px) {
  .stack-mobile { flex-direction: column; }
  .hide-mobile { display: none !important; }
}
/* Les tableaux debordent au lieu de pousser la page en largeur */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   ANIMATIONS AU DEFILEMENT
   AOS est charge en local. On neutralise tout mouvement pour qui a
   demande la reduction des animations : les elements restent visibles.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .skeleton { animation: none; }
}

/* Respiration des formulaires : .form-group ne portait aucune marge, si
   bien que les champs se touchaient et que le bouton collait au dernier. */
.form-group + .form-group { margin-top: 1.125rem; }
/* LOT UX/UI : cette marge ne vaut qu'entre champs EMPILES. Cote a cote
   (grille ou rangee flex), elle faisait descendre tous les champs sauf le
   premier de 18 px ; l'ecart y est deja porte par le gap du conteneur. */
:where([style*="display:grid"], [style*="display: grid"], .form-grid,
       [style*="display:flex"]:not([style*="column"]), [style*="display: flex"]:not([style*="column"])) > .form-group + .form-group { margin-top: 0; }
form .form-group + button,
form .form-group + .btn,
form .form-group + [type="submit"] { margin-top: 1.5rem; }
/* Meme respiration quand le bouton suit une GRILLE de champs (il collait
   au dernier champ : activation manuelle, fiches, parametres). */
form :where([style*="display:grid"], [style*="display: grid"], .form-grid) + :is(button, .btn, [type="submit"]),
form:not([style*="flex"]):not([style*="grid"]) > :has(input, select, textarea) + :is(button, .btn, [type="submit"]) { margin-top: 1.5rem; }

/* Panier leger */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  border: 1px solid var(--surface-container);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  text-decoration: none;
}
.cart-link:hover { background: var(--surface-container); }
.cart-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #000;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Libelle reserve aux lecteurs d'ecran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   PHASE 5B - COMMUNICATION, NOTIFICATIONS, ASSISTANT
   ===================================================================== */

/* Messages de retour (flash) */
.flash-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.flash {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem 0.875rem 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem; line-height: 1.45;
  animation: flash-in 0.25s ease-out;
}
.flash .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }
.flash__text { flex: 1; padding-top: 0.0625rem; }
.flash--success { background: rgba(37, 211, 102,0.12); color: #065F46; box-shadow: inset 0 0 0 1px rgba(37, 211, 102,0.22); }
.flash--error { background: var(--error-container); color: #7a1111; box-shadow: inset 0 0 0 1px rgba(186,26,26,0.18); }
.flash__close {
  border: 0; background: transparent; color: inherit; opacity: 0.6; cursor: pointer;
  width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center;
}
.flash__close:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.flash__close .material-symbols-outlined { font-size: 18px; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* ---------------------------------------------------------------------
   COMMUNICATION (Platform Admin)
   --------------------------------------------------------------------- */
.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cx-head__title { font-family: var(--font-body); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cx-head__desc { color: var(--on-surface-variant); max-width: 44rem; margin-top: 0.25rem; }
.cx-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.cx-pill::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.cx-pill--ok { background: rgba(37, 211, 102,0.12); color: #065F46; }
.cx-pill--warn { background: rgba(251,191,36,0.18); color: #92400E; }
.cx-pill--muted { background: var(--surface-container); color: var(--on-surface-variant); }

.cx-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface-container); border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1.5rem; width: fit-content; max-width: 100%; }
.cx-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; border-radius: 0.55rem; font-size: 0.8125rem; font-weight: 600; color: var(--on-surface-variant); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.cx-tab .material-symbols-outlined { font-size: 18px; }
.cx-tab:hover { color: var(--on-surface); }
.cx-tab.active { background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: 0 1px 2px rgba(11,28,48,0.08); }

.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.cx-aside { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1180px) { .cx-grid { grid-template-columns: 1fr; } .cx-aside { position: static; } }

.cx-card { background: var(--surface-container-lowest); border-radius: 1rem; box-shadow: 0 1px 3px rgba(11,28,48,0.05); }
.cx-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--surface-container); }
/* Telephone : la liste "Charger un modele" passe sous le titre au lieu de deborder */
.cx-card__head .form-select { max-width: 100%; }
.cx-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.cx-card__sub { font-size: 0.8125rem; color: var(--on-surface-variant); }
.cx-card__body { padding: 1.25rem; }
.cx-step { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--inverse-surface); color: #fff; font-size: 0.8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.cx-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 1.25rem; }
.cx-filters > .cx-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .cx-filters { grid-template-columns: 1fr; } }
.cx-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 0.5rem; }
.cx-hint { font-size: 0.75rem; color: var(--outline); margin-top: 0.375rem; }
.cx-inline { display: flex; gap: 0.5rem; align-items: center; }
.cx-inline .form-input, .cx-inline .form-select { height: 2.5rem; }

/* Controle segmente (radios) */
.cx-seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--surface-container-low); border-radius: 0.625rem; }
.cx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cx-seg label { padding: 0.4rem 0.75rem; border-radius: 0.45rem; font-size: 0.8125rem; font-weight: 600; color: var(--on-surface-variant); cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none; }
.cx-seg input:checked + label { background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: 0 1px 2px rgba(11,28,48,0.1); }
.cx-seg input:focus-visible + label { outline: 2px solid var(--primary-container); outline-offset: 1px; }

/* Puces a cocher */
.cx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cx-chips input { position: absolute; opacity: 0; pointer-events: none; }
.cx-chips label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 9999px; border: 1px solid var(--outline-variant); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: all 0.15s; user-select: none; background: var(--surface-container-lowest); }
.cx-chips label:hover { border-color: var(--outline); }
.cx-chips input:checked + label { background: var(--inverse-surface); border-color: var(--inverse-surface); color: #fff; }
.cx-chips input:focus-visible + label { outline: 2px solid var(--primary-container); outline-offset: 2px; }

/* Liste deroulante a choix multiples */
.cx-multi { position: relative; }
.cx-multi summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.5rem; background: var(--surface-container-low); font-size: 0.875rem; cursor: pointer; }
.cx-multi summary::-webkit-details-marker { display: none; }
.cx-multi[open] summary { box-shadow: 0 0 0 2px var(--primary-container); background: var(--surface-container-lowest); }
.cx-multi__panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.375rem); max-height: 15rem; overflow-y: auto; background: var(--surface-container-lowest); border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(11,28,48,0.16); padding: 0.375rem; }
.cx-multi__panel label { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.cx-multi__panel label:hover { background: var(--surface-container-low); }
.cx-multi__empty { padding: 0.75rem; font-size: 0.8125rem; color: var(--on-surface-variant); }

/* Compteur d'audience */
.cx-counter { padding: 1.25rem; }
.cx-counter__value { font-family: var(--font-body); font-size: 2.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity 0.15s; }
.cx-counter__label { font-size: 0.9375rem; color: var(--on-surface-variant); margin-top: 0.375rem; }
.cx-counter.is-loading .cx-counter__value { opacity: 0.35; }
.cx-counter__bar { height: 0.375rem; border-radius: 9999px; background: var(--surface-container); overflow: hidden; margin: 1rem 0 0.375rem; }
/* Remplissage anime par rognage (clip-path) : aucun recalcul de mise en page, extremites arrondies preservees. */
.cx-counter__bar span { display: block; width: 100%; height: 100%; background: var(--primary-container); border-radius: 9999px; transition: clip-path 0.35s ease; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
.cx-tag { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 0.4rem; background: var(--surface-container); color: var(--on-surface-variant); }
.cx-people { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cx-people li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.cx-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface-container-high); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: 0 0 auto; }

/* Variables inserables */
.cx-vars { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.cx-var { border: 1px dashed var(--outline-variant); background: transparent; color: var(--primary); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.4rem; cursor: pointer; }
.cx-var:hover { border-style: solid; background: rgba(37, 211, 102,0.06); }
.cx-count { font-size: 0.75rem; color: var(--outline); font-variant-numeric: tabular-nums; }
.cx-count.is-over { color: var(--error); font-weight: 700; }

/* Apercus par canal */
.cx-preview { background: var(--surface-container-low); border-radius: 0.875rem; padding: 1rem; }
.cx-preview__meta { font-size: 0.75rem; color: var(--on-surface-variant); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; }
.cx-preview iframe { width: 100%; height: 26rem; border: 0; border-radius: 0.625rem; background: #f3f6fb; }
.cx-push { display: flex; gap: 0.75rem; background: rgba(255,255,255,0.92); border-radius: 1rem; padding: 0.875rem; box-shadow: 0 8px 24px rgba(11,28,48,0.12); }
.cx-push__icon { width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; background: var(--primary-container); color: #000; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cx-push__app { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--outline); }
.cx-push__title { font-weight: 700; font-size: 0.9375rem; }
.cx-push__body { font-size: 0.875rem; color: var(--on-surface-variant); }
.cx-wa { background: #e5ddd5; border-radius: 0.875rem; padding: 1rem; }
.cx-wa__bubble { background: #dcf8c6; border-radius: 0.5rem 0.5rem 0 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-left: auto; max-width: 92%; word-break: break-word; }
.cx-notif { display: flex; gap: 0.75rem; background: var(--surface-container-lowest); border-radius: 0.75rem; padding: 0.875rem; }
.cx-notif__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary-container); margin-top: 0.4rem; flex: 0 0 auto; }

/* Indicateurs, tableaux, statuts */
.cx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 1100px) { .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cx-kpi { padding: 1.125rem 1.25rem; }
.cx-kpi__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant); display: flex; align-items: center; gap: 0.375rem; }
.cx-kpi__label .material-symbols-outlined { font-size: 17px; }
.cx-kpi__value { font-family: var(--font-body); font-size: 1.875rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 0.375rem; letter-spacing: -0.02em; }
.cx-kpi__hint { font-size: 0.75rem; color: var(--outline); margin-top: 0.125rem; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cx-table th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-surface-variant); padding: 0.75rem 1rem; border-bottom: 1px solid var(--surface-container); white-space: nowrap; }
.cx-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--surface-container); vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table tbody tr { transition: background 0.12s; }
.cx-table tbody tr:hover { background: var(--surface-container-low); }
.cx-num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 9999px; white-space: nowrap; }
.cx-status--sent, .cx-status--accepted { background: rgba(37, 211, 102,0.12); color: #065F46; }
.cx-status--sending, .cx-status--pending { background: rgba(59,130,246,0.12); color: #1e40af; }
.cx-status--prepared { background: rgba(37,211,102,0.14); color: #0b6b36; }
.cx-status--failed, .cx-status--invalid { background: var(--error-container); color: var(--error); }
.cx-status--expired, .cx-status--draft, .cx-status--cancelled { background: var(--surface-container); color: var(--on-surface-variant); }
.cx-channel { width: 2rem; height: 2rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cx-channel .material-symbols-outlined { font-size: 18px; }
.cx-channel--email { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.cx-channel--push { background: rgba(168,85,247,0.12); color: #7e22ce; }
.cx-channel--whatsapp { background: rgba(37,211,102,0.14); color: #0b8a43; }
.cx-channel--notification { background: rgba(251,191,36,0.18); color: #a16207; }
.cx-progress { height: 0.5rem; border-radius: 9999px; background: var(--surface-container); overflow: hidden; }
.cx-progress span { display: block; width: 100%; height: 100%; background: var(--primary-container); transition: clip-path 0.4s ease; }
.cx-note { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--on-surface-variant); background: var(--surface-container-low); border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.cx-note .material-symbols-outlined { font-size: 18px; color: var(--outline); flex: 0 0 auto; }
.cx-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.cx-error { color: var(--error); font-size: 0.8125rem; margin-top: 0.375rem; }

/* Fenetre de confirmation */
.cx-dialog { border: 0; border-radius: 1.25rem; padding: 0; width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 24px 64px rgba(11,28,48,0.25); }
.cx-dialog::backdrop { background: rgba(11,28,48,0.45); backdrop-filter: blur(3px); }
.cx-dialog__body { padding: 1.5rem; }
.cx-dialog__foot { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1rem 1.5rem; background: var(--surface-container-low); }
@media (prefers-reduced-motion: reduce) { .cx-counter__bar span, .cx-progress span { transition: none; } }
.cx-filters > * { min-width: 0; }
.cx-seg { max-width: 100%; }
.cx-inline { min-width: 0; }
.cx-inline .form-input[type=date] { min-width: 0; flex: 1 1 0; }

/* Cloche de notifications (espace marchand) */
.notif-bell { position: relative; }
.notif-bell__btn { position: relative; }
.notif-bell__badge { position: absolute; top: 0; right: 0; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 9999px; background: var(--error); color: #fff; font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface-container-lowest); }
.notif-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(22rem, calc(100vw - 1.5rem)); background: var(--surface-container-lowest); border-radius: 1rem; box-shadow: 0 16px 48px rgba(11,28,48,0.18); z-index: 60; overflow: hidden; animation: flash-in 0.18s ease-out; }
/* Telephone : la cloche n'est pas au bord droit (avatar a cote) ; ancre a
   droite, le panneau debordait a gauche de l'ecran. Fixe sous la barre. */
@media (max-width: 599px) {
  .notif-panel { position: fixed; top: 4.25rem; left: 0.75rem; right: 0.75rem; width: auto; }
}
.notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--surface-container); font-size: 0.9375rem; }
.notif-panel__link { border: 0; background: none; color: var(--primary); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.notif-panel__list { max-height: 22rem; overflow-y: auto; }
.notif-panel__empty { padding: 1.5rem 1rem; text-align: center; font-size: 0.875rem; color: var(--on-surface-variant); }
.notif-panel__foot { display: block; padding: 0.75rem 1rem; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--primary); text-decoration: none; border-top: 1px solid var(--surface-container); }
.notif-item { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem 0.75rem 1.5rem; text-decoration: none; color: inherit; position: relative; border-bottom: 1px solid var(--surface-container); }
.notif-item:hover { background: var(--surface-container-low); }
.notif-item strong { font-size: 0.875rem; }
.notif-item span { font-size: 0.8125rem; color: var(--on-surface-variant); line-height: 1.45; }
.notif-item small { font-size: 0.7rem; color: var(--outline); }
.notif-item.is-unread::before { content: ''; position: absolute; left: 0.625rem; top: 1.05rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--primary-container); }

/* Masquage fiable. La classe .hidden (menu utilisateur) n'etait definie
   nulle part : le menu restait ouvert en permanence. Et l'attribut
   [hidden] etait ecrase par les display:flex des composants (compteur de
   panier, pastille de notifications affichant "0"). */
.hidden, [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   ASSISTANT IA DE LA VITRINE
   Bureau : panneau de 400 px ancre en bas a droite.
   Mobile : tiroir quasi plein ecran.
   --------------------------------------------------------------------- */
.aiw-launch {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 89;
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 3.5rem; padding: 0 1.25rem 0 1rem; border: 0; border-radius: 9999px;
  background: var(--inverse-surface); color: #fff;
  font: 600 0.9375rem var(--font-body); cursor: pointer;
  box-shadow: 0 10px 28px rgba(11,28,48,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aiw-launch--beside { right: calc(1.5rem + 3.5rem + 0.75rem); }
.aiw-launch .material-symbols-outlined { font-size: 22px; color: var(--org-primary, var(--primary-container)); }
.aiw-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11,28,48,0.32); }
.aiw-launch:focus-visible { outline: 3px solid var(--org-primary, var(--primary-container)); outline-offset: 3px; }
.aiw-open .aiw-launch { opacity: 0; pointer-events: none; }

.aiw-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(11,28,48,0.25); }
.aiw-panel {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 95;
  width: 400px; height: min(640px, calc(100dvh - 3rem));
  display: flex; flex-direction: column;
  background: var(--surface-container-lowest); border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(11,28,48,0.28); overflow: hidden;
  animation: aiw-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes aiw-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.aiw-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 1rem 1.125rem; background: var(--inverse-surface); color: #fff; }
.aiw-avatar { width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; background: var(--org-primary, var(--primary-container)); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aiw-avatar .material-symbols-outlined { font-size: 22px; }
.aiw-head__text { flex: 1; min-width: 0; }
.aiw-head h2 { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.aiw-head p { font-size: 0.75rem; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiw-close { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.625rem; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.aiw-close:hover { background: rgba(255,255,255,0.18); }
.aiw-context { display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.625rem 1.125rem; font-size: 0.8125rem; color: var(--on-surface-variant); background: var(--surface-container-low); border-bottom: 1px solid var(--surface-container); }
.aiw-context .material-symbols-outlined { font-size: 16px; }
.aiw-context strong { color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiw-log { flex: 1; overflow-y: auto; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; overscroll-behavior: contain; }
.aiw-msg { max-width: 86%; padding: 0.625rem 0.875rem; border-radius: 1rem; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; animation: flash-in 0.2s ease-out; }
.aiw-msg--bot { align-self: flex-start; background: var(--surface-container-low); border-bottom-left-radius: 0.3rem; }
.aiw-msg--user { align-self: flex-end; background: var(--org-primary, var(--primary-container)); color: #fff; border-bottom-right-radius: 0.3rem; }
.aiw-typing { display: inline-flex; gap: 0.25rem; padding: 0.875rem 1rem; }
.aiw-typing span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--outline); animation: aiw-dot 1s infinite ease-in-out; }
.aiw-typing span:nth-child(2) { animation-delay: 0.15s; }
.aiw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiw-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aiw-suggest { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1.125rem 0.75rem; }
.aiw-chip { border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); border-radius: 9999px; padding: 0.4rem 0.75rem; font: 500 0.8125rem var(--font-body); color: var(--on-surface); cursor: pointer; }
.aiw-chip:hover { border-color: var(--org-primary, var(--primary-container)); color: var(--org-primary, var(--primary)); }
.aiw-form { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0 0.875rem; padding: 0.375rem 0.375rem 0.375rem 0.875rem; border-radius: 1rem; background: var(--surface-container-low); box-shadow: inset 0 0 0 1px var(--surface-container); }
.aiw-form:focus-within { box-shadow: inset 0 0 0 2px var(--org-primary, var(--primary-container)); background: var(--surface-container-lowest); }
.aiw-form textarea { flex: 1; border: 0; background: transparent; resize: none; font: 0.9375rem/1.45 var(--font-body); color: var(--on-surface); padding: 0.45rem 0; max-height: 120px; outline: none; }
.aiw-send { width: 2.375rem; height: 2.375rem; border: 0; border-radius: 0.75rem; background: var(--org-primary, var(--primary-container)); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aiw-send:disabled { opacity: 0.45; cursor: default; }
.aiw-wa { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.75rem 0.875rem 0; padding: 0.75rem; border-radius: 0.875rem; background: rgba(37,211,102,0.12); color: #0b6b36; font-weight: 700; font-size: 0.875rem; text-decoration: none; transition: background 0.15s, color 0.15s; }
.aiw-wa:hover, .aiw-wa--highlight { background: #25D366; color: #000; }
.aiw-wa--highlight { box-shadow: 0 8px 20px rgba(37,211,102,0.35); }
.aiw-legal { font-size: 0.6875rem; color: var(--outline); text-align: center; padding: 0.5rem 1rem 0.875rem; }

@media (max-width: 640px) {
  .aiw-launch { height: 3rem; padding: 0 1rem 0 0.875rem; font-size: 0.875rem; bottom: 1.75rem; }
  .aiw-launch--beside { right: calc(1.5rem + 3.5rem + 0.5rem); }
  .aiw-panel { left: 0; right: 0; bottom: 0; width: 100%; height: 92dvh; border-radius: 1.25rem 1.25rem 0 0; }
  .aiw-legal { padding-bottom: calc(0.875rem + env(safe-area-inset-bottom)); }
  .aiw-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .aiw-panel, .aiw-msg { animation: none; }
  .aiw-typing span { animation: none; opacity: 0.6; }
  .aiw-launch { transition: none; }
}

/* Graphiques du Marketing Hub (colonnes HTML/CSS, une serie, une teinte) */
.wa-chart { margin: 0; }
.wa-chart__plot { position: relative; height: 13rem; margin-left: 2.5rem; border-bottom: 1px solid var(--outline-variant); }
.wa-chart__axis { position: absolute; left: -2.5rem; top: 0; bottom: 0; width: 2.1rem; }
.wa-chart__axis span { position: absolute; right: 0; transform: translateY(-50%); font-size: 0.6875rem; color: var(--outline); font-variant-numeric: tabular-nums; }
.wa-chart__plot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%; border-top: 1px dashed var(--surface-container-high); border-bottom: 1px dashed var(--surface-container-high); pointer-events: none; }
.wa-chart__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.wa-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; border-radius: 4px 4px 0 0; }
.wa-col__bar { display: block; width: 100%; max-width: 28px; min-height: 0; background: var(--primary-container); border-radius: 4px 4px 0 0; transition: background 0.12s; }
.wa-chart__cols.is-dense .wa-col__bar { border-radius: 2px 2px 0 0; }
.wa-col:hover, .wa-col.is-active { background: rgba(37, 211, 102,0.07); }
.wa-col.is-active .wa-col__bar, .wa-col:hover .wa-col__bar { background: var(--primary); }
.wa-col:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-container); }
.wa-chart__tip { position: absolute; top: -0.25rem; transform: translateY(-100%); padding: 0.35rem 0.6rem; border-radius: 0.5rem; background: var(--inverse-surface); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(11,28,48,0.2); z-index: 2; }
.wa-chart__x { display: flex; justify-content: space-between; margin: 0.375rem 0 0 2.5rem; font-size: 0.6875rem; color: var(--outline); }
.wa-chart__table { margin-top: 0.75rem; }
.wa-chart__table summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant); }
.wa-bars { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.wa-bars__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; margin-bottom: 0.3rem; }
.wa-bars__label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-bars__value { font-variant-numeric: tabular-nums; color: var(--on-surface-variant); flex: 0 0 auto; }
.wa-bars__track { height: 0.4rem; border-radius: 9999px; background: var(--surface-container); overflow: hidden; }
.wa-bars__track span { display: block; height: 100%; border-radius: 9999px; background: var(--primary-container); }
.wa-funnel { display: flex; flex-direction: column; gap: 0.875rem; }
.wa-funnel__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; }
.wa-funnel__label { font-weight: 600; font-size: 0.875rem; }
.wa-funnel__value { font-family: var(--font-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.wa-funnel__track { grid-column: 1 / -1; height: 0.75rem; border-radius: 0.4rem; background: var(--surface-container); overflow: hidden; }
.wa-funnel__track span { display: block; height: 100%; border-radius: 0.4rem; background: var(--primary-container); }
.wa-funnel__rate { grid-column: 1 / -1; font-size: 0.75rem; color: var(--on-surface-variant); }
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .mk-grid-2 { grid-template-columns: 1fr; } }
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .mk-grid-2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wa-col__bar { transition: none; } }

/* ---------------------------------------------------------------------
   LOT B : vitrines historiques (restaurant, couture...) — page Menu /
   catalogue, fiche, sections d'accueil. Meme langage que l'experience
   commerce, sans la charger : vert #075E54 en texte (jamais #25D366 sur
   fond clair), noir sur #25D366, cibles >= 44 px, Manrope heritee.
   ------------------------------------------------------------------ */

/* Icones du sprite local (sans taille definie, le SVG fait 300x150). */
.ws-icon { width: var(--icon-size, 1.25rem); height: var(--icon-size, 1.25rem); flex: none; fill: currentColor; display: inline-block; vertical-align: middle; }
.ws-icon--lg { --icon-size: 1.5rem; }
.ws-icon--xl { --icon-size: 2rem; }

/* Cadre de page : fil d'Ariane, titre, compteur. */
.sf-page { padding: 1.5rem 0 3rem; }
.sf-page__head { margin-bottom: 1.25rem; }
.sf-page__title { font-family: 'Manrope', sans-serif; font-size: clamp(1.5rem, 1.2rem + 2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; }
.sf-page__count { color: var(--on-surface-variant); margin-top: 0.25rem; }
.sf-page__lead { color: var(--on-surface-variant); margin-bottom: 1.25rem; max-width: 44rem; }
.sf-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: 0.875rem; }
.sf-crumbs li { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; }
.sf-crumbs li + li::before { content: '/'; color: var(--outline-variant); }
.sf-crumbs a { color: #075E54; font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
.sf-crumbs [aria-current="page"] { color: var(--on-surface-variant); overflow-wrap: anywhere; }

/* Recherche. */
.sf-search { display: flex; gap: 0.625rem; margin-bottom: 1.25rem; }
.sf-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--outline-variant); border-radius: 0.75rem; font: inherit; background: var(--surface-container-lowest); color: inherit; }
.sf-search__submit { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 0.75rem; background: #111111; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* Puces de categories. */
.sf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.sf-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 1rem; border: 1px solid var(--outline-variant); border-radius: 9999px; background: var(--surface-container-lowest); color: var(--on-surface); text-decoration: none; font-size: 0.875rem; font-weight: 600; }
.sf-chip[aria-current="page"] { background: #111111; border-color: #111111; color: #fff; }
.sf-chip__count { font-size: 0.75rem; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; }
.sf-chip--sm { min-height: 2.25rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }

/* Barre d'outils : resultats + tri (bouton explicite, jamais au changement). */
.sf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.sf-results { font-size: 0.9375rem; }
.sf-results a { color: #075E54; font-weight: 600; }
.sf-sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.sf-sort select { min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--outline-variant); border-radius: 0.75rem; font: inherit; background: var(--surface-container-lowest); color: inherit; max-width: 12rem; }

/* Boutons. */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.625rem 1.25rem; border-radius: 0.75rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.sf-btn--dark { background: #111111; color: #fff; }
.sf-btn--ghost { background: transparent; border-color: var(--outline-variant); color: var(--on-surface); }
.sf-btn .ws-icon { --icon-size: 1.125rem; }

/* Etat vide. */
.sf-empty { text-align: center; padding: 3rem 1rem; color: var(--on-surface-variant); }
.sf-empty .ws-icon--xl { --icon-size: 3rem; opacity: 0.4; }
.sf-empty__title { font-size: 1.125rem; font-weight: 700; color: var(--on-surface); margin: 0.75rem 0 0.375rem; }
.sf-empty p { margin-bottom: 0.375rem; }
.sf-empty .sf-btn { margin-top: 1rem; }

/* Pagination : page en premier (?page=N&...). */
.sf-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.sf-pager a, .sf-pager span[aria-current="page"] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.75rem; font-weight: 700; text-decoration: none; }
.sf-pager a { border: 1px solid var(--outline-variant); color: var(--on-surface); }
.sf-pager span[aria-current="page"] { background: #111111; color: #fff; }
.sf-pager__gap { color: var(--on-surface-variant); }

/* Menu du restaurant : groupes, plats. */
.sf-menu__group { margin-bottom: 2rem; }
.sf-menu__category { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.125rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--surface-container); margin-bottom: 0.5rem; scroll-margin-top: 5rem; }
.sf-menu__list { list-style: none; margin: 0; padding: 0; }
.sf-dish { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem; margin-bottom: 0.75rem; background: var(--surface-container-lowest, #fff); border: 1px solid var(--surface-container); border-radius: 1rem; }
.sf-dish--out { opacity: 0.75; }
.sf-dish__media { flex: none; }
.sf-dish__media img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 0.75rem; display: block; }
.sf-dish__body { flex: 1 1 auto; min-width: 0; }
.sf-dish__name { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.sf-dish__name a { color: inherit; text-decoration: none; }
.sf-dish__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.sf-dish__desc { font-size: 0.875rem; color: var(--on-surface-variant); margin-top: 0.25rem; }
.sf-dish__aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.sf-dish__order { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #25D366; color: #000; }
.sf-dish__order .ws-icon { --icon-size: 1.375rem; }
/* LOT C : panier + WhatsApp cote a cote — « Ajouter » en bouton plein,
   WhatsApp en icone discrete. Le formulaire ne porte aucune marge. */
.sf-dish__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.sf-dish__add { margin: 0; flex: 0 1 auto; min-width: 0; }
.sf-dish__add-btn { width: 100%; white-space: nowrap; padding: 0.5rem 0.875rem; }
/* Cible tactile conservee a 2.75rem (44 px) pour les deux boutons. */
.sf-dish__order--small { flex: 0 0 auto; }

/* Badges et prix fideles (jamais de « 0 FCFA »). */
.sf-badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; }
.sf-badge--dark { background: #111; color: #fff; }
.sf-badge--sale { background: #e74c3c; color: #fff; }
.sf-badge--muted { background: var(--surface-container); color: var(--on-surface); }
.sf-price { font-weight: 800; font-size: 1.0625rem; }
.sf-price--lg { font-size: 1.375rem; }
.sf-price__from { font-size: 0.8125rem; font-weight: 500; color: var(--on-surface-variant); margin-right: 0.375rem; }
.sf-price__now--sale { color: var(--primary); }
.sf-price__was { display: block; font-size: 0.8125rem; font-weight: 500; text-decoration: line-through; color: var(--on-surface-variant); }
.sf-price__ask { font-weight: 600; font-size: 0.9375rem; color: var(--on-surface-variant); }

/* Grille catalogue (couture et autres verticales historiques). */
.sf-catalogue-grid, .products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.sf-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface-container); color: var(--outline-variant); }
.sf-card__placeholder .ws-icon--xl { --icon-size: 3rem; }
.sf-card__badges { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; gap: 0.375rem; }
.sf-card__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; margin-bottom: 0.375rem; overflow-wrap: anywhere; }
@media (max-width: 1023px) { .sf-catalogue-grid, .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sf-catalogue-grid, .products-grid { grid-template-columns: 1fr; } }

/* Fiche : galerie + infos. */
.sf-product__grid, .product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.sf-gallery__main { position: relative; border-radius: 1rem; overflow: hidden; background: var(--surface-container); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.sf-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-gallery__badge { position: absolute; top: 0.75rem; right: 0.75rem; }
.sf-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.sf-thumb { width: 4.5rem; height: 4.5rem; padding: 0; border: 2px solid transparent; border-radius: 0.75rem; overflow: hidden; cursor: pointer; background: var(--surface-container); }
.sf-thumb[aria-pressed="true"] { border-color: #111111; }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-product__category { color: #075E54; font-weight: 600; font-size: 0.875rem; }
.sf-product__title { font-family: 'Manrope', sans-serif; font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.25rem 0; overflow-wrap: anywhere; }
.sf-product__ref { font-size: 0.8125rem; color: var(--on-surface-variant); }
.sf-product__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.sf-stock { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.sf-stock--ok { color: #075E54; }
.sf-stock--out { color: var(--on-surface-variant); }
.sf-promos { list-style: none; margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--surface-container-low); display: grid; gap: 0.375rem; font-size: 0.875rem; }
.sf-promos li { display: flex; align-items: center; gap: 0.5rem; }
.sf-attrs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0 0 1rem; font-size: 0.9375rem; }
.sf-attrs dt { color: var(--on-surface-variant); }
.sf-attrs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sf-buy { display: grid; gap: 0.75rem; margin: 1rem 0; }
.sf-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0.75rem 1.5rem; border-radius: 0.875rem; background: #25D366; color: #000; font-weight: 800; text-decoration: none; }
.sf-wa-btn .ws-icon { --icon-size: 1.375rem; }
.sf-buy__cart { display: flex; gap: 0.625rem; align-items: stretch; }
.sf-qty { max-width: 5rem; min-height: 2.75rem; }
.sf-buy__status { font-size: 0.875rem; }
.sf-buy__note { font-size: 0.8125rem; color: var(--on-surface-variant); }
.sf-product__lead { font-size: 1.0625rem; }
.sf-desc { margin-top: 1.5rem; }
.sf-desc__title { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.5rem; }
.sf-desc__text { overflow-wrap: anywhere; }
.sf-related { margin-top: 3rem; }
.sf-related__title { font-size: 1.375rem; font-weight: 800; margin-bottom: 1.25rem; }
@media (max-width: 900px) { .sf-product__grid, .product-detail-grid { grid-template-columns: 1fr; } }

/* Sections d'accueil : intertitres, categories du menu, infos. */
.sf-section { padding: 2.5rem 0; scroll-margin-top: 5rem; }
.sf-section--narrow .container, .container.sf-section--narrow { max-width: 56rem; }
.sf-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #075E54; margin-bottom: 0.75rem; }
.sf-section__title { font-family: 'Manrope', sans-serif; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.sf-section__lead { color: var(--on-surface-variant); margin-bottom: 1.5rem; }
.sf-section__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sf-section__foot { margin-top: 1.5rem; }
.sf-menu-cats__list { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.sf-menu-cat { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 1rem 0.5rem 0.5rem; border: 1px solid var(--outline-variant); border-radius: 9999px; background: var(--surface-container-lowest); text-decoration: none; color: var(--on-surface); }
.sf-menu-cat__img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.sf-menu-cat__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface-container); color: var(--on-surface-variant); }
.sf-menu-cat__text { display: flex; flex-direction: column; line-height: 1.3; }
.sf-menu-cat__name { font-weight: 700; }
.sf-menu-cat__count { font-size: 0.75rem; color: var(--on-surface-variant); }
.sf-more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; color: #075E54; font-weight: 700; font-size: 0.875rem; }
.sf-info__line { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 1.0625rem; }
.sf-info__line .ws-icon--lg { color: #075E54; margin-top: 0.125rem; }
.sf-info .sf-btn { margin-top: 1rem; }
@media (max-width: 639px) {
  .sf-search { flex-direction: column; }
  .sf-search__submit { justify-content: center; }
  .sf-dish__media img { width: 4.5rem; height: 4.5rem; }
  /* LOT C : sur telephone, « Ajouter » + WhatsApp passent sous le plat,
     sur toute la largeur — le nom du plat garde sa place. */
  .sf-dish:has(.sf-dish__actions) { flex-wrap: wrap; }
  .sf-dish:has(.sf-dish__actions) .sf-dish__aside { flex: 1 0 100%; align-items: stretch; }
  .sf-dish__actions { width: 100%; }
  .sf-dish__add { flex: 1 1 auto; }
  .sf-buy__cart { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-dish__order, .sf-wa-btn, .sf-thumb { transition: none; }
}

/* ---------------------------------------------------------------------
   LOT B.2 : prestations (soins, formules, sur mesure, livraison...) et
   LOT C : annonces (filtres, fiche). Meme langage que le LOT B : vert
   #075E54 en texte, noir sur #25D366, cibles >= 44 px.
   ------------------------------------------------------------------ */
.sf-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.sf-svc-grid > li { display: flex; }
.sf-svc { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--outline-variant); border-radius: 1rem; overflow: hidden; background: var(--surface-container-lowest); }
.sf-svc__media { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--surface-container); }
.sf-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-svc__body { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; padding: 1rem 1.125rem 1.125rem; }
.sf-svc__cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #075E54; }
.sf-svc__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sf-svc__name a { color: inherit; text-decoration: none; }
.sf-svc__name a:hover { text-decoration: underline; }
.sf-svc__meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.sf-svc__meta .ws-icon { --icon-size: 1rem; }
.sf-svc__desc { font-size: 0.875rem; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.sf-svc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.75rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--surface-container); }
.sf-service__solo { max-width: 44rem; }
@media (max-width: 1023px) { .sf-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sf-svc-grid { grid-template-columns: 1fr; } }

.sf-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem 1rem; align-items: end; margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); }
.sf-filters__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.8125rem; font-weight: 600; }
.sf-filters__field--wide { grid-column: 1 / -1; }
.sf-filters input, .sf-filters select { min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--outline-variant); border-radius: 0.75rem; font: inherit; font-weight: 400; background: var(--surface-container-lowest); color: inherit; width: 100%; }
.sf-filters__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; grid-column: 1 / -1; }
.sf-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.sf-listing__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "media aside" "details aside"; gap: 1.5rem 2rem; align-items: start; }
.sf-listing__media { grid-area: media; min-width: 0; }
.sf-listing__details { grid-area: details; min-width: 0; }
.sf-gallery__main--wide { aspect-ratio: 4 / 3; }
.sf-listing__aside { grid-area: aside; padding: 1.5rem; position: sticky; top: 5.5rem; }
.sf-listing__cta { width: 100%; margin-top: 1.25rem; }
.sf-listing__contact { margin-top: 1rem; }
.sf-listing__contact a { color: #075E54; font-weight: 600; }
.sf-listing .sf-chips { list-style: none; padding: 0; }
/* Mobile : photo, puis titre / prix / CTA, puis description (l'essentiel sans defiler). */
@media (max-width: 900px) { .sf-listing__grid { grid-template-columns: 1fr; grid-template-areas: "media" "aside" "details"; } .sf-listing__aside { position: static; } }

/* ---------------------------------------------------------------------
   Recherche transverse : acces dans l'en-tete (cible 44 px) et page de
   resultats groupes par module (vocabulaire de la verticale).
   ------------------------------------------------------------------ */
.public-header-search { width: 2.75rem; height: 2.75rem; }
.public-header-search[aria-current="page"] { background: var(--surface-container); }
.sf-result-group { margin-top: 2rem; }
.sf-result-group__title { display: flex; align-items: baseline; gap: 0.5rem; font-family: 'Manrope', sans-serif; font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; }
.sf-result-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.sf-result { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem 0; border-bottom: 1px solid var(--surface-container); }
.sf-result__img { flex: none; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 0.75rem; background: var(--surface-container); }
.sf-result__body { flex: 1 1 auto; min-width: 0; }
.sf-result__title { font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.sf-result__title a { color: inherit; text-decoration: none; display: inline-block; min-height: 1.5rem; }
.sf-result__title a:hover { text-decoration: underline; }
.sf-result__meta { font-size: 0.8125rem; font-weight: 600; color: #075E54; margin-top: 0.125rem; }
.sf-result__excerpt { font-size: 0.875rem; color: var(--on-surface-variant); margin-top: 0.25rem; overflow-wrap: anywhere; }
.sf-result__price { flex: none; text-align: right; }
.sf-search-page__browse { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 639px) {
  .sf-result { flex-wrap: wrap; }
  .sf-result__price { width: 100%; text-align: left; }
  .sf-result__img + .sf-result__body + .sf-result__price { padding-left: 5.375rem; }
}

/* ---------------------------------------------------------------------
   Phases finales (accessibilite) : cibles tactiles >= 44 px relevees par
   l'audit 12 largeurs (pied de page, marque, etiquettes, landing, resultats).
   ------------------------------------------------------------------ */
.public-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.public-brand, .lp-brand { min-height: 2.75rem; }
.lp-header-cta { min-height: 2.75rem; }
.lp-footer-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.sf-chip--sm { min-height: 2.75rem; }
/* Resultat de recherche : toute la ligne est cliquable (lien etire). */
.sf-result { position: relative; }
.sf-result__title a::after { content: ''; position: absolute; inset: 0; }
.sf-result__title a:focus-visible { outline: none; }
.sf-result:focus-within { outline: 2px solid #075E54; outline-offset: 2px; border-radius: 0.5rem; }

/* LOT D : reseaux sociaux du createur (section A propos), cibles >= 44 px. */
.sf-social { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.sf-social__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--outline-variant); border-radius: 9999px; color: var(--on-surface); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.sf-social__link:hover { background: var(--surface-container); }
.sf-social__link .ws-icon { --icon-size: 1.125rem; }

/* LOT C : bandeau de confirmation d'ajout au panier, repris de
   resources/css/ds/50-commerce.css pour les vitrines qui ne chargent pas
   commerce.css (carte du restaurant). Les deux hauteurs de barres
   n'existent que dans l'experience commerce : sans valeur de repli le
   calc() serait invalide et le bandeau se placerait n'importe ou. */
.sfc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sfc-bottom-h, 0rem) + var(--sfc-cartbar-h, 0rem) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: #111111;
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}
/* Region annoncee toujours presente ; invisible tant qu'elle est vide */
.sfc-toast:empty { opacity: 0; pointer-events: none; padding: 0; box-shadow: none; }
.sfc-toast a { color: #FFFFFF; font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
@media (min-width: 1024px) { .sfc-toast { bottom: 1.5rem; } }

/* LOT D - Precisions de la demande saisies dans la vitrine (adresses, dates,
   creneau, vehicule). Couleurs ECRITES EN DUR, volontairement : les jetons
   --surface / --on-surface ne vont pas par paire. storefront.css passe
   --surface a #1B1B1B dans .ws-section--inverse, .ws-on-dark et le theme
   premium SANS toucher --on-surface, qui reste #111111 : un champ de saisie
   serait alors du texte noir sur fond noir. Un formulaire se lit toujours,
   quel que soit le theme choisi par le marchand. */
.wa-intent { margin: 1.25rem 0 0.875rem; padding: 1rem; border: 1px solid #D5DAE1; border-radius: 0.875rem; background: #FFFFFF; color: #16181D; }
.wa-intent__title { font-size: 0.9375rem; font-weight: 800; margin: 0 0 0.75rem; color: #16181D; }
.wa-intent__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.wa-intent__field { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.wa-intent__label { font-size: 0.8125rem; font-weight: 600; color: #4A5059; }
/* color-scheme: light force le calendrier natif et son icone en clair, meme
   dans une section sombre : sinon le navigateur les rend illisibles. */
.wa-intent__input { min-height: 2.75rem; width: 100%; max-width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #A9B0BA; border-radius: 0.625rem; background: #FFFFFF; color: #16181D; color-scheme: light; font: inherit; font-size: 1rem; }
.wa-intent__input::placeholder { color: #6B7280; opacity: 1; }
.wa-intent__input:focus-visible { outline: 2px solid #16181D; outline-offset: 1px; }
.wa-intent__hint { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #4A5059; }
/* Une adresse est plus longue qu'une date : elle prend toute la largeur. */
.wa-intent__field--wide { grid-column: 1 / -1; }
/* L'en-tete de la vitrine est collant (69 px) : sans cette marge, le champ
   que le navigateur amene a l'ecran quand on le touche finit cache dessous. */
.wa-intent, .wa-intent__field { scroll-margin-top: 5.25rem; }

/* Lien de retour en haut d'une fiche : une seule ligne, jamais de repli,
   et une cible tactile de 2,75 rem comme partout ailleurs. */
.sf-backlink { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; margin-bottom: 0.5rem; color: #075E54; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.sf-backlink:hover { text-decoration: underline; }
.sf-backlink .ws-icon { --icon-size: 1.125rem; }

/* Quantite du panier : moins, valeur, plus. Couleurs en dur pour la meme
   raison que le bloc du lot D -- ce groupe doit rester lisible sur tous
   les themes. 2,75 rem de cible tactile, la regle du projet. */
.cart-qty { display: inline-flex; align-items: stretch; border: 1px solid #A9B0BA; border-radius: 0.625rem; overflow: hidden; background: #FFFFFF; }
.cart-qty__step { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: #FFFFFF; color: #16181D; font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer; }
.cart-qty__step:hover:not(:disabled) { background: #F1F3F6; }
.cart-qty__step:disabled { color: #B4BAC3; cursor: default; }
.cart-qty__step:focus-visible { outline: 2px solid #16181D; outline-offset: -2px; }
.cart-qty__field { width: 3rem; min-height: 2.75rem; border: 0; border-left: 1px solid #DDE1E6; border-right: 1px solid #DDE1E6; background: #FFFFFF; color: #16181D; text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cart-qty__field::-webkit-outer-spin-button, .cart-qty__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty__field:focus-visible { outline: 2px solid #16181D; outline-offset: -2px; }