/* ==========================================================================
   Walexia — design system v5
   Univers conversationnel clair : vert Walexia #34D36B pour les fins de grands titres et les pictogrammes,
   vert foncé #15803D pour les petits textes (surtitres, liens ; contraste AA), bulles,
   avatars et statuts ; Walexia reste la marque. Une seule famille, Arimo
   (titres et lecture). Démonstration dans un iPhone : section 22.
   Toutes les couleurs passent par les tokens
   sémantiques ci-dessous (alimentés par theme.json via --wp--preset--*).
   Tout est préfixé .wx : aucune règle ne touche les pages du thème existant.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
.wx {
  /* Palette de base (famille WhatsApp) */
  --wx-green-500: var(--wp--preset--color--wx-accent, #34D36B);
  --wx-green-600: #2BBE5F;
  --wx-green-700: var(--wp--preset--color--wx-accent-text, #15803D);
  --wx-green-900: var(--wp--preset--color--wx-deep, #0B3B2E);
  --wx-green-100: var(--wp--preset--color--wx-bubble, #D9FDD3);
  --wx-green-50: var(--wp--preset--color--wx-bg-tint, #EDFBF2);
  /* Verts et bleu de WhatsApp (bandeau, liseré de l'en-tête, pied de page) */
  --wx-wa-green: #34D36B;
  --wx-wa-teal: #128C7E;
  --wx-wa-teal-dark: #075E54;
  --wx-wa-blue: #34B7F1;
  /* Gamme unique tirée de #34D36B (part de vert sur blanc) et dégradés progressifs : tout le site en découle */
  --wx-g-03: color-mix(in srgb, var(--wx-color-accent) 3%, #FFFFFF);
  --wx-g-06: color-mix(in srgb, var(--wx-color-accent) 6%, #FFFFFF);
  --wx-g-10: color-mix(in srgb, var(--wx-color-accent) 10%, #FFFFFF);
  --wx-g-16: color-mix(in srgb, var(--wx-color-accent) 16%, #FFFFFF);
  --wx-g-24: color-mix(in srgb, var(--wx-color-accent) 24%, #FFFFFF);
  --wx-g-32: color-mix(in srgb, var(--wx-color-accent) 32%, #FFFFFF);
  --wx-grad-band: linear-gradient(90deg, var(--wx-g-32) 0%, var(--wx-g-16) 30%, var(--wx-g-06) 65%, var(--wx-g-10) 100%);
  --wx-grad-soft: linear-gradient(180deg, #FFFFFF 0%, var(--wx-g-03) 55%, var(--wx-g-06) 100%);
  --wx-grad-card: linear-gradient(160deg, var(--wx-g-24) 0%, var(--wx-g-10) 55%, var(--wx-g-03) 100%);
  --wx-grad-foot: linear-gradient(180deg, var(--wx-g-03) 0%, var(--wx-g-10) 40%, var(--wx-g-24) 80%, var(--wx-g-32) 100%);

  /* Rôles sémantiques */
  --wx-color-heading: var(--wp--preset--color--wx-ink, #0E1F18);
  --wx-color-text: var(--wp--preset--color--wx-text, #24332D);
  --wx-color-text-muted: var(--wp--preset--color--wx-muted, #54656F);
  --wx-color-accent: var(--wx-green-500);
  --wx-color-accent-text: var(--wx-green-700);
  --wx-color-action: var(--wx-green-500);
  --wx-color-action-hover: var(--wx-green-600);
  --wx-color-on-action: var(--wx-color-heading);
  --wx-color-marker: color-mix(in srgb, var(--wx-green-500) 48%, transparent);
  --wx-color-bg: var(--wp--preset--color--wx-bg, #F7FDF9);
  --wx-color-bg-tint: var(--wx-green-50);
  --wx-color-surface: var(--wp--preset--color--wx-surface, #FFFFFF);
  --wx-color-surface-muted: color-mix(in srgb, var(--wx-color-heading) 4%, var(--wx-color-surface));
  --wx-color-chat: var(--wp--preset--color--wx-chat, #EFEAE2);
  --wx-color-bubble-in: var(--wx-color-surface);
  --wx-color-bubble-out: var(--wx-green-100);
  --wx-color-chat-meta: var(--wx-color-text-muted);
  --wx-color-tick: #53BDEB;
  --wx-color-border: color-mix(in srgb, var(--wx-color-heading) 10%, transparent);
  --wx-color-border-strong: color-mix(in srgb, var(--wx-color-heading) 18%, transparent);
  --wx-color-deep: var(--wx-green-900);
  --wx-color-on-deep: #F2FBF5;
  --wx-color-on-deep-muted: #B5CEC4;
  --wx-color-warn-bg: #FFF1CC;
  --wx-color-warn-text: #7A4A00;
  --wx-color-danger: #B3261E;
  --wx-color-danger-bg: #FDECEB;
  --wx-color-focus: var(--wx-color-heading);
  /* Appareil (démonstration iPhone) : cadre titane clair, verre, écran */
  --wx-color-device-hi: #F4F6F7;
  --wx-color-device: #C7CED3;
  --wx-color-device-lo: #98A2A9;
  --wx-color-device-glass: #0B0F12;
  --wx-color-device-edge: #7C868D;
  --wx-color-device-lens: #22324D;
  --wx-color-wa-bar: #F7F8F6;
  --wx-color-car-stage: #E3E9E4;
  /* Canaux d'origine (démonstration « points de contact ») : une teinte vive par canal (pictogrammes, traits)
     et une teinte foncée lisible en texte ; seul WhatsApp garde le vert, point d'arrivée de toutes les couleurs. */
  --wx-ch-instagram: #D62976;
  --wx-ch-instagram-ink: #A8175A;
  --wx-ch-instagram-fill: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 28%, #D62976 58%, #962FBF 82%, #4F5BD5 100%);
  --wx-ch-facebook: #1877F2;
  --wx-ch-facebook-ink: #0B5BC4;
  --wx-ch-site: #6366F1;
  --wx-ch-site-ink: #4338CA;
  --wx-ch-email: #F97316;
  --wx-ch-email-ink: #C2410C;
  --wx-ch-sms: #0EA5E9;
  --wx-ch-sms-ink: #0369A1;
  --wx-ch-rcs: #8B5CF6;
  --wx-ch-rcs-ink: #6D28D9;
  --wx-ch-qr: #EAB308;
  --wx-ch-qr-ink: #854D0E;
  --wx-ch-display: #F43F5E;
  --wx-ch-display-ink: #BE123C;
  --wx-ch-google: #EA4335;
  --wx-ch-google-ink: #C5221F;
  --wx-ch-meta-fill: linear-gradient(45deg, var(--wx-ch-facebook) 0%, #7A3FF2 55%, var(--wx-ch-instagram) 100%);
  --wx-color-traffic-red: #FF5F57;
  --wx-color-traffic-yellow: #FEBC2E;
  --wx-color-traffic-green: #28C840;

  /* Alias courts utilisés par les composants */
  --wx-ink: var(--wx-color-heading);
  --wx-text: var(--wx-color-text);
  --wx-muted: var(--wx-color-text-muted);
  --wx-line: var(--wx-color-border);
  --wx-line-strong: var(--wx-color-border-strong);
  --wx-focus: var(--wx-color-focus);
  --wx-link: var(--wx-color-accent-text);

  /* Typographie : Arimo (choix de l'identité), une échelle par rôle ; secours Arial aux métriques identiques */
  --wx-font-display: var(--wp--preset--font-family--wx-display, Arimo, Arial, "Helvetica Neue", Helvetica, sans-serif);
  --wx-font-text: var(--wp--preset--font-family--wx-text, Arimo, Arial, "Helvetica Neue", Helvetica, sans-serif);
  --wx-fs-display: var(--wp--preset--font-size--wx-display, clamp(2.75rem, 1.5rem + 4.7vw, 5.5rem));
  --wx-fs-title: var(--wp--preset--font-size--wx-title, clamp(2.125rem, 1.45rem + 2.7vw, 4rem));
  --wx-fs-subtitle: var(--wp--preset--font-size--wx-subtitle, clamp(1.375rem, 1.2rem + .7vw, 1.875rem));
  --wx-fs-card: 1.1875rem;
  --wx-fs-lead: var(--wp--preset--font-size--wx-lead, clamp(1.125rem, 1.05rem + .35vw, 1.375rem));
  --wx-fs-body: 1.0625rem;
  --wx-fs-small: .9375rem;
  --wx-fs-caption: .875rem;

  /* Espaces, rayons, ombres */
  --wx-gutter: clamp(16px, 4.5vw, 48px);
  --wx-inset: clamp(8px, 1.4vw, 20px);
  --wx-section-pad: var(--wp--preset--spacing--wx-section, clamp(40px, 28px + 4vw, 88px));
  --wx-max: 1240px;
  --wx-max-wide: 1360px;
  --wx-max-text: 780px;
  --wx-r-xl: clamp(26px, 2.6vw, 40px);
  --wx-r-lg: clamp(20px, 2vw, 28px);
  --wx-r-md: 18px;
  --wx-r-sm: 12px;
  --wx-shadow-color: color-mix(in srgb, var(--wx-color-heading) 100%, transparent);
  --wx-shadow-sm: 0 1px 1px color-mix(in srgb, var(--wx-color-heading) 4%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--wx-color-heading) 16%, transparent);
  --wx-shadow-md: 0 2px 4px color-mix(in srgb, var(--wx-color-heading) 5%, transparent), 0 22px 48px -20px color-mix(in srgb, var(--wx-color-heading) 26%, transparent);
  --wx-shadow-lg: 0 4px 12px color-mix(in srgb, var(--wx-color-heading) 6%, transparent), 0 48px 100px -36px color-mix(in srgb, var(--wx-color-heading) 34%, transparent);
  --wx-shadow-action: 0 1px 2px color-mix(in srgb, var(--wx-color-heading) 12%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--wx-green-700) 55%, transparent);

  /* Mouvement */
  --wx-ease: cubic-bezier(.22, 1, .36, 1);
  --wx-ease-soft: cubic-bezier(.4, .14, .3, 1);
  --wx-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Masques d'icônes CSS (mêmes tracés que la famille de pictogrammes) */
  --wx-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wx-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8z' fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wx-color-star: #F5B301;
  /* Pictogrammes utilisés dans des blocs natifs (paragraphes, listes) : générés depuis assets/icons/icons.json */
  --wx-i-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 4.5l1.3 3.6a2.5 2.5 0 0 0 1.6 1.6l3.6 1.3-3.6 1.3a2.5 2.5 0 0 0-1.6 1.6l-1.3 3.6-1.3-3.6a2.5 2.5 0 0 0-1.6-1.6L4 11l3.6-1.3a2.5 2.5 0 0 0 1.6-1.6z'/%3E%3Cpath d='M18 3v4M16 5h4'/%3E%3Cpath d='M18.5 16.5v3M17 18h3'/%3E%3C/svg%3E");
  --wx-i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 13.5V12a7.5 7.5 0 0 1 15 0v1.5'/%3E%3Cpath d='M4.5 13.5A1.5 1.5 0 0 1 6 12h1.5v5H6a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3Cpath d='M19.5 13.5A1.5 1.5 0 0 0 18 12h-1.5v5H18a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3Cpath d='M18 17v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E");
  --wx-i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 16h-1a1 1 0 0 1-1-1v-2.7l1.9-4.4a2 2 0 0 1 1.8-1.2h9.6a2 2 0 0 1 1.8 1.2l1.9 4.4V15a1 1 0 0 1-1 1h-1'/%3E%3Cpath d='M9 16h6'/%3E%3Cpath d='M3.5 12.3h17'/%3E%3Ccircle cx='7.25' cy='16.25' r='1.75'/%3E%3Ccircle cx='16.75' cy='16.25' r='1.75'/%3E%3C/svg%3E");
  --wx-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.2L12 4l8 6.2V19a1 1 0 0 1-1 1h-4.5v-5.5h-5V20H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --wx-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.8 8h12.4l-.9 11.2a1.5 1.5 0 0 1-1.5 1.3H8.2a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
  --wx-i-health: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5s-7-4.1-7-9.3A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7 2.2c0 5.2-7 9.3-7 9.3z'/%3E%3Cpath d='M7.5 12.5h2l1.2-2 2 4 1.2-2h2.6'/%3E%3C/svg%3E");
  --wx-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.5L6 4.5h12l1.5 5'/%3E%3Cpath d='M4.5 9.5a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0'/%3E%3Cpath d='M5.5 12v8h13v-8'/%3E%3Cpath d='M10 20v-4h4v4'/%3E%3C/svg%3E");
  --wx-i-utensils: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5V8a2.5 2.5 0 0 0 5 0V3.5'/%3E%3Cpath d='M8.5 3.5V8M8.5 10.5v10'/%3E%3Cpath d='M17.5 20.5v-17c-2.2 1.3-3.2 3.8-3.2 6.8v3.2h3.2'/%3E%3C/svg%3E");
  --wx-i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V20'/%3E%3Cpath d='M15 9.5h3a1.5 1.5 0 0 1 1.5 1.5v9'/%3E%3Cpath d='M3.5 20h17'/%3E%3Cpath d='M8.5 8h3M8.5 11.5h3M8.5 15h3'/%3E%3C/svg%3E");
  --wx-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3.5L5.5 13.5h6l-1 7 7.5-10h-6z'/%3E%3C/svg%3E");
  --wx-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-1.6-1.3-3.9-2-7.5-2v12.5c3.6 0 5.9.7 7.5 2 1.6-1.3 3.9-2 7.5-2V5c-3.6 0-5.9.7-7.5 2z'/%3E%3Cpath d='M12 7v12.5'/%3E%3C/svg%3E");
  --wx-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5a4.5 4.5 0 0 0-4.3 5.8L4.5 17a2 2 0 0 0 2.8 2.8l6.7-6.7a4.5 4.5 0 0 0 5.8-4.3l-2.6 2.6-2.6-.7-.7-2.6z'/%3E%3C/svg%3E");
  --wx-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.5v5.5c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --wx-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
}

/* 2. Base (limitée au gabarit Walexia et aux sections .wx) ----------------- */
html:has(body.wx-page) { scroll-padding-top: 124px; }
@media (max-width: 1099px) { html:has(body.wx-page) { scroll-padding-top: 76px; } }
body.wx-page {
  margin: 0;
  background: linear-gradient(180deg, var(--wx-g-10, #EFFBF3) 0, var(--wx-color-bg, #F7FDF9) 900px, var(--wx-color-bg, #F7FDF9) calc(100% - 1400px), var(--wx-g-10, #EFFBF3) 100%) var(--wx-color-bg, #F7FDF9);
  color: var(--wx-color-text);
  font-family: var(--wx-font-text);
  font-size: var(--wx-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.wx { font-family: var(--wx-font-text); color: var(--wx-color-text); }
.wx *, .wx *::before, .wx *::after { box-sizing: border-box; }
.wx :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.wx :where(h1, h2, h3, h4) { color: var(--wx-color-heading); font-family: var(--wx-font-display); font-optical-sizing: auto; text-wrap: balance; }
.wx :where(p, li) { text-wrap: pretty; }
.wx :where(ul, ol) { padding: 0; }
.wx img, .wx video, .wx svg { max-width: 100%; }
.wx img { height: auto; }
/* Les espacements viennent des composants : on neutralise ceux des mises en page natives. */
.wx .is-layout-flow > *, .wx .is-layout-constrained > * { margin-block: 0; }
.wx .wp-block-columns { margin-bottom: 0; }
.wx .wp-block-buttons > .wp-block-button { margin: 0; }
.wx .wp-block-image { margin: 0; }
.wx a:not([class]) {
  color: var(--wx-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color 160ms var(--wx-ease-soft);
}
.wx a:not([class]):hover { color: var(--wx-color-heading); }
.wx :focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 3px; border-radius: 6px; }
.wx mark { background: transparent; color: inherit; }
.wx .has-wx-accent-text-color { color: var(--wx-color-accent-text); }
.wx .has-wx-accent-color { color: var(--wx-color-accent); }
.wx .has-wx-muted-color { color: var(--wx-color-text-muted); }
.wx .has-wx-ink-color { color: var(--wx-color-heading); }

/* Pictogrammes (famille unique, inline SVG décoratif) */
.wx .wx-ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.wx-visually-hidden, .wx .wx-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wx-skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px; background: var(--wx-color-heading); color: var(--wx-color-surface);
  font: 600 15px/1 var(--wx-font-text); text-decoration: none;
}
.wx-skip-link:focus { top: 12px; outline: 2px solid var(--wx-color-accent); outline-offset: 2px; }

/* 3. Mise en page ---------------------------------------------------------- */
.wx .wx-container {
  width: 100%;
  max-width: calc(var(--wx-max) + 2 * var(--wx-gutter));
  margin-inline: auto;
  padding-inline: var(--wx-gutter);
}
.wx .wx-container--text { max-width: calc(var(--wx-max-text) + 2 * var(--wx-gutter)); }
.wx .wx-center { text-align: center; }
.wx .wx-center > :is(.wx-lead, p) { margin-inline: auto; }
.wx.wx-section, .wx .wx-section { padding-block: var(--wx-section-pad); position: relative; }
/* Le rembourrage de la section fait seul l'espace : la marge du premier ou du dernier élément ne s'y ajoute pas
   (ex. une grille prévue sous un en-tête, placée en tête de section). */
.wx .wx-section > .wx-container > :first-child, .wx.wx-section > .wx-container > :first-child { margin-top: 0; }
.wx .wx-section > .wx-container > :last-child, .wx.wx-section > .wx-container > :last-child { margin-bottom: 0; }
.wx.wx-section--tint {
  background: var(--wx-grad-soft);
  border-radius: var(--wx-r-xl);
  margin-inline: var(--wx-inset);
  max-width: calc(1480px - 2 * var(--wx-inset));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wx-color-accent) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 9%, transparent);
}
.wx.wx-section--green { background: linear-gradient(180deg, var(--wx-g-16), var(--wx-g-06) 60%, var(--wx-color-bg)); }
@media (min-width: 1520px) { .wx.wx-section--tint { margin-inline: auto; } }
.wx .wx-section-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 860px; }
.wx .wx-section-head.wx-center { margin-inline: auto; justify-items: center; }
.wx .wx-section-head--split { max-width: none; }
@media (min-width: 960px) {
  .wx .wx-section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 48px; }
  .wx .wx-section-head--split > .wp-block-group { display: grid; gap: 18px; }
}
@media (max-width: 959px) { .wx .wx-section-head--split > .wp-block-group { display: grid; gap: 18px; } }

/* 4. Typographie (rôles) ---------------------------------------------------- */
.wx .wx-eyebrow {
  font-family: var(--wx-font-text);
  font-size: var(--wx-fs-caption);
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wx-color-accent-text);
}
.wx .wx-eyebrow--dot {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--wx-color-surface); color: var(--wx-color-accent-text);
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
}
/* Surtitre placé dans le H1 (accueil) : le mot-clé fait partie du titre principal, l'affichage reste celui du surtitre */
.wx .wx-display > .wx-h1-kicker { display: flex; width: fit-content; margin: 0 0 clamp(16px, 2vw, 22px); line-height: 1.2; }
.wx .wx-eyebrow--dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--wx-color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 24%, transparent);
}
.wx .wx-display {
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}
/* Mot mis en avant : trait de surligneur vert (repris des motions Walexia) */
.wx .wx-display mark, .wx .wx-title mark.wx-marker {
  color: var(--wx-color-heading);
  background-image: linear-gradient(transparent 60%, var(--wx-color-marker) 60%, var(--wx-color-marker) 90%, transparent 90%);
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .04em;
}
.wx .wx-title {
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
/* Suite d'un grand titre, qui porte l'idée importante : en vert (contraste AA sur fond clair) */
.wx .wx-title mark { color: var(--wx-color-accent); }
.wx .wx-subtitle, .wx .wx-tile__title, .wx .wx-panel__label, .wx .wx-card__title, .wx .wx-usage__lead {
  font-family: var(--wx-font-display);
  font-size: var(--wx-fs-subtitle);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--wx-color-heading);
}
.wx .wx-lead {
  font-size: var(--wx-fs-lead);
  font-weight: 500;
  line-height: 1.5;
  color: var(--wx-color-text-muted);
  max-width: 36em;
}
.wx .wx-footnote { margin-top: 32px; font-size: var(--wx-fs-caption); line-height: 1.5; color: var(--wx-color-text-muted); max-width: 62em; }
.wx .wx-link-arrow a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--wx-color-accent-text); font-weight: 700; text-decoration: none;
}
.wx .wx-link-arrow a::after {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--wx-i-arrow) center / contain no-repeat; mask: var(--wx-i-arrow) center / contain no-repeat;
  transition: transform 220ms var(--wx-ease);
}
.wx .wx-link-arrow a:hover { text-decoration: underline; text-underline-offset: .2em; }
.wx .wx-link-arrow a:hover::after { transform: translateX(3px); }

/* 5. Boutons --------------------------------------------------------------- */
.wx .wx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wx :is(.wx-button, .wx-btn > .wp-block-button__link) {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font: 700 1rem/1.1 var(--wx-font-text); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--wx-ease), box-shadow 220ms var(--wx-ease), background-color 180ms var(--wx-ease-soft), border-color 180ms var(--wx-ease-soft), color 180ms var(--wx-ease-soft);
}
.wx :is(.wx-button--primary, .wx-btn--primary > .wp-block-button__link) {
  background: var(--wx-color-action); color: var(--wx-color-on-action);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wx-color-surface) 40%, transparent), var(--wx-shadow-action);
}
.wx :is(.wx-button--primary, .wx-btn--primary > .wp-block-button__link):hover {
  background: var(--wx-color-action-hover); color: var(--wx-color-on-action);
  transform: translateY(-1px);
}
.wx :is(.wx-button, .wx-btn > .wp-block-button__link):active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
.wx :is(.wx-btn--primary:not(.wx-btn--sm) > .wp-block-button__link, .wx-button--arrow)::after {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--wx-i-arrow) center / contain no-repeat; mask: var(--wx-i-arrow) center / contain no-repeat;
  transition: transform 260ms var(--wx-ease);
}
.wx :is(.wx-btn--primary > .wp-block-button__link, .wx-button--arrow):hover::after { transform: translateX(3px); }
.wx :is(.wx-button--ghost, .wx-btn--ghost > .wp-block-button__link) {
  background: var(--wx-color-surface); color: var(--wx-color-heading);
  border-color: var(--wx-color-border-strong);
}
.wx :is(.wx-button--ghost, .wx-btn--ghost > .wp-block-button__link):hover { background: var(--wx-color-surface); color: var(--wx-color-heading); border-color: var(--wx-color-heading); transform: translateY(-1px); }
.wx .wx-btn--down > .wp-block-button__link::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--wx-i-down) center / contain no-repeat; mask: var(--wx-i-down) center / contain no-repeat;
  transition: transform 260ms var(--wx-ease);
}
.wx .wx-btn--down > .wp-block-button__link:hover::after { transform: translateY(2px); }
.wx :is(.wx-button--sm, .wx-btn--sm > .wp-block-button__link) { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
/* Sur mobile, petits boutons à 44 px de haut (zone tactile recommandée). */
@media (max-width: 767px) { .wx :is(.wx-button--sm, .wx-btn--sm > .wp-block-button__link) { min-height: 44px; } }
.wx .wx-button--block { width: 100%; }
.wx :is(.wx-button, .wx-btn > .wp-block-button__link):focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 3px; }

/* 6. En-tête --------------------------------------------------------------- */
.wx.wx-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--wx-color-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--wx-ease-soft), background-color 240ms var(--wx-ease-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .wx.wx-header { background: var(--wx-color-bg); } }
.wx.wx-header.is-scrolled { border-bottom-color: var(--wx-color-border); }
/* Verts soutenus (petites surfaces : pastilles, plaques de badges, titres du pied de page). */
:root {
  --wx-deep-1: #082B1A;
  --wx-deep-2: #0D4529;
  --wx-deep-3: #12643A;
  --wx-deep-4: #167040;
}
/* En-tête et pied de page (25/10/2026) : dégradés construits sur #34D36B, dans la continuité du fond des pages ;
   textes encre. Barre du menu blanche, liseré #34D36B qui s'efface sur les bords. */
.wx.wx-header {
  background: color-mix(in srgb, var(--wx-color-surface) 96%, transparent);
  box-shadow: 0 16px 34px -30px color-mix(in srgb, var(--wx-color-heading) 45%, transparent);
}
.wx.wx-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wx-color-accent) 25%, #FFFFFF), var(--wx-color-accent) 30%, var(--wx-color-accent) 70%, color-mix(in srgb, var(--wx-color-accent) 25%, #FFFFFF));
}

/* Bandeau du haut : dégradé autour de #34D36B (plus clair à gauche, à peine plus soutenu à droite), lueur blanche
   derrière le panneau de mots-clés, textes encre (contraste 8,6:1 sur #34D36B). */
.wx-topbar {
  --wx-topbar-ink: var(--wx-color-heading);
  --wx-topbar-soft: color-mix(in srgb, var(--wx-color-heading) 60%, transparent);
  background:
    radial-gradient(26% 260% at 5% 50%, color-mix(in srgb, #FFFFFF 40%, transparent), transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--wx-color-accent) 68%, #FFFFFF) 0%, var(--wx-color-accent) 50%, color-mix(in srgb, var(--wx-color-accent) 88%, var(--wx-deep-3)) 100%);
  color: var(--wx-topbar-ink);
}
.wx-topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: calc(var(--wx-max-wide) + 2 * var(--wx-gutter)); min-height: 40px; margin-inline: auto; padding-inline: var(--wx-gutter);
}
.wx .wx-topbar__text { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: .875rem; font-weight: 700; line-height: 1.2; }
.wx-topbar__text .wx-ico { width: 18px; height: 18px; stroke-width: 2; color: var(--wx-color-accent); }
.wx .wx-topbar__board { display: flex; align-items: center; min-width: 0; }
.wx .wx-topbar__flip {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; height: 28px; padding: 0 14px 0 11px; border-radius: 8px;
  /* Deux moitiés de volet, comme sur un tableau d'affichage : le haut un peu plus clair que le bas */
  background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 62%, transparent) 0 50%, color-mix(in srgb, #FFFFFF 46%, transparent) 50% 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 10%, transparent);
}
.wx .wx-topbar__flip[role="button"] { cursor: pointer; }
.wx .wx-topbar__flip[role="button"]:focus-visible { outline: 2px solid var(--wx-color-accent); outline-offset: 2px; }
.wx-topbar__pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wx-deep-3); }
.wx-topbar__board.is-paused .wx-topbar__pulse { background: var(--wx-topbar-soft); }
.wx .wx-topbar__words { display: grid; min-width: 0; perspective: 420px; }
.wx .wx-topbar__word {
  grid-area: 1 / 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .78125rem; font-weight: 750; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-topbar-ink);
  backface-visibility: hidden; transform-origin: 50% 50% -8px;
}
.wx .wx-topbar__word:not(.is-current) { visibility: hidden; }
.wx-topbar__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.wx .wx-topbar__lang { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 650; color: var(--wx-topbar-ink); }
.wx .wx-topbar__lang :is(a, span, select, option) { color: inherit; }
.wx .wx-topbar__lang select { background: transparent; border: 0; font: inherit; }
.wx-topbar__lang .wx-ico { width: 16px; height: 16px; color: var(--wx-color-heading); }
/* Sélecteur FR / EN (includes/i18n.php) : langue courante en pastille encre. */
.wx .wx-lang { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; color: var(--wx-topbar-ink); }
.wx .wx-lang .wx-ico { width: 16px; height: 16px; margin-right: 2px; color: var(--wx-color-heading); }
.wx .wx-lang > span { opacity: .45; }
.wx.wx-header .wx-lang a { display: inline-grid; place-items: center; min-width: 30px; min-height: 26px; padding: 0 6px; border-radius: 999px; color: inherit; text-decoration: none; transition: background-color 160ms var(--wx-ease-soft); }
.wx.wx-header .wx-lang a:hover { background: color-mix(in srgb, #FFFFFF 45%, transparent); }
.wx.wx-header .wx-lang a[aria-current] { color: #FFFFFF; background: var(--wx-color-heading); }
.wx.wx-header .wx-lang a:focus-visible { outline: 2px solid var(--wx-color-accent); outline-offset: 2px; }
/* Zone tactile de 44 px de haut (sélecteur de langue, Connexion) sans changer la hauteur du bandeau. */
.wx.wx-header .wx-lang a, .wx.wx-header .wx-topbar__login { position: relative; }
.wx.wx-header .wx-lang a::after { content: ""; position: absolute; inset: -9px -7px; }
.wx.wx-header .wx-topbar__login::after { content: ""; position: absolute; inset: -7px -2px; }
.wx.wx-header .wx-topbar__login {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border-radius: 999px;
  color: var(--wx-topbar-ink); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, #FFFFFF 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 30%, transparent);
  transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft);
}
.wx.wx-header .wx-topbar__login:hover { background: var(--wx-color-heading); color: #FFFFFF; }
.wx.wx-header .wx-topbar__login:focus-visible { outline: 2px solid var(--wx-color-accent); outline-offset: 2px; }
.wx-topbar__login .wx-ico { width: 15px; height: 15px; }
@media (max-width: 759px) {
  .wx .wx-topbar__text { display: none; }
  .wx-topbar__inner { min-height: 36px; gap: 10px; }
  .wx .wx-topbar__board { flex: 1 1 auto; }
  .wx .wx-topbar__flip { height: 26px; padding: 0 10px 0 9px; gap: 8px; }
  .wx .wx-topbar__word { font-size: .6875rem; letter-spacing: .06em; }
  .wx-topbar__tools { gap: 10px; }
  .wx .wx-topbar__lang > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wx.wx-header .wx-topbar__login { padding: 0 12px; font-size: .8125rem; }
}
/* Bascule des mots (view.js ajoute .is-animated) : le mot sortant se rabat vers le bas, le suivant arrive du haut */
@keyframes wx-topbar-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wx-wa-green) 65%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .wx .wx-topbar__board.is-animated .wx-topbar__word { opacity: 0; transform: rotateX(90deg); transition: transform 560ms var(--wx-ease), opacity 380ms var(--wx-ease-soft); }
  .wx .wx-topbar__board.is-animated .wx-topbar__word.is-current { opacity: 1; transform: none; visibility: visible; }
  .wx .wx-topbar__board.is-animated .wx-topbar__word.is-leaving { opacity: 0; transform: rotateX(-90deg); visibility: visible; }
  .wx .wx-topbar__board.is-animated:not(.is-paused) .wx-topbar__pulse { animation: wx-topbar-pulse 2.4s var(--wx-ease-soft) infinite; }
}

/* Boutons de l'en-tête : « Voir Walexia en action » (contour) et « Réserver une démo » (encre) */
.wx .wx-button--ink { background: var(--wx-color-heading); color: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm); }
.wx .wx-button--ink:hover { background: color-mix(in srgb, var(--wx-color-heading) 86%, var(--wx-color-accent)); color: var(--wx-color-surface); transform: translateY(-1px); }
.wx .wx-header__action .wx-ico { width: 15px; height: 15px; color: var(--wx-color-accent); }
.wx.wx-header .wx-header__action { flex: none; }
body.admin-bar .wx.wx-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wx.wx-header { top: 46px; } }
.wx-header__bar {
  display: flex; align-items: center; gap: 12px 28px;
  max-width: calc(var(--wx-max-wide) + 2 * var(--wx-gutter));
  min-height: 66px; margin-inline: auto; padding-inline: var(--wx-gutter);
}
.wx-header__logo { display: inline-flex; flex: none; align-items: center; min-height: 44px; border-radius: 8px; }
.wx-header__logo img { display: block; width: auto; height: 34px; }
.wx-header__nav { display: flex; align-items: center; flex: 1; min-width: 0; gap: 28px; }
.wx-header__links { display: flex; gap: 2px; list-style: none; margin: 0 auto; }
.wx.wx-header .wx-header__links > li > a, .wx.wx-header .wx-header__login {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px;
  color: var(--wx-color-text); font-size: .9375rem; font-weight: 600; text-decoration: none; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft);
}
.wx.wx-header .wx-header__links > li > a:hover, .wx.wx-header .wx-header__login:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx.wx-header .wx-header__links > li > a[aria-current="page"] { color: var(--wx-color-heading); font-weight: 700; }
.wx-header__cta { flex: none; }
.wx .wx-header__toggle, .wx .wx-header__toggle:focus {
  display: none; position: relative; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--wx-color-heading); cursor: pointer; padding: 0;
}
.wx .wx-header__toggle:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx-header__burger, .wx-header__burger::before {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 260ms var(--wx-ease), top 260ms var(--wx-ease);
}
.wx-header__burger { top: 18px; }
.wx-header__burger::before { content: ""; left: 0; top: 7px; }
.wx-header__toggle[aria-expanded="true"] .wx-header__burger { top: 21px; transform: rotate(45deg); }
.wx-header__toggle[aria-expanded="true"] .wx-header__burger::before { top: 0; transform: rotate(-90deg); }

/* Sous-menus (<details>) avec pictogrammes */
.wx-header__item { position: relative; }
.wx .wx-menu__trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px 0 14px; border-radius: 999px;
  color: var(--wx-color-text); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; list-style: none; transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft);
}
.wx .wx-menu__trigger::-webkit-details-marker { display: none; }
.wx .wx-menu__trigger::after {
  content: ""; width: 14px; height: 14px; background: currentColor; opacity: .7;
  -webkit-mask: var(--wx-i-chevron) center / contain no-repeat; mask: var(--wx-i-chevron) center / contain no-repeat;
  transition: transform 220ms var(--wx-ease);
}
.wx .wx-menu[open] > .wx-menu__trigger::after { transform: rotate(180deg); }
.wx .wx-menu__trigger:hover, .wx .wx-menu[open] > .wx-menu__trigger { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx .wx-menu.is-current > .wx-menu__trigger { color: var(--wx-color-heading); font-weight: 700; }
.wx .wx-menu__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 70;
  display: grid; grid-auto-flow: column; gap: 8px 16px; padding: 14px; border-radius: 24px;
  background: color-mix(in srgb, var(--wx-color-surface) 97%, transparent);
  box-shadow: 0 0 0 1px var(--wx-color-border), 0 30px 60px -24px color-mix(in srgb, var(--wx-color-heading) 32%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.wx .wx-menu__title { margin: 6px 12px 6px; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-menu__group ul { list-style: none; display: grid; gap: 2px; min-width: 300px; }
.wx .wx-menu__group:has(.wx-menu__link--solo:only-child) ul, .wx .wx-menu__group ul:not(:has(.wx-menu__desc)) { min-width: 240px; }
.wx.wx-header .wx-menu__group a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center;
  min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 16px;
  color: var(--wx-color-heading); text-decoration: none; white-space: normal;
  transition: background-color 160ms var(--wx-ease-soft);
}
.wx.wx-header .wx-menu__group a.wx-menu__link--plain { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
.wx.wx-header .wx-menu__group a.wx-menu__link--solo .wx-menu__icon { grid-row: auto; }
.wx .wx-menu__icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--wx-color-bg-tint); color: var(--wx-color-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 22%, transparent);
  transition: background-color 160ms var(--wx-ease-soft), transform 220ms var(--wx-ease);
}
.wx .wx-menu__icon .wx-ico { width: 21px; height: 21px; }
.wx .wx-menu__label { font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.wx .wx-menu__desc { font-size: .8125rem; font-weight: 500; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx.wx-header .wx-menu__group a:hover { background: var(--wx-color-bg); }
.wx.wx-header .wx-menu__group a:hover .wx-menu__icon { background: var(--wx-color-accent); color: var(--wx-color-on-action); transform: scale(1.04); }
.wx.wx-header .wx-menu__group a[aria-current="page"] .wx-menu__label { color: var(--wx-color-accent-text); }
@keyframes wx-menu-in { from { opacity: 0; transform: translate(-50%, -6px); } }
@media screen and (prefers-reduced-motion: no-preference) { .wx .wx-menu[open] .wx-menu__panel { animation: wx-menu-in 220ms var(--wx-ease) both; } }

@media (max-width: 1099px) {
  .wx-header__bar { flex-wrap: wrap; min-height: 58px; column-gap: 8px; }
  .wx.wx-header.is-enhanced .wx-header__bar { flex-wrap: nowrap; }
  .wx-header__logo img { height: 30px; }
  .wx-header__cta { margin-left: auto; order: 1; }
  .wx-header__toggle { order: 2; }
  .wx-header__nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 8px; padding-bottom: 8px; scrollbar-width: none; }
  .wx-header__links { margin: 0; }
  /* Version améliorée par JS : panneau déroulant */
  .wx.wx-header.is-enhanced .wx-header__toggle { display: inline-flex; }
  .wx.wx-header.is-enhanced .wx-header__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--wx-gutter) 24px; overflow: visible; max-height: calc(100svh - 58px); overflow-y: auto;
    background: var(--wx-color-bg); border-bottom: 1px solid var(--wx-color-border);
    box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--wx-color-heading) 25%, transparent);
  }
  .wx.wx-header.is-enhanced.is-open .wx-header__nav { display: flex; }
  .wx.wx-header.is-enhanced.is-open { background: var(--wx-color-bg); }
  .wx.wx-header.is-enhanced .wx-header__links { flex-direction: column; gap: 0; }
  .wx.wx-header.is-enhanced .wx-header__links > li > a, .wx.wx-header.is-enhanced .wx-header__login, .wx.wx-header.is-enhanced .wx-menu__trigger {
    display: flex; justify-content: space-between; width: 100%; min-height: 58px; padding: 0 4px; border-radius: 0;
    font-family: var(--wx-font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -.015em; color: var(--wx-color-heading);
    border-bottom: 1px solid var(--wx-color-border); background: transparent;
  }
  .wx.wx-header.is-enhanced .wx-header__login { font-family: var(--wx-font-text); font-size: 1rem; font-weight: 600; color: var(--wx-color-text-muted); border-bottom: 0; }
  .wx.wx-header.is-enhanced .wx-header__action { align-self: stretch; justify-content: center; margin-top: 18px; min-height: 52px; }
  /* La bande verte défile, la barre du menu reste visible */
  .wx.wx-header { top: -36px; }
  .wx-topbar__inner { min-height: 36px; }
  .wx .wx-menu__panel { position: static; transform: none; box-shadow: none; background: transparent; padding: 6px 0 14px; grid-auto-flow: row; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none !important; }
  .wx .wx-menu__group ul { min-width: 0; }
  .wx.wx-header.is-enhanced .wx-menu__group a { min-height: 50px; }
  .wx.wx-header.is-enhanced .wx-menu__desc { display: none; }
  .wx.wx-header.is-enhanced .wx-menu__icon { grid-row: auto; }
  .wx.wx-header.is-enhanced .wx-menu__title { margin: 10px 4px 4px; }
}
@media (max-width: 479px) {
  .wx-header__logo img { height: 26px; }
  .wx.wx-header .wx-header__cta.wx-button--sm { min-height: 44px; padding: 0 12px; font-size: .875rem; }
  .wx.wx-header .wx-header__toggle { width: 44px; }
  .wx-header__burger, .wx-header__burger::before { left: 13px; }
  .wx-header__burger::before { left: 0; }
}
@media (max-width: 380px) {
  .wx-header__logo img { height: 23px; }
  .wx.wx-header .wx-header__cta.wx-button--sm { padding: 0 11px; font-size: .8125rem; }
}
/* Très petits écrans : l'appel à l'action du hero, juste en dessous, prend le relais de celui de l'en-tête. */
@media (max-width: 359px) { .wx.wx-header .wx-header__cta { display: none; } }

/* 7. Hero ------------------------------------------------------------------ */
.wx.wx-hero {
  position: relative; isolation: isolate;
  padding-block: clamp(16px, 2.6vw, 40px) clamp(40px, 5vw, 72px);
}
.wx.wx-hero::before {
  content: ""; position: absolute; inset: -66px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 6% 0%, color-mix(in srgb, var(--wx-color-accent) 22%, transparent), transparent 70%),
    radial-gradient(45% 50% at 96% 24%, color-mix(in srgb, var(--wx-color-accent) 14%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--wx-color-accent) 8%, transparent), transparent 70%);
}
.wx .wx-hero__inner {
  display: grid; gap: clamp(36px, 5vw, 64px); align-items: center;
  max-width: calc(var(--wx-max-wide) + 2 * var(--wx-gutter));
  margin-inline: auto; padding-inline: var(--wx-gutter);
}
.wx .wx-hero__copy { display: grid; gap: 24px; justify-items: start; max-width: 680px; }
.wx .wx-hero__copy .wx-display { margin-top: 4px; font-size: clamp(2.4rem, 1.2rem + 5vw, 4rem); }
@media (min-width: 1200px) { .wx .wx-hero__copy .wx-display { font-size: clamp(3rem, .5rem + 3.4vw, 4.25rem); } }
.wx .wx-hero__copy .wx-actions { margin-top: 8px; }
.wx-hero__note { display: flex; align-items: center; gap: 8px; font-size: var(--wx-fs-small); color: var(--wx-color-text-muted); }
@media (min-width: 1200px) {
  .wx .wx-hero__inner { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .wx .wx-hero__copy :is(.wx-btn > .wp-block-button__link) { padding-inline: 22px; }
}
@media (max-width: 1199px) {
  .wx .wx-hero__copy { max-width: 720px; }
  .wx .wx-hero__inner > .wx-scene { max-width: 820px; }
}
@media (max-width: 520px) {
  .wx.wx-hero { padding-top: 14px; }
  .wx .wx-hero__copy { gap: 16px; }
  .wx .wx-hero__copy .wx-lead { font-size: 1.0625rem; }
  .wx .wx-hero__copy .wx-actions { width: 100%; gap: 2px; margin-top: 2px; }
  .wx .wx-hero__copy .wx-actions .wp-block-button { flex: 1 1 100%; }
  .wx .wx-hero__copy .wx-actions .wp-block-button__link { width: 100%; }
  .wx .wx-hero__copy .wx-btn--ghost > .wp-block-button__link { min-height: 44px; background: transparent; border-color: transparent; }
  .wx-hero__note { display: none; }
  .wx .wx-hero__inner { gap: 26px; }
}

/* 8. Scène de conversation (bloc walexia/conversation-scene) -------------- */
/* La mise en page interne dépend de la largeur réelle de la scène (requêtes de conteneur), pas de l'écran. */
.wx.wx-scene { position: relative; margin: 0; min-width: 0; container: wx-scene / inline-size; }
.wx-scene__stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 16px; padding: clamp(12px, 2.2vw, 26px);
  border-radius: var(--wx-r-xl);
  background:
    radial-gradient(60% 50% at 82% 8%, var(--wx-color-surface), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--wx-color-accent) 18%, transparent), transparent 70%),
    linear-gradient(160deg, var(--wx-color-bg-tint), color-mix(in srgb, var(--wx-color-bg-tint) 60%, var(--wx-color-bg)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 18%, transparent), var(--wx-shadow-md);
}
/* Bulles décoratives : repères conversationnels en profondeur légère */
.wx-scene__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wx-scene__deco span {
  position: absolute; border-radius: 26px 26px 26px 8px;
  background: color-mix(in srgb, var(--wx-color-surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 14%, transparent);
}
/* Une seule bulle visible (en haut à droite) : les autres emplacements dépassaient du cadre comme des artefacts. */
.wx-scene__deco span:nth-child(odd) { display: none; }
.wx-scene__deco span:nth-child(2) { width: 26%; height: 10%; right: -6%; top: 9%; border-radius: 26px 26px 8px 26px; background: color-mix(in srgb, var(--wx-color-bubble-out) 75%, transparent); }

.wx-scene__bar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.wx .wx-scene__tag {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--wx-color-surface); color: var(--wx-color-text-muted); font-size: var(--wx-fs-caption); font-weight: 650; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx-scene__tag .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx-scene__controls { margin-left: auto; display: flex; gap: 6px; flex: none; }
.wx-scene__controls[hidden] { display: none; }
.wx .wx-scene__btn, .wx .wx-scene__btn:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wx-color-surface); color: var(--wx-color-heading); font: 700 .875rem/1 var(--wx-font-text);
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: transform 200ms var(--wx-ease), box-shadow 200ms var(--wx-ease);
}
.wx .wx-scene__btn:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), var(--wx-shadow-sm); }
.wx .wx-scene__btn .wx-ico { display: none; width: 18px; height: 18px; }
.wx-scene[data-state="playing"] .wx-ico--pause, .wx-scene[data-state="paused"] .wx-ico--play, .wx-scene[data-state="ended"] .wx-ico--replay { display: block; }

.wx-scene__body { position: relative; display: grid; min-width: 0; }
.wx-scene__window {
  position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0;
  border-radius: 28px; overflow: hidden; background: var(--wx-color-chat);
  box-shadow: 0 0 0 1px var(--wx-color-border), 0 36px 70px -36px color-mix(in srgb, var(--wx-color-heading) 45%, transparent);
}
.wx-scene__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--wx-color-surface); border-bottom: 1px solid var(--wx-color-border); }
.wx-scene__head-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); }
.wx-scene__head-avatar .wx-ico { width: 22px; height: 22px; }
.wx-scene__head-title { display: grid; line-height: 1.25; min-width: 0; }
.wx-scene__head-title strong { font-family: var(--wx-font-display); font-size: 1.0625rem; font-weight: 650; color: var(--wx-color-heading); }
.wx-scene__head-title span { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx-scene__head-title span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wx-color-accent); }
.wx-scene__thread {
  position: relative; display: block;
  height: clamp(340px, 30vw, 400px); padding: 14px 14px 18px; overflow-y: auto; overscroll-behavior: contain;
  background-image: radial-gradient(color-mix(in srgb, var(--wx-color-heading) 6%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.wx .wx-scene__thread:focus-visible { outline-offset: -3px; border-radius: 0; }
.wx-scene__track { display: flex; flex-direction: column; gap: 10px; }
.wx .wx-scene__day { align-self: center; padding: 4px 12px; border-radius: 8px; background: var(--wx-color-surface); color: var(--wx-color-text-muted); font-size: .75rem; font-weight: 650; line-height: 1.4; box-shadow: 0 1px 1px color-mix(in srgb, var(--wx-color-heading) 8%, transparent); }
/* Mode animé (et avant l'initialisation du script) : la piste remonte quand l'échange dépasse la fenêtre. */
.wx-motion .wx-scene__thread, .wx-scene.is-animated .wx-scene__thread { overflow: hidden; }
.wx-scene.is-animated .wx-scene__thread.is-overflowing {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px);
}

/* Messages et interlocuteurs (partagés avec la démonstration produit) */
.wx .wx-msg {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 8px; align-items: end;
  max-width: min(88%, 420px); align-self: flex-start;
}
.wx .wx-msg__avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--wx-color-surface); color: var(--wx-color-text-muted);
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx .wx-msg__avatar .wx-ico { width: 18px; height: 18px; }
.wx .wx-msg__bubble {
  position: relative; min-width: 0; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px;
  background: var(--wx-color-bubble-in); color: var(--wx-color-heading);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--wx-color-heading) 8%, transparent);
  font-size: .9375rem; line-height: 1.45;
}
.wx .wx-msg__who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; font-size: .8125rem; font-weight: 750; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-msg__role { padding: 1px 7px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; background: var(--wx-color-surface-muted); color: var(--wx-color-text-muted); }
.wx .wx-msg__text { margin: 0; }
.wx .wx-msg__meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: .6875rem; line-height: 1.2; color: var(--wx-color-chat-meta); }
.wx .wx-msg__meta .wx-ico { width: 16px; height: 16px; color: var(--wx-color-tick); stroke-width: 2; }
/* Côté entreprise (IA, conseiller, note) : à droite, bulle sortante */
.wx .wx-msg:is(.wx-msg--ai, .wx-msg--agent, .wx-msg--note) { align-self: flex-end; grid-template-columns: minmax(0, 1fr) 38px; }
.wx .wx-msg:is(.wx-msg--ai, .wx-msg--agent, .wx-msg--note) .wx-msg__avatar { grid-column: 2; grid-row: 1; }
.wx .wx-msg:is(.wx-msg--ai, .wx-msg--agent, .wx-msg--note) .wx-msg__bubble { grid-column: 1; grid-row: 1; justify-self: end; background: var(--wx-color-bubble-out); border-radius: 16px 16px 4px 16px; }
.wx .wx-msg--ai .wx-msg__avatar { background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: none; }
.wx .wx-msg--agent .wx-msg__avatar { background: var(--wx-color-heading); color: var(--wx-color-surface); box-shadow: none; }
.wx .wx-msg--ai .wx-msg__role { background: color-mix(in srgb, var(--wx-color-accent) 22%, var(--wx-color-surface)); color: var(--wx-color-accent-text); }
.wx .wx-msg--agent .wx-msg__role { background: var(--wx-color-heading); color: var(--wx-color-surface); }
.wx .wx-msg--note .wx-msg__avatar { background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); box-shadow: none; }
/* Avatars comme dans WhatsApp : photo ronde pour les personnes, logo Walexia pour l'assistant */
.wx :is(.wx-msg__avatar, .wx-wa__avatar, .wx-oc__lead-avatar, .wx-oc__member-avatar).has-img { overflow: hidden; padding: 0; background: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 8px color-mix(in srgb, var(--wx-color-heading) 18%, transparent); }
.wx :is(.wx-msg__avatar, .wx-wa__avatar, .wx-oc__lead-avatar, .wx-oc__member-avatar).has-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; }
.wx :is(.wx-msg--ai .wx-msg__avatar, .wx-wa__msg--ai .wx-wa__avatar).has-img { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent), 0 2px 8px color-mix(in srgb, var(--wx-color-heading) 14%, transparent); }
.wx :is(.wx-msg--ai .wx-msg__avatar, .wx-wa__msg--ai .wx-wa__avatar).has-img img { object-fit: contain; padding: 16%; border-radius: 0; }
.wx-wa__avatar.has-img { width: calc(var(--w) * .075); height: calc(var(--w) * .075); }
.wx .wx-msg--note .wx-msg__bubble { background: var(--wx-color-warn-bg); }
.wx .wx-msg--note .wx-msg__role { background: color-mix(in srgb, var(--wx-color-warn-text) 12%, var(--wx-color-surface)); color: var(--wx-color-warn-text); }
.wx .wx-msg--system {
  display: inline-flex; align-self: center; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--wx-color-surface); color: var(--wx-color-heading);
  font-size: .8125rem; font-weight: 650; line-height: 1.3; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
}
.wx .wx-msg--system .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx .wx-msg__source {
  display: grid; gap: 1px; margin: 4px 0 6px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--wx-color-heading) 5%, transparent); border-left: 3px solid var(--wx-color-accent);
  font-size: .8125rem; line-height: 1.35;
}
.wx .wx-msg__source b { color: var(--wx-color-accent-text); font-weight: 750; }
.wx .wx-msg__source span { color: var(--wx-color-text-muted); }
.wx .wx-msg__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wx .wx-msg__chips span { padding: 5px 10px; border-radius: 999px; background: var(--wx-color-surface); color: var(--wx-color-accent-text); font-weight: 700; font-size: .8125rem; line-height: 1.3; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 26%, transparent); transition: background-color 260ms var(--wx-ease-soft), color 260ms var(--wx-ease-soft); }
.wx .wx-msg__chips span.is-picked { background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: none; }
.wx .wx-msg__chips.is-pending span.is-picked { background: var(--wx-color-surface); color: var(--wx-color-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 26%, transparent); }
.wx .wx-msg--typing { display: none; }
.wx-scene.is-animated .wx-msg--typing { display: grid; }
.wx .wx-msg--typing .wx-msg__bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.wx .wx-msg--typing .wx-msg__bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--wx-color-chat-meta); opacity: .6; }
.wx .wx-msg--typing .wx-ico--agent, .wx .wx-msg--typing.wx-msg--agent .wx-ico--ai { display: none; }
.wx .wx-msg--typing.wx-msg--agent .wx-ico--agent { display: block; }

/* Fiche structurée */
.wx-scene__lead {
  position: relative; z-index: 2; display: grid; gap: 14px; align-content: start; min-width: 0;
  padding: 16px 18px; border-radius: 22px; background: var(--wx-color-surface);
  box-shadow: 0 0 0 1px var(--wx-color-border), 0 30px 60px -28px color-mix(in srgb, var(--wx-color-heading) 45%, transparent);
}
.wx-scene__lead-head { display: flex; align-items: center; gap: 10px; }
.wx-scene__lead-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-scene__lead-icon .wx-ico { width: 20px; height: 20px; }
.wx-scene__lead-title { display: grid; line-height: 1.25; min-width: 0; }
.wx-scene__lead-title strong { font-family: var(--wx-font-display); font-size: 1.0625rem; font-weight: 650; color: var(--wx-color-heading); }
.wx-scene__lead-title span { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-scene__fields { display: grid; gap: 10px; margin: 0; }
.wx-scene__fields > div { min-width: 0; }
.wx .wx-scene__fields dt { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 650; line-height: 1.3; color: var(--wx-color-text-muted); }
.wx-scene__fields dt .wx-ico { width: 16px; height: 16px; color: var(--wx-color-accent); }
.wx .wx-scene__fields dd { margin: 2px 0 0 22px; min-height: 1.4em; font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--wx-color-heading); }
.wx-scene__ph { display: none; width: 70%; max-width: 120px; height: 10px; margin-top: 6px; border-radius: 6px; background: color-mix(in srgb, var(--wx-color-heading) 9%, transparent); }
.wx-scene.is-enhanced [data-fill]:not(.is-filled) .wx-scene__val, .wx-motion .wx-scene:not(.is-enhanced) [data-fill]:not([data-fill="1"]) .wx-scene__val { display: none; }
.wx-scene.is-enhanced [data-fill]:not(.is-filled) .wx-scene__ph, .wx-motion .wx-scene:not(.is-enhanced) [data-fill]:not([data-fill="1"]) .wx-scene__ph { display: block; }
.wx .wx-scene__status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--wx-color-border); font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx-scene__status b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); font-weight: 750; }
.wx-scene__status b.is-done { background: var(--wx-color-bubble-out); color: var(--wx-color-accent-text); }
.wx-scene__status b:not(:last-child),
.wx-motion .wx-scene:not(.is-enhanced) .wx-scene__status b,
.wx-scene.is-enhanced .wx-scene__status b { display: none; }
.wx-motion .wx-scene:not(.is-enhanced) .wx-scene__status b:first-of-type,
.wx-scene.is-enhanced .wx-scene__status b.is-current { display: inline-flex; }

/* Étapes */
.wx .wx-scene__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container wx-scene (min-width: 520px) { .wx .wx-scene__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Scène étroite : étapes sans pictogramme pour garder des libellés entiers. */
@container wx-scene (min-width: 520px) and (max-width: 699.98px) {
  .wx .wx-scene__step-icon { display: none; }
  .wx .wx-scene__steps :is(.wx-scene__step-inner, .wx-scene__step-btn, .wx-scene__step-btn:focus) { grid-template-columns: minmax(0, 1fr); }
}
@container wx-scene (max-width: 349.98px) {
  .wx .wx-scene__step-icon { display: none; }
  .wx .wx-scene__steps :is(.wx-scene__step-inner, .wx-scene__step-btn, .wx-scene__step-btn:focus) { grid-template-columns: minmax(0, 1fr); }
}
.wx-scene__step { min-width: 0; }
.wx .wx-scene__step-inner, .wx .wx-scene__step-btn, .wx .wx-scene__step-btn:focus {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 10px;
  width: 100%; height: 100%; min-height: 58px; padding: 8px 10px; margin: 0; overflow: hidden;
  border: 0; border-radius: 16px; background: color-mix(in srgb, var(--wx-color-surface) 72%, transparent); color: var(--wx-color-heading);
  font: 650 .875rem/1.25 var(--wx-font-text); text-align: left; white-space: normal; text-transform: none; letter-spacing: normal;
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
  transition: background-color 220ms var(--wx-ease-soft), box-shadow 220ms var(--wx-ease-soft);
}
.wx .wx-scene__step-btn { cursor: pointer; }
.wx .wx-scene__step-btn:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx-scene__step-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wx-color-surface); color: var(--wx-color-accent); box-shadow: inset 0 0 0 1px var(--wx-color-border); transition: background-color 260ms var(--wx-ease-soft), color 260ms var(--wx-ease-soft); }
.wx-scene__step-icon .wx-ico { width: 18px; height: 18px; }
.wx-scene__step-label { display: grid; min-width: 0; }
.wx-scene__step-label small { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx-scene__step-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wx-color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.wx-scene:not(.is-enhanced) .wx-scene__step-progress { display: none; }
.wx .wx-scene__step.is-active .wx-scene__step-btn { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text), var(--wx-shadow-sm); }
.wx-scene__step:is(.is-active, .is-done) .wx-scene__step-icon { background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: none; }

/* Éléments non encore apparus (mode animé, ou avant l'initialisation du script) */
.wx-scene.is-enhanced [data-at]:not(.is-shown),
.wx-scene.is-enhanced .wx-msg--typing:not(.is-shown),
.wx-motion .wx-scene:not(.is-enhanced) [data-at]:not([data-step="1"]) { position: absolute; visibility: hidden; opacity: 0; pointer-events: none; }

/* Par défaut (scène étroite) : fiche sous la conversation, champs sur deux colonnes. */
.wx-scene__lead { margin: -24px 10px 0; }
.wx .wx-scene__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
/* Scène large : la fiche chevauche légèrement la fenêtre (44 px) ; la conversation réserve cet espace à droite. */
@container wx-scene (min-width: 580px) {
  .wx-scene__body { --wx-lead-w: clamp(210px, 34%, 260px); grid-template-columns: minmax(0, 1fr) var(--wx-lead-w); align-items: end; }
  .wx-scene__window { grid-column: 1 / span 2; grid-row: 1; margin-right: calc(var(--wx-lead-w) - 44px); }
  .wx-scene__lead { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 28px; }
  .wx .wx-scene__fields { grid-template-columns: minmax(0, 1fr); }
  .wx-scene__thread { padding-right: 58px; }
}
@container wx-scene (max-width: 480px) {
  .wx-scene__thread { padding-inline: 10px; }
  .wx .wx-msg { max-width: 94%; }
  .wx .wx-scene__btn--label { width: 44px; padding: 0; }
  .wx .wx-scene__btn--label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wx-scene__lead { padding: 14px; }
}

/* 9. Ancienne scène vidéo (bloc walexia/video-stage, conservé pour un film clair) */
.wx.wx-stage { margin: 0; position: relative; --wx-video-h: clamp(400px, 118vw, 520px); }
.wx-stage__frame {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 16px;
  padding: 12px 14px 16px; border-radius: var(--wx-r-xl);
  background: linear-gradient(160deg, var(--wx-color-bg-tint), var(--wx-color-bg));
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md);
}
.wx-stage__tag { display: inline-flex; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 650; background: var(--wx-color-surface); color: var(--wx-color-text-muted); }
.wx-stage__tag-kicker { color: var(--wx-color-accent-text); }
.wx-stage__tag-text::before { content: "·"; margin-right: 6px; }
.wx-stage__media { position: relative; height: var(--wx-video-h); aspect-ratio: 9 / 16; }
.wx-stage__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: var(--wx-color-surface); }
.wx-stage__controls { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 8px; z-index: 2; }
.wx-stage__controls[hidden] { display: none; }
.wx .wx-stage__btn, .wx .wx-stage__btn:focus { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--wx-color-heading); background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm); }
.wx .wx-stage__btn:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx-stage__btn .wx-icon { width: 20px; height: 20px; fill: currentColor; display: none; }
.wx-stage[data-state="paused"] .wx-icon--play, .wx-stage:not([data-state]) .wx-icon--play, .wx-stage[data-state="playing"] .wx-icon--pause, .wx-stage[data-state="ended"] .wx-icon--replay { display: block; }
.wx-stage__btn[aria-pressed="false"] .wx-icon--muted, .wx-stage__btn[aria-pressed="true"] .wx-icon--sound { display: block; }
.wx-stage__chapters { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wx .wx-chapter__btn, .wx .wx-chapter__btn:focus { display: grid; width: 100%; gap: 4px; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wx-chapter__bar { display: block; height: 3px; border-radius: 3px; background: var(--wx-color-border-strong); overflow: hidden; }
.wx-chapter__bar > span { display: block; height: 100%; background: var(--wx-color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.wx-chapter__index, .wx-chapter__text { display: none; }
.wx-chapter__title { font-size: .8125rem; font-weight: 650; color: var(--wx-color-text-muted); }
.wx-chapter.is-active .wx-chapter__title { color: var(--wx-color-heading); }

/* Description dépliable (scène et vidéo) */
.wx .wx-scene__caption, .wx .wx-stage__caption { margin-top: 12px; font-style: normal; text-align: left; }
.wx-transcript { font-size: var(--wx-fs-small); color: var(--wx-color-text-muted); }
.wx-transcript summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; font-weight: 650; color: var(--wx-color-text);
  transition: background-color 160ms var(--wx-ease-soft);
}
.wx-transcript summary::-webkit-details-marker { display: none; }
.wx-transcript summary::before {
  content: ""; width: 16px; height: 16px; background: currentColor; transform: rotate(-90deg);
  -webkit-mask: var(--wx-i-chevron) center / contain no-repeat; mask: var(--wx-i-chevron) center / contain no-repeat;
  transition: transform 220ms var(--wx-ease);
}
.wx-transcript[open] summary::before { transform: rotate(0deg); }
.wx-transcript summary:hover { background: var(--wx-color-surface); }
.wx-transcript__body { margin-top: 8px; padding: 18px 20px; border-radius: var(--wx-r-md); background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm); display: grid; gap: 10px; }
.wx-transcript__body ol { padding-left: 1.2em; display: grid; gap: 6px; }

/* 10. Pour qui ------------------------------------------------------------- */
.wx.wx-trust + .wx.wx-audience { padding-top: clamp(24px, 4vw, 48px); }
.wx.wx-audience .wx-container { display: grid; gap: 22px; justify-items: center; }
.wx .wx-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-top: 12px; }
.wx .wx-pills a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px; border-radius: 999px;
  background: var(--wx-color-surface); color: var(--wx-color-heading); font-weight: 650; font-size: var(--wx-fs-small); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: transform 220ms var(--wx-ease), box-shadow 220ms var(--wx-ease);
}
/* Pictogramme par secteur : classe sur l'élément de liste (wx-pill--car, --home, --bag, --health, --store, --utensils, --building, --bolt, --book, --wrench, --shield, --calendar). */
.wx .wx-pills [class*="wx-pill--"] a::before {
  content: ""; width: 20px; height: 20px; flex: none; background: var(--wx-color-accent);
  -webkit-mask: var(--wx-pill-icon) center / contain no-repeat; mask: var(--wx-pill-icon) center / contain no-repeat;
}
.wx .wx-pill--car { --wx-pill-icon: var(--wx-i-car); }
.wx .wx-pill--home { --wx-pill-icon: var(--wx-i-home); }
.wx .wx-pill--bag { --wx-pill-icon: var(--wx-i-bag); }
.wx .wx-pill--health { --wx-pill-icon: var(--wx-i-health); }
.wx .wx-pill--store { --wx-pill-icon: var(--wx-i-store); }
.wx .wx-pill--utensils { --wx-pill-icon: var(--wx-i-utensils); }
.wx .wx-pill--building { --wx-pill-icon: var(--wx-i-building); }
.wx .wx-pill--bolt { --wx-pill-icon: var(--wx-i-bolt); }
.wx .wx-pill--book { --wx-pill-icon: var(--wx-i-book); }
.wx .wx-pill--wrench { --wx-pill-icon: var(--wx-i-wrench); }
.wx .wx-pill--shield { --wx-pill-icon: var(--wx-i-shield); }
.wx .wx-pill--calendar { --wx-pill-icon: var(--wx-i-calendar); }
.wx .wx-pills a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--wx-color-accent-text), var(--wx-shadow-md); }

/* 11. Parcours ------------------------------------------------------------- */
.wx .wx-journey__steps { position: relative; display: grid; gap: 40px 28px; grid-template-columns: 1fr; counter-reset: wx-step; }
@media (min-width: 640px) { .wx .wx-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .wx .wx-journey__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wx-journey__steps::before {
    content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; top: 82px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wx-color-accent) 15%, transparent), var(--wx-color-accent) 50%, color-mix(in srgb, var(--wx-color-accent) 15%, transparent));
    transform-origin: left;
  }
}
.wx-journey__step { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; counter-increment: wx-step; }
.wx .wx-journey__step p { color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); line-height: 1.6; }
.wx .wx-journey__title { display: flex; align-items: baseline; gap: 10px; font-size: 1.375rem; letter-spacing: -.02em; font-weight: 650; margin-top: 10px; }
.wx .wx-journey__title::before { content: counter(wx-step, decimal-leading-zero); font-family: var(--wx-font-text); font-size: .875rem; font-weight: 750; color: var(--wx-color-accent-text); font-variant-numeric: tabular-nums; }
.wx-mini {
  min-height: 164px; border-radius: var(--wx-r-lg); padding: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden;
  background: var(--wx-color-chat); box-shadow: inset 0 0 0 1px var(--wx-color-border);
  background-image: radial-gradient(color-mix(in srgb, var(--wx-color-heading) 6%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
  font-size: .875rem; color: var(--wx-color-heading);
}
@media (min-width: 1024px) { .wx-mini { height: 164px; } }
.wx-mini .wx-msg { max-width: 100%; }
.wx-mini .wx-msg__bubble { font-size: .875rem; }
.wx-mini__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wx-mini__status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); font-weight: 750; }
.wx-mini__tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); font-weight: 650; color: var(--wx-color-text-muted); }
.wx-mini__tag .wx-ico { color: var(--wx-color-accent); }
.wx-mini .wx-ico { width: 16px; height: 16px; }

/* 12. Démonstration produit (bloc walexia/product-tour) ------------------- */
.wx.wx-tour { display: grid; gap: 22px; }
.wx-tour__steps { list-style: none; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .wx-tour__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx-tour__step { display: grid; gap: 4px; align-content: start; }
.wx-tour__step-num { font-size: .875rem; font-weight: 750; color: var(--wx-color-accent-text); }
.wx-tour__step-title { font-family: var(--wx-font-display); font-size: 1.1875rem; font-weight: 650; color: var(--wx-color-heading); }
.wx-tour__step-text { font-size: var(--wx-fs-small); color: var(--wx-color-text-muted); }
.wx-tour.is-enhanced .wx-tour__steps { display: none; }
.wx-tour__control {
  justify-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 5px; border-radius: 22px; background: color-mix(in srgb, var(--wx-color-surface) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  width: min(100%, 440px);
}
@media (min-width: 640px) { .wx-tour__control { grid-template-columns: repeat(4, auto); border-radius: 999px; width: auto; } }
.wx .wx-tour__control button, .wx .wx-tour__control button:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--wx-color-text-muted); font: 700 .9375rem/1 var(--wx-font-text);
  cursor: pointer; white-space: nowrap;
  transition: background-color 240ms var(--wx-ease), color 240ms var(--wx-ease), box-shadow 240ms var(--wx-ease);
}
.wx .wx-tour__control button span { font-size: .8125rem; font-weight: 750; color: var(--wx-color-accent-text); font-variant-numeric: tabular-nums; }
.wx .wx-tour__control button:hover { color: var(--wx-color-heading); background: var(--wx-color-bg); }
.wx .wx-tour__control button[aria-pressed="true"] { background: var(--wx-color-heading); color: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm); }
.wx .wx-tour__control button[aria-pressed="true"] span { color: var(--wx-color-accent); }
.wx-tour__caption { text-align: center; max-width: 40em; margin-inline: auto; min-height: 3.2em; color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); }
.wx-tour__caption strong { color: var(--wx-color-heading); }
.wx-tour__device {
  position: relative; isolation: isolate;
  padding: clamp(14px, 4vw, 56px) clamp(10px, 4vw, 56px) 0;
  border-radius: var(--wx-r-xl); overflow: hidden;
  background:
    radial-gradient(80% 80% at 50% 0%, var(--wx-color-surface), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--wx-color-accent) 20%, var(--wx-color-bg-tint)), var(--wx-color-bg-tint) 50%, var(--wx-color-bg));
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx-app {
  border-radius: 24px 24px 0 0; overflow: hidden; background: var(--wx-color-surface);
  box-shadow: 0 0 0 1px var(--wx-color-border), 0 40px 80px -30px color-mix(in srgb, var(--wx-color-heading) 35%, transparent);
  font-size: .875rem; color: var(--wx-color-heading);
}
.wx-app__top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--wx-color-border); background: var(--wx-color-bg); }
.wx-app__dots { display: flex; gap: 6px; }
.wx-app__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--wx-color-border-strong); }
.wx-app__title { font-weight: 700; color: var(--wx-color-text-muted); }
.wx-app__badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); font-size: .75rem; font-weight: 750; white-space: nowrap; }
@media (max-width: 559px) { .wx-app__dots, .wx-app__title { display: none; } .wx-app__badge { margin-inline: auto; } }
.wx-app__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 480px; }
.wx-app__list, .wx-app__lead { display: none; }
@media (min-width: 760px) { .wx-app__body { grid-template-columns: minmax(0, 1fr) 252px; } .wx-app__lead { display: block; } }
@media (min-width: 1100px) { .wx-app__body { grid-template-columns: 252px minmax(0, 1fr) 264px; } .wx-app__list { display: block; } }
.wx-app__list { border-right: 1px solid var(--wx-color-border); padding: 12px 10px; background: var(--wx-color-bg); }
.wx-app__list-head, .wx-app__lead-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 12px; font-weight: 750; color: var(--wx-color-heading); font-size: .875rem; }
.wx-app__list-head span { padding: 2px 8px; border-radius: 999px; background: var(--wx-color-accent); color: var(--wx-color-on-action); font-size: .75rem; }
.wx-app__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 14px; }
.wx-app__item.is-active { background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm), inset 0 0 0 1px var(--wx-color-border); }
.wx-app__item-main { display: grid; min-width: 0; }
.wx-app__item-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wx-color-text-muted); font-size: .8125rem; }
.wx-app__item-meta { display: grid; justify-items: end; gap: 4px; color: var(--wx-color-text-muted); font-size: .75rem; }
.wx-app__unread { width: 9px; height: 9px; border-radius: 50%; background: var(--wx-color-accent); }
.wx-app__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--wx-color-surface); color: var(--wx-color-text-muted); box-shadow: inset 0 0 0 1px var(--wx-color-border); flex: none; }
.wx-app__avatar .wx-ico { width: 18px; height: 18px; }
.wx-app__chat { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--wx-color-chat); }
.wx-app__chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--wx-color-surface); border-bottom: 1px solid var(--wx-color-border); }
.wx-app__chat-head span:last-child { display: grid; }
.wx-app__chat-head small { color: var(--wx-color-text-muted); font-size: .75rem; }
.wx-app__thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px 16px 22px; min-height: 380px; overflow: hidden; }
@media (max-width: 759px) { .wx-app__body { min-height: 0; } .wx-app__thread { min-height: 400px; } }
.wx-app__lead { border-left: 1px solid var(--wx-color-border); padding: 12px 14px; }
.wx-app__fields { display: grid; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid var(--wx-color-border); }
.wx-app__fields div { display: grid; gap: 1px; }
.wx-app__fields dt { color: var(--wx-color-text-muted); font-size: .75rem; font-weight: 650; }
.wx-app__fields dd { margin: 0; font-weight: 700; }
.wx-app__status { display: grid; gap: 6px; padding: 14px 8px 10px; }
.wx-app__status span { color: var(--wx-color-text-muted); font-size: .75rem; font-weight: 650; }
.wx-app__status b { justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); font-size: .8125rem; }
.wx-app__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.wx-app__tags span { padding: 4px 9px; border-radius: 8px; background: var(--wx-color-surface-muted); color: var(--wx-color-text); font-weight: 650; font-size: .75rem; }
.wx-tour.is-enhanced .is-off { display: none; }

.wx .wx-features { list-style: none; display: grid; gap: 24px 40px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .wx .wx-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-features li { color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); line-height: 1.6; padding-top: 18px; border-top: 2px solid var(--wx-color-accent); }
.wx .wx-features strong { display: block; font-family: var(--wx-font-display); color: var(--wx-color-heading); font-size: var(--wx-fs-card); font-weight: 650; letter-spacing: -.01em; margin-bottom: 4px; }

/* 13. IA + humain ---------------------------------------------------------- */
.wx .wx-handoff__grid { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .wx .wx-handoff__grid { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); gap: 0; } }
.wx .wx-panel { border-radius: var(--wx-r-xl); padding: clamp(28px, 4vw, 52px); display: grid; gap: 22px; align-content: start; }
.wx .wx-panel--ai { background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 22%, transparent); }
.wx .wx-panel--team { background: var(--wx-color-surface); box-shadow: var(--wx-shadow-md), inset 0 0 0 1px var(--wx-color-border); }
/* Pictogramme d'interlocuteur : IA (étincelles sur vert) et équipe (casque sur encre), même famille que la scène. */
.wx .wx-panel__label { --wx-panel-icon: var(--wx-i-sparkles); --wx-panel-bg: var(--wx-color-accent); --wx-panel-fg: var(--wx-color-on-action); position: relative; display: flex; align-items: center; gap: 14px; }
.wx .wx-panel--team .wx-panel__label { --wx-panel-icon: var(--wx-i-headset); --wx-panel-bg: var(--wx-color-heading); --wx-panel-fg: var(--wx-color-surface); }
.wx .wx-panel__label::before { content: ""; width: 48px; height: 48px; flex: none; border-radius: 15px; background: var(--wx-panel-bg); }
.wx .wx-panel__label::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--wx-panel-fg);
  -webkit-mask: var(--wx-panel-icon) center / contain no-repeat; mask: var(--wx-panel-icon) center / contain no-repeat;
}
.wx-handoff__bridge { display: grid; place-items: center; position: relative; min-height: 64px; }
.wx-handoff__bridge::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--wx-color-accent), transparent); }
@media (min-width: 900px) { .wx-handoff__bridge::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, color-mix(in srgb, var(--wx-color-accent) 20%, transparent), var(--wx-color-accent), color-mix(in srgb, var(--wx-color-accent) 20%, transparent)); } }
.wx .wx-handoff__bridge > p { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--wx-color-heading); color: var(--wx-color-surface); font-size: .875rem; font-weight: 750; line-height: 1.2; box-shadow: 0 0 0 6px var(--wx-color-bg); }

.wx .wx-checklist { list-style: none; display: grid; gap: 14px; align-content: start; }
.wx .wx-checklist li { position: relative; padding-left: 36px; color: var(--wx-color-text); line-height: 1.5; }
.wx .wx-checklist li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--wx-color-accent); }
.wx .wx-checklist li::after {
  content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; background: var(--wx-color-on-action);
  -webkit-mask: var(--wx-i-check) center / contain no-repeat; mask: var(--wx-i-check) center / contain no-repeat;
}

/* 14. Fonctionnalités (bento) --------------------------------------------- */
.wx .wx-bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .wx .wx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx-tile--wide { grid-column: span 2; } }
@media (min-width: 1100px) { .wx .wx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); } .wx-tile--wide { grid-column: span 2; } }
.wx .wx-tile {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 12px; align-content: start;
  padding: clamp(26px, 3vw, 40px); border-radius: var(--wx-r-xl);
  background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm), inset 0 0 0 1px var(--wx-color-border);
  transition: transform 400ms var(--wx-ease), box-shadow 400ms var(--wx-ease);
}
.wx .wx-tile:hover { transform: translateY(-3px); box-shadow: var(--wx-shadow-md), inset 0 0 0 1px var(--wx-color-border); }
/* WordPress 7 ajoute « wp-block-paragraph » à chaque paragraphe : on cible aussi ce cas. */
.wx .wx-tile > p:is(:not([class]), [class="wp-block-paragraph"]) { color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); line-height: 1.6; max-width: 34em; }
.wx .wx-tile__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wx-fs-caption); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
/* wx-tile--night (v3) reste un alias de wx-tile--deep. */
.wx :is(.wx-tile--deep, .wx-tile--night) { background: radial-gradient(90% 60% at 80% 100%, color-mix(in srgb, var(--wx-color-accent) 40%, transparent), transparent 70%), var(--wx-grad-card); align-content: end; min-height: 320px; }
.wx :is(.wx-tile--deep, .wx-tile--night) .wx-tile__title { color: var(--wx-color-heading); }
.wx :is(.wx-tile--deep, .wx-tile--night) .wx-tile__label { color: var(--wx-color-accent-text); }
.wx :is(.wx-tile--deep, .wx-tile--night) > p:is(:not([class]), [class="wp-block-paragraph"]) { color: var(--wx-color-text); }
.wx .wx-tile--green { background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 24%, transparent); }
@media (min-width: 900px) {
  .wx .wx-tile--wide { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: 36px; align-items: center; }
  .wx .wx-tile--wide > :not(.wx-tile__visual) { grid-column: 1; }
  .wx .wx-tile--wide .wx-tile__visual { grid-column: 2; grid-row: 1 / span 3; }
}
.wx-vis-campaign { display: grid; gap: 10px; padding: 18px; border-radius: var(--wx-r-lg); background: var(--wx-color-chat); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-vis-campaign__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm); font-size: .875rem; }
.wx-vis-campaign__row b { display: inline-flex; align-items: center; gap: 8px; color: var(--wx-color-text-muted); font-weight: 650; }
.wx-vis-campaign__row b .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx-vis-campaign__row i { font-style: normal; font-weight: 700; color: var(--wx-color-heading); text-align: right; }

/* 15. Usages (onglets progressifs) ---------------------------------------- */
.wx .wx-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wx-tabs__list { justify-self: center; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
@media (max-width: 480px) {
  .wx-tabs__list { display: flex; justify-self: stretch; }
  .wx .wx-tabs__tab, .wx .wx-tabs__tab:focus { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 6px; font-size: .875rem; }
}
.wx .wx-tabs__tab, .wx .wx-tabs__tab:focus {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--wx-color-text-muted); font: 700 .9375rem/1 var(--wx-font-text);
  transition: background-color 260ms var(--wx-ease), color 260ms var(--wx-ease);
}
.wx .wx-tabs__tab .wx-ico { width: 18px; height: 18px; }
.wx .wx-tabs__tab:hover { color: var(--wx-color-heading); background: var(--wx-color-bg); }
.wx .wx-tabs__tab[aria-selected="true"] { background: var(--wx-color-heading); color: var(--wx-color-surface); }
.wx-tabs.is-enhanced .wx-tabs__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wx .wx-tabs .wx-tabs__panel[hidden] { display: none; }
.wx .wx-usage { display: grid; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--wx-r-xl); background: var(--wx-color-surface); box-shadow: var(--wx-shadow-sm), inset 0 0 0 1px var(--wx-color-border); }
@media (min-width: 900px) { .wx .wx-usage { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 56px; } }
.wx .wx-usage__copy { display: grid; gap: 20px; align-content: start; }
.wx-tabs:not(.is-enhanced) .wx-tabs__label { font-family: var(--wx-font-text); font-size: var(--wx-fs-caption); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx-usage__visual { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 270px; padding: clamp(18px, 3vw, 32px); border-radius: var(--wx-r-lg); background: var(--wx-color-chat); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-usage__meta { align-self: center; margin-top: 6px; font-size: .8125rem; color: var(--wx-color-text-muted); font-weight: 650; }

/* 16. Intégrations : logos -------------------------------------------------- */
.wx .wx-integrations__head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.wx .wx-logos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .wx .wx-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wx .wx-logo-tile {
  display: grid; grid-template-rows: 56px auto auto; align-content: start; gap: 6px;
  padding: 22px 20px 18px; border-radius: 24px; background: var(--wx-color-surface);
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: transform 300ms var(--wx-ease), box-shadow 300ms var(--wx-ease);
}
.wx .wx-logo-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), var(--wx-shadow-md); }
.wx .wx-logo-tile .wp-block-image, .wx .wx-logo-tile__mark { display: flex; align-items: center; height: 56px; margin: 0; }
/* Boîte commune 140 × 40 px : équilibre optique entre logos larges (Woo, Shopify) et compacts (Zoho), sans les déformer. */
.wx .wx-logo-tile .wp-block-image img { width: auto; max-width: min(140px, 100%); height: auto; max-height: 40px; object-fit: contain; object-position: left center; }
.wx .wx-logo-tile__mark { font-family: var(--wx-font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-logo-tile__name { font-weight: 750; font-size: 1rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-logo-tile__cat { font-size: var(--wx-fs-caption); line-height: 1.4; color: var(--wx-color-text-muted); }
/* Outil sans fichier de logo autorisé : le nom tient lieu de repère, dans la même tuile. */
.wx .wx-logo-tile--name { grid-template-rows: 56px auto; }
.wx .wx-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.wx .wx-tools li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: var(--wx-fs-small); font-weight: 650; color: var(--wx-color-heading); }
.wx .wx-integrations__grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 960px) { .wx .wx-integrations__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wx .wx-integrations__copy { display: grid; gap: 16px; justify-items: start; align-content: start; }
.wx .wx-integrations__copy .wx-footnote { margin-top: 0; }
.wx .wx-card { border-radius: var(--wx-r-xl); padding: clamp(26px, 3.4vw, 44px); background: var(--wx-color-bg); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-card__title { margin-bottom: 22px; }
.wx .wx-prereq__list { list-style: none; counter-reset: wx-prereq; display: grid; gap: 18px; }
.wx .wx-prereq__list li { counter-increment: wx-prereq; position: relative; padding-left: 52px; color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); line-height: 1.55; }
.wx .wx-prereq__list li::before {
  content: counter(wx-prereq); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--wx-color-accent); color: var(--wx-color-on-action); font-weight: 800; font-size: .9375rem;
}
.wx .wx-prereq__list strong { display: block; color: var(--wx-color-heading); font-size: 1.0625rem; }

/* 17. FAQ ------------------------------------------------------------------ */
.wx .wx-faq__grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .wx .wx-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .wx-faq__head { position: sticky; top: 104px; } }
.wx .wx-faq__head { display: grid; gap: 16px; align-content: start; }
.wx-faq__head > p:last-child { color: var(--wx-color-text-muted); }
.wx .wx-faq__item { border-bottom: 1px solid var(--wx-color-border-strong); }
.wx .wx-faq__item:first-child { border-top: 1px solid var(--wx-color-border-strong); }
.wx .wx-faq__item summary {
  position: relative; display: block; padding: 22px 56px 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--wx-font-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--wx-color-heading);
  border-radius: 10px;
}
.wx .wx-faq__item summary::-webkit-details-marker { display: none; }
.wx .wx-faq__item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); transition: background-color 200ms var(--wx-ease-soft); }
.wx .wx-faq__item summary::before { content: ""; position: absolute; z-index: 1; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--wx-color-heading); -webkit-mask: var(--wx-i-plus) center / contain no-repeat; mask: var(--wx-i-plus) center / contain no-repeat; transition: transform 320ms var(--wx-ease); }
.wx .wx-faq__item[open] summary::before { transform: rotate(45deg); }
.wx .wx-faq__item[open] summary::after { background-color: var(--wx-color-accent); box-shadow: none; }
.wx .wx-faq__item > :not(summary) { padding: 0 52px 24px 4px; color: var(--wx-color-text-muted); line-height: 1.65; }
@supports (interpolate-size: allow-keywords) {
  .wx .wx-faq__item { interpolate-size: allow-keywords; }
  .wx .wx-faq__item::details-content { height: 0; overflow: clip; transition: height 360ms var(--wx-ease), content-visibility 360ms allow-discrete; }
  .wx .wx-faq__item[open]::details-content { height: auto; }
}

/* 18. Demande de démo (bloc walexia/demo-form) ---------------------------- */
.wx.wx-demo { padding-block: clamp(32px, 5vw, 64px) var(--wx-section-pad); }
/* Après une section sans fond, le panneau de démo se place comme les autres panneaux (rembourrage de la section
   précédente seulement) ; après un panneau, il garde un écart pour ne pas le toucher. */
.wx.wx-section:not(.wx-section--tint, .wx-cta-band, .wx-trust, .wx-hero) + .wx.wx-demo { padding-top: 0; }
/* Panneau clair au vert Walexia (plus de fond sombre) */
.wx .wx-demo__card {
  display: grid; gap: clamp(32px, 5vw, 72px); align-items: start;
  margin-inline: var(--wx-inset); max-width: calc(1480px - 2 * var(--wx-inset));
  padding: clamp(28px, 6vw, 96px) clamp(18px, 6vw, 96px);
  border-radius: var(--wx-r-xl); color: var(--wx-color-text);
  background:
    radial-gradient(70% 70% at 0% 0%, color-mix(in srgb, var(--wx-color-accent) 24%, transparent), transparent 65%),
    var(--wx-grad-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 22%, transparent), var(--wx-shadow-md);
}
@media (min-width: 1520px) { .wx .wx-demo__card { margin-inline: auto; } }
@media (min-width: 1024px) { .wx .wx-demo__card { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); } }
.wx .wx-demo__copy { display: grid; gap: 20px; justify-items: start; align-content: start; }
.wx .wx-demo__list-title { margin-top: 12px; font-weight: 750; color: var(--wx-color-heading); }
.wx .wx-checklist--night li { color: var(--wx-color-text); }
.wx .wx-demo__card .wx-form-card { box-shadow: var(--wx-shadow-lg), inset 0 0 0 1px var(--wx-color-border); }

.wx.wx-form-card {
  --wx-focus: var(--wx-color-heading); --wx-link: var(--wx-color-accent-text);
  position: relative; width: 100%; padding: clamp(20px, 3vw, 36px); border-radius: var(--wx-r-lg);
  background: var(--wx-color-surface); color: var(--wx-color-text);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--wx-color-heading) 70%, transparent);
}
.wx-form__intro { font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); margin-bottom: 14px; }
.wx-form__grid { display: grid; gap: 14px; }
@media (min-width: 480px) { .wx-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx-field--full { grid-column: 1 / -1; } }
.wx-field { display: grid; gap: 6px; align-content: start; }
.wx .wx-field label { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--wx-color-heading); }
.wx-req { color: var(--wx-color-accent-text); }
.wx-optional { font-weight: 500; color: var(--wx-color-text-muted); font-size: .875rem; }
.wx .wx-field :is(input, select, textarea) {
  width: 100%; min-height: 52px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--wx-color-border-strong); border-radius: 14px;
  background: var(--wx-color-surface); color: var(--wx-color-heading); font: 500 1rem/1.4 var(--wx-font-text);
  transition: border-color 160ms var(--wx-ease-soft), box-shadow 160ms var(--wx-ease-soft);
  -webkit-appearance: none; appearance: none;
}
.wx .wx-field textarea { min-height: 96px; resize: vertical; }
.wx .wx-field :is(input, select, textarea)::placeholder { color: var(--wx-color-text-muted); }
.wx .wx-field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--wx-color-heading) 34%, transparent); }
.wx .wx-field :is(input, select, textarea):focus { outline: none; border-color: var(--wx-color-accent-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); }
.wx .wx-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--wx-color-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-danger) 12%, transparent); }
.wx-select { position: relative; }
.wx-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: var(--wx-color-text-muted); -webkit-mask: var(--wx-i-chevron) center / contain no-repeat; mask: var(--wx-i-chevron) center / contain no-repeat; }
.wx-select select { padding-right: 44px; }
.wx-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: .875rem; font-weight: 650; color: var(--wx-color-danger); }
.wx-field__error[hidden] { display: none; }
.wx-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wx-form__legal { margin: 16px 0 18px; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); }
.wx-form__submit .wx-button { min-height: 56px; }
.wx-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--wx-color-heading) 25%, transparent); border-top-color: var(--wx-color-heading); }
.wx-form.is-sending .wx-spinner { display: inline-block; animation: wx-spin 800ms linear infinite; }
.wx-form.is-sending .wx-button { cursor: progress; opacity: .85; }
.wx-form__status:empty { display: none; }
.wx-form__status { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: .9375rem; font-weight: 650; background: var(--wx-color-surface-muted); color: var(--wx-color-text); }
.wx-form__status.is-error { background: var(--wx-color-danger-bg); color: var(--wx-color-danger); }
.wx-form-success { display: grid; justify-items: center; text-align: center; gap: 12px; padding: clamp(24px, 4vw, 48px) 8px; }
.wx-form-success[hidden] { display: none; }
.wx-form-success:focus { outline: none; }
.wx-form-success:focus-visible { outline: 2px solid var(--wx-color-heading); outline-offset: 4px; border-radius: 16px; }
.wx-form-success__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-form-success__icon svg { width: 30px; height: 30px; }
.wx .wx-form-success__title { font-family: var(--wx-font-display); font-size: var(--wx-fs-subtitle); font-weight: 700; letter-spacing: -.02em; }
.wx-form-success p { color: var(--wx-color-text-muted); max-width: 30em; }
/* Case à cocher (accord WhatsApp du formulaire de ressource) */
.wx .wx-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--wx-grad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 26%, transparent); }
.wx .wx-check input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 1px 0 0; padding: 0; border-radius: 6px; accent-color: var(--wx-color-accent-text); -webkit-appearance: auto; appearance: auto; cursor: pointer; }
.wx .wx-check label { font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--wx-color-text); cursor: pointer; }
.wx-form-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.wx-form__noscript { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); font-weight: 650; font-size: .9375rem; }

/* 19. Pied de page --------------------------------------------------------- */
/* Pied de page (5.17) : grande carte arrondie en dégradé vert clair construit sur #34D36B, deux halos, filet vert en
   haut ; marque, quatre colonnes de liens avec pictogramme et filet, carte « Des questions ? » à droite (sous les
   colonnes en dessous de 1240 px), filigrane du logo Walexia ; bande du bas couleur encre (celle des boutons sombres),
   avec mentions, cookies, réseaux sociaux (bloc natif Liens sociaux) et langue. */
.wx.wx-footer {
  --wx-footer-ink: var(--wx-color-heading);
  --wx-footer-muted: #2F4A3C;
  --wx-footer-accent: var(--wx-deep-3);
  --wx-footer-line: color-mix(in srgb, var(--wx-color-heading) 12%, transparent);
  --wx-i-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7.5 4.2v8.6L12 20.5l-7.5-4.2V7.7z'/%3E%3Cpath d='M4.5 7.7L12 12l7.5-4.3M12 12v8.5'/%3E%3C/svg%3E");
  --wx-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.25'/%3E%3Cpath d='M3.5 19c.8-3 3-4.6 5.5-4.6s4.7 1.6 5.5 4.6'/%3E%3Cpath d='M15.5 5.6a3.2 3.2 0 0 1 0 5.8M17.5 14.6c1.6.6 2.6 2 3 4.4'/%3E%3C/svg%3E");
  --wx-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  --wx-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --wx-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5s-1.2 6.1-3.6 8.5c-2.4-2.4-3.6-5.2-3.6-8.5S9.6 5.9 12 3.5z'/%3E%3C/svg%3E");
  --wx-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 19.5l1.1-3.9A8 8 0 1 1 20 11.5z'/%3E%3C/svg%3E");
  --wx-i-chevron-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; margin-top: clamp(24px, 4vw, 48px);
  padding-top: clamp(56px, 7vw, 96px); font-size: var(--wx-fs-small); color: var(--wx-footer-muted);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  background:
    radial-gradient(50% 60% at 0% 0%, color-mix(in srgb, var(--wx-color-accent) 42%, transparent), transparent 70%),
    radial-gradient(55% 65% at 100% 100%, color-mix(in srgb, var(--wx-color-accent) 34%, transparent), transparent 70%),
    linear-gradient(165deg, var(--wx-g-24) 0%, var(--wx-g-16) 50%, var(--wx-g-24) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wx-color-accent) 40%, transparent);
}
.wx.wx-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wx-color-accent) 0%, transparent), var(--wx-color-accent) 30%, var(--wx-color-accent) 70%, color-mix(in srgb, var(--wx-color-accent) 0%, transparent));
}
.wx .wx-footer__inner { position: relative; z-index: 1; max-width: calc(var(--wx-max-wide) + 2 * var(--wx-gutter)); }
.wx .wx-footer__watermark { position: absolute; z-index: 0; top: auto; bottom: 70px; right: -150px; width: 440px; height: auto; opacity: .55; filter: brightness(0) invert(1); transform: rotate(-12deg); pointer-events: none; user-select: none; }
.wx.wx-footer :is(p, li) { color: inherit; }
.wx .wx-footer__top { display: grid; gap: 44px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: clamp(48px, 6vw, 80px); }
.wx .wx-footer__brand, .wx .wx-footer__contact { grid-column: 1 / -1; }
.wx .wx-footer__brand { display: grid; gap: 12px; justify-items: start; align-content: start; max-width: 440px; }
@media (min-width: 960px) {
  .wx .wx-footer__top { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
  .wx .wx-footer__brand { grid-column: auto; }
}
@media (min-width: 1240px) {
  .wx .wx-footer__top { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, .95fr)) minmax(0, 1.25fr); }
  .wx .wx-footer__contact { grid-column: auto; align-self: start; }
}
.wx .wx-footer__logo { margin: 0; }
.wx .wx-footer__logo img { height: 40px; width: auto; display: block; }
.wx-footer__logo a { display: inline-flex; align-items: center; min-height: 44px; }
.wx.wx-footer .wx-footer__tagline { margin: 10px 0 0; font: 700 clamp(1.125rem, 1rem + .45vw, 1.375rem)/1.35 var(--wx-font-display); letter-spacing: -.012em; color: var(--wx-footer-ink); }
.wx.wx-footer .wx-footer__sub { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--wx-footer-muted); }
.wx .wx-footer__brand .wx-actions { margin: 12px 0 6px; }
.wx-footer__brand .wx-btn--primary > .wp-block-button__link { min-height: 56px; padding-inline: 30px; font-size: 1.0625rem; }

/* Titres de colonne : pictogramme encre, filet #34D36B dessous. */
.wx .wx-footer__title { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding-bottom: 14px; font-family: var(--wx-font-text); font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-footer-ink); }
.wx .wx-footer__title::before { content: ""; width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--wx-ft-i) center / contain no-repeat; mask: var(--wx-ft-i) center / contain no-repeat; }
.wx .wx-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--wx-color-accent); }
.wx .wx-footer__title--cube { --wx-ft-i: var(--wx-i-cube); }
.wx .wx-footer__title--users { --wx-ft-i: var(--wx-i-users); }
.wx .wx-footer__title--car { --wx-ft-i: var(--wx-i-car); }
.wx .wx-footer__title--book { --wx-ft-i: var(--wx-i-book); }
.wx .wx-footer__title--grid { --wx-ft-i: var(--wx-i-grid); }
.wx-footer__col ul + .wx-footer__title { margin-top: 40px; }
.wx-footer ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.wx.wx-footer a { color: var(--wx-footer-muted); text-decoration: none; transition: color 160ms var(--wx-ease-soft); }
.wx.wx-footer a:hover { color: var(--wx-footer-ink); text-decoration: underline; text-decoration-color: var(--wx-footer-accent); text-underline-offset: .2em; }
.wx.wx-footer a:focus-visible { outline-color: var(--wx-footer-accent); }
.wx.wx-footer .wx-footer__col a { font-size: .9375rem; color: var(--wx-footer-ink); }

/* Carte « Des questions ? » : verre clair, pastille verte, bouton blanc, trois engagements. */
.wx .wx-footer__contact { position: relative; display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(24px, 2.4vw, 34px); border-radius: 28px; background: color-mix(in srgb, #FFFFFF 58%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 85%, transparent), 0 28px 56px -36px color-mix(in srgb, var(--wx-color-heading) 50%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wx .wx-footer__contact > * { margin: 0; }
.wx .wx-footer__contact-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #FFFFFF; background: radial-gradient(80% 80% at 30% 20%, color-mix(in srgb, var(--wx-color-accent) 70%, #FFFFFF), var(--wx-color-accent) 70%); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--wx-color-accent) 90%, transparent); }
.wx .wx-footer__contact-ico .wx-ico { width: 32px; height: 32px; stroke-width: 2; }
.wx.wx-footer .wx-footer__contact-title { margin-top: 8px; font: 800 clamp(1.25rem, 1.05rem + .55vw, 1.5625rem)/1.2 var(--wx-font-display); letter-spacing: -.02em; color: var(--wx-footer-ink); }
.wx.wx-footer .wx-footer__contact p { font-size: .9375rem; line-height: 1.55; }
.wx .wx-footer__contact .wp-block-buttons { margin: 8px 0 6px; }
.wx .wx-btn--light > .wp-block-button__link { gap: 12px; min-height: 54px; padding: 0 22px 0 18px; background: #FFFFFF; color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 14px 28px -20px color-mix(in srgb, var(--wx-color-heading) 60%, transparent); }
.wx.wx-footer .wx-btn--light > .wp-block-button__link { color: var(--wx-color-heading); text-decoration: none; }
.wx .wx-btn--light > .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent), 0 18px 32px -20px color-mix(in srgb, var(--wx-color-heading) 60%, transparent); }
.wx .wx-btn--light > .wp-block-button__link::before,
.wx .wx-btn--light > .wp-block-button__link::after { content: ""; flex: none; background: currentColor; }
.wx .wx-btn--light > .wp-block-button__link::before { width: 24px; height: 24px; -webkit-mask: var(--wx-i-chat) center / contain no-repeat; mask: var(--wx-i-chat) center / contain no-repeat; }
.wx .wx-btn--light > .wp-block-button__link::after { width: 16px; height: 16px; margin-left: 10px; -webkit-mask: var(--wx-i-chevron-r) center / contain no-repeat; mask: var(--wx-i-chevron-r) center / contain no-repeat; transition: transform 260ms var(--wx-ease); }
.wx .wx-btn--light > .wp-block-button__link:hover::after { transform: translateX(3px); }
.wx.wx-footer .wx-footer__promises { justify-self: stretch; gap: 14px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--wx-footer-line); }
.wx.wx-footer .wx-footer__promises li { display: flex; align-items: center; gap: 14px; font-size: .9375rem; font-weight: 600; color: var(--wx-footer-ink); }
.wx .wx-footer__promises li::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--wx-color-accent); -webkit-mask: var(--wx-ft-i, var(--wx-i-check)) center / contain no-repeat; mask: var(--wx-ft-i, var(--wx-i-check)) center / contain no-repeat; }
.wx .wx-footer__promises li:nth-child(1) { --wx-ft-i: var(--wx-i-clock); }
.wx .wx-footer__promises li:nth-child(2) { --wx-ft-i: var(--wx-i-calendar); }
.wx .wx-footer__promises li:nth-child(3) { --wx-ft-i: var(--wx-i-globe); }
@media (min-width: 720px) and (max-width: 1239px) {
  .wx .wx-footer__contact { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .wx .wx-footer__contact-ico { grid-row: 1 / span 2; }
  .wx .wx-footer__contact > :is(h2, p) { grid-column: 2; }
  .wx .wx-footer__contact .wp-block-buttons { grid-column: 3; grid-row: 1 / span 2; }
  .wx.wx-footer .wx-footer__promises { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 32px; }
}

/* Certifications et partenaires : fichiers de marque d'origine (deux d'entre eux en blanc), d'où la plaque encre. */
.wx .wx-footer__badges { justify-self: stretch; margin-top: 18px; padding: 20px 22px 22px; border-radius: 22px; background: linear-gradient(150deg, color-mix(in srgb, var(--wx-color-heading) 90%, var(--wx-color-accent)), var(--wx-color-heading)); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--wx-color-heading) 70%, transparent); }
.wx.wx-footer .wx-footer__badges-title { margin: 0 0 16px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E6F2EA; }
.wx .wx-footer__badges-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: center; }
.wx .wx-footer__badges-grid .wp-block-image { display: flex; align-items: center; gap: 12px; margin: 0; }
.wx .wx-footer__badges-grid img { display: block; width: auto; max-width: 100%; height: 50px; object-fit: contain; }
.wx .wx-footer__badges-grid .is-partner img { height: 30px; }
.wx .wx-footer__badges-grid .is-seal img { width: 46px; height: 46px; }
.wx.wx-footer .wx-footer__badges-grid figcaption { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.25; color: #FFFFFF; text-align: left; text-wrap: balance; }

/* Bande du bas, couleur encre. */
.wx .wx-footer__bar { position: relative; z-index: 1; padding-block: 26px; color: #C9DDD1; background: linear-gradient(150deg, color-mix(in srgb, var(--wx-color-heading) 92%, var(--wx-color-accent)), var(--wx-color-heading) 60%); }
.wx .wx-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.wx .wx-footer__id { display: grid; gap: 4px; max-width: 460px; margin-right: auto; }
@media (min-width: 1100px) { .wx .wx-footer__id { padding-right: 36px; border-right: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent); } }
.wx.wx-footer .wx-footer__mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 0; font: 800 1.25rem/1 var(--wx-font-display); letter-spacing: .03em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; }
.wx .wx-footer__mark img { width: 32px; height: 32px; }
.wx.wx-footer .wx-footer__copy { margin: 0; font-size: .875rem; color: #E6F2EA; }
.wx.wx-footer .wx-footer__disclaimer { margin: 0; font-size: .75rem; color: #9DB8A9; }
.wx-footer__legal { display: flex !important; flex-wrap: wrap; gap: 8px 26px !important; }
.wx.wx-footer .wx-footer__bar a { color: #DCEBE2; }
.wx.wx-footer .wx-footer__bar a:hover { color: #FFFFFF; text-decoration-color: var(--wx-color-accent); }
.wx.wx-footer .wx-footer__bar a:focus-visible { outline-color: var(--wx-color-accent); }
.wx.wx-footer .wx-footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; font-size: 20px; }
.wx.wx-footer .wx-footer__social li.wp-social-link { margin: 0; padding: 0; border-radius: 50%; background: none; color: inherit; }
.wx.wx-footer .wx-footer__social li.wp-social-link a { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; color: #FFFFFF; background: color-mix(in srgb, #FFFFFF 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 14%, transparent); transition: background-color 180ms var(--wx-ease-soft), color 180ms var(--wx-ease-soft), transform 220ms var(--wx-ease); }
.wx.wx-footer .wx-footer__social li.wp-social-link a:hover { color: var(--wx-color-heading); background: var(--wx-color-accent); transform: translateY(-2px); text-decoration: none; }
.wx.wx-footer .wx-footer__social li.wp-social-link svg { width: 20px; height: 20px; fill: currentColor; }
.wx.wx-footer .wx-footer__social :is(.screen-reader-text, .wp-block-social-link-label) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wx.wx-footer .wx-footer__lang { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 11px 16px; border-radius: 14px; font-weight: 700; color: #FFFFFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 24%, transparent); }
.wx .wx-footer__lang::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--wx-i-globe) center / contain no-repeat; mask: var(--wx-i-globe) center / contain no-repeat; }
@media (max-width: 1239px) { .wx .wx-footer__watermark { top: 24px; bottom: auto; width: 280px; right: -110px; opacity: .45; } }
@media (max-width: 639px) {
  .wx .wx-footer__bar-inner { gap: 18px; }
  .wx .wx-footer__id { flex-basis: 100%; }
}

/* 22. Démonstration iPhone (bloc walexia/phone-demo) ---------------------- */
.wx.wx-pd { --wx-phone-w: min(300px, 80vw); position: relative; min-width: 0; container: wx-pd / inline-size; }
.wx-pd--hero { display: grid; justify-items: center; gap: 14px; }
.wx-pd__stage { position: relative; display: grid; justify-items: center; gap: 12px; min-width: 0; width: 100%; }
.wx .wx-pd__tag {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--wx-color-surface); color: var(--wx-color-text-muted); font-size: var(--wx-fs-caption); font-weight: 600; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx-pd__tag .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }

/* Appareil : proportions d'un iPhone récent (71,6 × 147,6 mm). Bande en titane clair brossé (reflets en conique,
   chanfreins, lignes d'antenne), boutons en relief, bordure de verre noire, reflet sur la vitre, objectif dans l'îlot. */
.wx-phone {
  --w: var(--wx-phone-w); position: relative; width: var(--w); aspect-ratio: 716 / 1476; flex: none;
  padding: calc(var(--w) * .017); border-radius: calc(var(--w) * .168);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wx-color-device-hi) 70%, transparent), transparent 9%, transparent 91%, color-mix(in srgb, var(--wx-color-device-lo) 55%, transparent)),
    conic-gradient(from 215deg, var(--wx-color-device-hi), var(--wx-color-device) 11%, var(--wx-color-device-lo) 19%, var(--wx-color-device) 28%, var(--wx-color-device-hi) 40%, var(--wx-color-device) 55%, var(--wx-color-device-lo) 68%, var(--wx-color-device) 80%, var(--wx-color-device-hi));
  box-shadow:
    inset 0 0 0 1px var(--wx-color-device-edge),
    inset 0 0 0 1.75px color-mix(in srgb, var(--wx-color-device-hi) 90%, transparent),
    inset 0 0 0 calc(var(--w) * .012) color-mix(in srgb, var(--wx-color-device-lo) 18%, transparent),
    inset 0 0 0 calc(var(--w) * .017) color-mix(in srgb, var(--wx-color-device-edge) 55%, transparent),
    0 1px 2px color-mix(in srgb, var(--wx-color-heading) 14%, transparent),
    0 28px 50px -24px color-mix(in srgb, var(--wx-color-heading) 40%, transparent),
    0 60px 90px -50px color-mix(in srgb, var(--wx-color-deep) 42%, transparent);
}
/* Lignes d'antenne : visibles seulement sur la bande (l'écran passe par-dessus). */
.wx-phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 8.4%, var(--wx-color-device-edge) 8.4% 8.75%, transparent 8.75% 91.25%, var(--wx-color-device-edge) 91.25% 91.6%, transparent 91.6%);
  opacity: .5;
}
.wx-phone__key {
  position: absolute; width: calc(var(--w) * .013); border-radius: calc(var(--w) * .006);
  background: linear-gradient(90deg, var(--wx-color-device-edge), var(--wx-color-device-hi) 45%, var(--wx-color-device) 70%, var(--wx-color-device-lo));
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--wx-color-device-edge) 80%, transparent);
}
.wx-phone__key--action { left: calc(var(--w) * -.009); top: 17%; height: 4%; }
.wx-phone__key--up { left: calc(var(--w) * -.009); top: 24%; height: 7.5%; }
.wx-phone__key--down { left: calc(var(--w) * -.009); top: 33%; height: 7.5%; }
.wx-phone__key--side { right: calc(var(--w) * -.009); top: 26%; height: 11%; transform: scaleX(-1); }
.wx-phone__screen {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: calc(var(--w) * .024) solid var(--wx-color-device-glass); border-radius: calc(var(--w) * .151);
  background: var(--wx-color-chat); font-size: calc(var(--w) * .0435); line-height: 1.35; color: var(--wx-color-heading);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wx-color-device-glass) 70%, transparent);
  isolation: isolate;
}
/* Reflet de la vitre, discret pour ne pas gêner la lecture. */
.wx-phone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(118deg, color-mix(in srgb, var(--wx-color-surface) 16%, transparent) 0%, color-mix(in srgb, var(--wx-color-surface) 4%, transparent) 26%, transparent 27%, transparent 78%, color-mix(in srgb, var(--wx-color-surface) 6%, transparent) 100%);
}
.wx-phone__island { position: absolute; z-index: 3; top: calc(var(--w) * .022); left: 50%; width: 31%; height: calc(var(--w) * .085); transform: translateX(-50%); border-radius: 999px; background: var(--wx-color-device-glass); }
.wx-phone__island::after {
  content: ""; position: absolute; top: 50%; right: 16%; width: calc(var(--w) * .034); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, color-mix(in srgb, var(--wx-color-surface) 55%, transparent) 0 10%, var(--wx-color-device-lens) 26%, var(--wx-color-device-glass) 72%);
}
.wx-phone__status {
  display: flex; justify-content: space-between; align-items: center; flex: none;
  height: calc(var(--w) * .13); padding: 0 calc(var(--w) * .085) 0 calc(var(--w) * .1);
  background: var(--wx-color-surface); font-weight: 700; font-size: calc(var(--w) * .047); letter-spacing: -.01em;
}
.wx-phone__sys { display: inline-flex; align-items: center; gap: 4px; }
.wx-phone__sys svg { height: calc(var(--w) * .036); width: auto; fill: currentColor; }
.wx-phone__home { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--w) * .018); width: 34%; height: 4px; transform: translateX(-50%); border-radius: 999px; background: color-mix(in srgb, var(--wx-color-heading) 82%, transparent); }
.wx-phone__video { display: block; flex: 1; width: 100%; min-height: 0; object-fit: cover; background: var(--wx-color-surface); }

/* Interface de conversation inspirée de WhatsApp (sans logo ni motif de la marque) */
.wx-wa__head {
  display: flex; align-items: center; gap: calc(var(--w) * .025); flex: none;
  padding: calc(var(--w) * .01) calc(var(--w) * .035) calc(var(--w) * .025);
  background: var(--wx-color-surface); border-bottom: 1px solid var(--wx-color-border);
}
.wx-wa__back { display: grid; color: var(--wx-color-accent-text); }
.wx-wa__back .wx-ico { width: calc(var(--w) * .075); height: calc(var(--w) * .075); stroke-width: 2.2; }
.wx-wa__head-avatar { display: grid; place-items: center; flex: none; width: calc(var(--w) * .115); height: calc(var(--w) * .115); border-radius: 50%; overflow: hidden; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); }
.wx-wa__head-avatar .wx-ico { width: 58%; height: 58%; }
.wx-wa__head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wx-wa__head-id { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.wx-wa__head-id b { display: inline-flex; align-items: center; gap: 4px; font-size: calc(var(--w) * .05); font-weight: 700; color: var(--wx-color-heading); white-space: nowrap; }
.wx-wa__head-id > span { font-size: calc(var(--w) * .037); color: var(--wx-color-text-muted); }
.wx-oc .wx-wa__head-id b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--w) * .047); }
.wx-oc .wx-wa__head-actions { gap: calc(var(--w) * .034); }
.wx-wa__verified { width: 1em; height: 1em; }
.wx-wa__head-actions { display: inline-flex; gap: calc(var(--w) * .045); color: var(--wx-color-accent-text); }
.wx-wa__head-actions .wx-ico { width: calc(var(--w) * .068); height: calc(var(--w) * .068); }

.wx-wa__thread {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--w) * .022) calc(var(--w) * .03) calc(var(--w) * .03);
  background-color: var(--wx-color-chat);
  background-image: radial-gradient(color-mix(in srgb, var(--wx-color-heading) 6%, transparent) 1px, transparent 1.3px);
  background-size: 16px 16px;
}
.wx .wx-wa__thread:focus-visible { outline-offset: -3px; border-radius: 0; }
.wx-wa__track { display: flex; flex-direction: column; gap: calc(var(--w) * .016); }

.wx-wa__msg { display: flex; flex-direction: column; gap: 3px; max-width: 86%; align-self: flex-start; }
.wx-wa__msg--contact { align-self: flex-end; align-items: flex-end; }
.wx-wa__bubble {
  position: relative; min-width: 0; padding: calc(var(--w) * .018) calc(var(--w) * .03) calc(var(--w) * .012);
  border-radius: 4px 14px 14px 14px; background: var(--wx-color-bubble-in);
  box-shadow: 0 1px .5px color-mix(in srgb, var(--wx-color-heading) 13%, transparent);
}
.wx-wa__msg--contact .wx-wa__bubble { border-radius: 14px 4px 14px 14px; background: var(--wx-color-bubble-out); }
.wx .wx-wa__who { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; font-size: calc(var(--w) * .038); line-height: 1.25; }
.wx-wa__who b { font-weight: 700; color: var(--wx-color-accent-text); }
.wx-wa__msg--agent .wx-wa__who b { color: var(--wx-color-heading); }
.wx-wa__avatar { display: grid; place-items: center; width: calc(var(--w) * .056); height: calc(var(--w) * .056); border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-wa__msg--agent .wx-wa__avatar { background: var(--wx-color-heading); color: var(--wx-color-surface); }
.wx-wa__avatar .wx-ico { width: 70%; height: 70%; stroke-width: 2; }
.wx-wa__role { padding: 0 6px; border-radius: 999px; background: var(--wx-color-surface-muted); color: var(--wx-color-text-muted); font-size: calc(var(--w) * .036); font-weight: 600; }
.wx .wx-wa__text { margin: 0; }
.wx .wx-wa__footer { margin-top: 4px; font-size: calc(var(--w) * .038); line-height: 1.35; color: var(--wx-color-text-muted); }
.wx-wa__link { color: var(--wx-color-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.wx .wx-wa__meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 1px; font-size: calc(var(--w) * .037); line-height: 1.2; color: var(--wx-color-chat-meta); }
.wx-wa__meta .wx-ico { width: 1.35em; height: 1.35em; color: var(--wx-color-tick); stroke-width: 2.1; }
.wx .wx-wa__quote { display: grid; margin: 1px 0 3px; padding: 4px 8px; border-radius: 7px; border-left: 3px solid var(--wx-color-accent); background: color-mix(in srgb, var(--wx-color-heading) 6%, transparent); font-size: calc(var(--w) * .038); line-height: 1.3; }
.wx-wa__quote b { color: var(--wx-color-accent-text); font-weight: 700; }
.wx-wa__quote span { color: var(--wx-color-text-muted); }

/* Boutons de réponse rapide : repères visuels non interactifs (ce ne sont pas des commandes de la page). */
.wx .wx-wa__buttons { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wx .wx-wa__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: calc(var(--w) * .022) 10px;
  border-radius: 10px; background: var(--wx-color-surface); color: var(--wx-color-accent-text);
  font-size: calc(var(--w) * .041); font-weight: 600; line-height: 1.25; text-align: center;
  box-shadow: 0 1px .5px color-mix(in srgb, var(--wx-color-heading) 13%, transparent);
  transition: background-color 200ms var(--wx-ease-soft), transform 200ms var(--wx-ease);
}
.wx-wa__btn .wx-ico { width: 1.1em; height: 1.1em; flex: none; }
.wx .wx-wa__btn.is-pressed { background: var(--wx-color-bg-tint); transform: scale(.97); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent); }

/* Carrousel : glissement natif (et défilement clavier) ; la carte suivante reste visible. */
.wx-wa__msg--carousel { max-width: none; align-self: stretch; margin-inline: calc(var(--w) * -.03); }
.wx .wx-wa__carousel {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2px calc(var(--w) * .03) 4px; scroll-padding-inline: calc(var(--w) * .03); outline-offset: -3px;
}
.wx-wa__carousel::-webkit-scrollbar { display: none; }
.wx .wx-wa__cards { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(var(--w) * .025); }
.wx .wx-wa__card {
  flex: 0 0 76%; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: var(--wx-color-surface); box-shadow: 0 1px .5px color-mix(in srgb, var(--wx-color-heading) 13%, transparent);
}
.wx-wa__card-media { display: grid; place-items: center; aspect-ratio: 2.6 / 1; background: linear-gradient(180deg, var(--wx-color-surface), var(--wx-color-car-stage)); }
.wx-wa__card-media--photo { aspect-ratio: 1.75 / 1; overflow: hidden; background: var(--wx-color-surface-muted); }
.wx-wa__card-media img { width: 100%; height: 100%; object-fit: cover; }
.wx-car { width: 78%; height: auto; }
.wx-wa__card-body { flex: 1; align-content: start; display: grid; gap: 1px; padding: calc(var(--w) * .018) calc(var(--w) * .03) calc(var(--w) * .012); }
.wx .wx-wa__card-title { font-weight: 700; font-size: calc(var(--w) * .044); color: var(--wx-color-heading); }
.wx .wx-wa__card-specs { font-size: calc(var(--w) * .038); color: var(--wx-color-text-muted); }
.wx .wx-wa__card .wx-wa__btn { border-radius: 0; box-shadow: none; border-top: 1px solid var(--wx-color-border); }

.wx-wa__msg--typing { display: none; }
.wx-wa__msg--typing .wx-wa__bubble { display: inline-flex; gap: 4px; padding: 10px 12px; }
.wx-wa__msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--wx-color-chat-meta); opacity: .6; }

.wx-wa__composer {
  display: flex; align-items: center; gap: calc(var(--w) * .022); flex: none;
  padding: calc(var(--w) * .022) calc(var(--w) * .03) calc(var(--w) * .075);
  background: var(--wx-color-wa-bar); border-top: 1px solid var(--wx-color-border);
}
.wx-wa__input { display: flex; align-items: center; gap: calc(var(--w) * .022); flex: 1; min-width: 0; height: calc(var(--w) * .11); padding: 0 calc(var(--w) * .03); border-radius: 999px; background: var(--wx-color-surface); color: var(--wx-color-text-muted); font-size: calc(var(--w) * .042); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-wa__input > span { flex: 1; }
.wx-wa__input .wx-ico { width: calc(var(--w) * .06); height: calc(var(--w) * .06); }
.wx-wa__mic { display: grid; place-items: center; flex: none; width: calc(var(--w) * .11); height: calc(var(--w) * .11); border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-wa__mic .wx-ico { width: 52%; height: 52%; stroke-width: 2; }

/* Annotation du hero : ce que fait Walexia à chaque étape (en dehors du téléphone) */
.wx-pd__notes { display: grid; width: min(100%, 320px); }
.wx .wx-pd__note {
  display: none; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px;
  background: var(--wx-color-surface); box-shadow: 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md);
}
.wx .wx-pd__note:first-child { display: flex; }
.wx-pd__note-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-pd__note-icon .wx-ico { width: 21px; height: 21px; }
.wx-pd__note-text { display: grid; line-height: 1.3; min-width: 0; }
.wx-pd__note-text b { font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); }
.wx-pd__note-text span { font-size: .875rem; color: var(--wx-color-text-muted); }
@container wx-pd (min-width: 560px) {
  .wx-pd--hero .wx-pd__notes { position: absolute; z-index: 4; left: calc(50% - var(--wx-phone-w) / 2 - 204px); bottom: 14%; width: 224px; }
}

/* Barre de commandes (site, pas WhatsApp) et légende des interlocuteurs */
.wx-pd__bar { display: grid; justify-items: center; gap: 10px; width: min(100%, 460px); }
.wx-pd__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.wx-pd__controls[hidden] { display: none; }
.wx-pd__progress { display: flex; gap: 4px; }
.wx .wx-pd__seg, .wx .wx-pd__seg:focus { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.wx-pd__seg i { position: relative; display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 3px; background: var(--wx-color-border-strong); }
.wx-pd__seg i::after { content: ""; position: absolute; inset: 0; background: var(--wx-color-accent-text); transform-origin: left; transform: scaleX(var(--p, 0)); }
.wx .wx-pd__current { min-width: 9.5em; font-size: .875rem; font-weight: 600; color: var(--wx-color-text); text-align: center; }
.wx-pd__cars { display: inline-flex; align-items: center; gap: 6px; }
.wx-pd:not([data-current="1"]) .wx-pd__cars { display: none; }
.wx-pd__cars-pos { min-width: 3em; text-align: center; font-size: .875rem; font-weight: 600; color: var(--wx-color-text-muted); font-variant-numeric: tabular-nums; }
.wx .wx-pd__round, .wx .wx-pd__round:focus, .wx .wx-pd__toggle, .wx .wx-pd__toggle:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--wx-color-surface); color: var(--wx-color-heading);
  font: 600 .875rem/1 var(--wx-font-text); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong);
}
.wx .wx-pd__toggle, .wx .wx-pd__toggle:focus { padding: 0 16px 0 12px; }
.wx .wx-pd__toggle[hidden] { display: none; }
.wx .wx-pd__round:hover, .wx .wx-pd__toggle:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-heading); }
.wx .wx-pd__round .wx-ico, .wx .wx-pd__toggle .wx-ico { width: 18px; height: 18px; }
.wx-pd__toggle .wx-ico { display: none; }
.wx-pd[data-state="playing"] .wx-ico--pause, .wx-pd[data-state="paused"] .wx-ico--play, .wx-pd[data-state="ended"] .wx-ico--replay { display: block; }
.wx .wx-pd__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .8125rem; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pd__legend li { display: inline-flex; align-items: center; gap: 6px; }
.wx-pd__legend-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.wx-pd__legend-dot .wx-ico { width: 13px; height: 13px; stroke-width: 2.1; }
.wx-pd__legend-dot--contact { background: var(--wx-color-bubble-out); color: var(--wx-color-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 25%, transparent); }
.wx-pd__legend-dot--ai { background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-pd__legend-dot--agent { background: var(--wx-color-heading); color: var(--wx-color-surface); }
.wx-pd__caption { width: 100%; }
.wx-pd--hero .wx-pd__caption { max-width: 460px; }

/* Variante « Étapes » : navigation, téléphone, annotations et fiche */
.wx-pd--steps { display: grid; gap: 24px; grid-template-areas: "nav" "stage" "side" "caption"; --wx-phone-w: min(310px, 82vw); }
.wx-pd--steps .wx-pd__nav { grid-area: nav; }
.wx-pd--steps .wx-pd__stage { grid-area: stage; align-content: start; }
.wx-pd--steps .wx-pd__stage + .wx-pd__bar { grid-area: stage; align-self: end; justify-self: center; }
.wx-pd--steps .wx-pd__side { grid-area: side; }
.wx-pd--steps .wx-pd__caption { grid-area: caption; }
.wx-pd--steps .wx-pd__stage { padding-bottom: 64px; }
.wx .wx-pd__nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.wx .wx-pd__nav-inner, .wx .wx-pd__nav-btn, .wx .wx-pd__nav-btn:focus {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 56px; margin: 0;
  padding: 10px 14px 10px 10px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--wx-color-surface) 70%, transparent);
  color: var(--wx-color-heading); font: 600 .9375rem/1.25 var(--wx-font-text); text-align: left; white-space: normal; text-transform: none; letter-spacing: normal;
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx .wx-pd__nav-btn { cursor: pointer; transition: background-color 200ms var(--wx-ease-soft), box-shadow 200ms var(--wx-ease-soft); }
.wx .wx-pd__nav-btn:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx-pd__nav-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wx-color-surface); color: var(--wx-color-accent-text); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent-text) 35%, transparent); }
.wx .wx-pd__nav-item.is-active .wx-pd__nav-btn { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text), var(--wx-shadow-sm); }
.wx-pd__nav-item.is-active .wx-pd__nav-num { background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: none; }
.wx-pd__nav-item.is-done .wx-pd__nav-num { background: var(--wx-color-bg-tint); box-shadow: none; }

.wx-pd__side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.wx .wx-pd__annot { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--wx-r-lg); background: var(--wx-color-surface); box-shadow: 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx-pd__annots { display: grid; gap: 12px; }
.wx-pd.is-enhanced .wx-pd__annot { display: none; }
.wx-pd.is-enhanced .wx-pd__annot.is-current { display: grid; }
.wx .wx-pd__annot-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wx-fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx-pd__annot-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-pd__annot-icon .wx-ico { width: 17px; height: 17px; }
.wx .wx-pd__annot-title { font-family: var(--wx-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.wx .wx-pd__annot-text { font-size: var(--wx-fs-small); line-height: 1.55; color: var(--wx-color-text-muted); }
.wx .wx-pd__annot-alt { padding: 10px 12px; border-radius: 12px; background: var(--wx-color-bg-tint); font-size: .875rem; line-height: 1.5; color: var(--wx-color-text); }
.wx-pd__lead { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--wx-r-lg); background: var(--wx-color-surface); box-shadow: 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-pd__lead-head { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.wx-pd__lead-head > span:last-child { display: grid; }
.wx-pd__lead-head b { font-size: 1.0625rem; font-weight: 700; color: var(--wx-color-heading); }
.wx-pd__lead-head span span { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx-pd__lead-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--wx-color-bg-tint); color: var(--wx-color-accent); }
.wx-pd__lead-icon .wx-ico { width: 20px; height: 20px; }
.wx .wx-pd__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.wx-pd__fields > div { min-width: 0; }
.wx-pd__fields > div:nth-child(5), .wx-pd__fields > div:nth-child(6) { grid-column: 1 / -1; }
.wx .wx-pd__fields dt { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pd__fields dt .wx-ico { width: 16px; height: 16px; color: var(--wx-color-accent); }
.wx .wx-pd__fields dd { margin: 2px 0 0 22px; min-height: 1.4em; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--wx-color-heading); }
.wx-pd__ph { display: none; width: 70%; max-width: 140px; height: 10px; margin-top: 6px; border-radius: 6px; background: color-mix(in srgb, var(--wx-color-heading) 9%, transparent); }
.wx-pd.is-enhanced [data-fill]:not(.is-filled) .wx-pd__val { display: none; }
.wx-pd.is-enhanced [data-fill]:not(.is-filled) .wx-pd__ph { display: block; }
.wx .wx-pd__privacy { border-radius: 18px; background: var(--wx-color-bg-tint); font-size: .875rem; line-height: 1.5; color: var(--wx-color-text); }
.wx .wx-pd__privacy summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--wx-color-heading); }
.wx-pd__privacy summary::-webkit-details-marker { display: none; }
.wx-pd__privacy summary .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx-pd__privacy ul { margin: 0; padding: 0 16px 0 34px; display: grid; gap: 6px; }
.wx .wx-pd__privacy-note { padding: 10px 16px 14px; font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx-pd--steps .wx-pd__legend { justify-content: flex-start; }

/* La grille porte sur le bloc lui-meme : requetes media (un conteneur ne peut pas s'interroger lui-meme). */
@media (min-width: 760px) {
  .wx-pd--steps { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nav nav" "stage side" "caption caption"; column-gap: 40px; align-items: start; }
  .wx .wx-pd--steps .wx-pd__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wx-pd--steps { grid-template-columns: 240px auto minmax(280px, 340px); grid-template-areas: "nav stage side" "caption caption caption"; justify-content: center; column-gap: 48px; }
  .wx .wx-pd--steps .wx-pd__nav { grid-template-columns: minmax(0, 1fr); align-content: start; margin-top: 52px; }
}

/* États pilotés par le script ; avant son initialisation, seule l'étape 1 est affichée. */
.wx-pd.is-enhanced [data-at]:not(.is-shown),
.wx-pd.is-enhanced .wx-wa__msg--typing:not(.is-shown),
.wx-motion .wx-pd:not(.is-enhanced) [data-at]:not([data-step="1"]) { position: absolute; visibility: hidden; opacity: 0; pointer-events: none; }
.wx-pd.is-animated .wx-wa__msg--typing { display: flex; }
.wx-motion .wx-pd .wx-wa__thread, .wx-pd.is-animated .wx-wa__thread { overflow: hidden; }
.wx-pd.is-animated .wx-wa__thread.is-overflowing { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); }
.wx-pd.is-enhanced .wx-pd__note { display: none; }
.wx-pd.is-enhanced .wx-pd__note.is-current { display: flex; }

/* 23. Démonstration de la plateforme (bloc walexia/platform-demo) --------- */
.wx.wx-pf { display: grid; gap: 16px; min-width: 0; }
.wx .wx-pf__warning { padding: 10px 14px; border-radius: 12px; background: var(--wx-color-danger-bg); color: var(--wx-color-danger); font-weight: 700; }
.wx-pf__frame {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--wx-r-xl); container: wx-pf-frame / inline-size;
  background: var(--wx-color-bg); box-shadow: 0 0 0 1px var(--wx-color-border), var(--wx-shadow-lg);
}
.wx .wx-pf__badge {
  position: absolute; z-index: 6; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--wx-color-surface); color: var(--wx-color-text-muted);
  font-size: .8125rem; font-weight: 700; line-height: 1.2; box-shadow: 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
}
.wx-pf__badge .wx-ico { width: 16px; height: 16px; color: var(--wx-color-accent); }
/* Fenêtre de la « caméra » : le tableau de bord s'y déplace, le bandeau de légende reste dessous */
.wx-pf__viewport { position: relative; flex: none; overflow: hidden; }

/* Bulle venue de l'iPhone : elle rejoint la ligne de Sarah au chapitre 1 */
.wx-pf__bubble {
  position: absolute; z-index: 5; left: 3%; top: 30%; display: none; width: 240px; padding: 10px 14px 10px 12px;
  border-radius: 16px 16px 16px 4px; background: var(--wx-color-bubble-out); color: var(--wx-color-heading);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--wx-color-heading) 12%, transparent), var(--wx-shadow-md);
  transform-origin: 0 0;
}
.wx-pf__bubble.is-on { display: grid; gap: 2px; }
.wx-pf__bubble-head { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--wx-color-accent-text); }
.wx-pf__bubble-head .wx-ico { width: 15px; height: 15px; }
.wx-pf__bubble-text { font-size: .875rem; font-weight: 600; line-height: 1.35; }

/* Tableau de bord : tout est en em, l'échelle suit la largeur du cadre */
.wx-pf__stage {
  position: relative; display: grid; grid-template-columns: 15% minmax(0, 1fr); transform-origin: 0 0;
  font-size: clamp(9px, .94cqi, 12px); line-height: 1.35; color: var(--wx-color-text);
}
.wx-pf__side { display: flex; flex-direction: column; gap: .35em; padding: 1.4em 1em; background: var(--wx-color-surface); border-right: 1px solid var(--wx-color-border); }
.wx-pf__logo { display: block; width: 100%; max-width: 9.5em; height: auto; margin: 0 0 1.4em .3em; }
.wx-pf__nav { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .8em; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pf__nav .wx-ico, .wx-pf__account .wx-ico { width: 1.3em; height: 1.3em; }
.wx-pf__nav.is-current { background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); font-weight: 700; }
.wx-pf__account { display: flex; align-items: center; gap: .5em; margin-top: auto; padding: .7em; border-radius: .8em; background: var(--wx-color-bg); font-size: .85em; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pf__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .85em; align-content: start; padding: 1em 1.2em 1.2em; min-width: 0; }
.wx-pf__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; min-height: 2.4em; padding-right: 264px; }
.wx-pf__logo--compact { display: none; }
.wx .wx-pf__heading { font-size: 1.4em; font-weight: 700; color: var(--wx-color-heading); letter-spacing: -.02em; }
.wx .wx-pf__period { display: inline-flex; align-items: center; gap: .45em; padding: .45em .8em; border-radius: 999px; background: var(--wx-color-surface); font-size: .85em; font-weight: 600; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-pf__period .wx-ico, .wx-pf__search .wx-ico { width: 1.2em; height: 1.2em; color: var(--wx-color-accent); }
.wx-pf__search { display: inline-flex; align-items: center; gap: .45em; margin-left: auto; padding: .45em .9em; border-radius: 999px; background: var(--wx-color-surface); font-size: .85em; color: var(--wx-color-text-muted); box-shadow: inset 0 0 0 1px var(--wx-color-border); }

.wx-pf__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85em; }
.wx-pf__kpi { display: grid; gap: .05em; padding: .7em 1em; border-radius: 1.1em; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx-pf__kpi--accent { background: var(--wx-color-bubble-out); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 22%, transparent); }
.wx .wx-pf__kpi-label { display: flex; align-items: center; gap: .45em; font-size: .9em; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pf__kpi--accent .wx-pf__kpi-label { color: var(--wx-color-accent-text); }
.wx-pf__kpi-label .wx-ico { width: 1.2em; height: 1.2em; color: var(--wx-color-accent); }
/* Une teinte par indicateur (le vert reste sur « Nouveaux aujourd'hui ») */
[data-zone="k-leads"] .wx-pf__kpi-label .wx-ico { color: var(--wx-ch-site-ink); }
[data-zone="k-todo"] .wx-pf__kpi-label .wx-ico { color: var(--wx-ch-email-ink); }
[data-zone="k-won"] .wx-pf__kpi-label .wx-ico { color: var(--wx-ch-rcs-ink); }
.wx .wx-pf__kpi-value { font-size: 2.1em; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--wx-color-heading); font-variant-numeric: tabular-nums; }
.wx-pf__kpi-value span { font-size: .6em; color: var(--wx-color-text-muted); }
.wx .wx-pf__kpi-note { font-size: .8em; color: var(--wx-color-text-muted); }

.wx-pf__card { min-width: 0; padding: .85em 1em; border-radius: 1.2em; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); transition: opacity 500ms var(--wx-ease-soft); }
.wx .wx-pf__card-title { display: flex; align-items: center; gap: .5em; margin-bottom: .55em; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__card-title .wx-ico { width: 1.25em; height: 1.25em; color: var(--wx-color-accent); }
.wx-pf__card-title span { margin-left: auto; font-size: .8em; font-weight: 600; color: var(--wx-color-text-muted); }
.wx-pf__histo { grid-column: span 7; }
.wx-pf__sources { grid-column: span 5; }
.wx-pf__table { grid-column: span 8; }
.wx-pf__tracking { grid-column: span 4; display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); align-items: center; }
.wx-pf__camps { grid-column: span 7; }
.wx-pf__crm { grid-column: span 5; }

/* Histogramme */
.wx .wx-pf__bars { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: .8em; height: 12em; border-bottom: 1px solid var(--wx-color-border); }
.wx-pf__bars li { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25em; height: 100%; position: relative; padding-bottom: 1.5em; }
.wx-pf__bar-value { font-size: .85em; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__bar { display: block; width: 72%; height: calc(var(--h) * .08em); border-radius: .45em .45em .15em .15em; background: color-mix(in srgb, var(--wx-color-accent) 55%, var(--wx-color-surface)); }
.wx-pf__bars li.is-today .wx-pf__bar { background: var(--wx-color-accent-text); }
.wx-pf__bars li.is-today .wx-pf__bar-value, .wx-pf__bars li.is-today .wx-pf__bar-label { color: var(--wx-color-accent-text); font-weight: 700; }
.wx-pf__bar-label { position: absolute; bottom: 0; font-size: .78em; color: var(--wx-color-text-muted); white-space: nowrap; }

/* Provenance */
.wx .wx-pf__src { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; }
.wx-pf__src li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 4.8em; align-items: center; gap: .7em; padding: .22em .5em; border-radius: .7em; }
.wx-pf__src li.is-linked { background: color-mix(in srgb, var(--ch, var(--wx-color-accent)) 9%, var(--wx-color-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch, var(--wx-color-accent)) 22%, transparent); }
.wx-pf__src-name { display: flex; align-items: center; gap: .5em; min-width: 0; font-size: .9em; font-weight: 600; color: var(--wx-color-heading); }
.wx-pf__src-ico { display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: .5em; background: var(--ch-fill, var(--wx-color-bg-tint)); color: var(--ch-glyph, var(--wx-color-surface)); }
.wx-pf__src-ico .wx-ico { width: 1.1em; height: 1.1em; stroke-width: 2; }
.wx-pf__src li:not([data-src]) .wx-pf__src-ico { color: var(--wx-color-accent-text); }
.wx-pf__src-bar { position: relative; height: .6em; border-radius: 999px; background: var(--wx-color-surface-muted); overflow: hidden; }
.wx-pf__src-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); border-radius: inherit; background: var(--ch-fill, var(--wx-color-accent)); }
.wx-pf__src-value { font-weight: 700; color: var(--wx-color-heading); text-align: right; font-variant-numeric: tabular-nums; }
.wx-pf__src-value small { font-size: .8em; font-weight: 600; color: var(--wx-color-text-muted); }
.wx .wx-pf__link-note { display: inline-flex; align-items: center; gap: .45em; margin-top: .45em; padding: .35em .75em; border-radius: 999px; background: color-mix(in srgb, var(--ch, var(--wx-color-accent)) 10%, var(--wx-color-surface)); font-size: .8em; font-weight: 700; color: var(--ch-ink, var(--wx-color-accent-text)); }
.wx-pf__link-note .wx-ico { width: 1.2em; height: 1.2em; }

/* Tableau des leads */
.wx-pf__table table { width: 100%; border-collapse: collapse; font-size: .88em; }
.wx-pf__table th { padding: .3em .5em; text-align: left; font-size: .82em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wx-color-text-muted); border-bottom: 1px solid var(--wx-color-border); }
.wx-pf__table td { padding: .36em .5em; border-bottom: 1px solid var(--wx-color-border); vertical-align: middle; color: var(--wx-color-text); }
.wx-pf__table tr:last-child td { border-bottom: 0; }
.wx-pf__table td b { display: block; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__table td small { display: block; font-size: .88em; color: var(--wx-color-text-muted); }
.wx-pf__table tr.is-demo-contact td { background: color-mix(in srgb, var(--wx-color-bubble-out) 55%, transparent); }
.wx-pf__table tr.is-demo-contact td:first-child { box-shadow: inset 3px 0 0 var(--wx-color-accent); }
.wx-pf__chip { display: inline-block; padding: .2em .6em; border-radius: 999px; font-size: .86em; font-weight: 700; white-space: nowrap; }
.wx-pf__srcchip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .6em .2em .45em; border-radius: 999px; background: color-mix(in srgb, var(--ch, var(--wx-color-heading)) 10%, var(--wx-color-surface)); font-size: .86em; font-weight: 700; color: var(--ch-ink, var(--wx-color-text)); white-space: nowrap; }
.wx-pf__srcchip .wx-ico { width: 1.1em; height: 1.1em; flex: none; stroke-width: 2; }
.wx-pf__chip--hot, .wx-pf__chip--done { background: color-mix(in srgb, var(--wx-color-accent) 24%, var(--wx-color-surface)); color: var(--wx-color-accent-text); }
.wx-pf__chip--warm { background: var(--wx-color-bubble-out); color: var(--wx-color-accent-text); }
.wx-pf__chip--mid, .wx-pf__chip--open { background: var(--wx-color-surface-muted); color: var(--wx-color-text); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-pf__chip--cold { background: var(--wx-color-surface-muted); color: var(--wx-color-text-muted); }
.wx-pf__chip--todo { background: var(--wx-color-warn-bg); color: var(--wx-color-warn-text); }
.wx-pf__chip--doing { background: color-mix(in srgb, var(--wx-color-tick) 22%, var(--wx-color-surface)); color: var(--wx-color-heading); }
.wx-pf__chip--won { background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-pf__chip--lost { background: var(--wx-color-danger-bg); color: var(--wx-color-danger); }

/* Qualification et suivi */
.wx-pf__track + .wx-pf__track { margin-top: .6em; }
.wx .wx-pf__track-label { margin-bottom: .35em; font-size: .82em; font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-pf__stack { display: flex; gap: 2px; height: .7em; overflow: hidden; border-radius: 999px; }
.wx-pf__seg { display: block; min-width: 2px; }
.wx-pf__seg--hot, .wx-pf__dot--hot { background: var(--wx-color-accent-text); }
.wx-pf__seg--warm, .wx-pf__dot--warm, .wx-pf__seg--done, .wx-pf__dot--done { background: var(--wx-color-accent); }
.wx-pf__seg--mid, .wx-pf__dot--mid { background: color-mix(in srgb, var(--wx-color-accent) 35%, var(--wx-color-surface)); }
.wx-pf__seg--cold, .wx-pf__dot--cold, .wx-pf__seg--open, .wx-pf__dot--open { background: var(--wx-color-border-strong); }
.wx-pf__seg--todo, .wx-pf__dot--todo { background: color-mix(in srgb, var(--wx-color-warn-text) 55%, var(--wx-color-warn-bg)); }
.wx-pf__seg--doing, .wx-pf__dot--doing { background: var(--wx-color-tick); }
.wx-pf__seg--won, .wx-pf__dot--won { background: var(--wx-color-accent-text); }
.wx-pf__seg--lost, .wx-pf__dot--lost { background: var(--wx-color-danger); }
.wx .wx-pf__legend { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em .9em; font-size: .82em; color: var(--wx-color-text); }
.wx-pf__legend li { display: inline-flex; align-items: center; gap: .35em; }
.wx-pf__legend b { color: var(--wx-color-heading); }
.wx-pf__dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; }

/* Campagnes */
.wx-pf__camp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.wx-pf__camp { display: grid; gap: .2em; align-content: start; padding: .65em .8em; border-radius: 1em; background: var(--wx-color-bg); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-pf__camp-type { display: inline-flex; align-items: center; gap: .35em; justify-self: start; padding: .2em .6em; border-radius: 999px; background: color-mix(in srgb, var(--wx-ch-sms) 12%, var(--wx-color-surface)); font-size: .78em; font-weight: 700; color: var(--wx-ch-sms-ink); }
.wx-pf__camp--ia .wx-pf__camp-type { background: color-mix(in srgb, var(--wx-ch-rcs) 12%, var(--wx-color-surface)); color: var(--wx-ch-rcs-ink); }
.wx-pf__camp--ia { background: linear-gradient(160deg, color-mix(in srgb, var(--wx-ch-rcs) 7%, var(--wx-color-surface)), var(--wx-color-bg)); }
.wx-pf__camp-type .wx-ico { width: 1.15em; height: 1.15em; }
.wx .wx-pf__camp-name { font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-pf__camp-state { font-size: .82em; font-weight: 600; color: var(--wx-color-accent-text); }
.wx .wx-pf__camp-aud { display: flex; align-items: center; gap: .4em; font-size: .8em; color: var(--wx-color-text-muted); }
.wx-pf__camp-aud .wx-ico { width: 1.15em; height: 1.15em; flex: none; }
.wx .wx-pf__camp-metrics { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .2em; }
.wx-pf__camp-metrics span { padding: .2em .55em; border-radius: .5em; background: var(--wx-color-surface); font-size: .8em; font-weight: 700; color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-pf__create { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin-top: .6em; padding-top: .55em; border-top: 1px dashed var(--wx-color-border-strong); }
.wx-pf__create-label { margin-right: .3em; font-size: .82em; font-weight: 700; color: var(--wx-color-text-muted); }
.wx-pf__create-step { display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em .25em .3em; border-radius: 999px; background: var(--wx-color-surface); font-size: .85em; font-weight: 700; color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx-pf__create-step b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); font-size: .85em; }
.wx-pf__create i { display: inline-grid; color: var(--wx-color-text-muted); }
.wx-pf__create i .wx-ico { width: 1em; height: 1em; }

/* Vers le CRM */
.wx-pf__crm-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6em; }
.wx-pf__lead, .wx-pf__dest { display: grid; gap: .25em; padding: .65em .8em; border-radius: 1em; }
.wx-pf__lead { background: var(--wx-color-bubble-out); }
.wx-pf__dest { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1.5px var(--wx-color-border-strong); }
.wx .wx-pf__lead-name, .wx .wx-pf__dest-name { display: flex; align-items: center; gap: .4em; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__lead-name .wx-ico, .wx-pf__dest-name .wx-ico { width: 1.25em; height: 1.25em; color: var(--wx-color-accent); }
.wx .wx-pf__lead ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15em; font-size: .82em; color: var(--wx-color-text); }
.wx-pf__arrow { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-pf__arrow .wx-ico { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.wx .wx-pf__tools { display: flex; flex-wrap: wrap; gap: .25em; }
.wx-pf__tools span { padding: .15em .5em; border-radius: .5em; background: var(--wx-color-bg); font-size: .78em; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__tools span.has-logo { display: inline-grid; place-items: center; height: 2em; padding: .25em .5em; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-pf__tools img { display: block; width: auto; max-width: 5.5em; height: 1.25em; object-fit: contain; }
.wx .wx-pf__mode { font-size: .78em; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-pf__status { display: inline-flex; align-items: center; gap: .35em; justify-self: start; padding: .2em .6em; border-radius: 999px; background: var(--wx-color-accent); color: var(--wx-color-on-action); font-size: .8em; font-weight: 700; }
.wx-pf__status .wx-ico { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.wx-pf.is-enhanced:not([data-current="7"]) .wx-pf__status { visibility: hidden; opacity: 0; }

/* Chapitres, légende et commandes (sous le cadre) */
.wx-pf__player { display: grid; gap: 12px; }
.wx .wx-pf__chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wx-pf__chapter-inner { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wx-color-heading); }
.wx-pf__chapter-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wx-color-surface); color: var(--wx-color-accent-text); font-size: .8125rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent-text) 35%, transparent); }
.wx .wx-pf__chapter-text { margin: 2px 0 0 34px; font-size: var(--wx-fs-small); color: var(--wx-color-text-muted); }
.wx-pf.is-enhanced .wx-pf__chapters { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wx-pf.is-enhanced .wx-pf__chapter-text { display: none; }
.wx .wx-pf__chapter-btn, .wx .wx-pf__chapter-btn:focus {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 48px; margin: 0;
  padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; white-space: normal; text-transform: none; letter-spacing: normal;
  background: color-mix(in srgb, var(--wx-color-surface) 70%, transparent); color: var(--wx-color-heading); font: 600 .8125rem/1.25 var(--wx-font-text);
  box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx .wx-pf__chapter-btn:hover { background: var(--wx-color-surface); color: var(--wx-color-heading); }
.wx-pf__chapter.is-active .wx-pf__chapter-btn { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text), var(--wx-shadow-sm); }
.wx-pf__chapter.is-active .wx-pf__chapter-num { background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: none; }
.wx-pf__chapter.is-done .wx-pf__chapter-num { background: var(--wx-color-bg-tint); box-shadow: none; }
.wx-pf__foot {
  position: relative; z-index: 6; flex: 1 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px 10px 20px;
  background: var(--wx-color-surface); border-top: 1px solid var(--wx-color-border);
}
.wx .wx-pf__caption { flex: 1 1 320px; min-height: 3em; margin: 0; font-size: var(--wx-fs-small); line-height: 1.5; color: var(--wx-color-text); }
.wx-pf__caption b { color: var(--wx-color-heading); }
.wx-pf__controls { display: flex; align-items: center; gap: 8px; }
.wx-pf__controls[hidden] { display: none; }
.wx-pf[data-state="playing"] .wx-ico--pause, .wx-pf[data-state="paused"] .wx-ico--play, .wx-pf[data-state="ended"] .wx-ico--replay { display: block; }
.wx .wx-pf__defs { border-radius: 18px; background: var(--wx-color-surface); font-size: .875rem; line-height: 1.5; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-pf__defs summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--wx-color-heading); }
.wx-pf__defs summary::-webkit-details-marker { display: none; }
.wx-pf__defs summary .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx-pf__defs ul { margin: 0; padding: 0 16px 14px 34px; display: grid; gap: 4px; color: var(--wx-color-text); }

/* Zoom : zones ciblées soulignées, le reste s'efface légèrement */
.wx-pf [data-zone].is-focus { box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 0 0 .22em color-mix(in srgb, var(--wx-color-accent) 55%, transparent), var(--wx-shadow-md); }
.wx-pf.is-zoomed .wx-pf__main > [data-zone]:not(.is-focus):not(:has(.is-focus)), .wx-pf.is-zoomed .wx-pf__kpi:not(.is-focus), .wx-pf.is-zoomed .wx-pf__side { opacity: .4; }
.wx-pf__table tr.is-arrived td { background: color-mix(in srgb, var(--wx-color-accent) 30%, var(--wx-color-surface)); }

/* Cadre moyen : la recherche décorative laisse la place à la mention « données fictives » */
@container wx-pf-frame (max-width: 1099.98px) {
  .wx-pf__search { display: none; }
  .wx .wx-pf__badge { top: 8px; right: 8px; padding: 4px 10px 4px 8px; font-size: .6875rem; }
  .wx-pf__badge .wx-ico { width: 14px; height: 14px; }
}
/* Mobile : zones utiles l'une après l'autre, en pleine largeur (pas de tableau de bord réduit) */
@container wx-pf-frame (max-width: 699.98px) {
  .wx-pf__stage { display: block; font-size: 14px; transform: none !important; }
  .wx-pf__side, .wx-pf__search { display: none; }
  .wx-pf__main { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .wx-pf__main > * { grid-column: 1 / -1 !important; }
  .wx-pf__viewport { flex: 1 0 auto; }
  .wx-pf__foot { flex: none; padding: 12px 14px; }
  .wx-pf__top { flex-wrap: wrap; gap: 8px 10px; min-height: 0; padding-right: 0; }
  .wx .wx-pf__logo--compact { display: block; width: auto; height: 20px; max-width: none; margin: 0; }
  .wx .wx-pf__heading { padding-left: 10px; border-left: 1px solid var(--wx-color-border-strong); font-size: 1rem; line-height: 1.25; }
  .wx-pf__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wx .wx-pf__kpi-value { font-size: 1.9em; }
  .wx-pf__camp-list, .wx-pf__crm-flow { grid-template-columns: minmax(0, 1fr); }
  .wx-pf__src li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .wx-pf__src-bar { grid-column: 1 / -1; grid-row: 2; }
  .wx .wx-pf__bars { gap: .4em; }
  .wx-pf__bars li { padding-bottom: 2.5em; }
  .wx-pf__bar-label { width: 100%; white-space: normal; text-align: center; line-height: 1.15; }
  .wx-pf__arrow { justify-self: center; transform: rotate(90deg); }
  .wx-pf__table table, .wx-pf__table tbody { display: block; }
  .wx-pf__table thead { display: none; }
  .wx-pf__table tr { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 4px 6px; padding: 8px 6px; border-bottom: 1px solid var(--wx-color-border); }
  .wx-pf__table td { padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
  .wx-pf__table td:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .wx-pf__table td:nth-child(2) b, .wx-pf__table td:nth-child(2) small { display: inline; }
  .wx-pf__table td:nth-child(2) small::before { content: " · "; }
  .wx-pf__table td:nth-child(1), .wx-pf__table td:nth-child(3) { grid-column: span 2; font-size: .85em; color: var(--wx-color-text-muted); }
  .wx-pf__table tr.is-demo-contact { border-radius: 12px; background: color-mix(in srgb, var(--wx-color-bubble-out) 55%, transparent); box-shadow: inset 3px 0 0 var(--wx-color-accent); }
  .wx-pf__bubble { position: relative; left: auto; top: auto; width: auto; margin: 12px 14px 0; }
  .wx .wx-pf__badge { position: relative; top: auto; right: auto; align-self: flex-start; margin: 12px 14px 0; }
  .wx-pf.is-enhanced .wx-pf__main > [data-zone]:not(.is-panel) { display: none; }
  .wx-pf.is-zoomed .wx-pf__main > [data-zone], .wx-pf.is-zoomed .wx-pf__kpi { opacity: 1; }
}
@media (max-width: 899px) {
  .wx-pf.is-enhanced .wx-pf__chapters { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .wx-pf.is-enhanced .wx-pf__chapter-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wx .wx-pf__chapter-btn, .wx .wx-pf__chapter-btn:focus { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; }
}

/* 24. Pages déclinées (Contact, Automobile, Walexia IA, squelettes) ------- */
/* Hero de page intérieure : même grille que l'accueil, titre un cran plus petit */
.wx .wx-hero--page .wx-hero__copy .wx-display { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.5rem); }
@media (min-width: 1200px) { .wx .wx-hero--page .wx-hero__copy .wx-display { font-size: clamp(2.6rem, .9rem + 2.4vw, 3.6rem); } }
.wx .wx-hero__visual { width: 100%; max-width: 620px; justify-self: center; }
.wx .wx-hero__visual.wx-usage__visual { min-height: 0; }
.wx .wx-hero--page .wx-checklist { margin-top: 4px; }
/* Contact : le formulaire est dans le hero */
@media (min-width: 1024px) { .wx .wx-hero--contact .wx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; } }
.wx .wx-hero--contact .wx-form-card { box-shadow: var(--wx-shadow-lg), inset 0 0 0 1px var(--wx-color-border); }
/* Playbook : formulaire réservé posé sur un halo des verts de WhatsApp, chapitres numérotés, extrait de conversation */
.wx .wx-hero--resource .wx-form-card { overflow: clip; box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--wx-color-accent-text) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 26%, transparent); }
.wx .wx-hero--resource .wx-form-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--wx-g-24), var(--wx-color-accent) 50%, var(--wx-g-24));
}
/* Couverture du playbook : aperçu de la ressource à côté du sommaire (feuilles en éventail, dégradé des verts WhatsApp) */
.wx .wx-playbook-head { align-items: center; }
.wx .wx-cover { position: relative; display: block; width: min(100%, 260px); aspect-ratio: 210 / 297; margin: 8px auto 12px; }
.wx-cover__page { position: absolute; inset: 0; border-radius: 14px; background: #FFFFFF; box-shadow: var(--wx-shadow-md), inset 0 0 0 1px var(--wx-color-border); }
.wx-cover__page--back { transform: rotate(8deg) translate(18px, 8px); }
.wx-cover__page--mid { transform: rotate(4deg) translate(9px, 4px); }
.wx-cover__front {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; overflow: hidden; color: var(--wx-color-heading);
  background:
    radial-gradient(80% 50% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--wx-g-32), var(--wx-g-10) 60%, #FFFFFF);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--wx-color-accent-text) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent);
}
.wx-cover__brand { font: 800 .75rem/1 var(--wx-font-text); letter-spacing: .16em; }
.wx-cover__kicker { margin-top: auto; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx-cover__title { font: 800 1.75rem/1.05 var(--wx-font-display); letter-spacing: -.02em; }
.wx-cover__meta { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx-cover__chat { display: grid; gap: 6px; margin-top: 8px; }
.wx-cover__chat i { display: block; height: 14px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 1px color-mix(in srgb, var(--wx-color-heading) 10%, transparent); }
.wx-cover__chat i:nth-child(1) { width: 62%; }
.wx-cover__chat i:nth-child(2) { width: 74%; justify-self: end; background: #D9FDD3; }
.wx-cover__chat i:nth-child(3) { width: 48%; }
.wx .wx-chapters__num { font: 800 .875rem/1 var(--wx-font-text); letter-spacing: .08em; color: var(--wx-color-accent-text); }
.wx .wx-excerpt { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: var(--wx-r-lg); background: #EFEAE2; box-shadow: var(--wx-shadow-md); }
.wx .wx-excerpt__label { justify-self: center; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, #FFFFFF 85%, transparent); font-size: .8125rem; font-weight: 650; color: var(--wx-color-text-muted); }
.wx .wx-excerpt__msg { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: .9375rem; line-height: 1.45; color: #111B21; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wx .wx-excerpt__msg--in { justify-self: start; background: #FFFFFF; border-top-left-radius: 4px; }
.wx .wx-excerpt__msg--out { justify-self: end; background: #D9FDD3; border-top-right-radius: 4px; }
.wx .wx-excerpt__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.wx .wx-excerpt__chips span { padding: 8px 14px; border-radius: 999px; background: #FFFFFF; color: var(--wx-color-accent-text); font-size: .875rem; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 40%, transparent); }

/* Rangées texte / visuel alternées */
.wx .wx-rows { display: grid; gap: clamp(56px, 8vw, 104px); }
.wx .wx-row { display: grid; gap: clamp(24px, 4vw, 40px); align-items: center; }
@media (min-width: 900px) {
  .wx .wx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); }
  .wx .wx-row--reverse > .wx-row__visual { order: -1; }
}
.wx .wx-row__copy { display: grid; gap: 18px; justify-items: start; align-content: start; max-width: 580px; }
.wx .wx-row__title { font-family: var(--wx-font-display); font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.375rem); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; color: var(--wx-color-heading); }
.wx .wx-row__copy > p:is(:not([class]), [class="wp-block-paragraph"]) { color: var(--wx-color-text-muted); line-height: 1.6; }
.wx .wx-row__visual { width: 100%; }
.wx .wx-row__visual.wx-usage__visual { min-height: 300px; }
.wx .wx-row__visual.wx-vis-campaign { padding: clamp(18px, 3vw, 28px); border-radius: var(--wx-r-lg); }

/* Grille de cartes (liens utiles, cas d'usage) */
.wx .wx-cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .wx .wx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .wx .wx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wx .wx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wx .wx-cards > .wx-tile { display: flex; flex-direction: column; gap: 12px; }
.wx .wx-cards > .wx-tile > .wx-link-arrow { margin-top: auto; padding-top: 6px; }
.wx .wx-cards .wx-tile__title { font-size: var(--wx-fs-card); }

/* Quatre onglets ou plus sur petit écran : grille 2 × 2 plutôt que des libellés tronqués */
@media (max-width: 560px) {
  .wx .wx-tabs__list:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; border-radius: 26px; }
  .wx .wx-tabs__list:has(> :nth-child(4)) .wx-tabs__tab { justify-content: center; min-width: 0; padding: 0 10px; white-space: normal; text-align: center; line-height: 1.15; }
}

/* Colonne de lecture (mentions, CGV, confidentialité) */
.wx .wx-prose { max-width: 72ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.7; color: var(--wx-color-text); }
.wx .wx-prose > * + * { margin-top: 1em; }
.wx .wx-prose > h2 { margin-top: 2em; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.wx .wx-prose > h3 { margin-top: 1.6em; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.wx .wx-prose :is(ul, ol) { padding-left: 1.4em; }
.wx .wx-prose li + li { margin-top: .4em; }
.wx .wx-prose__meta { color: var(--wx-color-text-muted); font-size: var(--wx-fs-small); }

/* 25. Points de contact → WhatsApp → plateforme (bloc walexia/omnichannel) */
.wx.wx-oc { --wx-phone-w: min(272px, 74vw); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; container: wx-oc / inline-size; }
.wx-oc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
/* Secteurs : une seule ligne ; si elle ne tient pas, elle défile (le secteur en cours est recentré par le script). */
.wx .wx-oc__sectors {
  list-style: none; display: flex; flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; min-width: 0; max-width: 100%; padding: 5px;
  overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
}
.wx-oc__sectors::-webkit-scrollbar { display: none; }
.wx .wx-oc__sector { flex: none; }
.wx .wx-oc__sector-inner, .wx .wx-oc__sector-btn, .wx .wx-oc__sector-btn:focus {
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--wx-color-text-muted); font: 650 .875rem/1 var(--wx-font-text); letter-spacing: normal; text-transform: none; white-space: nowrap;
}
.wx .wx-oc__sector-btn { cursor: pointer; transition: background-color 220ms var(--wx-ease-soft), color 220ms var(--wx-ease-soft); }
.wx .wx-oc__sector-btn:hover { background: var(--wx-color-bg); color: var(--wx-color-heading); }
.wx .wx-oc__sector.is-active .wx-oc__sector-btn { background: var(--wx-color-heading); color: var(--wx-color-surface); }
.wx-oc__sector .wx-ico { width: 17px; height: 17px; }
.wx-oc[data-state="playing"] .wx-oc__toggle .wx-ico--pause, .wx-oc[data-state="paused"] .wx-oc__toggle .wx-ico--play { display: block; }

.wx-oc__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 10px; }
.wx-oc__beams { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wx-oc__beam { fill: none; stroke: color-mix(in srgb, var(--wx-color-accent) 34%, transparent); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; transition: stroke 300ms var(--wx-ease-soft); }
.wx-oc__beam.is-hot { stroke: var(--wx-color-accent); stroke-width: 2.4; stroke-dasharray: none; }
.wx-oc__beam[data-src] { stroke: var(--beam); stroke-opacity: .55; transition: stroke-opacity 300ms var(--wx-ease-soft); }
.wx-oc__beam[data-src].is-hot { stroke: var(--beam); stroke-opacity: 1; }
.wx-oc__grad stop:first-child { stop-color: var(--ch); }
.wx-oc__grad stop:last-child { stop-color: var(--wx-color-accent); }
.wx-oc__dot { fill: var(--wx-color-accent); stroke: var(--wx-color-surface); stroke-width: 2; }
.wx-oc__dot[data-src] { fill: var(--ch); }

/* Couleur de chaque canal, posée sur tout élément qui porte data-src (carte, trait, fiche ; provenance du tableau de bord) */
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="instagram"] { --ch: var(--wx-ch-instagram); --ch-ink: var(--wx-ch-instagram-ink); --ch-fill: var(--wx-ch-instagram-fill); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="facebook"] { --ch: var(--wx-ch-facebook); --ch-ink: var(--wx-ch-facebook-ink); --ch-fill: var(--wx-ch-facebook); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="meta"] { --ch: var(--wx-ch-facebook); --ch-ink: var(--wx-ch-facebook-ink); --ch-fill: var(--wx-ch-meta-fill); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="site"] { --ch: var(--wx-ch-site); --ch-ink: var(--wx-ch-site-ink); --ch-fill: var(--wx-ch-site); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="google"] { --ch: var(--wx-ch-google); --ch-ink: var(--wx-ch-google-ink); --ch-fill: var(--wx-ch-google); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="email"] { --ch: var(--wx-ch-email); --ch-ink: var(--wx-ch-email-ink); --ch-fill: var(--wx-ch-email); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="sms"] { --ch: var(--wx-ch-sms); --ch-ink: var(--wx-ch-sms-ink); --ch-fill: var(--wx-ch-sms); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="rcs"] { --ch: var(--wx-ch-rcs); --ch-ink: var(--wx-ch-rcs-ink); --ch-fill: var(--wx-ch-rcs); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="qr"] { --ch: var(--wx-ch-qr); --ch-ink: var(--wx-ch-qr-ink); --ch-fill: var(--wx-ch-qr); --ch-glyph: var(--wx-color-heading); }
:is(.wx-oc, .wx-pf, .wx-flow) [data-src="display"] { --ch: var(--wx-ch-display); --ch-ink: var(--wx-ch-display-ink); --ch-fill: var(--wx-ch-display); }
.wx-oc__sources, .wx-oc__phone, .wx-oc__platform { position: relative; z-index: 1; min-width: 0; }
.wx-oc__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx-oc__arrow .wx-ico { width: 18px; height: 18px; stroke-width: 2.4; }

/* Supports d'origine : aperçus réalistes, sans logo de plateforme */
.wx .wx-oc__sources {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(230px, 72%); gap: 10px; width: 100%;
  padding: 4px 4px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.wx-oc__sources::-webkit-scrollbar { display: none; }
.wx-oc__src {
  display: grid; align-content: start; gap: 5px; padding: 8px; border-radius: 16px; scroll-snap-align: center;
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: transform 400ms var(--wx-ease), box-shadow 400ms var(--wx-ease), opacity 400ms var(--wx-ease-soft);
}
.wx .wx-oc__src-label { display: flex; align-items: center; gap: 7px; padding-left: 1px; font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx-oc__src-ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--ch-fill, var(--ch)); color: var(--ch-glyph, var(--wx-color-surface)); box-shadow: 0 2px 6px color-mix(in srgb, var(--ch) 30%, transparent); }
.wx-oc__src-ico .wx-ico { width: 14px; height: 14px; stroke-width: 2; }
.wx-oc__src.is-active { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ch-ink), 0 0 0 4px color-mix(in srgb, var(--ch) 20%, transparent), var(--wx-shadow-md); }
.wx .wx-oc__src.is-active .wx-oc__src-label { color: var(--ch-ink); }
.wx-oc[data-state="playing"] .wx-oc__src:not(.is-active) { opacity: .72; }
.wx-oc__src-ui:not(.is-current) { display: none; }

.wx-oc-ui { position: relative; display: grid; gap: 5px; overflow: hidden; padding: 7px; border-radius: 12px; background: var(--wx-color-bg); font-size: 11px; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-oc-ui p { margin: 0; }
.wx-oc-ui--post { background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-oc-ui__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wx-oc-ui__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.wx-oc-ui__head span { margin-left: auto; font-size: 9.5px; color: var(--wx-color-text-muted); white-space: nowrap; }
.wx-oc-ui__avatar { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ch-ink, var(--wx-color-heading)); color: var(--wx-color-surface); font: normal 800 8px/1 var(--wx-font-text); }
/* Anneau en dégradé des comptes Instagram */
.wx-oc__src[data-src="instagram"] .wx-oc-ui__avatar { width: 22px; height: 22px; border: 2px solid transparent; background: linear-gradient(var(--wx-color-heading), var(--wx-color-heading)) padding-box, var(--ch-fill) border-box; box-shadow: inset 0 0 0 1.5px var(--wx-color-surface); font-size: 7px; }
.wx-oc-ui__media { display: grid; place-items: center; aspect-ratio: 2.7 / 1; border-radius: 8px; background: linear-gradient(160deg, var(--wx-color-surface), color-mix(in srgb, var(--ch, var(--wx-color-car-stage)) 16%, var(--wx-color-surface))); }
.wx-oc-ui__media .wx-car { width: 82%; }
/* Photos de démonstration (assets/media/demo) */
.wx-oc-ui__media.has-photo { overflow: hidden; background: var(--wx-color-surface-muted); }
.wx .wx-oc-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.wx .wx-oc-ui__shot { display: block; width: 100%; height: 46px; border-radius: 7px; object-fit: cover; background: var(--wx-color-surface-muted); }
.wx .wx-oc-ui__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wx-oc-ui:has(> .wx-oc-ui__bg)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--wx-color-surface) 94%, transparent) 0 55%, color-mix(in srgb, var(--wx-color-surface) 50%, transparent)); }
.wx-oc-ui:has(> .wx-oc-ui__bg) > :not(.wx-oc-ui__bg) { position: relative; z-index: 2; }
.wx .wx-oc-ui__line { font-size: 10.5px; color: var(--wx-color-text); }
.wx-oc__cta {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--ch, var(--wx-color-accent)) 12%, var(--wx-color-surface)); color: var(--ch-ink, var(--wx-color-accent-text)); font-size: 10.5px; font-weight: 750; line-height: 1.2;
}
.wx-oc__cta .wx-ico { width: 13px; height: 13px; flex: none; stroke-width: 2; color: var(--wx-color-accent); }
/* Bouton de chaque canal à la manière de la plateforme : suggestion RCS en pastille, bannière display en bouton plein */
.wx-oc__src[data-src="rcs"] .wx-oc__cta { justify-content: center; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch) 45%, transparent); }
.wx-oc__src[data-src="display"] .wx-oc__cta { justify-self: start; background: var(--ch-ink); color: var(--wx-color-surface); }
.wx-oc__src[data-src="display"] .wx-oc__cta .wx-ico { color: var(--wx-color-surface); }
.wx-oc__cta--fab { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); box-shadow: var(--wx-shadow-md); }
.wx-oc__cta--fab .wx-ico { width: 15px; height: 15px; }
@keyframes wx-oc-tap { from { transform: scale(.3); opacity: .85; } to { transform: scale(1.8); opacity: 0; } }
.wx-oc__src.is-tapping .wx-oc__cta::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; border-radius: 50%;
  background: color-mix(in srgb, var(--wx-color-heading) 26%, transparent); animation: wx-oc-tap 700ms var(--wx-ease) 2 both;
}
.wx .wx-oc-ui__url { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; background: var(--wx-color-surface); font-size: 9.5px; color: var(--wx-color-text-muted); }
.wx-oc-ui__url i { width: 5px; height: 5px; border-radius: 50%; background: var(--wx-color-traffic-red); }
.wx-oc-ui__url i:nth-child(2) { background: var(--wx-color-traffic-yellow); }
.wx-oc-ui__url i:nth-child(3) { background: var(--wx-color-traffic-green); }
.wx-oc-ui__url span { margin-left: 4px; }
.wx-oc-ui__page { display: grid; gap: 4px; padding: 5px 2px 30px; }
.wx-oc-ui__page b { font-size: 11px; }
.wx-oc-ui__page span, .wx-oc-ui__bars i { display: block; height: 5px; border-radius: 3px; background: var(--wx-color-border); }
.wx-oc-ui__page span:last-child, .wx-oc-ui__bars i:last-child { width: 62%; }
.wx-oc-ui__tip { position: absolute; right: 42px; bottom: 12px; padding: 4px 7px; border-radius: 8px 8px 2px 8px; background: var(--wx-color-surface); font-size: 9.5px; font-weight: 650; box-shadow: var(--wx-shadow-sm); }
.wx-oc-ui--mail { background: var(--wx-color-surface); box-shadow: inset 0 3px 0 var(--ch), inset 0 0 0 1px var(--wx-color-border); padding-top: 10px; }
.wx .wx-oc-ui__mail-head { display: grid; padding-bottom: 5px; border-bottom: 1px solid var(--wx-color-border); }
.wx-oc-ui__mail-head b { font-size: 10.5px; }
.wx-oc-ui__mail-head span { font-size: 10px; color: var(--wx-color-text-muted); }
.wx-oc-ui__bars { display: grid; gap: 4px; }
.wx .wx-oc-ui__sender { font-size: 9.5px; font-weight: 750; letter-spacing: .04em; color: var(--wx-color-text-muted); text-align: center; }
.wx .wx-oc-ui__bubble { justify-self: start; max-width: 92%; padding: 6px 9px; border-radius: 12px 12px 12px 4px; background: var(--wx-color-surface-muted); font-size: 10.5px; }
.wx-oc-ui__bubble u { color: var(--ch-ink, var(--wx-color-accent-text)); text-underline-offset: 2px; }
.wx-oc-ui__card { display: grid; gap: 6px; padding: 7px; border-radius: 10px; background: var(--wx-color-surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--wx-color-heading) 12%, transparent); }
.wx-oc-ui__card b { font-size: 10.5px; }
.wx-oc-ui--poster { grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--ch) 26%, var(--wx-color-surface)), color-mix(in srgb, var(--wx-ch-email) 10%, var(--wx-color-surface))); }
.wx-oc-qr { display: block; width: 54px; height: 54px; border-radius: 4px; }
.wx .wx-oc-ui--poster p { display: grid; gap: 2px; }
.wx-oc-ui--poster b { font-size: 11px; }
.wx-oc-ui--poster span { font-size: 10px; color: var(--wx-color-text-muted); }
.wx-oc-ui--banner { gap: 8px; padding: 10px; background: radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--wx-ch-email) 30%, transparent) 0 22px, transparent 23px), linear-gradient(135deg, color-mix(in srgb, var(--ch) 20%, var(--wx-color-surface)), color-mix(in srgb, var(--wx-ch-email) 12%, var(--wx-color-surface))); }
.wx-oc-ui--banner b { font-size: 12px; line-height: 1.2; }

/* Téléphone : une conversation par scénario */
.wx-oc__phone { display: grid; justify-items: center; }
.wx-oc__chat { display: none; flex: 1; min-height: 0; flex-direction: column; }
.wx-oc__chat.is-active, .wx-oc:not(.is-enhanced) .wx-oc__chat:first-of-type { display: flex; }
.wx-oc.is-enhanced .wx-wa__msg[data-at]:not(.is-shown) { display: none; }
.wx-oc .wx-wa__msg--typing.is-on { display: flex; }
.wx-oc:not(.is-static) .wx-wa__thread { overflow: hidden; }
.wx-oc-ill { width: 78%; height: auto; }
.wx-oc__doc { display: flex; align-items: center; gap: calc(var(--w) * .03); padding: calc(var(--w) * .022); }
.wx-oc__doc-icon { display: grid; place-items: center; flex: none; width: calc(var(--w) * .1); height: calc(var(--w) * .125); border-radius: 5px; background: var(--wx-color-danger); color: var(--wx-color-surface); font-size: calc(var(--w) * .03); font-weight: 800; }
.wx-oc__doc-text { display: grid; line-height: 1.25; }
.wx-oc__doc-text b { font-size: calc(var(--w) * .042); font-weight: 700; }
.wx-oc__doc-text span { font-size: calc(var(--w) * .036); color: var(--wx-color-text-muted); }
.wx-oc__loc { padding: 3px; }
.wx-oc__map { display: block; width: calc(var(--w) * .62); height: auto; border-radius: 10px 10px 4px 4px; }
.wx .wx-oc__loc-text { display: grid; padding: 5px 7px 4px; line-height: 1.25; }
.wx-oc__loc-text b { font-size: calc(var(--w) * .042); }
.wx-oc__loc-text span { font-size: calc(var(--w) * .036); color: var(--wx-color-text-muted); }
/* Aperçu de lien (image, titre, description, adresse), comme WhatsApp le génère */
.wx-oc__link { display: grid; width: calc(var(--w) * .62); padding: 3px; }
.wx-oc__link-media { display: block; overflow: hidden; border-radius: 10px 10px 0 0; }
.wx .wx-oc__link-img { display: block; width: 100%; height: calc(var(--w) * .27); object-fit: cover; }
.wx-oc__link-text { display: grid; gap: 1px; padding: 5px 7px 5px; border-radius: 0 0 8px 8px; background: color-mix(in srgb, var(--wx-color-text) 5%, transparent); line-height: 1.25; }
.wx-oc__link:not(:has(.wx-oc__link-media)) .wx-oc__link-text { border-radius: 8px; }
.wx-oc__link-text b { font-size: calc(var(--w) * .042); }
.wx-oc__link-text span { font-size: calc(var(--w) * .036); color: var(--wx-color-text-muted); }
.wx-oc__link-text i { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; font-style: normal; font-size: calc(var(--w) * .033); color: var(--wx-color-primary); white-space: nowrap; text-overflow: ellipsis; }
.wx-oc__link-text .wx-ico { flex: none; width: 1.1em; height: 1.1em; }

/* Plateforme : la fiche arrive, part dans le CRM et est attribuée */
.wx-oc__platform { display: grid; gap: 10px; width: 100%; max-width: 420px; }
.wx-oc__panel { display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md); }
.wx .wx-oc__panel-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--wx-color-border); font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-oc__panel-head img { width: auto; height: 18px; }
.wx-oc__panel-head span { min-width: 0; padding-left: 10px; border-left: 1px solid var(--wx-color-border-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-oc__panel-head i { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--wx-color-bg); font-size: .75rem; font-style: normal; font-weight: 650; color: var(--wx-color-text-muted); }
.wx .wx-oc__leads { list-style: none; display: grid; align-content: start; gap: 6px; }
.wx-oc__lead {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "av id src" "av id to"; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 8px 10px; border-radius: 14px; background: var(--wx-color-bg); transition: background-color 600ms var(--wx-ease-soft), box-shadow 600ms var(--wx-ease-soft);
}
.wx-oc.is-enhanced .wx-oc__lead:not(.is-shown):not(.is-static), .wx-oc.is-enhanced .wx-oc__lead.is-capped { display: none; }
.wx-oc:not(.is-enhanced) .wx-oc__lead:nth-child(n+5) { display: none; }
.wx-oc__lead.is-new { background: var(--wx-color-bubble-out); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 22%, transparent); }
.wx-oc__lead-avatar { grid-area: av; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ch-ink, var(--wx-color-heading)); color: var(--wx-color-surface); font-size: .6875rem; font-weight: 800; }
.wx-oc__lead-id { grid-area: id; display: grid; min-width: 0; line-height: 1.25; }
.wx-oc__lead-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--wx-color-heading); }
.wx-oc__lead-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--wx-color-text-muted); }
.wx-oc__lead-src { grid-area: src; justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ch, var(--wx-color-heading)) 10%, var(--wx-color-surface)); font-size: .6875rem; font-weight: 700; color: var(--ch-ink, var(--wx-color-heading)); white-space: nowrap; }
.wx-oc__lead-src .wx-ico { width: 12px; height: 12px; stroke-width: 2; }
.wx-oc__lead-to { grid-area: to; justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 750; color: var(--wx-color-accent-text); white-space: nowrap; }
.wx-oc__lead-to .wx-ico { width: 12px; height: 12px; }
.wx-oc.is-enhanced .wx-oc__lead:not(.is-assigned):not(.is-static) .wx-oc__lead-to { visibility: hidden; }
.wx .wx-oc__crm { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--wx-color-bg-tint); font-size: .8125rem; font-weight: 650; color: var(--wx-color-heading); }
.wx-oc__crm > .wx-ico { width: 17px; height: 17px; color: var(--wx-color-accent); }
.wx-oc__crm i { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-on-action); transition: opacity 400ms var(--wx-ease-soft), transform 400ms var(--wx-ease); }
.wx-oc__crm i .wx-ico { width: 12px; height: 12px; stroke-width: 2.6; }
.wx-oc.is-enhanced .wx-oc__crm:not(.is-done) i { opacity: 0; transform: scale(.4); }
.wx .wx-oc__team { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wx-oc__member {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 12px;
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: .75rem; line-height: 1.2; color: var(--wx-color-text-muted);
  transition: background-color 400ms var(--wx-ease-soft), box-shadow 400ms var(--wx-ease-soft);
}
.wx-oc__member > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-oc__member b { display: block; font-size: .8125rem; color: var(--wx-color-heading); }
.wx-oc__member-avatar { --tone: var(--wx-ch-site); --tone-ink: var(--wx-ch-site-ink); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 10%, var(--wx-color-surface)); color: var(--tone-ink); font-size: .6875rem; font-weight: 800; }
/* Une teinte par conseiller, comme dans un outil d'équipe ; le vert reste réservé à l'attribution */
.wx-oc__member:nth-child(6n+2) .wx-oc__member-avatar { --tone: var(--wx-ch-email); --tone-ink: var(--wx-ch-email-ink); }
.wx-oc__member:nth-child(6n+3) .wx-oc__member-avatar { --tone: var(--wx-ch-instagram); --tone-ink: var(--wx-ch-instagram-ink); }
.wx-oc__member:nth-child(6n+4) .wx-oc__member-avatar { --tone: var(--wx-ch-sms); --tone-ink: var(--wx-ch-sms-ink); }
.wx-oc__member:nth-child(6n+5) .wx-oc__member-avatar { --tone: var(--wx-ch-rcs); --tone-ink: var(--wx-ch-rcs-ink); }
.wx-oc__member:nth-child(6n+6) .wx-oc__member-avatar { --tone: var(--wx-ch-qr); --tone-ink: var(--wx-ch-qr-ink); }
.wx-oc__member.is-active { background: var(--wx-color-bubble-out); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text), 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 18%, transparent); }
.wx-oc__member.is-active .wx-oc__member-avatar { background: var(--wx-color-accent); color: var(--wx-color-on-action); }

/* Étapes sous l'animation */
.wx .wx-oc__steps { list-style: none; display: grid; gap: 8px; }
.wx-oc__step {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--wx-color-surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--wx-color-border);
  font-size: .875rem; line-height: 1.4; color: var(--wx-color-text); transition: background-color 300ms var(--wx-ease-soft), box-shadow 300ms var(--wx-ease-soft);
}
.wx-oc__step-num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); font-size: .8125rem; font-weight: 800; }
.wx-oc__step.is-active { background: var(--wx-color-surface); color: var(--wx-color-heading); box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text), var(--wx-shadow-sm); }
.wx-oc__step.is-active .wx-oc__step-num, .wx-oc__step.is-done .wx-oc__step-num { background: var(--wx-color-accent); color: var(--wx-color-on-action); }

/* Grand écran : supports | téléphone | plateforme, reliés par des traits */
@container wx-oc (min-width: 900px) {
  .wx-oc__top { flex-wrap: nowrap; column-gap: 10px; }
  /* Grand écran : bouton Pause / Lecture rond, pictogramme seul (le libellé reste lu par les lecteurs d'écran). */
  .wx .wx-oc__toggle, .wx .wx-oc__toggle:focus { flex: none; width: 44px; height: 44px; padding: 0; }
  .wx .wx-oc__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wx-oc__stage { grid-template-columns: minmax(0, 340px) minmax(40px, 1fr) var(--wx-phone-w) minmax(40px, .8fr) minmax(0, 330px); justify-items: stretch; gap: 0; }
  .wx .wx-oc__sources { grid-column: 1; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: visible; }
  .wx-oc__phone { grid-column: 3; }
  .wx-oc__platform { grid-column: 5; max-width: none; }
  .wx-oc__arrow { display: none; }
  .wx .wx-oc__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@container wx-oc (min-width: 900px) and (max-width: 1099.98px) {
  .wx-oc__stage { --wx-phone-w: 236px; }
  .wx-oc__stage { grid-template-columns: minmax(0, 300px) minmax(28px, 1fr) var(--wx-phone-w) minmax(28px, .8fr) minmax(0, 280px); }
}
@container wx-oc (max-width: 899.98px) {
  .wx-oc__beams { display: none; }
  /* Petit écran : secteurs sur une ligne défilante, l'attribution se lit sur la fiche, une étape à la fois */
  .wx .wx-oc__sectors { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
  .wx-oc__sectors::-webkit-scrollbar { display: none; }
  .wx .wx-oc__team { display: none; }
  .wx-oc.is-enhanced:not(.is-static) .wx-oc__step:not(.is-active) { display: none; }
}

/* Hero : accroche sur deux colonnes, démonstration en pleine largeur ; halos aux couleurs des canaux côté supports,
   vert au centre (WhatsApp) */
.wx.wx-hero--omni::before {
  background:
    radial-gradient(34% 34% at 6% 44%, color-mix(in srgb, var(--wx-ch-instagram) 8%, transparent), transparent 70%),
    radial-gradient(32% 36% at 20% 86%, color-mix(in srgb, var(--wx-ch-facebook) 8%, transparent), transparent 70%),
    radial-gradient(40% 40% at 52% 52%, color-mix(in srgb, var(--wx-color-accent) 12%, transparent), transparent 70%),
    radial-gradient(36% 40% at 96% 14%, color-mix(in srgb, var(--wx-ch-rcs) 7%, transparent), transparent 70%),
    radial-gradient(40% 40% at 4% 0%, color-mix(in srgb, var(--wx-color-accent) 12%, transparent), transparent 70%);
}
.wx .wx-hero--omni .wx-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.wx .wx-hero__top { display: grid; gap: 20px; }
.wx .wx-hero__top > .wp-block-group { display: grid; gap: 20px; justify-items: start; align-content: end; }
.wx .wx-hero--omni .wx-hero__copy { max-width: none; }
@media (min-width: 1100px) { .wx .wx-hero__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 56px; } }

/* 26. Bande de confiance : logos clients en défilement */
.wx.wx-trust { padding-block: clamp(28px, 4vw, 48px); background: var(--wx-color-surface); border-block: 1px solid var(--wx-color-border); }
.wx .wx-trust__title { text-align: center; font-family: var(--wx-font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-trust__label { margin-top: 8px; text-align: center; font-size: .8125rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-marquee { position: relative; margin-top: 24px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, var(--wx-color-heading) 8%, var(--wx-color-heading) 92%, transparent); mask: linear-gradient(90deg, transparent, var(--wx-color-heading) 8%, var(--wx-color-heading) 92%, transparent); }
.wx .wx-marquee__track { display: flex; align-items: center; width: max-content; }
.wx .wx-marquee__track > * { flex: none; margin: 0; padding-right: clamp(40px, 6vw, 72px); }
.wx .wx-marquee__track img { display: block; width: auto; max-width: none; height: 34px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter 300ms var(--wx-ease-soft), opacity 300ms var(--wx-ease-soft); }
.wx .wx-marquee__track img:hover { filter: none; opacity: 1; }
.wx .wx-marquee__track .is-emblem img { height: 58px; }
/* Lien vers les avis Google, sous les logos : la preuve juste après la promesse du hero */
.wx .wx-trust__reviews { margin-top: 22px; text-align: center; }
.wx .wx-trust__reviews a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), var(--wx-shadow-sm);
  font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); text-decoration: none;
  transition: box-shadow 200ms var(--wx-ease), transform 200ms var(--wx-ease);
}
.wx .wx-trust__reviews a::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--wx-color-star); -webkit-mask: var(--wx-i-star) center / contain no-repeat; mask: var(--wx-i-star) center / contain no-repeat; }
.wx .wx-trust__reviews a::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--wx-color-accent-text); -webkit-mask: var(--wx-i-arrow) center / contain no-repeat; mask: var(--wx-i-arrow) center / contain no-repeat; transition: transform 200ms var(--wx-ease); }
.wx .wx-trust__reviews a:hover { box-shadow: inset 0 0 0 1px var(--wx-color-accent-text), var(--wx-shadow-md); }
.wx .wx-trust__reviews a:hover::after { transform: translateX(3px); }
.wx .wx-marquee:not(.is-enhanced) .wx-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 20px; }
@keyframes wx-marquee { to { transform: translateX(-50%); } }

/* 27. Fil d'Ariane (bloc walexia/breadcrumb) : discret, au-dessus du surtitre */
.wx .wx-crumbs { font-size: .875rem; line-height: 1.3; color: var(--wx-color-text-muted); }
.wx .wx-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; padding: 0; }
.wx .wx-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.wx .wx-crumbs li + li::before { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.wx .wx-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--wx-color-text); text-decoration: underline; text-decoration-color: var(--wx-color-border-strong); text-underline-offset: 3px; }
.wx .wx-crumbs a:hover { color: var(--wx-color-heading); text-decoration-color: currentColor; }
.wx .wx-crumbs [aria-current="page"] { color: var(--wx-color-heading); font-weight: 650; }

/* 28. Parcours automatisé (visuel « flow ») : déclencheur → IA → conditions → actions, étapes allumées tour à tour */
.wx .wx-flow-wrap { container: wx-flow / inline-size; }
.wx .wx-flow {
  list-style: none; display: grid; gap: 16px; margin: 0; padding: clamp(20px, 3vw, 30px); border-radius: var(--wx-r-xl);
  background: color-mix(in srgb, var(--wx-color-surface) 86%, transparent); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md);
}
.wx .wx-flow__node {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 16px; border-radius: 18px;
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border);
  transition: box-shadow 400ms var(--wx-ease-soft), transform 400ms var(--wx-ease-soft);
}
.wx .wx-flow__kind {
  position: absolute; top: -10px; right: 14px; padding: 2px 9px; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border);
  font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-text-muted);
}
.wx .wx-flow__ico {
  grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: color-mix(in srgb, var(--ch, var(--wx-color-accent)) 14%, var(--wx-color-surface)); color: var(--ch-ink, var(--wx-color-accent-text));
}
.wx .wx-flow__ico .wx-ico { width: 22px; height: 22px; }
.wx .wx-flow__ico img { display: block; width: 26px; height: 26px; max-width: none; object-fit: contain; }
.wx .wx-flow__node b { font-size: .9375rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-flow__node i { font-style: normal; font-size: .8125rem; line-height: 1.35; color: var(--wx-color-text-muted); }
/* Liaisons entre étapes (verticales sur mobile, horizontales sur grand écran) : trait gris, remplissage vert animé */
.wx .wx-flow__node + .wx-flow__node::before, .wx .wx-flow__node + .wx-flow__node::after {
  content: ""; position: absolute; left: 36px; top: -17px; width: 2px; height: 18px; border-radius: 2px; background: var(--wx-color-border-strong);
}
.wx .wx-flow__node + .wx-flow__node::after { background: var(--wx-color-accent); transform-origin: top; }
.wx .wx-flow__node:only-child::before { display: none; }
@container wx-flow (min-width: 860px) {
  .wx .wx-flow { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; }
  .wx .wx-flow__node { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 22px 16px 18px; }
  .wx .wx-flow__ico { grid-row: auto; margin-bottom: 6px; }
  .wx .wx-flow__kind { left: 14px; right: auto; }
  .wx .wx-flow__node + .wx-flow__node::before, .wx .wx-flow__node + .wx-flow__node::after { left: -29px; top: 42px; width: 30px; height: 2px; }
  .wx .wx-flow__node + .wx-flow__node::after { transform-origin: left; }
}
@keyframes wx-flow-node {
  0%, 4% { box-shadow: inset 0 0 0 1px var(--wx-color-border); transform: none; }
  10%, 30% { box-shadow: inset 0 0 0 2px var(--ch, var(--wx-color-accent)), 0 16px 34px -18px color-mix(in srgb, var(--ch, var(--wx-color-accent)) 75%, transparent); transform: translateY(-4px); }
  44%, 100% { box-shadow: inset 0 0 0 1px var(--wx-color-border); transform: none; }
}
@keyframes wx-flow-link-v { 0% { transform: scaleY(0); } 12%, 70% { transform: scaleY(1); } 85%, 100% { transform: scaleY(0); } }
@keyframes wx-flow-link-h { 0% { transform: scaleX(0); } 12%, 70% { transform: scaleX(1); } 85%, 100% { transform: scaleX(0); } }

/* 29. Bandeau d'appel à l'action (milieu de page) */
.wx.wx-cta-band { padding-block: clamp(8px, 2vw, 24px); }
.wx .wx-cta-band__card {
  position: relative; display: grid; gap: 22px; align-items: center; overflow: hidden; padding: clamp(26px, 4vw, 44px); border-radius: var(--wx-r-xl);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 26%, transparent), transparent 70%),
    var(--wx-grad-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 18%, transparent);
}
.wx .wx-cta-band__copy { display: grid; gap: 8px; max-width: 640px; }
.wx .wx-cta-band__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--wx-color-heading); }
.wx .wx-cta-band__copy p { color: var(--wx-color-text); }
@media (min-width: 900px) { .wx .wx-cta-band__card { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }

/* 30. Articles du blog et guides d'aide : colonne de lecture, sommaire, encadrés, exemples de messages */
.wx.wx-article { padding-block: clamp(28px, 4vw, 56px) var(--wx-section-pad); }
.wx .wx-article__head {
  display: grid; gap: 18px; justify-items: start;
  width: 100%; max-width: calc(var(--wx-max) + 2 * var(--wx-gutter)); margin-inline: auto; padding-inline: var(--wx-gutter);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.wx .wx-article__head > * { max-width: 900px; }
.wx .wx-article__title { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.wx .wx-article__head .wx-lead { max-width: 44em; }
.wx .wx-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); }
.wx .wx-article__meta span + span::before { content: "·"; margin-right: 18px; }
.wx .wx-article__layout {
  display: grid; gap: 28px; align-items: start;
  width: 100%; max-width: calc(var(--wx-max) + 2 * var(--wx-gutter)); margin-inline: auto; padding-inline: var(--wx-gutter);
}
.wx .wx-article__toc {
  display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--wx-r-md);
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx .wx-article__toc-title { font-size: var(--wx-fs-caption); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-article__toc ol { display: grid; gap: 4px; padding-left: 1.3em; font-size: .9375rem; line-height: 1.4; }
.wx .wx-article__toc li::marker { color: var(--wx-color-text-muted); font-size: .875em; }
.wx .wx-article__toc a { display: block; padding-block: 3px; color: var(--wx-color-text); text-decoration: none; }
.wx .wx-article__toc a:hover { color: var(--wx-color-accent-text); text-decoration: underline; text-underline-offset: .2em; }
.wx .wx-article__body { display: grid; gap: 18px; min-width: 0; max-width: 760px; font-size: 1.125rem; line-height: 1.7; }
.wx .wx-article__body > h2 { margin-top: 26px; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.025em; scroll-margin-top: 130px; }
.wx .wx-article__body > h3 { margin-top: 8px; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
.wx .wx-article__body > :is(ul, ol) { display: grid; gap: 8px; padding-left: 1.4em; }
.wx .wx-article__body li::marker { color: var(--wx-color-accent-text); }
.wx .wx-article__body strong { color: var(--wx-color-heading); }
.wx .wx-article__body code { padding: 1px 6px; border-radius: 6px; background: var(--wx-color-surface-muted); font-size: .9em; }
.wx .wx-article__body .wx-article__sources { gap: 6px; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-callout {
  display: grid; gap: 10px; padding: 18px 22px; border-radius: var(--wx-r-md);
  background: var(--wx-color-bg-tint); box-shadow: inset 4px 0 0 var(--wx-color-accent);
}
.wx .wx-article-msg {
  position: relative; display: grid; gap: 6px; justify-self: start; max-width: min(100%, 560px); padding: 14px 18px 16px;
  border-radius: 18px 18px 18px 6px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  font-size: 1rem; line-height: 1.55;
}
.wx .wx-article-msg__label { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-article-msg__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wx-color-accent); }
.wx .wx-article__table { overflow-x: auto; }
.wx .wx-article__table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.wx .wx-article__table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--wx-color-border); text-align: left; vertical-align: top; }
.wx .wx-article__table th { font-weight: 700; color: var(--wx-color-heading); background: var(--wx-color-surface-muted); }
.wx .wx-article-cta {
  display: grid; gap: 12px; margin-top: 12px; padding: clamp(22px, 3vw, 32px); border-radius: var(--wx-r-lg);
  background: radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 22%, transparent), transparent 70%), var(--wx-color-bg-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent-text) 18%, transparent);
}
.wx .wx-article-cta__title { font-family: var(--wx-font-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-article-cta .wx-actions { margin-top: 4px; }
@media (min-width: 1100px) {
  .wx .wx-article__layout { grid-template-columns: 260px minmax(0, 760px); gap: clamp(40px, 5vw, 88px); }
  .wx .wx-article__toc { position: sticky; top: 132px; max-height: calc(100vh - 160px); overflow: auto; }
}

/* Pages légales : information à compléter (surlignée), liens vers les autres documents */
.wx mark.wx-todo { padding: 1px 6px; border-radius: 5px; background: #FFF1B8; color: #5C4300; box-shadow: inset 0 0 0 1px #E8C547; font-weight: 650; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wx .wx-legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; }
.wx .wx-legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); color: var(--wx-color-heading); font-weight: 650; text-decoration: none; }
.wx .wx-legal-links a:hover { box-shadow: inset 0 0 0 1.5px var(--wx-color-accent-text); }

/* Liste d'articles (bloc walexia/article-list) : cartes du blog, guides numérotés */
.wx .wx-artlist { display: grid; gap: 22px; }
.wx .wx-artlist__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wx .wx-artlist__filters[hidden] { display: none; }
.wx .wx-artlist__filter {
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong);
  font: 650 .9375rem/1 var(--wx-font-text); color: var(--wx-color-text);
  transition: background-color 180ms var(--wx-ease-soft), color 180ms var(--wx-ease-soft);
}
.wx .wx-artlist__filter:hover { box-shadow: inset 0 0 0 1px var(--wx-color-heading); }
.wx .wx-artlist__filter[aria-pressed="true"] { background: var(--wx-color-heading); color: var(--wx-color-surface); box-shadow: none; }
.wx .wx-artlist__grid { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.wx .wx-artlist__item[hidden] { display: none; }
@media (min-width: 700px) { .wx .wx-artlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wx .wx-artlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-artcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: var(--wx-r-lg);
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
  transition: transform 260ms var(--wx-ease), box-shadow 260ms var(--wx-ease);
}
.wx .wx-artcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong), var(--wx-shadow-md); }
.wx .wx-artcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-artcard__cat { padding: 4px 10px; border-radius: 999px; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); font-weight: 750; }
.wx .wx-artcard__title { font-size: var(--wx-fs-card); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.wx .wx-artcard__title a { color: var(--wx-color-heading); text-decoration: none; }
.wx .wx-artcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wx .wx-artcard__title a:focus-visible { outline: none; }
.wx .wx-artcard:has(a:focus-visible) { outline: 2px solid var(--wx-focus); outline-offset: 3px; }
.wx .wx-artcard__text { font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-artcard__date { margin-top: auto; padding-top: 6px; font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-artlist__steps { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
@media (min-width: 900px) { .wx .wx-artlist__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx .wx-artlist__step {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: var(--wx-r-md);
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border);
}
.wx .wx-artlist__step.is-current { box-shadow: inset 0 0 0 2px var(--wx-color-accent); }
.wx .wx-artlist__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); font-weight: 800; }
.wx .wx-artlist__step.is-current .wx-artlist__num { background: var(--wx-color-accent); color: var(--wx-color-on-action); }
.wx .wx-artlist__step-copy { display: grid; gap: 4px; }
.wx .wx-artlist__step-copy a { font-weight: 700; color: var(--wx-color-heading); text-decoration: none; }
.wx .wx-artlist__step-copy a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wx .wx-artlist__step-copy span { font-size: .9375rem; line-height: 1.45; color: var(--wx-color-text-muted); }

/* 20. Motion --------------------------------------------------------------- */
@keyframes wx-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes wx-stage-in { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.97); } }
@keyframes wx-marker { from { background-size: 0% 100%; } }
@keyframes wx-pop { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); } }
@keyframes wx-panel-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes wx-depth { to { transform: translate3d(0, -2%, 0) scale(.96); } }
@keyframes wx-msg-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.94); } }
@keyframes wx-fill { from { opacity: 0; transform: translate3d(6px, 0, 0); } }

@media screen and (prefers-reduced-motion: no-preference) {
  html:has(body.wx-page) { scroll-behavior: smooth; }
  .wx .wx-enter { animation: wx-rise 900ms var(--wx-ease) 40ms both; }
  .wx .wx-enter--2 { animation-delay: 110ms; }
  .wx .wx-enter--3 { animation-delay: 200ms; }
  .wx .wx-enter--4 { animation-delay: 290ms; }
  .wx .wx-enter--5 { animation-delay: 380ms; }
  .wx .wx-enter--stage { animation: wx-stage-in 1100ms var(--wx-ease) 140ms both; }
  .wx .wx-display mark { animation: wx-marker 900ms var(--wx-ease) 650ms both; }
  .wx-scene .wx-msg--typing .wx-msg__bubble i { animation: wx-typing 1s ease-in-out infinite; }
  .wx-scene .wx-msg--typing .wx-msg__bubble i:nth-child(2) { animation-delay: .15s; }
  .wx-scene .wx-msg--typing .wx-msg__bubble i:nth-child(3) { animation-delay: .3s; }
  .wx-scene.is-animated .wx-scene__track { transition: transform 480ms var(--wx-ease); }
  .wx-scene.is-animated .wx-msg.is-shown { animation: wx-msg-in 460ms var(--wx-spring) both; transform-origin: 0 100%; }
  .wx-scene.is-animated .wx-msg.is-shown:is(.wx-msg--ai, .wx-msg--agent, .wx-msg--note, .wx-msg--typing) { transform-origin: 100% 100%; }
  .wx-scene.is-animated .wx-msg--system.is-shown { transform-origin: 50% 100%; }
  .wx-scene.is-animated .is-filled .wx-scene__val { display: inline-block; animation: wx-fill 520ms var(--wx-ease) both; }
  .wx-scene.is-animated .wx-scene__status b.is-current { animation: wx-pop 420ms var(--wx-ease) both; }
  .wx-pd.is-animated .wx-wa__track { transition: transform 480ms var(--wx-ease); }
  .wx-pd.is-animated .wx-wa__msg.is-shown { animation: wx-msg-in 440ms var(--wx-spring) both; transform-origin: 0 0; }
  .wx-pd.is-animated .wx-wa__msg--contact.is-shown { transform-origin: 100% 0; }
  .wx-pd .wx-wa__msg--typing i { animation: wx-typing 1s ease-in-out infinite; }
  .wx-pd .wx-wa__msg--typing i:nth-child(2) { animation-delay: .15s; }
  .wx-pd .wx-wa__msg--typing i:nth-child(3) { animation-delay: .3s; }
  .wx-pd.is-animated .wx-pd__note.is-current, .wx-pd.is-animated .wx-pd__annot.is-current { animation: wx-pop 460ms var(--wx-ease) both; }
  .wx-pd.is-animated .is-filled .wx-pd__val { display: inline-block; animation: wx-fill 520ms var(--wx-ease) both; }
  .wx-pd .wx-wa__carousel { scroll-behavior: smooth; }
  .wx-pf.is-animated .wx-pf__stage { transition: transform 650ms var(--wx-ease); }
  .wx-pf.is-animated .wx-pf__bubble { transition: transform 700ms var(--wx-ease), opacity 700ms var(--wx-ease); }
  .wx-pf__bubble.is-flying { opacity: .25; }
  .wx-pf.is-animated .wx-pf__bubble.is-on:not(.is-flying) { animation: wx-pop 500ms var(--wx-ease) both; }
  .wx-pf.is-animated .wx-pf__table tr.is-arrived td { transition: background-color 600ms var(--wx-ease-soft); }
  .wx-pf.is-animated .wx-pf__main > [data-zone].is-panel { animation: wx-panel-in 480ms var(--wx-ease) both; }
  .wx-oc[data-state="playing"] .wx-wa__track { transition: transform 480ms var(--wx-ease); }
  .wx-oc[data-state="playing"] .wx-wa__msg.is-shown { animation: wx-msg-in 440ms var(--wx-spring) both; transform-origin: 0 0; }
  .wx-oc[data-state="playing"] .wx-wa__msg--contact.is-shown { transform-origin: 100% 0; }
  .wx-oc[data-state="playing"] .wx-oc__lead.is-new { animation: wx-panel-in 480ms var(--wx-ease) both; }
  .wx-marquee.is-enhanced .wx-marquee__track { animation: wx-marquee 40s linear infinite; }
  .wx-marquee.is-enhanced:hover .wx-marquee__track { animation-play-state: paused; }
  .wx-pf.is-animated .wx-pf__card { transition: opacity 500ms var(--wx-ease-soft), box-shadow 500ms var(--wx-ease-soft); }
  /* « Fiche transmise » apparaît une fois la caméra arrivée sur le CRM */
  .wx-pf.is-animated[data-current="7"] .wx-pf__status { transition: opacity 500ms var(--wx-ease-soft) 900ms, visibility 0s 900ms; }

  /* Révélations au défilement : masquées seulement quand le script est actif. */
  .wx-js .wx-reveal { transition: opacity 900ms var(--wx-ease), transform 900ms var(--wx-ease); }
  .wx-js .wx-reveal:not(.is-inview) { opacity: 0; transform: translate3d(0, 28px, 0); }
  @media (min-width: 1024px) {
    .wx-js .wx-journey__steps::before { transition: transform 1400ms var(--wx-ease) 250ms; }
    .wx-js .wx-journey__steps:not(.is-inview)::before { transform: scaleX(0); }
    .wx-js .wx-journey__step { transition: opacity 800ms var(--wx-ease), transform 800ms var(--wx-ease); }
    .wx-js .wx-journey__steps:not(.is-inview) .wx-journey__step { opacity: 0; transform: translate3d(0, 20px, 0); }
    .wx-js .wx-journey__step:nth-child(2) { transition-delay: 120ms; }
    .wx-js .wx-journey__step:nth-child(3) { transition-delay: 240ms; }
    .wx-js .wx-journey__step:nth-child(4) { transition-delay: 360ms; }
  }
  .wx-tour .is-new { animation: wx-pop 560ms var(--wx-ease) both; animation-delay: var(--wx-delay, 0ms); }
  .wx-tabs.is-enhanced .wx-tabs__panel:not([hidden]) { animation: wx-panel-in 520ms var(--wx-ease) both; }
  /* Parcours automatisé : chaque étape s'allume à son tour, la liaison se remplit juste avant, en boucle. */
  .wx-js .wx-flow.is-inview .wx-flow__node { animation: wx-flow-node calc(var(--n) * 1.2s + 2.4s) var(--wx-ease-soft) calc(var(--i) * 1.2s) infinite both; }
  .wx-js .wx-flow.is-inview .wx-flow__node + .wx-flow__node::after { animation: wx-flow-link-v calc(var(--n) * 1.2s + 2.4s) var(--wx-ease-soft) calc(var(--i) * 1.2s - .6s) infinite both; }
  @container wx-flow (min-width: 860px) {
    .wx-js .wx-flow.is-inview .wx-flow__node + .wx-flow__node::after { animation-name: wx-flow-link-h; }
  }
  @supports (animation-timeline: view()) {
    .wx-scene__stage { animation: wx-depth linear both; animation-timeline: view(); animation-range: exit 10% exit 90%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx *, .wx *::before, .wx *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* 21. Contraste forcé ------------------------------------------------------ */
@media (forced-colors: active) {
  .wx :is(.wx-button, .wx-btn > .wp-block-button__link, .wx-tour__control button, .wx-tabs__tab, .wx-scene__btn, .wx-scene__step-btn, .wx-stage__btn) { border: 1px solid ButtonText; }
  .wx .wx-tile, .wx .wx-panel, .wx .wx-usage, .wx-scene__stage, .wx-scene__window, .wx-scene__lead, .wx-demo__card, .wx.wx-form-card, .wx .wx-logo-tile, .wx .wx-msg__bubble { border: 1px solid CanvasText; }
}

/* 32. Carrousel 3D de conversations (bloc walexia/phone-carousel) -------- */
/* Anneau de téléphones : chacun tourné de 360°/n et poussé de --r ; l'anneau recule de --r pour que le téléphone de face
   reste à l'échelle 1 (texte net), puis tourne de --rot. Les téléphones de dos sont masqués (backface-visibility). */
.wx-pc {
  --pc-w: clamp(184px, 19vw, 244px); --wx-phone-w: var(--pc-w); --r: calc(var(--pc-w) * var(--pc-rf, 1.6));
  position: relative; display: grid; gap: clamp(16px, 2vw, 24px); justify-items: center; width: 100%; min-width: 0;
}
.wx-pc__chips {
  display: flex; gap: 6px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm);
}
.wx-pc__chips::-webkit-scrollbar { display: none; }
.wx .wx-pc__chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--wx-color-text); font: 650 .9375rem/1 var(--wx-font-text); white-space: nowrap; cursor: pointer;
  transition: background-color 200ms var(--wx-ease-soft), color 200ms var(--wx-ease-soft);
}
.wx .wx-pc__chip .wx-ico { width: 17px; height: 17px; }
.wx .wx-pc__chip:hover { background: var(--wx-color-bg-tint); color: var(--wx-color-heading); }
.wx .wx-pc__chip[aria-pressed="true"] { background: var(--wx-color-heading); color: #FFFFFF; }
.wx .wx-pc__chip[aria-pressed="true"] .wx-ico { color: var(--wx-color-accent); }
.wx .wx-pc__chip:focus-visible { outline: 2px solid var(--wx-color-heading); outline-offset: 2px; }
.wx-pc__stage {
  position: relative; width: 100%; height: calc(var(--pc-w) * 2.06 + 64px); overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 42%; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
/* Halo des verts de WhatsApp sous l'anneau */
.wx-pc__stage::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(960px, 120%); height: 52%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wx-color-accent) 30%, transparent), color-mix(in srgb, var(--wx-color-accent) 10%, transparent) 60%, transparent);
}
.wx-pc__ring { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateY(var(--rot, 0deg)); }
.wx-pc__item {
  position: absolute; top: 4px; left: 50%; display: grid; justify-items: center; gap: 12px; width: var(--pc-w); margin-left: calc(var(--pc-w) / -2);
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer;
}
.wx-pc__item.is-current { cursor: default; }
.wx-pc__item:not(.is-current) .wx-phone { opacity: .6; filter: saturate(.7); }
.wx .wx-pc__badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--wx-color-surface); color: var(--wx-color-heading); font-size: .8125rem; font-weight: 750; line-height: 1.2;
  box-shadow: var(--wx-shadow-sm), inset 0 0 0 1px var(--wx-color-border);
}
.wx-pc__badge .wx-ico { width: 15px; height: 15px; color: var(--wx-color-accent); }
.wx .wx-pc__item.is-current .wx-pc__badge { background: var(--wx-color-heading); color: #FFFFFF; box-shadow: 0 12px 26px -14px var(--wx-color-heading); }
.wx-pc__item.is-current .wx-pc__badge .wx-ico { color: var(--wx-color-accent); }
.wx-pc .wx-wa__thread { overflow: hidden; }
.wx-pc.is-static .wx-wa__thread { overflow-y: auto; }
.wx-pc.is-enhanced .wx-pc__item.is-current .wx-wa__msg[data-at]:not(.is-shown) { display: none; }
.wx-pc .wx-wa__msg--typing.is-on { display: flex; }
.wx .wx-pc__nav {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 0; border-radius: 50%; background: var(--wx-color-surface); color: var(--wx-color-heading); cursor: pointer;
  box-shadow: var(--wx-shadow-md), inset 0 0 0 1px var(--wx-color-border);
  transition: background-color 180ms var(--wx-ease-soft), color 180ms var(--wx-ease-soft);
}
.wx-pc__nav--prev { left: 8px; }
.wx-pc__nav--next { right: 8px; }
.wx-pc__nav .wx-ico { width: 22px; height: 22px; }
.wx .wx-pc__nav:hover { background: var(--wx-color-heading); color: #FFFFFF; }
.wx .wx-pc__nav:focus-visible, .wx .wx-pc__toggle:focus-visible { outline: 2px solid var(--wx-color-heading); outline-offset: 3px; }
.wx-pc:not(.is-enhanced) .wx-pc__nav { display: none; }
.wx-pc__foot { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-inline: 8px; }
.wx .wx-pc__caption { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--wx-color-text); text-align: center; }
.wx .wx-pc__count { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; background: var(--wx-color-bg-tint); color: var(--wx-color-accent-text); font-size: .8125rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.wx .wx-pc__toggle {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--wx-color-surface); color: var(--wx-color-heading); box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); cursor: pointer;
}
.wx .wx-pc__toggle[hidden] { display: none; }
.wx-pc__toggle .wx-ico { width: 18px; height: 18px; }
.wx-pc__toggle .wx-ico + .wx-ico, .wx-pc.is-paused .wx-pc__toggle .wx-ico:first-child { display: none; }
.wx-pc.is-paused .wx-pc__toggle .wx-ico + .wx-ico { display: block; }
.wx .wx-pc__note { margin: 0; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); text-align: center; }
.wx .wx-hero__visual.wx-pc { max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .wx-pc.is-enhanced:not(.is-dragging) .wx-pc__ring { transition: transform 950ms cubic-bezier(.2, .8, .2, 1); }
  .wx-pc__item .wx-phone { transition: opacity 500ms var(--wx-ease-soft), filter 500ms var(--wx-ease-soft); }
  .wx-pc .wx-pc__item.is-current .wx-wa__track { transition: transform 480ms var(--wx-ease); }
  .wx-pc .wx-pc__item.is-current .wx-wa__msg.is-shown { animation: wx-msg-in 440ms var(--wx-spring) both; transform-origin: 0 0; }
  .wx-pc .wx-wa__msg--typing i { animation: wx-typing 1s ease-in-out infinite; }
  .wx-pc .wx-wa__msg--typing i:nth-child(2) { animation-delay: .15s; }
  .wx-pc .wx-wa__msg--typing i:nth-child(3) { animation-delay: .3s; }
}

/* 34. Vidéo verticale (page Automobile) : texte à gauche, vidéo 9:16 sur un halo #34D36B à droite */
.wx .wx-ugc__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .wx .wx-ugc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.wx .wx-ugc__copy { display: grid; gap: 20px; justify-items: start; }
.wx .wx-ugc__media { position: relative; display: grid; gap: 12px; justify-items: center; margin: 0; }
.wx .wx-ugc__media::before {
  content: ""; position: absolute; inset: 6% -12% 10%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wx-color-accent) 34%, transparent), transparent);
}
.wx .wx-ugc__video {
  position: relative; z-index: 1; display: block; width: min(100%, 360px); height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 32px; background: var(--wx-color-heading);
  box-shadow: 0 0 0 6px #FFFFFF, 0 40px 80px -36px color-mix(in srgb, var(--wx-color-heading) 55%, transparent);
}
.wx .wx-ugc__media figcaption { position: relative; z-index: 1; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); text-align: center; }
.wx .wx-ugc__transcript { width: 100%; border-radius: 16px; background: var(--wx-grad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 22%, transparent); }
.wx .wx-ugc__transcript summary { padding: 14px 18px; font-weight: 700; color: var(--wx-color-heading); cursor: pointer; }
.wx .wx-ugc__transcript p { padding: 0 18px 14px; font-size: .9375rem; color: var(--wx-color-text); }

/* 35. Cas clients : secteurs et cartes (bloc walexia/case-library), page détaillée (rubrique cas-clients des articles) */
.wx.wx-case .wx-container { display: grid; gap: 22px; }
.wx .wx-caselib { display: grid; gap: clamp(22px, 3vw, 32px); }
.wx .wx-caselib__sectors { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wx .wx-caselib__sector {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px; border: 0; border-radius: var(--wx-r-md); background: var(--wx-color-surface); font: inherit; text-align: left; color: var(--wx-color-heading); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); transition: box-shadow 160ms var(--wx-ease-soft), transform 160ms var(--wx-ease-soft);
}
.wx .wx-caselib__sector:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent), var(--wx-shadow-sm); }
.wx .wx-caselib__sector.is-active { background: var(--wx-grad-card); box-shadow: inset 0 0 0 2px var(--wx-color-accent), var(--wx-shadow-sm); }
.wx .wx-caselib__sector-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--wx-g-16); color: var(--wx-color-accent-text); }
.wx .wx-caselib__sector-ico .wx-ico { width: 24px; height: 24px; }
.wx .wx-caselib__sector-copy { display: grid; gap: 2px; min-width: 0; }
.wx .wx-caselib__sector-copy b { font-size: 1.125rem; line-height: 1.2; }
.wx .wx-caselib__sector-copy span { font-size: .875rem; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-caselib__sector-count { padding: 4px 10px; border-radius: 999px; background: var(--wx-color-heading); color: #FFFFFF; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.wx .wx-caselib__group { display: grid; gap: 14px; scroll-margin-top: 130px; }
.wx .wx-caselib__group-title { font-size: var(--wx-fs-caption); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-caselib__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wx .wx-casecard {
  position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--wx-r-lg);
  background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); transition: box-shadow 180ms var(--wx-ease-soft), transform 180ms var(--wx-ease-soft);
}
.wx .wx-casecard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), var(--wx-shadow-sm); }
.wx .wx-casecard:has(a:focus-visible) { outline: 3px solid var(--wx-color-accent); outline-offset: 3px; }
.wx .wx-casecard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wx .wx-casecard__cat { font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-casecard__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.wx .wx-casecard__title a { color: var(--wx-color-heading); text-decoration: none; outline: none; }
.wx .wx-casecard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wx .wx-casecard__text { font-size: .9375rem; line-height: 1.55; color: var(--wx-color-text); }
.wx .wx-casecard__stats { list-style: none; margin: 4px 0 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--wx-color-border); }
.wx .wx-casecard__stats li { display: grid; gap: 2px; align-content: start; }
.wx .wx-casecard__stats b { font: 700 1.5rem/1.1 var(--wx-font-display); letter-spacing: -.02em; color: var(--wx-color-heading); }
.wx .wx-casecard__stats span { font-size: .8125rem; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-casecard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--wx-color-accent-text); }
.wx .wx-casecard__more .wx-ico { width: 18px; height: 18px; transition: transform 160ms var(--wx-ease-soft); }
.wx .wx-casecard:hover .wx-casecard__more .wx-ico { transform: translateX(3px); }
/* Logos : fichier du client ou de la marque, sinon son nom ; pictogramme du secteur pour un client non nommé */
.wx .wx-case-logo { display: inline-flex; align-items: center; min-height: 52px; padding: 6px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-case-logo img { display: block; width: auto; height: 34px; }
.wx .wx-case-logo--text { font: 800 1rem/1 var(--wx-font-text); letter-spacing: .04em; color: var(--wx-color-heading); }
.wx .wx-case-logo--icon { justify-content: center; width: 52px; padding: 0; background: var(--wx-g-16); box-shadow: none; color: var(--wx-color-accent-text); }
/* Page d'un cas client : logos et chiffres clés sous le chapô, fiche client au-dessus du sommaire */
.wx .wx-article--case .wx-article__head { grid-template-columns: minmax(0, 1fr); }
.wx .wx-casehead__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wx .wx-article__head .wx-casestats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; max-width: 1040px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.wx .wx-casestats li { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: var(--wx-r-md); background: var(--wx-color-surface); box-shadow: inset 0 0 0 1px var(--wx-color-border); font-size: .9375rem; line-height: 1.4; color: var(--wx-color-text); }
.wx .wx-casestats li:first-child { background: var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 50%, transparent); }
.wx .wx-casestats strong { font: 700 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1 var(--wx-font-display); letter-spacing: -.03em; color: var(--wx-color-heading); }
.wx .wx-casestats__note { font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); }
.wx .wx-casefacts { list-style: none; margin: 0 0 10px; padding: 0 0 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--wx-color-border); font-size: .9375rem; line-height: 1.4; color: var(--wx-color-text); }
.wx .wx-casefacts li { display: grid; gap: 2px; }
.wx .wx-casefacts strong { font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-text-muted); }

/* 36. FAQ par thèmes (page /faq/) : sommaire en pastilles, puis un bloc de questions par thème */
.wx .wx-faqhub__nav { position: sticky; top: 92px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin-bottom: clamp(24px, 4vw, 40px); border-radius: 24px; background: color-mix(in srgb, #FFFFFF 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-faqhub__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--wx-g-06); color: var(--wx-color-heading); font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color 160ms var(--wx-ease-soft); }
.wx .wx-faqhub__nav a:hover { background: var(--wx-g-16); }
.wx .wx-faqhub__nav a span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: var(--wx-color-accent-text); font-size: .75rem; font-weight: 800; }
.wx .wx-faqhub__theme { display: grid; gap: 16px; scroll-margin-top: 170px; }
.wx .wx-faqhub__theme + .wx-faqhub__theme { margin-top: clamp(36px, 5vw, 56px); }
.wx .wx-faqhub__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.02em; }
@media (max-width: 1099px) { .wx .wx-faqhub__nav { top: 72px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .wx .wx-faqhub__nav a { flex: none; } }

/* 37. Points d'entrée Click to WhatsApp : douze supports, puis le chemin jusqu'à l'équipe */
.wx .wx-entry__grid { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; }
@media (min-width: 1100px) { .wx .wx-entry__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .wx .wx-entry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.wx .wx-entry__grid li { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); transition: transform 200ms var(--wx-ease-soft), box-shadow 200ms var(--wx-ease-soft); }
.wx .wx-entry__grid li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), 0 14px 32px -20px color-mix(in srgb, var(--wx-color-accent) 70%, transparent); }
.wx .wx-entry__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent); color: var(--wx-color-accent); }
.wx .wx-entry__icon .wx-ico { width: 22px; height: 22px; }
.wx .wx-entry__grid li.wx-entry__hub { background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 30%, transparent), transparent 70%), var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent); transform: none; }
.wx .wx-entry__hub .wx-entry__icon { background: var(--wx-color-accent); box-shadow: 0 8px 18px -10px var(--wx-color-accent); color: var(--wx-color-heading); }
.wx .wx-entry__grid b { font-size: 1.0625rem; line-height: 1.25; color: var(--wx-color-heading); }
.wx .wx-entry__grid li > span:last-child { font-size: .9375rem; line-height: 1.45; color: var(--wx-color-text-muted); }
@media (max-width: 559px) { .wx .wx-entry__grid li { padding: 14px; } .wx .wx-entry__grid b { font-size: 1rem; } .wx .wx-entry__grid li > span:last-child { font-size: .875rem; } }
.wx .wx-entry__path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; border-radius: 24px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 40%, transparent); }
.wx .wx-entry__path li { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.wx .wx-entry__path li + li::before { content: ""; position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; border-top: 2px solid var(--wx-color-accent); border-right: 2px solid var(--wx-color-accent); transform: translateY(-50%) rotate(45deg); }
.wx .wx-entry__path .wx-ico { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--wx-color-accent) 80%, transparent); color: var(--wx-color-accent); }
.wx .wx-entry__path li span { display: grid; gap: 2px; font-size: .875rem; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-entry__path li b { font-size: 1rem; color: var(--wx-color-heading); }
.wx .wx-entry__path li.is-start .wx-ico { animation: wx-entry-ping 2.4s var(--wx-ease-soft) infinite; }
@keyframes wx-entry-ping { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wx-color-accent) 45%, transparent); } 60% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--wx-color-accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wx .wx-entry__path li.is-start .wx-ico { animation: none; } .wx .wx-entry__grid li { transition: none; } }
@media (max-width: 899px) { .wx .wx-entry__path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx .wx-entry__path li + li::before { display: none; } .wx .wx-entry__path li { padding: 16px; } }
@media (max-width: 479px) { .wx .wx-entry__path { grid-template-columns: minmax(0, 1fr); } .wx .wx-entry__path li { padding: 12px 16px; } }
.wx .wx-entry__note { max-width: 72ch; margin: 16px 0 0; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); }

/* 38. Chiffres sourcés en fil WhatsApp (WhatsApp en France) : en-tête de section à gauche, fil de messages à droite.
   Chiffre en vert, texte en gris, source et coches de lecture en pied de message. Les messages arrivent avec les
   révélations au défilement et le chiffre défile (data-wx-count) ; rien en mouvement réduit. */
.wx .wx-kpis__layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1024px) { .wx .wx-kpis__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.wx .wx-kpis__head { margin-bottom: 0; }
.wx .wx-eyebrow--wa { display: inline-flex; align-items: center; gap: 10px; }
.wx .wx-wa-glyph { display: inline-block; flex: none; vertical-align: middle; }
.wx .wx-kpis__sources { margin: 4px 0 0; font-size: var(--wx-fs-caption); line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-kpis__sources a { color: var(--wx-color-accent-text); }
.wx .wx-chatstats { padding: clamp(16px, 2.4vw, 26px); border-radius: 28px; background: #EFEAE2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 6%, transparent), 0 30px 60px -40px color-mix(in srgb, var(--wx-color-heading) 45%, transparent); }
.wx .wx-chatstats__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0 4px 14px; border-bottom: 1px solid color-mix(in srgb, var(--wx-color-heading) 9%, transparent); font-size: .875rem; color: #54656F; }
.wx .wx-chatstats__head b { color: #111B21; }
.wx .wx-chatstats__list { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
@media (max-width: 559px) { .wx .wx-chatstats__list { grid-template-columns: minmax(0, 1fr); } }
/* Message reçu : coin haut gauche resserré et petite queue, comme dans WhatsApp */
.wx .wx-statmsg { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px; border-radius: 4px 18px 18px 18px; background: #FFFFFF; box-shadow: 0 1px 1.5px rgba(11, 20, 26, .13); }
.wx .wx-statmsg::before { content: ""; position: absolute; left: -7px; top: 0; width: 8px; height: 13px; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wx .wx-statmsg p { margin: 0; }
.wx .wx-statmsg__value { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wx .wx-statmsg__num { font: 800 clamp(2.25rem, 1.6rem + 1.6vw, 3rem)/1 var(--wx-font-display); letter-spacing: -.035em; color: var(--wx-color-accent); }
.wx .wx-statmsg__unit { font-size: 1rem; font-weight: 800; color: var(--wx-color-accent-text); }
.wx .wx-statmsg__unit.is-pct { font: 800 clamp(1.375rem, 1.1rem + .8vw, 1.75rem)/1 var(--wx-font-display); color: var(--wx-color-accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wx .wx-statmsg__num, .wx .wx-statmsg__unit.is-pct { background: linear-gradient(140deg, var(--wx-color-accent) 15%, color-mix(in srgb, var(--wx-color-accent) 70%, #0B4A26) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.wx .wx-statmsg__label { font-size: .9375rem; line-height: 1.45; color: #54656F; }
.wx .wx-statmsg__compare { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #F0F2F5; font-size: .8125rem; font-weight: 700; color: #54656F; }
.wx .wx-statmsg__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px !important; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-statmsg__tick .wx-ico { width: 16px; height: 16px; color: var(--wx-color-tick, #53BDEB); stroke-width: 2; }

/* 39. Parcours classique ou parcours WhatsApp : deux colonnes d'étapes numérotées, reliées par des flèches */
.wx .wx-compare__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 799px) { .wx .wx-compare__grid { grid-template-columns: minmax(0, 1fr); } }
.wx .wx-compare__col { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-compare__col--wa { background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 28%, transparent), transparent 70%), var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), 0 24px 48px -32px color-mix(in srgb, var(--wx-color-accent) 80%, transparent); }
.wx .wx-compare__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.wx .wx-compare__head span { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-color-heading); }
.wx .wx-compare__head b { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--wx-color-heading) 7%, transparent); color: var(--wx-color-heading); font-size: .875rem; white-space: nowrap; }
.wx .wx-compare__col--wa .wx-compare__head b { background: var(--wx-color-accent); }
.wx .wx-compare__steps { list-style: none; display: grid; gap: 22px; margin: 0; padding: 0; counter-reset: wx-step; }
.wx .wx-compare__steps li { position: relative; display: grid; gap: 2px; padding: 12px 16px 12px 54px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); counter-increment: wx-step; }
.wx .wx-compare__steps li::before { content: counter(wx-step); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--wx-color-heading) 7%, transparent); color: var(--wx-color-heading); font-size: .8125rem; font-weight: 800; }
.wx .wx-compare__steps li + li::after { content: ""; position: absolute; left: 50%; top: -17px; width: 9px; height: 9px; border-right: 2px solid var(--wx-color-border-strong); border-bottom: 2px solid var(--wx-color-border-strong); transform: translateX(-50%) rotate(45deg); }
.wx .wx-compare__steps b { font-size: 1rem; line-height: 1.3; color: var(--wx-color-heading); }
.wx .wx-compare__steps span { font-size: .875rem; line-height: 1.4; color: var(--wx-color-text-muted); }
.wx .wx-compare__col--wa .wx-compare__steps li { padding-block: 16px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent); }
.wx .wx-compare__col--wa .wx-compare__steps li::before { top: 16px; background: var(--wx-color-accent); }
.wx .wx-compare__col--wa .wx-compare__steps li + li::after { border-color: var(--wx-color-accent); }
.wx .wx-compare__foot { margin: auto 0 0 !important; font-size: .9375rem; font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-compare__col--wa .wx-compare__foot { color: var(--wx-color-heading); }
.wx .wx-compare__plus { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; padding: 0; }
@media (max-width: 799px) { .wx .wx-compare__plus { grid-template-columns: minmax(0, 1fr); } }
.wx .wx-compare__plus li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--wx-color-heading); }
.wx .wx-compare__plus .wx-ico { margin-top: 1px; color: var(--wx-color-accent); stroke-width: 2.2; }

/* 40. Glossaire (/glossaire/) : index des lettres, puis une rangée par lettre et une carte par terme */
.wx .wx-glossary__nav { position: sticky; top: 92px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: clamp(20px, 3vw, 32px); border-radius: 20px; background: color-mix(in srgb, #FFFFFF 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-glossary__nav a { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; background: var(--wx-g-06); color: var(--wx-color-heading); font-weight: 800; text-decoration: none; transition: background-color 160ms var(--wx-ease-soft); }
.wx .wx-glossary__nav a:hover { background: var(--wx-g-16); }
.wx .wx-glossary__group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding-block: clamp(20px, 3vw, 32px); border-top: 1px solid var(--wx-color-border); scroll-margin-top: 170px; }
.wx .wx-glossary__letter { margin: 0; font: 800 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--wx-font-display); color: var(--wx-color-accent); }
.wx .wx-glossary__items { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wx .wx-glossary__item { padding: 18px 20px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); transition: box-shadow 200ms var(--wx-ease-soft), background-color 200ms var(--wx-ease-soft); }
.wx .wx-glossary__item:has(.wx-glossary__term:target) { background: var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent); }
.wx .wx-glossary__term { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; color: var(--wx-color-heading); scroll-margin-top: 170px; }
.wx .wx-glossary__def { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--wx-color-text); }
.wx .wx-glossary__def a { color: var(--wx-color-accent-text); }
@media (max-width: 899px) { .wx .wx-glossary__group { grid-template-columns: minmax(0, 1fr); gap: 12px; } .wx .wx-glossary__items { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1099px) { .wx .wx-glossary__nav { top: 72px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .wx .wx-glossary__nav a { flex: none; } }

/* 41. Générateur de lien et de QR code WhatsApp (bloc walexia/wa-generator) */
.wx.wx-wagen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: start; }
@media (max-width: 899px) { .wx.wx-wagen { grid-template-columns: minmax(0, 1fr); } }
.wx .wx-wagen__form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-wagen__phone { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
@media (max-width: 479px) { .wx .wx-wagen__phone { grid-template-columns: minmax(0, 1fr); } }
.wx .wx-wagen__error { margin: -8px 0 0; }
.wx .wx-wagen__error:empty { display: none; }
.wx .wx-wagen__supports { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wx .wx-wagen__supports legend { margin-bottom: 10px; padding: 0; font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-wagen__chip { position: relative; }
.wx .wx-wagen__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wx .wx-wagen__chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--wx-g-06); color: var(--wx-color-heading); font-size: .9375rem; font-weight: 700; transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft); }
.wx .wx-wagen__chip span .wx-ico { width: 18px; height: 18px; color: var(--wx-color-accent); }
.wx .wx-wagen__chip:hover span { background: var(--wx-g-16); }
.wx .wx-wagen__chip input:checked + span { background: var(--wx-color-heading); color: #FFFFFF; }
.wx .wx-wagen__chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--wx-color-accent) 70%, transparent); outline-offset: 2px; }
.wx .wx-wagen__count { margin: 0; text-align: right; font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-wagen__privacy { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .875rem; line-height: 1.45; color: var(--wx-color-text-muted); }
.wx .wx-wagen__privacy .wx-ico { margin-top: 1px; color: var(--wx-color-accent); }
.wx .wx-wagen__result { position: sticky; top: 104px; display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: 28px; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 28%, transparent), transparent 70%), var(--wx-grad-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 50%, transparent); }
@media (max-width: 899px) { .wx .wx-wagen__result { position: static; } }
.wx .wx-wagen__qr { display: grid; place-items: center; justify-self: center; width: min(100%, 300px); aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 18px 40px -24px color-mix(in srgb, var(--wx-color-heading) 45%, transparent); }
.wx .wx-wagen__qr svg { display: block; width: 100%; height: auto; }
.wx .wx-wagen__qr:has(> .wx-wagen__placeholder) { outline: 2px dashed var(--wx-color-border-strong); outline-offset: -12px; }
.wx .wx-wagen__placeholder { margin: 0; padding: 32px; text-align: center; font-size: .9375rem; color: var(--wx-color-text-muted); }
.wx .wx-wagen__link input { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8125rem; }
.wx .wx-wagen__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wx .wx-wagen__actions .wx-button { gap: 8px; }
.wx .wx-wagen__actions .wx-ico { width: 16px; height: 16px; }
.wx .wx-wagen__actions :is(button:disabled, a[aria-disabled="true"]) { opacity: .45; pointer-events: none; }
.wx .wx-wagen__preview { padding: 14px; border-radius: 18px; background: #EFEAE2; }
.wx .wx-wagen__preview p { margin: 0; }
.wx .wx-wagen__preview-label { margin-bottom: 8px !important; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #54656F; }
.wx .wx-wagen__composer { display: flex; align-items: flex-end; gap: 8px; }
.wx .wx-wagen__composer span { flex: 1; padding: 10px 14px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 1px 1px rgba(11, 20, 26, .08); color: #111B21; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.wx .wx-wagen__composer i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--wx-color-accent); color: #FFFFFF; }
.wx .wx-wagen__composer .wx-ico { width: 18px; height: 18px; }
.wx .wx-wagen__hint { margin-top: 8px !important; font-size: .8125rem; color: #54656F; }

/* 45. Catalogue des intégrations : filtres en pastilles, tuiles (logo officiel ou initiales, nom, catégorie, usage) */
.wx .wx-intcat__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
@media (max-width: 759px) { .wx .wx-intcat__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .wx .wx-intcat__filters button { flex: none; } }
.wx .wx-intcat__filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); color: var(--wx-color-heading); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background-color 160ms var(--wx-ease-soft), color 160ms var(--wx-ease-soft); }
.wx .wx-intcat__filters button span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--wx-g-06); color: var(--wx-color-accent-text); font-size: .75rem; font-weight: 800; }
.wx .wx-intcat__filters button:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent); }
.wx .wx-intcat__filters button.is-active { background: var(--wx-color-heading); color: #FFFFFF; box-shadow: none; }
.wx .wx-intcat__filters button.is-active span { background: var(--wx-color-accent); color: var(--wx-deep-1); }
.wx .wx-intcat__filters button:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 2px; }
.wx .wx-intcat__grid { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; }
.wx .wx-intcat__item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); transition: box-shadow 200ms var(--wx-ease-soft), transform 200ms var(--wx-ease-soft); }
.wx .wx-intcat__item[hidden] { display: none; }
.wx .wx-intcat__item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 50%, transparent), 0 16px 32px -24px color-mix(in srgb, var(--wx-color-accent) 70%, transparent); }
.wx .wx-intcat__logo { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 8px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-intcat__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.wx .wx-intcat__logo.is-initials { background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); color: var(--wx-deep-2); font: 800 1rem/1 var(--wx-font-display); letter-spacing: .02em; }
.wx .wx-intcat__text { display: grid; gap: 2px; min-width: 0; }
.wx .wx-intcat__text b { font-size: 1rem; color: var(--wx-color-heading); }
.wx .wx-intcat__text small { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-intcat__text > span { margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--wx-color-text-muted); }
.wx .wx-intcat__note { margin-top: 18px; }

/* 42. Tarifs : modèle Setup + Run + Conversations (cartes reliées par un « + »), bulle d'information */
.wx .wx-pricing-model__cards { list-style: none; display: grid; gap: 28px; margin: 0; padding: 0; }
@media (min-width: 1024px) { .wx .wx-pricing-model__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.wx .wx-pcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-pcard::after { content: ""; position: absolute; inset: 0 24px auto; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--wx-deep-3), var(--wx-color-accent)); }
@media (min-width: 1024px) {
  .wx .wx-pcard + .wx-pcard::before { content: "+"; position: absolute; left: -29px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-deep-1); font: 800 1.125rem/1 var(--wx-font-display); transform: translateY(-50%); box-shadow: 0 0 0 5px var(--wx-color-bg); }
}
.wx .wx-pcard p, .wx .wx-pcard ul { margin: 0; }
.wx .wx-pcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wx .wx-pcard__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wx-deep-2); color: #FFFFFF; font-size: .875rem; font-weight: 800; }
.wx .wx-pcard__label { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-heading); }
.wx .wx-pcard__when { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--wx-g-06); color: var(--wx-color-accent-text); font-size: .8125rem; font-weight: 700; }
.wx .wx-pcard__when .wx-ico { width: 15px; height: 15px; }
.wx .wx-pcard__title { margin: 4px 0 2px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
.wx .wx-pcard__list { list-style: none; display: grid; gap: 9px; padding: 0; }
.wx .wx-pcard__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; color: var(--wx-color-text); }
.wx .wx-pcard__list .wx-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--wx-color-accent); stroke-width: 2.2; }
.wx .wx-pcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--wx-color-border); }
.wx .wx-pcard__mention { padding: 6px 12px; border-radius: 999px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent); color: var(--wx-color-heading); font-size: .875rem; font-weight: 750; }
.wx .wx-tip { position: relative; }
.wx .wx-tip summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; color: var(--wx-color-accent-text); font-size: .875rem; font-weight: 700; }
.wx .wx-tip summary::-webkit-details-marker { display: none; }
.wx .wx-tip summary .wx-ico { width: 16px; height: 16px; }
.wx .wx-tip summary:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 2px; border-radius: 6px; }
.wx .wx-tip p { position: absolute; z-index: 10; right: 0; bottom: calc(100% + 10px); width: min(320px, 80vw); padding: 14px 16px; border-radius: 16px; background: var(--wx-deep-1); color: #FFFFFF; font-size: .875rem; line-height: 1.5; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55); }
.wx .wx-tip p::after { content: ""; position: absolute; right: 28px; top: 100%; border: 8px solid transparent; border-top-color: var(--wx-deep-1); }
@media (max-width: 559px) { .wx .wx-tip p { position: static; width: auto; margin-top: 10px; } .wx .wx-tip p::after { display: none; } }

/* 43. Tarifs : périmètres de déploiement (exemples, pas des abonnements) */
.wx .wx-scopes__cards { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
@media (min-width: 900px) { .wx .wx-scopes__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-scope { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 28px); border-radius: 26px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); transition: box-shadow 220ms var(--wx-ease-soft), transform 220ms var(--wx-ease-soft); }
.wx .wx-scope:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), 0 24px 48px -30px color-mix(in srgb, var(--wx-color-accent) 80%, transparent); }
.wx .wx-scope p, .wx .wx-scope ul, .wx .wx-scope h3 { margin: 0; }
.wx .wx-scope__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent); color: var(--wx-color-accent); }
.wx .wx-scope__icon .wx-ico { width: 24px; height: 24px; }
.wx .wx-scope__title { font-size: 1.5rem; letter-spacing: -.02em; }
.wx .wx-scope__for { font-size: .9375rem; line-height: 1.45; color: var(--wx-color-text-muted); }
.wx .wx-scope__list { list-style: none; display: grid; gap: 8px; padding: 6px 0 0; }
.wx .wx-scope__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.4; color: var(--wx-color-text); }
.wx .wx-scope__list .wx-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--wx-color-accent); stroke-width: 2.2; }
.wx .wx-scope__cta { align-self: flex-start; margin-top: auto; }
.wx .wx-scope__list + .wx-scope__cta { margin-top: auto; }
.wx .wx-scopes__note { margin: 20px 0 0; font-size: var(--wx-fs-caption); color: var(--wx-color-text-muted); }
/* Prix indicatifs « à partir de » (affichés seulement quand config/tarification.json est renseigné) */
.wx .wx-billing { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); }
.wx .wx-billing button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--wx-color-heading); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.wx .wx-billing button[aria-pressed="true"] { background: var(--wx-color-heading); color: #FFFFFF; }
.wx .wx-billing button span { padding: 2px 8px; border-radius: 999px; background: var(--wx-color-accent); color: var(--wx-deep-1); font-size: .75rem; font-weight: 800; }
.wx .wx-billing button:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 2px; }
.wx .wx-scope__price { display: grid; gap: 4px; padding: 14px 0 12px; border-block: 1px solid var(--wx-color-border); }
.wx .wx-scope__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wx .wx-scope__from { flex-basis: 100%; font-size: .8125rem; font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-scope__amount b { font: 800 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.1 var(--wx-font-display); letter-spacing: -.03em; color: var(--wx-color-heading); }
.wx .wx-scope__amount s { font-size: 1rem; font-weight: 700; color: var(--wx-color-text-muted); }
.wx .wx-scope__amount small { font-size: .875rem; font-weight: 650; color: var(--wx-color-text-muted); }
.wx .wx-scope__setup { font-size: .875rem; font-weight: 650; color: var(--wx-color-accent-text); }
.wx .wx-scopes__prices { margin: 18px 0 0; font-size: .9375rem; color: var(--wx-color-text-muted); }
.wx .wx-scopes__prices b { color: var(--wx-color-heading); }

/* 44. Configurateur de projet (bloc walexia/configurator) : étapes, barre de progression, choix en cartes ou en pastilles,
   fiche de cadrage en trois composantes, formulaire, confirmation. */
.wx.wx-cfg { max-width: 1000px; margin: 0 auto; padding: clamp(18px, 3vw, 36px); border-radius: 32px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 40px 80px -50px color-mix(in srgb, var(--wx-color-heading) 45%, transparent); scroll-margin-top: 110px; }
.wx .wx-cfg__loading { margin: 0; padding: 40px 0; text-align: center; color: var(--wx-color-text-muted); }
.wx .wx-cfg__resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border-radius: 16px; background: var(--wx-g-06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); }
.wx .wx-cfg__resume[hidden] { display: none; }
.wx .wx-cfg__resume p { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 650; color: var(--wx-color-heading); }
.wx .wx-cfg__resume p .wx-ico { color: var(--wx-color-accent-text); }
.wx .wx-cfg__resume div { display: flex; gap: 8px; }
.wx .wx-cfg__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 2px; margin: 0 0 14px; padding: 0 0 4px; }
@media (max-width: 759px) { .wx .wx-cfg__steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
.wx .wx-cfg__steps li { flex: none; }
.wx .wx-cfg__steps button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px 0 5px; border: 0; border-radius: 999px; background: transparent; color: var(--wx-color-text-muted); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.wx .wx-cfg__steps button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--wx-color-heading) 7%, transparent); font-size: .75rem; }
.wx .wx-cfg__steps button:disabled { cursor: default; opacity: .55; }
.wx .wx-cfg__steps .is-done button span { background: var(--wx-g-16); color: var(--wx-color-accent-text); }
.wx .wx-cfg__steps .is-current button { background: var(--wx-color-heading); color: #FFFFFF; opacity: 1; }
.wx .wx-cfg__steps .is-current button span { background: var(--wx-color-accent); color: var(--wx-deep-1); }
.wx .wx-cfg__steps button:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 2px; }
.wx .wx-cfg__bar { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--wx-color-heading) 7%, transparent); }
.wx .wx-cfg__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--wx-deep-3), var(--wx-color-accent)); transition: width 450ms var(--wx-ease); }
.wx .wx-cfg__panel { margin-top: clamp(20px, 3vw, 30px); }
.wx .wx-cfg__panel :is(h3, h4, p, dl, dd) { margin: 0; }
.wx .wx-cfg__step, .wx .wx-cfg__summary, .wx .wx-cfg__form, .wx .wx-cfg__done { animation: wx-cfg-in 380ms var(--wx-ease) both; }
@keyframes wx-cfg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wx .wx-cfg__step, .wx .wx-cfg__summary, .wx .wx-cfg__form, .wx .wx-cfg__done { animation: none; } .wx .wx-cfg__bar span { transition: none; } }
.wx .wx-cfg__kicker { margin-bottom: 8px !important; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-cfg__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -.02em; color: var(--wx-color-heading); outline: none; }
.wx .wx-cfg__lead { margin-top: 8px !important; color: var(--wx-color-text-muted); }
.wx .wx-cfg__q { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.wx .wx-cfg__q[hidden] { display: none; }
.wx .wx-cfg__qlabel { display: block; margin-bottom: 10px; padding: 0; font-size: 1rem; font-weight: 750; color: var(--wx-color-heading); }
.wx .wx-cfg__qhint { font-size: .8125rem; font-weight: 600; color: var(--wx-color-text-muted); }
.wx .wx-cfg__hint { margin: -4px 0 12px !important; font-size: .875rem; color: var(--wx-color-text-muted); }
.wx .wx-cfg__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wx .wx-cfg__opts--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.wx .wx-cfg__opt { position: relative; display: flex; }
.wx .wx-cfg__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wx .wx-cfg__optbox { display: flex; flex: 1; align-items: center; gap: 10px; min-height: 46px; padding: 9px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); color: var(--wx-color-heading); transition: box-shadow 160ms var(--wx-ease-soft), background-color 160ms var(--wx-ease-soft); }
.wx .wx-cfg__opts--cards .wx-cfg__optbox { min-height: 64px; padding: 12px 14px; border-radius: 18px; }
.wx .wx-cfg__opttext { display: grid; gap: 2px; flex: 1; }
.wx .wx-cfg__opttext b { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.wx .wx-cfg__opttext small { font-size: .8125rem; line-height: 1.4; color: var(--wx-color-text-muted); }
.wx .wx-cfg__opticon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--wx-g-06); color: var(--wx-color-accent); }
.wx .wx-cfg__opticon .wx-ico { width: 20px; height: 20px; }
.wx .wx-cfg__optcheck { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wx-color-border-strong); color: transparent; }
.wx .wx-cfg__optcheck .wx-ico { width: 14px; height: 14px; stroke-width: 3; }
.wx .wx-cfg__opts:not(.wx-cfg__opts--cards) .wx-cfg__optcheck { display: none; }
.wx .wx-cfg__opt:hover .wx-cfg__optbox { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent); }
.wx .wx-cfg__opt input:checked + .wx-cfg__optbox { background: var(--wx-grad-card); box-shadow: inset 0 0 0 2px var(--wx-color-accent); }
.wx .wx-cfg__opts:not(.wx-cfg__opts--cards) .wx-cfg__opt input:checked + .wx-cfg__optbox { background: var(--wx-color-heading); color: #FFFFFF; box-shadow: none; }
.wx .wx-cfg__opts:not(.wx-cfg__opts--cards) .wx-cfg__opt input:checked + .wx-cfg__optbox small { color: color-mix(in srgb, #FFFFFF 78%, transparent); }
.wx .wx-cfg__opt input:checked + .wx-cfg__optbox .wx-cfg__optcheck { background: var(--wx-color-accent); box-shadow: none; color: var(--wx-deep-1); }
.wx .wx-cfg__opt input:focus-visible + .wx-cfg__optbox { outline: 3px solid color-mix(in srgb, var(--wx-color-accent) 70%, transparent); outline-offset: 2px; }
.wx .wx-cfg__error { min-height: 0; margin-top: 8px !important; font-size: .875rem; font-weight: 650; color: var(--wx-color-danger); }
.wx .wx-cfg__error:empty { display: none; }
.wx .wx-cfg__q.is-invalid .wx-cfg__optbox { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-danger) 55%, transparent); }
.wx .wx-cfg__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 32px); padding-top: 20px; border-top: 1px solid var(--wx-color-border); }
.wx .wx-cfg__nav[hidden] { display: none; }
.wx .wx-cfg__nav .wx-button { gap: 8px; }
.wx .wx-cfg__prev:disabled { visibility: hidden; }
.wx .wx-cfg__count { flex: 1; margin: 0; text-align: center; font-size: .875rem; font-weight: 650; color: var(--wx-color-text-muted); }
.wx .wx-cfg__ready { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px !important; padding: 14px 18px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 40%, transparent); font-weight: 650; color: var(--wx-color-heading); }
.wx .wx-cfg__ready .wx-ico { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-deep-1); stroke-width: 3; }
.wx .wx-cfg__parts { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 860px) { .wx .wx-cfg__parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wx .wx-cfg__part { padding: 18px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-cfg__partlabel { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-cfg__part h4 { margin: 4px 0 12px !important; font-size: 1rem; line-height: 1.3; }
.wx .wx-cfg__part ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.wx .wx-cfg__part li { display: grid; gap: 1px; font-size: .9375rem; line-height: 1.35; }
.wx .wx-cfg__part li span { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-cfg__part li b { font-weight: 650; color: var(--wx-color-heading); }
.wx .wx-cfg__noprice { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px !important; font-size: .875rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-cfg__noprice .wx-ico { flex: none; margin-top: 2px; color: var(--wx-color-accent-text); }
.wx .wx-cfg__recap { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 760px) { .wx .wx-cfg__recap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx .wx-cfg__recapstep { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--wx-color-heading) 2.5%, #FFFFFF); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-cfg__recapstep header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wx .wx-cfg__recapstep h4 { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-heading); }
.wx .wx-cfg__edit { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--wx-color-accent-text); font: inherit; font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.wx .wx-cfg__recapstep dl { display: grid; gap: 8px; }
.wx .wx-cfg__recapstep dt { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-cfg__recapstep dd { font-size: .9375rem; font-weight: 650; color: var(--wx-color-heading); }
.wx .wx-cfg__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wx .wx-cfg__cta .wx-button { gap: 8px; }
.wx .wx-cfg__formgrid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 560px) { .wx .wx-cfg__formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx .wx-cfg__formgrid .wx-field--full { grid-column: 1 / -1; } }
.wx .wx-cfg__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .875rem; line-height: 1.45; color: var(--wx-color-text); cursor: pointer; }
.wx .wx-cfg__consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--wx-color-accent-text); }
.wx .wx-cfg__form .wx-form__legal { margin: 12px 0 0; }
.wx .wx-cfg__done { display: grid; justify-items: center; gap: 12px; padding: 24px 0 8px; text-align: center; }
.wx .wx-cfg__doneicon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-deep-1); box-shadow: 0 0 0 10px var(--wx-g-10); }
.wx .wx-cfg__doneicon .wx-ico { width: 30px; height: 30px; stroke-width: 3; }
.wx .wx-cfg__done .wx-cfg__lead { max-width: 560px; }
@media (max-width: 559px) { .wx .wx-cfg__nav .wx-cfg__count { order: -1; flex-basis: 100%; text-align: left; } .wx .wx-cfg__nav .wx-cfg__next { margin-left: auto; } }

/* 33. Cibles tactiles de 44 px sur mobile (règle « touch-target-size » du skill UI UX Pro Max) */
@media (max-width: 767px) {
  .wx .wx-pd__round, .wx .wx-pd__round:focus, .wx .wx-pd__toggle, .wx .wx-pd__toggle:focus { height: 44px; min-width: 44px; }
  .wx .wx-pc__chip, .wx .wx-artlist__filter { min-height: 44px; }
  .wx .wx-pc__toggle { width: 44px; height: 44px; }
}

/* 31. Impression (guides et articles, PDF du playbook) ------------------- */
@page { size: A4; margin: 16mm 14mm 18mm; }
@media print {
  html, body { background: #FFFFFF !important; }
  .wx-skip-link, .wx.wx-header, .wx.wx-footer, .wx.wx-demo, .wx-article-cta, .wx-article__head .wx-actions, .wx-crumbs, .wx-related, .wx-faq__head > p:last-child { display: none !important; }
  .wx :is(.wx-reveal, .wx-enter) { opacity: 1 !important; transform: none !important; }
  .wx.wx-article { padding-top: 0; }
  /* Bandeau de marque en tête de la première page */
  .wx .wx-article__head { padding: 0 0 8mm; margin-bottom: 6mm; border-bottom: 2px solid var(--wx-wa-green); }
  .wx .wx-article__head::before { content: "WALEXIA"; display: block; margin-bottom: 6mm; font: 800 9pt/1 var(--wx-font-text); letter-spacing: .14em; color: var(--wx-color-accent-text); }
  .wx .wx-article--resource .wx-article__head::before { content: "WALEXIA · Playbook conversationnel"; }
  .wx .wx-article__title { font-size: 26pt; line-height: 1.1; }
  .wx .wx-article__layout { display: block; }
  .wx .wx-article__toc { position: static; max-height: none; margin-bottom: 8mm; padding: 5mm 6mm; break-inside: avoid; }
  .wx .wx-article__body { max-width: none; font-size: 10.5pt; line-height: 1.55; }
  .wx .wx-article__body :is(h2) { break-before: page; break-after: avoid; }
  .wx .wx-article__body > h2:first-child { break-before: auto; }
  .wx .wx-article__body :is(h3) { break-after: avoid; }
  .wx :is(.wx-article-msg, table, tr, .wx-faq__item, li) { break-inside: avoid; }
  .wx .wx-faq { break-before: page; padding-block: 0; background: none; }
  .wx .wx-faq__item { border-color: var(--wx-color-border); }
  .wx a { color: inherit; text-decoration: none; }
}

/* 46. Tarifs : comparatif détaillé (bloc walexia/pricing-compare). Tableau dans un cadre qui défile en largeur sur petit
   écran, première colonne fixe, colonne Business mise en avant. */
.wx .wx-cmp { min-width: 0; max-width: 100%; }
/* position: relative : les textes réservés aux lecteurs d'écran (position absolue) restent dans le cadre qui défile. */
.wx .wx-cmp__scroll { position: relative; max-width: 100%; overflow-x: auto; border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md); }
.wx .wx-cmp__scroll:focus-visible { outline: 2px solid var(--wx-focus); outline-offset: 3px; }
.wx .wx-cmp__table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.wx .wx-cmp__table :is(th, td) { padding: 13px 18px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--wx-color-border); }
.wx .wx-cmp__table tbody th[scope="row"], .wx .wx-cmp__corner { position: sticky; left: 0; z-index: 1; min-width: 230px; text-align: left; background: #FFFFFF; }
.wx .wx-cmp__table tbody th[scope="row"] { font-weight: 600; color: var(--wx-color-text); }
.wx .wx-cmp__corner { vertical-align: bottom !important; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-cmp__table thead th { padding-top: 24px; padding-bottom: 20px; vertical-align: top; }
.wx .wx-cmp__name { display: block; font: 800 1.25rem/1.2 var(--wx-font-display); letter-spacing: -.015em; color: var(--wx-color-heading); }
.wx .wx-cmp__price { display: grid; gap: 2px; justify-items: center; margin: 8px 0 14px; }
.wx .wx-cmp__price b { font: 800 1.625rem/1.1 var(--wx-font-display); letter-spacing: -.025em; color: var(--wx-color-heading); }
.wx .wx-cmp__price small, .wx .wx-cmp__from { font-size: .8125rem; font-weight: 600; color: var(--wx-color-text-muted); }
.wx .wx-cmp__table .is-featured { background: color-mix(in srgb, var(--wx-color-accent) 6%, #FFFFFF); }
.wx .wx-cmp__table thead th.is-featured { background: var(--wx-grad-card); box-shadow: inset 0 4px 0 var(--wx-color-accent); }
.wx .wx-cmp__group th { padding-top: 22px; padding-bottom: 10px; text-align: left; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-color-accent-text); background: var(--wx-g-03); }
.wx .wx-cmp__table td { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--wx-color-heading); }
.wx .wx-cmp__table tbody:last-child tr:last-child > * { border-bottom: 0; }
.wx .wx-cmp__table tbody tr:not(.wx-cmp__group):hover > * { background: var(--wx-g-06); }
.wx .wx-cmp__yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wx-color-accent); color: var(--wx-color-heading); }
.wx .wx-cmp__yes .wx-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.wx .wx-cmp__no { color: var(--wx-color-text-muted); }
@media (max-width: 640px) {
  .wx .wx-cmp__table { min-width: 620px; font-size: .875rem; }
  .wx .wx-cmp__table :is(th, td) { padding: 10px 10px; }
  .wx .wx-cmp__table tbody th[scope="row"], .wx .wx-cmp__corner { min-width: 128px; max-width: 136px; font-size: .8125rem; line-height: 1.3; box-shadow: 6px 0 10px -8px color-mix(in srgb, var(--wx-color-heading) 30%, transparent); }
  .wx .wx-cmp__corner span { display: none; }
  .wx .wx-cmp__price b { font-size: 1.25rem; }
}
.wx .wx-cmp__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-cmp__note .wx-ico { flex: none; margin-top: 2px; color: var(--wx-color-accent); }

/* 47. Tarifs : conversation de service ou initiée par l'entreprise (exemples de conversations animés à l'apparition) */
.wx .wx-convtype__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .wx .wx-convtype__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx .wx-convtype { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: 28px 28px 28px 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md); }
.wx .wx-convtype--business { border-radius: 28px 8px 28px 28px; }
.wx .wx-convtype > * { margin: 0; }
.wx .wx-convtype__tag { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--wx-g-16); color: var(--wx-color-accent-text); font-size: .8125rem; font-weight: 800; }
.wx .wx-convtype--business .wx-convtype__tag { background: var(--wx-color-heading); color: #FFFFFF; }
.wx .wx-convtype__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.wx .wx-convtype__chat { display: grid; gap: 8px; padding: 16px; border-radius: 20px; background-color: #EFEAE2; background-image: radial-gradient(color-mix(in srgb, var(--wx-color-heading) 7%, transparent) 1px, transparent 1.3px); background-size: 16px 16px; }
.wx .wx-convtype__msg { max-width: 88%; margin: 0; padding: 9px 12px 6px; border-radius: 14px; font-size: .9375rem; line-height: 1.4; color: #111B21; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wx .wx-convtype__msg span { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: .6875rem; color: #667781; }
.wx .wx-convtype__msg--in { justify-self: start; background: #FFFFFF; border-top-left-radius: 4px; }
.wx .wx-convtype__msg--out { justify-self: end; background: #D9FDD3; border-top-right-radius: 4px; }
.wx .wx-convtype__msg--template small { display: block; margin-bottom: 4px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wx-color-accent-text); }
.wx .wx-convtype__ticks { width: 16px; height: 12px; fill: none; stroke: #53BDEB; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wx .wx-convtype__text { color: var(--wx-color-text-muted); }
.wx .wx-convtype__price { padding: 12px 16px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); font-size: .9375rem; line-height: 1.5; color: var(--wx-color-heading); }
.wx .wx-convtype__price b { margin-right: 4px; font: 800 1.25rem/1 var(--wx-font-display); }
.wx .wx-convtype__price a { font-weight: 700; color: var(--wx-color-accent-text); }
.wx .wx-convtype__foot { margin-top: 18px; text-align: center; font-size: .875rem; color: var(--wx-color-text-muted); }
@keyframes wx-convmsg { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-convtype .wx-convtype__msg { opacity: 0; }
  .wx .wx-convtype.is-inview .wx-convtype__msg { animation: wx-convmsg 520ms var(--wx-spring) 250ms both; }
  .wx .wx-convtype.is-inview .wx-convtype__msg + .wx-convtype__msg { animation-delay: 1000ms; }
}

/* 48. Tarifs : simulateur de budget (bloc walexia/pricing-simulator), frais Meta inclus dans la conversation */
.wx .wx-calc { display: grid; gap: 20px; }
@media (min-width: 960px) { .wx .wx-calc { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 28px; align-items: start; } }
.wx .wx-calc__form { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); }
.wx .wx-calc__cats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); min-width: 0; margin: 0; padding: 0; border: 0; }
.wx .wx-calc__cats legend { margin-bottom: 8px; padding: 0; font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-calc__cat { position: relative; display: flex; cursor: pointer; }
.wx .wx-calc__cat input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wx .wx-calc__cat span { display: grid; flex: 1; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border-strong); transition: box-shadow 160ms var(--wx-ease-soft), background-color 160ms var(--wx-ease-soft); }
.wx .wx-calc__cat b { font-size: .9375rem; color: var(--wx-color-heading); }
.wx .wx-calc__cat small { font-size: .8125rem; line-height: 1.3; color: var(--wx-color-text-muted); }
.wx .wx-calc__cat:hover span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent); }
.wx .wx-calc__cat input:checked + span { background: var(--wx-grad-card); box-shadow: inset 0 0 0 2px var(--wx-color-accent); }
.wx .wx-calc__cat input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--wx-color-accent) 70%, transparent); outline-offset: 2px; }
.wx .wx-calc__result { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 30%, transparent), transparent 70%), var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent), var(--wx-shadow-md); }
.wx .wx-calc__result > * { margin: 0; }
.wx .wx-calc__market { display: grid; gap: 2px; font: 800 1.375rem/1.2 var(--wx-font-display); letter-spacing: -.015em; color: var(--wx-color-heading); }
.wx .wx-calc__market small { font: 600 .8125rem/1.3 var(--wx-font-text); letter-spacing: 0; color: var(--wx-color-text-muted); }
.wx .wx-calc__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--wx-color-heading) 18%, transparent); }
.wx .wx-calc__lines dt { display: grid; font-weight: 600; color: var(--wx-color-text); }
.wx .wx-calc__lines dt small { font-size: .75rem; font-weight: 600; color: var(--wx-color-text-muted); }
.wx .wx-calc__lines dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wx-color-heading); white-space: nowrap; }
.wx .wx-calc__lines .is-total :is(dt, dd) { font-size: 1.0625rem; }
.wx .wx-calc__estimate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 16px 18px; border-radius: 18px; background: #FFFFFF; box-shadow: var(--wx-shadow-sm); }
.wx .wx-calc__estimate span { font-weight: 700; color: var(--wx-color-text); }
.wx .wx-calc__estimate b { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--wx-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--wx-color-heading); }
.wx .wx-calc__note { font-size: .8125rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-sim__label { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 700; color: var(--wx-color-heading); }
.wx .wx-sim .wx-billing { justify-self: start; max-width: 100%; margin: 0; }
@media (max-width: 480px) {
  .wx .wx-sim .wx-billing { gap: 2px; }
  .wx .wx-sim .wx-billing button { gap: 6px; padding: 0 10px; font-size: .875rem; white-space: nowrap; }
  .wx .wx-sim .wx-billing button span { padding: 2px 6px; }
}
.wx .wx-sim__volume label { display: block; margin-bottom: 8px; }
.wx .wx-sim__range { display: flex; align-items: center; gap: 14px; }
.wx .wx-sim__range input[type="number"] { flex: 0 0 auto; width: 7.5em; font-variant-numeric: tabular-nums; }
.wx .wx-sim__range input[type="range"] { --p: 10%; flex: 1; width: auto; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wx .wx-sim__range input[type="range"]:focus { box-shadow: none; }
.wx .wx-sim__range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 40%, transparent); }
.wx .wx-sim__range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 40%, transparent); }
.wx .wx-sim__range input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--wx-color-accent) var(--p), color-mix(in srgb, var(--wx-color-heading) 12%, transparent) var(--p)); }
.wx .wx-sim__range input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--wx-color-accent) var(--p), color-mix(in srgb, var(--wx-color-heading) 12%, transparent) var(--p)); }
.wx .wx-sim__range input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 3px solid #FFFFFF; border-radius: 50%; background: var(--wx-color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 18%, transparent), var(--wx-shadow-sm); -webkit-appearance: none; appearance: none; transition: transform 160ms var(--wx-ease-soft); }
.wx .wx-sim__range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #FFFFFF; border-radius: 50%; background: var(--wx-color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 18%, transparent), var(--wx-shadow-sm); }
.wx .wx-sim__range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.wx .wx-sim__hint { margin: 8px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--wx-color-text-muted); }
.wx .wx-sim__setup { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; color: var(--wx-color-text); }
.wx .wx-sim__setup .wx-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--wx-color-accent-text); }
.wx .wx-sim__setup b { color: var(--wx-color-heading); white-space: nowrap; }
.wx .wx-sim__cta { justify-self: start; }
.wx .wx-sim__cta .wx-ico { width: 18px; height: 18px; }
@keyframes wx-calc-bump { 0% { transform: none; } 40% { transform: scale(1.07); color: var(--wx-color-accent-text); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-calc .is-bump dd, .wx .wx-calc .wx-calc__estimate.is-bump b { display: inline-block; animation: wx-calc-bump 460ms var(--wx-spring); }
}

/* 49. Tarifs : options (bloc walexia/pricing-options), carte entière cliquable vers le configurateur */
.wx .wx-addons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.wx .wx-addon { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px 24px 24px 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-sm); transition: transform 220ms var(--wx-ease-soft), box-shadow 220ms var(--wx-ease-soft); }
.wx .wx-addon > * { margin: 0; }
.wx .wx-addon:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 55%, transparent), 0 24px 48px -30px color-mix(in srgb, var(--wx-color-accent) 80%, transparent); }
.wx .wx-addon__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 35%, transparent); color: var(--wx-color-accent); }
.wx .wx-addon__icon .wx-ico { width: 24px; height: 24px; }
.wx .wx-addon__title { font-size: 1.25rem; letter-spacing: -.015em; }
.wx .wx-addon__text { font-size: .9375rem; line-height: 1.5; color: var(--wx-color-text-muted); }
.wx .wx-addon__price { font: 800 1.125rem/1.2 var(--wx-font-display); color: var(--wx-color-heading); }
.wx .wx-addon__link { font-weight: 700; color: var(--wx-color-accent-text); text-decoration: none; }
.wx .wx-addon__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wx .wx-addon:focus-within { outline: 2px solid var(--wx-focus); outline-offset: 3px; }

/* 50. Tarifs : configurateur mis en avant (panneau, trois temps, bouton flottant) et mouvement du parcours */
.wx .wx-cfg-spot { position: relative; padding: clamp(28px, 5vw, 64px) clamp(12px, 3vw, 48px); border-radius: var(--wx-r-xl); background: radial-gradient(55% 45% at 8% 0%, color-mix(in srgb, var(--wx-color-accent) 30%, transparent), transparent 70%), radial-gradient(45% 45% at 96% 12%, color-mix(in srgb, var(--wx-color-accent) 20%, transparent), transparent 70%), var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 28%, transparent), var(--wx-shadow-md); }
.wx .wx-cfg-trio { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 1000px; margin: 0 auto clamp(22px, 3vw, 32px); padding: 0; list-style: none; }
.wx .wx-cfg-trio li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, #FFFFFF 82%, transparent); box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-cfg-trio__ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wx-color-accent); color: var(--wx-color-heading); }
.wx .wx-cfg-trio__ico .wx-ico { width: 20px; height: 20px; }
.wx .wx-cfg-trio b { font-size: .9375rem; color: var(--wx-color-heading); }
.wx .wx-cfg-trio li > span:last-child { font-size: .8125rem; line-height: 1.35; color: var(--wx-color-text-muted); }
.wx .wx-cfg-spot .wx.wx-cfg { box-shadow: inset 0 0 0 1px var(--wx-color-border), 0 40px 90px -50px color-mix(in srgb, var(--wx-color-accent-text) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-cfg-trio li { opacity: 0; }
  .wx .wx-cfg-trio.is-inview li { animation: wx-convmsg 520ms var(--wx-spring) both; animation-delay: calc(var(--i, 0) * 160ms + 150ms); }
}
/* Bouton flottant « Recevoir ma proposition » (walexia.js : sous le hero, masqué quand le configurateur est à l'écran) */
.wx .wx-stickycta { position: fixed; z-index: 55; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px 0 16px; border-radius: 999px; background: var(--wx-color-accent); color: var(--wx-color-heading); font-weight: 800; text-decoration: none; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--wx-color-accent-text) 90%, transparent), 0 0 0 4px color-mix(in srgb, #FFFFFF 85%, transparent); opacity: 0; transform: translateY(16px); transition: opacity 280ms var(--wx-ease-soft), transform 380ms var(--wx-spring); pointer-events: none; }
.wx .wx-stickycta[hidden] { display: none; }
.wx .wx-stickycta.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wx .wx-stickycta .wx-ico { width: 20px; height: 20px; }
.wx .wx-stickycta:hover { background: var(--wx-color-action-hover); }
.wx .wx-stickycta:focus-visible { outline: 3px solid var(--wx-color-heading); outline-offset: 3px; }
@media (max-width: 600px) { .wx .wx-stickycta { left: 14px; right: 14px; } }
/* Parcours du configurateur : entrée selon le sens (suivant ou précédent), questions et choix qui arrivent en cascade,
   choix qui rebondit, barre de progression qui scintille, étape en cours qui pulse. */
@keyframes wx-cfg-in-next { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes wx-cfg-in-prev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes wx-cfg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wx-cfg-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wx-cfg-pick { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes wx-cfg-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes wx-cfg-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wx-color-accent) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes wx-cfg-glow { 0%, 100% { box-shadow: var(--wx-shadow-action); } 50% { box-shadow: var(--wx-shadow-action), 0 0 0 7px color-mix(in srgb, var(--wx-color-accent) 28%, transparent); } }
@keyframes wx-cfg-draw { to { stroke-dashoffset: 0; } }
@keyframes wx-cfg-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-78px) scale(1); } }
@keyframes wx-cfg-read { 0%, 55% { color: #8696A0; } 100% { color: #53BDEB; } }
.wx .wx-cfg__bar span { background-image: linear-gradient(90deg, var(--wx-deep-3), var(--wx-color-accent) 40%, #9BEFB9 50%, var(--wx-color-accent) 60%, var(--wx-deep-3)); background-size: 200% 100%; transition: width 650ms var(--wx-ease); }
.wx .wx-cfg__ready .wx-cfg__readyticks { flex: none; align-self: flex-end; width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: #53BDEB; }
.wx .wx-cfg__done { position: relative; }
.wx .wx-cfg__donemark { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.wx .wx-cfg__donemark svg { width: 92px; height: 92px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wx .wx-cfg__donemark circle { stroke: var(--wx-color-accent); stroke-width: 4; stroke-dasharray: 190; stroke-dashoffset: 0; }
.wx .wx-cfg__donemark path { stroke: var(--wx-color-heading); stroke-width: 5; stroke-dasharray: 48; stroke-dashoffset: 0; }
.wx .wx-cfg__burst { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; }
.wx .wx-cfg__burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--wx-color-accent); opacity: 0; }
.wx .wx-cfg__burst i:nth-child(3n) { width: 8px; height: 8px; background: #53BDEB; }
.wx .wx-cfg__burst i:nth-child(4n) { border-radius: 3px; background: var(--wx-color-heading); }
.wx .wx-cfg__sent { max-width: 340px; margin: 4px auto 0 !important; padding: 9px 12px 6px; border-radius: 14px 4px 14px 14px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); color: #111B21; font-size: .9375rem; text-align: left; }
.wx .wx-cfg__sent span { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .6875rem; color: #667781; }
.wx .wx-cfg__sent svg { width: 16px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: #53BDEB; }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-cfg__panel[data-dir="next"] > :is(.wx-cfg__step, .wx-cfg__summary, .wx-cfg__form) { animation-name: wx-cfg-in-next; }
  .wx .wx-cfg__panel[data-dir="prev"] > :is(.wx-cfg__step, .wx-cfg__summary, .wx-cfg__form) { animation-name: wx-cfg-in-prev; }
  .wx .wx-cfg__step > .wx-cfg__q { animation: wx-cfg-rise 460ms var(--wx-ease) both; }
  .wx .wx-cfg__step > .wx-cfg__q:nth-of-type(2) { animation-delay: 90ms; }
  .wx .wx-cfg__step > .wx-cfg__q:nth-of-type(3) { animation-delay: 180ms; }
  .wx .wx-cfg__step > .wx-cfg__q:nth-of-type(n+4) { animation-delay: 260ms; }
  .wx .wx-cfg__opt { animation: wx-cfg-pop 380ms var(--wx-spring) both; animation-delay: calc(var(--o, 0) * 35ms + 140ms); }
  .wx .wx-cfg__opt input:checked + .wx-cfg__optbox { animation: wx-cfg-pick 380ms var(--wx-spring); }
  .wx .wx-cfg__bar span { animation: wx-cfg-shine 3s linear infinite; }
  .wx .wx-cfg__steps .is-current button span { animation: wx-cfg-ring 1.8s ease-out infinite; }
  .wx .wx-cfg__summary .wx-cfg__part { animation: wx-cfg-rise 480ms var(--wx-ease) both; }
  .wx .wx-cfg__summary .wx-cfg__part:nth-child(2) { animation-delay: 120ms; }
  .wx .wx-cfg__summary .wx-cfg__part:nth-child(3) { animation-delay: 240ms; }
  .wx .wx-cfg__ready .wx-cfg__readyticks { animation: wx-cfg-read 1.6s ease both; }
  .wx .wx-cfg__summary .wx-cfg__cta .wx-button--primary { animation: wx-cfg-glow 2.4s ease-in-out 1.2s infinite; }
  .wx .wx-cfg__donemark circle { stroke-dashoffset: 190; animation: wx-cfg-draw 700ms var(--wx-ease) 100ms forwards; }
  .wx .wx-cfg__donemark path { stroke-dashoffset: 48; animation: wx-cfg-draw 420ms var(--wx-ease) 650ms forwards; }
  .wx .wx-cfg__burst i { animation: wx-cfg-burst 900ms var(--wx-ease) 600ms both; }
  .wx .wx-cfg__sent { animation: wx-convmsg 520ms var(--wx-spring) 900ms both; }
  .wx .wx-cfg__sent svg { animation: wx-cfg-read 1.6s ease 1.4s both; }
  .wx .wx-stickycta .wx-ico { animation: wx-cfg-ring 2.2s ease-out infinite; border-radius: 50%; }
}
/* 51. Panneau « Walexia en action dans votre secteur » ([data-wx-nudge], pied de page) : carte discrète en bas à droite,
   non bloquante ; au-dessus de la pastille des cookies sur mobile. Liens du pied de page neutralisés (couleur, soulignement). */
.wx .wx-nudge { --wx-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); position: fixed; z-index: 60; right: clamp(12px, 2.4vw, 24px); bottom: clamp(12px, 2.4vw, 24px); width: min(380px, calc(100vw - 24px)); padding: 20px 20px 18px; border-radius: 26px; color: var(--wx-color-heading); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--wx-color-accent) 22%, transparent), transparent 60%), #FFFFFF; box-shadow: 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 8%, transparent), 0 32px 64px -30px color-mix(in srgb, var(--wx-color-heading) 60%, transparent); opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; transition: opacity 320ms var(--wx-ease), transform 460ms var(--wx-spring); }
.wx .wx-nudge[hidden] { display: none; }
.wx .wx-nudge.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wx .wx-nudge > * { margin: 0; }
.wx .wx-nudge__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--wx-color-heading); background: color-mix(in srgb, var(--wx-color-accent) 14%, #FFFFFF); cursor: pointer; }
.wx .wx-nudge__close::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--wx-i-x) center / contain no-repeat; mask: var(--wx-i-x) center / contain no-repeat; }
.wx .wx-nudge__close:hover { background: var(--wx-color-accent); }
.wx .wx-nudge__close:focus-visible { outline: 3px solid var(--wx-color-accent); outline-offset: 2px; }
.wx.wx-footer .wx-nudge__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-deep-3); }
.wx .wx-nudge__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wx-color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-color-accent) 25%, transparent); }
.wx.wx-footer .wx-nudge__title { margin: 0 40px 6px 0; font: 800 1.1875rem/1.25 var(--wx-font-display); letter-spacing: -.015em; color: var(--wx-color-heading); }
.wx.wx-footer .wx-nudge__text { margin-bottom: 14px; font-size: .875rem; line-height: 1.5; color: var(--wx-footer-muted); }
.wx.wx-footer .wx-nudge__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.wx.wx-footer .wx-nudge__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; white-space: nowrap; padding: 0 13px 0 11px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--wx-color-heading); text-decoration: none; background: color-mix(in srgb, var(--wx-color-accent) 10%, #FFFFFF); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-heading) 9%, transparent); transition: background-color 160ms var(--wx-ease-soft), transform 200ms var(--wx-ease); }
.wx .wx-nudge__chip::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--wx-chip-i) center / contain no-repeat; mask: var(--wx-chip-i) center / contain no-repeat; }
.wx.wx-footer .wx-nudge__chip:hover { color: var(--wx-color-heading); text-decoration: none; background: var(--wx-color-accent); transform: translateY(-1px); }
.wx.wx-footer .wx-nudge__cta { width: 100%; color: var(--wx-color-on-action); text-decoration: none; }
.wx.wx-footer .wx-nudge__cta:hover { color: var(--wx-color-on-action); text-decoration: none; }
@media (max-width: 640px) {
  .wx .wx-nudge { right: 10px; bottom: 62px; width: calc(100vw - 20px); padding: 16px 16px 14px; border-radius: 22px; }
  .wx.wx-footer .wx-nudge__text { display: none; }
  .wx.wx-footer .wx-nudge__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px; scrollbar-width: none; }
  .wx.wx-footer .wx-nudge__chips::-webkit-scrollbar { display: none; }
  .wx.wx-footer .wx-nudge__chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .wx .wx-nudge { transition: none; transform: none; } }

/* 52. Tarifs (projets personnalisés, 26/10/2026) : frise des composantes sur douze mois, « des conversations, pas des
   messages » mis en avant, projet en direct à côté du configurateur. Fonds verts : dégradés clairs de #34D36B. */
.wx .wx-ptime { margin: 0 0 clamp(26px, 3.5vw, 40px); padding: clamp(18px, 3vw, 32px); border-radius: var(--wx-r-xl); background: radial-gradient(60% 80% at 100% 0%, var(--wx-g-16), transparent 70%), #FFFFFF; box-shadow: inset 0 0 0 1px var(--wx-color-border), var(--wx-shadow-md); }
.wx .wx-ptime__chart { display: grid; gap: 12px; }
.wx .wx-ptime__row { display: grid; grid-template-columns: minmax(118px, 168px) minmax(0, 1fr); align-items: end; gap: 14px; }
.wx .wx-ptime__label { display: grid; gap: 2px; margin: 0; }
.wx .wx-ptime__label b { font: 800 1.0625rem/1.2 var(--wx-font-display); color: var(--wx-color-heading); }
.wx .wx-ptime__label span { font-size: .8125rem; font-weight: 650; color: var(--wx-color-text-muted); }
.wx .wx-ptime__track { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: clamp(3px, .6vw, 7px); align-items: end; height: 46px; }
.wx .wx-ptime__row--conv .wx-ptime__track { height: 74px; }
.wx .wx-ptime__track i { grid-row: 1; height: 100%; border-radius: 9px; transform-origin: bottom; }
.wx .wx-ptime__row--setup i { height: 100%; background: var(--wx-color-heading); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--wx-color-heading) 80%, transparent); }
.wx .wx-ptime__row--run i { height: 70%; background: var(--wx-color-accent); }
.wx .wx-ptime__row--conv i { height: var(--h, 50%); background: linear-gradient(180deg, color-mix(in srgb, var(--wx-color-accent) 55%, #FFFFFF), var(--wx-g-16)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wx-color-accent) 60%, transparent); }
.wx .wx-ptime__row--axis { align-items: start; padding-top: 8px; border-top: 1px dashed var(--wx-color-border-strong); }
.wx .wx-ptime__row--axis .wx-ptime__track { height: auto; }
.wx .wx-ptime__row--axis em { grid-row: 1; justify-self: center; font-size: .75rem; font-style: normal; font-weight: 700; color: var(--wx-color-text-muted); white-space: nowrap; }
.wx .wx-ptime__row--axis em:first-child { justify-self: start; }
.wx .wx-ptime__note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); font-size: .9375rem; font-weight: 650; line-height: 1.45; color: var(--wx-color-heading); }
.wx .wx-ptime__note .wx-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--wx-color-accent-text); }
@media (min-width: 900px) { .wx .wx-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .wx .wx-ptime__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wx .wx-ptime__row--axis em:nth-child(2) { display: none; }
  .wx .wx-ptime__row--axis > span { display: none; }
  .wx .wx-ptime__label { grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-ptime .wx-ptime__track i { transform: scaleY(0); }
  .wx .wx-ptime.is-inview .wx-ptime__track i { animation: wx-ptime-grow 620ms var(--wx-spring) both; animation-delay: calc(var(--d, 0) * 70ms + 200ms); }
  .wx .wx-ptime.is-inview .wx-ptime__row--run i { animation-delay: calc(var(--d, 0) * 70ms + 450ms); }
  .wx .wx-ptime.is-inview .wx-ptime__row--conv i { animation-delay: calc(var(--d, 0) * 70ms + 700ms); }
}
@keyframes wx-ptime-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* « Vous payez des conversations, pas des messages » mis en avant : titre agrandi, rangée de messages = 1 conversation. */
.wx .wx-convtypes--spot .wx-title { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); }
.wx .wx-convcount { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 0 auto clamp(26px, 3.5vw, 40px); }
.wx .wx-convcount__msgs { display: flex; align-items: flex-end; gap: 6px; padding: 14px 18px; border-radius: 22px; background: #EFEAE2; box-shadow: inset 0 0 0 1px var(--wx-color-border); }
.wx .wx-convcount__msgs i { display: block; width: 34px; height: 20px; border-radius: 10px 10px 10px 3px; background: #FFFFFF; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wx .wx-convcount__msgs i.is-out { margin-bottom: 8px; border-radius: 10px 10px 3px 10px; background: #D9FDD3; }
.wx .wx-convcount__eq { font: 800 2rem/1 var(--wx-font-display); color: var(--wx-color-heading); }
.wx .wx-convcount__one { padding: 14px 24px; border-radius: 999px; background: var(--wx-color-accent); color: var(--wx-color-heading); font: 800 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1 var(--wx-font-display); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--wx-color-accent-text) 90%, transparent), 0 0 0 6px color-mix(in srgb, var(--wx-color-accent) 22%, transparent); }
.wx .wx-convtype__count { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--wx-grad-card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); font-size: .9375rem; font-weight: 750; color: var(--wx-color-heading); }
.wx .wx-convtype__count .wx-ico { flex: none; width: 20px; height: 20px; color: var(--wx-color-accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .wx-js .wx .wx-convcount .wx-convcount__msgs i, .wx-js .wx .wx-convcount .wx-convcount__one { opacity: 0; }
  .wx .wx-convcount.is-inview .wx-convcount__msgs i { animation: wx-convmsg 420ms var(--wx-spring) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .wx .wx-convcount.is-inview .wx-convcount__one { animation: wx-cfg-pop 520ms var(--wx-spring) 1250ms both; }
}

/* Configurateur : projet en direct à droite des questions (grand écran), avancement en anneau. */
.wx .wx-cfg__layout { display: grid; gap: 24px; }
.wx .wx-cfg__main { min-width: 0; }
.wx .wx-cfg__live { display: none; }
@media (min-width: 980px) {
  .wx.wx-cfg { max-width: 1160px; }
  .wx .wx-cfg__layout.has-live { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .wx .wx-cfg__layout.has-live .wx-cfg__live { position: sticky; top: 110px; display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 30px); padding: 18px; border-radius: 24px; background: radial-gradient(80% 60% at 100% 0%, var(--wx-g-16), transparent 70%), var(--wx-g-06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wx-color-accent) 30%, transparent); }
}
.wx .wx-cfg__live p { margin: 0; }
.wx .wx-cfg__livehead { display: flex; align-items: center; gap: 12px; }
.wx .wx-cfg__livehead > span:last-child { display: grid; gap: 1px; }
.wx .wx-cfg__livehead b { font-size: 1rem; color: var(--wx-color-heading); }
.wx .wx-cfg__livehead small { font-size: .8125rem; color: var(--wx-color-text-muted); }
.wx .wx-cfg__livering { --p: 0; display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--wx-color-accent) calc(var(--p) * 1%), color-mix(in srgb, var(--wx-color-heading) 8%, transparent) 0); }
.wx .wx-cfg__livering b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; font-size: .8125rem !important; font-weight: 800; }
.wx .wx-cfg__livelist { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.wx .wx-cfg__livelist li { display: grid; gap: 3px; }
.wx .wx-cfg__livelist span { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-color-text-muted); }
.wx .wx-cfg__livelist b { justify-self: start; display: flex; align-items: flex-end; gap: 6px; max-width: 100%; padding: 7px 10px 6px; border-radius: 12px 12px 4px 12px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); font-size: .8125rem; font-weight: 650; line-height: 1.35; color: #111B21; overflow-wrap: anywhere; }
.wx .wx-cfg__livelist b svg { flex: none; width: 14px; height: 11px; fill: none; stroke: #53BDEB; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wx .wx-cfg__livelist .is-empty b { background: color-mix(in srgb, #FFFFFF 70%, transparent); box-shadow: inset 0 0 0 1px var(--wx-color-border); color: var(--wx-color-text-muted); }
.wx .wx-cfg__livefoot { font-size: .8125rem; line-height: 1.45; color: var(--wx-color-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .wx .wx-cfg__livelist .is-new b { animation: wx-convmsg 420ms var(--wx-spring) both; }
}